/* =========================================================================
   NEW MONEY — Website V2
   Governed by the 12 September 2026 handoff documents:
     NM-WEB-001 Creative Brief · NM-WEB-002 Visual Direction · NM-WEB-003 Implementation Spec
   His call, 2026-09-14: "yes follow the new documents and build it" — V2 wins
   over the 9 September choices (serif returns, less centring, cream + forest
   environments, forest primary buttons, tabs for Learning Paths).
   ========================================================================= */

/* ---------- Tokens ------------------------------------------------------- */
:root{
  /* Brand + environments. Cream is measured off their own conversation-cards
     asset; stone off the glass-sphere asset, so the hero object sits in its
     own colour. */
  --forest:#0F2318;
  --forest-deep:#0B1B12;
  --ink:#0A120E;          /* near-black green: trust + footer */
  --cream:#F4F0E7;
  --paper:#F8F4EC;
  --stone:#E9E2DA;
  --sage:#DDE6D6;
  --gold:#C9A24D;         /* scarce: detail only, never a "wealth" cliché */
  --graphite:#6B6F6C;

  --text:#0F2318;
  --text-soft:#44544A;
  --on-dark:#F4F0E7;
  --on-dark-soft:rgba(244,240,231,.76);
  --rule:rgba(15,35,24,.14);
  --rule-dark:rgba(244,240,231,.16);

  --serif:"Newsreader", "Iowan Old Style", Georgia, serif;
  --sans:"Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;

  --shell:1360px;
  --gutter:clamp(20px, 5vw, 88px);
  --sec:clamp(80px, 11vw, 180px);   /* spec: 72–112 mobile, 120–180 desktop */

  --r-btn:8px; --r-card:12px; --r-product:16px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------- Base --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--cream);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure,blockquote,ol,ul{margin:0}
ol,ul{padding:0;list-style:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
/* An element with the hidden attribute must stay hidden even when a component
   rule gives it a display value. Seen 2026-09-14: `.jpanel__badge{display:
   inline-block}` beat the browser's own [hidden] rule, so "Milestone earned"
   showed at 0 of 7 while the element still reported hidden=true. */
[hidden]{display:none!important}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:300;background:var(--forest);color:var(--cream);padding:12px 18px;border-radius:0 0 8px 0}
.skip:focus{left:0}
.shell{width:100%;max-width:var(--shell);margin-inline:auto;padding-inline:var(--gutter)}

/* Environments — a change of colour marks a change of chapter */
.env-stone{background:var(--stone)}
.env-cream{background:var(--cream)}
.env-paper{background:var(--paper)}
.env-sage{background:var(--sage)}
.env-forest{background:var(--forest);color:var(--on-dark)}
.env-forest-deep{background:var(--forest-deep);color:var(--on-dark)}
.env-ink{background:var(--ink);color:var(--on-dark)}

/* ---------- Type --------------------------------------------------------- */
.label{font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--text-soft)}
.label--light{color:var(--on-dark-soft)}
.display{font-family:var(--serif);font-weight:400;font-size:clamp(34px, 4.6vw, 60px);line-height:1.04;letter-spacing:-.018em;font-optical-sizing:auto}
.body{font-size:clamp(16px, 1.25vw, 19px);color:var(--text-soft);max-width:36em}
.env-forest .body,.env-forest-deep .body,.env-ink .body{color:var(--on-dark-soft)}

/* ---------- Buttons ------------------------------------------------------ */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:14px 24px;border-radius:var(--r-btn);border:1px solid transparent;font-family:var(--sans);font-size:15px;font-weight:600;letter-spacing:.005em;text-decoration:none;cursor:pointer;transition:background-color .24s var(--ease),color .24s var(--ease),border-color .24s var(--ease),transform .24s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
/* 44px, not 42: at 390px the Reset button on How It Works came under the
   touch-target minimum (seen 2026-09-14, NM-WEB-003 §26) */
.btn--sm{min-height:44px;padding:10px 18px;font-size:14px}
.btn--primary{background:var(--forest);color:var(--cream)}
.btn--primary:hover{background:#18331F}
.btn--light{background:var(--cream);color:var(--forest)}
.btn--light:hover{background:#FFFFFF}
.btn--quiet{background:transparent;color:var(--forest);border-color:rgba(15,35,24,.28)}
.btn--quiet:hover{border-color:var(--forest)}
.actions{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Navigation --------------------------------------------------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:100;transition:background-color .3s var(--ease),box-shadow .3s var(--ease),backdrop-filter .3s var(--ease)}
.nav__in{display:flex;align-items:center;gap:28px;min-height:76px}
/* .97, not .88: at .88 a faint smudge of the big hero headline still showed
   through behind the menu text when it scrolled underneath (seen 2026-09-14) */
.nav.is-scrolled{background:rgba(244,240,231,.97);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--rule)}
/* min-height 44px: measured at 390px wide the logo link was 32px tall, under
   the touch-target minimum (NM-WEB-003 §6.2, §26) */
.logo{display:inline-flex;align-items:center;gap:10px;min-height:44px;text-decoration:none;font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.2em}
.logo img{width:20px;height:auto}
.logo--light{color:var(--cream)}
.nav__links{display:none;gap:30px;margin-inline:auto}
.nav__links a,.nav__signin{font-size:15px;text-decoration:none;color:var(--text-soft);padding:8px 0;transition:color .2s}
.nav__links a:hover,.nav__signin:hover{color:var(--forest)}
.nav__end{display:flex;align-items:center;gap:18px;margin-left:auto}
.nav__signin,.nav__end .btn{display:none}
.menu-btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;font-size:14px;font-weight:500}
.menu-btn__bars{position:relative;width:22px;height:10px}
.menu-btn__bars::before,.menu-btn__bars::after{content:"";position:absolute;left:0;right:0;height:1.5px;background:var(--forest);transition:transform .3s var(--ease),top .3s var(--ease)}
.menu-btn__bars::before{top:0}.menu-btn__bars::after{top:8px}
.menu-btn[aria-expanded="true"] .menu-btn__bars::before{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] .menu-btn__bars::after{top:4px;transform:rotate(-45deg)}
@media (min-width:1024px){
  .nav__links{display:flex}
  .nav__signin,.nav__end .btn{display:inline-flex}
  .menu-btn{display:none}
}

/* Mobile menu — a designed forest panel, not a utility drawer */
.menu{position:fixed;inset:0;z-index:90;background:var(--forest);color:var(--cream);padding:108px var(--gutter) 40px;overflow-y:auto}
.menu__in{display:flex;flex-direction:column;gap:32px;min-height:100%}
.menu nav{display:flex;flex-direction:column}
.menu nav a{font-family:var(--serif);font-size:40px;line-height:1.15;padding:10px 0;text-decoration:none;border-bottom:1px solid var(--rule-dark)}
.menu .btn{align-self:flex-start;margin-top:auto}
body.menu-open .nav{background:var(--forest)}
body.menu-open .logo,body.menu-open .menu-btn{color:var(--cream)}
body.menu-open .logo img{filter:brightness(0) invert(1)}
body.menu-open .menu-btn__bars::before,body.menu-open .menu-btn__bars::after{background:var(--cream)}

/* ---------- Hero --------------------------------------------------------- */
.hero{position:relative;padding:120px 0 40px;overflow:hidden}
.hero__grid{display:grid;gap:12px;align-items:center}
.hero__copy .label{max-width:30em;margin-bottom:22px}
.hero__title{font-family:var(--serif);font-weight:400;font-size:clamp(50px, 7.6vw, 118px);line-height:.96;letter-spacing:-.028em;margin-bottom:28px}
.hero__title span{display:block;color:var(--forest)}
.hero__lede{font-size:clamp(17px, 1.4vw, 20px);color:var(--text-soft);max-width:30em;margin-bottom:32px}
.hero__proof{margin-top:20px;font-size:14px;color:var(--text-soft)}
.hero__phrase{padding-top:28px;padding-bottom:0}

/* The object scene. The sphere is kept WHOLE — glass cannot be cut out — and
   its own studio background fades into the section's matching stone. */
