/* ============================================================
   SHEN Supply Co. — v3
   Light grounds, hot accents. Storefront discipline underneath,
   Lagos-WhatsApp noise on top. Footer structure after systemlabs.com.

   Colour — every colour has one job
     bone      page ground: clean, warm, never clinical white
     blush     skin warmth: the intimate sections
     cobalt    the studio: hero, how-it-works, footer (sampled from the photos)
     red       desire: CTAs, prices, stickers, the risk ticker
     oxblood   the after-hours note: promo band, small emphasis
     ink       plum-black type
   Type — Geist Serif for display, Geist Sans for everything else. No all-caps.
   ============================================================ */

@font-face{font-family:"Geist Serif";src:url(../fonts/GeistSerifVF.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Geist;src:url(../fonts/Geist-Variable.woff2) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:Geist;src:url(../fonts/Geist-Italic%5Bwght%5D.woff2) format("woff2");font-weight:100 900;font-style:italic;font-display:swap}
/* Geist has no ₦ — one-glyph slice of BDO Grotesk, loaded only when ₦ appears */
@font-face{font-family:Naira;src:url(../fonts/naira.woff2) format("woff2");unicode-range:U+20A6;font-display:swap}

:root{
  --bone:#F7F1EA;
  --blush:#F2DDD3;
  --blush-2:#EACDBF;
  --paper:#FFFDFB;
  --cobalt:#6396F5;
  --red:#D3203A;
  --red-deep:#B0162D;
  --oxblood:#5B1222;
  --ink:#1C1216;
  --ink-75:rgba(28,18,22,.76);
  --ink-55:rgba(28,18,22,.58);
  --ink-40:rgba(28,18,22,.44);
  --line:rgba(28,18,22,.16);
  --line-soft:rgba(28,18,22,.09);

  --serif:Naira,"Geist Serif",ui-serif,Georgia,serif;
  --sans:Naira,Geist,ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;

  --shell:min(1320px,calc(100vw - 2*clamp(20px,4vw,56px)));
  --sec:clamp(4.5rem,8vw,7.5rem);
  --gap:clamp(14px,1.6vw,24px);
  --ease:cubic-bezier(.23,1,.32,1);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease-io:cubic-bezier(.77,0,.175,1);
  --col4:calc((100% + var(--gap)) / 4);

  --t-xl:clamp(3rem,7vw,6.5rem);
  --t-display:clamp(2.375rem,4.6vw,4.25rem);
  --t-title:clamp(1.75rem,2.6vw,2.375rem);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-rendering:optimizeLegibility}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--sans);font-size:1rem;line-height:1.6;letter-spacing:-.006em;
  font-kerning:normal;font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;letter-spacing:inherit}
button{background:none;border:0;cursor:pointer}
h1,h2,h3,h4,h5,p,figure{margin:0}
p{text-wrap:pretty}
::selection{background:var(--red);color:var(--paper)}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

.container{width:var(--shell);margin-inline:auto}
.section{padding-block:var(--sec)}
.section--mid{padding-block:clamp(3.5rem,6vw,5.5rem)}

/* ---------- type ---------- */
.display,.title,.h-card,.body-lg,.serif{
  font-family:var(--serif);font-weight:400;font-feature-settings:"kern" 1,"liga" 1,"lnum" 1;text-wrap:balance;
}
.display{font-size:var(--t-display);line-height:1;letter-spacing:-.03em}
.display--xl{font-size:var(--t-xl);line-height:.96;letter-spacing:-.036em}
.title{font-size:var(--t-title);line-height:1.06;letter-spacing:-.024em}
.h-card{font-size:clamp(1.375rem,1.7vw,1.625rem);line-height:1.08;letter-spacing:-.02em}
.body-lg{font-size:clamp(1.375rem,2.2vw,2rem);line-height:1.18;letter-spacing:-.02em;max-width:24ch}
.body{font-size:.9375rem;line-height:1.6;color:var(--ink-75);max-width:62ch}
.label{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.8125rem;font-weight:500;line-height:1.3;letter-spacing:0;color:var(--ink-55);
  font-variant-numeric:tabular-nums;
}
.label i{width:7px;height:7px;background:currentColor;flex:0 0 auto}
.label--red{color:var(--red)}
.num{font-variant-numeric:tabular-nums lining-nums}
em.r{font-style:normal;color:var(--red)}

/* ---------- buttons: flat bars, triangle, no pills ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:46px;padding:0 1rem 0 1.15rem;border-radius:2px;white-space:nowrap;
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;
  box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink);background:transparent;
  transition:background-color .22s ease,color .22s ease,box-shadow .22s ease,transform .18s var(--ease);
}
.btn:active{transform:scale(.97)}
.btn i{
  width:0;height:0;flex:0 0 auto;border-style:solid;border-width:5px 0 5px 8px;
  border-color:transparent transparent transparent currentColor;transition:transform .35s var(--ease);
}
.btn:hover i{transform:translateX(3px)}
.btn:hover{background:var(--ink);color:var(--bone)}
.btn--red{background:var(--red);color:var(--paper);box-shadow:none}
.btn--red:hover{background:var(--red-deep);color:var(--paper)}
.btn--ink{background:var(--ink);color:var(--bone);box-shadow:none}
.btn--ink:hover{background:var(--oxblood)}
.btn--plain{box-shadow:none;padding-inline:0;height:auto;gap:.6rem}
.btn--plain:hover{background:none;color:var(--red)}
.btn--wide{min-width:260px}

/* ---------- sticker: the noise primitive ---------- */
.sticker{
  display:inline-block;background:var(--red);color:var(--paper);
  font-size:.8125rem;font-weight:600;line-height:1.2;letter-spacing:-.005em;
  padding:.4rem .6rem;border-radius:2px;transform:rotate(-3deg);
  box-shadow:0 8px 18px -10px rgba(91,18,34,.6);white-space:nowrap;
}
.sticker--bone{background:var(--paper);color:var(--ink)}
.sticker--ink{background:var(--ink);color:var(--bone)}

/* ============================================================
   HEADER
   ============================================================ */
.header{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bone) 90%,transparent);
  backdrop-filter:saturate(150%) blur(14px);-webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s}
.header.scrolled{border-bottom-color:var(--line-soft)}
.header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:64px}
.nav-left,.nav-right{display:flex;align-items:center;gap:1.25rem;flex:1 1 0}
.nav-right{justify-content:flex-end}
.brand{font-family:var(--serif);font-size:1.625rem;line-height:1;letter-spacing:-.04em;flex:0 0 auto}
.nav-links{display:flex;gap:1.4rem}
.nav-links a{font-size:.875rem;font-weight:450;color:var(--ink-75);transition:color .2s}
.nav-links a:hover{color:var(--red)}
.split{display:flex;box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;padding:2px}
.split a{font-size:.8125rem;font-weight:500;padding:.3rem .65rem;border-radius:1px;color:var(--ink-55);transition:color .2s}
.split a:hover{color:var(--ink)}
.split a.active{background:var(--ink);color:var(--bone)}
.header .btn{height:38px;font-size:.875rem;gap:1rem}
.menu-btn{display:none;font-size:.875rem;font-weight:500}

/* ============================================================
   HERO — the studio plate, full bleed, type in the backdrop
   ============================================================ */
.hero{position:relative;background:var(--cobalt);color:var(--ink);overflow:hidden;isolation:isolate;
  min-height:clamp(620px,calc(100svh - 64px),920px);display:flex;flex-direction:column}
