body { background: var(--cream); }
  .page { max-width: 1440px; width: 100%; margin: 0 auto; }

  /* Top nav ------------------------------------------------------ */
  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--s-5) var(--s-8);
    border-bottom: 1px solid var(--rule);
    background: var(--cream);
    position: sticky; top: 0; z-index: 50;
  }
  .nav-links {
    display: flex;
    gap: 36px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
  }
  .nav-links a {
    position: relative;
    padding: 6px 0;
  }
  .nav-links a:hover { color: var(--forest); }
  .nav-cta {
    display: flex;
    gap: var(--s-3);
    align-items: center;
  }

  /* Hero --------------------------------------------------------- */
  .hero {
    padding: 88px 64px 104px;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 80px;
    align-items: center;
    position: relative;
  }
  .hero h1 {
    font-size: var(--t-hero);
    line-height: 0.96;
    letter-spacing: -0.03em;
    font-weight: 700;
    color: var(--ink);
  }
  .hero h1 .terra { color: var(--forest); font-style: italic; font-weight: 600; }
  .hero p.lead {
    margin-top: 28px;
    font-size: 20px;
    line-height: 1.45;
    color: var(--ink-soft);
    max-width: 540px;
  }
  .hero-actions {
    margin-top: 36px;
    display: flex;
    gap: 14px;
    align-items: center;
  }
  .hero-meta {
    margin-top: 40px;
    display: flex;
    gap: 28px;
    align-items: center;
    font-size: var(--t-small);
    color: var(--muted);
  }
  .hero-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--faint); }

  /* Hero right — composed card stack */
  .hero-card-stack {
    position: relative;
    height: 540px;
  }
  .therapist-card {
    position: absolute;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    padding: 22px;
    box-shadow: var(--shadow-md);
    width: 360px;
  }
  .therapist-card .top {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
  }
  .therapist-card .name {
    font-family: var(--display);
    font-weight: 600;
    font-size: var(--t-lead);
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .therapist-card .creds {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
  }
  .therapist-card .chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin: 12px 0 14px;
  }
  .therapist-card .quote {
    font-family: var(--display);
    font-style: italic;
    font-size: var(--t-body);
    line-height: 1.45;
    color: var(--ink-soft);
    border-inline-start: 2px solid var(--forest);
    padding-inline-start: 12px;
    margin-bottom: 14px;
  }
  .therapist-card .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--t-small);
    color: var(--muted);
  }
  .therapist-card .row strong { color: var(--ink); font-weight: 600; }

  .card-a { top: 24px; left: 32px; transform: rotate(-2deg); width: 380px; }
  /* Honesty marker — same badge language as "Live match" and the
     pricing pills. The name/creds slots below it carry the promise. */
  .card-a .preview-flag {
    position: absolute;
    top: -12px;
    inset-inline-start: 24px;
    z-index: 2;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--forest);
    color: var(--cream);
    padding: 5px 10px;
    border-radius: var(--r-pill);
  }
  .card-a .creds { color: var(--ink-soft); }
  .card-a .avatar { width: 56px; height: 56px; font-size: 20px; }
  .card-a .photo {
    width: 100%;
    height: 180px;
    border-radius: var(--r-md);
    margin-bottom: 14px;
  }

  .card-b {
    /* was top:280px — it covered the last line of card-a's pull-quote,
       which read as a rendering bug rather than a collage */
    top: 404px;
    right: 0;
    width: 280px;
    transform: rotate(3deg);
    padding: var(--s-4);
  }
  .card-b .pulse {
    font-family: var(--mono);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--olive-deep);
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
  }
  .card-b .pulse::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--olive);
    box-shadow: 0 0 0 4px var(--olive-tint);
  }
  .card-b .match-pct {
    font-family: var(--display);
    font-size: 44px;
    line-height: 1;
    font-weight: 700;
    color: var(--navy);
    margin: 2px 0 6px;
    letter-spacing: -0.03em;
  }
  .card-b .match-label {
    font-size: 12px;
    color: var(--slate);
  }

  /* Trust strip -------------------------------------------------- */
  /* Section frame ------------------------------------------------ */
  section.bali {
    padding: 120px 64px;
    scroll-margin-top: 96px;          /* clears sticky nav on anchor jump */
  }

  /* Sticky-title section layout: title pinned on the left, content
     scrolling on the right. Used for tall sections (How it works)
     to give the page rhythm and a more editorial feel. */
  .sec {
    display: grid;
    grid-template-columns: minmax(280px, 380px) 1fr;
    gap: 80px;
    align-items: start;
  }
  .sec-title { align-self: start; }
  .sec.sticky-title .sec-title { position: sticky; top: 96px; }
  .sec-title h2 {
    font-size: var(--t-display);
    line-height: 1.02;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }
  .sec-title h2 .terra { color: var(--forest); font-style: italic; font-weight: 600; }
  .sec-title .sub {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 380px;
    margin-top: 20px;
    text-wrap: pretty;
  }
  .sec-title .title-actions { margin-top: 28px; }
  .sec-body { min-width: 0; }

  /* Legacy top-stacked section head — kept for sections that haven't
     migrated to the .sec pattern (currently none, but reserved). */
  .section-head {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 80px;
    margin-bottom: 64px;
    align-items: end;
  }
  .section-head h2 {
    font-size: 56px;
    line-height: 1.02;
    color: var(--ink);
    font-weight: 700;
    letter-spacing: -0.025em;
  }
  .section-head h2 .terra { color: var(--forest); }
  .section-head .sub {
    font-size: var(--t-lead);
    line-height: 1.5;
    color: var(--ink-soft);
    max-width: 520px;
  }

  /* How it works ------------------------------------------------- */
  .steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .step {
    padding: var(--s-6);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--paper);
    position: relative;
    min-height: 200px;
  }
  .step .num {
    font-family: var(--mono);
    font-size: var(--t-micro);
    color: var(--forest);
    letter-spacing: 0.18em;
    margin-bottom: 18px;
  }
  .step h3 {
    font-size: 26px;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 12px;
    font-weight: 600;
    max-width: 520px;
  }
  .step p {
    font-size: var(--t-body);
    line-height: 1.55;
    color: var(--muted);
    max-width: 560px;
  }
  .step .icon-slot {
    position: absolute;
    top: 28px;
    inset-inline-end: 28px;   /* logical: keeps it opposite the text in RTL */
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--g10);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--forest-deep);
    font-family: var(--display);
    font-weight: 700;
    font-size: 16px;
  }

  /* Diaspora callout ---------------------------------------------
     Compact navy card that sits in the "How it works" left column,
     under the title + subtitle. Cross-promotes the diaspora story
     without taking its own full-width section. Cities populated by
     initLanding() from /api/stats/landing via [data-bind="cities-list"]. */
  .diaspora-card {
    background: var(--navy);
    color: var(--cream);
    border-radius: var(--r-lg);
    padding: var(--s-6);
    margin-top: 36px;
  }
  .diaspora-card .eyebrow {
    color: var(--terra);
    display: block;
    margin-bottom: 14px;
  }
  .diaspora-card h3 {
    font-family: var(--display);
    font-size: var(--t-h2);
    font-weight: 700;
    color: var(--cream);
    line-height: 1.08;
    letter-spacing: -0.02em;
  }
  .diaspora-card h3 .terra { color: var(--terra); font-style: italic; font-weight: 600; }
  .diaspora-card p {
    color: rgba(247,245,239,0.72);
    font-size: var(--t-body);
    line-height: 1.55;
    margin-top: 14px;
  }
  .cities {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-2);
    margin-top: 22px;
  }
  .city-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    padding: 10px 14px;
    border-radius: var(--r-md);
    background: rgba(247,245,239,0.05);
    border: 1px solid rgba(247,245,239,0.08);
  }
  .city-row .city-name {
    font-family: var(--display);
    font-size: var(--t-body);
    font-weight: 600;
    color: var(--cream);
  }
  .city-row .city-count {
    font-family: var(--mono);
    font-size: var(--t-micro);
    /* var(--terra), not --forest: resolves to mint inside the
       on-dark diaspora card (--forest stays dark and vanishes) */
    color: var(--terra);
  }

  /* Therapist preview row --------------------------------------- */
  .therapist-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
  }
  .t-card {
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    overflow: hidden;
    transition: transform 200ms ease, box-shadow 200ms ease;
  }
  .t-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
  .t-card .photo {
    height: 240px;
    background: var(--cream-deep);
  }
  .t-card .body {
    padding: 22px;
  }
  .t-card h4 {
    font-size: 19px;
    color: var(--ink);
    margin-bottom: 4px;
    font-weight: 600;
  }
  .t-card .creds {
    font-size: 12px;
    color: var(--muted);
    margin-bottom: 14px;
  }
  .t-card .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
  .t-card .foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid var(--rule);
    font-size: var(--t-small);
    color: var(--muted);
  }
  .t-card .foot strong { color: var(--ink); font-family: var(--display); font-weight: 600; }

  /* Pricing — package tier cards (4 / 8 / 12 sessions) ----------- */
  .packs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
  .pack {
    padding: 32px 28px;
    border: 1px solid var(--rule);
    border-radius: var(--r-lg);
    background: var(--paper);
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .pack.featured {
    background: var(--navy);
    color: var(--cream);
    border-color: var(--navy);
  }
  .pack.beta {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    background: var(--grow-tint);
    border-color: var(--grow);
  }
  .pack.beta .pack-name { margin-top: 0; font-size: 24px; }
  .pack.beta .beta-main { min-width: 0; }
  .pack.beta .pack-desc { max-width: 460px; }
  .pack.beta ul { margin: 0; flex-shrink: 0; }
  /* Same recipe as .pack-most-popular, in the success green the
     card's tint comes from — the beta state should read at a glance. */
  .pack .pack-beta-flag {
    position: absolute;
    top: -14px;
    inset-inline-start: 28px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--grow);
    color: var(--cream);
    padding: 5px 10px;
    border-radius: var(--r-pill);
  }
  .pack .pack-tag {
    font-family: var(--mono);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--muted);
    margin-bottom: 16px;
  }
  .pack.featured .pack-tag { color: var(--terra); }
  .pack .pack-size {
    font-family: var(--display);
    font-size: 44px;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.02em;
  }
  .pack.featured .pack-size { color: var(--cream); }
  .pack .pack-size-unit {
    display: block;
    margin-top: 6px;
    font-family: var(--display);
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    letter-spacing: 0;
  }
  .pack.featured .pack-size-unit { color: rgba(247,245,239,0.65); }
  .pack .pack-save {
    margin-top: 20px;
    display: inline-block;
    font-family: var(--mono);
    font-size: var(--t-micro);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--olive-deep);
    background: var(--grow-tint);
    padding: 4px 9px;
    border-radius: var(--r-xs);
    align-self: flex-start;
  }
  .pack .pack-save.none {
    color: var(--muted);
    background: var(--cream-deep);
  }
  .pack.featured .pack-save {
    background: rgba(1,93,103,0.18);
    color: var(--terra);
  }
  .pack .pack-name {
    margin-top: 22px;
    font-family: var(--display);
    font-style: italic;
    font-weight: 600;
    font-size: 19px;
    color: var(--ink);
    letter-spacing: -0.01em;
  }
  .pack.featured .pack-name { color: var(--cream); }
  .pack .pack-desc {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--muted);
  }
  .pack.featured .pack-desc { color: rgba(247,245,239,0.72); }
  .pack ul {
    list-style: none;
    padding: 0;
    margin: 22px 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .pack li {
    font-size: var(--t-small);
    line-height: 1.45;
    padding-inline-start: 22px;
    position: relative;
    color: var(--ink-soft);
  }
  .pack.featured li { color: rgba(247,245,239,0.82); }
  .pack li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0; top: 6px;
    width: 12px;
    height: 7px;
    /* physical borders: the ✓ shape must not mirror in RTL,
       only its position flips */
    border-left: 2px solid var(--forest);
    border-bottom: 2px solid var(--forest);
    transform: rotate(-45deg);
  }
  .pack .pack-most-popular {
    position: absolute;
    top: -14px;
    inset-inline-start: 28px;
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--forest);
    color: var(--cream);
    padding: 5px 10px;
    border-radius: var(--r-pill);
  }
  .pricing-note {
    margin-top: 22px;
    font-size: var(--t-small);
    color: var(--muted);
    line-height: 1.55;
    max-width: 640px;
  }
  .pricing-note strong { color: var(--ink); font-family: var(--display); font-weight: 600; }

  /* Footer ------------------------------------------------------- */
  footer {
    background: var(--cream-deep);
    padding: var(--s-8) var(--s-8) var(--s-6);
    border-top: 1px solid var(--rule);
  }
  .foot-grid {
    display: grid;
    grid-template-columns: 1.4fr repeat(3, 1fr);
    gap: var(--s-7);
    margin-bottom: 48px;
  }
  .foot-col h5 {
    font-family: var(--mono);
    font-size: var(--t-micro);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--muted);
    margin-bottom: 16px;
    font-weight: 500;
  }
  .foot-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-2); }
  .foot-col a { font-size: 14px; color: var(--ink); }
  .foot-col a:hover { color: var(--forest); }
  .foot-col p { font-size: 14px; color: var(--ink-soft); line-height: 1.5; max-width: 320px; }
  .foot-bottom {
    display: flex;
    justify-content: space-between;
    padding-top: 24px;
    border-top: 1px solid var(--rule);
    font-size: 12px;
    color: var(--muted);
    font-family: var(--mono);
  }

  /* Responsive --------------------------------------------------- */
  /* Floating next-section FAB — stacks above the shared to-top button
     (44px + 10px gap). Light where to-top is dark: advance vs return. */
  #bali-section-nav {
    position: fixed;
    right: 20px;
    bottom: 74px;
    z-index: 8999;
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: var(--paper);
    color: var(--ink);
    border: 1px solid var(--rule);
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(6,38,43, 0.14),
                0 2px 4px rgba(6,38,43, 0.08);
    transition: opacity 180ms ease, transform 180ms ease,
                box-shadow 140ms ease;
  }
  #bali-section-nav:hover {
    box-shadow: 0 6px 18px rgba(6,38,43, 0.22),
                0 3px 6px rgba(6,38,43, 0.10);
    transform: translateY(1px);
  }
  #bali-section-nav:focus-visible {
    outline: 2px solid var(--forest);
    outline-offset: 3px;
  }
  #bali-section-nav.is-hidden {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
  }
  @media (max-width: 640px) {
    #bali-section-nav { right: 14px; bottom: 62px; width: 40px; height: 40px; }
    /* three cramped columns on phones — stack the meta claims instead */
    .hero-meta { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hero-meta .dot { display: none; }
  }
  @media (prefers-reduced-motion: reduce) {
    #bali-section-nav { transition: opacity 60ms linear; }
    #bali-section-nav:hover { transform: none; }
  }

  @media (max-width: 1100px) {
    section.bali { padding: var(--s-9) var(--s-7); }
    .nav, footer { padding-inline-start: 48px; padding-inline-end: 48px; }
    .hero { padding: 72px 48px 88px; }
    .hero h1 { font-size: 72px; }
    .sec-title h2 { font-size: 40px; }
  }
  @media (max-width: 900px) {
    .sec { grid-template-columns: 1fr; gap: var(--s-6); }
    .sec.sticky-title .sec-title { position: static; }
    .hero { grid-template-columns: 1fr; gap: var(--s-7); padding: 56px 32px 72px; }
    .hero h1 { font-size: 56px; }
    .hero-card-stack { height: 460px; transform: scale(0.85); transform-origin: top left; }
    .diaspora { grid-template-columns: 1fr; padding: var(--s-7) var(--s-6); gap: 36px; }
    .diaspora h2 { font-size: var(--t-h1); }
    .packs { grid-template-columns: 1fr; gap: var(--s-4); }
    .pack.beta { flex-direction: column; align-items: flex-start; gap: 14px; }
    .nav, footer { padding-inline-start: 32px; padding-inline-end: 32px; }
    .nav-links { display: none; }
    section.bali { padding: 72px 32px; }
    .sec-title h2 { font-size: 34px; }
    .step { padding: var(--s-5); }
    .step .icon-slot { top: 20px; inset-inline-end: 20px; width: 40px; height: 40px; font-size: 14px; }
    .foot-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
    .foot-bottom { flex-direction: column; gap: var(--s-2); align-items: flex-start; }
  }

/* ── Auth gate (UX-2) — while landing.authgate.js has tagged the page
      as "signed-in, user fetch in flight", hold the auth-dependent
      elements invisible so returning users never see the guest hero
      flash before the welcome-back swap. visibility (not display)
      keeps the layout identical, so nothing shifts on reveal. */
html[data-auth-pending] [data-bind="hero-h1"],
html[data-auth-pending] [data-bind="hero-lead"],
html[data-auth-pending] [data-bind="hero-actions"],
html[data-auth-pending] [data-bind="landing-cta"],
html[data-auth-pending] [data-bind="cta-start-matching"],
html[data-auth-pending] [data-bind="cta-therapist-register"] {
  visibility: hidden;
}

  /* ── Hero sample-card flip (light-scoped — card-a is the WHITE card) ──
     Content flips inside the static card frame every few seconds
     between four sample-therapist archetypes. Pauses on hover/focus;
     under prefers-reduced-motion it crossfades instead of rotating. */
  .card-a { perspective: 900px; }
  .card-a .flip-inner {
    transform-style: preserve-3d;
    transition: transform 320ms var(--ease-out);
  }
  .card-a.is-flipping .flip-inner { transform: rotateY(88deg); }
  /* Portrait medallion: the artwork is a circle with transparent
     corners; the tint field is a slightly larger circle behind it,
     so each variant's colour reads as a soft halo ring. */
  .card-a .flip-photo {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    overflow: hidden;
    border: 1px solid var(--rule);
    margin-inline: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 320ms ease;
  }
  .card-a .flip-photo img { width: 160px; height: 160px; }
  @media (prefers-reduced-motion: reduce) {
    .card-a .flip-inner { transition: opacity 220ms ease; }
    .card-a.is-flipping .flip-inner { transform: none; opacity: 0; }
  }