.hero__scene{position:relative;aspect-ratio:1/1;max-width:640px;width:100%;margin-inline:auto}
.hero__sphere{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%, #000 58%, transparent 100%);
          mask-image:radial-gradient(closest-side at 50% 50%, #000 58%, transparent 100%)}
/* Cut-outs lose their studio shadow, so a soft contact shadow grounds them */
.hero__book,.hero__object{position:absolute;filter:drop-shadow(0 28px 22px rgba(30,24,16,.22)) drop-shadow(0 4px 4px rgba(30,24,16,.12))}
.hero__book{width:30%;left:2%;bottom:6%}
.hero__object{width:22%;right:4%;bottom:10%}
/* Desktop: the headline spans the full width on two deliberate lines
   ("Understand Money." / "Own the Future."), with the object scene entering
   lower right — NM-WEB-003 §8's second hero layout. Seen 2026-09-14: in a
   5-column copy block the headline broke as "Own the / Future.". */
@media (min-width:1024px){
  .hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:104px}
  /* last row takes the slack, so the scene's height never spreads the copy apart */
  .hero__grid{grid-template-columns:5fr 7fr;grid-template-rows:auto auto auto auto 1fr;column-gap:40px;row-gap:0;align-items:start}
  .hero__copy{display:contents}
  .hero__copy .label{grid-column:1 / -1;grid-row:1}
  .hero__title{grid-column:1 / -1;grid-row:2;margin-bottom:36px}
  .hero__title,.hero__title span{white-space:nowrap}
  .hero__lede{grid-column:1;grid-row:3}
  .hero__copy .actions{grid-column:1;grid-row:4;align-self:start}
  .hero__proof{grid-column:1;grid-row:5}
  .hero__scene{grid-column:2;grid-row:3 / 6;max-width:540px;justify-self:end;margin-top:-72px;margin-right:calc(var(--gutter) * -.25)}
}
@media (max-width:639px){
  .hero__object{display:none}   /* spec: fewer simultaneous objects on mobile */
  .hero__book{width:34%}
}

/* ---------- Transition strip -------------------------------------------- */
.strip{display:block;overflow:hidden;background:var(--forest);color:var(--cream);text-decoration:none;border-block:1px solid var(--rule-dark)}
.strip__track{display:flex;width:max-content;animation:strip 60s linear infinite}
.strip__track span{font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;padding:22px 48px;white-space:nowrap}
.strip__track span::after{content:"";display:inline-block;width:6px;height:6px;margin-left:48px;border-radius:50%;background:var(--gold);vertical-align:middle}
.strip:hover .strip__track{animation-play-state:paused}
@keyframes strip{to{transform:translateX(-50%)}}

/* ---------- The World Changed ------------------------------------------- */
.world{padding:var(--sec) 0}
.world__grid{display:grid;gap:32px;margin-bottom:clamp(48px, 7vw, 96px)}
.poster{font-family:var(--serif);font-weight:400;font-size:clamp(42px, 6.4vw, 96px);line-height:1;letter-spacing:-.026em;max-width:13em}
.poster em{font-style:italic;color:var(--text-soft)}
.world__side p{font-size:clamp(16px, 1.25vw, 19px);color:var(--text-soft);max-width:30em}
.world__bridge{margin-top:18px;color:var(--forest)!important;font-weight:500}
/* The progression asset carries wide empty margins on a #F3ECE3 ground, which
   read as a faint pale box on the cream. The section takes the asset's own
   ground and the image is cropped to its content band (circles + labels sit
   between ~30% and ~76% of its height). */
.world{background:#F3ECE3}
.world__journey img{width:100%;aspect-ratio:3/1;object-fit:cover;object-position:center 53%;
  /* the asset's ground is vignetted, so even on its own colour the edges showed
     as a faint box — feather all four sides into the section */
  -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent), linear-gradient(to bottom, transparent, #000 12%, #000 88%, transparent);
          mask-composite:intersect}
@media (min-width:1024px){
  .world__grid{grid-template-columns:8fr 4fr;align-items:end;gap:64px}
}
/* Native vertical progression for phones (seen 2026-09-14: at 390px the
   cropped asset left the circles ~60px and the labels unreadable) */
.world__steps{display:none}
@media (max-width:639px){
  .world__journey{display:none}
  .world__steps{display:block;position:relative;border-left:1px solid rgba(15,35,24,.22);margin-left:10px}
  .world__steps li{position:relative;display:flex;align-items:baseline;gap:14px;padding:14px 0 14px 28px;font-family:var(--serif);font-size:30px;line-height:1.1}
  .world__steps li::before{content:"";position:absolute;left:-6px;top:50%;width:11px;height:11px;margin-top:-5px;border-radius:50%;background:var(--cream);border:1.5px solid var(--forest)}
  .world__steps li:last-child::before{background:var(--gold);border-color:var(--gold)}
  .world__steps span{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--text-soft)}
}

/* ---------- Four Pillars ------------------------------------------------- */
.pillars{padding:var(--sec) 0}
/* max-width in px, not em: an em here resolves against the 17px body size, so
   16em squeezed the 60px heading into 272px, five lines deep (seen 2026-09-14) */
.pillars__head{margin-bottom:clamp(40px, 6vw, 80px);max-width:760px}
.pillars__head .label{margin-bottom:18px}
.pillars__list{display:grid;gap:40px 24px}
.pillar__img{border-radius:var(--r-card);overflow:hidden;aspect-ratio:8/9;margin-bottom:20px;background:var(--forest-deep)}
.pillar__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pillar:hover .pillar__img img{transform:scale(1.03)}
.pillar__n{font-family:var(--mono);font-size:12px;color:var(--gold);letter-spacing:.08em}
.pillar h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px, 2vw, 30px);line-height:1.1;margin:6px 0 10px}
.pillar p{color:var(--on-dark-soft);font-size:16px;max-width:24em}
@media (min-width:640px){.pillars__list{grid-template-columns:1fr 1fr}}
/* Phones: four full-width 8:9 images made the section a very long scroll */
@media (max-width:639px){.pillar__img{aspect-ratio:4/3}}
@media (min-width:1024px){
  .pillars__list{grid-template-columns:repeat(4,1fr)}
  .pillar:nth-child(even){margin-top:72px}   /* offset rhythm, not a flat card row */
}

/* ---------- Starter Guide ----------------------------------------------- */
.guide{padding:var(--sec) 0}
.guide__grid{display:grid;gap:56px;align-items:center}
.guide__copy .label{margin-bottom:18px}
.guide__copy .display{margin-bottom:22px;max-width:12em}
.guide__copy .body{margin-bottom:26px}
.checks{display:grid;gap:12px;margin-bottom:34px}
.checks li{position:relative;padding-left:30px;font-size:16px}
.checks li::before{content:"";position:absolute;left:0;top:.5em;width:14px;height:8px;border-left:1.5px solid var(--forest);border-bottom:1.5px solid var(--forest);transform:rotate(-45deg)}
.guide__visual{position:relative}
.frame{border-radius:var(--r-product);overflow:hidden;box-shadow:0 30px 60px -30px rgba(15,35,24,.35)}
.frame--detail{width:46%;margin:-18% 0 0 auto;border:6px solid var(--cream);position:relative}
@media (min-width:1024px){
  .guide__grid{grid-template-columns:5fr 7fr;gap:72px}
  .frame--main{margin-right:calc(var(--gutter) * -1)}
  .frame--detail{position:absolute;left:-10%;bottom:-12%;width:42%;margin:0}
}