.hero__img{position:absolute;inset:0;z-index:-1}
.hero__img img{width:100%;height:100%;object-fit:cover;object-position:76% 16%}
.hero__body{flex:1;display:flex;align-items:center}
.hero__copy{max-width:min(40rem,52vw);padding-block:clamp(48px,7vw,96px) clamp(36px,4vw,56px)}
.hero__kicker{margin-bottom:1.25rem;color:var(--ink)}
.hero__copy p{font-size:clamp(1.0625rem,1.35vw,1.25rem);line-height:1.5;letter-spacing:-.012em;color:rgba(28,18,22,.8);max-width:34ch;margin-top:1.4rem}
.hero-cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.hero .btn:not(.btn--red){box-shadow:inset 0 0 0 1px rgba(28,18,22,.45)}
.hero .btn:not(.btn--red):hover{background:var(--ink);color:var(--bone);box-shadow:none}
.hero__sticker{margin-left:.9rem;vertical-align:middle;transform:rotate(-4deg)}
.hero__props{display:grid;grid-template-columns:repeat(3,1fr) minmax(0,1.15fr);
  border-top:1px solid rgba(28,18,22,.22);background:color-mix(in srgb,var(--cobalt) 72%,transparent);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hero__props > div{padding:1rem clamp(14px,1.6vw,22px) 1.1rem;border-left:1px solid rgba(28,18,22,.14)}
.hero__props > div:first-child{border-left:0;padding-left:max(clamp(20px,4vw,56px),calc((100vw - 1320px)/2))}
.hero__props b{display:block;font-size:.8125rem;font-weight:500;color:rgba(28,18,22,.66);margin-bottom:.2rem}
.hero__props span{font-size:.9375rem;line-height:1.4;display:block}
.status{display:flex;gap:.6rem;align-items:flex-start}
.status i{flex:0 0 auto;width:8px;height:8px;margin-top:.45em;background:var(--red);animation:blink 2.4s steps(1) infinite}
@keyframes blink{50%{opacity:.2}}

/* ============================================================
   MARQUEE — the risk line, in red
   ============================================================ */
.marquee{background:var(--red);color:var(--paper);overflow:hidden;display:flex;padding-block:.7rem}
.marquee__t{display:flex;flex:0 0 auto;gap:2rem;padding-right:2rem;animation:slide 48s linear infinite}
.marquee:hover .marquee__t{animation-play-state:paused}
.marquee span{font-size:.875rem;font-weight:500;white-space:nowrap;display:flex;align-items:center;gap:2rem}
.marquee span::after{content:"";width:6px;height:6px;background:var(--paper);opacity:.7}
@keyframes slide{to{transform:translateX(-100%)}}

/* ============================================================
   SECTION HEADS
   ============================================================ */
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:1rem 2rem;align-items:start;
  padding-top:1.1rem;border-top:1px solid var(--line);margin-bottom:clamp(2.25rem,4.5vw,4rem)}
.head .label{padding-top:.55rem}
.head__r{display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.head-center{text-align:center;margin-bottom:clamp(2.25rem,4.5vw,3.75rem);display:flex;flex-direction:column;align-items:center;gap:1rem}
.head-center .display{max-width:18ch}

/* ============================================================
   DRIVERS — blush, five dark photographs
   ============================================================ */
.drivers{background:var(--blush)}
.drivers-strip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap)}
.driver-media{aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--blush-2)}
.driver-media img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover) and (pointer:fine){.driver:hover .driver-media img{transform:scale(1.04)}}
.driver:nth-child(even){margin-top:clamp(20px,4vw,56px)}
.driver-cap{padding-top:.9rem}
.driver-cap .label{color:var(--red)}
.driver-cap h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;letter-spacing:-.02em;line-height:1.05;margin:.35rem 0 .35rem}
.driver-cap p{font-size:.875rem;line-height:1.5;color:var(--ink-75);max-width:24ch}

/* ============================================================
   TREATMENTS — people first, the vial is the inset
   ============================================================ */
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.card{display:flex;flex-direction:column}
.card-media{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--blush)}
.card-media > img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
@media (hover:hover) and (pointer:fine){.card:hover .card-media > img{transform:scale(1.035)}.card:hover .card-vial{transform:translateY(-4px)}}
.card-vial{position:absolute;right:10px;bottom:10px;width:31%;aspect-ratio:1;background:var(--paper);border-radius:2px;overflow:hidden;
  box-shadow:0 10px 24px -14px rgba(28,18,22,.6)}
.card-vial img{width:100%;height:100%;object-fit:cover;transform:scale(1.25)}
.card-media .sticker{position:absolute;left:10px;top:12px}
.card-body{display:flex;flex-direction:column;flex:1 1 auto;padding-top:1rem}
.card-body .label{margin-bottom:.4rem}
.card-price{font-size:.9375rem;margin:.55rem 0 .7rem;font-variant-numeric:tabular-nums}
.card-price s{color:var(--ink-40);margin-right:.4em}
.card-price b{color:var(--red);font-weight:600}
.card-body .body{font-size:.875rem;margin-bottom:1.1rem}
.card-foot{display:flex;align-items:center;gap:1.25rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line)}
.card-foot .btn{height:40px;font-size:.875rem}

.promo{background:var(--oxblood);color:var(--blush);text-align:center;padding:.85rem 1rem}
.promo p{font-size:.875rem;font-weight:500}
.promo b{color:var(--paper);font-weight:600}

/* ============================================================
   CALCULATOR — proof register: plain, white, legible
   ============================================================ */
.calc-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--gap)}
.calc-panel{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-soft);padding:clamp(1.25rem,2.4vw,2rem)}
.calc-panel > .label{margin-bottom:1.25rem}
.field{margin-bottom:1rem}
.field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.4rem}
.field-wrap{display:flex;align-items:center;box-shadow:inset 0 0 0 1px var(--line);background:var(--bone);border-radius:2px}
.field-wrap input{flex:1 1 auto;border:0;background:none;height:48px;padding:0 .9rem;font-size:1.0625rem;font-variant-numeric:tabular-nums}
.field-wrap input:focus{outline:0}
.field-wrap:focus-within{box-shadow:inset 0 0 0 2px var(--ink)}
.field-wrap span{padding:0 .9rem;font-size:.875rem;color:var(--ink-55)}
.pace{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:1.25rem}
.pace button{text-align:left;padding:.8rem .9rem;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line);font-size:.9375rem;font-weight:500;line-height:1.25;transition:background-color .2s}
.pace button b{display:block;font-size:.8125rem;font-weight:400;color:var(--ink-55);margin-top:.15rem}
.pace button.on{background:var(--ink);color:var(--bone);box-shadow:none}
.pace button.on b{color:rgba(247,241,234,.7)}
.calc-out{display:grid;grid-template-columns:1fr 1fr;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-soft)}
.calc-cell{padding:1.25rem 1.4rem 1.4rem;border-bottom:1px solid var(--line-soft)}
.calc-cell:nth-child(odd){border-right:1px solid var(--line-soft)}
.calc-cell:nth-last-child(-n+2){border-bottom:0}
.calc-val{font-family:var(--serif);font-size:clamp(2.25rem,4vw,3.25rem);line-height:1;letter-spacing:-.03em;margin-top:.6rem;font-variant-numeric:lining-nums}
.calc-val small{font-family:var(--sans);font-size:.875rem;letter-spacing:0;color:var(--ink-55);margin-left:.35rem}
.calc-cell:last-child .calc-val{color:var(--red)}
.calc-warn{margin-top:var(--gap);padding:1rem 1.15rem;border-left:3px solid var(--red);background:var(--paper);font-size:.9375rem;line-height:1.5}
.calc-note{font-size:.8125rem;line-height:1.55;color:var(--ink-55);margin-top:1.1rem;max-width:62ch}
.calc-foot{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.5rem}

/* ============================================================
   FULL-BLEED BREAKS
   ============================================================ */
.break-band{position:relative;margin:0;height:clamp(380px,48vw,680px);overflow:hidden;background:var(--ink)}
.break-band img{width:100%;height:100%;object-fit:cover;object-position:center 25%}
.break-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(28,18,22,.55))}
.break-band figcaption{position:absolute;left:0;right:0;bottom:clamp(24px,4vw,56px);z-index:2;width:var(--shell);margin-inline:auto;
  font-family:var(--serif);font-size:clamp(2rem,4.6vw,4.25rem);line-height:1;letter-spacing:-.032em;color:var(--paper);max-width:var(--shell);text-wrap:balance}
.break-band figcaption span{display:block;max-width:16ch}
.break-band .sticker{position:absolute;right:clamp(20px,6vw,90px);top:clamp(20px,4vw,48px);z-index:2;transform:rotate(5deg)}

/* ============================================================
   RECEIPTS — body strip + WhatsApp, the Lagos-internet layer
   ============================================================ */
