/* =====================================================================
   NDO Health — Homepage redesign ("Health is Wealth. Invest Daily.")
   Self-contained stylesheet for index.html. Does NOT touch the legacy
   style.css used by other pages. Warm "private-bank-for-your-health"
   system: green = action, gold = rationed reward, type-led.
   ===================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Hedvig+Letters+Serif&family=Figtree:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap");

:root {
  /* light surfaces */
  --base:#EFE9DB; --card:#FBF7EE; --raised:#F5EFE2; --ink:#1E2019; --ink-soft:#74786B;
  --line:rgba(30,32,25,.12); --track:rgba(30,32,25,.10);
  /* dark "Forest Ink" surfaces */
  --d-base:#163024; --d-card:#294B38; --d-raised:#1B3527; --d-ink:#F3EEE0;
  --d-ink-soft:rgba(243,238,224,.55); --d-line:rgba(243,238,224,.14);
  /* accents */
  --green:#5E9472; --green-deep:#3F6B52; --green-bright:#8FB89E;
  --gold:#D6A24A; --gold-deep:#A9792B; --gold-soft:#E9C886; --ivory:#F3EEE0;
  /* type */
  --display:'Hedvig Letters Serif', Georgia, serif;
  --body:'Figtree', system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --maxw:1200px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--base); color: var(--ink);
  font: 400 16px/1.5 var(--body);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
::selection { background: rgba(94,148,114,.3); }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(24px,5vw,64px); }

/* ---------- the one Movement button ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--body); font-weight: 700; font-size: 15px; line-height: 1;
  padding: 14px 26px; border: none; border-radius: 12px; white-space: nowrap;
  transform: skewX(-11deg); transition: all .18s ease;
}
.btn > span { display: inline-flex; align-items: center; gap: 9px; transform: skewX(11deg); }
.btn .arrow { transition: transform .18s ease; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--primary { background: var(--green); color: var(--ivory); }
.btn--primary:hover { background: var(--green-deep); transform: skewX(-11deg) translateY(-1px); box-shadow: 0 10px 22px -8px rgba(63,107,82,.6); }
.btn--accent { background: var(--gold); color: var(--ink); }
.btn--accent:hover { background: var(--gold-deep); color: var(--ivory); transform: skewX(-11deg) translateY(-1px); box-shadow: 0 10px 22px -8px rgba(169,121,43,.55); }
.btn--secondary { background: transparent; color: var(--green-deep); border: 1.5px solid rgba(94,148,114,.5); }
.btn--secondary:hover { background: rgba(94,148,114,.08); border-color: var(--green); }
.btn--secondary.on-dark { color: var(--d-ink); border-color: rgba(243,238,224,.4); }
.btn--secondary.on-dark:hover { background: rgba(243,238,224,.06); border-color: rgba(243,238,224,.7); }
.btn--block { width: 100%; }
.btn--sm { font-size: 13px; padding: 11px 20px; border-radius: 11px; }

/* ---------- shared bits ---------- */
.eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--gold-deep); display: inline-flex; align-items: center; gap: 9px; }
.eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--gold); }
.mono { font-family: var(--mono); }

/* =====================================================================
   HEADER  (distributed / centered-mark nav)
   ===================================================================== */
.site-header { position: sticky; top: 0; z-index: 1200; background: rgba(239,233,219,.86);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); transition: box-shadow .2s ease; }
.site-header.scrolled { box-shadow: 0 4px 18px -10px rgba(30,32,25,.25); }
.site-header .bar { height: 76px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.nav-left, .nav-right { display: flex; align-items: center; gap: clamp(18px,2.2vw,30px); }
.nav-right { justify-content: flex-end; }
.brand { justify-self: center; color: var(--green); }
.brand svg { height: 30px; width: auto; }
.nav-link { font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink); transition: color .18s ease; }
.nav-link:hover { color: var(--green-deep); }
.nav-link.quiet { color: var(--ink-soft); }
.nav-toggle { display: none; width: 42px; height: 36px; border: 1px solid var(--line); border-radius: 10px;
  background: transparent; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .22s, opacity .22s; }