/* Form */
.form__label{display:block;font-size:14px;font-weight:500;margin-bottom:8px}
.form__row{display:grid;gap:10px}
.form input{min-height:52px;width:100%;padding:12px 16px;border-radius:var(--r-btn);border:1px solid rgba(15,35,24,.28);background:#FFFDF8;color:var(--text);font:inherit;font-size:16px}
.form input:focus-visible{border-color:var(--forest);outline:2px solid var(--gold);outline-offset:2px}
.form input[aria-invalid="true"]{border-color:#B3261E}
.form__help{margin-top:10px;font-size:14px;color:var(--text-soft)}
.form__msg{margin-top:8px;font-size:14px;min-height:1.4em}
.form__msg[data-state="err"]{color:#8C1D18}
.form__msg[data-state="ok"]{color:var(--forest)}
@media (min-width:560px){.form__row{grid-template-columns:1fr auto}}

/* ---------- Education Designed to Stick --------------------------------- */
.method{padding:var(--sec) 0}
.method__grid{display:grid;gap:48px;align-items:center}
.method__copy .label{margin-bottom:18px}
.method__copy .display{margin-bottom:22px}
.method__copy .body{margin-bottom:36px}
.loop-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:24px}
.loop-step{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 16px;border-radius:var(--r-card);border:1px solid var(--rule);background:transparent;cursor:pointer;text-align:left;font-size:16px;font-weight:500;transition:background-color .3s var(--ease),border-color .3s var(--ease),color .3s var(--ease)}
.loop-step span{font-family:var(--mono);font-size:12px;color:var(--text-soft)}
.loop-step:hover{border-color:var(--forest)}
.loop-step[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.loop-step[aria-pressed="true"] span{color:var(--gold)}
.loop-detail{border-top:1px solid var(--rule);padding-top:18px;min-height:96px}
.loop-detail__k{font-family:var(--serif);font-size:26px;line-height:1.1;margin-bottom:6px}
.loop-detail__v{color:var(--text-soft);transition:opacity .3s var(--ease)}
.method__visual img{width:100%;
  -webkit-mask-image:radial-gradient(closest-side at 50% 50%, #000 70%, transparent 100%);
          mask-image:radial-gradient(closest-side at 50% 50%, #000 70%, transparent 100%)}
@media (min-width:1024px){
  .method__grid{grid-template-columns:5fr 6fr;gap:80px}
  .loop-steps{grid-template-columns:repeat(4,1fr)}
  .loop-step{flex-direction:column;align-items:flex-start;gap:4px}
}

/* ---------- Learning Paths (tabs) --------------------------------------- */
.paths{padding:var(--sec) 0}
.paths__head{display:grid;gap:20px;margin-bottom:40px}
.paths__head .label{margin-bottom:16px}
@media (min-width:1024px){.paths__head{grid-template-columns:7fr 5fr;align-items:end;gap:64px}}

.tabs__list{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-bottom:18px;scroll-snap-type:x proximity}
.tabs__list::-webkit-scrollbar{display:none}
.tabs__list [role="tab"]{flex:0 0 auto;min-height:48px;padding:10px 22px;border-radius:999px;border:1px solid rgba(15,35,24,.22);background:transparent;cursor:pointer;font-size:15px;font-weight:500;scroll-snap-align:start;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.tabs__list [role="tab"]:hover{border-color:var(--forest)}
.tabs__list [role="tab"][aria-selected="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}

.panel{display:grid;background:var(--cream);border-radius:var(--r-product);overflow:hidden;box-shadow:0 40px 80px -48px rgba(15,35,24,.45)}
.panel__visual{aspect-ratio:8/5;overflow:hidden;background:#1a1d1b}
.panel__visual img{width:100%;height:100%;object-fit:cover;transition:opacity .35s var(--ease)}
.panel__body{padding:clamp(24px, 3.4vw, 48px);display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.panel__title{font-family:var(--serif);font-weight:400;font-size:clamp(32px, 3.2vw, 46px);line-height:1}
.panel__purpose{color:var(--text-soft);max-width:30em}
.roadmap{counter-reset:r;width:100%;margin:6px 0 4px;border-top:1px solid var(--rule)}
.roadmap li{counter-increment:r;display:grid;grid-template-columns:36px 1fr;gap:8px;padding:11px 0;border-bottom:1px solid var(--rule);font-size:15px}
.roadmap li::before{content:counter(r, decimal-leading-zero);font-family:var(--mono);font-size:12px;color:var(--text-soft);padding-top:2px}
.panel__note{font-size:14px;padding:12px 14px;border-radius:var(--r-card);background:var(--sage);color:var(--forest);max-width:34em}
.panel.is-swapping .panel__visual img,.panel.is-swapping .panel__body{opacity:.25}
.panel__body{transition:opacity .3s var(--ease)}
@media (min-width:1024px){
  .panel{grid-template-columns:7fr 5fr}
  .panel__visual{aspect-ratio:auto;min-height:100%}
}

/* ---------- Editorial principle break ----------------------------------- */
.principle{padding:clamp(120px, 16vw, 220px) 0}
/* px, not em — 15em of a 17px figure was 255px and set the quote one word per line */
.principle__fig{max-width:940px}
.principle blockquote{font-family:var(--serif);font-weight:400;font-size:clamp(38px, 5.6vw, 84px);line-height:1.04;letter-spacing:-.022em;margin-bottom:28px}
.principle blockquote::before{content:"\201C";display:block;font-size:.9em;line-height:.6;color:var(--gold);margin-bottom:.12em}
@media (min-width:1024px){.principle__fig{margin-left:25%}}

/* ---------- Member experience ------------------------------------------- */
.member{padding:var(--sec) 0 clamp(60px, 8vw, 110px)}
.member__grid{display:grid;gap:48px;align-items:center}
.member__copy .label{margin-bottom:18px}
.member__copy .display{margin-bottom:22px;max-width:11em}
.member__copy .body{margin-bottom:28px}
.goals{border:0;margin:0 0 30px;padding:0;min-width:0}
.goals legend{font-size:14px;font-weight:500;margin-bottom:12px;color:var(--on-dark)}
.goals__opts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.goals__opts button{min-height:56px;padding:10px 14px;border-radius:var(--r-card);border:1px solid var(--rule-dark);background:transparent;color:var(--on-dark-soft);text-align:left;font-size:14px;line-height:1.3;cursor:pointer;transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease)}
.goals__opts button:hover{border-color:var(--on-dark);color:var(--on-dark)}
.goals__opts button[aria-pressed="true"]{background:var(--cream);border-color:var(--cream);color:var(--forest);font-weight:600}
.member__reassure{margin-top:14px;font-size:14px;color:var(--on-dark-soft)}

.member__stage{position:relative;border-radius:var(--r-product);overflow:hidden}
.member__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dash{position:relative;margin:clamp(20px, 4vw, 56px);padding:clamp(18px, 2.2vw, 28px);border-radius:var(--r-product);background:rgba(244,240,231,.94);color:var(--forest);box-shadow:0 40px 70px -30px rgba(0,0,0,.55);backdrop-filter:blur(6px)}
.dash__top{margin-bottom:18px}
.dash__sample{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:4px 8px;border-radius:6px;background:var(--sage);color:var(--forest);margin-bottom:10px}
.dash__hello{font-family:var(--serif);font-size:28px;line-height:1.1}
.dash__goal{font-size:14px;color:var(--text-soft);margin-top:4px}
.dash__goal strong{color:var(--forest);font-weight:600}
.dash__progress{margin-bottom:16px}
.dash__row{display:flex;justify-content:space-between;font-size:13px;margin-bottom:8px}
.dash__row span:last-child{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dash__bar{height:6px;border-radius:99px;background:rgba(15,35,24,.12);overflow:hidden}
.dash__bar span{display:block;height:100%;border-radius:99px;background:var(--forest);transition:width .5s var(--ease)}
.dash__cards{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:8px}
.dash__card,.dash__next{padding:12px 14px;border-radius:var(--r-card);background:#FFFDF8;border:1px solid var(--rule)}
.dash__next{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.dash__k{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);margin-bottom:4px}
.dash__next .dash__k{color:rgba(244,240,231,.7)}
.dash__v{font-size:14px;font-weight:500;line-height:1.35}
.benefits{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:clamp(48px, 6vw, 80px);padding-top:28px;border-top:1px solid var(--rule-dark)}
.benefits li{font-size:14px;color:var(--on-dark-soft);display:flex;align-items:center;gap:10px}
.benefits li::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold)}
@media (min-width:1024px){
  .member__grid{grid-template-columns:5fr 7fr;gap:72px}
  .member__stage{min-height:620px;display:flex;align-items:center}
}
@media (max-width:480px){.dash__cards{grid-template-columns:1fr}}

/* ---------- Trust -------------------------------------------------------- */
.trust{position:relative;padding:var(--sec) 0;overflow:hidden}
.trust__texture{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.45}
.trust__grid{position:relative;display:grid;gap:48px}
.trust__head .display{margin-bottom:22px;max-width:12em}
.accordion{border-top:1px solid var(--rule-dark)}
.acc{border-bottom:1px solid var(--rule-dark)}
.acc__btn{display:grid;grid-template-columns:40px 1fr 32px;gap:14px;align-items:center;width:100%;padding:22px 0;background:none;border:0;cursor:pointer;text-align:left;color:var(--on-dark)}
.acc__n{font-family:var(--mono);font-size:12px;color:var(--gold)}
.acc__text{display:flex;flex-direction:column;gap:4px}
.acc__title{font-family:var(--serif);font-size:clamp(22px, 2vw, 28px);line-height:1.15}
.acc__line{font-size:15px;color:var(--on-dark-soft)}
.acc__icon{position:relative;width:32px;height:32px;border-radius:50%;border:1px solid var(--rule-dark);transition:transform .35s var(--ease),border-color .35s var(--ease)}
.acc__icon::before,.acc__icon::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:var(--on-dark);transform:translate(-50%,-50%)}
.acc__icon::after{transform:translate(-50%,-50%) rotate(90deg);transition:opacity .3s}
.acc__btn:hover .acc__icon{border-color:var(--on-dark)}
.acc__btn[aria-expanded="true"] .acc__icon{transform:rotate(180deg);border-color:var(--gold)}
.acc__btn[aria-expanded="true"] .acc__icon::after{opacity:0}
.acc__panel{padding:0 0 24px 54px;max-width:40em}
.acc__k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.acc__panel p:not(.acc__k){color:var(--on-dark-soft)}
@media (min-width:1024px){.trust__grid{grid-template-columns:5fr 7fr;gap:96px;align-items:start}}

/* ---------- Community ---------------------------------------------------- */
.community{padding:var(--sec) 0;overflow:hidden}
.community__grid{display:grid;gap:48px;align-items:center}
.community__copy .display{margin-bottom:22px;max-width:10em}
.community__copy .body{margin-bottom:14px}
.community__line{font-family:var(--serif);font-style:italic;font-size:22px;line-height:1.3;margin-bottom:30px;color:var(--on-dark)}
.community__visual{position:relative}
.community__network{border-radius:var(--r-product);width:100%}
/* The cards asset has a flat #F4F0E7 ground, so it is framed as a panel of
   the same cream rather than cut out (the cut-out smeared its text bars). */
.community__cards{position:absolute;width:40%;right:-4%;bottom:-10%;border-radius:var(--r-product);overflow:hidden;background:var(--cream);box-shadow:0 30px 60px -20px rgba(0,0,0,.5)}
/* No bleed here: bleeding the network to the viewport edge pushed the
   overlapping cards panel off-screen, where it was clipped (seen 2026-09-14). */
@media (min-width:1024px){
  .community__grid{grid-template-columns:5fr 7fr;gap:72px}
  .community__cards{right:-3%}
}
@media (max-width:639px){.community__cards{width:46%;right:0;bottom:-14%}.community__visual{margin-bottom:12%}}

/* ---------- Final CTA ---------------------------------------------------- */
.final{position:relative;padding:var(--sec) 0 0;overflow:hidden}
.final__in{position:relative;z-index:1}
.final__title{font-family:var(--serif);font-weight:400;font-size:clamp(46px, 7.8vw, 128px);line-height:.95;letter-spacing:-.03em;max-width:10em}
.final__sub{font-family:var(--serif);font-style:italic;font-size:clamp(28px, 3.6vw, 52px);line-height:1.1;color:var(--text-soft);margin:14px 0 30px}
.final__body{margin-bottom:30px}
.final__land{position:relative;margin-top:-4vw}
.final__land img{width:100%;aspect-ratio:16/6;object-fit:cover;object-position:center 70%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 45%);
          mask-image:linear-gradient(to bottom, transparent 0%, #000 45%)}
.final__phrase{position:absolute;left:0;right:0;bottom:28px;text-align:center;color:rgba(244,240,231,.9)}

/* ---------- Footer ------------------------------------------------------- */
.foot{padding:72px 0 40px}
.foot__top{display:grid;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--rule-dark);margin-bottom:28px}
.foot__brand p{margin-top:16px;color:var(--on-dark-soft);max-width:22em;font-size:15px}
.foot__cols{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.foot__cols div{display:flex;flex-direction:column;gap:0}
.foot__h{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,240,231,.5);margin-bottom:4px}
/* 44px rows: measured at 390px wide these links were 30px tall */
.foot__cols a{display:flex;align-items:center;min-height:44px;font-size:15px;color:var(--on-dark-soft);text-decoration:none}
.foot__cols a:hover{color:var(--on-dark)}
.foot__legal{font-size:13px;color:rgba(244,240,231,.62);max-width:48em;margin-bottom:10px}
.foot__legal--dim{color:rgba(244,240,231,.42);margin-bottom:0}
@media (min-width:768px){.foot__cols{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1024px){.foot__top{grid-template-columns:5fr 7fr}}

/* ---------- Reveal (enhancement only: content is visible without JS) ---- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .strip__track{animation:none;transform:none}
  .js .reveal{opacity:1;transform:none}
}

/* =========================================================================
   INNER PAGES — V2, 2026-09-14. His call: "Yes" to restyling How It Works,
   Learning Paths, Community and About. Same words, V2 presentation.
   ========================================================================= */
.nav__links a[aria-current="page"]{color:var(--forest);text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}

/* Page hero */
.phero{padding:120px 0 clamp(64px, 8vw, 110px);overflow:hidden}
.phero__grid{display:grid;gap:40px;align-items:center}
.phero__title{font-family:var(--serif);font-weight:400;font-size:clamp(42px, 5.8vw, 88px);line-height:1;letter-spacing:-.025em;margin-bottom:24px;max-width:13em}
.phero__lede{font-size:clamp(17px, 1.35vw, 20px);color:var(--text-soft);max-width:32em;margin-bottom:28px}
.phero__visual{border-radius:var(--r-product);overflow:hidden;box-shadow:0 40px 80px -48px rgba(15,35,24,.45)}
.phero__visual img{width:100%}
@media (min-width:1024px){
  .phero{min-height:78vh;display:flex;align-items:center;padding-top:112px}
  .phero__grid{grid-template-columns:6fr 6fr;gap:72px}
  .phero__visual{margin-right:calc(var(--gutter) * -.5)}
}
@media (max-width:639px){.phero__visual{max-height:420px}.phero__visual img{height:100%;max-height:420px;object-fit:cover}}

/* Inner section */
.isec{padding:var(--sec) 0}
.isec__head{margin-bottom:clamp(36px, 5vw, 64px)}
.isec__head .display{margin-bottom:18px;max-width:18ch}
.isec__head .body{max-width:40em}
.isec__note{margin-top:22px;font-size:15px;color:var(--text-soft);max-width:44em}
.isec__note--light{color:var(--on-dark-soft)}
.isec__pull{font-family:var(--serif);font-size:clamp(24px, 2.6vw, 36px);line-height:1.25;max-width:26em;padding-left:22px;border-left:2px solid var(--gold)}
.env-forest .isec__head .display,.env-ink .isec__head .display{color:var(--on-dark)}
.method__grid--inner{padding:0}

/* Accordion on light grounds (the homepage trust accordion is dark) */
.accordion--light{border-top-color:var(--rule)}
.accordion--light .acc{border-bottom-color:var(--rule)}
.accordion--light .acc__btn{color:var(--text)}
.accordion--light .acc__n{color:var(--text-soft)}
.accordion--light .acc__line{color:var(--text-soft)}
.accordion--light .acc__icon{border-color:rgba(15,35,24,.24)}
.accordion--light .acc__icon::before,.accordion--light .acc__icon::after{background:var(--forest)}
.accordion--light .acc__btn:hover .acc__icon{border-color:var(--forest)}
.accordion--light .acc__btn[aria-expanded="true"] .acc__icon{border-color:var(--forest)}
.accordion--light .acc__k{color:var(--forest)}
.accordion--light .acc__panel p:not(.acc__k){color:var(--text-soft)}
.acc__panel .acc__k:first-child:empty{display:none}
.acc__panel .acc__k:not(:first-child){margin-top:12px}
.accordion{max-width:900px}
@media (max-width:639px){.acc__panel{padding-left:0}}

/* The working roadmap */
.journey{display:grid;gap:24px}
.jpanel{padding:24px;border-radius:var(--r-product);background:var(--forest);color:var(--cream)}
.jpanel__label{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,240,231,.62);margin-bottom:6px}
.jpanel__label--next{margin-top:24px}
.jpanel__count{font-family:var(--serif);font-size:56px;line-height:1;margin-bottom:14px}
.jpanel__of{font-size:22px;color:rgba(244,240,231,.62);margin-left:6px}
.jbar{height:6px;border-radius:99px;background:rgba(244,240,231,.18);overflow:hidden}
.jbar__fill{display:block;height:100%;width:0;border-radius:99px;background:var(--gold);transition:width .45s var(--ease)}
.jpanel__next{font-size:17px;font-weight:500}
.jpanel__badge{margin-top:18px;display:inline-block;padding:8px 12px;border-radius:8px;background:var(--gold);color:var(--forest);font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.jpanel__reset{margin-top:22px;color:var(--cream);border-color:rgba(244,240,231,.35)}
.jpanel__reset:hover{border-color:var(--cream)}
.jpanel__note{margin-top:14px;font-size:13px;color:rgba(244,240,231,.62)}
.jsteps{display:grid;gap:8px}
.jstep{display:grid;grid-template-columns:28px 34px 1fr;gap:4px 12px;width:100%;min-height:64px;padding:16px 18px;border-radius:var(--r-card);border:1px solid var(--rule);background:#FFFDF8;text-align:left;cursor:pointer;transition:border-color .25s var(--ease),background-color .25s var(--ease)}
.jstep:hover{border-color:var(--forest)}
.jstep__tick{grid-row:1 / 4;align-self:start;margin-top:2px;width:24px;height:24px;border-radius:50%;border:1.5px solid rgba(15,35,24,.35);position:relative;transition:background-color .25s var(--ease),border-color .25s var(--ease)}
.jstep__tick::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:11px;border:solid var(--cream);border-width:0 2px 2px 0;transform:rotate(45deg);opacity:0;transition:opacity .2s}
.jstep[aria-pressed="true"]{background:var(--sage);border-color:var(--forest)}
.jstep[aria-pressed="true"] .jstep__tick{background:var(--forest);border-color:var(--forest)}
.jstep[aria-pressed="true"] .jstep__tick::after{opacity:1}
.jstep__n{grid-row:1;font-family:var(--mono);font-size:12px;color:var(--text-soft);padding-top:5px}
.jstep__title{grid-column:3;grid-row:1;font-family:var(--serif);font-size:22px;line-height:1.2}
.jstep__out{grid-column:3;font-size:15px;color:var(--text-soft)}
.jstep__ev{grid-column:3;font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-soft)}
.safety{margin-top:28px;padding:18px 20px;border-radius:var(--r-card);background:var(--sage);color:var(--forest);max-width:52em}
.safety strong{font-weight:600}
.safety--dark{background:rgba(244,240,231,.08);color:var(--on-dark)}
@media (min-width:1024px){
  .journey{grid-template-columns:4fr 8fr;gap:32px;align-items:start}
  .jpanel{position:sticky;top:104px;padding:32px}
}

/* Website vs Discord */
.duo2{display:grid;gap:12px}
.duo2__col{padding:clamp(24px, 3vw, 40px);border-radius:var(--r-product);background:#FFFDF8;border:1px solid var(--rule)}
.duo2__col--dark{background:var(--forest);border-color:var(--forest);color:var(--on-dark)}
.duo2__col .label{margin-bottom:16px}
.duo2__list li{font-family:var(--serif);font-size:clamp(20px, 1.8vw, 26px);line-height:1.25;padding:12px 0;border-bottom:1px solid var(--rule)}
.duo2__col--dark .duo2__list li{border-bottom-color:var(--rule-dark)}
.duo2__list li:last-child{border-bottom:0}
@media (min-width:768px){.duo2{grid-template-columns:1fr 1fr}}

/* The Constitution */
.creed2{display:grid;gap:0;counter-reset:none;max-width:1100px}
.creed2 li{display:grid;grid-template-columns:44px 1fr;gap:12px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--rule-dark);font-family:var(--serif);font-size:clamp(22px, 2vw, 28px);line-height:1.2;color:var(--on-dark)}
.creed2 li span{font-family:var(--mono);font-size:12px;color:var(--gold)}
@media (min-width:1024px){
  .creed2{grid-template-columns:1fr 1fr;column-gap:64px;grid-auto-flow:column;grid-template-rows:repeat(5,auto)}
}

/* Impact outcomes — static rows, nothing to open, so no control */
.outcomes{max-width:980px;border-top:1px solid var(--rule)}
.outcomes li{display:grid;grid-template-columns:1fr;gap:6px;padding:20px 0;border-bottom:1px solid var(--rule)}
.outcomes__v{font-family:var(--serif);font-size:clamp(22px, 2vw, 28px);line-height:1.2}
@media (min-width:768px){.outcomes li{grid-template-columns:200px 1fr;align-items:baseline;gap:24px}}

/* Inner pages: the loop controls sat vertically centred against the tall loop
   image, leaving a large gap under the section heading (seen 2026-09-14). Top-
   align them and keep the picture a supporting size. */
.method__grid--inner{align-items:start}
.method__grid--inner .method__visual{max-width:520px;justify-self:center}
@media (min-width:1024px){.method__grid--inner{grid-template-columns:6fr 5fr}}

/* =========================================================================
   15 SEPTEMBER 2026 — SMOKE'S CONSOLIDATED REFINEMENT PASS
   "The overall direction is approved. This is a refinement pass, not another
   redesign." Copy: NM-WEB-004 Final Approved Copy Lock. Each block below
   answers one line of his message, quoted.
   These rules come LAST on purpose, so they win over the 14 Sep rules above.
   ========================================================================= */

@keyframes nm-enter{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes nm-fade{from{opacity:0}to{opacity:1}}

/* ---- Mobile menu: "Learn currently appears selected even when the user is
   elsewhere." Focus now lands on the panel; only aria-current marks a page. */
.menu:focus{outline:none}
.menu nav a[aria-current="page"]{color:var(--gold)}
.menu nav a[aria-current="page"]::after{content:"";display:inline-block;width:8px;height:8px;margin-left:14px;border-radius:50%;background:var(--gold);vertical-align:middle}

/* ---- Hero ----------------------------------------------------------------
   Transparent objects, layered: glass sphere behind, stone beside and partly
   behind the book, book in front ("slightly smaller than the book so the
   book remains the hero object"). The sphere is no longer masked — the new
   file is genuinely see-through. */
.hero__sphere{inset:auto;top:0;right:0;width:74%;height:auto;object-fit:contain;
  -webkit-mask-image:none;mask-image:none;
  filter:drop-shadow(0 36px 34px rgba(30,24,16,.10))}
.hero__object{width:30%;right:21%;left:auto;bottom:4%;z-index:1}
.hero__book{width:36%;left:13%;bottom:0;z-index:2}

/* Desktop: "Increase the overall hero composition by roughly 15–20%." */
@media (min-width:1024px){
  .hero__copy .label{font-size:13px;margin-bottom:26px}
  .hero__title{font-size:clamp(60px, 9vw, 138px);margin-bottom:40px}   /* was max 118px: +17% */
  .hero__lede{font-size:clamp(18px, 1.62vw, 23px);max-width:27em;margin-bottom:38px}
  .hero .actions .btn{min-height:58px;padding:16px 28px;font-size:16px}
  .hero__proof{font-size:15px}
  /* Seen at 1440x900 on the first pass: a square 660px scene pulled up 112px
     put the sphere's rim on the full stop of "Future." and cut the book and
     stone off at the bottom of the screen. A wider, shorter stage keeps the
     group clear of the headline and inside the first screen: the sphere sits
     back right, the stone beside the book and partly behind it, the book in
     front. */
  .hero__scene{max-width:660px;aspect-ratio:1.36/1;margin-top:-56px}   /* was 540px wide: +22% */
  .hero__sphere{width:60%;right:3%;top:0}
  .hero__object{width:23%;right:37%;bottom:2%}
  .hero__book{width:29%;left:14%;bottom:2%}
}

/* Phone: "Let a small portion of the hero visual composition enter the bottom
   of the first viewport. Do not move the primary CTA below the fold."
   Measured on the preview at 390x844 before this change: scene started at
   666px, primary button ended at 547px. Tightening only the gaps inside the
   hero lifts the scene without moving any words. */
@media (max-width:1023px){
  .hero{padding-top:100px}
  .hero__grid{gap:8px}
  .hero__copy .label{margin-bottom:16px}
  .hero__title{margin-bottom:20px}
  .hero__lede{margin-bottom:24px}
  .hero__proof{margin-top:14px}
  .hero__scene{max-width:480px}
}
@media (max-width:639px){
  .hero__book{width:40%;left:6%}
  .hero__sphere{width:80%}
  /* Smoke, 17 Sep: "the little house icon shows on the first page on desktop
     but not on mobile". The stone was hidden on phones by the older
     "fewer objects on mobile" rule; brought back beside the book. */
  .hero__object{display:block;width:30%;right:auto;left:40%;bottom:1%}
}

/* ---- Four Pillars: "Slightly increase the card scale on desktop and give the
   section more horizontal presence." A scale adjustment only. */
/* The list reaches half-way into the side gutters; the heading stays on the
   same left edge as every other section. (First pass widened the whole shell
   and the heading slid 40px left of the logo — seen at 1440.) */
@media (min-width:1024px){
  .pillars__list{gap:40px 32px;margin-inline:calc(var(--gutter) * -.5)}
  .pillar h3{font-size:clamp(26px, 2.2vw, 34px)}
  .pillar p{font-size:17px}
}

/* ---- Learning Method: "Make the Understand → Recall → Apply → Progress loop
   the primary visual focus. The controls and the diagram should feel
   connected. When a step is selected, the corresponding node in the loop
   should visibly activate." */
.loop{position:relative}
.loop-node{position:absolute;left:var(--x);top:var(--y);width:19%;aspect-ratio:1/1;border-radius:50%;cursor:pointer;transform:translate(-50%,-50%);transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.loop-node::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid transparent;transition:border-color .45s var(--ease)}
.loop-node__n{position:absolute;top:-4%;right:-4%;min-width:30px;height:30px;padding:0 7px;border-radius:99px;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:11px;background:var(--paper);color:var(--text-soft);border:1px solid var(--rule);transition:background-color .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease)}
.loop-node.is-active{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 0 0 10px rgba(201,162,77,.16),0 22px 40px -14px rgba(15,35,24,.35)}
.loop-node.is-active::before{border-color:var(--gold)}
.loop-node.is-active .loop-node__n{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.loop-detail.is-entering{animation:nm-enter .35s var(--ease)}
@media (min-width:1024px){
  .method .method__grid{grid-template-columns:4fr 7fr;gap:56px}
  .method .loop-steps{grid-template-columns:1fr;gap:6px}
  .method .loop-step{flex-direction:row;align-items:center;gap:14px;min-height:58px}
  .method .method__visual{width:100%;max-width:760px;justify-self:end}
}

/* ---- Learning Paths: "Increase the main roadmap/product panel by roughly
   15–25% on desktop." Status labels per NM-WEB-004; variable stage counts. */
.panel__status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.12em;line-height:1.3;padding:6px 10px;border-radius:6px;border:1px solid rgba(15,35,24,.3);color:var(--text-soft)}
.panel__status[data-status="active"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.panel__status[data-status="active"]::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);flex:none}
.roadmap li{grid-template-columns:36px minmax(0,1fr);column-gap:8px;row-gap:2px;align-items:baseline}
.roadmap li::before{grid-row:1}
.roadmap__name{grid-column:2;font-weight:600;font-size:15.5px;line-height:1.35;color:var(--forest)}
.roadmap__line{grid-column:2;font-size:14.5px;line-height:1.45;color:var(--text-soft)}
.roadmap__desc{grid-column:2 / -1;font-size:15px;line-height:1.55;color:var(--text-soft);margin-top:6px;max-width:46em}
.panel__outcome{width:100%;padding:14px 16px;border-radius:var(--r-card);background:var(--sage);color:var(--forest)}
.panel__k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px;opacity:.8}
#pathOutcome{font-size:15px;line-height:1.5}
.panel.is-entering .panel__visual img{animation:nm-fade .45s var(--ease)}
.panel.is-entering .panel__status,.panel.is-entering .panel__title,.panel.is-entering .panel__purpose,.panel.is-entering .panel__outcome{animation:nm-enter .35s var(--ease) both}
.panel.is-entering .roadmap li{animation:nm-enter .4s var(--ease) both;animation-delay:calc(var(--i, 0) * 30ms)}
@media (min-width:768px){
  .roadmap li{grid-template-columns:36px minmax(0,1fr) minmax(0,1.15fr);column-gap:16px}
  .roadmap__line{grid-column:3;grid-row:1}
}
@media (min-width:1024px){
  /* Wider: the tab block reaches three quarters of the way into the side
     gutters. Taller: a real product-demo height instead of the image's own. */
  .paths .tabs{margin-inline:calc(var(--gutter) * -.75)}
  .panel{grid-template-columns:5fr 6fr;min-height:760px}
  .panel__body{padding:clamp(40px, 3.6vw, 64px);gap:16px}
  .panel__title{font-size:clamp(34px, 3.2vw, 50px)}
  .panel__purpose{font-size:17px}
  .panel--full{grid-template-columns:4fr 7fr}
}

/* ---- Member Profile / Dashboard ------------------------------------------
   "Make the dashboard significantly larger on desktop so it is readable at a
   glance." Phone order is simply the source order: head, goals, dashboard,
   CTA. Desktop places the three text blocks left and the dashboard right. */
.member__grid{gap:32px;align-items:start}
.member__head .label{margin-bottom:18px}
.member__head .display{margin-bottom:22px;max-width:11em}
.member__head .body + .body{margin-top:14px}
.goals{margin:0}
.member__stage{display:flex;align-items:center}
.dash{width:100%;margin:clamp(14px, 3vw, 44px);padding:clamp(18px, 2.6vw, 40px)}
.dash__top{margin-bottom:20px}
.dash__top .dash__k{margin-top:4px}
.dash__goal{font-family:var(--serif);font-size:clamp(26px, 2.6vw, 38px);line-height:1.08;color:var(--forest);margin:2px 0 8px}
.dash__intro{font-size:clamp(15px, 1.15vw, 17px);line-height:1.5;color:var(--text-soft);max-width:40em}
.dash__journey{display:grid;gap:8px;margin-bottom:10px}
/* align-content:start — seen at 1440: cards in the same row are stretched to
   equal height, and the spare height was being shared out between the title
   row and the line row, so a one-line title floated above its text. */
.dash__journey li{display:grid;grid-template-columns:30px minmax(0,1fr);align-content:start;column-gap:10px;row-gap:2px;padding:14px 16px;border-radius:var(--r-card);background:#FFFDF8;border:1px solid var(--rule)}
.dash__n{grid-row:1 / span 2;font-family:var(--mono);font-size:12px;color:var(--text-soft);padding-top:3px}
.dash__step{font-weight:600;font-size:15.5px;line-height:1.3;color:var(--forest)}
.dash__desc{font-size:14px;line-height:1.45;color:var(--text-soft)}
.dash__journey li.is-current{background:var(--sage);border-color:var(--forest)}
.dash__journey li.is-current .dash__n{color:var(--forest);font-weight:500}
.dash__next .dash__v{font-size:16px}
.dash__risk{margin-top:10px;padding:10px 14px;border-radius:var(--r-card);border-left:3px solid #F59E0B;background:#FFFDF8;font-size:13.5px;line-height:1.45;color:var(--text-soft)}
.dash.is-entering .dash__goal,.dash.is-entering .dash__intro,.dash.is-entering .dash__next,.dash.is-entering .dash__risk{animation:nm-enter .35s var(--ease) both}
.dash.is-entering .dash__journey li{animation:nm-enter .4s var(--ease) both;animation-delay:calc(var(--i, 0) * 35ms)}
@media (min-width:768px){.dash__journey{grid-template-columns:1fr 1fr}}
@media (min-width:1024px){
  .member__grid{grid-template-columns:4fr 8fr;grid-template-rows:auto auto auto 1fr;column-gap:64px;row-gap:32px}
  .member__head{grid-column:1;grid-row:1}
  .goals{grid-column:1;grid-row:2}
  .member__cta{grid-column:1;grid-row:3}
  .member__stage{grid-column:2;grid-row:1 / span 4;min-height:0}
  .dash__step{font-size:16.5px}
  .dash__desc{font-size:15px}
}

/* ---- Trust: two IN PRACTICE paragraphs per principle -------------------- */
.acc__panel p:not(.acc__k) + p{margin-top:10px}
.acc__line{max-width:44em}
.acc__panel.is-entering{animation:nm-enter .35s var(--ease)}

/* ---- Community: six independent transparent cards ---------------------- */
.community__visual{margin-block:6% 9%}
.ccard{position:absolute;height:auto;z-index:1;filter:drop-shadow(0 22px 26px rgba(0,0,0,.30))}
.ccard--a{width:33%;left:-6%;top:10%}
.ccard--b{width:35%;right:-4%;top:-8%}
.ccard--c{width:36%;left:8%;bottom:-12%}
.ccard--d{width:31%;right:-2%;bottom:-5%}
@media (max-width:639px){
  .ccard--a,.ccard--d{display:none}
  .ccard--b{width:50%;right:-1%;top:-10%}
  .ccard--c{width:52%;left:-1%;bottom:-16%}
  .community__visual{margin-block:10% 16%}
}

/* ---- Secondary pages: "a lighter version of the homepage V2 design system…
   Each page only needs 1–2 stronger visual/editorial moments." ----------- */
.isec--statement{padding:clamp(120px, 15vw, 210px) 0}
/* 18ch, not 15ch: at 15ch the How It Works statement stacked four lines deep */
.isec--statement .isec__head .display{font-size:clamp(42px, 6vw, 92px);line-height:1;letter-spacing:-.024em;max-width:18ch}
.isec--statement .isec__head .body{font-size:clamp(17px, 1.4vw, 21px)}
.phero__scene{position:relative;overflow:visible;box-shadow:none;border-radius:0}
.phero__scene .community__network{border-radius:var(--r-product);box-shadow:0 40px 80px -48px rgba(15,35,24,.45)}
.isec__pull--big{font-size:clamp(30px, 3.8vw, 56px);line-height:1.12;max-width:22em;padding-left:clamp(20px, 2.4vw, 34px)}

/* How It Works: each stage now carries NM-WEB-004's short line + description */
.jstep__out{color:var(--forest);font-weight:500}
.jstep__desc{grid-column:3;font-size:14.5px;line-height:1.5;color:var(--text-soft);margin-top:2px}

/* Learning Paths page: the tabs sit on a forest ground there */
.env-forest .tabs__list [role="tab"]{border-color:var(--rule-dark);color:var(--on-dark-soft)}
.env-forest .tabs__list [role="tab"]:hover{border-color:var(--on-dark);color:var(--on-dark)}
.env-forest .tabs__list [role="tab"][aria-selected="true"]{background:var(--cream);border-color:var(--cream);color:var(--forest)}
/* The panel sets its OWN text colour. Seen 2026-09-15 on the Learning Paths
   page: inside the forest section the panel title inherited the section's
   cream text and vanished against the cream panel. */
.panel{color:var(--text)}
.panel__purpose{max-width:36em}
.env-forest .panel{box-shadow:0 50px 90px -50px rgba(0,0,0,.6)}

/* Community page hero: the network and separate cards, not one boxed picture.
   `.phero__visual img{width:100%}` would otherwise stretch every card. */
.phero__visual:has(.ccard){overflow:visible;box-shadow:none;border-radius:0}
.phero__visual .community__visual{margin-block:6% 10%}
.phero__visual img.ccard{height:auto;max-height:none;object-fit:contain}
.phero__visual .ccard--a{width:33%}
.phero__visual .ccard--b{width:35%}
.phero__visual .ccard--c{width:36%}
.phero__visual .community__network{border-radius:var(--r-product);box-shadow:0 40px 80px -48px rgba(15,35,24,.45)}
@media (max-width:639px){
  .phero__visual .ccard--b{width:50%}
  .phero__visual .ccard--c{width:52%}
}

/* ---- Cookie choice, 2026-09-28 (his call: "Build it, show Smoke").
   Sits at the bottom, never over the menu (z 100) or the skip link.
   Ink panel, cream words: the same pairing as the footer. */
.cookie{position:fixed;left:var(--gutter);right:var(--gutter);bottom:16px;z-index:80;max-width:720px;margin-inline:auto;
  display:flex;gap:16px 24px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:18px 20px;border-radius:var(--r-card);background:var(--ink);color:var(--on-dark);
  box-shadow:0 24px 48px -24px rgba(10,18,14,.55)}
.cookie__text{margin:0;font-size:15px;line-height:1.5;flex:1 1 320px;color:var(--on-dark-soft)}
.cookie__text a{color:var(--on-dark);text-underline-offset:3px}
.cookie__actions{display:flex;gap:10px;flex:0 0 auto}
.cookie__no{background:transparent;color:var(--on-dark);border-color:rgba(244,240,231,.36)}
.cookie__no:hover{border-color:var(--on-dark)}
@media (max-width:639px){
  .cookie{bottom:12px;padding:16px}
  .cookie__actions{width:100%}
  .cookie__actions .btn{flex:1}
}

/* =========================================================================
   MEMBERS' AREA PREVIEW (members.html) — 2026-09-28
   Smoke's NM-PORTAL-001: "Extend Website V2 rather than inventing a separate
   dashboard brand" — forest, cream, near-black, restrained muted gold for
   Premium only, the existing type. Signature: the Money Map, the Six Levels
   drawn as one line with "You are here" lit on the current level.
   ========================================================================= */
body.mp{background:var(--paper)}
.mp [data-show]{display:none}
.mp[data-tier="free"] [data-show="free"],.mp[data-tier="premium"] [data-show="premium"]{display:revert}
.mp[data-tier="free"] span[data-show="free"],.mp[data-tier="premium"] span[data-show="premium"]{display:inline}

/* Preview line — always visible, never mistaken for the product */
.mp-preview{position:sticky;top:0;z-index:60;display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;justify-content:space-between;
  padding:10px var(--gutter);background:var(--ink);color:var(--on-dark-soft);font-size:14px;line-height:1.45}
.mp-preview p{margin:0}
.mp-preview__tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-right:8px}
.mp-preview__links{display:flex;gap:18px}
.mp-preview__links a{color:var(--on-dark);text-underline-offset:3px;font-weight:500}

.mp-shell{display:grid;grid-template-columns:1fr;min-height:100vh}
@media (min-width:1024px){.mp-shell{grid-template-columns:248px 1fr}}

/* Desktop sidebar */
.mp-side{display:none}
@media (min-width:1024px){
  .mp-side{display:flex;flex-direction:column;gap:28px;position:sticky;top:42px;height:calc(100vh - 42px);padding:28px 20px;background:var(--forest);color:var(--on-dark)}
}
.mp-side__logo{padding:0 12px}
.mp-side__logo img{width:18px}
.mp-nav{display:flex;flex-direction:column;gap:2px;flex:1}
.mp-nav a{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px;padding:0 12px;border-radius:var(--r-btn);text-decoration:none;color:var(--on-dark-soft);font-size:15px}
.mp-nav a:hover{background:rgba(244,240,231,.06);color:var(--on-dark)}
.mp-nav a[aria-current="page"]{background:rgba(244,240,231,.1);color:var(--on-dark);box-shadow:inset 3px 0 0 var(--gold)}
.mp-nav__foot{margin-top:auto}

.mp-main{min-width:0;display:flex;flex-direction:column}
.mp-top{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:22px var(--gutter) 10px}
@media (min-width:1024px){.mp-top{padding:30px 48px 12px}}
.mp-top__title{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.4vw,46px);line-height:1.05;letter-spacing:-.015em;margin-right:auto}
.mp-top__title:focus{outline:none}
.mp-tier{display:inline-flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--rule);border-radius:999px;background:var(--cream)}
.mp-tier__k{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft);padding:0 8px 0 10px}
.mp-tier button{min-height:36px;padding:0 16px;border:0;border-radius:999px;background:transparent;cursor:pointer;font-size:14px;font-weight:600;color:var(--text-soft)}
.mp-tier button[aria-pressed="true"]{background:var(--forest);color:var(--cream)}
.mp-tier button[data-tier="premium"][aria-pressed="true"]{box-shadow:inset 0 0 0 1px var(--gold)}
.mp-avatar{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sage);font-family:var(--mono);font-size:13px;color:var(--forest)}

.mp main#main{padding:8px var(--gutter) 40px;flex:1}
@media (min-width:1024px){.mp main#main{padding:8px 48px 56px}}
.mp-context,.mp-lede{color:var(--text-soft);margin-bottom:22px;max-width:44em}
.mp-lede--sm{font-size:15px;margin-bottom:16px}

.mp-card{background:#FFFDF8;border:1px solid var(--rule);border-radius:var(--r-card);padding:22px}
.mp-h{font-family:var(--sans);font-size:17px;font-weight:600;margin-bottom:14px}
.mp-h3{font-family:var(--serif);font-weight:500;font-size:22px;line-height:1.2;margin-bottom:6px}
.mp-display{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,40px);line-height:1.1;letter-spacing:-.012em;margin-bottom:10px}
.mp-body{color:var(--text-soft)}
.mp-muted{color:var(--text-soft);font-size:15px}
.mp-link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;color:var(--forest);text-underline-offset:4px}
.mp-cardhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.mp-sample{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--graphite)}
.mp-badge{display:inline-flex;align-items:center;gap:6px;min-height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--rule);font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);background:var(--cream);white-space:nowrap}
.mp-badge--premium{border-color:rgba(201,162,77,.55);color:#7A5F22;background:rgba(201,162,77,.1)}
.mp-nav .mp-badge--premium{min-height:20px;padding:0 7px;font-size:10px;color:var(--gold);background:transparent;border-color:rgba(201,162,77,.5)}
.mp-note{padding:12px 16px;border-left:3px solid var(--gold);background:var(--cream);color:var(--text-soft);font-size:15px;margin-bottom:20px;border-radius:0 8px 8px 0}
.mp-gap{margin-top:28px}
.mp-pad{padding:18px 4px}
.mp-plain li{padding:8px 0;border-bottom:1px solid var(--rule);font-size:15px}

/* Home: asymmetric, action-first (brief section 6) */
.mp-home{display:grid;gap:16px;align-items:start}
@media (min-width:880px){
  .mp-home{grid-template-columns:repeat(12,1fr)}
  .mp-level{grid-column:1 / span 5}
  .mp-moves{grid-column:6 / span 7}
  .mp-continue,.mp-newsmini,.mp-saved,.mp-snap{grid-column:span 4}
  .mp-quiet,.mp-event{grid-column:1 / -1}
}
.mp-level{background:var(--forest);color:var(--on-dark);border-color:transparent;display:flex;flex-direction:column;gap:6px}
.mp-level .mp-link{color:var(--on-dark);margin-top:auto}
.mp-here{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.mp-level__n{font-family:var(--mono);font-size:13px;color:var(--on-dark-soft)}
.mp-level__name{font-family:var(--serif);font-weight:400;font-size:clamp(44px,5vw,64px);line-height:1;letter-spacing:-.02em;margin:2px 0 10px}
.mp-progress{height:6px;border-radius:6px;background:rgba(244,240,231,.14);overflow:hidden}
.mp-progress__bar{height:100%;width:var(--p);background:var(--gold);border-radius:6px}
.mp[data-tier="free"] .mp-progress__bar[data-show="free"],.mp[data-tier="premium"] .mp-progress__bar[data-show="premium"]{display:block}
.mp-level__meta{font-size:14px;color:var(--on-dark-soft);margin-top:6px}
.mp-nextlv{margin-top:14px;padding-top:14px;border-top:1px solid var(--rule-dark);font-size:14px;color:var(--on-dark-soft)}
.mp-nextlv b{color:var(--on-dark);font-weight:600}
.mp-nextlv__k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px}
.mp[data-tier="free"] .mp-quiet{flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 16px}
.mp-quiet p{flex:1 1 280px}

/* THE MONEY MAP — six stations on one line */
.mp-map{display:grid;grid-template-columns:repeat(6,1fr);position:relative;margin:18px 0 6px}
.mp-map::before{content:"";position:absolute;left:calc(100%/12);right:calc(100%/12);top:7px;height:2px;background:rgba(244,240,231,.22)}
.mp-map li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px}
.mp-map__dot{position:relative;z-index:1;width:16px;height:16px;border-radius:50%;background:var(--forest);border:2px solid rgba(244,240,231,.35)}
.mp-map__name{font-size:11px;line-height:1.2;color:var(--on-dark-soft)}
.mp-map li.is-done .mp-map__dot,
.mp[data-tier="free"] .mp-map li[data-state-free="done"] .mp-map__dot,
.mp[data-tier="premium"] .mp-map li[data-state-premium="done"] .mp-map__dot{background:var(--sage);border-color:var(--sage)}
.mp[data-tier="free"] .mp-map li[data-state-free="current"] .mp-map__dot,
.mp[data-tier="premium"] .mp-map li[data-state-premium="current"] .mp-map__dot{background:var(--gold);border-color:var(--gold);box-shadow:0 0 0 5px rgba(201,162,77,.25)}
.mp[data-tier="free"] .mp-map li[data-state-free="current"] .mp-map__name,
.mp[data-tier="premium"] .mp-map li[data-state-premium="current"] .mp-map__name{color:var(--on-dark);font-weight:600}

