/* ──────────────────────────────────────────────────────────────────────────────────────────────
   /guide — the chooser and the four scenario pages.

   Owner, 2026-10-29: most visitors are on a phone, so this is written for a phone first and widened
   afterwards. Cards are full-width rows a thumb can hit, answers start collapsed so the page does not
   become a scroll nobody finishes, and nothing depends on hover.
   ────────────────────────────────────────────────────────────────────────────────────────────── */

.guide-chooser {
    display: grid;
    gap: 12px;
}

.guide-card {
    display: flex;
    align-items: center;
    gap: 14px;
    /* 64px of height before the text even starts: a thumb target, not a link in a paragraph. */
    min-height: 64px;
    padding: 16px 18px;
    border: 1px solid rgba(58, 173, 184, .28);
    border-radius: 16px;
    background: #fff;
    color: #0f444a;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(15, 68, 74, .05);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.guide-card:hover,
.guide-card:focus {
    border-color: #3aadb8;
    box-shadow: 0 8px 22px rgba(15, 68, 74, .12);
    color: #0f444a;
    text-decoration: none;
}

.guide-card:active { transform: scale(.995); }

.guide-card__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(58, 173, 184, .12);
    color: #16737d;
    font-size: 20px;
}

.guide-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.guide-card__title { font-weight: 800; font-size: 16px; line-height: 1.5; }

.guide-card__body { font-size: 14px; line-height: 1.8; color: #51676b; }

.guide-card__go { margin-inline-start: auto; color: #8fb3b7; font-size: 22px; }

.guide-chooser--compact .guide-card { min-height: 56px; padding: 12px 16px; }

/* ── a card with a face ─────────────────────────────────────────────────────────────────────────
   Owner, 2026-10-29: four identical white rows read as a list of links, not a choice worth making.
   Each audience gets a colour of its own, a tinted tile, and its own icon again as a large, faint
   shape behind the text — drawn from the icon already there, so no images to load or maintain. */

.guide-card {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

/* the colour band down the leading edge */
.guide-card::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 5px;
    background: var(--guide-accent, #3aadb8);
}

.guide-card__watermark {
    position: absolute;
    inset-inline-end: -14px;
    bottom: -28px;
    font-size: 86px;
    line-height: 1;
    color: var(--guide-accent, #3aadb8);
    opacity: .07;
    z-index: -1;
    pointer-events: none;
}

.guide-card__icon {
    background: var(--guide-tint, rgba(58, 173, 184, .12));
    color: var(--guide-accent, #16737d);
}

.guide-card:hover, .guide-card:focus { border-color: var(--guide-accent, #3aadb8); }

.guide-card__go { color: var(--guide-accent, #8fb3b7); opacity: .55; }

/* one hue per audience — the same four wherever a card appears */
.guide-card[data-scenario="visitor"]    { --guide-accent: #2f8fa8; --guide-tint: rgba(47, 143, 168, .12); }
.guide-card[data-scenario="client"]     { --guide-accent: #2f9e74; --guide-tint: rgba(47, 158, 116, .12); }
.guide-card[data-scenario="specialist"] { --guide-accent: #7a5cc4; --guide-tint: rgba(122, 92, 196, .12); }
.guide-card[data-scenario="org"]        { --guide-accent: #c2772f; --guide-tint: rgba(194, 119, 47, .12); }

.guide-chooser--compact .guide-card__watermark { font-size: 60px; bottom: -20px; }

@media (prefers-reduced-motion: no-preference) {
    .guide-card__watermark { transition: opacity .18s ease, transform .18s ease; }
    .guide-card:hover .guide-card__watermark { opacity: .12; transform: scale(1.06); }
}

.guide-chooser--compact .guide-card__icon { width: 36px; height: 36px; font-size: 17px; }
.guide-chooser--compact .guide-card__title { font-size: 15px; }

/* ── the scenario page ───────────────────────────────────────────────────────────────────────── */

.guide-audience {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 15px;
    line-height: 1.9;
    color: #2d5c62;
}

.guide-audience .fa { color: #16737d; font-size: 18px; }

.guide-steps {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: grid;
    gap: 18px;
}

.guide-step { display: flex; align-items: flex-start; gap: 14px; }

.guide-step__num {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #16737d;
    color: #fff;
    font-weight: 800;
    font-size: 15px;
}

.guide-step__text { min-width: 0; }

.guide-step__title { margin: 4px 0 6px; font-size: 16px; font-weight: 800; color: #0f444a; }

.guide-step__body { margin: 0; font-size: 15px; line-height: 2; color: #44595d; text-align: justify; }

/* ── questions ───────────────────────────────────────────────────────────────────────────────── */

.guide-qa { display: grid; gap: 10px; }

.guide-qa__item {
    border: 1px solid rgba(58, 173, 184, .22);
    border-radius: 14px;
    background: #fff;
    padding: 0;
    overflow: hidden;
}

.guide-qa__q {
    cursor: pointer;
    list-style: none;
    padding: 15px 18px;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.8;
    color: #0f444a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.guide-qa__q::-webkit-details-marker { display: none; }

.guide-qa__q::after {
    content: "+";
    margin-inline-start: auto;
    font-size: 20px;
    font-weight: 400;
    color: #16737d;
    line-height: 1;
}

.guide-qa__item[open] .guide-qa__q::after { content: "\2212"; }

.guide-qa__item[open] .guide-qa__q { background: rgba(58, 173, 184, .07); }

.guide-qa__a {
    margin: 0;
    padding: 4px 18px 16px;
    font-size: 15px;
    line-height: 2;
    color: #44595d;
    text-align: justify;
}

/* ── buttons ─────────────────────────────────────────────────────────────────────────────────── */

.guide-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.guide-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 48px: the smallest target that is comfortable with a thumb. */
    min-height: 48px;
    padding: 0 22px;
    border-radius: 12px;
    border: 1px solid rgba(58, 173, 184, .4);
    background: #fff;
    color: #16737d;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}

.guide-btn:hover, .guide-btn:focus { background: #f2fafb; color: #0f5b63; text-decoration: none; }

.guide-btn--primary { background: #16737d; border-color: #16737d; color: #fff; }

.guide-btn--primary:hover, .guide-btn--primary:focus { background: #0f5b63; color: #fff; }

@media (max-width: 575px) {
    /* One per row, edge to edge — nothing to aim for sideways. */
    .guide-actions { flex-direction: column; }
    .guide-btn { width: 100%; }
    .guide-card { padding: 14px 15px; gap: 12px; }
    .guide-card__body { font-size: 13.5px; }
    .guide-step__body, .guide-qa__a { text-align: start; }
}

@media (min-width: 768px) {
    .guide-chooser { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .guide-chooser--compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}