/* How Elixium Works — page CSS, verbatim from the approved build.
   Separated from the base design system during consolidation; the base layer
   is now the shared /assets/elixium-base.css instead of an inlined copy. */
/* =============================================================================
   HOW ELIXIUM WORKS — page layer
   -----------------------------------------------------------------------------
   Additions only. Every value below resolves to a token already defined in the
   base design system: no new colours, no new font, no new radius beyond
   --r-lg / --r-md / --r-sm. Patterns here exist because this page needs four
   things the base system has never had to draw: a process rail, a connected
   three-stage journey, the Flight Plan portal surface, and the care cycle.
   ============================================================================= */

/* ---- HERO OVERRIDES -------------------------------------------------------
   The base sheet crops the CoreCheck+ hero photo at 72%/66% because that photo
   has a chat panel baked into its right side. This page's photograph is
   composed differently — subjects right-of-centre, open shadow left — so the
   crop moves back toward the middle. Everything else about the hero (height,
   gradient, type scale, button row, reveal timing) is inherited untouched.
   ------------------------------------------------------------------------- */
.hero-bg img{object-position:58% center}
@media(max-width:899px){.hero-bg img{object-position:70% center}}
.hero--how{min-height:auto;padding:150px 0 0}
.hero--how .hero-content{max-width:600px}
@media(min-width:900px){.hero--how .hero-content{transform:none}}
.hero--how h1{font-size:clamp(2.5rem,5.4vw,4.1rem)}
.hero--how h1 .l2{display:block;color:var(--mint)}
.hero--how .lede{max-width:520px}

/* ---- PROCESS RAIL ---------------------------------------------------------
   UNDERSTAND -> ACT -> MEASURE -> ADJUST. A hairline horizontal system, not
   four cards: one rule across the top, four columns hanging off it, a small
   node where each column meets the rule. Chevrons only appear from 760px, so
   the phone gets a clean stack instead of sideways arrows pointing at nothing.
   ------------------------------------------------------------------------- */
.rail{margin-top:clamp(56px,7vw,90px);padding-bottom:clamp(44px,5vw,64px)}
.rail-line{display:none}
.rail-grid{display:grid;grid-template-columns:1fr;gap:0}
.rail-item{position:relative;padding:22px 0;border-top:1px solid var(--line-dark)}
.rail-item .k{display:flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.68rem;letter-spacing:.19em;text-transform:uppercase;color:var(--mint);margin-bottom:7px}
.rail-item .k .n{width:5px;height:5px;border-radius:50%;background:var(--mint);flex:none}
.rail-item p{font-size:.97rem;color:rgba(255,255,255,.72);max-width:24ch}
.rail-item .chev{display:none}
@media(min-width:760px){
  .rail-grid{grid-template-columns:repeat(4,1fr);gap:0}
  .rail-item{padding:24px 34px 0 0;border-top:1px solid var(--line-dark)}
  /* the chevron sits ON the rule, over photography — so it must not carry a
     background swatch, which would punch a dark box into the hero image. */
  .rail-item .chev{display:block;position:absolute;top:-7px;right:26px;width:13px;height:13px;stroke:var(--mint);fill:none;stroke-width:2;opacity:.75}
  .rail-item:last-child .chev{display:none}
}

/* ---- SECTION 2 — CONNECTED JOURNEY ---------------------------------------
   Three stages that read left to right as one line of thought. The connector
   is a single hairline running behind the stage numerals, with a node at each
   stage. Below 900px the line turns vertical down the left edge so the
   sequence still reads as a sequence on a phone.
   ------------------------------------------------------------------------- */
