/* ============================================================
   LIFEMAX CLUB — the public sub-pages (pages.css)

   About, Contact, the free quest, and the account pages (log in, join,
   reset, welcome). The documents (terms, privacy, refunds, help, the hub)
   load this AND legal.css.

   Reo, 25 Sep 2026: "the LAYOUT of B, the DESIGN/AESTHETICS of A."
   B's skeleton: the landing's nav and footer, a page title on top, a
   sticky index down the side on the long pages, two-column forms. A's
   skin: everything drawn from ds.css — which loads FIRST and owns every
   colour. This file adds composition only: no raw colours, no new
   accent, no rule that tests the theme.
   ============================================================ */

/* ───────────────────────── chrome ───────────────────────── */
main:focus{outline:none}
/* The flow pages (log in, join, reset, welcome) carry the same nav with
   only the brand and one way out, and the short footer: nothing on them
   should pull a man out of a form he is halfway through. */
.nav-right .btn-sm{flex:none}
.nav > .brand + .nav-right{margin-left:auto}
.footer.f-mini{margin-top:clamp(64px,9vw,112px)}
.footer.f-mini .f-bottom{border-top:0;padding-top:26px}
.f-brand .f-meta{margin-top:14px;font-size:13px;color:var(--text-3)}
.f-links{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px}
.f-links a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;min-height:28px}
.f-links a:hover{color:var(--text)}
.f-bottom .f-left{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px}
@media (pointer:coarse){ .f-cols a,.f-links a{min-height:36px;display:inline-flex;align-items:center} }

/* ───────────────────────── the page head (B: the title on top) ───────────────────────── */
.phead{position:relative;isolation:isolate;padding:clamp(56px,8vw,96px) 0 0}
.phead .hero-light{inset:-64px 0 auto;height:620px}
.phead h1,.p-title{margin-top:18px;font-size:clamp(40px,5vw,64px);line-height:1.02;letter-spacing:-.045em;font-weight:700}
.phead h1 .l2,.p-title .l2{display:block;background:var(--title);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}
.phead .lede{margin-top:22px;max-width:58ch}
.phead .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}

/* ───────────────────────── the side index (B's sidebar, on a long page) ─────────────────────────
   Every entry is a plain anchor to a heading that exists, so nothing here
   is the only route to anything. pages.js marks the current one. */
.toc{font-size:13.5px}
.toc .mono{display:block;padding:0 10px 10px}
.toc ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.toc a{display:flex;align-items:baseline;gap:10px;min-height:32px;padding:6px 10px;border-radius:10px;color:var(--text-2);text-decoration:none;line-height:1.3;transition:background-color .2s,color .2s}
.toc a:hover{background:var(--fill-1);color:var(--text)}
.toc a[aria-current]{background:var(--fill-2);color:var(--text)}
.toc a .n{flex:none;min-width:1.9em;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--text-3)}
.toc a[aria-current] .n{color:var(--tint)}
/* the long documents: index | text */
.doc-layout{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
.doc-layout > .toc{display:none}
@media (min-width:1100px){
  .doc-layout{grid-template-columns:212px minmax(0,1fr);gap:72px;align-items:start}
  .doc-layout > .toc{display:block;position:sticky;top:96px;max-height:calc(100vh - 120px);overflow:auto;scrollbar-width:none;padding-top:clamp(46px,6vw,68px)}
}
/* About: the index hangs in the left margin, only where there is one — a
   real margin, not the last 16px before the text (it sits centred in it) */
.rail{display:none}
@media (min-width:1520px){
  .rail{display:block;position:fixed;left:calc((100vw - var(--site-w)) / 4 - 75px);top:50%;transform:translateY(-50%);width:150px;z-index:10}
  .rail a{font-size:13px}
}

/* ───────────────────────── section heads (the landing's) ───────────────────────── */
.psec{padding-top:clamp(88px,10vw,136px)}
.psec .sec-head{margin-bottom:40px}
.psec .sec-head .lede{margin-top:18px;max-width:60ch}
.sec-note{margin-top:22px;max-width:70ch;color:var(--text-2);font-size:15.5px;line-height:1.55}

/* ───────────────────────── feature cards (B's bento, A's material) ───────────────────────── */
.feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
ol.feats,ul.feats,ul.cells{list-style:none;margin:0;padding:0}
.about-hero .feats{margin-top:64px}
.feats.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.feat{padding:22px 24px 24px;display:flex;flex-direction:column}
.feat-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px;min-height:34px}
.feat h3{font-size:19px;line-height:1.25;letter-spacing:-.02em}
.feat p{margin-top:8px;color:var(--text-2);font-size:15.5px;line-height:1.52}
.feat .badge{flex:none}
/* a numbered step (How it works) */
.stepn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--fill-2);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--text)}

/* icon rows: a well, a bold lead, the sentence */
.irows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:18px}
.irows li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start}
.irows .well{margin-top:1px}
.irows b{display:block;font-weight:600;letter-spacing:-.012em;color:var(--text)}
.irows span:not(.well){display:block;color:var(--text-2);font-size:15.5px;line-height:1.52;margin-top:2px}