/* Big map on My Path */
.mp-map--big{margin:4px 0 28px;padding:28px 12px 22px;background:var(--forest);border-radius:var(--r-product)}
.mp-map--big::before{top:calc(28px + 17px)}
.mp-map--big button{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-height:44px;padding:4px 2px 8px;background:none;border:0;border-radius:10px;cursor:pointer;color:var(--on-dark)}
.mp-map--big button:hover{background:rgba(244,240,231,.06)}
.mp-map--big button[aria-pressed="true"]{background:rgba(244,240,231,.1)}
.mp-map--big .mp-map__dot{width:28px;height:28px}
.mp-map__num{font-family:var(--mono);font-size:11px;color:var(--on-dark-soft)}
.mp-map--big .mp-map__name{font-family:var(--serif);font-size:clamp(14px,1.5vw,20px);color:var(--on-dark)}
.mp-map__st{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);min-height:12px}
@media (max-width:639px){
  .mp-map--big{grid-template-columns:1fr;gap:4px;padding:16px}
  .mp-map--big::before{left:calc(16px + 8px + 12px + 14px + 13px);right:auto;width:2px;top:30px;bottom:30px;height:auto}
  .mp-map--big li{align-items:stretch}
  .mp-map--big button{flex-direction:row;justify-content:flex-start;gap:14px;padding:8px}
  .mp-map--big .mp-map__num{order:-1;width:12px}
  .mp-map--big .mp-map__st{margin-left:auto}
}