.receipts{background:var(--blush);overflow:hidden}
.strip{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  padding:1.25rem calc((100vw - var(--shell))/2) 2.5rem;margin-inline:calc((100vw - var(--shell))/-2)}
.strip::-webkit-scrollbar{display:none}
.rc{flex:0 0 auto;scroll-snap-align:start;border-radius:3px;position:relative}
.rc:nth-child(3n+1){transform:rotate(-1.2deg)}
.rc:nth-child(3n+2){transform:rotate(1deg);margin-top:1.5rem}
.rc:nth-child(3n){transform:rotate(-.4deg)}
.rc--photo{width:clamp(240px,22vw,300px);aspect-ratio:3/4;overflow:hidden;background:var(--ink);box-shadow:0 22px 40px -26px rgba(28,18,22,.7)}
.rc--photo img{width:100%;height:100%;object-fit:cover}
.rc--photo .sticker{position:absolute;left:10px;bottom:12px}
.rc--photo .wk{position:absolute;right:10px;top:10px;background:var(--paper);color:var(--ink);font-size:.75rem;font-weight:600;padding:.2rem .45rem;border-radius:2px}
.rc--wa{width:clamp(270px,24vw,320px);background:#EFE7DE;padding:.9rem .8rem 1rem;box-shadow:0 22px 40px -26px rgba(28,18,22,.55)}
.wa-hd{display:flex;align-items:center;gap:.6rem;padding:0 .2rem .7rem;margin-bottom:.7rem;border-bottom:1px solid rgba(28,18,22,.08)}
.wa-av{width:30px;height:30px;border-radius:50%;background:var(--blush-2);display:grid;place-items:center;font-size:.75rem;font-weight:600}
.wa-hd b{font-size:.875rem;font-weight:600;display:block;line-height:1.2}
.wa-hd small{font-size:.75rem;color:var(--ink-55)}
.bub{font-size:.875rem;line-height:1.42;padding:.5rem .7rem .4rem;border-radius:8px;margin-bottom:.4rem;max-width:90%;background:var(--paper)}
.bub time{display:block;text-align:right;font-size:.6875rem;color:var(--ink-40);margin-top:.15rem}
.bub--out{background:#DCF3C8;margin-left:auto}
.rc--q{width:clamp(220px,19vw,260px);background:var(--ink);color:var(--bone);padding:1.2rem 1.15rem 1.3rem;align-self:flex-start}
.rc--q .label{color:rgba(247,241,234,.6)}
.rc--q p{font-family:var(--serif);font-size:1.5rem;line-height:1.1;letter-spacing:-.02em;margin-top:.8rem}
.receipts__note{font-size:.8125rem;color:var(--ink-55);max-width:62ch;margin-top:.5rem}

/* ============================================================
   FEATURES / INCLUDED
   ============================================================ */
.feature-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.fcard{padding:1.4rem 1.4rem 1.6rem 0;margin-right:1.4rem;border-right:1px solid var(--line-soft)}
.fcard:last-child{border-right:0;margin-right:0}
.col-ic{color:var(--red);margin-bottom:1.6rem}
.fcard h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.05;letter-spacing:-.02em;margin-bottom:.5rem}
.fcard p{font-size:.875rem;line-height:1.55;color:var(--ink-75)}

.inc-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(20px,4vw,64px);align-items:stretch}
.inc-split__img{overflow:hidden;border-radius:2px;min-height:420px}
.inc-split__img img{width:100%;height:100%;object-fit:cover}
.inc-list{border-top:1px solid var(--line)}
.inc-row{display:grid;grid-template-columns:4.5rem 1fr;gap:1rem;padding:1.4rem 0 1.5rem;border-bottom:1px solid var(--line-soft)}
.inc-row .n{font-family:var(--serif);font-size:2.25rem;line-height:1;letter-spacing:-.03em;color:var(--red)}
.inc-row h3{font-family:var(--serif);font-weight:400;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em;margin-bottom:.35rem}
.inc-row p{font-size:.9375rem;color:var(--ink-75);line-height:1.55}

/* ============================================================
   HOW IT WORKS — on cobalt
   ============================================================ */
.how{background:var(--cobalt);--line:rgba(28,18,22,.26);--line-soft:rgba(28,18,22,.14);--ink-55:rgba(28,18,22,.72);--ink-75:rgba(28,18,22,.8)}
.how .head .label{color:var(--ink)}
.how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));box-shadow:inset 0 0 0 1px var(--line)}
.how-step{padding:1.4rem 1.5rem 1.8rem;border-right:1px solid var(--line);min-height:260px;display:flex;flex-direction:column}
.how-step:last-child{border-right:0}
.how-step .n{align-self:flex-start;font-size:.8125rem;font-weight:600;padding:.2rem .45rem;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line);margin-bottom:auto}
.how-step:first-child .n{background:var(--red);color:var(--paper);box-shadow:none}
.how-step h3{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1;letter-spacing:-.025em;margin:2.5rem 0 .55rem}
.how-step p{font-size:.9375rem;line-height:1.55;color:var(--ink-75);max-width:32ch}

/* ============================================================
   BLOG
   ============================================================ */
.blog-feat{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(20px,4vw,56px);align-items:center;margin-bottom:clamp(2.5rem,5vw,4rem)}
.blog-feat img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:2px}
.blog-feat h3{font-family:var(--serif);font-weight:400;font-size:var(--t-title);line-height:1.06;letter-spacing:-.024em;margin:.8rem 0 .8rem;text-wrap:balance}
.know{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.article{display:flex;flex-direction:column}
.article .ph{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--blush)}
.article img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.article:hover img{transform:scale(1.04)}
.article .label{margin:.9rem 0 .35rem}
.article h3{font-family:var(--serif);font-weight:400;font-size:1.3125rem;line-height:1.12;letter-spacing:-.018em;text-wrap:balance;transition:color .2s}
.article:hover h3{color:var(--red)}

/* ============================================================
   READY — photograph + lipstick panel
   ============================================================ */
.ready{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-height:520px}
.ready-img{overflow:hidden}
.ready-img img{width:100%;height:100%;object-fit:cover}
.ready-panel{background:var(--red);color:var(--paper);padding:clamp(2rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;gap:1.1rem}
.ready-panel .display{color:var(--paper)}
.ready-panel p{font-size:1.0625rem;line-height:1.5;max-width:34ch;color:rgba(255,253,251,.88)}
.ready-panel .btn{background:var(--paper);color:var(--ink);box-shadow:none}
.ready-panel .btn:hover{background:var(--ink);color:var(--paper)}
.ready-alt{display:flex;align-items:center;gap:1rem;margin-top:1.25rem;font-size:.9375rem;color:var(--ink-75)}

/* ============================================================
   FAQ — numbered rows
   ============================================================ */
.faq{max-width:920px;margin-inline:auto;border-top:1px solid var(--line);counter-reset:q}
.faq details{border-bottom:1px solid var(--line-soft);counter-increment:q}
.faq summary{display:grid;grid-template-columns:3rem 1fr auto;align-items:center;gap:1rem;padding:1.3rem 0;cursor:pointer;list-style:none;
  font-size:clamp(1.0625rem,1.35vw,1.1875rem);font-weight:450;letter-spacing:-.016em;line-height:1.35;transition:color .2s}
.faq summary::before{content:counter(q,decimal-leading-zero);font-size:.8125rem;font-weight:500;color:var(--ink-40);font-variant-numeric:tabular-nums}
.faq summary:hover{color:var(--red)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq .plus{font-size:1.25rem;font-weight:300;line-height:1;transition:transform .35s var(--ease)}
.faq details[open] .plus{transform:rotate(45deg);color:var(--red)}
.faq-body{padding:0 0 1.5rem 4rem;max-width:calc(68ch + 4rem);font-size:.9375rem;line-height:1.65;color:var(--ink-75)}
.faq-body b{color:var(--ink);font-weight:600}

/* ============================================================
   FOOTER — after System Labs, tailored: the studio blue,
   centred ask, corner-tick rails, hairline box, legal in italics
   ============================================================ */
.footer{
  --fl:rgba(28,18,22,.34);--fm:rgba(28,18,22,.68);
  position:relative;isolation:isolate;overflow:hidden;background:var(--cobalt);color:var(--ink);
  min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;
  padding:clamp(96px,14vh,190px) 15px 15px;
}
.footer__bg{position:absolute;top:0;right:0;width:min(40vw,640px);height:68%;z-index:-1}
.footer__bg img{width:100%;height:100%;object-fit:cover;object-position:82% 6%}
.footer__bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,var(--cobalt),transparent 38%),linear-gradient(0deg,var(--cobalt),transparent 30%)}
.footer__cta{text-align:center;display:flex;flex-direction:column;align-items:center;padding-inline:20px}
.footer__cta h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.125rem,3.8vw,3.5rem);line-height:1.02;letter-spacing:-.03em;max-width:20ch;text-wrap:balance}
.footer__cta h2 span{color:var(--paper)}
.footer__cta .btn{margin-top:clamp(26px,3vw,38px);width:min(600px,100%);height:44px}