@media (max-width: 920px) {
  .site-header .bar { grid-template-columns: 1fr auto 1fr; }
  .nav-left { visibility: hidden; }
  .nav-right .nav-link { display: none; }
  .nav-toggle { display: inline-flex; }
  .mobile-menu { position: fixed; inset: 76px 0 0 0; background: var(--base); border-top: 1px solid var(--line);
    transform: translateY(-100%); transition: transform .25s ease; z-index: 1100; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; padding: 32px 24px; pointer-events: none; }
  .mobile-menu.open { transform: translateY(0); pointer-events: auto; }
  .mobile-menu a { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase;
    padding: 18px; width: 100%; max-width: 320px; text-align: center; border-bottom: 1px solid var(--line); }
  .mobile-menu .btn { margin-top: 22px; }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:first-child { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.open span:last-child { transform: translateY(-7px) rotate(-45deg); }
}
@media (min-width: 921px) { .mobile-menu { display: none; } }

/* =====================================================================
   HERO + FOOTER — "Two Doors" (cursor-following cards)
   ===================================================================== */
.doors { position: relative; width: 100%; overflow: hidden; cursor: default; }
.hero-doors { height: 100vh; min-height: 620px; background: var(--d-base); }
.door-panel { position: absolute; inset: 0; display: flex; flex-direction: column; }
.door-light { background: var(--base); color: var(--ink); }
.door-dark  { background: var(--d-base); color: var(--d-ink); }

/* hero diagonal clip */
.hero-doors .door-light { clip-path: polygon(0 0, 54% 0, 46% 100%, 0 100%); padding: clamp(110px,12vh,128px) clamp(34px,4vw,76px) clamp(34px,4vw,76px); }
.hero-doors .door-dark  { clip-path: polygon(54% 0, 100% 0, 100% 100%, 46% 100%); padding: clamp(110px,12vh,128px) clamp(34px,4vw,76px) clamp(34px,4vw,76px) clamp(60px,8vw,150px); align-items: flex-end; text-align: right; }
.door-seam { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

.corner-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; }
.door-head { font-family: var(--display); font-size: clamp(46px,6.4vw,104px); line-height: .92; letter-spacing: -.015em; margin: 14px 0 0; white-space: nowrap; }
.door-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; }
.door-foot p { font-family: var(--body); font-size: clamp(13px,1vw,15.5px); line-height: 1.5; margin: 0; max-width: 300px; }
.door-spacer { margin-top: auto; }
.hint { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; gap: 8px; pointer-events: none; }

/* the floating door card */
.door-card { position: absolute; top: 0; left: 0; width: 318px; opacity: 0; pointer-events: none;
  border-radius: 18px; padding: 22px 24px 24px; will-change: transform, opacity; z-index: 14; }
.door-card.light { background: var(--card); border: 1.5px solid rgba(30,32,25,.14);
  box-shadow: 0 24px 60px -18px rgba(30,32,25,.34), 0 4px 14px -6px rgba(30,32,25,.18); }
.door-card.dark { background: var(--d-card); border: 1.5px solid rgba(243,238,224,.18); box-shadow: 0 28px 64px -16px rgba(0,0,0,.6); }
.door-card .dc-eyebrow { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; display: flex; align-items: center; gap: 7px; }
.door-card .dc-eyebrow::before { content:''; width:6px; height:6px; border-radius:50%; }
.door-card.light .dc-eyebrow { color: var(--gold-deep); } .door-card.light .dc-eyebrow::before { background: var(--gold); }
.door-card.dark .dc-eyebrow { color: var(--gold); } .door-card.dark .dc-eyebrow::before { background: var(--gold); }
.door-card h3 { font-family: var(--display); font-size: 27px; line-height: 1.02; margin: 11px 0 4px; letter-spacing: -.01em; }
.door-card.dark h3 { color: var(--d-ink); }
.door-card p.dc-sub { font-family: var(--body); font-size: 12.5px; line-height: 1.4; margin: 0 0 15px; }
.door-card.light p.dc-sub { color: var(--ink-soft); } .door-card.dark p.dc-sub { color: var(--d-ink-soft); }
.pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pill { font-family: var(--body); font-size: 12.5px; font-weight: 600; padding: 8px 14px; border-radius: 999px;
  border: none; background: var(--raised); color: var(--ink); transition: all .18s ease; }
