/* =========================================================================
   Gentle Wellness -- landing pages
   =========================================================================
   Shared by the two segment pages: / for the person who will do the
   activities, /for-parents for the adult child signing someone up.

   Consumes --gw-* tokens from site.css and declares no palette of its own.

   The two pages deliberately do NOT share a hero shape:

     /            light hero, two columns, signup card sits in the right
                  column so the form is visible without scrolling. The
                  reader is the buyer and the decision is small.

     /for-parents dark hero, one column, a button that jumps to a signup
                  card placed further down. This reader has an objection
                  ("she will not accept help") that has to be answered
                  before the form means anything.

   Keep it that way. Putting the form in the caregiver hero asks for a
   decision before the argument that earns it.
   ========================================================================= */

/* =========================================================================
   1. Segment switch
   =========================================================================
   Rendered into the site header in place of Privacy and Terms, which live
   in the footer. One bar rather than two stacked ones.

   Real links, not buttons: each segment is its own URL, so this works with
   JavaScript off, can be opened in a new tab, and can be sent to a sibling.
   aria-current marks the page you are on rather than relying on colour. */
.segment-switch {
    display: flex;
    gap: var(--gw-space-1);
    flex-wrap: wrap;
}

.segment-switch__option {
    display: inline-flex;
    align-items: center;
    min-height: var(--gw-touch);
    padding: 0 var(--gw-space-3);
    border-radius: 999px;
    border: 2px solid var(--gw-border-strong);
    background: var(--gw-surface);
    color: var(--gw-link);
    font-size: var(--gw-text-base);
    font-weight: 700;
    text-decoration: none;
}

.segment-switch__option:hover {
    background: var(--gw-surface-sand);
    text-decoration: none;
}

/* The current segment. Stated with aria-current as well, so it does not
   depend on seeing the fill. */
.segment-switch__option[aria-current="page"],
.segment-switch__option[aria-current="page"]:visited {
    background: var(--gw-forest);
    border-color: var(--gw-forest);
    color: #FFFFFF;
}

/* On the caregiver page the header sits on the dark hero, so the pills
   invert: the current one is the white fill, the other is an outline. */
.site-header--dark .segment-switch__option {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.55);
    color: #FFFFFF;
}

.site-header--dark .segment-switch__option:hover {
    background: rgba(255, 255, 255, 0.12);
}

.site-header--dark .segment-switch__option[aria-current="page"],
.site-header--dark .segment-switch__option[aria-current="page"]:visited {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--gw-forest);
}

/* The header lays out logo and pills in a row; on a phone the two pills need
   to drop onto their own line rather than squeeze the logo. */
@media (max-width: 34rem) {
    .site-header__inner { flex-wrap: wrap; row-gap: var(--gw-space-2); }
    .segment-switch { width: 100%; }
    .segment-switch__option { flex: 1 1 auto; justify-content: center; }
}

/* =========================================================================
   2. Hero -- reader page (light, two columns)
   ========================================================================= */
.hero-split {
    background: var(--gw-bg);
    border-bottom: 1px solid var(--gw-border);
}

.hero-split__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 27.5rem;
    gap: var(--gw-space-6);
    align-items: start;
    padding-block: var(--gw-space-5) var(--gw-space-6);
}

.hero-eyebrow {
    display: block;
    font-size: var(--gw-text-sm);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--gw-link);
    margin-bottom: var(--gw-space-2);
}

.hero-headline {
    font-size: var(--gw-text-3xl);
    line-height: 1.15;
    color: var(--gw-forest);
    margin: 0 0 var(--gw-space-3);
    max-width: 24ch;
}

.hero-body {
    font-size: var(--gw-text-base);
    color: var(--gw-ink);
    max-width: 44ch;
    margin: 0;
}

/* The cadence clause is the whole product in one sentence, so it is the
   only thing bolded on the page. */
.hero-body strong { color: var(--gw-forest); }

@media (min-width: 60rem) {
    .hero-headline { font-size: 3.125rem; }
}

/* ---- Cadence strip: 3 Monday, 2 Wednesday, 1 Friday --------------------
   Sits under the hero copy. A short coloured rule over each numeral is the
   only place the brand surfaces appear as marks rather than backgrounds --
   they carry no meaning on their own, so nothing is lost if they are not
   distinguishable. */