/* a grouped list whose rows carry a paragraph (the pillars on About) */
.cells.rich .cell{align-items:flex-start;padding:16px 18px;gap:14px}
.cells.rich .cell + .cell::before{left:61px}
.cells.rich .cw{margin-top:1px}
.cells.rich .lbl b{display:block;font-weight:600;letter-spacing:-.015em}
.cells.rich .lbl small{font-size:14.5px;line-height:1.5;margin-top:4px}
.cells.rich .val{padding-top:2px}

/* ───────────────────────── About ───────────────────────── */
.me{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:start}
.me-fig{margin:0;border-radius:var(--r-card);aspect-ratio:4/5;border:1px solid var(--hair)}
.me-fig .ov{display:flex;align-items:flex-end;padding:18px 20px}
.me-body .lede{max-width:none}
.me-body .irows{margin-top:30px}
.me-body .melast{margin-top:30px;color:var(--text-2);font-size:17px;line-height:1.5}
.me-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:26px}
.states{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.state{padding:22px 24px 24px}
.state-h{display:flex;align-items:center;gap:12px}
.state-h .mono{margin-left:auto}
.state-t{font-weight:600;font-size:16.5px;letter-spacing:-.015em}
.state .bar{margin-top:20px}
.state-m{margin-top:14px;display:flex;align-items:center;gap:6px}
.state-m .ic{--ic:13px;color:var(--tint)}
.state-d{margin-top:12px;color:var(--text-2);font-size:15px;line-height:1.5}
.closing{position:relative;isolation:isolate;text-align:center;padding-bottom:12px}
/* starts at the section, not 40px above it: its top edge used to cut a hard
   line through the last row of cards before it */
.closing .hero-light{inset:0 0 -80px;-webkit-mask-image:linear-gradient(transparent, #000 30%);mask-image:linear-gradient(transparent, #000 30%)}
.closing .lede{margin:22px auto 0;max-width:60ch}
.closing .cta{justify-content:center}

/* ───────────────────────── the account pages: a sheet on the canvas (A) ───────────────────────── */
.auth{position:relative;isolation:isolate;padding:clamp(36px,6vw,72px) 0 0}
.auth > .hero-light{inset:-64px 0 auto;height:640px}
.acard{position:relative;width:100%;max-width:460px;margin:0 auto;padding:30px 24px 26px;border-radius:var(--r-sheet);
  background:var(--sheet-bg);border:1px solid var(--hair-2);box-shadow:var(--card-shadow),var(--shadow-pop)}
.acard.wide{max-width:600px}
.join-grid .acard{max-width:none;margin:0}
.a-mark{width:60px;height:60px;margin:0 auto;border-radius:19px;display:grid;place-items:center;background:var(--surface-3);
  box-shadow:0 20px 50px -20px var(--glow), inset 0 0 0 1px var(--hair-2)}
.a-mark .mark{width:34px;height:34px}
.a-mark.ok{background:var(--ok-bg);color:var(--ok);box-shadow:0 20px 50px -20px rgba(var(--ok-rgb),.45), inset 0 0 0 1px var(--ok-line)}
.a-mark.ok .ic{--ic:30px;stroke-width:2.2}
.a-head{text-align:center}
.a-head h1,.a-head h2{margin-top:18px;font-size:28px;line-height:1.12;letter-spacing:-.035em}
.a-head p{margin:10px auto 0;max-width:36ch;color:var(--text-2);font-size:15.5px;line-height:1.45}
.a-head .step-l{display:block;margin-top:0;color:var(--text-3)}
.acard > * + *{margin-top:18px}
.acard > .a-head + *{margin-top:24px}
.acard .group{margin-top:22px}
.acard .group-f{padding-left:4px;padding-right:4px}
/* ds.css's `.cell input:not(…){outline:none}` outranks its own
   `.cell input:focus-visible` ring, so a focused field in a grouped list showed
   nothing but a caret. The ring goes round the whole ROW (the iOS way) where
   the browser can say which row holds focus; on the input itself otherwise. */
.cell input:not([type="checkbox"]):not([type="radio"]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@supports selector(:has(*)){
  .cell input:not([type="checkbox"]):not([type="radio"]):focus-visible{outline:none}
  .cell:has(> input:not([type="checkbox"]):not([type="radio"]):focus-visible){box-shadow:inset 0 0 0 2px var(--focus);border-radius:inherit;z-index:1}
}
.acard .cell.form label{width:104px}
.acard .cell.form + .cell.form::before{left:16px}
.acard .cells.wide-l .cell.form label{width:128px}
.acard .btn-block + .btn-block{margin-top:10px}
.acard form > .btn-block{margin-top:18px}
.acard form > .group-f{padding-top:9px}
.acard form > .group-f + .btn-block{margin-top:16px}
.acard > .notice{margin-top:14px}
.acard > .a-head + .btn-block{margin-top:24px}
.acard .or{margin:18px 0 0}
.acard .gbtn + .field-hint{margin-top:8px;text-align:center}
.a-links{text-align:center;font-size:14px;line-height:1.6;color:var(--text-2)}
.a-links a,.acard .field-hint a,.acard p a:not(.btn){color:var(--tint);text-underline-offset:3px}
.a-links .link-btn{font-size:inherit;padding:0 2px;font-weight:600}
.a-resend{display:flex;align-items:baseline;justify-content:center;gap:5px;font-size:14px;color:var(--text-2)}
.a-resend .link-btn{font-size:14.5px}
.a-resend .link-btn:disabled{color:var(--text-3);cursor:default;text-decoration:none}
.a-resend .mono{letter-spacing:.04em}
.acard .notice{font-size:14.5px}
.acard .notice:not(.err):not(.ok){background:var(--warn-bg)}
/* the six-digit code */
.input.code{height:64px;text-align:center;font-family:var(--font);font-weight:600;font-size:30px;letter-spacing:.32em;padding-left:calc(16px + .32em);font-variant-numeric:tabular-nums}
.input.code::placeholder{letter-spacing:.3em}
/* what an account holds (Join) */
.got{list-style:none;margin:0;padding:0}
.got .cell{min-height:0;padding:12px 16px;align-items:flex-start;font-size:15.5px;line-height:1.42}
.got .cell .lbl b{font-weight:600}
.got .cell.not{color:var(--text-2)}
.got .cw{margin-top:-2px}
.got .cw.gold .ic{color:var(--on-gold)}
/* Join: the pitch on the left, the form on the right; on a phone the form
   comes straight after the title and the list follows it */
.join-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,460px);grid-template-areas:"head form" "got form";column-gap:clamp(40px,6vw,88px);row-gap:28px;align-items:start}
.join-grid > .j-head{grid-area:head;padding-top:clamp(8px,2vw,24px)}
.join-grid > .j-form{grid-area:form}
.join-grid > .j-got{grid-area:got}
.j-head h1{margin-top:16px;font-size:clamp(40px,5vw,64px);line-height:1.02;letter-spacing:-.045em}
.j-head .lede{margin-top:18px;max-width:40ch}
.j-head .notice{margin-top:22px;max-width:52ch}
.j-got .group-h{padding-left:4px}
/* the questions (Welcome) */
.qlist{display:flex;flex-direction:column;gap:18px}
.qlist .field + .field{margin-top:0}
.acard .field-l{font-size:14.5px;color:var(--text);font-weight:600;line-height:1.35}
.a-done{display:flex;flex-direction:column;gap:12px}
.a-done p{color:var(--text-2);font-size:15.5px;line-height:1.5}
.a-done .btn{margin-top:6px}
.a-done .btn + .btn{margin-top:0}
/* the 404's two ways on */
.nf-acts{display:flex;flex-direction:column;gap:10px}
.acard .nf-acts .btn-block + .btn-block{margin-top:0}
/* the one-moment screen */
.a-wait{display:flex;flex-direction:column;align-items:center;gap:16px;padding:18px 0 8px;color:var(--text-2);text-align:center}

/* ───────────────────────── Contact ───────────────────────── */
.contact .irows{margin-top:6px}
.contact .j-head .lede{max-width:46ch}
.contact .j-head .p-title{font-size:clamp(40px,5vw,64px)}
.irows .link-btn{display:inline;padding:0;font-size:inherit;font-weight:600}
.contact .c-foot{margin-top:28px;font-size:14px;color:var(--text-3)}
.contact .c-foot a{color:var(--text-2)}
.contact .c-foot a:hover{color:var(--text)}
.c-count{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;color:var(--text-3);text-align:right}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ───────────────────────── responsive ───────────────────────── */
@media (max-width:1023px){
  .feats.three{grid-template-columns:repeat(2,minmax(0,1fr))}
  .states{grid-template-columns:1fr}
  .me{grid-template-columns:1fr;gap:32px}
  .me-fig{max-width:460px;aspect-ratio:4/4.4}
}
@media (max-width:900px){
  .join-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "form" "got"}
  .join-grid .acard{max-width:none}
}
@media (max-width:760px){
  .feats,.feats.three{grid-template-columns:1fr}
  .psec .sec-head{margin-bottom:28px}
}
@media (max-width:640px){
  .phead{padding-top:40px}
  .feat,.state{padding:18px 18px 20px}
  .feat-top{margin-bottom:14px}
  .acard{padding:24px 16px 20px;border-radius:30px}
  .acard .cell.form label{width:92px}
  .acard .cells.wide-l .cell.form label{width:112px}
  .a-head h1,.a-head h2{font-size:25px}
  .cells.rich .cell{padding:14px 14px;gap:12px}
  .cells.rich .cell + .cell::before{left:55px}
  .me-fig{aspect-ratio:1}
}