.footer__frame{margin-top:clamp(72px,14vh,150px);display:grid;grid-template-columns:120px minmax(0,1fr) 120px;gap:0 15px}
.rail{
  grid-row:1/3;display:flex;flex-direction:column;padding:10px;
  border-inline:1px solid var(--fl);
  background:
    linear-gradient(var(--fl),var(--fl)) top left/24px 1px no-repeat,
    linear-gradient(var(--fl),var(--fl)) top right/24px 1px no-repeat,
    linear-gradient(var(--fl),var(--fl)) bottom left/24px 1px no-repeat,
    linear-gradient(var(--fl),var(--fl)) bottom right/24px 1px no-repeat;
}
.rail--l{grid-column:1}
.rail--r{grid-column:3;padding:15px}
.rail__thumbs{display:flex}
.rail__thumbs img{width:50px;height:50px;object-fit:cover}
.rail__face{width:100px;height:100px;object-fit:cover;margin-block:auto}
.rail small{font-size:.75rem;line-height:1.3;color:var(--fm);padding:0 5px 5px}
.rail--r i{width:10px;height:10px;background:var(--red)}
.rail .vert{margin:auto auto 0;writing-mode:vertical-rl;transform:rotate(180deg);font-size:.75rem;line-height:1.3;color:var(--fm);white-space:nowrap}
.rail .vert b{color:var(--ink);font-weight:600}

.fbox{grid-column:2;grid-row:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,500px);
  border:1px solid var(--fl);background:color-mix(in srgb,var(--bone) 34%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);min-height:300px}
.fbox__links{padding:15px;display:flex;flex-direction:column;justify-content:space-between;gap:2rem}
.fcols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.fcol h4{font-size:.9375rem;font-weight:400;line-height:1.25;color:var(--fm);margin:0 0 .6rem}
.fcol a{display:block;font-size:.9375rem;line-height:1.25;padding:.15rem 0;transition:color .2s}
.fcol a:hover{color:var(--red)}
.fbase{display:flex;align-items:flex-end;gap:1.1rem;flex-wrap:wrap}
.fbrand{font-family:var(--serif);font-size:3rem;line-height:.8;letter-spacing:-.05em}
.fbase nav{display:flex;gap:.9rem;font-size:.75rem;color:var(--fm)}
.fbase nav a:hover{color:var(--ink)}
.fbase .switch{margin-left:auto;font-size:.75rem;color:var(--fm)}
.fbase .switch a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--fl)}
.fsub{border-left:1px solid var(--fl);display:flex;flex-direction:column}
.fsub figure{height:182px;overflow:hidden;background:var(--ink)}
.fsub figure img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.fsub label{display:block;padding:15px 15px 0;font-size:.9375rem;line-height:1.1}
.fsub input{width:100%;height:47px;padding:0 15px;border:0;background:transparent;font-size:.9375rem}
.fsub input::placeholder{color:var(--fm)}
.fsub input:focus{outline:0;box-shadow:inset 0 -2px 0 var(--red)}
.fsub button{margin-top:auto;height:38px;display:flex;align-items:center;justify-content:space-between;padding:0 15px;background:var(--ink);color:var(--bone);font-size:.9375rem;transition:background-color .2s}
.fsub button:hover{background:var(--red)}
.fsub button i{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;opacity:.6}

.flegal{grid-column:2;grid-row:2;display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;padding-top:28px}
.flegal p{font-style:italic;font-size:.75rem;line-height:1.35;color:var(--fm)}
.flegal b{font-weight:600;color:var(--ink)}

/* ============================================================
   STICKY CTA (mobile) + REVEAL
   ============================================================ */
.sticky-cta{display:none}

/* ============================================================
   TABLET
   ============================================================ */
@media (max-width:1180px){
  .nav-links{gap:1rem}
  .footer__frame{grid-template-columns:1fr}
  .rail{display:none}
  .fbox,.flegal{grid-column:1}
  .hero__props{grid-template-columns:repeat(3,1fr)}
  .hero__props > div:last-child{display:none}
}
@media (max-width:1024px){
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;background:var(--bone);border-bottom:1px solid var(--line);padding:.5rem var(--pad,20px) 1rem}
  .nav-links.open{display:flex}
  .nav-links a{padding:.7rem clamp(20px,4vw,56px);font-size:1rem}
  .menu-btn{display:block}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .drivers-strip{grid-template-columns:repeat(5,minmax(200px,1fr));overflow-x:auto;scrollbar-width:none;margin-inline:calc((100vw - var(--shell))/-2);padding-inline:calc((100vw - var(--shell))/2)}
  .feature-cards{grid-template-columns:1fr 1fr}
  .fcard:nth-child(2){border-right:0;margin-right:0}
  .know{grid-template-columns:1fr 1fr}
}

/* ============================================================
   MOBILE — its own layout
   ============================================================ */
@media (max-width:760px){
  :root{--t-xl:clamp(3rem,13vw,4.25rem);--t-display:clamp(2.25rem,9.5vw,3rem)}
  .header .container{min-height:58px}
  .nav-left{flex:0 0 auto}
  .nav-right{gap:.6rem}
  .header .btn{display:none}
  .brand{font-size:1.5rem}

  .hero{min-height:0;display:block}
  .hero__img{position:relative;aspect-ratio:4/5;max-height:70svh}
  .hero__img img{object-position:center 10%}
  .hero__img::after{content:"";position:absolute;inset:auto 0 0;height:24%;background:linear-gradient(transparent,var(--cobalt))}
  .hero__copy{max-width:none;padding-block:0 32px}
  .hero-cta{flex-direction:column}
  .hero-cta .btn{width:100%}
  .hero__props{grid-template-columns:1fr;backdrop-filter:none;background:transparent}
  .hero__props > div{border-left:0;border-top:1px solid rgba(28,18,22,.14);padding:.8rem 20px}
  .hero__props > div:first-child{border-top:0;padding-left:20px}

  .head{grid-template-columns:1fr;gap:.9rem}
  .head .label{padding-top:0}
  .driver:nth-child(even){margin-top:0}
  .cards{grid-template-columns:1fr;gap:2.25rem}
  .card-media{aspect-ratio:4/4.4}
  .calc-grid{grid-template-columns:1fr}
  .calc-cell{padding:1rem}
  .break-band{height:62svh}
  .break-band img{object-position:center 20%}
  .rc--photo{width:72vw}
  .rc--wa{width:80vw}
  .rc--q{width:64vw}
  .feature-cards{grid-template-columns:1fr}
  .fcard{border-right:0;margin-right:0;border-bottom:1px solid var(--line-soft);padding-right:0}
  .inc-split{grid-template-columns:1fr}
  .inc-split__img{min-height:0;aspect-ratio:4/5}
  .how-steps{grid-template-columns:1fr}
  .how-step{border-right:0;border-bottom:1px solid var(--line);min-height:0}
  .how-step:last-child{border-bottom:0}
  .how-step h3{margin-top:1.5rem}
  .blog-feat{grid-template-columns:1fr}
  .know{grid-template-columns:1fr 1fr;gap:1.5rem .8rem}
  .ready{grid-template-columns:1fr}
  .ready-img{aspect-ratio:4/5}
  .ready-alt{flex-wrap:wrap}
  .faq summary{grid-template-columns:2.25rem 1fr auto}
  .faq-body{padding-left:3.25rem}

  .footer{min-height:0;padding:80px 12px 84px}
  .footer__bg{display:none}
  .footer__frame{margin-top:56px}
  .fbox{grid-template-columns:1fr}
  .fcols{grid-template-columns:1fr 1fr;gap:1.4rem 1rem}
  .fsub{border-left:0;border-top:1px solid var(--fl)}
  .fbase .switch{margin-left:0;width:100%}
  .flegal{grid-template-columns:1fr;gap:1rem;padding-top:20px}

  .sticky-cta{display:block;position:fixed;left:12px;right:12px;bottom:12px;z-index:90}
  .sticky-cta .btn{width:100%;height:50px;background:var(--red);color:var(--paper);box-shadow:0 12px 28px -12px rgba(91,18,34,.7)}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .marquee__t{animation:none!important}
}


/* ============================================================
   v4 — alignment, typography, motion
   Same look; tighter grid, no tags, quiet motion (Emil rules:
   strong ease-out, transform/opacity only, press = scale .97,
   hover only on real pointers, reduced motion honoured).
   ============================================================ */

