:root{
 /* ---- surfaces: three steps of elevation, not eight near-identical warm whites ---- */
 --bg:#F5F4F1;        /* the page */
 --card:#FFFFFF;      /* raised */
 --bg-2:#FAF9F6;      /* was #FBFAF6 #FBFAF8 #FDFCF9 #F7F6F3 */
 --bg-3:#F1EFE9;      /* was #F3F1EC #F3EEE3 #EFEDE8 */
 --line:#E7E4DE;      /* hairline */
 --line-2:#DDD9D0;    /* hairline, one step stronger (was also #E9E6DF) */

 /* ---- text ramp: every step clears WCAG AA on --bg and --card ---- */
 --ink:#1D1D1F;       /* 15.9:1  primary   */
 --muted:#5F5F64;     /*  5.78:1 secondary */
 --faint:#6E6E73;     /*  4.61:1 tertiary  */

 /* ---- accent: one gold per ground ---- */
 --accent:#8A5A00;    /* on light ground  5.39:1 */
 --accent-dk:#EFC26A; /* on dark ground  11.4:1  */
 --good:#167A44;--good-bg:#EDF6F0;--good-lite:#7ED9A7;--red:#C03B2B;

 /* ---- commerce: --pay / --pay-d are declared in the ROUND 4 block below, next to
    the rules that use them ---- */

 /* ---- type ---- */
 --fd:'Inter','Segoe UI',system-ui,sans-serif;--fb:'Inter','Segoe UI',system-ui,sans-serif;
 --fm:'JetBrains Mono',Consolas,ui-monospace,monospace;

 /* ---- type scale: 9 steps, was 30 loose values ---- */
 --t-3xs:10.5px;--t-2xs:12px;--t-xs:13.5px;--t-sm:15px;--t-base:17px;
 --t-md:19px;--t-lg:24px;--t-xl:31px;--t-2xl:52px;

 /* ---- display type: 5 fluid steps, was 16 near-identical clamp() ramps ---- */
 --d-xs:clamp(1rem,1.6vw,1.25rem);--d-sm:clamp(1.35rem,2.7vw,1.8rem);--d-md:clamp(1.55rem,3vw,2.1rem);--d-lg:clamp(1.9rem,3.6vw,2.5rem);--d-xl:clamp(2.5rem,6.2vw,4.6rem);

 /* ---- radii: 6 steps, was 22 ---- */
 --r-xs:8px;--r-sm:12px;--r:18px;--r-lg:26px;--r-xl:36px;--r-pill:999px;

 /* ---- dark ground (was a third :root further down the file) ---- */
 --dark:#101113;--glassb:rgba(255,255,255,.10);

 /* ---- breakpoints (documented; media queries cannot read vars) ----
    phone 560 · tablet 760 · laptop 940 */
 --wrap:1320px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--fb);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--ink)}
h1,h2,h3{font-family:var(--fd);margin:0;text-wrap:balance;letter-spacing:-.022em}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px}
::selection{background:#1D1D1F;color:#fff}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(245,244,241,.85);
 backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.nav-in{max-width:var(--wrap);margin:0 auto;padding:0 22px;height:56px;display:flex;align-items:center;gap:22px}
.nav .mark{width:26px;height:26px;color:var(--ink)}
.nav a.home{display:flex;align-items:center;gap:9px;font:700 12px var(--fd);letter-spacing:.13em;text-decoration:none;color:var(--ink)}
.nav-links{display:flex;gap:20px;align-items:center;margin-left:auto}
.nav-links a{color:var(--muted);font-size:13.5px;text-decoration:none;font-weight:500}
.nav-links a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 15px var(--fd);
 padding:13px 26px;border-radius:999px;text-decoration:none;cursor:pointer;border:0;
 transition:transform .12s,box-shadow .2s,background .15s}
.btn:active{transform:scale(.985)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.btn.dark{background:var(--ink);color:#fff}
.btn.dark:hover{background:#000}
.btn.lite{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.lite:hover{border-color:var(--muted)}
.btn.sm{font-size:13.5px;padding:9px 18px}
.nav .btn{padding:8px 16px;font-size:13.5px}
/* hero */
.shop-hero{padding:150px 0 30px;text-align:center}
.shop-hero .kicker{font:600 13.5px var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 18px}
.shop-hero h1{font-size:var(--d-xl);font-weight:700;line-height:1.02}
.shop-hero .sub{color:var(--muted);font-size:var(--d-xs);max-width:44ch;margin:20px auto 0}
/* rails */
.rail-h{display:flex;align-items:baseline;gap:14px;margin:64px 0 4px}
.rail-h h2{font-size:var(--d-sm);font-weight:700}
.rail-h .note{color:var(--faint);font-size:13.5px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(320px,78vw);gap:16px;
 overflow-x:auto;padding:18px 22px 26px;scroll-snap-type:x mandatory;scrollbar-width:none;
 margin:0 -22px}
.rail::-webkit-scrollbar{display:none}
.rail > a{scroll-snap-align:start}
.pcard{background:var(--card);border-radius:var(--r);overflow:hidden;text-decoration:none;color:var(--ink);
 display:flex;flex-direction:column;border:1px solid var(--line);
 transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(29,29,31,.10)}
.pcard .im{aspect-ratio:16/10;background:var(--bg);overflow:hidden}
.pcard .im img{width:100%;height:100%;object-fit:cover}
.pcard .bd{padding:18px 20px 20px;display:flex;flex-direction:column;gap:4px;flex:1}
.pcard .nm{font:700 19px var(--fd);letter-spacing:-.015em}
.pcard .pl{color:var(--muted);font-size:13.5px;line-height:1.45}
.pcard .pr{margin-top:auto;padding-top:14px;font:600 13.5px var(--fd)}
.pcard .pr small{display:block;font:500 12px var(--fb);color:var(--accent);letter-spacing:.05em;text-transform:uppercase;margin-top:3px}
/* value strip */
.vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:70px 0 10px}
.val{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.val b{font:600 15px var(--fd);display:block;margin-bottom:4px}
.val span{color:var(--muted);font-size:13.5px}
/* product page */
.pp-bar{position:fixed;top:56px;left:0;right:0;z-index:40;background:rgba(255,255,255,.9);
 backdrop-filter:blur(14px);border-bottom:1px solid var(--line);transform:translateY(-110%);transition:transform .25s}
.pp-bar.on{transform:none}
.pp-bar .in{max-width:var(--wrap);margin:0 auto;padding:0 22px;height:52px;display:flex;align-items:center;gap:16px}
.pp-bar .n{font:700 15px var(--fd)}
.pp-bar .p{color:var(--muted);font-size:13.5px;margin-left:auto}
.pp-hero{padding:150px 0 0;text-align:center}
.pp-hero .stop{font:600 12px var(--fm);letter-spacing:.14em;color:var(--accent);text-transform:uppercase}
.pp-hero h1{font-size:var(--d-xl);font-weight:700;line-height:1.04;max-width:20ch;margin:14px auto 0}
.pp-hero .sub{color:var(--muted);font-size:var(--d-xs);max-width:52ch;margin:18px auto 26px}
.pp-hero .im{max-width:920px;margin:44px auto 0;border-radius:calc(var(--r) + 8px);overflow:hidden}
.pp-hero .meta{color:var(--faint);font-size:13.5px;margin-top:14px}
/* sections */
.sec{padding:76px 0}
.sec.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec h2{font-size:var(--d-md);font-weight:700}
.sec .lede{color:var(--muted);font-size:17px;max-width:62ch;margin:14px 0 0}
.k{font:600 12px var(--fd);letter-spacing:.14em;text-transform:uppercase;color:var(--faint);margin:0 0 12px}
.center{text-align:center}
.center .lede{margin-left:auto;margin-right:auto}
/* timetable light */
.timetable{background:#fff;border:1px solid var(--line);border-radius:var(--r);max-width:660px;margin:30px auto 0}
.tt-row{display:grid;grid-template-columns:88px 1fr;gap:16px;padding:14px 24px;border-bottom:1px solid var(--line);align-items:baseline;text-align:left}
.tt-row:last-child{border-bottom:0}
.tt-time{font:600 12px var(--fm);color:var(--faint)}
.tt-ev{font-size:15px}
.tt-row.lost .tt-ev{color:var(--red)}
.tt-row.won .tt-time,.tt-row.won .tt-ev{color:var(--good);font-weight:500}
/* calc light */
.calc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;max-width:720px;margin:30px auto 0;text-align:left}
.calc .sliders{display:grid;gap:20px;margin:6px 0 4px}
.srow label{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted);margin-bottom:8px}
.srow label output{font:600 13.5px var(--fm);color:var(--ink)}
.srow input[type=range]{width:100%;accent-color:var(--ink);height:22px;cursor:pointer}
.calc .result{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:18px 0 8px}
@media(max-width:560px){.calc .result{grid-template-columns:1fr}}
.calc .r-box{border-radius:12px;padding:16px 18px;border:1px solid var(--line)}
.calc .r-box .k{margin:0}
.calc .r-box .v{font:700 var(--d-md) var(--fd);letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.calc .lose{background:#FBF1EF}.calc .lose .k,.calc .lose .v{color:var(--red)}
.calc .cost{background:var(--bg-3)}.calc .cost .k,.calc .cost .v{color:var(--ink)}
.calc .verdict{font-size:15px;padding:14px 16px;border-radius:12px;border:1px solid var(--line);margin-top:6px}
.calc .verdict.yes{background:var(--good-bg);border-color:transparent;color:var(--good)}
.calc .verdict.no{background:var(--bg);color:var(--muted)}
.calc .fine{font-size:12px;color:var(--faint);margin:14px 0 0}
/* steps */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;counter-reset:step;margin-top:32px}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px;counter-increment:step;text-align:left}
.step::before{content:counter(step,decimal-leading-zero);font:700 12px var(--fm);color:var(--accent);display:block;margin-bottom:10px}
.step h3{font-size:15px;font-weight:600;margin-bottom:6px}
.step p{color:var(--muted);font-size:13.5px;margin:0}
/* tiers */
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:34px}
.price-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:6px;position:relative;text-align:left}
.price-card.hi{border:2px solid var(--ink)}
.price-card.hi::before{content:"MOST CHOSEN";position:absolute;top:-10px;left:24px;font:700 10.5px var(--fm);letter-spacing:.12em;background:var(--ink);color:#fff;padding:3px 10px;border-radius:999px}
.price-card .tname{font:700 12px var(--fm);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.price-card .pv{font:700 var(--d-lg)/1 var(--fd);letter-spacing:-.025em;margin:10px 0 2px}
.price-card .pv small{font:500 15px var(--fb);color:var(--muted);letter-spacing:0}
.price-card .reframe{color:var(--accent);font-size:13.5px;font-weight:600;margin:2px 0 14px}
.price-card ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:8px}
.price-card li{font-size:13.5px;color:var(--muted);padding-left:22px;position:relative}
.price-card li::before{content:"✓";position:absolute;left:2px;top:0;color:var(--good);font-weight:700;font-size:12px}
.price-card .btn{margin-top:auto}
.price-note{font-size:12px;color:var(--faint);margin-top:16px;max-width:72ch}
/* objections */
.obj{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:30px}
@media(max-width:760px){.obj{grid-template-columns:1fr}}
.obj-item{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;text-align:left}
.obj-item h3{font-size:15px;font-weight:600;margin-bottom:6px}
.obj-item p{color:var(--muted);font-size:13.5px;margin:0}
/* next stop */
.next{background:#fff;border-top:1px solid var(--line)}
.next .in{display:flex;gap:24px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:44px 0}
.next .k{margin:0 0 6px}
.next h2{font-size:var(--d-sm)}
.next p{color:var(--muted);margin:8px 0 0;max-width:52ch}
/* configurator light */
.builder{display:grid;grid-template-columns:1.4fr .9fr;gap:22px;align-items:start;margin-top:30px}
@media(max-width:940px){.builder{grid-template-columns:1fr}}
.q-chips{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0 0}
.q-chip{background:#fff;border:1px solid var(--line);color:var(--muted);font:500 13.5px var(--fb);padding:9px 16px;border-radius:999px;cursor:pointer;transition:all .15s}
.q-chip:hover{color:var(--ink);border-color:var(--muted)}
.q-chip.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(345px,100%),1fr));gap:10px}
.tile{min-width:0}
/* .tiles reflows intrinsically now — no breakpoint needed */
.tile{background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 15px;display:flex;gap:12px;align-items:center;transition:border-color .15s;position:relative}
.tile:hover{border-color:var(--muted)}
.tile.on{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset}
.tile input{accent-color:var(--ink);width:17px;height:17px;flex:none;margin:0;cursor:pointer}
.tile .t-name{font:600 13.5px var(--fd)}
.tile .t-sub{color:var(--faint);font-size:12px;line-height:1.35}
.tile .t-price{margin-left:auto;text-align:right;font:600 12px var(--fm);color:var(--muted);white-space:nowrap}
.tile .t-ttl{display:block;font-size:10.5px;color:var(--faint)}
.tile .t-hit{position:relative;z-index:1;display:flex;gap:12px;align-items:center;width:100%}
.receipt{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px;position:sticky;top:76px}
.receipt .r-eyebrow{font:600 10.5px var(--fm);letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin:0 0 10px}
.r-total{font:700 var(--d-lg)/1 var(--fd);letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.r-total small{font:500 15px var(--fb);color:var(--muted)}
.r-rows{margin:16px 0 4px;border-top:1px solid var(--line)}
.r-row{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.r-row b{font:600 13.5px var(--fm)}
.r-row .inc{color:var(--good)}
.r-kpis{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 0}
.r-kpi{background:var(--bg);border-radius:12px;padding:10px 12px}
.r-kpi .k{margin:0;font-size:10.5px}
.r-kpi .v{font:700 19px var(--fd);margin-top:2px;font-variant-numeric:tabular-nums}
.r-verdict{background:var(--bg);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--muted)}
.r-verdict.hit{background:var(--bg-3);color:var(--accent)}
.r-note{font-size:10.5px;color:var(--faint);margin:12px 0 0;line-height:1.5}
/* footer */
footer{border-top:1px solid var(--line);padding:52px 0 44px;margin-top:70px}
.f-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:30px}
@media(max-width:940px){.f-grid{grid-template-columns:1fr 1fr}}
.f-grid h4{font:700 10.5px var(--fm);letter-spacing:.14em;color:var(--faint);text-transform:uppercase;margin:0 0 12px}
.f-grid a{display:block;color:var(--muted);font-size:13.5px;padding:3px 0;text-decoration:none}
.f-grid a:hover{color:var(--ink)}
.f-brand p{color:var(--faint);font-size:13.5px;max-width:34ch;margin:12px 0 0}
.f-legal{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);display:flex;gap:18px;flex-wrap:wrap;color:var(--faint);font-size:12px}
.f-legal a{color:var(--faint)}
/* 2026-08-31 audit: reveals used to fade from 0, so any renderer sampling mid-transition
   (accessibility scanners, Lighthouse, social scrapers) measured ~1.2:1 text contrast on
   whatever it caught mid-fade. Starting at .6 keeps the fade (the translate carries most
   of the perceived motion) while the blended colour never drops below AA at any frame. */