/* Next 3 moves — the most important module */
.mp-moves__list li{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:14px 0;border-top:1px solid var(--rule)}
.mp-moves__n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--sage);font-family:var(--mono);font-size:13px;color:var(--forest)}
.mp-moves__list li:first-child .mp-moves__n{background:var(--forest);color:var(--cream)}
.mp-moves__t{font-weight:600}
.mp-moves__d{font-size:14px;color:var(--text-soft)}
@media (max-width:479px){.mp-moves__list li{grid-template-columns:34px 1fr}.mp-moves__list .btn{grid-column:2;justify-self:start}}

.mp-continue{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mp-continue .btn{margin-top:auto}
.mp-topic{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--forest);background:var(--sage);padding:3px 8px;border-radius:6px}
.mp-briefs li{padding:12px 0;border-top:1px solid var(--rule)}
.mp-briefs__t{font-weight:600;margin:8px 0 2px;font-size:15px}
.mp-quiet{flex-direction:column;gap:8px;align-items:flex-start;background:var(--cream)}
.mp[data-tier="free"] .mp-quiet{display:flex}
.mp-alloc{display:flex;height:12px;border-radius:6px;overflow:hidden;margin:6px 0 10px}
.mp-alloc span{width:var(--w)}
.mp-alloc__core{background:var(--forest)}.mp-alloc__tac{background:var(--gold)}.mp-alloc__cash{background:var(--sage)}
.mp-alloc--big{height:18px}
.mp-alloc__key{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14px;color:var(--text-soft);margin-bottom:8px}