/* one 12-col grid: labels cols 1–3, reading text hangs from col 4 */
.head{grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem var(--gap)}
.head > .label{grid-column:1/4}
.head > :not(.label){grid-column:4/13}
.faq{max-width:none;margin-left:var(--col4);margin-right:0}
.faq-alt{margin-left:var(--col4);display:flex;align-items:center;gap:1rem;margin-top:2rem;font-size:.9375rem;color:var(--ink-75)}
.calc-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
.calc-panel{grid-column:1/6}
.calc-right{grid-column:6/13}
.inc-split{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.inc-split__img{grid-column:1/7;aspect-ratio:4/5;min-height:0}
.inc-list{grid-column:7/13;align-self:end}
.blog-feat{grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end}
.blog-feat .ph{grid-column:1/8;aspect-ratio:16/10;overflow:hidden;border-radius:2px}
.blog-feat .ph img{aspect-ratio:auto;height:100%}
.blog-feat > div:last-child{grid-column:8/13}
.drivers-strip .driver:nth-child(even){margin-top:0}
.fcard h3,.inc-row h3{text-wrap:balance}

/* typography */
.display{letter-spacing:-.032em}
.display--xl{line-height:.94;letter-spacing:-.04em}
.head .display{max-width:20ch}
.lede{font-size:clamp(1.0625rem,1.3vw,1.25rem);line-height:1.5;letter-spacing:-.012em;max-width:36ch}
.hero__copy .lede{margin-top:1.5rem;color:rgba(28,18,22,.82)}

/* header: away on the way down, back on the way up */
.header{transition:transform .32s var(--ease-out),border-color .3s ease}
.header.hide{transform:translateY(-100%)}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .3s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.nav-links a:hover::after{transform:scaleX(1);transform-origin:left}}

/* scroll progress */
.progress{position:fixed;inset:0 0 auto;height:2px;z-index:120;background:var(--red);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}

/* hero: image settles, headline lines rise, the rest follows */
.hero__img{overflow:hidden}
.hero__img img{transform:scale(1.05);transition:transform 1.6s var(--ease-out)}
.is-loaded .hero__img img{transform:scale(1)}
.line-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.line-mask > span{display:block;transform:translateY(105%);transition:transform 1s var(--ease-out)}
.is-loaded .line-mask > span{transform:none}
.js .hero-enter{opacity:0;transform:translateY(12px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.is-loaded .hero-enter{opacity:1;transform:none}

/* reveals */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.js .rv.in{opacity:1;transform:none}
.mo .reveal{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease-io)}
.mo .reveal img{transform:scale(1.12);transition:transform 1.4s var(--ease-out)}
.mo .reveal.in{clip-path:inset(0 0 0 0)}
.mo .reveal.in img{transform:scale(1)}

/* break band: parallax inside a fixed frame */
.break-band img{position:absolute;inset:-8% 0;width:100%;height:116%;will-change:transform}
.break-band figcaption span{max-width:15ch}

/* receipts: no tags, a caption under each photo; drag to scroll */
.strip{cursor:grab;-webkit-user-select:none;user-select:none;overscroll-behavior-x:contain;scroll-snap-type:none}
.strip.dragging{cursor:grabbing}
.strip.dragging a,.strip.dragging img{pointer-events:none}
.rc{transform:none!important;margin-top:0!important}
.rc--photo{background:none;box-shadow:none;aspect-ratio:auto;overflow:visible;width:clamp(240px,22vw,300px)}
.rc--photo .ph{aspect-ratio:3/4;overflow:hidden;border-radius:2px;background:var(--ink)}
.rc--photo .ph img{width:100%;height:100%;object-fit:cover}
.rc--photo figcaption{display:flex;justify-content:space-between;gap:1rem;padding-top:.75rem;font-size:.875rem}
.rc--photo figcaption span{color:var(--ink-55)}
.rc--photo figcaption b{font-weight:600;color:var(--red)}
.rc--wa,.rc--q{box-shadow:none}
.rc--q{aspect-ratio:3/4;display:flex;flex-direction:column;justify-content:space-between;width:clamp(240px,22vw,300px)}
.rc--q p{font-size:clamp(1.75rem,2.3vw,2.25rem);line-height:1.02;letter-spacing:-.028em;text-wrap:balance}

/* faq: height animates in JS; icon is a drawn plus */
.faq-body{overflow:hidden;padding-bottom:0}
.faq-body > div{padding:0 0 1.5rem 4rem;max-width:calc(66ch + 4rem)}
.faq details[open] summary{color:var(--red)}

/* small presses */
.pace button{transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.pace button:active,.split a:active{transform:scale(.97)}

@media (max-width:1024px){
  .head > .label,.head > :not(.label){grid-column:1/-1}
  .head > .label{padding-top:0}
  .faq,.faq-alt{margin-left:0}
  .calc-panel,.calc-right{grid-column:1/-1}
}
@media (max-width:760px){
  .inc-split__img,.inc-list,.blog-feat .ph,.blog-feat > div:last-child{grid-column:1/-1}
  .rc--photo,.rc--q{width:72vw}
  .faq-body > div{padding-left:3.25rem}
  .sticky-cta{transform:translateY(calc(100% + 24px));transition:transform .4s var(--ease-out)}
  .sticky-cta.on{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .js .rv,.mo .reveal,.mo .reveal img,.line-mask > span,.js .hero-enter{opacity:1!important;transform:none!important;clip-path:none!important}
}

/* no tags: step numbers are type, not chips */
.how-step .n,.how-step:first-child .n{font-family:var(--serif);font-size:3rem;line-height:.85;letter-spacing:-.04em;font-weight:400;padding:0;background:none;box-shadow:none;color:var(--ink)}
.how-step:first-child .n{color:var(--red)}

/* ============================================================
   READY — on the grid: photograph 7 cols, intake panel 5 cols
   ============================================================ */
.ready-sec{padding-bottom:clamp(3rem,6vw,5rem)}
.ready{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);min-height:0}
.ready-img{grid-column:1/8;aspect-ratio:4/5;max-height:860px;border-radius:2px;overflow:hidden}
.ready-img img{width:100%;height:100%;object-fit:cover}
.ready-panel{grid-column:8/13;border-radius:2px;background:var(--red);color:var(--paper);
  padding:clamp(1.5rem,2.6vw,2.5rem);display:flex;flex-direction:column;justify-content:space-between;gap:2.5rem}
.ready-top .label{color:rgba(255,253,251,.75)}
.ready-panel .display{color:var(--paper);margin:1rem 0 .9rem;max-width:11ch}
.ready-top p{font-size:var(--t-lede, 1.125rem);line-height:1.5;color:rgba(255,253,251,.88);max-width:30ch}
.ready-steps{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,253,251,.3)}
.ready-steps li{display:grid;grid-template-columns:2.75rem 1fr;gap:.75rem;padding:1rem 0;border-bottom:1px solid rgba(255,253,251,.18)}
.ready-steps span{font-family:var(--serif);font-size:1.5rem;line-height:1;letter-spacing:-.03em;color:rgba(255,253,251,.6)}
.ready-steps b{display:block;font-family:var(--serif);font-weight:400;font-size:1.375rem;line-height:1.05;letter-spacing:-.02em}
.ready-steps em{display:block;font-style:normal;font-size:.875rem;color:rgba(255,253,251,.78);margin-top:.25rem}
.ready-steps li:last-child em{color:var(--paper);font-weight:500}
.ready-cta{display:flex;flex-direction:column;align-items:stretch;gap:1rem}
.ready-cta .btn{background:var(--paper);color:var(--ink);box-shadow:none;margin:0}
.ready-cta > span{font-size:.875rem;color:rgba(255,253,251,.82)}
.ready-cta > span a{color:var(--paper);box-shadow:inset 0 -1px 0 rgba(255,253,251,.55);transition:box-shadow .2s ease}
@media (hover:hover) and (pointer:fine){
  .ready-cta .btn:hover{background:var(--ink);color:var(--paper)}
  .ready-cta > span a:hover{box-shadow:inset 0 -1px 0 var(--paper)}
}
@media (max-width:900px){
  .ready-img,.ready-panel{grid-column:1/-1}
  .ready-img{aspect-ratio:4/4.4}
}

/* ============================================================
   v5 — same palette, better used. Each colour keeps one job:
   bone ground · blush intimacy · cobalt studio · red action + key numbers
   · oxblood promo · plum ink type
   ============================================================ */
.label i{background:var(--red)}
.hero .label i,.how .label i{background:var(--ink)}
.spec:first-child .spec__n{color:var(--red)}

/* ---------- motion: no image wipe; images settle quietly ---------- */
.mo .reveal{clip-path:none!important;opacity:0;transition:opacity .9s var(--ease-out)}
.mo .reveal img{transform:none!important;transition:transform .9s var(--ease-out)}
.mo .reveal.in{opacity:1}
/* headings rise line by line as they arrive (hero on load) */
.line-mask > span{transform:translateY(105%)}
.is-loaded .hero .line-mask > span,[data-lines].in .line-mask > span{transform:none}
.is-loaded .line-mask > span{transform:translateY(105%)}
.is-loaded .hero .line-mask > span{transform:none}

/* ---------- treatment cards: the nerd line ---------- */
.card-spec{font-size:.8125rem;line-height:1.4;color:var(--ink-55);margin-top:.35rem;font-variant-numeric:tabular-nums}
.notes{margin-top:2rem;margin-left:var(--col4);font-size:.75rem;line-height:1.55;color:var(--ink-55);max-width:80ch}
.notes sup,.body sup{font-size:.7em;line-height:0;color:var(--red);font-weight:600}

/* ---------- spec sheet: big numbers on a hairline grid ---------- */
.specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap);border-top:1px solid var(--line)}
.spec{padding:1.5rem 0 1.75rem;position:relative;display:flex;flex-direction:column}
.spec + .spec::before{content:"";position:absolute;left:calc(var(--gap) / -2);top:1.5rem;bottom:1.75rem;width:1px;background:var(--line-soft)}
.spec__n{font-family:var(--serif);font-size:clamp(3.5rem,6vw,5.5rem);line-height:.85;letter-spacing:-.05em;font-variant-numeric:lining-nums;margin-bottom:1.75rem}