.pill:hover { background: rgba(94,148,114,.14); transform: translateY(-1px); }
.pill.sel { background: var(--green); color: var(--ivory); }
.dc-foot-note { font-family: var(--mono); font-size: 10px; letter-spacing: .08em; margin-top: 14px; text-align: center; }
.door-card.light .dc-foot-note { color: var(--ink-soft); }
.door-card.dark .dc-foot-note { color: var(--d-ink-soft); }
.door-card.dark .dc-foot-note .new { color: var(--gold); font-weight: 600; cursor: pointer; }
.dc-field { width: 100%; font-family: var(--body); font-size: 13.5px; padding: 12px 14px; border-radius: 11px;
  border: none; outline: none; background: var(--d-raised); color: var(--d-ink); margin-bottom: 10px;
  box-shadow: inset 0 0 0 1px rgba(243,238,224,.08); transition: box-shadow .18s ease; }
.dc-field:focus { box-shadow: inset 0 0 0 1.5px var(--green); }
.dc-field::placeholder { color: var(--d-ink-soft); }
.dc-center { display: flex; justify-content: center; }

/* footer doors */
.footer-doors { min-height: clamp(560px,90vh,700px); background: var(--base); display: flex; }
.footer-doors .door-dark { left: auto; right: 0; width: calc(50% + 80px); inset: 0 0 0 auto;
  clip-path: polygon(80px 0, 100% 0, 100% 100%, 0 100%); }
.footer-doors .door-light { width: 50%; right: auto; padding: clamp(44px,5vw,64px) clamp(40px,3vw,56px) clamp(122px,16vh,156px) clamp(44px,5vw,72px); justify-content: flex-start; }
.footer-doors .door-r { position: absolute; right: 0; top: 0; bottom: 0; width: 50%; padding: clamp(44px,5vw,64px) clamp(44px,5vw,64px) clamp(122px,16vh,156px) clamp(40px,5vw,96px);
  display: flex; flex-direction: column; align-items: flex-end; text-align: right; justify-content: flex-start; }
.footer-doors h2 { font-family: var(--display); margin: 0; letter-spacing: -.02em; }
.footer-doors .h-promise { font-size: clamp(44px,5.6vw,72px); line-height: .95; color: var(--ink); white-space: nowrap; }
.footer-doors .h-member { font-size: clamp(34px,3.6vw,46px); line-height: .98; color: var(--d-ink); }
.footer-content { display: flex; flex-direction: column; gap: clamp(13px,1.5vw,18px); }
.footer-content.right { align-items: flex-end; }
.footer-content p { font-family: var(--body); line-height: 1.5; margin: 0; max-width: 300px; font-size: clamp(13.5px,1vw,15px); }
.footer-baseline { position: absolute; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 clamp(40px,5vw,64px) clamp(26px,3vw,34px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(14px,1.7vw,20px); }
.footer-baseline .brand { color: var(--green); }
.footer-baseline .brand svg { height: 30px; }
.footer-nav-row { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; column-gap: clamp(20px,3vw,40px); }
.footer-nav-row .fl { display: flex; gap: clamp(14px,1.4vw,20px); flex-wrap: wrap; }
.footer-nav-row .fl.start { justify-self: start; } .footer-nav-row .fl.end { justify-self: end; justify-content: flex-end; }
.footer-nav-row a { font-family: var(--body); font-size: 13.5px; white-space: nowrap; transition: opacity .16s ease; }
.footer-nav-row a:hover { opacity: .6; }
.footer-nav-row a.light { color: var(--ink); } .footer-nav-row a.dark { color: var(--d-ink); }
.footer-copy { justify-self: center; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; color: var(--d-ink-soft); white-space: nowrap; }

/* =====================================================================
   SECTION HEADER (ring + split)
   ===================================================================== */
.section-header { padding: clamp(40px,5vw,52px) 0; }
.section-header .inner { display: flex; justify-content: space-between; align-items: flex-end; gap: 60px; flex-wrap: wrap; }
.section-header .lead { display: flex; flex-direction: column; gap: 20px; max-width: 660px; }
.section-header h2 { font-family: var(--display); font-size: clamp(40px,5vw,58px); line-height: 1; margin: 0; letter-spacing: -.02em; }
.section-header .aside { display: flex; flex-direction: column; gap: 14px; max-width: 340px; padding-bottom: 6px; }
.section-header .aside p { font-family: var(--body); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); margin: 0; }
.section-header .textlink { font-family: var(--body); font-weight: 700; font-size: 14.5px; color: var(--green-deep); display: inline-flex; gap: 8px; }
.hring { position: relative; width: 60px; height: 60px; flex-shrink: 0; }
.hring .frac { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 12px; color: var(--ink); }