/* My Path + Action: two columns */
.mp-path{display:grid;gap:16px;align-items:start}
@media (min-width:880px){.mp-path{grid-template-columns:3fr 2fr}}
.mp-lvtarget{font-weight:600;margin-bottom:10px}
.mp-steps li{position:relative;padding:10px 0 10px 28px;border-top:1px solid var(--rule);font-size:15px}
.mp-steps li::before{content:"";position:absolute;left:0;top:14px;width:14px;height:14px;border-radius:50%;border:2px solid var(--rule)}
.mp-steps li.is-done::before{background:var(--sage);border-color:var(--sage)}
.mp-steps li.is-next::before{border-color:var(--gold)}
.mp-steps li.is-next{font-weight:600}
.mp-lock{flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:16px;padding:14px 16px;border:1px dashed rgba(201,162,77,.6);border-radius:10px;background:rgba(201,162,77,.06)}
.mp[data-tier="free"] .mp-lock[data-show="free"]{display:flex}
.mp-lock p{flex:1 1 200px;font-size:15px}
.mp-lockpage{max-width:40em;padding:32px 0;flex-direction:column;align-items:flex-start;gap:12px}
.mp[data-tier="free"] .mp-lockpage{display:flex}

.mp-tabs{display:flex;gap:4px;overflow-x:auto;margin-bottom:16px;border-bottom:1px solid var(--rule)}
.mp-tabs button{flex:0 0 auto;min-height:44px;padding:0 14px;border:0;background:none;cursor:pointer;font-size:15px;font-weight:500;color:var(--text-soft);border-bottom:2px solid transparent;margin-bottom:-1px}
.mp-tabs button[aria-selected="true"]{color:var(--forest);border-bottom-color:var(--forest);font-weight:600}
.mp-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.mp-learn{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.mp-learn .btn{margin-top:auto}
.mp-rel{font-size:13px;color:var(--graphite)}
.mp-learn--out{background:var(--cream)}

.mp-actionhead{margin-bottom:20px}
.mp-checks li{border-top:1px solid var(--rule)}
.mp-checks label{display:flex;gap:14px;align-items:flex-start;padding:14px 0;cursor:pointer}
.mp-checks input{width:20px;height:20px;margin-top:2px;accent-color:var(--forest);flex:0 0 auto}
.mp-checks b{display:block;font-weight:600}
.mp-checks small{display:block;font-size:14px;color:var(--text-soft)}
.mp-checks input:checked + span b{text-decoration:line-through;text-decoration-color:var(--graphite)}
.mp-done{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--text-soft);margin-top:10px}
.mp-quote{font-family:var(--serif);font-size:24px;line-height:1.3}
.mp-quote--sm{font-size:19px;margin:10px 0}
.mp-history{margin-top:16px}
.mp-weeks{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.mp-weeks li{padding:14px;border-radius:10px;background:var(--cream);display:flex;flex-direction:column;gap:2px;font-size:15px}
.mp-weeks li.is-now{background:var(--forest);color:var(--cream)}

.mp-tablewrap{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--r-card);background:#FFFDF8}
.mp-table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
.mp-table th,.mp-table td{text-align:left;padding:14px 16px;border-top:1px solid var(--rule)}
.mp-table thead th{border-top:0;font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft);font-weight:500}
.mp-overview{margin-bottom:20px}
.mp-journal{padding:18px 4px}