.spec h3{font-size:1rem;font-weight:600;letter-spacing:-.012em;margin-bottom:.4rem}
.spec p{font-size:.9375rem;line-height:1.55;color:var(--ink-75);max-width:30ch}

/* ---------- how it works: a timed timeline on cobalt ---------- */
.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);position:relative}
.timeline::before{content:"";position:absolute;left:0;right:0;top:7px;height:1px;background:var(--ink);transform-origin:0 50%;transform:scaleX(0);transition:transform 1.4s var(--ease-io)}
.timeline.in::before,.no-mo .timeline::before{transform:scaleX(1)}
.tl-step{position:relative;padding-top:2.25rem}
.tl-dot{position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;background:var(--cobalt);box-shadow:inset 0 0 0 1.5px var(--ink)}
.tl-step:first-child .tl-dot{background:var(--red);box-shadow:none}
.tl-time{display:inline-block;font-size:.8125rem;font-weight:600;font-variant-numeric:tabular-nums;margin-bottom:2.5rem}
.tl-step .n{display:block;font-family:var(--serif);font-size:3.25rem;line-height:.85;letter-spacing:-.04em;color:rgba(33,22,15,.35);margin-bottom:.75rem}
.tl-step h3{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1;letter-spacing:-.026em;margin-bottom:.6rem}
.tl-step p{font-size:.9375rem;line-height:1.55;color:var(--ink-75);max-width:32ch}

/* ---------- small interaction polish ---------- */
@media (hover:hover) and (pointer:fine){
  .driver-cap h3{transition:color .2s ease}
  .driver:hover .driver-cap h3{color:var(--red)}
  .spec:hover .spec__n{color:var(--red)}
  .spec__n{transition:color .25s ease}
}

@media (max-width:1024px){
  .specs{grid-template-columns:1fr 1fr;row-gap:0}
  .spec:nth-child(3)::before{display:none}
  .notes{margin-left:0}
}
@media (max-width:760px){
  .specs{grid-template-columns:1fr}
  .spec::before{display:none}
  .spec{border-bottom:1px solid var(--line-soft)}
  .timeline{grid-template-columns:1fr;gap:2.5rem;padding-left:1.75rem}
  .timeline::before{left:7px;right:auto;top:0;bottom:0;width:1px;height:auto;transform-origin:50% 0;transform:scaleY(0)}
  .timeline.in::before{transform:scaleY(1)}
  .tl-step{padding-top:0}
  .tl-dot{left:-1.75rem}
  .tl-time{margin-bottom:1rem}
}
@media (prefers-reduced-motion:reduce){
  .line-mask > span,.mo .reveal{transform:none!important;opacity:1!important}
  .timeline::before{transform:none!important}
}

/* ============================================================
   v5.1 — readability pass (WCAG AA: 4.5:1 body, 3:1 large).
   Opacity is used for hierarchy only where the result still passes.
   ============================================================ */
:root{
  --ink-55:rgba(28,18,22,.70);     /* was .58 → 4.1:1, now ≈5.6:1 on bone */
  --ink-40:rgba(28,18,22,.58);     /* was .44 → 2.8:1, now ≈4.6:1 */
  --red-text:#B0162D;              /* red for small type on light grounds: ≈6.3:1 */
}
.label--red,.driver-cap .label,.card-price b,.rc--photo figcaption b,.calc-cell:last-child .calc-val,.notes sup,.body sup{color:var(--red-text)}
.tl-step .n{color:rgba(28,18,22,.6)}
.how{--ink-55:rgba(28,18,22,.84);--ink-75:rgba(28,18,22,.9)}
/* red panel: solid type, hierarchy by size and weight, not by fading */
.ready-top .label,.ready-top p,.ready-steps em,.ready-cta > span{color:var(--paper)}
.ready-steps span{color:rgba(255,253,251,.85)}
.ready-steps em{opacity:1}
/* footer on cobalt */
.footer{--fm:rgba(28,18,22,.86)}
.footer__cta h2 span{color:var(--oxblood)}
.fbox{background:color-mix(in srgb,var(--bone) 62%,transparent)}
.flegal p{color:rgba(28,18,22,.88)}
.hero__props b{color:rgba(28,18,22,.8)}

.card-price s{color:var(--ink-55)}

/* ============================================================
   JOURNAL — index and articles
   ============================================================ */
.blog-hero{padding-top:clamp(3rem,6vw,5rem)}
.blog-hero .display--xl{max-width:14ch}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 clamp(2rem,4vw,3rem) var(--col4)}
.filters button{height:38px;padding:0 .9rem;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line);font-size:.875rem;font-weight:500;color:var(--ink-75);
  transition:background-color .2s ease,color .2s ease,transform .16s var(--ease-out)}
.filters button:active{transform:scale(.97)}
.filters button.on{background:var(--ink);color:var(--bone);box-shadow:none}
@media (hover:hover) and (pointer:fine){.filters button:not(.on):hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}}

.post-feat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:end;margin-bottom:clamp(3rem,6vw,5rem)}
.post-feat .ph{grid-column:1/8;aspect-ratio:16/10;overflow:hidden;border-radius:2px;background:var(--blush)}
.post-feat .ph img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.post-feat > div:last-child{grid-column:8/13;display:flex;flex-direction:column;align-items:flex-start;gap:.9rem}
.post-feat h2{font-family:var(--serif);font-weight:400;font-size:var(--t-title);line-height:1.04;letter-spacing:-.026em;text-wrap:balance}
.post-feat p{font-size:1rem;line-height:1.55;color:var(--ink-75);max-width:40ch}

.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2.5rem,4vw,3.5rem) var(--gap)}
.post{display:flex;flex-direction:column}
.post[hidden]{display:none}
.post .ph{aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--blush)}
.post img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease-out)}
.post .label{margin:1rem 0 .5rem}
.post h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.375rem,1.8vw,1.75rem);line-height:1.06;letter-spacing:-.022em;text-wrap:balance;transition:color .2s ease}
.post p{font-size:.9375rem;line-height:1.55;color:var(--ink-75);margin-top:.5rem;max-width:42ch}
@media (hover:hover) and (pointer:fine){
  .post:hover img,.post-feat:hover .ph img{transform:scale(1.03)}
  .post:hover h3{color:var(--red)}
  .post-feat:hover .btn{background:var(--ink);color:var(--bone)}
}