/* =====================================================================
   HOW IT WORKS
   ===================================================================== */
.section { padding-block: clamp(40px,6vh,72px); }
.steps { display: flex; flex-wrap: wrap; }
.step { flex: 1 1 240px; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px,2vw,28px); border-right: 1px solid var(--line); }
.step:last-child { border-right: none; }
.step-ring { position: relative; width: 80px; height: 80px; }
.step-ring .num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--display); font-size: 34px; letter-spacing: -.01em; }
.step h3 { font-family: var(--display); font-size: clamp(21px,1.6vw,24px); line-height: 1.1; margin: 2px 0 0; letter-spacing: -.01em; }
.step p { font-family: var(--body); font-size: 14px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 230px; }
.step .meta { font-family: var(--mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-soft); margin-top: 6px; }
.close { max-width: 720px; margin: 0 auto; padding: clamp(44px,6vh,76px) 24px clamp(56px,8vh,96px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.close .display-line { font-family: var(--display); font-size: clamp(22px,2.4vw,30px); line-height: 1.25; margin: 0; letter-spacing: -.01em; text-wrap: pretty; }
.close p { font-family: var(--body); font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; max-width: 520px; text-wrap: pretty; }
.close .cta-row { display: flex; gap: 16px; margin-top: 6px; flex-wrap: wrap; justify-content: center; }

/* =====================================================================
   HEALTH IS WEALTH (beats + forest-ink visual panels)
   ===================================================================== */
.beats { display: flex; flex-direction: column; gap: clamp(28px,3.4vw,44px); }
.beat { display: grid; grid-template-columns: minmax(260px,.82fr) minmax(320px,1.05fr); gap: clamp(28px,4vw,56px); align-items: stretch; }
.beat .txt { display: flex; flex-direction: column; justify-content: center; gap: 14px; max-width: 400px; padding-top: 8px; }
.beat .txt h3 { font-family: var(--display); font-size: clamp(26px,2.7vw,36px); line-height: 1.1; margin: 0; letter-spacing: -.015em; text-wrap: pretty; }
.beat .txt p { font-family: var(--body); font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; text-wrap: pretty; }
.beat .panel { background: var(--d-base); border: 1px solid var(--d-line); border-radius: 20px; padding: clamp(26px,3vw,40px);
  min-height: 240px; display: flex; align-items: center; justify-content: center; box-shadow: 0 26px 60px -30px rgba(0,0,0,.5); }
.beat-tag { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--gold-deep); display: inline-flex; align-items: center; gap: 9px; }
.beat-tag::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--gold); }
.nowrap { white-space: nowrap; }