.cadence {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gw-space-4);
    margin: var(--gw-space-5) 0 0;
    padding: 0;
    list-style: none;
}

.cadence__item { min-width: 6rem; }

.cadence__rule {
    display: block;
    width: 4rem;
    height: 4px;
    border-radius: 2px;
    background: var(--gw-sage);
    margin-bottom: var(--gw-space-2);
}

.cadence__item--wed .cadence__rule { background: var(--gw-mist); }
.cadence__item--fri .cadence__rule { background: var(--gw-sand); }

.cadence__count {
    display: block;
    font-family: var(--gw-font-display);
    font-size: var(--gw-text-2xl);
    line-height: 1;
    font-weight: 700;
    color: var(--gw-forest);
    margin-bottom: var(--gw-space-1);
}

.cadence__day {
    display: block;
    font-size: var(--gw-text-sm);
    color: var(--gw-ink);
}

.cadence__what {
    display: block;
    font-size: var(--gw-text-sm);
    color: var(--gw-ink-muted);
}

/* =========================================================================
   3. Hero -- caregiver page (dark, one column)
   ========================================================================= */
.hero-dark {
    background: var(--gw-forest);
    color: #FFFFFF;
    padding-block: var(--gw-space-5) var(--gw-space-6);
}

.hero-dark .hero-eyebrow { color: var(--gw-sand); }

/* The dark hero has the full container to itself rather than a grid column,
   so the headline needs its own measure or it runs to 1140px. */
.hero-dark .hero-headline {
    color: #FFFFFF;
    max-width: 26ch;
}

.hero-dark .hero-body {
    color: #E4EDE6;
    max-width: 54ch;
}

.hero-dark .hero-body strong { color: #FFFFFF; }

/* Button and its reassurance sit on one line on a wide screen, and stack
   on a narrow one. */
.hero-dark__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gw-space-3);
    margin-top: var(--gw-space-4);
}

.hero-dark__note {
    margin: 0;
    color: #E4EDE6;
    font-size: var(--gw-text-base);
    max-width: 32ch;
}

/* On dark, the primary button inverts: forest-on-white rather than
   white-on-forest, which would disappear into the band. */
.hero-dark .gw-btn--primary {
    background: #FFFFFF;
    border-color: #FFFFFF;
    color: var(--gw-forest);
}

.hero-dark .gw-btn--primary:hover {
    background: var(--gw-sand);
    border-color: var(--gw-sand);
    color: var(--gw-forest-deep);
}

/* =========================================================================
   4. Signup card
   =========================================================================
   One card, two placements: the right column of the reader hero, and the
   right column of the caregiver page's "what they get" band. It carries no
   outer margin so the grid that holds it decides where it sits. */
.signup-card {
    background: var(--gw-surface);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius-lg);
    box-shadow: var(--gw-shadow-lg);
    padding: var(--gw-space-4);
}

.signup-card__title {
    font-size: var(--gw-text-xl);
    color: var(--gw-forest);
    margin: 0 0 var(--gw-space-1);
}

.signup-card__note {
    font-size: var(--gw-text-base);
    color: var(--gw-ink-muted);
    margin: 0 0 var(--gw-space-3);
}

.signup-card__field { margin-bottom: var(--gw-space-3); }

.signup-card__reassure {
    margin: var(--gw-space-2) 0 0;
    font-size: var(--gw-text-sm);
    color: var(--gw-ink-muted);
    text-align: center;
}

/* Sticky so the form stays in view as the reader scans the hero copy on a
   tall screen. Disabled where it would be taller than the viewport. */
@media (min-width: 60rem) and (min-height: 46rem) {
    .hero-split .signup-card {
        position: sticky;
        top: var(--gw-space-2);
    }
}

/* =========================================================================
   5. Pain / answer rows
   =========================================================================
   A quoted worry, then what we actually send for it. The quote carries the
   weight, so it is the larger of the two. */
.pain-rows {
    margin-top: var(--gw-space-4);
    border-top: 1px solid var(--gw-border);
}

.pain-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: var(--gw-space-5);
    align-items: start;
    padding-block: var(--gw-space-4);
    border-bottom: 1px solid var(--gw-border);
}