/* article */
.art{padding-top:clamp(3rem,6vw,5rem);padding-bottom:0}
.art .head .label a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--line)}
.art__title{font-size:clamp(2.5rem,5.4vw,5rem);line-height:.98;letter-spacing:-.036em;max-width:18ch}
.art .lede{max-width:44ch}
.art__meta{font-size:.8125rem;color:var(--ink-55);font-variant-numeric:tabular-nums}
.art__img{margin:0 0 clamp(2.5rem,5vw,4.5rem);aspect-ratio:16/8;overflow:hidden;border-radius:2px;background:var(--blush)}
.art__img img{width:100%;height:100%;object-fit:cover}
.art__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:start}
.art__aside{grid-column:1/4;position:sticky;top:calc(var(--header) + 24px);display:flex;flex-direction:column;gap:var(--gap)}
.tldr{background:var(--blush);padding:1.25rem 1.25rem 1.4rem;border-radius:2px}
.tldr ol{margin:.9rem 0 0;padding-left:1.1rem;font-size:.9375rem;line-height:1.5}
.tldr li{margin-bottom:.6rem}
.tldr li::marker{color:var(--red);font-weight:600}
.doctor{font-size:.875rem;line-height:1.5;color:var(--ink-75);padding-left:1rem;border-left:2px solid var(--red)}
.doctor b{color:var(--ink)}
.art__body{grid-column:4/11;max-width:66ch}
.art__body > p{font-size:clamp(1.0625rem,1.2vw,1.1875rem);line-height:1.7;letter-spacing:-.008em;color:rgba(28,18,22,.88);margin-bottom:1.25em}
.art__body > p:first-child::first-line{font-weight:500;color:var(--ink)}
.art__body h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.75rem,2.4vw,2.25rem);line-height:1.06;letter-spacing:-.026em;margin:2.25em 0 .7em;text-wrap:balance}
.art__body blockquote{margin:2em 0;padding:.1em 0 .1em 1.25rem;border-left:3px solid var(--red);
  font-family:var(--serif);font-size:clamp(1.5rem,2.4vw,2.125rem);line-height:1.12;letter-spacing:-.024em;text-wrap:balance}
.art__body sup{font-size:.68em;line-height:0;color:var(--red-text);font-weight:600;margin-left:.05em}
.sources{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line)}
.sources ol{margin:1rem 0 0;padding-left:1.25rem;font-size:.8125rem;line-height:1.55;color:var(--ink-75)}
.sources li{margin-bottom:.55rem}
.sources li::marker{color:var(--red-text);font-weight:600}

.art-next{padding-top:var(--sec)}
.art-cta{background:var(--cobalt);border-radius:2px;padding:clamp(2rem,5vw,4rem);display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:1rem var(--gap);align-items:end}
.art-cta .display{grid-column:1/7}
.art-cta p{grid-column:7/13;font-size:var(--t-lede);line-height:1.5;max-width:36ch}
.art-cta__btns{grid-column:7/13;display:flex;flex-wrap:wrap;gap:.6rem}
.art-cta .btn:not(.btn--red){box-shadow:inset 0 0 0 1px rgba(28,18,22,.45)}

@media (max-width:1024px){
  .filters{margin-left:0}
  .post-feat .ph,.post-feat > div:last-child{grid-column:1/-1}
  .posts{grid-template-columns:1fr 1fr}
  .art__aside{grid-column:1/-1;position:static;order:2}
  .art__body{grid-column:1/-1}
  .art-cta .display,.art-cta p,.art-cta__btns{grid-column:1/-1}
}
@media (max-width:760px){
  .posts{grid-template-columns:1fr}
  .art__img{aspect-ratio:4/3.4;margin-inline:calc(var(--pad) * -1);border-radius:0}
}
.post-feat[hidden]{display:none}

/* ============================================================
   CALCULATOR v2 — sliders, big readout, projection curve
   ============================================================ */
.calc2{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:stretch}
.calc2__ctl{grid-column:1/6;display:flex;flex-direction:column;gap:1.6rem;padding-top:.25rem}
.sl__top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:.7rem}
.sl label{font-size:.9375rem;font-weight:500}
.sl output{font-family:var(--serif);font-size:1.75rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums lining-nums}
.sl input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer;margin:0;--p:50%}
.sl input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--ink) var(--p),var(--line) var(--p))}
.sl input[type=range]::-moz-range-track{height:2px;background:var(--line)}
.sl input[type=range]::-moz-range-progress{height:2px;background:var(--ink)}
.sl input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border-radius:50%;background:var(--paper);box-shadow:inset 0 0 0 2px var(--ink),0 2px 6px rgba(28,18,22,.18);transition:transform .16s var(--ease-out)}
.sl input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.sl input[type=range]:active::-webkit-slider-thumb{transform:scale(1.15)}
.sl input[type=range]:focus-visible{outline:none}
.sl input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:inset 0 0 0 2px var(--ink),0 0 0 4px rgba(211,32,58,.3)}
.calc2 .pace{margin-top:.25rem}
.calc2 .calc-note{margin-top:auto}
.calc2__out{grid-column:6/13;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-soft);border-radius:2px;padding:clamp(1.25rem,2.6vw,2.25rem);display:flex;flex-direction:column}
.calc2__big{font-family:var(--serif);font-size:clamp(3rem,6vw,5.25rem);line-height:.9;letter-spacing:-.045em;font-variant-numeric:tabular-nums lining-nums}
.calc2__big span:first-child{color:var(--red)}
.calc2__big small{font-family:var(--sans);font-size:1rem;letter-spacing:0;color:var(--ink-55);margin:0 .5rem 0 .35rem;vertical-align:.6em}
.calc2__bmi{font-size:.875rem;color:var(--ink-55);margin-top:.75rem;font-variant-numeric:tabular-nums}
.calc2__chart{width:100%;height:clamp(150px,16vw,220px);margin-top:1.5rem;overflow:visible}
.calc2__chart .g{stroke:var(--ink);stroke-width:1;stroke-dasharray:4 5;opacity:.45;vector-effect:non-scaling-stroke}
.calc2__chart .a{fill:var(--blush);opacity:.75}
.calc2__chart .l{fill:none;stroke:var(--red);stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.calc2__chart .d0{fill:var(--ink)}
.calc2__chart .d1{fill:var(--red)}
.calc2__axis{display:flex;justify-content:space-between;font-size:.75rem;color:var(--ink-55);margin-top:.5rem;font-variant-numeric:tabular-nums}
.calc2__cells{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:1.25rem}
.calc2__cells > div{padding:1rem 0 .25rem}
.calc2__cells > div + div{padding-left:1rem;border-left:1px solid var(--line-soft)}
.calc2__cells b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.5rem,2.2vw,2rem);letter-spacing:-.03em;margin-top:.35rem;font-variant-numeric:tabular-nums lining-nums}
.calc2__cells > div:last-child b{color:var(--red-text)}
.calc2 .calc-foot{margin-top:1.5rem}

/* ============================================================
   READY v2 — copy + a live preview of the intake
   ============================================================ */
.ready2{background:var(--blush)}
.ready2__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);align-items:center}
.ready2__copy{grid-column:1/6;display:flex;flex-direction:column;align-items:flex-start;gap:1.25rem}
.ready2__copy .display{max-width:11ch}
.ready2__facts{list-style:none;margin:.5rem 0 0;padding:1.1rem 0 0;display:grid;grid-template-columns:repeat(3,auto);gap:1.75rem;border-top:1px solid var(--line);width:100%}
.ready2__facts b{display:block;font-family:var(--serif);font-weight:400;font-size:2.5rem;line-height:.9;letter-spacing:-.04em}
.ready2__facts span{font-size:.8125rem;color:var(--ink-55)}
.ready2__wa{font-size:.9375rem;color:var(--ink-75)}
.ready2__wa a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.ix-preview{grid-column:7/13;background:var(--paper);border-radius:4px;overflow:hidden;
  box-shadow:0 1px 0 rgba(28,18,22,.04),0 30px 60px -30px rgba(91,18,34,.35),0 0 0 1px var(--line-soft)}
.ix-preview__bar{position:relative;display:flex;justify-content:space-between;align-items:center;padding:.9rem 1.25rem;border-bottom:1px solid var(--line-soft);font-size:.8125rem;color:var(--ink-55)}
.ix-preview__bar .brand{font-size:1.25rem;color:var(--ink)}
.ix-preview__bar i{position:absolute;left:0;bottom:-1px;height:2px;width:14%;background:var(--cobalt)}
.ix-preview__body{padding:1.5rem 1.25rem 1.25rem;display:flex;flex-direction:column;gap:8px}
.ix-preview__q{font-family:var(--serif);font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.05;letter-spacing:-.026em;margin-bottom:.75rem}
.ix-preview__foot{display:flex;justify-content:space-between;align-items:center;height:52px;padding:0 1.25rem;background:var(--red);color:var(--paper);font-weight:500;transition:background-color .2s ease}
.ix-preview__foot i,.ix-go{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;transition:transform .25s var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .ix-preview__foot:hover{background:var(--red-deep)}
  .ix-preview__foot:hover i{transform:translateX(3px)}
}