.journey{position:relative;margin-top:clamp(40px,4.6vw,60px)}
.journey-grid{display:grid;grid-template-columns:1fr;gap:clamp(40px,4vw,54px)}
.stage{position:relative;padding-left:34px}
.stage::before{content:"";position:absolute;left:5px;top:26px;bottom:-54px;width:1px;background:var(--line-light)}
.journey-grid>.stage:last-child::before{display:none}
.stage .node{position:absolute;left:0;top:6px;width:11px;height:11px;border-radius:50%;border:1px solid #2f6a4c;background:var(--pale);display:flex;align-items:center;justify-content:center}
.stage .node::after{content:"";width:5px;height:5px;border-radius:50%;background:#2f6a4c}
.stage .st-n{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:#2f6a4c;margin-bottom:12px}
.stage h3{font-size:clamp(1.32rem,2.1vw,1.6rem);color:var(--ink);margin-bottom:12px}
.stage>p{color:var(--ink-muted);font-size:.98rem;max-width:34ch;margin-bottom:18px}
.stage-list{list-style:none;display:flex;flex-wrap:wrap;gap:7px 8px;margin-bottom:22px}
.stage-list li{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#2f6a4c;background:rgba(149,213,179,.2);border:1px solid rgba(47,106,76,.18);padding:5px 10px;border-radius:var(--r-sm)}
/* align-self keeps the rule under the link sized to the text once .stage
   becomes a flex column (a stretched flex item would run the full column). */
.stage .tlink{display:inline-flex;align-self:flex-start;align-items:center;gap:.45em;margin-top:16px;font-size:.94rem;font-weight:600;color:#2f6a4c;border-bottom:1px solid rgba(47,106,76,.34);padding-bottom:2px;transition:border-color .25s,gap .25s}
.stage .tlink:hover{border-color:#2f6a4c;gap:.8em}
.stage .tlink svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.stage-vis{margin-top:4px}
/* In the tablet band the three stages stay stacked and the interface art is
   held to a readable measure. Three columns only from 1060px, below which each
   column is too narrow to hold a portal screen without the labels wrapping. */
@media(min-width:620px) and (max-width:1059px){
  .stage-vis{max-width:520px}
}
@media(min-width:1060px){
  .journey-grid{grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,44px);align-items:stretch}
  /* The three stages carry different amounts of copy, so their text blocks are
     never the same height. Rather than leave the interface art floating at
     three different depths, each stage becomes a column that pushes its visual
     to the bottom — the mockups then share one baseline and read as a row. */
  .stage{display:flex;flex-direction:column;height:100%}
  .stage-vis{margin-top:auto;padding-top:clamp(18px,2vw,26px)}
  .stage{padding-left:0;padding-top:36px}
  .stage::before{left:0;right:-44px;top:5px;bottom:auto;width:auto;height:1px}
  .journey-grid>.stage:last-child::before{display:block;right:0}
  .stage .node{top:0;left:0}
  .stage>p{max-width:30ch}
}

/* ---- RESTRAINED CALLOUT ---------------------------------------------------
   Two columns divided by a hairline, not a tinted box. Clinical, quiet.
   ------------------------------------------------------------------------- */
.note{margin-top:clamp(56px,6.5vw,88px);padding-top:clamp(34px,4vw,46px);border-top:1px solid var(--line-light);display:grid;grid-template-columns:1fr;gap:22px}
@media(min-width:860px){.note{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,5vw,70px)}}
.note h3{font-size:clamp(1.5rem,2.7vw,2rem);color:var(--ink);letter-spacing:-0.025em}
.note p{color:var(--ink-muted);font-size:1.03rem;max-width:56ch}
.note p+p{margin-top:14px}
.note p .em{color:var(--ink);font-weight:500}

/* ---- PORTAL SURFACE -------------------------------------------------------
   The shared chrome for every product screenshot on this page. A real portal
   window: title bar, sidebar, content. Rendered as live HTML rather than a
   flattened image so the type stays crisp and stays TT Norms.
   ------------------------------------------------------------------------- */
.ui{background:#fff;color:var(--ink);border-radius:var(--r-md);border:1px solid var(--line-light);overflow:hidden;box-shadow:0 50px 100px -55px rgba(0,0,0,.7)}
.bg-pale .ui{box-shadow:0 30px 70px -45px rgba(8,28,20,.45)}
.ui-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;border-bottom:1px solid var(--line-light);background:var(--pale-2)}
.ui-bar .dots{display:flex;gap:5px}
.ui-bar .dots i{width:8px;height:8px;border-radius:50%;background:rgba(8,28,20,.14);display:block}
.ui-bar .addr{margin-left:8px;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;color:var(--ink-muted);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-body{padding:22px 20px}
.ui-kicker{font-family:var(--font-mono);font-size:.58rem;letter-spacing:.15em;text-transform:uppercase;color:#2f6a4c;margin-bottom:5px}
.ui-h{font-family:var(--font-display);font-weight:600;font-size:1.02rem;letter-spacing:-0.01em;color:var(--ink)}
.ui-sub{font-size:.78rem;color:var(--ink-muted);margin-top:3px}
.ui-cap{margin-top:14px;font-family:var(--font-mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted);opacity:.85}
.bg-deep .ui-cap,.bg-mid .ui-cap{color:rgba(255,255,255,.42)}

/* intake screen */
.ui-q{font-family:var(--font-display);font-weight:600;font-size:1rem;color:var(--ink);margin:16px 0 12px}
.ui-opts{list-style:none;display:grid;gap:7px}
.ui-opts li{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line-light);border-radius:var(--r-sm);font-size:.85rem;color:var(--ink-muted)}
.ui-opts li .bx{width:15px;height:15px;border-radius:4px;border:1px solid rgba(8,28,20,.22);flex:none;display:flex;align-items:center;justify-content:center}
.ui-opts li.on{border-color:rgba(47,106,76,.4);background:rgba(149,213,179,.14);color:var(--ink);font-weight:500}
.ui-opts li.on .bx{background:#2f6a4c;border-color:#2f6a4c}
.ui-opts li.on .bx svg{width:9px;height:9px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.ui-prog{height:3px;border-radius:3px;background:rgba(8,28,20,.09);overflow:hidden;margin-top:16px}
.ui-prog i{display:block;height:100%;width:38%;background:#2f6a4c;border-radius:3px}
.ui-progl{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted);margin-top:8px}

/* biomarker rows */
.ui-marks{list-style:none;display:grid;gap:0;margin-top:14px}
.ui-marks li{padding:11px 0;border-bottom:1px solid var(--line-light)}
.ui-marks li:last-child{border-bottom:0}
.ui-marks .r1{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.ui-marks .nm{font-size:.83rem;color:var(--ink);font-weight:500}
.ui-marks .vl{font-family:var(--font-mono);font-size:.75rem;color:var(--ink-muted);white-space:nowrap}
.ui-marks .vl b{color:var(--ink);font-weight:600}
.ui-track{position:relative;height:4px;border-radius:4px;background:rgba(8,28,20,.08)}
.ui-track .band{position:absolute;top:0;bottom:0;background:rgba(149,213,179,.55);border-radius:4px}
.ui-track .pin{position:absolute;top:-3px;width:2px;height:10px;border-radius:2px;background:var(--green-800)}
.ui-track .pin.out{background:var(--amber)}
.ui-flag{display:inline-block;font-family:var(--font-mono);font-size:.53rem;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:5px;margin-left:6px;vertical-align:middle}
.ui-flag.ok{color:#2f6a4c;background:rgba(149,213,179,.24)}
.ui-flag.watch{color:var(--amber);background:var(--amber-bg)}

/* ---- SECTION 3 — FLIGHT PLAN ---------------------------------------------
   Copy left, portal right on desktop; portal first is deliberate on mobile
   (source order keeps copy first for screen readers, CSS does not reorder).
   ------------------------------------------------------------------------- */
.fp-lead{display:grid;grid-template-columns:1fr;gap:clamp(34px,4vw,58px);align-items:start}
@media(min-width:980px){.fp-lead{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(48px,5vw,80px)}}
.fp-copy p{color:rgba(255,255,255,.78);font-size:1.06rem;max-width:44ch}
.fp-copy p+p{margin-top:14px}

/* six components — hairline rows, no boxes */
.fp-parts{list-style:none;margin-top:clamp(34px,4vw,46px);display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--line-dark)}
/* Two columns only in the tablet band, where the list runs full width. At
   980px+ it moves into the narrow left column beside the portal and returns to
   a single column, which is what closes the dead space next to the tall UI. */
@media(min-width:680px) and (max-width:979px){.fp-parts{grid-template-columns:1fr 1fr;column-gap:clamp(30px,4vw,56px)}}
.fp-parts li{display:grid;grid-template-columns:auto 1fr;gap:15px;padding:19px 0;border-bottom:1px solid var(--line-dark)}
.fp-parts svg{width:20px;height:20px;stroke:var(--mint);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;margin-top:3px}
.fp-parts b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.03rem;margin-bottom:3px}
.fp-parts span{font-size:.92rem;color:rgba(255,255,255,.66)}
.fp-close{margin-top:clamp(44px,5vw,64px);font-family:var(--font-display);font-weight:600;font-size:clamp(1.45rem,3vw,2.15rem);letter-spacing:-0.028em;line-height:1.16;max-width:22ch}
.fp-close .dim{color:rgba(255,255,255,.42);display:block}

/* the Flight Plan portal itself */
.fp-ui .ui-body{padding:0}
.fp-head{padding:20px 22px 18px;border-bottom:1px solid var(--line-light)}
.fp-head .row{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.fp-head h4{font-family:var(--font-display);font-weight:600;font-size:1.22rem;letter-spacing:-0.02em;color:var(--ink)}
.fp-head .who{font-size:.8rem;color:var(--ink-muted);margin-top:3px}
.fp-pill{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.12em;text-transform:uppercase;color:#2f6a4c;background:rgba(149,213,179,.22);border:1px solid rgba(47,106,76,.2);padding:5px 9px;border-radius:100px;white-space:nowrap;flex:none}
.fp-pri{display:flex;flex-wrap:wrap;gap:6px;margin-top:15px}
.fp-pri span{font-family:var(--font-mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line-light);background:var(--pale-2);padding:5px 9px;border-radius:var(--r-sm)}
.fp-pri span .d{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);margin-right:6px;vertical-align:middle}
.fp-pri span.w .d{background:var(--amber)}
.fp-rows{list-style:none}
.fp-rows>li{display:grid;grid-template-columns:auto 1fr;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line-light)}
.fp-rows>li:last-child{border-bottom:0}
.fp-rows .ic{width:30px;height:30px;border-radius:9px;background:var(--pale);display:flex;align-items:center;justify-content:center;flex:none;color:#1c4331}
.fp-rows .ic svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.fp-rows .lb{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:#2f6a4c;margin-bottom:4px}
.fp-rows b{display:block;font-size:.9rem;color:var(--ink);font-weight:600;margin-bottom:2px}
.fp-rows small{display:block;font-size:.79rem;color:var(--ink-muted);line-height:1.55}
.fp-next{padding:16px 22px;background:var(--pale-2);border-top:1px solid var(--line-light)}
.fp-next .lb{font-family:var(--font-mono);font-size:.55rem;letter-spacing:.13em;text-transform:uppercase;color:#2f6a4c;margin-bottom:10px}
.fp-next ul{list-style:none;display:grid;gap:8px}
.fp-next li{display:flex;align-items:center;gap:9px;font-size:.83rem;color:var(--ink)}
.fp-next .ck{width:14px;height:14px;border-radius:4px;border:1px solid rgba(8,28,20,.22);flex:none;display:flex;align-items:center;justify-content:center}
.fp-next li.done .ck{background:#2f6a4c;border-color:#2f6a4c}
.fp-next li.done .ck svg{width:8px;height:8px;stroke:#fff;stroke-width:3.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fp-next li.done span{color:var(--ink-muted);text-decoration:line-through;text-decoration-color:rgba(8,28,20,.25)}
.fp-next .due{margin-left:auto;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}

/* ---- SECTION 4 — HEALTH AREAS --------------------------------------------
   Typographic list on hairlines. No card ever closes around a category.
   ------------------------------------------------------------------------- */
.areas{list-style:none;margin-top:clamp(34px,4vw,50px);border-top:1px solid var(--line-mint)}
.areas li{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;padding:clamp(18px,2.2vw,24px) 0;border-bottom:1px solid var(--line-mint)}
@media(min-width:820px){
  .areas li{grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);gap:22px;align-items:center}
}
.areas svg{width:21px;height:21px;stroke:var(--mint);fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;align-self:center}
.areas h3{font-size:clamp(1.15rem,2vw,1.45rem);font-weight:600;letter-spacing:-0.02em}
.areas p{font-size:.95rem;color:rgba(255,255,255,.66);grid-column:2/-1}
@media(min-width:820px){.areas p{grid-column:auto}}
.areas-close{margin-top:clamp(34px,4vw,46px);font-size:1.06rem;color:rgba(255,255,255,.8);max-width:62ch}
.areas-close .em{color:#fff;font-weight:500}

/* ---- SECTION 5 — CARE CYCLE ----------------------------------------------
   One connected sequence: hairline spine, four beats, product surfaces
   floating alongside rather than inside boxes.
   ------------------------------------------------------------------------- */
.cyc{display:grid;grid-template-columns:1fr;gap:clamp(38px,4vw,52px);margin-top:clamp(40px,4.5vw,58px);align-items:start}
@media(min-width:1000px){.cyc{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:clamp(48px,5vw,84px)}}
.cyc-steps{list-style:none;position:relative}
/* One unbroken spine drawn on the list itself rather than a segment per step,
   so the four beats can be distributed to the full height of the column and
   still read as a single connected cycle. */
.cyc-steps::before{content:"";position:absolute;left:5px;top:12px;bottom:12px;width:1px;background:var(--line-light)}
.cyc-steps li{position:relative;padding:0 0 clamp(28px,3vw,36px) 32px}
.cyc-steps li:last-child{padding-bottom:0}
/* the cycle ends on the last node, so mask the spine that runs past it */
.cyc-steps li:last-child::after{content:"";position:absolute;left:4px;top:12px;bottom:-4px;width:3px;background:var(--pale)}
@media(min-width:1000px){
  .cyc{align-items:stretch}
  .cyc-steps{display:flex;flex-direction:column;justify-content:space-between;height:100%}
  .cyc-steps li{padding-bottom:0}
}
.cyc-steps .node{position:absolute;left:0;top:5px;width:11px;height:11px;border-radius:50%;border:1px solid #2f6a4c;background:var(--pale)}
.cyc-steps .node::after{content:"";position:absolute;inset:2px;border-radius:50%;background:#2f6a4c}
.cyc-steps .k{font-family:var(--font-mono);font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:#2f6a4c;margin-bottom:7px}
.cyc-steps b{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(1.12rem,1.8vw,1.3rem);letter-spacing:-0.02em;color:var(--ink);margin-bottom:5px}
.cyc-steps p{font-size:.96rem;color:var(--ink-muted);max-width:34ch}
.cyc-vis{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:620px){.cyc-vis{grid-template-columns:1fr 1fr}}
.cyc-vis .tall{grid-column:1/-1}
.cyc-close{margin-top:clamp(48px,5vw,70px);padding-top:clamp(30px,3.4vw,40px);border-top:1px solid var(--line-light);font-family:var(--font-display);font-weight:600;font-size:clamp(1.3rem,2.5vw,1.85rem);letter-spacing:-0.025em;line-height:1.24;color:var(--ink);max-width:26ch}
.cyc-close .dim{color:var(--ink-muted);display:block}

/* messaging thread */
.ui-msgs{display:grid;gap:9px;margin-top:12px}
.ui-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:.82rem;line-height:1.5}
.ui-msg.them{background:var(--pale);color:var(--ink);border-bottom-left-radius:5px}
.ui-msg.you{background:var(--green-800);color:#fff;margin-left:auto;border-bottom-right-radius:5px}
.ui-msg .mw{display:block;font-family:var(--font-mono);font-size:.53rem;letter-spacing:.11em;text-transform:uppercase;opacity:.62;margin-bottom:4px}
.ui-typing{display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line-light);font-size:.78rem;color:var(--ink-muted)}
.ui-typing .av{width:22px;height:22px;border-radius:50%;overflow:hidden;flex:none;background:var(--pale)}
.ui-typing .av img{width:100%;height:100%;object-fit:cover;object-position:center top}

/* trend chart */
.ui-trend{margin-top:14px}
.ui-trend .tv{display:flex;align-items:baseline;gap:9px;margin-bottom:2px}
.ui-trend .tv b{font-family:var(--font-display);font-weight:700;font-size:1.75rem;letter-spacing:-0.035em;color:var(--ink);line-height:1}
.ui-trend .tv i{font-style:normal;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:#2f6a4c;background:rgba(149,213,179,.24);padding:3px 7px;border-radius:5px}
.ui-trend .tu{font-size:.72rem;color:var(--ink-muted)}
.ui-chart{margin-top:14px;position:relative}
.ui-chart svg{width:100%;height:78px;display:block;overflow:visible}
.ui-xa{display:flex;justify-content:space-between;margin-top:7px;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}

/* ---- SECTION 6 — THE CARE MODEL ------------------------------------------
   Big type left, a quiet ring right. The ring is drawn with one circle, four
   nodes and one return arc — it is a diagram, not an ornament.
   ------------------------------------------------------------------------- */
.model{display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,80px);align-items:center}
@media(min-width:940px){.model{grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(56px,6vw,110px)}}
.model h2{font-size:clamp(2.6rem,6.4vw,4.6rem);font-weight:700;letter-spacing:-0.04em;line-height:1.02}
.model h2 span{display:block}
.model h2 span:nth-child(4){color:var(--mint)}
.model-copy{margin-top:clamp(30px,3.4vw,42px);max-width:46ch}
.model-copy p{font-size:1.06rem;color:rgba(255,255,255,.76)}
.model-copy p+p{margin-top:8px}
.model-rule{margin-top:clamp(34px,4vw,46px);padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--line-dark)}
.model-rule p{font-family:var(--font-display);font-weight:600;font-size:clamp(1.1rem,1.9vw,1.35rem);letter-spacing:-0.02em;color:#fff;max-width:34ch;line-height:1.34}
.ring{position:relative;width:min(100%,462px);margin:0 auto;aspect-ratio:1}
.ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.ring .rc{fill:none;stroke:var(--line-mint);stroke-width:1}
.ring .rn{fill:var(--green-950);stroke:var(--mint);stroke-width:1.4}
.ring .rarrow{fill:none;stroke:var(--mint);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ring .lbl{position:absolute;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;color:#fff;white-space:nowrap}
/* labels sit clear of the ring, never on top of a node */
.ring .lbl.a{left:50%;top:6%}
.ring .lbl.b{left:90%;top:50%}
.ring .lbl.c{left:50%;top:94%}
.ring .lbl.d{left:10%;top:50%}
.ring .mid{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;font-family:var(--font-mono);font-size:.55rem;letter-spacing:.15em;text-transform:uppercase;color:var(--mint);opacity:.72;line-height:1.8}
@media(max-width:520px){
  .ring{width:min(100%,300px)}
  .ring .lbl{font-size:.56rem;letter-spacing:.13em}
  .ring .mid{font-size:.5rem}
}

/* ---- SECTION 7 — FINAL CTA ------------------------------------------------
   Uses the base .final block. Only the price line is new.
   ------------------------------------------------------------------------- */
.final .price{font-family:var(--font-display);font-weight:800;font-size:clamp(3rem,7vw,4.4rem);letter-spacing:-0.045em;line-height:1;color:var(--ink);margin:22px 0 24px}
.final .price em{font-style:normal;font-family:var(--font-body);font-weight:500;font-size:1rem;letter-spacing:0;color:var(--ink-muted)}
.final .cta-row{margin-top:30px}

/* ---- SHARED SMALL PIECES -------------------------------------------------- */
.figcap{margin-top:11px;font-family:var(--font-mono);font-size:.57rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted)}
.bg-deep .figcap,.bg-mid .figcap{color:rgba(255,255,255,.45)}
.photo{border-radius:var(--r-md);overflow:hidden;position:relative}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.r43{aspect-ratio:4/3}
.sec-head.wide{max-width:900px}
.sec-head h2 .dim{color:var(--ink-muted)}
.bg-deep .sec-head h2 .dim,.bg-mid .sec-head h2 .dim{color:rgba(255,255,255,.42)}