.pain-row__quote {
    font-family: var(--gw-font-display);
    font-size: var(--gw-text-xl);
    line-height: 1.35;
    color: var(--gw-forest);
    margin: 0;
}

.pain-row__day {
    display: block;
    font-size: var(--gw-text-sm);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gw-link);
    margin-bottom: var(--gw-space-1);
}

.pain-row__answer { margin: 0; }

@media (max-width: 48rem) {
    .pain-row {
        grid-template-columns: 1fr;
        gap: var(--gw-space-2);
    }
}

/* =========================================================================
   6. Section head with a note alongside it
   ========================================================================= */
.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--gw-space-2) var(--gw-space-4);
    margin-bottom: var(--gw-space-4);
}

.section-head h2 { margin: 0; }

.section-head__note {
    margin: 0;
    color: var(--gw-ink-muted);
    font-size: var(--gw-text-base);
    max-width: 40ch;
}

/* =========================================================================
   7. Sample of a real email
   =========================================================================
   Shown because nothing here is behind a login, and the strongest argument
   is the actual thing rather than a description of it. */
.sample-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gw-space-3);
}

.sample-card {
    background: var(--gw-surface);
    border: 1px solid var(--gw-border);
    border-left: 4px solid var(--gw-sage);
    border-radius: var(--gw-radius);
    padding: var(--gw-space-3);
}

.sample-card__eyebrow {
    display: block;
    font-size: var(--gw-text-sm);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gw-ink-muted);
    margin-bottom: var(--gw-space-1);
}

.sample-card__title {
    font-family: var(--gw-font-display);
    font-size: var(--gw-text-xl);
    line-height: 1.25;
    font-weight: 700;
    color: var(--gw-forest);
    margin: 0 0 var(--gw-space-1);
}

.sample-card__meta {
    font-size: var(--gw-text-base);
    color: var(--gw-ink-muted);
    margin: 0;
}

/* The whole card is the link rather than a "read more" beneath it: a target
   this size is far kinder to an unsteady hand than a line of text, and it is
   the card the reader is already looking at. The title keeps the underline so
   the card still reads as a link and not as decoration. */
a.sample-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

a.sample-card .sample-card__title {
    text-decoration: underline;
}

a.sample-card:hover {
    border-left-color: var(--gw-forest);
    background: var(--gw-surface-raised, var(--gw-surface));
}

a.sample-card:focus-visible {
    outline: 3px solid var(--gw-link);
    outline-offset: 2px;
}

@media (max-width: 60rem) {
    .sample-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   8. Trust strip (dark, four columns, no heading)
   ========================================================================= */
.trust-strip {
    background: var(--gw-forest);
    color: #FFFFFF;
    padding-block: var(--gw-space-5);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gw-space-4);
}

.trust-grid h3 {
    font-size: var(--gw-text-xl);
    color: #FFFFFF;
    margin: 0 0 var(--gw-space-1);
}

.trust-grid p {
    margin: 0;
    color: #E4EDE6;
    font-size: var(--gw-text-base);
}

@media (max-width: 60rem) {
    .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
    .trust-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   9. Objection cards (caregiver page)
   ========================================================================= */
.objection-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gw-space-3);
    margin-top: var(--gw-space-4);
}

.objection {
    background: var(--gw-bg);
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius);
    padding: var(--gw-space-3);
}

.objection h3 {
    font-size: var(--gw-text-xl);
    line-height: 1.3;
    color: var(--gw-forest);
    margin: 0 0 var(--gw-space-2);
}

.objection p {
    margin: 0;
    color: var(--gw-ink-muted);
}

@media (max-width: 60rem) {
    .objection-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   10. Two-column bands
   ========================================================================= */
.split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gw-space-5);
    align-items: start;
}

@media (max-width: 48rem) {
    .split { grid-template-columns: 1fr; gap: var(--gw-space-4); }
}

/* The "what they get / what you get" band: argument left, form right. */
.split-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 28rem;
    gap: var(--gw-space-6);
    align-items: start;
}

@media (max-width: 60rem) {
    .split-form { grid-template-columns: 1fr; }
}

/* ---- Column label ------------------------------------------------------
   The rule is what separates two columns being compared side by side, so it
   belongs to the comparison and not to the label. A label introducing a
   single list takes the --plain variant. */