/* ============================================================
   INTAKE — one question per screen, after systemlabs.com/intake
   ============================================================ */
.ix-opt{display:flex;align-items:center;gap:1rem;width:100%;text-align:left;min-height:72px;padding:0 1rem 0 0;border-radius:2px;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);overflow:hidden;
  transition:box-shadow .18s ease,background-color .18s ease,transform .16s var(--ease-out)}
.ix-opt:active{transform:scale(.985)}
.ix-thumb{flex:0 0 72px;width:72px;height:72px;overflow:hidden;background:var(--blush)}
.ix-thumb img{width:100%;height:100%;object-fit:cover}
.ix-txt{flex:1;display:flex;flex-direction:column;gap:.1rem;padding:.9rem 0}
.ix-txt b{font-weight:500;font-size:1rem;letter-spacing:-.01em}
.ix-txt small{font-size:.8125rem;color:var(--ink-55)}
.ix-go{margin-left:auto;color:var(--ink-40)}
.ix-tick{flex:0 0 22px;width:22px;height:22px;margin-left:1.1rem;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink-40);position:relative;transition:background-color .18s ease,box-shadow .18s ease}
.ix-tick.sq{border-radius:3px}
.ix-opt.on{box-shadow:inset 0 0 0 2px var(--ink)}
.ix-opt.on .ix-tick{background:var(--red);box-shadow:none}
.ix-opt.on .ix-tick::after{content:"";position:absolute;left:7px;top:4px;width:6px;height:11px;border:solid var(--paper);border-width:0 2px 2px 0;transform:rotate(45deg)}
.ix-opt.on .ix-thumb{box-shadow:inset -2px 0 0 var(--ink)}
@media (hover:hover) and (pointer:fine){
  .ix-opt:hover{box-shadow:inset 0 0 0 1px var(--ink)}
  .ix-opt.on:hover{box-shadow:inset 0 0 0 2px var(--ink)}
  a.ix-opt:hover .ix-go{transform:translateX(3px);color:var(--ink)}
}

.intake-page{min-height:100svh;display:flex;flex-direction:column;background:var(--bone)}
.ix-bar{position:sticky;top:0;z-index:10;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;height:64px;
  padding:0 clamp(16px,3vw,32px);background:color-mix(in srgb,var(--bone) 92%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.ix-bar .brand{font-size:1.75rem;justify-self:start}
.ix-count{font-size:.8125rem;color:var(--ink-55);font-variant-numeric:tabular-nums}
.ix-nav{justify-self:end;display:flex;align-items:center;gap:6px}
.ix-arrow{width:36px;height:36px;border-radius:2px;box-shadow:inset 0 0 0 1px var(--line);display:grid;place-items:center;transition:background-color .2s ease,transform .16s var(--ease-out)}
.ix-arrow:active{transform:scale(.95)}
.ix-arrow:disabled{opacity:.35;cursor:default}
.ix-arrow i{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.ix-arrow i.l{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.ix-arrow:not(:disabled):hover{background:var(--ink);color:var(--bone)}}
.ix-close{margin-left:.6rem;font-size:.875rem;font-weight:500;color:var(--ink-75)}
.ix-progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--line-soft)}
.ix-progress i{position:absolute;inset:0;background:var(--cobalt);transform-origin:0 50%;transform:scaleX(0);transition:transform .5s var(--ease-out)}
.ix-main{flex:1;display:flex;justify-content:center;padding:clamp(2rem,6vh,4.5rem) 20px 9rem}
.ix-step{width:min(560px,100%);display:flex;flex-direction:column;align-items:stretch}
.ix-step > .label{margin-bottom:1rem}
.ix-q{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4vw,3rem);line-height:1.02;letter-spacing:-.032em;text-wrap:balance}
.ix-sub{font-size:1rem;line-height:1.55;color:var(--ink-75);margin-top:.9rem;max-width:44ch}
.ix-opts{display:flex;flex-direction:column;gap:8px;margin-top:2rem}
.ix-opts--grid{display:grid;grid-template-columns:1fr 1fr}
.ix-switch{font-size:.875rem;color:var(--ink-55);margin-top:1.5rem}
.ix-switch a{color:var(--ink);box-shadow:inset 0 -1px 0 var(--ink)}
.ix-fields{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:2rem}
.ix-fields--2{grid-template-columns:1fr 1fr}
.ix-field label{display:block;font-size:.875rem;font-weight:500;margin-bottom:.45rem}
.ix-input{display:flex;align-items:center;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;transition:box-shadow .18s ease}
.ix-input:focus-within,.ix-field > input:focus{box-shadow:inset 0 0 0 2px var(--ink)}
.ix-input input,.ix-field > input{flex:1;min-width:0;width:100%;height:56px;border:0;background:transparent;padding:0 .9rem;font-family:var(--serif);font-size:1.5rem;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ix-field > input{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;font-family:var(--sans);font-size:1.0625rem;letter-spacing:-.01em}
.ix-input input:focus,.ix-field > input:focus{outline:0}
.ix-input span{padding:0 .9rem;font-size:.875rem;color:var(--ink-55)}
.ix-bmi{margin-top:1.1rem;font-size:.9375rem;color:var(--ink-75)}
.ix-bmi b{font-family:var(--serif);font-weight:400;font-size:1.375rem;color:var(--ink)}
.ix-foot{position:fixed;left:0;right:0;bottom:0;z-index:10;padding:16px 20px calc(16px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bone) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--line-soft);display:flex;flex-direction:column;align-items:center;gap:.6rem}
.ix-foot[hidden]{display:none}
.ix-continue{width:min(560px,100%);height:56px;display:flex;justify-content:space-between;align-items:center;padding:0 1.25rem;border-radius:2px;
  background:var(--red);color:var(--paper);font-size:1rem;font-weight:500;transition:background-color .2s ease,opacity .2s ease,transform .16s var(--ease-out)}
.ix-continue i{width:0;height:0;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor}
.ix-continue:active:not(:disabled){transform:scale(.985)}
.ix-continue:disabled{background:var(--ink-40);cursor:not-allowed}
@media (hover:hover) and (pointer:fine){.ix-continue:not(:disabled):hover{background:var(--red-deep)}}
.ix-legal{font-size:.75rem;color:var(--ink-55);text-align:center}
.ix-plan{margin-top:2rem;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);border-radius:2px;overflow:hidden}
.ix-plan__hd{display:flex;justify-content:space-between;align-items:baseline;padding:1.1rem 1.25rem;background:var(--cobalt)}
.ix-plan__hd span{font-size:.8125rem;font-weight:500}
.ix-plan__hd b{font-family:var(--serif);font-weight:400;font-size:1.75rem;letter-spacing:-.03em}
.ix-plan__row{display:flex;justify-content:space-between;gap:1.5rem;padding:.9rem 1.25rem;border-top:1px solid var(--line-soft);font-size:.9375rem}
.ix-plan__row span{color:var(--ink-55)}
.ix-plan__row b{font-weight:500;text-align:right}
.ix-plan__row.strong b{font-family:var(--serif);font-weight:400;font-size:1.5rem;color:var(--red-text)}
.ix-plan__row s{font-family:var(--sans);font-size:.875rem;color:var(--ink-55);margin-left:.4rem}
.ix-note{margin-top:1.25rem;padding:1rem 1.15rem;border-left:3px solid var(--red);background:var(--paper);font-size:.9375rem;line-height:1.55}
.ix-fine{margin-top:1.25rem;font-size:.8125rem;color:var(--ink-55);line-height:1.55}
.ix-actions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:1.75rem}
.ix-result--stop .ix-q{color:var(--ink)}

@media (max-width:1024px){
  .calc2__ctl,.calc2__out{grid-column:1/-1}
  .ready2__copy,.ix-preview{grid-column:1/-1}
}
@media (max-width:600px){
  .ix-opts--grid{grid-template-columns:1fr}
  .ix-fields{grid-template-columns:1fr 1fr}
  .ix-fields .ix-field:last-child:nth-child(3){grid-column:1/-1}
  .ix-fields--2{grid-template-columns:1fr}
  .ix-count{display:none}
  .ix-bar{grid-template-columns:1fr auto}
  .calc2__cells b{font-size:1.25rem}
  .ready2__facts{gap:1rem}
  .ready2__facts b{font-size:2rem}
}
.ix-input input::-webkit-outer-spin-button,.ix-input input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.ix-input input[type=number]{-moz-appearance:textfield}