.mp-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.mp-chips button{min-height:40px;padding:0 14px;border:1px solid var(--rule);border-radius:999px;background:#FFFDF8;cursor:pointer;font-size:14px;color:var(--text-soft)}
.mp-chips button[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:var(--cream)}
.mp-newsgrid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.mp-brief .mp-h3{margin-top:12px}
.mp-brief dl{margin:10px 0 0}
.mp-brief dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin-top:8px}
.mp-brief dd{margin:2px 0 0;font-size:15px;color:var(--text-soft)}

.mp-discord{background:var(--ink);color:var(--on-dark);border-color:transparent}
.mp-prod{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.mp-prod--premium{border-color:rgba(201,162,77,.55)}
.mp-signals{display:flex;flex-direction:column;gap:6px;align-items:flex-start;max-width:44em;background:var(--cream)}

.mp-foot{padding:20px var(--gutter) 96px;font-size:13px;color:var(--graphite);border-top:1px solid var(--rule)}
@media (min-width:1024px){.mp-foot{padding:20px 48px 32px}}
.mp-foot a{color:inherit}

/* Phone bottom bar + More sheet (brief sections 5 and 9) */
.mp-bottom{position:fixed;left:0;right:0;bottom:0;z-index:70;display:grid;grid-template-columns:repeat(5,1fr);background:var(--forest);padding-bottom:env(safe-area-inset-bottom)}
.mp-bottom a,.mp-bottom button{display:grid;place-items:center;min-height:56px;border:0;background:none;color:var(--on-dark-soft);font-size:13px;font-weight:500;text-decoration:none;cursor:pointer}
.mp-bottom a[aria-current="page"],.mp-bottom button[aria-expanded="true"]{color:var(--on-dark);box-shadow:inset 0 2px 0 var(--gold)}
@media (min-width:1024px){.mp-bottom,.mp-more{display:none!important}}
.mp-more{position:fixed;left:0;right:0;bottom:56px;z-index:69;background:var(--forest);padding:8px var(--gutter) 16px;border-radius:16px 16px 0 0;box-shadow:0 -20px 40px -20px rgba(0,0,0,.4)}
.mp-more nav{display:flex;flex-direction:column}
.mp-more a{min-height:48px;display:flex;align-items:center;color:var(--on-dark);text-decoration:none;border-bottom:1px solid var(--rule-dark);font-size:16px}
.mp-more a[aria-current="page"]{color:var(--gold)}
/* keep the cookie box clear of the bottom bar on phones */
@media (max-width:1023px){.mp .cookie{bottom:68px}}
@media (prefers-reduced-motion:reduce){.mp *{transition:none!important}}
.mp-foot__cookie{margin-top:8px;padding:0;min-height:44px;border:0;background:none;font-size:13px;color:var(--graphite);text-decoration:underline;cursor:pointer}
.mp-view > .mp-muted + .mp-grid{margin-top:12px}
.mp-home > *,.mp-path > *,.mp-grid > *{min-width:0}
@media (max-width:559px){.mp-map--mini .mp-map__name{display:none}.mp-map--mini{margin:16px 6px 4px}}
.btn--outline-light{background:transparent;color:var(--on-dark);border-color:rgba(244,240,231,.4)}
.btn--outline-light:hover{border-color:var(--on-dark)}

/* ---- Privacy page (privacy.html), 2026-09-28. A reading page: one calm
   column, the site's serif for headings, generous line length limits. ---- */
.legal{padding:140px 0 96px}
.legal__in{max-width:760px}
.legal__title{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,76px);line-height:1;letter-spacing:-.02em;margin:14px 0 22px}
.legal__lede{font-size:clamp(18px,1.5vw,21px);color:var(--text-soft);margin-bottom:14px}
.legal__meta{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--graphite);margin-bottom:40px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:clamp(26px,2.4vw,32px);line-height:1.15;margin:48px 0 14px;padding-top:24px;border-top:1px solid var(--rule)}
.legal h3{font-family:var(--sans);font-size:17px;font-weight:600;margin:26px 0 8px}
.legal p,.legal li{color:var(--text-soft);max-width:40em}
.legal p + p{margin-top:12px}
.legal ul{margin:10px 0 12px;padding-left:1.2em;list-style:disc}
.legal li{margin:4px 0}
.legal li::marker{color:var(--gold)}
.legal a{color:var(--forest);text-underline-offset:3px}
.legal strong{color:var(--text);font-weight:600}
.legal__risk{margin-top:56px!important;padding:18px 20px;border-left:3px solid var(--gold);background:var(--cream);border-radius:0 8px 8px 0;font-size:15px}
.foot__cols button{padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:none;cursor:pointer;text-align:left}