html.js .rv{opacity:.6;transform:translateY(16px);transition:opacity .5s ease-out,transform .5s ease-out}
html.js .rv.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){html.js .rv{opacity:1;transform:none;transition:none}}
/* product page V3: sticky rail + flow */
.pp{display:grid;grid-template-columns:340px 1fr;gap:44px;align-items:start;padding-top:130px}
@media(max-width:940px){.pp{grid-template-columns:1fr}}
.rail-l{position:sticky;top:90px}
@media(max-width:940px){.rail-l{position:static}}
.rail-l .stop{font:600 12px var(--fm);letter-spacing:.13em;color:var(--accent);text-transform:uppercase}
.rail-l h1{font-size:var(--d-lg);line-height:1.05;margin:12px 0 6px}
.rail-l .plain{color:var(--muted);font-size:13.5px}
.rail-l .price{font:600 24px var(--fd);margin:18px 0 2px}
.rail-l .price small{font:500 13.5px var(--fb);color:var(--muted)}
.rail-l .ttl{color:var(--accent);font:600 12px var(--fb);letter-spacing:.08em;text-transform:uppercase;margin:2px 0 18px}
.rail-l ul{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:7px}
.rail-l li{font-size:13.5px;color:var(--muted);padding-left:20px;position:relative}
.rail-l li::before{content:"—";position:absolute;left:0;color:var(--accent)}
.rail-l .btn{width:100%}
.rail-l .alt-tiers{margin-top:14px;font-size:12px;color:var(--faint)}
.rail-l .alt-tiers a{color:var(--muted)}
.flow > *{margin-bottom:64px}
.flow .im{border-radius:var(--r);overflow:hidden}
.flow h2{font-size:var(--d-md);margin-bottom:14px}
.flow .k{font:600 12px var(--fb);letter-spacing:.15em;text-transform:uppercase;color:var(--faint);margin:0 0 10px}

/* ===== V5 round-3 ===== */
/* --wrap/--dark/--glassb now live in the :root above */
.serif{font-family:var(--fd);font-weight:700;letter-spacing:-.022em}
.rail-l h1{font-family:var(--fd);font-weight:700;letter-spacing:-.025em}
.sec{padding:56px 0}
.sec.alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.shop-hero{padding:120px 0 20px}
/* ---- nav: logo left · links centered · actions right ---- */
.nav-in{height:58px;display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center}
.nav-in > .home{grid-column:1;justify-self:start}
.nav-center{grid-column:2;display:flex;gap:22px;align-items:center;justify-self:center}
.nav-actions{grid-column:3;display:flex;gap:10px;align-items:center;justify-self:end}
.mwrap{position:static}
.mtop{color:var(--muted);font-size:13.5px;text-decoration:none;font-weight:500;padding:19px 2px;display:inline-block;white-space:nowrap}
.mtop:hover{color:var(--ink)}
.mega{position:absolute;left:0;right:0;top:58px;background:rgba(245,244,241,.98);backdrop-filter:blur(18px);
 border-bottom:1px solid var(--line);display:none}
.mwrap:hover .mega,.mwrap:focus-within .mega{display:block}
.mega-in{max-width:var(--wrap);margin:0 auto;padding:34px 22px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.mhead{display:block;font:600 12px var(--fb);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-bottom:14px}
.mbig{display:block;font:700 24px/1.35 var(--fd);letter-spacing:-.02em;color:var(--ink);text-decoration:none;padding:3px 0}
.mbig:hover{color:var(--accent)}
.msmall{display:block;font:500 13.5px/1.4 var(--fb);color:var(--muted);text-decoration:none;padding:4px 0}
.msmall:hover{color:var(--ink)}
.nav{overflow:visible}
.cartbtn{position:relative;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;
 display:grid;place-items:center;cursor:pointer;color:var(--ink)}
.cartbtn:hover{border-color:var(--ink)}
.cartbtn svg{width:18px;height:18px}
.cartbtn .n{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;border-radius:999px;background:var(--ink);
 color:#fff;font:700 10.5px/17px var(--fb);text-align:center;padding:0 4px;display:none}
.cartbtn .n.on{display:block}
.hamb{display:none;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.45);
 backdrop-filter:blur(14px) saturate(1.5);-webkit-backdrop-filter:blur(14px) saturate(1.5);
 box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),
  inset 3px 3px .5px -3px rgba(0,0,0,.55),inset -3px -3px .5px -3px rgba(0,0,0,.5),
  inset 0 0 6px 6px rgba(0,0,0,.06),0 0 12px rgba(255,255,255,.6);
 cursor:pointer;place-items:center;color:var(--ink);transition:transform .15s,background .15s}
.hamb:hover{transform:scale(1.07);background:rgba(255,255,255,.6)}
.hamb svg{width:18px;height:18px}
@media(max-width:940px){
  .nav-center{display:none}
  .hamb{display:grid}
  .navbtn{display:none}
}
.msheet{position:fixed;inset:58px 0 auto 0;z-index:60;background:#fff;border-bottom:1px solid var(--line);
 padding:18px 22px 26px;display:none;box-shadow:0 30px 60px rgba(0,0,0,.12);max-height:calc(100vh - 58px);overflow:auto}