/* week rings */
.week { display: flex; align-items: center; gap: clamp(20px,2.4vw,34px); flex-wrap: wrap; justify-content: center; }
.week .days { display: flex; gap: clamp(7px,.9vw,12px); }
.week .day { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.week .day span { font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; color: var(--d-ink-soft); }
.week .div { width: 1px; align-self: stretch; min-height: 52px; background: var(--d-line); }
.week .streak b { font-family: var(--mono); font-size: 38px; font-weight: 500; color: var(--gold-soft); letter-spacing: -.01em; line-height: 1; }
.week .streak b i { font-style: normal; font-size: 19px; margin-left: 3px; }
.week .streak small { display: block; font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--d-ink-soft); margin-top: 4px; }

/* stat strip */
.statstrip { display: flex; width: 100%; flex-wrap: wrap; row-gap: 18px; }
.statcol { flex: 1; min-width: 0; padding: 4px clamp(16px,2vw,26px); }
.statcol + .statcol { border-left: 1px solid var(--d-line); }
.statcol .top { display: flex; align-items: center; justify-content: space-between; }
.statcol .lbl { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; color: var(--d-ink-soft); display: flex; align-items: center; gap: 7px; }
.statcol .lbl::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--gold); }
.statcol .fig { display: flex; align-items: baseline; gap: 7px; margin-top: 14px; }
.statcol .fig b { font-family: var(--mono); font-weight: 700; font-size: clamp(30px,3vw,38px); line-height: .92; letter-spacing: -.01em; color: var(--d-ink); }
.statcol.gold .fig b { color: var(--gold-soft); }
.statcol .fig small { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--d-ink-soft); }
.statcol .sub { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; }
.statcol .sub .cap { font-family: var(--body); font-size: 12.5px; color: var(--d-ink-soft); }
.statcol .sub .delta { font-family: var(--mono); font-size: 10.5px; color: var(--green-bright); }

/* reward coins */
.rewards { display: flex; gap: clamp(24px,3vw,44px); flex-wrap: wrap; justify-content: center; }
.coin { display: flex; flex-direction: column; align-items: center; gap: 14px; width: 196px; text-align: center; }
.coin .disc { position: relative; width: 104px; height: 104px; }
.coin .earned { width: 104px; height: 104px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 4px 16px rgba(169,121,43,.35), inset 0 0 0 2px var(--gold-soft), inset 0 0 0 8px var(--gold);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.coin .earned .star { font-size: 32px; color: var(--ivory); line-height: 1; }
.coin .earned .e { font-family: var(--mono); font-size: 8.5px; letter-spacing: .2em; color: #7A5618; }
.coin .lockface { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; }
.coin .lockface .n { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--d-ink); }
.coin .lockface .l { font-family: var(--mono); font-size: 8px; letter-spacing: .16em; color: var(--d-ink-soft); }
.coin .label { font-family: var(--display); font-size: 19px; color: var(--d-ink); letter-spacing: -.01em; }
.coin .req { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--d-ink-soft); }
.coin .req.earned-txt { color: var(--gold-soft); }
.coin .keep { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--d-ink-soft); margin-top: 2px; }