.col-label {
    display: block;
    font-size: var(--gw-text-sm);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gw-link);
    padding-bottom: var(--gw-space-1);
    border-bottom: 2px solid var(--gw-border-strong);
    margin-bottom: var(--gw-space-2);
}

.col-label--plain {
    padding-bottom: 0;
    border-bottom: 0;
}

/* ---- Ticked list ------------------------------------------------------- */
.ticks {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--gw-space-3);
}

.ticks li {
    display: grid;
    grid-template-columns: 1.5rem 1fr;
    gap: var(--gw-space-2);
    align-items: start;
}

.ticks li::before {
    content: "\2713";
    color: var(--gw-link);
    font-weight: 700;
}

/* ---- Research note -----------------------------------------------------
   Citations sit in a quieter register than the claim they support, but stay
   above 4.5:1 -- they are the evidence, not decoration. */
.research {
    margin: var(--gw-space-3) 0 0;
    font-size: var(--gw-text-sm);
    line-height: 1.6;
    color: var(--gw-ink-muted);
}

/* =========================================================================
   11. Numbered steps
   ========================================================================= */
.steps {
    list-style: none;
    margin: var(--gw-space-4) 0 0;
    padding: 0;
    display: grid;
    gap: var(--gw-space-3);
}

.step {
    display: grid;
    grid-template-columns: 2.5rem 1fr;
    gap: var(--gw-space-2);
    align-items: start;
}

.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--gw-forest);
    color: #FFFFFF;
    font-family: var(--gw-font-display);
    font-size: var(--gw-text-base);
    font-weight: 700;
}

.step h3 {
    font-size: var(--gw-text-xl);
    margin: 0 0 0.25rem;
}

.step p {
    color: var(--gw-ink-muted);
    margin: 0;
}

/* =========================================================================
   12. FAQ
   ========================================================================= */
.faq {
    max-width: 780px;
    margin-inline: auto;
}

.faq__item {
    border: 1px solid var(--gw-border);
    border-radius: var(--gw-radius);
    background: var(--gw-surface);
    margin-bottom: var(--gw-space-2);
    overflow: hidden;
}

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--gw-space-2);
    min-height: var(--gw-touch);
    padding: var(--gw-space-3);
    font-family: var(--gw-font-display);
    font-size: var(--gw-text-xl);
    font-weight: 700;
    color: var(--gw-forest);
    cursor: pointer;
    list-style: none;
}

.faq__item summary::-webkit-details-marker { display: none; }

.faq__item summary::after {
    content: "+";
    font-size: var(--gw-text-2xl);
    line-height: 1;
    color: var(--gw-link);
}

.faq__item[open] summary::after { content: "\2212"; }

.faq__item summary:hover { background: var(--gw-surface-mist); }

.faq__answer {
    padding: 0 var(--gw-space-3) var(--gw-space-3);
    color: var(--gw-ink-muted);
}

.faq__answer p { margin-bottom: 0; }

/* =========================================================================
   13. Closing bands
   ========================================================================= */

/* Reader page: centred, on white. */
.closing-centred {
    text-align: center;
    padding-block: var(--gw-space-6);
}

.closing-centred h2 { margin: 0 0 var(--gw-space-2); }

.closing-centred p {
    color: var(--gw-ink-muted);
    font-size: var(--gw-text-lg);
    margin: 0 auto var(--gw-space-4);
}

/* Caregiver page: sand band, copy left and the button right. */
.closing-band {
    background: var(--gw-sand);
    padding-block: var(--gw-space-5);
}

.closing-band__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gw-space-3) var(--gw-space-4);
}

.closing-band h2 { margin: 0 0 var(--gw-space-1); }

.closing-band p {
    margin: 0;
    color: var(--gw-ink);
    max-width: 40ch;
}

/* =========================================================================
   14. Narrow screens
   =========================================================================
   The hero collapses to one column. The signup card moves BELOW the copy
   rather than above it: on a phone the headline is what tells someone
   whether the form is worth filling in. */
@media (max-width: 60rem) {
    .hero-split__inner {
        grid-template-columns: 1fr;
        gap: var(--gw-space-4);
        padding-block: var(--gw-space-4) var(--gw-space-5);
    }

    .hero-headline { max-width: none; }
    .cadence { margin-top: var(--gw-space-4); }
}