.msheet.open{display:block}
.msheet a{display:block;padding:12px 4px;font:600 15px var(--fb);color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line)}
.msheet a:last-child{border-bottom:0}
/* ---- shelves as full grids ---- */
.shelf-h{display:flex;align-items:baseline;gap:14px;margin:44px 0 14px}
.shelf-h h2{font-size:var(--d-sm);font-weight:700}
.shelf-h .note{color:var(--faint);font-size:13.5px}
.shelf{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.shelf.c3{grid-template-columns:repeat(3,1fr)}
@media(max-width:940px){.shelf,.shelf.c3{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.shelf,.shelf.c3{grid-template-columns:1fr}}
.pcard{background:var(--card);border-radius:var(--r);overflow:hidden;color:var(--ink);
 display:flex;flex-direction:column;border:1px solid var(--line);
 transition:transform .25s cubic-bezier(.2,.7,.3,1),box-shadow .25s}
.pcard:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(29,29,31,.10)}
.pcard .im{aspect-ratio:16/10;background:var(--bg);overflow:hidden}
.pcard .im img{width:100%;height:100%;object-fit:cover}
.pcard .bd{padding:16px 18px 18px;display:flex;flex-direction:column;gap:4px;flex:1;text-align:center}
.pcard .nm{font:700 19px var(--fd);letter-spacing:-.015em}
.pcard .pl{color:var(--muted);font-size:13.5px;line-height:1.45;min-height:2.6em}
.pcard .acts{display:flex;gap:8px;justify-content:center;margin-top:12px}
.pcard .acts .lm{font:600 13.5px var(--fb);color:var(--accent);text-decoration:none;padding:9px 6px}
.pcard .acts .lm:hover{text-decoration:underline}
/* ---- glass button (liquid port) ---- */
.btn.dark{background:var(--ink);color:#fff;position:relative;
 box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 -2px 6px rgba(0,0,0,.35),
  0 2px 6px rgba(0,0,0,.14), 0 10px 24px rgba(29,29,31,.18)}
.btn.dark:hover{background:#000;box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 6px rgba(0,0,0,.4),
  0 4px 10px rgba(0,0,0,.18), 0 14px 30px rgba(29,29,31,.22)}
.btn.lite{box-shadow:inset 0 1px 1px rgba(255,255,255,.9), 0 2px 8px rgba(29,29,31,.06)}
.addcart{background:var(--ink);color:#fff;border:0;border-radius:999px;font:600 13.5px var(--fb);
 padding:9px 18px;cursor:pointer;box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 -2px 5px rgba(0,0,0,.35), 0 2px 6px rgba(0,0,0,.12)}
.addcart:hover{background:#000}
.addcart.in{background:var(--good)}
/* ---- cart drawer ---- */
.cart-scrim{position:fixed;inset:0;background:rgba(20,20,22,.35);z-index:97;display:none}
.cart-scrim.open{display:block}
.cart{position:fixed;top:0;right:0;bottom:0;z-index:98;width:min(400px,100vw);background:#fff;
 border-left:1px solid var(--line);transform:translateX(105%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
 display:flex;flex-direction:column}
.cart.open{transform:none}
.cart .c-h{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--line)}
.cart .c-h b{font:700 17px var(--fd)}
.cart .c-x{background:none;border:0;font-size:24px;cursor:pointer;color:var(--faint);padding:4px 8px}
.cart .c-body{flex:1;overflow:auto;padding:14px 22px}
.c-item{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.c-item img{width:64px;height:44px;object-fit:cover;border-radius:8px}
.c-item .ci-n{font:600 15px var(--fd)}
.c-item .ci-p{color:var(--muted);font-size:12px}
.c-item .ci-x{margin-left:auto;background:none;border:0;color:var(--faint);cursor:pointer;font-size:15px;padding:6px}
.c-item .ci-x:hover{color:var(--red)}
.cart .c-foot{border-top:1px solid var(--line);padding:16px 22px 20px}
.cart .c-note{font-size:12px;color:var(--faint);margin:8px 0 12px;line-height:1.5}
.cart .c-nudge{background:var(--bg-3);color:var(--accent);border-radius:12px;padding:11px 14px;font-size:13.5px;margin-bottom:12px;display:none}
.cart .c-nudge.on{display:block}
.cart .c-empty{color:var(--faint);text-align:center;padding:44px 10px;font-size:13.5px}
/* ---- shimmer hero (gradient-shimmer port) ---- */
/* 2026-08-31 audit: the shimmer is retired. Two generations of stop-tuning (see the
   history in v5.js) never got the sweep's lightest band above the 3:1 large-text floor —
   the live page still measured 2.84:1 on the h1. A decorative effect that keeps failing
   the most-read line on the site loses the argument. Solid ink, permanently. */
.shimmer{color:var(--ink)}
/* ---- bundles glass band (pricing-glass port) ---- */
.bundles{background:var(--dark);color:var(--bg);border-top:1px solid var(--line);padding:72px 0}
.bundles .k{color:rgba(255,255,255,.52)}
.bundles h2{color:#fff}
.bundles .lede{color:rgba(255,255,255,.72)}
.bgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
@media(max-width:940px){.bgrid{grid-template-columns:1fr}}
.bcard{position:relative;border-radius:26px;padding:30px;display:flex;flex-direction:column;overflow:hidden;
 background:rgba(255,255,255,.04);backdrop-filter:blur(20px) saturate(1.6);
 border:1px solid rgba(255,255,255,.08);
 box-shadow:inset 0 1px 1px rgba(255,255,255,.15), 0 32px 64px -12px rgba(0,0,0,.6)}
.bcard.hi{border-color:rgba(255,255,255,.52);transform:translateY(-8px);
 box-shadow:inset 0 1px 1px rgba(255,255,255,.4), inset 0 -1px 1px rgba(255,255,255,.05), 0 32px 64px -12px rgba(0,0,0,.6), 0 0 80px rgba(255,255,255,.05)}
@media(max-width:940px){.bcard.hi{transform:none}}
.bcard .glow{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;border-radius:26px}
.bcard:hover .glow{opacity:1}
.bcard .tag{position:absolute;top:0;left:50%;transform:translateX(-50%);padding:4px 14px;font:600 10.5px var(--fb);
 color:rgba(255,255,255,.92);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-top:0;border-radius:0 0 12px 12px}
.bcard .bn{font:600 15px var(--fb);color:rgba(255,255,255,.92);letter-spacing:.04em}
.bcard .bp{font:700 52px/1 var(--fd);letter-spacing:-.03em;margin:14px 0 2px}
.bcard .bp small{font:500 15px var(--fb);color:rgba(255,255,255,.52)}
.bcard .bd2{color:rgba(255,255,255,.52);font-size:13.5px;margin:4px 0 18px}
.bcard .sep{height:1px;background:rgba(255,255,255,.1);margin-bottom:18px}
.bcard ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:9px;flex:1}
.bcard li{font-size:13.5px;color:rgba(255,255,255,.72);padding-left:26px;position:relative}
.bcard li::before{content:"\2713";position:absolute;left:0;top:0;width:17px;height:17px;border-radius:50%;
 background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.92);
 font-size:10.5px;font-weight:800;display:grid;place-items:center}
.bcard .bbtn{display:block;text-align:center;padding:15px;border-radius:12px;font:600 15px var(--fb);text-decoration:none;
 transition:transform .2s;box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}
.bcard .bbtn:hover{transform:scale(1.015)}
.bcard.hi .bbtn{background:#fff;color:#111}
.bcard:not(.hi) .bbtn{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.1)}
/* ---- integration marquee ---- */
.integ{padding:64px 0;border-top:1px solid var(--line);background:#fff;overflow:hidden}
.integ .center{text-align:center}
.irow{display:flex;gap:36px;white-space:nowrap;margin-top:28px;width:max-content;animation:integL 36s linear infinite}
.irow.r2{animation:integR 36s linear infinite;margin-top:20px}
@keyframes integL{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes integR{from{transform:translateX(-50%)}to{transform:translateX(0)}}
@media(prefers-reduced-motion:reduce){.irow,.irow.r2{animation:none;flex-wrap:wrap;width:auto;justify-content:center}}
.ichip{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:999px;
 padding:10px 18px 10px 12px;box-shadow:0 4px 14px rgba(29,29,31,.06)}
.ichip img{width:22px;height:22px;object-fit:contain}
.ichip span{font:600 13.5px var(--fb);color:var(--muted)}
.iwrap{position:relative}
.iwrap::before,.iwrap::after{content:"";position:absolute;top:0;bottom:0;width:110px;z-index:2;pointer-events:none}
.iwrap::before{left:0;background:linear-gradient(90deg,#fff,transparent)}
.iwrap::after{right:0;background:linear-gradient(270deg,#fff,transparent)}
/* ---- FAQ (faq-tabs port) ---- */
.faq{padding:72px 0}
.faq-tabs{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:26px 0 8px}
.faq-tab{border:1px solid var(--line);background:#fff;color:var(--muted);font:600 13.5px var(--fb);
 padding:8px 16px;border-radius:8px;cursor:pointer;transition:all .25s}
.faq-tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.faq-list{max-width:760px;margin:26px auto 0;display:grid;gap:10px}
.faq-item{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden}
.faq-q{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;background:none;border:0;
 padding:16px 20px;font:600 15px var(--fb);color:var(--ink);cursor:pointer;text-align:left}
.faq-q .pl{font-size:19px;color:var(--faint);transition:transform .2s;flex:none}
.faq-item.open .pl{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--muted);font-size:13.5px;padding:0 20px}
.faq-item.open .faq-a{max-height:220px;padding:0 20px 16px}
/* ---- footer (hover-footer port) ---- */
footer{border:0;padding:0;margin-top:64px}
.f-shell{background:var(--dark);border-radius:26px;margin:0 16px 16px;overflow:hidden;position:relative;color:rgba(255,255,255,.72)}
.f-in{max-width:var(--wrap);margin:0 auto;padding:54px 34px 30px;position:relative;z-index:2}
.f-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:30px}
@media(max-width:940px){.f-grid{grid-template-columns:1fr 1fr}}
.f-grid h4{font:700 10.5px var(--fm);letter-spacing:.14em;color:rgba(255,255,255,.52);text-transform:uppercase;margin:0 0 12px}
.f-grid a{display:block;color:rgba(255,255,255,.72);font-size:13.5px;padding:3px 0;text-decoration:none}
.f-grid a:hover{color:#fff}
.f-brand p{color:rgba(255,255,255,.52);font-size:13.5px;max-width:34ch;margin:12px 0 0}
.f-brand .home{color:#fff!important}
.f-soc{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.f-soc a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:rgba(255,255,255,.72);transition:all .2s}
.f-soc a:hover{color:#fff;border-color:#fff;transform:translateY(-2px)}
.f-soc svg{width:17px;height:17px}
.f-legal{margin-top:22px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);display:flex;gap:18px;flex-wrap:wrap;color:rgba(255,255,255,.72);font-size:12px}
.f-legal a{color:rgba(255,255,255,.72)}
.f-legal a:hover{color:#fff}
.f-mark{position:relative;z-index:1;margin:-10px 0 -40px;pointer-events:auto}
.f-mark svg{display:block;width:100%;height:auto}
.f-mark text{font-family:var(--fd);font-weight:800;letter-spacing:.02em;fill:transparent;
 stroke:rgba(255,255,255,.14);stroke-width:1;transition:stroke .4s}
.f-mark:hover text{stroke:#EFC26A}
/* ---- phone mock v2 (interactive iPhone) ---- */
.iphone{width:min(320px,100%);background:#0B0B0C;border-radius:36px;padding:12px 12px 16px;margin:16px 0;
 box-shadow:0 24px 60px rgba(0,0,0,.25), inset 0 1px 1px rgba(255,255,255,.15)}
.iphone .notch{width:110px;height:22px;background:#000;border-radius:0 0 12px 12px;margin:0 auto 8px}
.iphone .scr{background:var(--bg);border-radius:26px;min-height:300px;display:flex;flex-direction:column;overflow:hidden}
.iphone .thead{background:#fff;border-bottom:1px solid var(--line);padding:9px;text-align:center;font:600 12px var(--fb)}
.iphone .thead small{display:block;color:var(--faint);font-weight:500;font-size:10.5px}
.iphone .tbody{flex:1;padding:12px;display:flex;flex-direction:column;gap:8px;overflow:auto;max-height:260px}
.iphone .pm-b{max-width:86%;padding:8px 12px;border-radius:12px;font-size:13.5px;opacity:1;transform:none}
.iphone .chips{display:flex;gap:6px;flex-wrap:wrap;padding:0 12px 8px}
.iphone .chips button{border:1px solid var(--line);background:#fff;border-radius:999px;font:500 12px var(--fb);
 padding:6px 11px;cursor:pointer;color:var(--ink)}
.iphone .chips button:hover{border-color:var(--ink)}
.iphone .tin{display:flex;gap:8px;padding:8px 12px 12px}
.iphone .tin input{flex:1;border:1px solid var(--line);border-radius:999px;padding:9px 14px;font:13.5px var(--fb);background:#fff}
.iphone .tin button{width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;border:0;cursor:pointer;font-size:15px}
/* ---- slate month calendar ---- */
.mcal{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;margin:12px 0}
.mcal .mh{display:flex;justify-content:space-between;align-items:center;font:600 13.5px var(--fd);margin-bottom:10px}
.mcal .dow,.mcal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.mcal .dow span{font:600 10.5px var(--fm);color:var(--faint);text-align:center;text-transform:uppercase;padding:4px 0}
.mcal .days button{aspect-ratio:1;border:0;background:none;border-radius:8px;font:500 13.5px var(--fb);color:var(--ink);cursor:pointer}
.mcal .days button:hover:not(:disabled){background:var(--bg)}
.mcal .days button:disabled{color:#D5D2CB;cursor:default}
.mcal .days button.on{background:var(--ink);color:#fff}
.mcal .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px;display:none}
.mcal .slots.show{display:grid}
.mcal .slots button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:9px 4px;font:600 12px var(--fm);cursor:pointer}
.mcal .slots button:hover{border-color:var(--ink)}
.mcal .slots button.on{background:var(--ink);color:#fff;border-color:var(--ink)}
/* tap sim v2 */
.tapsim{background:#fff;border:1px solid var(--line);border-radius:18px;padding:18px;margin-top:12px}
.tapsim .stage{min-height:180px;display:grid;place-items:center;text-align:center;padding:10px}
.tapsim .amt{font:700 31px var(--fd);letter-spacing:-.02em}
.tapsim input{border:1px solid var(--line);border-radius:12px;padding:12px 16px;font:600 19px var(--fd);width:160px;text-align:center}
.tapring{width:120px;height:120px;border-radius:26px;background:var(--ink);display:grid;place-items:center;color:#fff;position:relative;cursor:pointer;
 box-shadow:inset 0 1px 1px rgba(255,255,255,.25)}
.tapring.go::after,.tapring.go::before{content:"";position:absolute;inset:-8px;border:2px solid rgba(29,29,31,.35);border-radius:36px;animation:tapr 1s ease-out infinite}
.tapring.go::before{animation-delay:.35s}
@keyframes tapr{from{transform:scale(.92);opacity:1}to{transform:scale(1.25);opacity:0}}
.receiptcard{background:var(--bg);border:1px dashed var(--line);border-radius:12px;padding:14px 18px;font:13.5px var(--fm);text-align:left;width:100%;max-width:260px}
/* touch editable */
.touch [contenteditable]{outline:none;border-bottom:1px dashed transparent}
.touch [contenteditable]:hover{border-bottom-color:var(--faint)}
.touch [contenteditable]:focus{border-bottom-color:var(--accent);background:var(--bg-2)}
.touch.sent{border-color:var(--good);background:var(--good-bg)}
/* cookie bar bottom-left + pill shift */
[data-vswitch]{bottom:auto!important;top:70px!important;left:auto!important;right:14px!important;opacity:.75}
@media(max-width:760px){[data-vswitch]{display:none!important}}
/* audit page split top-align */
.split{align-items:start}
/* portfolio */
.port-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:30px}
.port-card{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.port-card:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(29,29,31,.10)}
.port-card .ph{aspect-ratio:16/10;background:var(--dark);display:grid;place-items:center;color:var(--bg);font:700 19px var(--fd)}
.port-card .bd{padding:16px 18px}
.port-card .bd b{font:700 15px var(--fd)}
.port-card .bd span{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}


/* ===================== ROUND 4 ===================== */
/* --pay is the payment accent. It is deliberately the one cold colour on a warm
   page: the card brands on the product page are blue, so the buy button reads as
   continuous with them, and it pops because nothing else competes with it.
   Reserved for controls that take money — never for decoration. */
:root{--pay:#2563EB;--pay-d:#1D4ED8}
/* restore lost chrome: chat fab/panel, popups, cookie bar */
.chat-fab{position:fixed;right:18px;bottom:18px;z-index:90;width:56px;height:56px;border-radius:50%;
 background:var(--ink);color:var(--bg);border:0;cursor:pointer;display:grid;place-items:center;
 box-shadow:0 10px 30px rgba(29,29,31,.25),inset 0 1px 1px rgba(255,255,255,.25);transition:transform .15s}
.chat-fab:hover{transform:scale(1.06)}
.chat-fab svg{width:26px;height:26px}
.chat-panel{position:fixed;right:18px;bottom:84px;z-index:90;width:min(340px,calc(100vw - 36px));
 background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px rgba(29,29,31,.18);
 padding:20px;display:none}
.chat-panel.open{display:block}
.chat-panel .ch-h{display:flex;gap:10px;align-items:center;font:700 13.5px var(--fb);margin-bottom:4px}
.chat-panel p{font-size:13.5px;color:var(--muted);margin:0 0 12px}
.chat-panel a{display:block;padding:11px 14px;border:1px solid var(--line);border-radius:12px;
 font:600 13.5px var(--fb);color:var(--ink);text-decoration:none;margin-bottom:8px}
.chat-panel a:hover{border-color:var(--ink)}
.pop-scrim{position:fixed;inset:0;background:rgba(20,20,22,.4);z-index:95;display:none}
.pop-scrim.open{display:block}
.pop{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:96;width:min(430px,calc(100vw - 32px));
 background:#fff;border-radius:18px;padding:30px;display:none;text-align:center;box-shadow:0 40px 90px rgba(0,0,0,.3)}
.pop.open{display:block}
.pop h3{font:700 24px var(--fd);margin-bottom:8px}
.pop p{color:var(--muted);font-size:13.5px}
.pop .x{position:absolute;top:12px;right:14px;background:none;border:0;font-size:19px;color:var(--faint);cursor:pointer;padding:6px}
.pop .audit-form{border:0;padding:0;margin-top:14px;background:none}
/* nav hide-on-scroll */
.nav{transition:transform .3s ease}
.nav.hide{transform:translateY(-100%)}
.nav.hide .mega{display:none!important}
/* glass (liquid) buttons */
.btn.glass{background:rgba(255,255,255,.32);color:var(--ink);backdrop-filter:blur(14px) saturate(1.5);
 -webkit-backdrop-filter:blur(14px) saturate(1.5);border:0;position:relative;
 box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),
  inset 3px 3px .5px -3px rgba(0,0,0,.55),inset -3px -3px .5px -3px rgba(0,0,0,.5),
  inset 1px 1px 1px -.5px rgba(0,0,0,.35),inset -1px -1px 1px -.5px rgba(0,0,0,.35),
  inset 0 0 6px 6px rgba(0,0,0,.06),inset 0 0 2px 2px rgba(0,0,0,.03),0 0 12px rgba(255,255,255,.6)}
.btn.glass:hover{transform:scale(1.04);background:rgba(255,255,255,.45)}
.btn.glass:active{transform:scale(.985)}
/* blue commerce buttons on product pages */
.pp .addcart,.pp-bar .btn.dark{background:var(--pay);box-shadow:inset 0 1px 1px rgba(255,255,255,.35),inset 0 -2px 5px rgba(0,0,0,.25),0 6px 16px rgba(37,99,235,.35)}
.pp .addcart:hover,.pp-bar .btn.dark:hover{background:var(--pay-d)}
.pp .addcart.in{background:var(--good)}
/* In-cart confirmation as a green GLASS bubble, same material as .btn.glass so the
   two buttons in a product's CTA stack read as one family instead of a flat fill. */
.addcart.in,.pp .addcart.in{background:rgba(22,122,68,.30);color:#0A4325;
 backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);
 box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(22,122,68,.20),
  inset 3px 3px .5px -3px rgba(0,0,0,.45),inset -3px -3px .5px -3px rgba(0,0,0,.40),
  inset 1px 1px 1px -.5px rgba(0,0,0,.28),inset -1px -1px 1px -.5px rgba(0,0,0,.28),
  inset 0 0 6px 6px rgba(22,122,68,.07),inset 0 0 2px 2px rgba(22,122,68,.04),
  0 0 12px rgba(255,255,255,.55)}
.addcart.in:hover,.pp .addcart.in:hover{background:rgba(22,122,68,.42)}
/* border beam on demo cards */
.flow-demo{position:relative;border:1px solid var(--line);overflow:hidden}
.flow-demo::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;
 background:conic-gradient(from var(--beam,0deg),transparent 0 340deg,#EFC26A 352deg,var(--accent) 358deg,transparent 360deg);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;animation:beamspin 6s linear infinite}
@property --beam{syntax:'<angle>';initial-value:0deg;inherits:false}
@keyframes beamspin{to{--beam:360deg}}
@media(prefers-reduced-motion:reduce){.flow-demo::before{animation:none;display:none}}
/* steps: one row */
.pp .steps{grid-template-columns:repeat(4,1fr)}
.pp .steps .step{padding:16px}
.pp .steps h3{font-size:13.5px}
.pp .steps p{font-size:12px}
@media(max-width:940px){.pp .steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.pp .steps{grid-template-columns:1fr}}
/* tiers: LIGHT glass */
.tiers-glass{background:linear-gradient(160deg,var(--bg-3),#E6E3DC);border:1px solid var(--line);border-radius:26px;padding:26px;position:relative;overflow:hidden}
.tiers-glass .price-grid{display:grid;grid-template-columns:1fr;gap:16px}
.tiers-glass .price-card{background:rgba(255,255,255,.58);backdrop-filter:blur(16px) saturate(1.4);
 border:1px solid rgba(255,255,255,.85);border-radius:18px;padding:26px;position:relative;
 box-shadow:inset 0 1px 1px rgba(255,255,255,.9),0 18px 40px rgba(29,29,31,.08)}
.tiers-glass .price-card.hi{border:2px solid var(--ink);
 box-shadow:inset 0 1px 1px rgba(255,255,255,.95),0 24px 50px rgba(29,29,31,.13)}
.tiers-glass .price-card.hi::before{content:"MOST CHOSEN";position:absolute;top:-10px;left:24px;font:700 10.5px var(--fm);
 letter-spacing:.12em;background:var(--ink);color:#fff;padding:3px 10px;border-radius:999px}
.tiers-glass .tname{font:700 12px var(--fm);letter-spacing:.1em;color:var(--muted);text-transform:uppercase}
.tiers-glass .pv{font:700 var(--d-lg)/1 var(--fd);letter-spacing:-.025em;margin:10px 0 2px;color:var(--ink)}
.tiers-glass .pv small{font:500 15px var(--fb);color:var(--muted)}
.tiers-glass .reframe{color:var(--accent);font-size:13.5px;font-weight:600;margin:2px 0 14px}
.tiers-glass ul{margin:0 0 20px;padding:0;list-style:none;display:grid;gap:8px}
.tiers-glass li{font-size:13.5px;color:var(--muted);padding-left:22px;position:relative}
.tiers-glass li::before{content:"\2713";position:absolute;left:2px;top:0;color:var(--good);font-weight:700;font-size:12px}
.tiers-glass .price-note{color:var(--faint)}
.tiers-glass .btn.dark{background:var(--pay)}
.tiers-glass .btn.dark:hover{background:var(--pay-d)}
/* audit form v2 */
.audit-form{background:#fff;border:1px solid var(--line);border-radius:18px;padding:28px;
 box-shadow:0 24px 60px rgba(29,29,31,.07)}
.audit-form .af-h{font:700 17px var(--fd);margin:0 0 4px}
.audit-form .af-s{color:var(--faint);font-size:12px;margin:0 0 18px}
.af-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.af-field{display:flex;flex-direction:column;gap:5px}
.af-field label{font:600 10.5px var(--fb);letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.audit-form input,.audit-form textarea{background:var(--bg);border:1px solid var(--line);border-radius:12px;
 padding:13px 15px;font:15px var(--fb);color:var(--ink);width:100%;transition:border-color .15s,box-shadow .15s}
.audit-form input:focus-visible,.audit-form textarea:focus-visible{outline:0;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.08)}
.audit-form .btn{width:100%;justify-content:center}
.consent{background:var(--bg);border-radius:12px;padding:10px 12px;margin:0 0 10px}
/* search field (heroui port) */
.searchf{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:12px;
 padding:0 8px 0 14px;height:52px;transition:border-color .15s,box-shadow .15s}
.searchf:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,29,31,.08)}
.searchf svg{width:18px;height:18px;color:var(--faint);flex:none}
.searchf input{flex:1;border:0!important;background:none!important;padding:0!important;font:15px var(--fb);color:var(--ink);box-shadow:none!important}
.searchf input:focus{outline:none}
.searchf .clr{width:28px;height:28px;border-radius:50%;border:0;background:var(--bg);color:var(--faint);cursor:pointer;display:none;place-items:center;font-size:13.5px}
.searchf.has .clr{display:grid}
.map-checks{display:grid;gap:10px;margin-top:14px}
.map-check{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;
 opacity:0;transform:translateY(8px);transition:all .4s}
.map-check.show{opacity:1;transform:none}
.map-check .ic{width:30px;height:30px;border-radius:8px;background:var(--bg);display:grid;place-items:center;flex:none;font-size:13.5px}
.map-check b{font:600 13.5px var(--fb);display:block}
.map-check span{font-size:12px;color:var(--muted)}
/* iphone v2 — the old site's UI */
.iphone2{width:min(340px,100%);background:#0B0B0C;border-radius:36px;padding:10px;margin:16px 0;
 box-shadow:0 24px 60px rgba(0,0,0,.28),inset 0 1px 1px rgba(255,255,255,.14)}
.iphone2 .scr{background:var(--bg-2);border-radius:36px;min-height:430px;display:flex;flex-direction:column;overflow:hidden;position:relative}
.iphone2 .isl{width:96px;height:26px;background:#000;border-radius:999px;margin:8px auto 2px;flex:none}
.iphone2 .thead{display:flex;gap:10px;align-items:center;padding:8px 16px 10px;border-bottom:1px solid #E7E4DE;flex:none}
.iphone2 .thead .av{width:34px;height:34px;border-radius:50%;background:var(--ink);display:grid;place-items:center;color:#fff;flex:none}
.iphone2 .thead .av svg{width:18px;height:18px}
.iphone2 .thead b{font:600 13.5px var(--fb);display:block;line-height:1.15}
.iphone2 .thead small{color:var(--faint);font-size:10.5px}
.iphone2 .tbody{flex:1;padding:14px 14px 6px;display:flex;flex-direction:column;gap:8px;overflow:auto}
.iphone2 .sysline{align-self:center;text-align:center;font:600 10.5px var(--fm);letter-spacing:.12em;text-transform:uppercase;color:#A9A49B;max-width:85%;margin:6px 0}
.iphone2 .pm-b{max-width:84%;padding:9px 13px;border-radius:18px;font-size:13.5px;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s}
.iphone2 .pm-b.show{opacity:1;transform:none}
.iphone2 .pm-b.biz{align-self:flex-start;background:#fff;border:1px solid #E7E4DE;border-bottom-left-radius:8px}
.iphone2 .pm-b.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:8px}
.iphone2 .chips{display:flex;gap:6px;flex-wrap:wrap;padding:8px 14px;flex:none}
.iphone2 .chips button{border:1px solid var(--line-2);background:#fff;border-radius:999px;font:500 12px var(--fb);
 padding:7px 13px;cursor:pointer;color:var(--ink);transition:border-color .15s}
.iphone2 .chips button:hover{border-color:var(--ink);color:var(--ink)}
.iphone2 .tin{display:flex;gap:8px;padding:6px 12px 14px;flex:none}
.iphone2 .tin input{flex:1;border:1px solid var(--line-2);border-radius:999px;padding:10px 15px;font:13.5px var(--fb);background:#fff}
.iphone2 .tin button{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;border:0;cursor:pointer;font-size:15px;flex:none}
/* slate booked popup */
.mcal{position:relative}
.slate-pop{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);z-index:5;
 width:min(320px,90%);background:#fff;border-radius:18px;padding:22px;text-align:center;
 box-shadow:0 30px 80px rgba(29,29,31,.25);border:1px solid var(--line);opacity:0;pointer-events:none;transition:all .25s}
.slate-pop.on{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto}
.slate-pop .sp-ok{width:44px;height:44px;border-radius:50%;background:var(--good-dim,var(--good-bg));color:var(--good);display:grid;place-items:center;margin:0 auto 10px;font-size:19px}
.slate-pop b{font:700 15px var(--fd)}
.slate-pop .sp-rem{background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px;font-size:12px;color:var(--muted);margin:12px 0;text-align:left}
.slate-pop button{border:0;background:var(--ink);color:#fff;border-radius:999px;font:600 12px var(--fb);padding:9px 20px;cursor:pointer}
/* revive v2 timeline */
.rev2{position:relative;margin-top:14px;display:grid;gap:12px}
.rev2::before{content:"";position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:var(--line)}
.rev2 .rt{display:flex;gap:14px;align-items:flex-start;position:relative}
.rev2 .day{width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid var(--line);flex:none;
 display:grid;place-items:center;font:700 10.5px var(--fm);color:var(--muted);z-index:1;transition:all .3s}
.rev2 .rt.sent .day{background:var(--ink);border-color:var(--ink);color:#fff}
.rev2 .card{flex:1;background:#fff;border:1px solid var(--line);border-radius:12px;padding:12px 16px;transition:all .3s}
.rev2 .rt.sent .card{border-color:var(--good);box-shadow:0 8px 20px rgba(29,122,72,.08)}
.rev2 .card .ch{font:600 10.5px var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--faint);display:flex;justify-content:space-between;margin-bottom:4px}
.rev2 .card .sent-tag{color:var(--good);opacity:0;transition:opacity .3s}
.rev2 .rt.sent .sent-tag{opacity:1}
.rev2 .card [contenteditable]{font-size:13.5px;outline:none;border-radius:8px}
.rev2 .card [contenteditable]:focus{background:var(--bg-2);box-shadow:0 0 0 2px rgba(29,29,31,.22)}
/* dispatch email draft (message-draft port) */
.edraft{background:#fff;border:1px solid var(--line);border-radius:18px;padding:4px 20px 16px;margin-top:12px;box-shadow:0 12px 34px rgba(29,29,31,.06)}
.edraft h4{font:600 15px var(--fb);padding-top:14px;margin:0 0 8px}
.edraft table{font-size:13.5px;border-collapse:collapse;margin-bottom:10px}
.edraft td{padding:2px 0}
.edraft td.l{color:var(--faint);text-align:right;padding-right:12px;font-weight:600;white-space:nowrap}
.edraft .esep{height:1px;background:var(--line);margin:0 -20px 12px}
.edraft [contenteditable]{font-size:13.5px;line-height:1.6;white-space:pre-wrap;outline:none;border-radius:8px;min-height:120px;display:block}
.edraft [contenteditable]:focus{background:var(--bg-2)}
.edraft .eact{display:flex;justify-content:flex-end;gap:10px;align-items:center;margin-top:14px}
.edraft .eact .status{color:var(--faint);font-size:13.5px}
.edraft .eact .ok{color:var(--good);font-weight:600;font-size:13.5px}
/* footer mark fix */
.f-mark svg text{letter-spacing:.12em;font-weight:700;stroke-width:1.1}
/* hero parallax layers */
.hero-par{position:relative}
.hero-par .hp-mark{position:absolute;left:50%;top:8%;transform:translateX(-50%);width:190px;color:var(--line);z-index:0;pointer-events:none}
.hero-par .hp-img{position:relative;z-index:1}
/* integrations spacing */
.integ{border-top:0;padding:56px 0 40px}

/* mobile hero fit */
@media(max-width:560px){
  .shop-hero h1{font-size:31px;letter-spacing:-.02em}
  .shop-hero{padding:96px 0 10px}
  .pcard .im{aspect-ratio:16/11}
  .sec{padding:40px 0}
}

/* ===================== ROUND 5 ===================== */
/* border beam is gone; demo cards breathe and center */
.flow-demo::before{display:none;animation:none}
.flow-demo{border:1px solid var(--line);border-radius:18px;background:#fff;padding:40px clamp(18px,4.5vw,48px);text-align:center}
.flow-demo .k{justify-content:center}
.demo-sim b,.demo-live b{display:block;font-size:19px}
.demo-sim>p,.demo-live>p{max-width:56ch;margin:10px auto 16px}
.demo-fine{max-width:60ch;margin:16px auto 0}
.demo-btnrow{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:16px}
.demo-live .btn{margin-top:6px}
.edraft{text-align:left;max-width:640px;margin:14px auto 0}
.rev2{text-align:left;max-width:620px;margin-left:auto;margin-right:auto}
.mcal{max-width:520px;margin:14px auto}
.searchf{max-width:460px;margin:0 auto}
.map-checks{max-width:560px;margin:16px auto 0;text-align:left}
/* full-size, realistic, centered iPhone */
.iphone2{width:min(330px,92vw);margin:24px auto}
.iphone2 .scr{height:640px;min-height:0}
@media(max-width:560px){.iphone2 .scr{height:560px}}
/* pp bar connects flush to the top (it replaces the nav while on) */
.pp-bar{top:0;z-index:56;border-bottom:1px solid var(--line)}
.pp-bar .in{height:58px}
/* pricing: no more gray slab — clean cards straight on the page */
.tiers-glass{background:none;border:0;padding:0;border-radius:0;overflow:visible}
.tiers-glass .price-card{background:#fff;border:1px solid var(--line);backdrop-filter:none;
 box-shadow:0 14px 34px rgba(29,29,31,.06)}
.tiers-glass .price-card.hi{border:2px solid var(--ink);box-shadow:0 20px 44px rgba(29,29,31,.10)}
/* amber glass (the free-audit orange) */
.btn.glass.amber{background:rgba(239,194,106,.45)}
.btn.glass.amber:hover{background:rgba(239,194,106,.62)}
/* cart button: a real cart, in glass */
.cartbtn{width:42px;height:42px;border:0;background:rgba(255,255,255,.45);backdrop-filter:blur(14px) saturate(1.5);
 -webkit-backdrop-filter:blur(14px) saturate(1.5);
 box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),
  inset 3px 3px .5px -3px rgba(0,0,0,.55),inset -3px -3px .5px -3px rgba(0,0,0,.5),
  inset 0 0 6px 6px rgba(0,0,0,.06),0 0 12px rgba(255,255,255,.6);transition:transform .15s,background .15s}
.cartbtn:hover{transform:scale(1.07);background:rgba(255,255,255,.6);border:0}
.cartbtn svg{width:20px;height:20px}
.cartbtn .n{background:var(--pay)}
/* nav search */
.searchbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
 font:500 13.5px var(--fb);color:var(--muted);padding:19px 2px}
.searchbtn svg{width:15px;height:15px}
.searchbtn:hover{color:var(--ink)}
.searchbar{position:absolute;left:0;right:0;top:58px;background:rgba(245,244,241,.98);backdrop-filter:blur(18px);
 border-bottom:1px solid var(--line);opacity:0;transform:translateY(-6px);
 transition:opacity .2s,transform .25s cubic-bezier(.2,.7,.3,1)}
.searchbar.open{opacity:1;transform:none}
.sb-in{max-width:720px;margin:0 auto;display:flex;align-items:center;gap:12px;padding:16px 22px}
.sb-in svg{width:18px;height:18px;color:var(--faint);flex:none}
.sb-in input{flex:1;border:0;background:none;font:500 17px var(--fb);color:var(--ink);outline:none}
.sb-x{background:none;border:0;font-size:24px;color:var(--faint);cursor:pointer;padding:4px 10px}
/* input[type=search] draws its own clear "x" in Chrome/Safari, which sat next to our
   .sb-x and gave the bar two close buttons the moment anything was typed. */
#searchIn::-webkit-search-cancel-button,#searchIn::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.sb-res{max-width:720px;margin:0 auto;padding:0 22px 14px;display:grid;gap:4px}
.sb-res a{display:block;padding:10px 14px;border-radius:12px;text-decoration:none}
.sb-res a b{font:600 15px var(--fd);color:var(--ink);display:block}
.sb-res a span{font-size:12px;color:var(--muted)}
.sb-res a:hover,.sb-res a:focus-visible{background:#fff}
.sb-none{padding:10px 14px;font-size:13.5px;color:var(--muted)}
.sb-none a{color:var(--accent)}
/* scroll-open dropdown card (activity-dropdown port) */
.sdrop{background:#fff;border:1px solid var(--line);border-radius:18px;margin-top:18px;overflow:hidden;
 box-shadow:0 14px 40px rgba(29,29,31,.06)}
.sd-h{display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;user-select:none}
.sd-ic{width:44px;height:44px;border-radius:12px;background:var(--bg);display:grid;place-items:center;flex:none;color:var(--ink)}
.sd-ic svg{width:19px;height:19px}
.sd-t b{font:600 15px var(--fd);display:block}
.sd-sub{font-size:12px;color:var(--faint)}
.sd-ch{margin-left:auto;flex:none}
.sd-ch svg{width:18px;height:18px;color:var(--faint);transition:transform .5s cubic-bezier(.4,0,.2,1)}
.sdrop.open .sd-ch svg{transform:rotate(180deg)}
.sd-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1)}
.sdrop.open .sd-body{grid-template-rows:1fr}
.sd-list{overflow:hidden;padding:0 10px}
.sdrop.open .sd-list{padding-bottom:12px}
.sd-row{display:flex;gap:12px;align-items:flex-start;padding:11px 10px;border-radius:12px;
 opacity:0;transform:translateY(12px);transition:opacity .45s,transform .45s}
.sdrop.open .sd-row{opacity:1;transform:none}
.sdrop.open .sd-row:nth-child(1){transition-delay:.08s}.sdrop.open .sd-row:nth-child(2){transition-delay:.16s}
.sdrop.open .sd-row:nth-child(3){transition-delay:.24s}.sdrop.open .sd-row:nth-child(4){transition-delay:.32s}
.sdrop.open .sd-row:nth-child(5){transition-delay:.40s}.sdrop.open .sd-row:nth-child(6){transition-delay:.48s}
.sdrop.open .sd-row:nth-child(7){transition-delay:.56s}.sdrop.open .sd-row:nth-child(8){transition-delay:.64s}
.sd-row:hover{background:var(--bg)}
.sd-dot{width:9px;height:9px;border-radius:50%;margin-top:6px;flex:none;background:var(--faint)}
.sd-row.lost .sd-dot{background:#C0392B}
.sd-row.won .sd-dot{background:var(--good)}
.sd-time{font:600 10.5px var(--fm);color:var(--faint);width:58px;flex:none;padding-top:2px;white-space:nowrap}
.sd-ev{font-size:13.5px;color:var(--muted)}
.sd-row.lost .sd-ev{color:#A94438}
.sd-row.won .sd-ev{color:var(--good)}
/* hero film — layered white parallax */
.hf-ctas{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}
/* shelf cards: art sits straight on the page, no box */
.pcard{background:transparent;border:0;box-shadow:none;border-radius:0}
.pcard:hover{transform:translateY(-5px);box-shadow:none}
.pcard .im{background:transparent;border-radius:18px}
.pcard .im img{transition:transform .45s cubic-bezier(.2,.7,.3,1)}
.pcard:hover .im img{transform:scale(1.035)}
/* the page is one surface — no white slabs, no hairlines, no blurry outlines */
.sec.alt{background:transparent;border:0}
.integ{background:transparent;border:0}
.iwrap::before{background:linear-gradient(90deg,var(--bg),transparent)}
.iwrap::after{background:linear-gradient(270deg,var(--bg),transparent)}
.bundles{border-top:0}
/* bundles: green worth lines + green checks */
.bcard li::before{color:var(--good-lite);background:rgba(126,217,167,.12);border-color:rgba(126,217,167,.28)}
.bcard li.worth{color:var(--good-lite);font-weight:700}
.bcard li.worth b{color:inherit}
.bcard li.worth.lt{color:#BDF2D6}
/* audit form: in the page, underline fields, no gray blobs */
.audit-form{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
.audit-form input,.audit-form textarea{background:transparent;border:0;border-bottom:1px solid var(--line);
 border-radius:0;padding:11px 2px;transition:border-color .15s}
.audit-form input:focus-visible,.audit-form textarea:focus-visible{outline:0;border-bottom-color:var(--ink);box-shadow:none}
.af-grid{gap:8px 20px}
.consent{background:none;border-radius:0;padding:9px 0;margin:0;display:flex;gap:10px;align-items:flex-start;
 font-size:13.5px;color:var(--muted)}
.consent input{width:auto;flex:none;margin-top:3px;accent-color:var(--ink)}
.af-cta{margin-top:18px}
.audit-form .af-cta .btn{width:auto;padding:13px 28px}
/* newsletter pop */
.pop-mark{width:36px;height:36px;margin:0 auto 8px;color:var(--ink)}
.pop-mark svg{width:100%;height:100%;display:block}
.pop-k{font:600 10.5px var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--faint);margin:0 0 6px}
.pop .consent{text-align:left}
/* footer mark: sharp outline (fill paints over Inter's overlapping contours), white glow */
.f-mark svg text{fill:#101113;stroke:rgba(255,255,255,.5);stroke-width:1.35;paint-order:stroke;
 transition:stroke .4s,filter .4s}
.f-mark:hover svg text{stroke:#fff;filter:drop-shadow(0 0 16px rgba(255,255,255,.35))}
/* cart drawer v2 */
.c-item .ci-m{min-width:0}
.c-item .ci-s{color:var(--faint);font-size:12px}
.ci-tr{color:var(--good);font-weight:600}
.c-rows{display:grid;gap:6px;margin-bottom:10px}
.c-row{display:flex;justify-content:space-between;font-size:13.5px;color:var(--muted)}
.c-row b{color:var(--ink)}
.c-row.tr b{color:var(--good)}
.cart .c-go{display:flex;width:100%;justify-content:center;background:var(--pay)}
.cart .c-go:hover{background:var(--pay-d)}
/* checkout page */
.co-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:34px;margin-top:26px;align-items:start}
@media(max-width:940px){.co-grid{grid-template-columns:1fr}}
.co-items{display:grid;gap:12px}
.co-item,.co-up{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);
 border-radius:18px;padding:14px 16px}
.co-item img,.co-up img{width:86px;height:60px;object-fit:cover;border-radius:8px;flex:none}
.co-m{display:grid;gap:2px;min-width:0}
.co-m b{font:600 15px var(--fd)}
.co-m>span{font-size:12px;color:var(--muted)}
.co-meta{color:var(--faint)!important;font-size:12px!important}
.co-tr{color:var(--good)!important;font-weight:600;font-size:12px!important}
.co-item .ci-x{margin-left:auto}
.co-up{border-style:dashed}
.co-add{margin-left:auto;border:0;background:var(--pay);color:#fff;border-radius:999px;
 font:600 13.5px var(--fb);padding:8px 18px;cursor:pointer}
.co-add:hover{background:var(--pay-d)}
.co-card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.co-trial{background:var(--good-bg);border:1px solid rgba(22,122,68,.25);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.co-trial b{color:var(--good);display:block;font-size:13.5px}
.co-trial span{font-size:12px;color:var(--muted)}
.co-rows{display:grid;gap:7px;margin-bottom:12px}
.co-tot{border-top:1px solid var(--line);padding-top:12px;margin-bottom:14px;display:grid;
 grid-template-columns:1fr auto;align-items:baseline}
.co-tot span{color:var(--muted);font-size:13.5px}
.co-tot b{font:700 24px var(--fd)}
.co-tot small{grid-column:1/-1;color:var(--faint);font-size:12px;margin-top:4px}
.co-card .co-pay{display:flex;width:100%;justify-content:center;background:var(--pay)}
.co-card .co-pay:hover{background:var(--pay-d)}
.co-card .co-pay:disabled{opacity:.55;cursor:default}
.co-fine{font-size:12px;color:var(--faint);line-height:1.55;margin-top:12px}
.co-fine a{color:inherit;text-decoration:underline}
.co-back{margin-top:14px;font-size:13.5px}
.co-back a{color:var(--muted)}
/* google-review composer (repute) */
.grev{max-width:520px;margin:16px auto 0;background:#fff;border:1px solid var(--line);border-radius:18px;
 padding:20px 20px 18px;text-align:left;box-shadow:0 16px 40px rgba(29,29,31,.07)}
.gr-h{display:flex;gap:12px;align-items:center;padding-bottom:12px;border-bottom:1px solid var(--line)}
.gr-g{width:34px;height:34px;border-radius:50%;flex:none;display:grid;place-items:center;
 font:700 17px Arial,sans-serif;background:#fff;border:1px solid var(--line);color:#4285F4}
.gr-biz b{font:600 15px var(--fb);display:block}
.gr-biz small{color:var(--faint);font-size:12px}
.gr-me{display:flex;gap:10px;align-items:center;margin:14px 0 4px}
.gr-av{width:34px;height:34px;border-radius:50%;background:#4C6172;color:#fff;display:grid;place-items:center;
 font:600 13.5px var(--fb);flex:none}
.gr-me b{font:600 13.5px var(--fb);display:block;line-height:1.2}
.gr-me small{color:var(--faint);font-size:10.5px}
.gr-stars{display:flex;gap:6px;margin:8px 0 12px}
.gr-stars button{background:none;border:0;font-size:31px;line-height:1;color:#DAD7CF;cursor:pointer;padding:2px;
 transition:transform .12s,color .12s}
.gr-stars button:hover{transform:scale(1.18)}
.gr-stars button.on{color:#FABB05}
.grev textarea{width:100%;border:1px solid var(--line);border-radius:12px;background:var(--bg-2);padding:12px 14px;
 font:13.5px var(--fb);color:var(--ink);resize:vertical;min-height:88px}
.grev textarea:focus-visible{outline:0;border-color:#4285F4;box-shadow:0 0 0 3px rgba(66,133,244,.12)}
.gr-act{display:flex;gap:14px;align-items:center;margin-top:12px}
.gr-act label{font-size:12px;color:var(--muted);display:flex;gap:5px;align-items:center}
.gr-post{margin-left:auto;background:#1A73E8;color:#fff;border:0;border-radius:999px;
 font:600 13.5px var(--fb);padding:9px 26px;cursor:pointer}
.gr-post:hover{background:#1765CC}
.gr-reply{margin-top:16px;background:#F8F9FA;border-left:3px solid #1A73E8;border-radius:0 12px 12px 0;padding:12px 16px}
.gr-rh b{font:600 13.5px var(--fb)}
.gr-rh small{color:var(--faint);font-size:10.5px;margin-left:8px}
.gr-rt{font-size:13.5px;color:var(--muted);margin:6px 0 0;min-height:1.4em;line-height:1.55}
/* marquee platform fan-out */
.mq-plats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:580px;margin:16px auto 0}
@media(max-width:560px){.mq-plats{grid-template-columns:1fr 1fr}}
.mq-pl{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;
 padding:11px 30px 11px 14px;position:relative;transition:border-color .25s,box-shadow .25s}
.mq-pl img{width:20px;height:20px;object-fit:contain;flex:none}
.mq-pl span{font:600 12px var(--fb);color:var(--ink);white-space:nowrap}
.mq-pl .ck{position:absolute;right:10px;font-style:normal;color:var(--good);font-weight:700;
 opacity:0;transform:scale(.5);transition:opacity .25s,transform .25s}
.mq-pl.lit{border-color:var(--good);box-shadow:0 6px 18px rgba(22,122,68,.14)}
.mq-pl.lit .ck{opacity:1;transform:none}
/* real email template thumbs */
.eth{aspect-ratio:3/4;overflow:hidden;background:#fff;border-bottom:1px solid var(--line)}
.eth img{width:100%;height:100%;object-fit:cover;object-position:top}
/* chat widget v2 */
.chat-panel{padding:0;flex-direction:column;max-height:min(580px,74vh)}
.chat-panel.open{display:flex}
.chat-panel .ch-h{padding:14px 16px;border-bottom:1px solid var(--line);margin:0}
.ch-live{margin-left:auto;font:600 10.5px var(--fm);color:var(--good)}
.ch-body{flex:1;overflow:auto;padding:14px 16px;display:flex;flex-direction:column;gap:8px;min-height:180px}
.ch-m{max-width:90%;padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.5}
.ch-m.me{align-self:flex-end;background:var(--ink);color:#fff;border-bottom-right-radius:8px}
.ch-m.biz{align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:8px;color:var(--ink)}
.chat-panel .ch-m.biz a{display:block;margin:6px 0 0;padding:0;border:0;color:var(--accent);font:600 13.5px var(--fb)}
.chat-panel .ch-m.biz a:hover{text-decoration:underline;border:0}
.ch-chips{display:flex;gap:6px;flex-wrap:wrap;padding:2px 16px 8px}
.ch-chips button{border:1px solid var(--line);background:#fff;border-radius:999px;font:500 12px var(--fb);
 padding:7px 12px;cursor:pointer;color:var(--ink)}
.ch-chips button:hover{border-color:var(--ink);color:var(--ink)}
.ch-in{display:flex;gap:8px;padding:10px 14px 8px;border-top:1px solid var(--line)}
.ch-in input{flex:1;border:1px solid var(--line);border-radius:999px;padding:10px 15px;font:13.5px var(--fb);background:#fff}
.ch-in button{width:38px;height:38px;border-radius:50%;background:var(--ink);color:#fff;border:0;cursor:pointer;font-size:15px;flex:none}
.chat-panel .ch-fine{font-size:10.5px;color:var(--faint);padding:0 16px 12px;margin:4px 0 0}
/* assent fine print */
.assent{font-size:12px;color:var(--faint);margin-top:10px}
.assent a,.price-note a{color:inherit;text-decoration:underline}
/* keyboard focus, everywhere */
a:focus-visible,button:focus-visible,[role="button"]:focus-visible,[tabindex]:focus-visible{
 outline:2px solid var(--ink);outline-offset:2px}
/* ===== bleed art — product hero, full viewport, floating on --bg =====
   The 21:9 still (Higgsfield outpaint, backdrop flat-fielded to --bg by whiten_bg.py)
   breaks out of the .flow column and runs the full width of the page. No card, no
   radius, no frame: the shot's own backdrop IS the page background, so the edges of
   the frame are invisible and the subject reads as floating. */
.pp > .flow{min-width:0}          /* grid items default to min-width:auto — without this
                                     a 100vw child widens the column and the breakout
                                     offsets cancel out to zero */
.flow > .bleed-art{
  position:relative; left:50%; transform:translateX(-50%);
  width:100vw; max-width:100vw; margin:22px 0 26px; padding:0;
  background:none; border:0; border-radius:0; overflow:visible; z-index:0;
}
/* Only two edges need masking: the far left, so the art stays clear of the sticky price
   rail, and the bottom, so the subject dissolves instead of ending on a cut line. */
.flow > .bleed-art > img{
  display:block; width:100%; height:auto; border-radius:0;
  -webkit-mask-image:
     linear-gradient(to bottom, #000 0, #000 74%, transparent 100%),
     linear-gradient(to right,  transparent 0, #000 24%, #000 100%);
  -webkit-mask-composite:source-in;
          mask-image:
     linear-gradient(to bottom, #000 0, #000 74%, transparent 100%),
     linear-gradient(to right,  transparent 0, #000 24%, #000 100%);
          mask-composite:intersect;
}
.rail-l{z-index:3}
@media(max-width:940px){
  /* single column — no rail to keep clear, so let it go edge to edge */
  .flow > .bleed-art{margin:16px 0 18px}
  .flow > .bleed-art > img{
    -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0, #000 80%, transparent 100%);
  }
}

/* ---- live art layers: motion on top of the bled plate ---- */
.bleed-art.radar-art,.bleed-art.fd-art,.bleed-art.slate-art{position:relative}
@media(prefers-reduced-motion:reduce){
  .radar-sweep,.blip,.blip::after,.fd-flow i,
  .slate-key,.slate-throw,.slate-throw img.lit,.slate-contact,.slate-bloom{animation:none!important}
  .slate-throw img.lit,.slate-contact,.slate-bloom{opacity:0}
  .blip,.blip::after{opacity:0}
}

/* Radar. radar_sweep.py lifted the sweep off the still and repaired the plate behind it,
   so the wedge can turn. The box is the sprite's own square, centred on the scope and
   sized in % of the art so it tracks the ring at any viewport width. */
.radar-scope{position:absolute;left:40.797%;top:22.822%;width:18.3975%;height:43.3733%;
  pointer-events:none}
.radar-sweep{position:absolute;inset:0;width:100%;height:100%;transform-origin:50% 50%;
  mix-blend-mode:screen;animation:radar-spin 5.5s linear infinite}
@keyframes radar-spin{to{transform:rotate(360deg)}}

/* Contacts: each lights as the wedge reaches its bearing, then rings out. The delays are
   the sweep's travel time to that bearing (period x degrees/360 from the wedge's rest
   angle of 300deg), so the ping stays locked to the sweep. */
.blip{position:absolute;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;
  background:#FFDCA8;box-shadow:0 0 12px 3px rgba(255,168,74,.85);opacity:0;
  animation:blip-lit 5.5s linear infinite}
.blip::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;
  margin:-4.5px 0 0 -4.5px;border-radius:50%;border:1px solid rgba(255,176,92,.9);
  animation:blip-ring 5.5s linear infinite}
.blip.a{left:24.5%;top:38.1%;animation-delay:4.05s}
.blip.a::after{animation-delay:4.05s}
.blip.b{left:79.9%;top:39.1%;animation-delay:.61s}
.blip.b::after{animation-delay:.61s}
@keyframes blip-lit{0%{opacity:0}3%{opacity:1}24%{opacity:.8}48%{opacity:0}100%{opacity:0}}
@keyframes blip-ring{0%{transform:scale(1);opacity:.85}34%{transform:scale(6);opacity:0}
  100%{transform:scale(6);opacity:0}}

/* Frontdesk. A pulse runs along the sound ribbons, confined by the alpha mask cut by
   frontdesk_wave.py so it reads as signal travelling rather than a band sweeping across
   the picture. Multiply, not screen: the ribbons are already pale peach on near-white, so
   a light pass washes them out — deepening the colour is what actually reads as motion.
   Two pulses half a cycle apart keep the wave alive rather than blinking once a cycle. */
.fd-flow{position:absolute;inset:0;display:block;overflow:hidden;pointer-events:none;
  mix-blend-mode:multiply;
  -webkit-mask-image:url(/station-pages/media/v5/frontdesk-wave.png);
          mask-image:url(/station-pages/media/v5/frontdesk-wave.png);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.fd-flow i{position:absolute;top:0;bottom:0;left:0;width:30%;
  background:linear-gradient(90deg,#fff 0%,#EFA254 50%,#fff 100%);
  animation:fd-flow 3.6s linear infinite}
.fd-flow i:nth-child(2){animation-delay:1.8s}
@keyframes fd-flow{from{transform:translateX(-110%)}to{transform:translateX(340%)}}

/* Slate. keycap.py engraved the Station mark into the floating keycap, then lifted the cap
   off the still and repaired the plate behind it — so the cap is its own sprite and can be
   pressed. At rest it sits back on its exact original pixels, which is also the no-JS and
   reduced-motion state: nothing here needs script. Every number is a % of the art, so the
   cap tracks the plate at any viewport width.

   Four layers move, and they are what make it read as a key rather than a picture sliding:
     .slate-key     the breath — a slow sine drift, on its own clock so it never lines up
                    the same way twice with the press
     .slate-throw   the press itself, nested inside the breath so each owns its easing
                    instead of one keyframe track fighting both
     .slate-contact the shadow tightening under the cap as it arrives. Objects do not read
                    as touching a surface until their shadow does; this is the layer doing
                    most of the work
     .slate-bloom   the light in the well, which the cap has been holding off the plate

   The press is 190ms down and 500ms back: fast in, slow out. A symmetric press feels like
   a slider; the asymmetry is what feels sprung. There is a 2-frame bounce at the bottom
   and the cycle is 7.2s, most of it stillness — a key that taps constantly reads as a
   loading spinner, one that waits reads as a product. */
.slate-key{position:absolute;left:35.25%;top:18.4676%;width:11.6667%;height:20.8251%;
  pointer-events:none;transform:translateZ(0);
  animation:slate-breath 2.9s cubic-bezier(.45,0,.55,1) infinite alternate}
.slate-throw{display:block;width:100%;height:100%;will-change:transform;
  animation:slate-throw 7.2s 1.4s both infinite}
.slate-throw img{display:block;width:100%;height:auto}
/* the cap is lit from underneath in the render, so seating it puts the source closer —
   a second pass of the same (cached) sprite, pre-brightened, cross-faded in on contact.
   Filtering a copy rather than animating a filter keeps this on the compositor. */
.slate-throw img.lit{position:absolute;inset:0;opacity:0;
  filter:brightness(1.05) saturate(1.05);
  animation:slate-lit 7.2s 1.4s both infinite}
@keyframes slate-breath{from{transform:translateY(.55%)}to{transform:translateY(-.55%)}}
@keyframes slate-throw{
  0%,6%   {transform:translateY(0);         animation-timing-function:cubic-bezier(.33,0,.68,1)}
  7.8%    {transform:translateY(-1.3%);     animation-timing-function:cubic-bezier(.42,0,.88,.42)}
  10.3%   {transform:translateY(21.7%);     animation-timing-function:cubic-bezier(.3,0,.2,1)}
  11.2%   {transform:translateY(19.9%);     animation-timing-function:cubic-bezier(.6,0,.7,1)}
  12.1%,15.3%{transform:translateY(21.7%);  animation-timing-function:cubic-bezier(.14,.86,.28,1)}
  22.2%   {transform:translateY(-1.5%);     animation-timing-function:cubic-bezier(.3,0,.3,1)}
  28.2%,100%{transform:translateY(0)}
}
@keyframes slate-lit{
  0%,9.5%{opacity:0}  10.3%{opacity:.45}  15.3%{opacity:.36}  20%,100%{opacity:0}
}
/* Contact shadow. Wide and faint while the cap is up, tight and dark the moment it lands —
   multiply, so it deepens the brushed metal instead of laying grey over it. */
.slate-contact{position:absolute;left:33.3%;top:35.0%;width:15.0%;height:9.8%;
  pointer-events:none;opacity:0;mix-blend-mode:multiply;will-change:transform,opacity;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(104,84,66,.50) 0%, rgba(104,84,66,.20) 42%, rgba(104,84,66,0) 72%);
  animation:slate-contact 7.2s 1.4s both infinite}
@keyframes slate-contact{
  0%,6%{opacity:0;transform:scale(1.38)}
  9.6% {opacity:.5;transform:scale(1.1);  animation-timing-function:cubic-bezier(.3,0,.2,1)}
  10.3%{opacity:1;transform:scale(1)}
  15.3%{opacity:1;transform:scale(1)}
  22.2%,100%{opacity:0;transform:scale(1.32)}
}
/* The well lights as the cap seats. Screen, and it scales as it fades — light that only
   changes opacity reads as a lamp being switched; light that expands reads as an event. */
.slate-bloom{position:absolute;left:33.9%;top:34.3%;width:15.0%;height:9.8%;
  pointer-events:none;opacity:0;mix-blend-mode:screen;will-change:transform,opacity;
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(255,214,160,.55) 0%, rgba(255,196,128,.20) 42%, rgba(255,190,118,0) 74%);
  animation:slate-bloom 7.2s 1.4s both infinite}
@keyframes slate-bloom{
  0%,9%{opacity:0;transform:scale(.72)}
  10.3%{opacity:1;transform:scale(1)}
  12.5%{opacity:.82;transform:scale(1.05)}
  15.3%{opacity:.7;transform:scale(1)}
  20%,100%{opacity:0;transform:scale(1.14)}
}


/* ===================== ROUND 6 ===================== */
/* The 100vw breakouts (bled hero art, the marquee) are centred on their own column, not
   on the viewport, so they push the document ~200px wider than the window — which is what
   made sections look cut off at the edge. `clip` contains them WITHOUT creating a scroll
   container, so the sticky price rail keeps working (overflow:hidden would break it). */
html,body{overflow-x:clip}
/* ---- no hairline under either header: the nav floats on the page ---- */
.nav,.pp-bar{border-bottom:0}
/* ---- demos float: the wrapper behind every "try it" is gone ---- */
.flow-demo{background:none;border:0;border-radius:0;box-shadow:none;overflow:visible;
 padding:34px 0 30px}
.flow-demo::before,.flow-demo::after{display:none;content:none}
.demo-sim,.demo-live{background:none;border:0;box-shadow:none;padding:0}
/* The rule is "no box BEHIND the demo" — the demo's own surface stays. The calendar,
   the phone body and the email compose window are the product, not packaging; stripping
   the calendar's card left it reading as loose numbers on the page. */
/* ---- pricing cards: horizontal, money left, what-you-get right ---- */
.tiers-glass .price-grid{gap:14px}
.tiers-glass .price-card{display:grid;grid-template-columns:minmax(250px,.92fr) 1.08fr;
 gap:clamp(22px,3.4vw,44px);align-items:start;padding:clamp(24px,3vw,34px) clamp(24px,3.4vw,38px);
 text-align:left}
.tiers-glass .pc-l{display:flex;flex-direction:column;gap:2px;min-width:0}
.tiers-glass .pc-r{min-width:0;border-left:1px solid rgba(29,29,31,.09);
 padding-left:clamp(20px,2.6vw,34px);align-self:stretch;display:flex;align-items:center}
.tiers-glass .pc-r ul{margin:0;width:100%}
.tiers-glass .pc-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.tiers-glass .price-card .pv{margin:8px 0 2px}
.tiers-glass .price-card .reframe{margin:2px 0 0}
@media(max-width:940px){
  .tiers-glass .price-card{grid-template-columns:1fr;gap:18px}
  .tiers-glass .pc-r{border-left:0;padding-left:0;border-top:1px solid rgba(29,29,31,.09);padding-top:18px}
}
/* ---- bundles: PRO's saving is the same green as CORE's ---- */
.bcard li.worth,.bcard li.worth.lt{color:var(--good-lite)}
/* ---- integration marquee: true full-viewport, fades match the page (were #fff) ---- */
.integ{overflow:hidden}
/* margin breakout, NOT translateX: .iwrap is also a .rv reveal element, and the reveal
   rules own `transform` — a transform-based breakout gets silently cancelled by .rv.on. */
.integ .iwrap{position:relative;width:100vw;max-width:100vw;
 margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
.iwrap::before,.iwrap::after{width:clamp(40px,7vw,120px)}
.iwrap::before{background:linear-gradient(90deg,var(--bg),rgba(245,244,241,0))}
.iwrap::after{background:linear-gradient(270deg,var(--bg),rgba(245,244,241,0))}
.irow{padding:6px 0}
/* ---- cart bubble: the exact same liquid glass as "Build your line" ---- */
.cartbtn{width:42px;height:42px;border-radius:50%;border:0;color:var(--ink);
 background:rgba(255,255,255,.32);backdrop-filter:blur(14px) saturate(1.5);
 -webkit-backdrop-filter:blur(14px) saturate(1.5);
 box-shadow:0 0 6px rgba(0,0,0,.03),0 2px 6px rgba(0,0,0,.08),
  inset 3px 3px .5px -3px rgba(0,0,0,.55),inset -3px -3px .5px -3px rgba(0,0,0,.5),
  inset 1px 1px 1px -.5px rgba(0,0,0,.35),inset -1px -1px 1px -.5px rgba(0,0,0,.35),
  inset 0 0 6px 6px rgba(0,0,0,.06),inset 0 0 2px 2px rgba(0,0,0,.03),0 0 12px rgba(255,255,255,.6);
 transition:transform .2s,background .2s}
.cartbtn:hover{transform:scale(1.04);background:rgba(255,255,255,.45);border:0}
.cartbtn:active{transform:scale(.985)}
/* ---- HERO: the Osmo layered parallax, in Station white ----
   Four layers stacked in one box; the headline is layer 3, sandwiched between the art.
   Every still was flat-fielded to --bg by whiten_bg.py, so `mix-blend-mode:darken` makes
   each layer's backdrop vanish into the page — the objects composite, the boxes don't. */
.parallax{position:relative;background:var(--bg)}
.parallax__visuals{position:relative;height:100vh;min-height:660px;max-height:1000px;overflow:hidden}
.parallax__layers{position:absolute;inset:0}
/* The plates arrive as PNGs already keyed to transparency and re-toned to white paper by
   make_hero_layers.py, so they need no blend mode and no mask — they just stack, bottom
   anchored, each one wider and darker than the one behind it. */
.parallax__layer-img{position:absolute;display:block;height:auto;pointer-events:none;
 will-change:transform;
 -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
         mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent)}
.parallax__layer-img.pl-1{width:132%;left:-16%;bottom:30%}
.parallax__layer-img.pl-2{width:118%;left:-9%;bottom:6%}
.parallax__layer-img.pl-4{width:108%;left:-4%;bottom:-2%}
/* Layer 3 is the headline — it sits between the mid range and the near ridge, so the
   figure on the summit crosses in front of the type exactly as in the reference. */
.parallax__layer-title{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);
 width:min(var(--wrap),calc(100% - 44px));text-align:center;z-index:2;will-change:transform}
.parallax__layer-title .kicker{font:600 12px var(--fm);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.parallax__title{font:700 var(--d-xl)/1.03 var(--fd);letter-spacing:-.034em;
 max-width:18ch;margin:16px auto 0}
.parallax__layer-title .sub{color:var(--muted);font-size:var(--d-xs);max-width:52ch;margin:18px auto 0}
.parallax__layer-title .hf-ctas{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap}
.parallax__fade{position:absolute;left:0;right:0;bottom:0;height:26%;z-index:3;pointer-events:none;
 background:linear-gradient(180deg,rgba(245,244,241,0),var(--bg) 82%)}
@media(max-width:760px){
  .parallax__visuals{height:88vh;min-height:560px}
  .parallax__layer-img.pl-1{width:170%;left:-35%}
  .parallax__layer-img.pl-2{width:150%;left:-25%}
  .parallax__layer-img.pl-4{width:140%;left:-20%;bottom:-4%}
  /* backdrop-filter is the single most expensive CSS property a phone GPU can run, and
     these glass surfaces sit fixed/pinned directly over the parallax scene while it
     animates on every scroll frame -- on mobile that reads as scroll jank. Desktop keeps
     the live blur (plenty of GPU headroom); phones get a plain higher-opacity fill that
     still reads as translucent glass without the per-frame resample cost. */
  .nav{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(245,244,241,.96)}
  .cartbtn,.hamb{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.85)}
  .btn.glass{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.55)}
  .addcart.in,.pp .addcart.in{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(22,122,68,.42)}
}
@media(prefers-reduced-motion:reduce){.parallax__layer-img,.parallax__layer-title{transform:none!important}
  .parallax__layer-title{transform:translate(-50%,-50%)!important}}

/* ---- shelf cards: a storefront grid, not a row of buttons ----
   Every card used to carry two competing CTAs — an amber "Learn more ›" next to a black
   pill — so fourteen products put twenty-eight buttons on the homepage and the amber
   fought the ink. The card is now ONE link: the whole surface, via a stretched ::after on
   the product name. Adding to the cart survives as a quiet + in the corner of the plate.
   Price moves onto the card, because a shop grid without prices doesn't read as a shop. */
.shelf{gap:clamp(18px,2.2vw,30px) clamp(14px,1.7vw,22px)}
.pcard{position:relative}
.pcard:hover{transform:translateY(-3px)}
/* The fourteen product stills were each shot on their own backdrop, so the row scanned as
   fourteen mismatched rectangles even though the boxes are pixel-identical. The plate
   supplies one shared tone and one shared hairline edge for all of them — that edge is
   what makes them read as a set. Stills are 16:9 and centre-weighted, so a 3:2 plate
   tightens the crop without clipping any product. */
.pcard .im{position:relative;aspect-ratio:3/2;border-radius:18px;background:var(--card);
 box-shadow:inset 0 0 0 1px rgba(29,29,31,.06)}
.pcard .im img{width:100%;height:100%;object-fit:cover;border-radius:inherit}
.pcard .bd{padding:14px 2px 0;text-align:left;gap:3px}
.pcard .nm{font:600 17px var(--fd);letter-spacing:-.017em;color:var(--ink);text-decoration:none}
.pcard .nm::after{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none}
.pcard .pl{font-size:13.5px;color:var(--muted);line-height:1.42;min-height:0}
/* margin-top:auto pins the price to the bottom of the body, so prices stay on one line
   across a row even when one product's descriptor wraps and its neighbours' don't. */
.pcard .pr{margin-top:auto;padding-top:9px;font:500 13.5px var(--fd);color:var(--ink);
 font-variant-numeric:tabular-nums;letter-spacing:-.008em}
/* The base .pr small is a stacked uppercase micro-caption built for the old price block.
   Every one of those properties has to be named to undo it — setting only font/colour left
   the unit sitting UPPERCASE on its own line under the number. */
.pcard .pr small{display:inline;font:inherit;color:var(--faint);letter-spacing:inherit;
 text-transform:none;margin:0}
/* .shelf-h's `margin:44px 0 14px` wiped the `margin:0 auto` it inherits from .wrap, so
   every section heading sat flush against the viewport while its own grid stayed centred
   ~75px to the right. Only the block margins belong in that shorthand. */
.shelf-h{margin:44px auto 14px}
/* the quiet add — a plus that only asks for attention on hover, a tick once it's in */
.pcard .qadd{position:absolute;right:10px;top:10px;z-index:2;width:32px;height:32px;padding:0;
 display:grid;place-items:center;border-radius:999px;font:400 17px/1 var(--fb);
 background:rgba(255,255,255,.84);color:var(--ink);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 box-shadow:0 1px 2px rgba(29,29,31,.10),0 6px 16px rgba(29,29,31,.10);
 opacity:0;transform:scale(.9);
 transition:opacity .2s,transform .2s,background .2s,color .2s}
.pcard .qadd::before{content:"+"}
.pcard:hover .qadd{opacity:1;transform:none}
.pcard .qadd:focus-visible{opacity:1;transform:none;outline:2px solid var(--ink);outline-offset:2px}
.pcard .qadd:hover{background:#fff}
.pcard .qadd.in{opacity:1;transform:none;background:var(--good);color:#fff}
.pcard .qadd.in::before{content:"\2713"}
/* touch has no hover state, so the add would be unreachable there */
@media(hover:none){.pcard .qadd{opacity:1;transform:none}}
/* Fourteen products stacked one-up is a very long phone scroll and stops reading as a
   catalogue. Two-up keeps it scannable; the price staying pinned to the bottom of the body
   keeps a row even when one descriptor wraps to two lines and its neighbour doesn't. */
@media(max-width:560px){
  .shelf,.shelf.c3{grid-template-columns:1fr 1fr}
  .pcard .im{border-radius:12px}
  .pcard .bd{padding-top:11px}
  .pcard .nm{font-size:15px}
  .pcard .pl{font-size:12px}
  .pcard .pr{font-size:13.5px;padding-top:7px}
  /* the note can't share a baseline row with the heading in 390px — it forced "The phone."
     to break across two lines while the note sat beside it */
  .shelf-h{flex-direction:column;align-items:flex-start;gap:2px;margin-top:34px}
}
/* Belt and braces on the add button: `hover:none` is the correct signal but some touch
   devices report `hover:hover`, and an add-to-cart that never becomes visible is a dead
   control. At phone widths it is simply always shown. */
@media(max-width:760px){.pcard .qadd{opacity:1;transform:none}}


/* ===================== HIT TARGETS =====================
   WCAG 2.2 SC 2.5.8 floor is 24x24 CSS px; 44 is the Apple/Material target. Inline
   links in prose are exempt (2.5.8) and are left at their natural size. Everything
   below grows the HIT box only — nothing moves, nothing is redrawn larger. */

/* The whole-card link the shelf comment describes. The stretched ::after was set to
   pointer-events:none, so the "one link, the whole surface" card was in practice a
   285x20 text link and clicks on the image or the price hit nothing at all.
   .qadd sits at z-index:2, so the quiet + still wins over the card link. */
.pcard .nm::after{pointer-events:auto}
.pcard .nm:focus-visible::after{outline:2px solid var(--ink);outline-offset:3px}

/* the quiet add: stays 32px drawn, 44px to the finger */
.pcard .qadd::after{content:"";position:absolute;inset:-6px;border-radius:inherit}

/* Quiz-shelf "learn" was the worst target on the site at 32x14. Deliberately NOT taken
   to 44 tall: .t-hit is a label covering the whole tile, and "learn" paints above it,
   so an oversized box would start stealing row-selection clicks from the checkbox.
   44x30 clears the 24x24 floor with room and leaves the tile behaving as designed. */
.tile .t-ttl a{display:inline-block;min-width:44px;text-align:center;
 padding:8px 6px;margin:-8px -6px}

/* Selection rows: the 17px box is not the target — .t-hit is a label covering the
   whole row — but the box itself should still clear the 24px floor on its own. */
.tile input{width:24px;height:24px}
.tile .t-hit{min-height:44px}

/* consent checkboxes were 13x13 */
.consent input{width:24px;height:24px}
.consent label,.consent{min-height:44px}

/* "SMS terms", "Privacy", "Cookie notice" — inline links inside consent copy. 2.5.8
   exempts inline links, but these sit in dense small print where a miss is costly, so
   they get a taller box without disturbing the line: padding cancelled by margin. */
.consent a,.ck-txt a{display:inline-block;padding:6px 3px;margin:-6px -3px}

/* footer: social pills to 44, legal links padded, and the legal colour lifted off
   rgba(255,255,255,.35) = 3.19:1, which failed AA at 12px */
.f-soc a{width:44px;height:44px}
.f-legal a{display:inline-block;padding:11px 2px;margin:-11px -2px}

/* skip link and cart close */
a.skip{display:inline-block;padding:12px 16px}
.c-x{min-width:44px;min-height:44px}

/* Touch only: desktop keeps its density, coarse pointers get the full 44. */
@media(pointer:coarse){
  .q-chip,.faq-tab,.btn.sm,.navbtn,.cartbtn,.hamb,.nav-links a,.f-legal a{min-height:44px}
  .nav-links a,.f-legal a{display:inline-flex;align-items:center}
}


/* ===================== FORM CONTROLS =====================
   button/input/select/textarea do not inherit font by default, so 17 controls on the
   homepage — the cart button, all fourteen shelf checkboxes, both cookie-bar buttons —
   were rendering at Chrome's 13.333px UA default in the UA font, on a page that is
   otherwise entirely Inter. */
button,input,select,textarea{font:inherit;color:inherit}


/* ===================== CONSENT BANNER =====================
   analytics.js builds #ck and appends it to <body> with no styles of its own, and
   nothing here ever styled it — so it shipped as a static div of UA buttons below the
   footer.
   Shaped to match .cookiebar (v5.css:536), the other consent card this site already
   uses: a compact card in the bottom-left corner, not a full-width bar. A full-width
   bar puts a legal notice on the same visual footing as the page's own content and
   blocks the whole bottom row; the corner card says the same thing without taking the
   floor.
   analytics.js adds `up` two frames after append and removes it 400ms before the
   element is destroyed, so the transition is timed to that. */
#ck{position:fixed;left:14px;right:auto;bottom:14px;z-index:95;max-width:420px;
 display:flex;flex-direction:column;gap:12px;
 background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px 18px;
 box-shadow:0 18px 50px rgba(29,29,31,.16);
 transform:translateY(calc(100% + 20px));transition:transform .4s cubic-bezier(.2,.7,.3,1)}
#ck.up{transform:none}
@media(prefers-reduced-motion:reduce){#ck{transition:none}}
#ck .ck-txt{color:var(--muted);font-size:12.5px;line-height:1.5}
#ck .ck-txt b{color:var(--ink);font-weight:600}
#ck .ck-txt a{color:var(--accent);font-weight:600}
#ck .ck-actions{display:flex;gap:10px}
#ck .ck-accept,#ck .ck-min{flex:1;font:600 13.5px var(--fd);border-radius:999px;cursor:pointer;
 padding:0 18px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;
 transition:background .15s,border-color .15s}
#ck .ck-accept{background:var(--ink);color:#fff;border:0;
 box-shadow:inset 0 1px 1px rgba(255,255,255,.28), inset 0 -2px 6px rgba(0,0,0,.35),
  0 2px 6px rgba(0,0,0,.14)}
#ck .ck-accept:hover{background:#000}
#ck .ck-min{background:#fff;color:var(--ink);border:1px solid var(--line);box-shadow:none}
#ck .ck-min:hover{border-color:var(--muted)}
#ck .ck-accept:focus-visible,#ck .ck-min:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
/* the chat fab lives bottom-RIGHT, so the corner card never collides with it */
@media(max-width:560px){
  #ck{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));max-width:none}
  /* compact consent on phones: swap the paragraph for one accurate line (2026-08-31 audit) */
  #ck .ck-long{display:none}
  #ck .ck-short{display:inline!important}
}


/* ===================== HERO LEGIBILITY =====================
   The sub-paragraph sits on bare granite. The type deliberately overlaps the range
   (see the layer-3 note above), so rather than moving anything, a soft scrim sits
   behind the title block: opaque enough at the centre to carry small text, fully gone
   by 78% so the ridge and the summit figure still read through.
   z-index:-1 keeps it inside .parallax__layer-title's own stacking context — behind
   its text, still above the parallax plates. */
.parallax__layer-title{isolation:isolate}
.parallax__layer-title::before{content:"";position:absolute;z-index:-1;pointer-events:none;
 left:50%;top:50%;transform:translate(-50%,-50%);
 width:min(1040px,124%);height:min(620px,168%);
 background:radial-gradient(ellipse at center,
   rgba(245,244,241,.94) 0%,
   rgba(245,244,241,.88) 34%,
   rgba(245,244,241,.62) 56%,
   rgba(245,244,241,.24) 70%,
   rgba(245,244,241,0) 80%)}
/* one step darker than --muted: the scrim is translucent, so the effective ground under
   this line is a little darker than a flat panel would be */
.parallax__layer-title .sub{color:rgba(29,29,31,.88)}
@media(max-width:560px){
  .parallax__layer-title::before{width:150%;height:150%;
   background:radial-gradient(ellipse at center,
     rgba(245,244,241,.96) 0%,
     rgba(245,244,241,.9) 44%,
     rgba(245,244,241,.5) 66%,
     rgba(245,244,241,0) 82%)}
}


/* ===================== AUDIT FORM HEADING =====================
   .af-h is a <p> dressed as a heading. v5.css:608 gives it `margin:0 0 4px` — the tight
   4px below is deliberate (it binds the heading to the "Eleven checks ..." line under
   it), but the 0 above left it butted straight onto the preceding paragraph, reading as
   a run-on rather than the start of the form.
   Selector matches .audit-form .af-h so it actually outranks that shorthand. */
.audit-form .af-h{margin-top:34px}


/* ===================== BUY BUTTON, TOUCH =====================
   The coarse-pointer pass in HIT TARGETS covered chips, tabs, nav and footer links but
   not .addcart — so the product page's buy button was 331x40 on a phone, the shortest
   primary button on the page and the one at the end of the funnel. A mis-tap here costs
   a sale, so it gets the comfortable size rather than the compliant one. */
@media(pointer:coarse){
  .pp .addcart{min-height:48px}
  .addcart,.pp-bar .btn,.cart .c-go,.co-add,.co-card .co-pay{min-height:44px}
}

/* ---- 2026-08-31 audit additions ---- */
/* footer column labels were h4 directly under h2 sections (heading-level skip). They
   are h3 now; this pins them to the UA's h4 metrics so only semantics changed. */
.ftcol{font-size:1em;font-weight:bold;margin:1.33em 0}
/* placeholders inherited the UA grey, under 4.5:1 on the cream ground; the examples
   are part of the form's voice, so they clear AA like every other text step. */
::placeholder{color:var(--faint);opacity:1}
/* the SMS-consent sentence ran the full grid width (~1280px at 13px). */
.consent span{max-width:74ch}