/* leaderboard */
.board { width: 100%; max-width: 360px; }
.board .bh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 14px; }
.board .bh b { font-family: var(--display); font-size: 19px; color: var(--d-ink); font-weight: 400; }
.board .bh small { font-family: var(--mono); font-size: 9px; letter-spacing: .14em; color: var(--d-ink-soft); }
.lbrow { display: grid; grid-template-columns: 22px 1fr 30px 64px; align-items: center; column-gap: 10px; padding: 9px 2px; border-top: 1px solid var(--d-line); }
.lbrow:first-of-type { border-top: none; }
.lbrow .r { font-family: var(--mono); font-size: 12px; color: var(--d-ink-soft); }
.lbrow .nm { font-family: var(--body); font-size: 14px; color: var(--d-ink); }
.lbrow .d { text-align: center; font-family: var(--mono); font-size: 11px; }
.lbrow .pts { font-family: var(--mono); font-size: 12.5px; text-align: right; color: var(--d-ink); }
.lbrow.lead .r, .lbrow.lead .pts { color: var(--gold); }
.lbrow.me { background: rgba(94,148,114,.20); border-radius: 9px; border-top: none; border-left: 2px solid var(--green-bright); padding: 10px; }
.lbrow.me .r, .lbrow.me .nm { color: var(--green-bright); font-weight: 600; }
.up { color: var(--green-bright); } .down { color: rgba(243,238,224,.4); }
.board .dash { border-top: 1px dashed var(--d-ink-soft); opacity: .5; margin: 6px 0; }
.board .bf { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--d-line); }
.board .bf .a { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--green-bright); }
.board .bf .b { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--d-ink-soft); }

/* =====================================================================
   PRICING
   ===================================================================== */
.tiers { display: flex; align-items: flex-start; justify-content: center; gap: 20px; flex-wrap: wrap; padding-top: clamp(28px,4vw,48px); }
.tier { position: relative; width: 360px; background: var(--card); border-radius: 20px; padding: 30px; display: flex; flex-direction: column; gap: 16px;
  border: 1.5px solid var(--line); box-shadow: 0 18px 44px -26px rgba(30,32,25,.2); }
.tier.featured { background: var(--d-base); border: 1.5px solid var(--gold); margin-top: -16px; box-shadow: 0 30px 70px -22px rgba(0,0,0,.45); color: var(--d-ink); }
.tier .badge { position: absolute; top: -13px; left: 30px; font-family: var(--mono); font-size: 9.5px; font-weight: 700; letter-spacing: .16em;
  color: var(--ink); background: var(--gold); padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.tier h3 { font-family: var(--display); font-size: 25px; line-height: 1; margin: 0; letter-spacing: -.01em; }
.tier .dep { font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; color: var(--ink-soft); }
.tier.featured .dep, .tier.featured .outcome { color: var(--d-ink-soft); }
.tier .price { display: flex; align-items: baseline; gap: 4px; }
.tier .price b { font-family: var(--mono); font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.tier .price small { font-family: var(--mono); font-size: 13px; color: var(--ink-soft); }
.tier.featured .price small { color: var(--d-ink-soft); }
.tier .outcome { font-family: var(--body); font-size: 13px; line-height: 1.45; color: var(--ink-soft); margin: 2px 0 0; min-height: 38px; }
.tier .rows { display: flex; flex-direction: column; }
.tier .rows .row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.tier.featured .rows .row { border-top: 1px solid var(--d-line); }
.tier .rows .k { font-family: var(--body); font-size: 13.5px; white-space: nowrap; }
.tier .rows .v { font-family: var(--mono); font-size: 12px; letter-spacing: .03em; color: var(--green-deep); white-space: nowrap; }
.tier.featured .rows .v { color: var(--green-bright); }
.tier .return { display: flex; align-items: center; justify-content: space-between; background: var(--d-raised); border-radius: 11px; padding: 12px 15px; }
.tier .return .k { font-family: var(--mono); font-size: 10px; letter-spacing: .14em; color: var(--d-ink-soft); }
.tier .return .v { font-family: var(--mono); font-size: 12.5px; font-weight: 700; color: var(--gold); }
.tier .foot { margin-top: auto; display: flex; flex-direction: column; gap: 14px; padding-top: 4px; }
.tier .scarcity { font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--gold); display: inline-flex; align-items: center; gap: 7px; }
.tier .scarcity::before { content:''; width:6px; height:6px; border-radius:50%; background: var(--gold); }
.pricing-note { max-width: 760px; margin: 0 auto; padding: clamp(40px,6vh,72px) 24px clamp(20px,3vh,32px); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
.pricing-note p { font-family: var(--body); font-size: 15.5px; line-height: 1.6; color: var(--ink-soft); margin: 0; text-wrap: pretty; }

/* =====================================================================
   PROOF
   ===================================================================== */
.proof-feature { max-width: 1120px; margin: 0 auto; }
.qcard { background: var(--d-base); border: 1px solid var(--d-line); border-radius: 20px; box-shadow: 0 26px 60px -30px rgba(0,0,0,.5); }
.qcard.feature { padding: clamp(30px,4vw,52px); display: flex; flex-direction: column; gap: 22px; }
.qcard .qmark { font-family: var(--display); color: var(--gold); line-height: 1; }
.qcard.feature .qmark { font-size: 60px; height: 38px; }
.qcard.feature .quote { font-family: var(--display); font-size: clamp(26px,3.2vw,38px); line-height: 1.2; margin: 0; color: var(--d-ink); letter-spacing: -.01em; text-wrap: pretty; }
.qmeta { display: flex; align-items: center; gap: 12px; padding-top: 20px; border-top: 1px solid var(--d-line); margin-top: 4px; }
.qmeta .nm { font-family: var(--display); font-size: 18px; color: var(--d-ink); }
.qmeta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.qmeta .mt { font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; color: var(--d-ink-soft); }
.voices { max-width: 1120px; margin: clamp(22px,2.6vw,28px) auto 0; display: flex; flex-wrap: wrap; gap: clamp(22px,2.6vw,28px); }
.qcard.voice { flex: 1 1 260px; min-width: 0; padding: clamp(24px,2.4vw,32px); display: flex; flex-direction: column; gap: 16px; }
.qcard.voice .qmark { font-size: 38px; height: 22px; }
.qcard.voice .quote { font-family: var(--display); font-size: clamp(18px,1.5vw,21px); line-height: 1.36; margin: 0; color: var(--d-ink); flex: 1; text-wrap: pretty; }
.qcard.voice .qmeta { padding-top: 16px; }
.qcard.voice .qmeta .nm { font-size: 15px; } .qcard.voice .qmeta .mt { font-size: 9.5px; }

/* =====================================================================
   MOTION + RESPONSIVE
   ===================================================================== */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.rise.in { opacity: 1; transform: none; }

@media (max-width: 860px) {
  /* hero/footer doors restack vertically */
  .doors { display: block; }
  .hero-doors { height: auto; min-height: 0; }
  .hero-doors .door-panel, .footer-doors .door-panel { position: relative; inset: auto; clip-path: none !important; width: 100% !important; }
  .hero-doors .door-light, .hero-doors .door-dark { padding: clamp(40px,9vw,72px) clamp(24px,6vw,40px); align-items: flex-start; text-align: left; }
  .hero-doors .door-dark { padding-top: 88px; }
  .door-head { font-size: clamp(40px,11vw,64px); }
  .door-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .footer-doors { display: block; min-height: 0; }
  .footer-doors .door-light, .footer-doors .door-r { position: relative; inset: auto; width: 100% !important; align-items: flex-start; text-align: left; padding: clamp(40px,9vw,64px) clamp(24px,6vw,40px) clamp(40px,9vw,64px); }
  .footer-content.right { align-items: flex-start; }
  .footer-doors .h-promise, .footer-doors .h-member { white-space: normal; }
  .footer-baseline { position: relative; background: var(--d-base); }
  .footer-baseline .footer-nav-row a.light { color: var(--d-ink); }
  .door-card { display: none !important; } /* movement is desktop-only; mobile shows inline CTA */
  .hint { display: none; }
  .door-mobile-cta { margin-top: 22px; }
  .beat { grid-template-columns: 1fr; }
  .section-header .inner { flex-direction: column; align-items: flex-start; gap: 24px; }
  .tier.featured { margin-top: 0; }
}
@media (min-width: 861px) { .door-mobile-cta { display: none; } }
@media (max-width: 1024px) { .tier { width: 320px; } }
@media (prefers-reduced-motion: reduce) {
  .rise { transition: none; opacity: 1; transform: none; }
}