/* ===== the site nav (from v5.css): mega menus, search, cart, phone menu ===== */
:root{--card:#FFFFFF;--bg-2:#FAF9F6;--bg-3:#F1EFE9;--line:#E7E4DE;--line-2:#DDD9D0;--ink:#1D1D1F;--muted:#5F5F64;--faint:#6E6E73;--good:#167A44;--good-bg:#EDF6F0;--good-lite:#7ED9A7;--red:#C03B2B;--fd:'Inter','Segoe UI',system-ui,sans-serif;--fb:'Inter','Segoe UI',system-ui,sans-serif;--fm:'JetBrains Mono',Consolas,ui-monospace,monospace;--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;--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);--r-xs:8px;--r-sm:12px;--r:18px;--r-lg:26px;--r-xl:36px;--r-pill:999px;--dark:#101113;--glassb:rgba(255,255,255,.10);--wrap:1320px;--v5accent:#16181D}
.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 13px var(--fd);letter-spacing:.13em;text-decoration:none;color:var(--ink)}
.srow label{display:flex;justify-content:space-between;font-size:15px;color:var(--muted);margin-bottom:8px}
.srow label output{font:600 15px var(--fm);color:var(--ink)}
.srow input[type=range]{width:100%;accent-color:var(--ink);height:22px;cursor:pointer}
.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:15px;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 13px 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(--v5accent)}
.msmall{display:block;font:500 15px/1.4 var(--fb);color:var(--muted);text-decoration:none;padding:4px 0}
.msmall:hover{color:var(--ink)}
.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 12px/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}
.f-brand .home{color:#fff!important}
.nav.hide .mega{display:none!important}
.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)}
.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)}
.searchbtn{display:inline-flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
 font:500 15px 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}
.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:13px;color:var(--muted)}
.sb-res a:hover,.sb-res a:focus-visible{background:#fff}
.sb-none{padding:10px 14px;font-size:15px;color:var(--muted)}
.sb-none a{color:var(--v5accent)}
.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)}
@media(max-width:760px){.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)}}
@media(pointer:coarse){.q-chip,.faq-tab,.btn.sm,.navbtn,.cartbtn,.hamb,.nav-links a,.f-legal a{min-height:44px}}
.nav .btn,.navbtn{min-height:44px;padding:9px 18px;font-size:15px!important}
.nav a.home{min-height:44px}
.cartbtn,.hamb{width:44px;height:44px}
.searchf:focus-within,.sb-in:focus-within{outline:2px solid var(--ink);outline-offset:2px}
.mbig .mbrand{font-size:13px;font-weight:500;opacity:.55;margin-left:6px;letter-spacing:0}
/* ===== end site nav ===== */
/* THE BOOK · Station Products. An appointment-book page: hour rail left, scenes in their hour, one phone pinned right showing the client app. The ground goes from day paper to night ink as the Tuesday passes. Accent: bronze on light ground, copper on dark. No yellow anywhere. */
:root{
 --paper:#F4F2ED;--ink:#16181D;--night:#0B0D10;--night-fg:#E8E6E1;
 --live:#2FBF71;
 --bg:#F4F2ED;--fg:#16181D;--mute:#6B665B;--rule:#D9D4C7;--accent:#16181D;--pane:#FBFAF6;--onaccent:#F4F2ED;
 --display:Archivo,ui-sans-serif,system-ui,sans-serif;--body:Geist,ui-sans-serif,system-ui,sans-serif;--mono:"Geist Mono",ui-monospace,Menlo,monospace;
 color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--fg);font:15px/1.5 var(--body);-webkit-font-smoothing:antialiased;transition:color .35s ease}
body.dark{color-scheme:dark}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:800;font-variation-settings:"wdth" 110;letter-spacing:-.03em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:normal;font-weight:400;font-variation-settings:"wdth" 92;letter-spacing:-.02em;color:var(--fg);opacity:.86}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:8px 12px}
.skip:focus{left:8px;z-index:99}
.mono{font-family:var(--mono)}
.tab{font-family:var(--body);font-size:12.5px;letter-spacing:0;color:var(--mute)}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* nav */
.nav{position:absolute;top:0;left:0;right:0;z-index:30;color:#F4F2ED;transition:background .35s ease,color .35s ease}
.nav.solid{position:fixed;color:var(--fg);background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 var(--rule)}
.nav.hide{transform:translateY(-100%)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:999px;font:500 14px var(--body);border:1px solid var(--fg);min-height:44px;cursor:pointer;background:transparent;color:var(--fg)}
.btn.fill{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.btn.fill:hover{filter:brightness(1.08)}
/* the site nav, on the painting: no bar until the page scrolls past the hero */
:root{--fd:Archivo,ui-sans-serif,system-ui,sans-serif;--fb:Geist,ui-sans-serif,system-ui,sans-serif;--wrap:1240px}
.nav a.home{font:700 13px var(--fb);letter-spacing:.13em}
.nav .mark{color:currentColor}
.mbig{font:800 22px/1.35 var(--fd);font-variation-settings:"wdth" 105}
.nav:not(.solid) .home,.nav:not(.solid) .mtop,.nav:not(.solid) .searchbtn,.nav:not(.solid) .hamb{color:#F4F2ED;text-shadow:0 1px 10px rgba(11,13,16,.5)}
.nav:not(.solid) .mtop:hover,.nav:not(.solid) .searchbtn:hover{color:#fff}
.nav:not(.solid) .navbtn,.nav:not(.solid) .cartbtn,.nav:not(.solid) .hamb{color:#F4F2ED;background:rgba(11,13,16,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 0 0 1px rgba(244,242,237,.34),0 6px 18px rgba(11,13,16,.22);text-shadow:none}
.nav:not(.solid) .navbtn:hover,.nav:not(.solid) .cartbtn:hover,.nav:not(.solid) .hamb:hover{background:rgba(11,13,16,.34)}
.nav .mega,.nav .mega a,.nav .mega span{text-shadow:none}
.nav.solid .home,.nav.solid .mark{color:var(--fg)}
@media(max-width:760px){.nav:not(.solid) .cartbtn,.nav:not(.solid) .hamb,.nav:not(.solid) .navbtn{background:rgba(11,13,16,.42)}}
@media (max-width:480px){.nav a.home span{display:none}}
/* PAINTING HERO */
.phero{position:relative;min-height:min(92svh,860px);display:flex;flex-direction:column;justify-content:flex-start;color:#F4F2ED;overflow:hidden;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.phero .art{position:absolute;inset:0;z-index:0}
.phero .art img{width:100%;height:100%;object-fit:cover;object-position:55% 72%;display:block}
.phero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,13,16,.55) 0%,rgba(11,13,16,.38) 30%,rgba(11,13,16,0) 62%);pointer-events:none}
.phero .copy{position:relative;z-index:2;text-align:center;max-width:900px;margin:0 auto;padding-top:calc(64px + clamp(32px,6vh,80px));padding-bottom:48px}
.phero .copy:before{content:"";position:absolute;inset:-10% -20% -6%;z-index:-1;background:radial-gradient(ellipse at 50% 40%,rgba(11,13,16,.5) 0%,rgba(11,13,16,.25) 45%,rgba(11,13,16,0) 72%);pointer-events:none}
.phero h1{font-size:clamp(42px,7vw,92px);line-height:.98;text-shadow:0 2px 4px rgba(11,13,16,.45),0 4px 40px rgba(11,13,16,.4)}
.phero h1 em{color:inherit;opacity:.92}
.phero p{margin:18px auto 0;max-width:40ch;font-size:18px;line-height:1.5;text-shadow:0 1px 3px rgba(11,13,16,.7),0 2px 18px rgba(11,13,16,.5)}
.phero .ctas{display:flex;gap:14px;justify-content:center;align-items:center;margin-top:26px;flex-wrap:wrap}
.phero .btn.fill{background:#F4F2ED;color:#16181D;border-color:#F4F2ED}
.phero .btn.glass{color:#F4F2ED;border:1px solid rgba(244,242,237,.4);background:rgba(11,13,16,.26);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2)}
.phero .eyebrow{font:500 15px/1.4 var(--body);letter-spacing:.01em;margin:0 auto 16px;max-width:none;opacity:.95}
.phero .lines{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:16px}
.phero .proofline,.phero .geoline{flex:0 0 auto;max-width:none;display:inline-flex;align-items:center;gap:6px;margin:0;font:400 13px/1 var(--body);letter-spacing:.005em;padding:0 12px;min-height:32px;border-radius:999px;border:1px solid rgba(244,242,237,.32);background:rgba(11,13,16,.26);backdrop-filter:blur(10px) saturate(1.2);-webkit-backdrop-filter:blur(10px) saturate(1.2);white-space:nowrap;text-shadow:none}
.phero .geoline a{text-decoration:none;color:#F4F2ED;font-weight:600;min-height:0;border-bottom:1px solid rgba(244,242,237,.5)}
.phero .geoline a:hover{border-bottom-color:#F4F2ED}
/* liquid glass bubbles on the painting (after the old site's .btn.glass, tuned for a dark ground) */
.phero .btn.glass,.phero .proofline,.phero .geoline,.nav:not(.solid) .navbtn,.nav:not(.solid) .cartbtn,.nav:not(.solid) .hamb{
 color:#F4F2ED;border:0;
 background:linear-gradient(180deg,rgba(255,255,255,.24) 0%,rgba(255,255,255,.07) 55%,rgba(255,255,255,.12) 100%),rgba(11,13,16,.30);
 backdrop-filter:blur(16px) saturate(1.7);-webkit-backdrop-filter:blur(16px) saturate(1.7);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.16),inset 0 0 0 1px rgba(255,255,255,.22),
  inset 0 -12px 18px -14px rgba(255,255,255,.45),inset 0 10px 14px -12px rgba(255,255,255,.35),0 10px 26px -8px rgba(11,13,16,.45);
 text-shadow:0 1px 2px rgba(11,13,16,.35);transition:transform .2s cubic-bezier(.2,.7,.3,1),background .2s}
.phero .btn.glass:hover,.nav:not(.solid) .navbtn:hover,.nav:not(.solid) .cartbtn:hover,.nav:not(.solid) .hamb:hover{transform:scale(1.04);background:linear-gradient(180deg,rgba(255,255,255,.32) 0%,rgba(255,255,255,.1) 55%,rgba(255,255,255,.16) 100%),rgba(11,13,16,.30)}
.phero .btn.glass:active,.nav:not(.solid) .navbtn:active{transform:scale(.985)}
.phero .btn.fill{color:#16181D;border:0;background:linear-gradient(180deg,#FFFFFF 0%,#F4F2ED 60%,#E8E6E1 100%);
 box-shadow:inset 0 1px 0 #fff,inset 0 -2px 6px -2px rgba(11,13,16,.14),inset 0 0 0 1px rgba(255,255,255,.7),0 10px 26px -8px rgba(11,13,16,.5);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.phero .btn.fill:hover{transform:scale(1.04);filter:none}
.phero .btn.fill:active{transform:scale(.985)}
.phero .proofline,.phero .geoline{min-height:34px;padding:0 14px}
@media (prefers-reduced-motion:reduce){.phero .btn,.nav .navbtn,.nav .cartbtn,.nav .hamb{transition:none}.phero .btn:hover,.nav .navbtn:hover,.nav .cartbtn:hover,.nav .hamb:hover{transform:none}}

.live{display:grid;grid-template-columns:7fr 5fr;gap:32px;padding-block:36px;align-items:stretch}
.bizpick{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--mute)}
.bizpick span{margin-right:6px}
.bizpick button{font:500 14px var(--body);background:transparent;color:var(--fg);border:1px solid var(--rule);border-radius:999px;padding:0 14px;min-height:40px;cursor:pointer}
.bizpick button[aria-pressed=true]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.bizpick button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.live .side{display:flex;flex-direction:column;gap:14px}
.live .side .pains{flex:1}
.start{border-top:1px solid var(--rule);padding:16px 0 0;display:grid;gap:6px}
.start b{font:800 22px/1.1 var(--display);font-variation-settings:"wdth" 105;letter-spacing:-.02em}
.start span{color:var(--mute);font-size:14px}
.start a{color:var(--accent);font-weight:500;font-size:14px;min-height:44px;display:inline-flex;align-items:center}
.live .pains{margin-top:0}
/* HERO (retired layout kept for reference) */
.hero{display:grid;grid-template-columns:5fr 7fr;grid-template-rows:auto 1fr;gap:22px 32px;padding-block:40px 36px;align-items:start}
.hero .pane{grid-column:2;grid-row:1/3}
.hero .pains{grid-column:1;margin-top:0}
.hero h1{font-size:clamp(40px,5.8vw,70px);line-height:.98}
.hero .lede{color:var(--mute);margin-top:14px;font-size:16px;max-width:40ch}
.hero .ctas{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}
.pains{display:grid;margin-top:22px;border-top:1px solid var(--rule)}
.pains a,.pains button{display:grid;grid-template-columns:1fr auto;gap:12px;padding:11px 14px;border:0;border-bottom:1px solid var(--rule);font:inherit;font-size:14px;align-items:center;min-height:44px;background:transparent;color:inherit;text-align:left;cursor:pointer;width:100%}
.pains>*:last-child{border-bottom:0}
.pains a:hover,.pains button:hover{background:var(--pane)}
.pains b{font-weight:500}
.pains .pr{font-family:var(--mono);font-size:12px;color:var(--mute)}
.pains em{font-style:normal;color:var(--accent);font-family:var(--mono);font-size:11px;display:block}
.pane{background:var(--pane);border:1px solid var(--rule);display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr 1fr;font-size:13px;min-height:500px}
.pane>div{border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 16px;overflow:hidden;min-width:0}
.pane>div:nth-child(2n){border-right:0}
.pane .top{grid-column:1/3;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;padding:10px 16px;color:var(--mute);font:400 13px var(--body)}
.pane .clock{font:800 22px var(--display);letter-spacing:-.02em;color:var(--fg);font-variant-numeric:tabular-nums}
.tally{display:flex;gap:22px;flex-wrap:wrap}
.tally b{display:block;color:var(--fg);font-weight:500;font-size:16px;font-variant-numeric:tabular-nums}
.label{display:flex;justify-content:space-between;font:500 12.5px var(--body);color:var(--mute);margin-bottom:10px}
.label .who{color:var(--fg)}
.bubble{max-width:84%;padding:7px 11px;border:1px solid #D9D4C7;border-radius:12px;margin-bottom:7px;background:#fff;color:#16181D;opacity:0;transform:translateY(6px);transition:.4s}
.bubble.me{margin-left:auto;background:#16181D;color:#F4F2ED;border-color:#16181D}
.bubble.on{opacity:1;transform:none}
.cal{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.cal .d{font:500 11px var(--body);color:var(--mute);text-align:center}
.cal .s{height:20px;border:1px solid var(--rule);background:#fff;border-radius:2px}
.cal .s.busy{background:var(--rule)}
.cal .s.new{background:var(--accent);border-color:var(--accent);transform:scaleY(0);transform-origin:top;transition:.4s}
.cal .s.new.on{transform:none}
.review{margin-top:10px;border:1px solid #D9D4C7;background:#fff;color:#16181D;padding:9px 11px;opacity:0;transition:.5s;font-size:12.5px}
.review.on{opacity:1}
.stars{color:var(--fg);letter-spacing:2px}
.log{list-style:none}
.log li{display:flex;gap:10px;padding:4px 0;border-bottom:1px dashed var(--rule);color:var(--mute);transition:.3s;font-size:12.5px}
.log li.on{color:var(--fg)}.log li.hot{color:var(--accent);font-weight:500}
.log li .t{font-family:var(--mono);width:52px;flex:none;color:var(--mute)}
.log li.hot .t{color:var(--accent)}
/* THE BOOK */
.bookhead{padding-block:18px 10px}
.book{display:grid;grid-template-columns:150px 1fr 340px;gap:0 32px;border-top:1px solid var(--rule);position:relative}
.rail{position:relative}
.rail .rclock,.rail .rtally{position:sticky}
.rail .rclock{top:calc(76px + env(safe-area-inset-top,0px));font:800 34px var(--display);letter-spacing:-.04em;line-height:1;padding-top:30px;font-variant-numeric:tabular-nums;color:var(--accent);transition:color .35s}
.rail .rclock small{display:block;font:10px var(--mono);color:var(--mute);letter-spacing:.08em;margin-top:6px}
.rail .rtally{top:calc(160px + env(safe-area-inset-top,0px));margin-top:22px;border-top:1px solid var(--rule)}
.rail .rtally div{display:flex;justify-content:space-between;gap:6px;padding:7px 0;border-bottom:1px solid var(--rule);font:11px var(--mono);color:var(--mute);letter-spacing:.04em;text-transform:uppercase}
.rail .rtally b{font-weight:500;color:var(--fg);font-variant-numeric:tabular-nums;transition:color .3s}
.rail .rtally b.tick{color:var(--accent)}
.scene{padding-block:28px 34px;border-bottom:1px solid var(--rule);display:grid;gap:12px;transition:border-color .35s}
.scene .when{font:500 14px/1 var(--body);color:var(--accent)}
.scene h2{font-size:clamp(28px,3.4vw,44px);line-height:1.02;max-width:16ch}
.scene p{color:var(--mute);max-width:52ch;font-size:16px}
.frames{display:grid;grid-template-columns:1fr 1fr 1fr;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);min-width:0;transition:border-color .35s}
.frames>div{padding:12px 16px 12px 0;margin-right:16px;border-right:1px solid var(--rule);min-width:0;font-size:13px}
.frames>div:last-child{border-right:0;margin-right:0;color:var(--accent)}
.frames .tab{display:block;margin-bottom:5px}
.frames>div:last-child .tab{color:var(--mute)}
.frames b{font-weight:600;color:var(--accent)}
.frames .mini{display:inline-block;padding:4px 8px;border:1px solid #D9D4C7;border-radius:9px;background:#fff;color:#16181D;font-size:12px}
.frames .mini.me{background:#16181D;color:#F4F2ED;border-color:#16181D}
.buy{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:14px;padding-top:4px}
.buy .n{font:800 20px var(--display);font-variation-settings:"wdth" 105;letter-spacing:-.02em}
.buy .n small{font:13px var(--body);color:var(--mute);margin-left:8px;letter-spacing:0}
.buy a{color:var(--accent);font-weight:500;min-height:44px;display:inline-flex;align-items:center}
.inphone{display:none;border:1px solid var(--rule);background:var(--pane);padding:12px;font-size:12.5px}
.inphone .tab{display:block;margin-bottom:8px}
/* phone, pinned */
.phone{position:sticky;top:calc(72px + env(safe-area-inset-top,0px));margin-top:28px;margin-bottom:40px;width:300px;max-width:100%;aspect-ratio:9/19;border-radius:36px;background:#16181D;padding:10px}
.phone .scr{background:#F4F2ED;color:#16181D;border-radius:28px;height:100%;overflow:hidden;display:grid;grid-template-rows:auto 1fr;font-size:12.5px}
.phone .sbar{display:flex;justify-content:space-between;padding:12px 18px 6px;font-family:var(--mono);font-size:11px;color:#6B665B}
.phone .app{padding:8px 14px 14px;display:grid;grid-template-rows:auto 1fr;gap:8px;min-height:0}
.phone .apphead{display:flex;justify-content:space-between;align-items:center;font-weight:600;font-size:13px}
.phone .apphead span{font:500 10px var(--body);color:#6B665B;letter-spacing:.04em}
.phone .view{display:none;min-height:0;overflow:hidden}
.phone .view.on{display:block}
.phone .thread{display:grid;gap:6px}
.phone .thread .bubble{opacity:1;transform:none;margin:0;font-size:12px;padding:6px 10px}
.phone .ts{font-family:var(--mono);font-size:10px;color:#6B665B;text-align:center;margin-block:2px}
.phone .row{display:flex;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid #E6E1D5;font-size:12px}
.phone .row b{font-weight:600}
.phone .pill{font:500 10px var(--body);padding:2px 7px;border-radius:999px;background:#16181D;color:#fff;white-space:nowrap}
.phone .pill.g{background:#2FBF71;color:#0B0D10}
.phone .tr{font-size:12px;line-height:1.45;color:#2a2c33}
.phone .tr b{color:#16181D;font-weight:600;font-family:var(--mono);font-size:10px;letter-spacing:.06em;display:block;margin-top:6px}
.phone .cap{font-family:var(--mono);font-size:10px;color:#6B665B;margin-top:8px;letter-spacing:.06em}
.phone .big{font:500 30px var(--display);letter-spacing:-.02em;margin-top:6px}
.phone .big small{display:block;font:11px var(--mono);color:#6B665B;letter-spacing:.06em;margin-top:2px}
.phone .wk{display:grid;grid-template-columns:repeat(5,1fr);gap:3px;margin-top:8px}
.phone .wk i{display:block;height:18px;border:1px solid #D9D4C7;background:#fff;border-radius:2px}
.phone .wk i.b{background:#D9D4C7}.phone .wk i.n{background:#16181D;border-color:#16181D}
/* 9 PM */
.final{position:relative;padding-block:12vh 10vh;display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;min-height:min(90svh,820px);color:#E8E6E1;margin-inline:calc(50% - 50vw);padding-inline:max(calc(50vw - 50%),16px);overflow:hidden}
.final .art{position:absolute;inset:0;z-index:0}
.final .art img{width:100%;height:100%;object-fit:cover;object-position:center 78%;display:block}
.final:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(11,13,16,.05) 0%,rgba(11,13,16,0) 35%,rgba(11,13,16,.82) 100%)}
.final>div{position:relative;z-index:2}
.final .nums,.final .nums div{border-color:rgba(232,230,225,.3)}
.final .nums .tab,.final p{color:#c9c4b8}
.final .btn{color:#E8E6E1;border-color:#E8E6E1}
.final .btn.fill{background:#E8E6E1;color:#0B0D10;border-color:#E8E6E1}
.final h2{font-size:clamp(34px,4.8vw,60px);line-height:1;text-shadow:0 2px 24px rgba(11,13,16,.5)}
.final h2 em{color:#E8E6E1}
.final .nums{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.final .nums div{padding:14px 16px;border-right:1px solid var(--rule)}
.final .nums div:last-child{border-right:0}
.final .nums b{display:block;font:800 34px var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.final p{color:var(--mute);margin-top:14px;max-width:46ch;font-size:16px}
.final .ctas{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap;align-items:center}
.final .ctas a:not(.btn){color:var(--accent);font-weight:500;min-height:44px;display:inline-flex;align-items:center}
/* sections */
.sec{padding-block:44px;border-top:1px solid var(--rule)}
.sec h2{font-size:clamp(28px,3.6vw,42px);line-height:1.04}
.sec .lede{color:var(--mute);margin-top:8px;max-width:58ch}
.bundles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);margin-top:22px}
.bundle{display:grid;grid-template-rows:auto auto auto 1fr auto;row-gap:0;padding:22px 24px 24px 0;margin-right:24px;border-right:1px solid var(--rule);min-width:0}
.bundle:last-child{border-right:0;margin-right:0;padding-right:0}
.bundle .tab{font:500 13px var(--body);color:var(--mute);min-height:20px}
.bundle.best .tab{color:var(--fg)}
.bundle h3{font-size:26px;margin-top:8px}
.bundle .price{font:800 34px var(--display);font-variation-settings:"wdth" 105;letter-spacing:-.03em;margin-top:8px}
.bundle .price small{font:13px var(--body);color:var(--mute)}
.bundle ul{list-style:none;margin-top:14px;align-self:start;color:var(--fg);font-size:14.5px}
.bundle ul li{padding:7px 0;border-top:1px solid var(--rule);line-height:1.35}
.bundle ul li:last-child{border-bottom:1px solid var(--rule)}
.bundle ul li:before{content:none}
.bundle .worth{font-size:13px;line-height:1.5;color:var(--mute);margin-top:14px;height:3em;align-self:end;overflow:hidden}
.bundle .btn{justify-content:center;margin-top:12px}
.bundle .btn.o{background:transparent;color:var(--fg);border:1px solid var(--fg)}
.plans{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.plan-row{display:grid;grid-template-columns:repeat(3,1fr)}
.plan-h{display:grid;grid-template-columns:auto 1fr 24px;align-items:center;gap:14px;padding:16px 24px 16px 0;margin-right:24px;min-height:60px;border:0;border-right:1px solid var(--rule);background:transparent;color:var(--fg);font:inherit;text-align:left;cursor:pointer;transition:background .2s}
.plan-h:last-child{border-right:0;margin-right:0;padding-right:0}
.plan-h:hover .plan-n{text-decoration:underline;text-underline-offset:4px}
.plan-h[aria-expanded=true]{box-shadow:inset 0 -2px 0 var(--fg)}
.plan-h:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}
.plan-n{display:flex;align-items:baseline;gap:8px;font:800 22px/1 var(--display);font-variation-settings:"wdth" 105;letter-spacing:-.02em;white-space:nowrap}
.plan-n small{font:500 14px/1 var(--body);color:var(--mute);margin:0}
.plan-s{font-size:13px;line-height:1.2;color:var(--mute);text-align:right}
.plan-h i{font-style:normal;font:300 24px/1 var(--body);color:var(--fg);width:24px;height:24px;display:grid;place-items:center;transition:transform .3s cubic-bezier(.22,1,.36,1)}
.plan-h[aria-expanded=true] i{transform:rotate(135deg)}
.plan-p{border-top:1px solid var(--rule)}
.plan-in{padding:22px 0;display:grid;grid-template-columns:1.2fr 1fr;gap:18px 32px;align-items:start}
.plan-d{font:500 19px/1.35 var(--body);grid-column:1/-1}
.plan-in ul{list-style:none;display:grid;gap:0;font-size:14.5px;color:var(--fg)}
.plan-in ul li{padding:7px 0;border-top:1px solid var(--rule)}
.plan-in ul li:last-child{border-bottom:1px solid var(--rule)}
.plan-in ul li:before{content:none}
.plan-foot{display:grid;gap:12px;justify-items:start;font-size:13px;color:var(--mute)}
.plan-foot .btn{min-width:160px}
@media (max-width:900px){.plan-row{grid-template-columns:1fr}.plan-h{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--rule)}.plan-row .plan-h:last-child{border-bottom:0}.plan-in{grid-template-columns:1fr}}
.setup{display:grid;grid-template-columns:1fr 1.3fr;gap:28px;margin-top:22px;align-items:start}
.steps{list-style:none;counter-reset:s;display:grid}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:12px;padding-block:14px;border-top:1px solid var(--rule)}
.steps li:before{content:counter(s,decimal-leading-zero);font:800 20px var(--display);color:var(--accent)}
.steps li b{display:block;font-weight:500}
.steps li span{grid-column:2;color:var(--mute);font-size:14px}
.win{border:1px solid var(--rule);background:var(--pane);overflow:hidden;color:var(--fg);border-radius:6px}
.win .bar{display:flex;gap:6px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--rule);font:500 12px var(--body);color:var(--mute)}
.win .bar i{width:9px;height:9px;border-radius:50%;background:var(--rule)}
.portal{display:grid;grid-template-columns:150px 1fr;min-height:280px}
.portal .side{border-right:1px solid var(--rule);padding:12px 0;font-size:13px}
.portal .side div{padding:7px 14px;color:var(--mute)}
.portal .side div.on{color:var(--fg);border-left:2px solid var(--accent)}
.portal .main{padding:16px}
.portal .main .h4{font:400 18px var(--display);margin-bottom:12px}
.calls{width:100%;border-collapse:collapse;font-size:12.5px;color:inherit}
.calls td,.calls th{padding:7px 8px;border-bottom:1px solid var(--rule);text-align:left}
.calls th{font:500 12px var(--body);color:var(--mute)}
.calls .pill{font:500 11.5px var(--body);padding:2px 8px;border-radius:999px;background:var(--accent);color:var(--onaccent)}
.calls .pill.m{background:transparent;border:1px solid var(--rule);color:var(--mute)}
/* FAQ: category tabs with a sliding highlight, rounded rows, rotating plus (ported from 21st.dev faq-tabs) */
.faqs{position:relative;overflow:hidden}
.faqs:before{content:none;position:absolute;left:50%;top:-320px;width:600px;height:500px;transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(181,121,58,.18),rgba(181,121,58,0));filter:blur(40px);pointer-events:none}
.faq-head{text-align:center;position:relative}
.faq-sub{color:var(--accent);font-weight:500;margin-bottom:12px}
.faq-head h2{font-size:clamp(32px,4.6vw,52px)}
.faq-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:28px}
.ft{position:relative;overflow:hidden;border:1px solid var(--rule);border-radius:0;padding:8px 14px;min-height:40px;background:transparent;color:var(--mute);font:500 14px var(--body);cursor:pointer;transition:color .5s}
.ft span{position:relative;z-index:1}
.ft i{position:absolute;inset:0;background:linear-gradient(90deg,var(--accent),color-mix(in srgb,var(--accent) 80%,transparent));transform:translateY(100%);transition:transform .5s cubic-bezier(.36,0,.66,-.56)}
.ft:hover{color:var(--fg)}
.ft[aria-selected=true]{border-color:var(--accent);color:#0B0D10}
.ft[aria-selected=true] i{transform:none}
.ft:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.faq-body{max-width:820px;margin:40px auto 0}
.fl{list-style:none;display:grid;gap:0;border-top:1px solid var(--rule);animation:faqin .5s cubic-bezier(.36,0,.66,-.56)}
.fl[hidden]{display:none}
.plan-p[hidden]{display:none}
@keyframes faqin{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.fi{border-bottom:1px solid var(--rule)}
.fi[data-state=open] .fi-b{color:var(--accent)}
.fi h3{margin:0;font:inherit}
.fi-b{display:flex;width:100%;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;border:0;background:none;color:var(--fg);font:800 clamp(18px,2vw,24px)/1.2 var(--display);font-variation-settings:"wdth" 105;letter-spacing:-.02em;text-align:left;cursor:pointer;transition:color .3s;min-height:56px}
.fi[data-state=open] .fi-b{color:var(--fg)}
.fi-b:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.fi-b svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;transition:transform .2s}
.fi[data-state=open] .fi-b svg{transform:rotate(45deg)}
.fi-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease-in-out,margin .3s ease-in-out;margin-bottom:0}
.fi[data-state=open] .fi-a{grid-template-rows:1fr;margin-bottom:18px}
.fi-a>div{overflow:hidden;min-height:0}
.fi-a p{padding:0;color:var(--mute);font-size:16px;line-height:1.55;max-width:66ch}
.fq-contact{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 32px;margin-top:44px;max-width:820px;margin-inline:auto}
.fq-contact p{font:800 clamp(24px,2.8vw,36px)/1.05 var(--display);font-variation-settings:"wdth" 105;letter-spacing:-.025em}
@media (prefers-reduced-motion:reduce){.ft i,.fi-a,.fi-b svg,.fl{transition:none;animation:none}}
.doors{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);margin-top:22px}
.door{padding:20px 20px 20px 0;margin-right:20px;border-right:1px solid var(--rule);display:grid;gap:6px;min-height:120px}
.door:last-child{border-right:0;margin-right:0}
.door:hover h3{color:var(--accent)}
.door .tab{color:var(--accent)}
.door h3{font-size:20px}
.door p{color:var(--mute);font-size:14px}
.ps{max-width:760px;margin:0 auto;padding-block:56px 64px;border-top:1px solid var(--rule)}
.ps p{font-size:18px;line-height:1.55;color:var(--fg)}
.ps b{font-family:var(--display);font-weight:800;font-size:20px}
.ps .ctas{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap}

footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer nav{display:flex;gap:14px;flex-wrap:wrap}
footer a:hover{color:var(--fg)}
/* receipt bar */
.receipt{position:fixed;left:0;right:0;bottom:0;z-index:20;background:#16181D;color:#E8E6E1;padding-block:10px;padding-bottom:calc(10px + env(safe-area-inset-bottom,0px));transform:translateY(100%);transition:transform .4s cubic-bezier(.2,.6,.2,1)}
.receipt.show{transform:none}
.receipt .wrap{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.receipt b{font-weight:600;color:#fff}
.receipt .btn{border-color:#E8E6E1;background:#E8E6E1;color:#0B0D10;padding:8px 14px;min-height:40px}
/* chat launcher (from v5.css, same widget as the rest of the site) */
.chat-fab{position:fixed;right:18px;bottom:18px;z-index:90;width:56px;height:56px;border-radius:50%;
 background:#16181D;color:var(--paper);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(--rule);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 15px var(--body);margin-bottom:4px}
.chat-panel p{font-size:15px;color:var(--mute);margin:0 0 12px}
.chat-panel a{display:block;padding:11px 14px;border:1px solid var(--rule);border-radius:12px;
 font:600 15px var(--body);color:#16181D;text-decoration:none;margin-bottom:8px}
.chat-panel a:hover{border-color:#16181D}
.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(--rule);margin:0}
.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:15px;line-height:1.5}
.ch-m.me{align-self:flex-end;background:#16181D;color:#fff;border-bottom-right-radius:8px}
.ch-m.biz{align-self:flex-start;background:var(--paper);border:1px solid var(--rule);border-bottom-left-radius:8px;color:#16181D}
.chat-panel .ch-m.biz a{display:block;margin:6px 0 0;padding:0;border:0;color:#16181D;font:600 15px var(--body)}
.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(--rule);background:#fff;border-radius:999px;font:500 13px var(--body);
 padding:7px 12px;cursor:pointer;color:#16181D}
.ch-chips button:hover{border-color:#16181D;color:#16181D}
.ch-in{display:flex;gap:8px;padding:10px 14px 8px;border-top:1px solid var(--rule)}
.ch-in input{flex:1;border:1px solid var(--rule);border-radius:999px;padding:10px 15px;font:15px var(--body);background:#fff}
.ch-in button{width:38px;height:38px;border-radius:50%;background:#16181D;color:#fff;border:0;cursor:pointer;font-size:15px;flex:none}
.chat-panel .ch-fine{font-size:12px;color:var(--mute);padding:0 16px 12px;margin:4px 0 0}
.chat-fab{width:auto;min-width:56px;padding:0 20px 0 15px;border-radius:999px;display:flex;align-items:center;gap:8px;font:600 15px var(--body)}
.chat-fab .cf-l{color:var(--paper)}
.chat-fab{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
.chat-panel{bottom:calc(136px + env(safe-area-inset-bottom,0px))}
/* cart drawer + consent banner, from v5.css */
.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(--rule);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(--rule)}
.cart .c-h b{font:700 17px var(--display)}
.cart .c-x{background:none;border:0;font-size:24px;cursor:pointer;color:var(--mute);padding:4px 8px}
.cart .c-body{flex:1;overflow:auto;padding:14px 22px}
.cart .c-foot{border-top:1px solid var(--rule);padding:16px 22px 20px}
.cart .c-note{font-size:13px;color:var(--mute);margin:8px 0 12px;line-height:1.5}
.cart .c-nudge{background:var(--bg-3);color:#16181D;border-radius:12px;padding:11px 14px;font-size:15px;margin-bottom:12px;display:none}
.cart .c-nudge.on{display:block}
.cart .c-empty{color:var(--mute);text-align:center;padding:44px 10px;font-size:15px}
.consent{background:var(--paper);border-radius:12px;padding:10px 12px;margin:0 0 10px}
.consent{background:none;border-radius:0;padding:9px 0;margin:0;display:flex;gap:10px;align-items:flex-start;
 font-size:15px;color:var(--mute)}
.consent input{width:auto;flex:none;margin-top:3px;accent-color:#16181D}
.pop .consent{text-align:left}
.cart .c-go{display:flex;width:100%;justify-content:center;background:var(--pay)}
.cart .c-go:hover{background:var(--pay-d)}
.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 .ck{opacity:1;transform:none}
.consent label,.consent{min-height:44px}

.consent a,.ck-txt a{display:inline-block;padding:6px 3px;margin:-6px -3px}

#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(--rule);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}
#ck .ck-txt{color:var(--mute);font-size:13px;line-height:1.5}
#ck .ck-txt b{color:#16181D;font-weight:600}
#ck .ck-txt a{color:#16181D;font-weight:600}
#ck .ck-actions{display:flex;gap:10px}
#ck .ck-accept,#ck .ck-min{flex:1;font:600 15px var(--display);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:#16181D;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:#16181D;border:1px solid var(--rule);box-shadow:none}
#ck .ck-min:hover{border-color:var(--mute)}
#ck .ck-accept:focus-visible,#ck .ck-min:focus-visible{outline:2px solid #16181D;outline-offset:3px}

  #ck .ck-long{display:none}
#ck .ck-short{display:inline!important}
.addcart,.pp-bar .btn,.cart .c-go,.co-add,.co-card .co-pay{min-height:44px}
.cart-scrim{position:fixed;inset:0;background:rgba(20,20,22,.35);z-index:97;display:none}
.cart-scrim.open{display:block}
/* reveals */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s cubic-bezier(.2,.6,.2,1),transform .7s cubic-bezier(.2,.6,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}
@media (max-width:900px){
 .nav .mega{max-height:calc(100svh - 64px);overflow-y:auto}
 .nav .mega-in{grid-template-columns:1fr;gap:22px;padding-top:22px}
 .nav .mbig{font-size:18px;white-space:normal}
 .live{grid-template-columns:1fr;gap:20px;padding-block:24px}
 .bizpick{font-size:13px}
 .bizpick button{padding:0 12px;min-height:36px}
 .phero{min-height:640px}
 .phero .art img{object-position:40% 100%}
 .hero{grid-template-columns:1fr;grid-template-rows:auto;gap:24px;padding-block:28px}
 .hero .pane{grid-column:1;grid-row:auto}
 .hero .pains{grid-column:1;order:3}
 .pane{grid-template-columns:1fr;min-height:0}
 .pane>div{border-right:0}
 .pane .top{grid-column:1}
 .book{grid-template-columns:1fr;gap:0}
 .rail,.phonecol{display:none}
 .inphone{display:block}
 .frames{grid-template-columns:1fr}
 .frames>div{border-right:0;border-bottom:1px solid var(--rule)}
 .frames>div:last-child{border-bottom:0}
 .final{grid-template-columns:1fr}
 .final .nums{grid-template-columns:1fr}
 .final .nums div{border-right:0;border-bottom:1px solid var(--rule)}
 .final .nums div:last-child{border-bottom:0}
 .bundles,.setup,.doors{grid-template-columns:1fr}
 .bundle,.door{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--rule)}
 .bundle:last-child,.door:last-child{border-bottom:0}
 .receipt .wrap>div:nth-child(2){display:none}
 .receipt .wrap{flex-wrap:nowrap}
 .receipt .wrap>div:first-child{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .portal{grid-template-columns:1fr}
 .portal .side{display:flex;overflow-x:auto;border-right:0;border-bottom:1px solid var(--rule);padding:0}
 .portal .side div{white-space:nowrap}
 .portal .side div.on{border-left:0;border-bottom:2px solid var(--accent)}
}
@media (prefers-reduced-motion:reduce){.bubble,.cal .s.new,.review,.log li,.rv,body,.receipt{transition:none}.js .rv{opacity:1;transform:none}}
/* pop-ups: quiz, exit offer, cart hold (from v5.css) */


/* the cart drawer is always a light panel: pin its ink so dark pages cannot inherit pale text into it */
.cart{--fg:#16181D;--mute:#6B665B;--rule:#D9D4C7;--bg:#F4F2ED;color:#16181D}
.cart a{color:#16181D}

/* alignment: door cells start at the top; the P.S. hangs on the page edge like every other block */
.door{align-content:start}
.ps{margin-left:0}

/* phone nav: the page name drops so Products and Start free stay on one line */

/* SHELF: every product, priced, with Start free / Add to cart */
.sh-f{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.sh-f button{min-height:40px;padding:0 16px;border-radius:999px;border:1px solid var(--rule);background:transparent;color:var(--fg);font:500 14px var(--body);cursor:pointer;transition:background .15s,border-color .15s}
.sh-f button:hover{border-color:var(--fg)}
.sh-f button[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.shelf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px}
.pc{display:flex;flex-direction:column;gap:10px;min-width:0;padding:20px 20px 16px;border:1px solid var(--rule);border-radius:10px;background:var(--pane);text-align:left;font:inherit;color:var(--fg)}
.pc[hidden]{display:none}
.pc-top{display:flex;flex-direction:column;gap:4px;align-self:flex-start}
.pc-job{font:500 12.5px/1.2 var(--body);color:var(--mute)}
.pc h3{font-size:26px;line-height:1.05}
.pc-top:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:2px}
.pc-does{font-size:14px;line-height:1.45;color:var(--fg);opacity:.86;flex:1;max-width:44ch}
.pc-price{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:4px;row-gap:2px;padding-top:12px;border-top:1px solid var(--rule)}
.pc-price b{font:800 30px/1 var(--display);font-variation-settings:"wdth" 110;letter-spacing:-.03em}
.pc-price small{font-size:14px;color:var(--mute)}
.pc-price span{flex-basis:100%;font-size:12.5px;color:var(--mute);margin-top:4px}
.pc-act{display:flex;gap:8px;flex-wrap:wrap}
.pc-act .btn{min-height:44px;padding:0 18px;font-size:14px;flex:1 1 auto}
.pc-act .btn.glass{color:var(--fg);background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 12%,transparent),color-mix(in srgb,var(--fg) 4%,transparent));backdrop-filter:none;-webkit-backdrop-filter:none;
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 30%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--fg) 22%,transparent),inset 0 -8px 14px -10px color-mix(in srgb,var(--fg) 30%,transparent),0 6px 16px -10px rgba(0,0,0,.5)}
.pc-act .btn.glass:hover{transform:scale(1.03);background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 18%,transparent),color-mix(in srgb,var(--fg) 7%,transparent))}
.pc-act .btn.fill{box-shadow:inset 0 1px 0 color-mix(in srgb,var(--bg) 40%,transparent),0 6px 16px -10px rgba(0,0,0,.5);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.pc-act .btn.fill:hover{transform:scale(1.03);filter:none}
.pc-act .addcart.in{box-shadow:inset 0 0 0 1.5px var(--fg)}
.pc-more{font-size:14px;font-weight:500;color:var(--fg);align-self:flex-start;min-height:28px;display:inline-flex;align-items:center;border-bottom:1px solid transparent}
.pc-more:hover{border-bottom-color:currentColor}
.pc-quiz{cursor:pointer;background:transparent;border-style:dashed;justify-content:flex-start}
.pc-quiz h3{font-size:22px}
.pc-quiz:hover{border-color:var(--fg)}
.bnote{font-size:12.5px;color:var(--mute);margin-top:8px;flex-basis:100%}
@media (max-width:1000px){.shelf{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
 .sh-f{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px))}
 .sh-f::-webkit-scrollbar{display:none}
 .sh-f button{flex:0 0 auto}
 .shelf{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;scrollbar-width:none;margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding-inline:max(16px,env(safe-area-inset-left,0px));scroll-padding-inline:max(16px,env(safe-area-inset-left,0px));padding-bottom:4px}
 .shelf::-webkit-scrollbar{display:none}
 .pc{flex:0 0 84%;scroll-snap-align:start}
}
.nav .cartbtn .n{background:#16181D;color:#F4F2ED;box-shadow:0 0 0 2px #F4F2ED}
.nav:not(.solid) .cartbtn .n{background:#F4F2ED;color:#16181D;box-shadow:0 0 0 1px rgba(11,13,16,.25)}
.phero .copy{min-width:0;max-width:100%}
@media (max-width:640px){.phero .proofline,.phero .geoline{white-space:normal;max-width:100%;flex:0 1 auto;justify-content:center;text-align:center;line-height:1.35;padding:8px 14px;border-radius:18px;flex-wrap:wrap}}
@media (max-width:940px){.nav .navbtn{display:none}}
.receipt .btn{white-space:nowrap;flex:0 0 auto}
.sb-in input::-webkit-search-cancel-button,.sb-in input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
/* BLUE: the one colour that means "act" and "it happened" */
:root{--blue:#2D6CDF;--blue-hi:#4A86F0;--blue-lo:#2257BD;--on-blue:#FFFFFF}
.pc-act .btn.glass.addcart{color:var(--on-blue);background:linear-gradient(180deg,var(--blue-hi) 0%,var(--blue) 55%,var(--blue-lo) 100%);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px -2px rgba(0,0,0,.25),0 8px 20px -10px rgba(45,108,223,.9)}
.pc-act .btn.glass.addcart:hover{background:linear-gradient(180deg,#5A92F3 0%,var(--blue-hi) 55%,var(--blue) 100%)}
.pc-act .addcart.in{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75),0 8px 20px -10px rgba(45,108,223,.9)}
.bubble.me,.frames .mini.me{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.cal .s.new{background:var(--blue);border-color:var(--blue)}
.phone .wk i.n{background:var(--blue);border-color:var(--blue)}
.phone .pill{background:var(--blue)}
/* the phone: a real app shape, sized to its screens */
.phone{aspect-ratio:9/16.6}
.phone .scr{grid-template-rows:auto 1fr auto}
.phone .tabbar{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid #E6E1D5;padding:7px 6px 12px;background:#FBFAF6}
.phone .tabbar span{display:flex;flex-direction:column;align-items:center;gap:3px;font:500 10px/1 var(--body);color:#8C877B}
.phone .tabbar svg{width:18px;height:18px}
.phone .tabbar span.on{color:var(--blue)}
/* hero, second row: solid bubbles, not glass */
.phero .proofline,.phero .geoline{background:#16181D;backdrop-filter:none;-webkit-backdrop-filter:none;color:#F4F2ED;text-shadow:none;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.16),inset 0 -1px 0 rgba(0,0,0,.4),0 8px 22px -10px rgba(11,13,16,.75)}
.phero .geoline a{color:#fff;border-bottom-color:rgba(255,255,255,.55)}
/* cart drawer lines (from v5.css) */
.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:13px}
.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)}
.c-item .ci-m{min-width:0}
.c-item .ci-s{color:var(--faint);font-size:13px}
.c-rows{display:grid;gap:6px;margin-bottom:10px}
.c-row{display:flex;justify-content:space-between;font-size:15px;color:var(--muted)}
.c-row b{color:var(--ink)}
.c-row.tr b{color:var(--good)}
.c-item img{display:none}
.c-item{min-height:56px}
/* end cart lines */
/* the solid nav follows the page: paper by day, night after nine */
.nav.solid .mtop,.nav.solid .searchbtn{color:color-mix(in srgb,var(--fg) 78%,transparent)}
.nav.solid .mtop:hover,.nav.solid .searchbtn:hover{color:var(--fg)}
.nav.solid .cartbtn,.nav.solid .navbtn,.nav.solid .hamb{color:var(--fg);backdrop-filter:none;-webkit-backdrop-filter:none;
 background:linear-gradient(180deg,color-mix(in srgb,var(--fg) 12%,transparent),color-mix(in srgb,var(--fg) 4%,transparent));
 box-shadow:inset 0 1px 0 color-mix(in srgb,var(--fg) 28%,transparent),inset 0 0 0 1px color-mix(in srgb,var(--fg) 20%,transparent)}
.nav.solid .cartbtn .n{background:var(--blue);color:#fff;box-shadow:none}
/* phone screens: sized so no screen sits half empty */
.phone{aspect-ratio:9/15.8}
.phone .app{grid-template-rows:auto auto 1fr}
.phone .today{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 10px;border-radius:10px;background:#E9E6DE;font-size:10px;color:#6B665B}
.phone .today span{grid-column:1/-1;font-weight:600;color:#16181D;font-size:11px}
.phone .today div{display:flex;flex-direction:column;gap:1px}
.phone .today b{font:800 16px/1.1 var(--display);color:#16181D;font-variant-numeric:tabular-nums}
.phone .app[data-v="v1"] .today,.phone .app:not([data-v]) .today,.phone .app[data-v="v7"] .today{display:none}
.phone .hrs{margin-top:12px}
.phone .hrs .hl{font-size:11px;color:#6B665B}
.phone .hb{display:grid;grid-template-columns:repeat(12,1fr);gap:3px;align-items:end;height:54px;margin-top:6px;border-bottom:1px solid #D9D4C7}
.phone .hb i{display:block;height:calc(var(--h)*16px + 2px);background:var(--blue);border-radius:2px 2px 0 0;opacity:.9}
.phone .hx{display:flex;justify-content:space-between;font-size:10px;color:#8C877B;margin-top:3px}
/* FILL THE SCREEN (Circle 10-19, after worklouder.cc) */
:root{--wrap:1760px;--gut:clamp(16px,1.2vw,24px)}
.wrap{max-width:1760px;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
.nav-in{padding-inline:var(--gut)}
/* the "what hurts" rows become tiles that fill the column */
.tiles{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:10px;flex:1;min-height:0}
.tile{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;gap:18px;min-height:150px;padding:20px;border:0;border-radius:12px;text-align:left;font:inherit;color:#F4F2ED;cursor:pointer;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.tile:hover{transform:translateY(-2px)}
.tile b{font:800 clamp(20px,1.6vw,28px)/1.06 var(--display);font-variation-settings:"wdth" 108;letter-spacing:-.03em;text-wrap:balance;max-width:15ch}
.tp{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;padding:4px 4px 4px 12px;border-radius:999px;background:rgba(11,13,16,.38);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font:500 14px/1.2 var(--body);white-space:nowrap}
.tp i{font-style:normal;font-weight:600;background:var(--blue);color:#fff;border-radius:999px;padding:6px 12px}
.t-ink{background:#16181D}
.t-blue{background:linear-gradient(160deg,#4A86F0 0%,#2D6CDF 55%,#2257BD 100%)}
.t-blue .tp{background:rgba(11,13,16,.22)}
.t-blue .tp i{background:#F4F2ED;color:#16181D}
.t-art{background:#0B0D10 url(/products/media/day-night-m.webp) 50% 62%/cover no-repeat}
.t-art:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(11,13,16,.62) 0%,rgba(11,13,16,.12) 48%,rgba(11,13,16,.55) 100%)}
.t-line{background:var(--pane);color:var(--fg);box-shadow:inset 0 0 0 1px var(--rule)}
.t-line .tp{background:color-mix(in srgb,var(--fg) 7%,transparent);-webkit-backdrop-filter:none;backdrop-filter:none}
.live .side{gap:10px}
.live .start{border-top:0;padding:18px 20px;border-radius:12px;background:var(--pane);box-shadow:inset 0 0 0 1px var(--rule)}
/* the calendar grows to fill its cell, so the pane has no hole */
.pane>div:has(.cal){display:flex;flex-direction:column}
.pane>div:has(.cal) .cal{flex:1;grid-template-rows:auto;grid-auto-rows:minmax(20px,1fr)}
.pane .cal .s{height:auto;min-height:20px}
/* five products a row on a wide screen: 15 cards, three full rows */
@media (min-width:1440px){.shelf{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media (max-width:560px){.tiles{grid-template-columns:1fr;grid-auto-rows:auto}.tile{min-height:112px;padding:16px}}
.pane .cal .s.new{transform:none;border-color:var(--rule);background:linear-gradient(var(--blue),var(--blue)) top/100% 0 no-repeat,#fff;transition:background-size .45s cubic-bezier(.2,.7,.3,1),border-color .45s}
.pane .cal .s.new.on{background-size:100% 100%;border-color:var(--blue)}
/* wide screens: each scene's messages sit beside its headline, not under a half-empty row */
@media (min-width:1440px){
 .scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:clamp(28px,3vw,56px);align-items:start}
 .scene>*{grid-column:1}
 .scene .frames{grid-column:2;grid-row:1/span 3;align-self:center;grid-template-columns:1fr;border-bottom:0}
 .scene .frames>div{border-right:0;margin-right:0;position:relative;padding:12px 0 12px 84px;border-bottom:1px solid var(--rule)}
 .scene .frames>div>.tab{position:absolute;left:0;top:14px;margin:0}
 .scene .inphone,.scene .buy{grid-column:1/-1}
}
.hwf-top,.hwf-rule{max-width:calc(1760px - 2*var(--gut))}
.tp{max-width:100%}.tp>span{overflow:hidden;text-overflow:ellipsis}
.bundle button.addc:not(.note){width:100%;min-height:44px;margin-top:8px;border-radius:999px;font:600 14px var(--body);text-decoration:none;color:var(--on-blue);background:linear-gradient(180deg,var(--blue-hi) 0%,var(--blue) 55%,var(--blue-lo) 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 6px -2px rgba(0,0,0,.25),0 8px 20px -10px rgba(45,108,223,.9);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.bundle button.addc:not(.note):hover{color:var(--on-blue);transform:scale(1.02)}
.bundle button.addc.in{box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75)}
/* full-bleed bands use 50vw, which counts a classic scrollbar: never let that scroll the page sideways (v5.css has the same guard) */
html,body{overflow-x:clip}
/* PRICING CARDS: 21st.dev "pricing-section" rebuilt without React (s/pricing.js animates) */
.pz{position:relative;isolation:isolate;text-align:center}
.pz-glow{position:absolute;left:10%;right:10%;top:0;bottom:0;z-index:-1;pointer-events:none;background:radial-gradient(closest-side at 50% 40%,rgba(45,108,223,.42),rgba(45,108,223,0) 100%);opacity:.7}
.pz-head{max-width:820px;margin:0 auto;padding-top:12px}
.pz-head h2{font-size:clamp(32px,4.6vw,62px);line-height:1.02;max-width:none}
.pz-head h2 em{display:block}
.pz .dash{display:inline-block;padding:0 .16em;margin:0 .02em 0 0;border:2px dashed var(--blue);border-radius:14px;background:color-mix(in srgb,var(--blue) 16%,transparent);line-height:1.05}
.pz-head p{color:var(--mute);max-width:56ch;margin:14px auto 0;font-size:16px}
.pz-switch{position:relative;display:inline-flex;margin:24px auto 0;padding:4px;border-radius:999px;background:color-mix(in srgb,var(--fg) 6%,var(--bg));box-shadow:inset 0 0 0 1px var(--rule)}
.pz-switch button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;height:46px;padding:0 22px;border:0;border-radius:999px;background:none;font:600 15px var(--body);color:var(--mute);cursor:pointer;transition:color .25s}
.pz-switch button:hover{color:var(--fg)}
.pz-switch button.on{color:#fff}
.pz-switch i{font-style:normal;font-size:12.5px;font-weight:600;padding:3px 9px;border-radius:999px;background:#E6EEFC;color:#16181D}
.pz-ind{position:absolute;z-index:0;top:4px;left:4px;width:0;height:46px;border-radius:999px;background:linear-gradient(0deg,#2D6CDF 0%,#5C95F2 55%,#2257BD 100%);box-shadow:inset 0 0 0 3px #2257BD,0 2px 10px rgba(45,108,223,.55);transition:transform .5s cubic-bezier(.34,1.45,.64,1),width .5s cubic-bezier(.34,1.45,.64,1)}
.pz-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;max-width:1280px;margin:32px auto 0;text-align:left;align-items:stretch}
.pz-card{position:relative;display:flex;flex-direction:column;min-width:0;padding:26px 24px 24px;border-radius:14px;background:#FBFAF6;color:#16181D;box-shadow:inset 0 0 0 1px #E2DDD1,0 18px 40px -26px rgba(11,13,16,.5)}
.pz-card.pop{background:#EEF3FD;box-shadow:inset 0 0 0 2px var(--blue),0 24px 50px -24px rgba(45,108,223,.6)}
.pz-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.pz-card h3{font-size:30px;line-height:1;color:#16181D}
.pz-badge{flex:none;background:var(--blue);color:#fff;font:600 13px/1 var(--body);padding:7px 12px;border-radius:999px;white-space:nowrap}
.pz-tag{flex:none;font:500 12.5px/1 var(--body);color:#6B665B;padding-top:6px}
.pz-desc{font-size:14px;line-height:1.45;color:#5E5A50;margin-top:10px;min-height:2.9em}
.pz-price{display:flex;align-items:baseline;gap:4px;margin-top:16px;color:#16181D}
.pz-price .num{display:inline-flex;font:800 46px/1 var(--display);font-variation-settings:"wdth" 110;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pz-price small{font-size:15px;color:#5E5A50}
[data-roll]{display:inline-flex;overflow:hidden;vertical-align:bottom}
.dg{display:inline-block;height:1em;overflow:hidden;line-height:1}
.dg>span{display:flex;flex-direction:column;transition:transform .7s cubic-bezier(.2,.9,.25,1)}
.dg>span>b{display:block;height:1em;line-height:1;font:inherit;text-align:center}
.dc{display:inline-block;line-height:1}
.plan-n [data-roll]{line-height:1}
.pz-worth{font-size:12.5px;line-height:1.4;color:#6B665B;margin-top:8px;min-height:2.8em}
.pz-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:58px;margin-top:16px;border:0;border-radius:12px;font:600 18px var(--body);color:#fff;text-decoration:none;cursor:pointer;background:linear-gradient(0deg,#16181D 0%,#4A4D56 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px #2A2D34,0 12px 24px -12px rgba(11,13,16,.85);transition:transform .2s cubic-bezier(.2,.7,.3,1)}
.pz-card.pop .pz-cta{background:linear-gradient(0deg,#2D6CDF 0%,#2257BD 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 0 0 1px #5C95F2,0 14px 28px -12px rgba(45,108,223,.95)}
.pz-cta:hover{transform:translateY(-1px) scale(1.01)}
.pz-cta:active{transform:scale(.99)}
.pz-card .bnote{color:#6B665B;text-align:center}
.pz-add{display:flex;align-items:center;justify-content:center;width:100%;min-height:46px;margin-top:8px;border:0;border-radius:12px;font:600 15px var(--body);cursor:pointer;color:var(--blue);background:#fff;box-shadow:inset 0 0 0 1.5px var(--blue)}
.pz-add.in{background:#E6EEFC}
.pz-note{display:block;text-align:center;font-size:12.5px;color:#6B665B;margin-top:10px}
.pz-feat{list-style:none;display:grid;gap:12px;padding:22px 0 20px;margin:0}
.pz-feat li{display:flex;align-items:center;gap:12px;font-size:14.5px;font-weight:600;color:#3A3D45}
.pz-feat svg{width:20px;height:20px;flex:none;color:#16181D}
.pz-inc{border-top:1px solid #E2DDD1;padding-top:16px;margin-top:auto}
.pz-inc h4{font:600 15px var(--body);color:#16181D;margin:0 0 12px}
.pz-inc ul{list-style:none;display:grid;gap:10px;margin:0;padding:0}
.pz-inc li{display:flex;align-items:center;gap:12px;font-size:14px;font-weight:500;color:#3A3D45}
.pz-inc .ck{width:24px;height:24px;flex:none;display:grid;place-items:center;border-radius:50%;border:1px solid var(--blue);background:#EDF6F0}
.pz-inc .ck svg{width:15px;height:15px;color:var(--blue)}
.js .pz-rv{opacity:0;transform:translateY(-20px);filter:blur(10px);transition:opacity .5s ease,transform .5s ease,filter .5s ease}
.js .pz-rv.in{opacity:1;transform:none;filter:none}
@media (prefers-reduced-motion:reduce){.js .pz-rv{opacity:1;transform:none;filter:none;transition:none}.dg>span,.pz-ind{transition:none}}
@media (max-width:900px){.pz-grid{grid-template-columns:1fr;max-width:520px}.pz-card.pop{order:-1}}
@media (max-width:420px){.pz-switch button{padding:0 14px;height:42px;font-size:14px}.pz-ind{height:42px}.pz-switch i{font-size:11px;padding:3px 7px}.pz-price .num{font-size:40px}}
[data-roll]{position:relative}[data-roll] .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.pz-grid{max-width:none}
.pz .plans,.pz>.tab,.pz .incl,.pz .usage{text-align:left}
.pz-note{display:flex;align-items:center;justify-content:center;min-height:46px;margin-top:8px}
.pz-card .pz-tag{padding-top:8px}
.pz .incl{margin-top:28px}.pz .plans{margin-top:28px}
/* heroes fill the whole screen at every size (Circle 10-19: "I keep seeing edges") */
.phero{min-height:100vh;min-height:100svh}
@media (max-width:900px){.phero{min-height:100vh;min-height:100svh}}
/* header: room to breathe, menus hang from its real bottom */
.nav-in{height:76px}
.nav.solid .nav-in{height:64px}
.nav .mega,.nav .searchbar{top:100%}
.msheet{inset:76px 0 auto 0;max-height:calc(100vh - 76px)}
.nav .cartbtn .n{top:-4px;right:-4px}
.nav a.home span{letter-spacing:.14em}
/* chat button sits at the bottom; it only steps up while the price bar is showing */
.chat-fab{bottom:calc(18px + env(safe-area-inset-bottom,0px));transition:bottom .3s ease,transform .2s}
body:has(.receipt.show) .chat-fab{bottom:calc(74px + env(safe-area-inset-bottom,0px))}
/* the painting melts into the page: no hard edge at the bottom of the hero */
.phero:after{content:"";position:absolute;left:0;right:0;bottom:0;height:clamp(90px,16vh,190px);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,0),var(--bg))}
.phero .copy{padding-top:calc(76px + clamp(28px,6vh,80px))}
/* tiles carry their product's painting */
.t-art{background:#0B0D10 var(--art,url(/products/media/day-night-m.webp)) var(--pos,50% 60%)/cover no-repeat;color:#F4F2ED}
.t-art:before{background:linear-gradient(180deg,rgba(11,13,16,.72) 0%,rgba(11,13,16,.3) 42%,rgba(11,13,16,.08) 60%,rgba(11,13,16,.55) 100%)}
.t-art b{text-shadow:0 2px 14px rgba(11,13,16,.55)}
.t-art .tp{background:rgba(11,13,16,.5);color:#F4F2ED}
.t-art .tp i{background:var(--blue);color:#fff}
.tile.t-art:hover{transform:translateY(-2px) scale(1.01)}
/* every shelf card carries its product's painting */
.pc{overflow:hidden}
.pc-art{display:block;margin:-20px -20px 4px;aspect-ratio:16/7;background:#0B0D10 var(--art) 50% 62%/cover no-repeat;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.pc:hover .pc-art{transform:scale(1.03)}
.pc-quiz{border-style:solid}
@media (max-width:640px){.pc-art{aspect-ratio:16/8}}
/* living heroes (s/hero.js) */
.phero .art img{will-change:transform;transform-origin:50% 50%}
.hero-fx{position:absolute;inset:0;z-index:1;pointer-events:none;transform-origin:50% 50%;will-change:transform}
.hero-fx .hg{position:absolute;border-radius:50%;mix-blend-mode:screen;opacity:.0;background:radial-gradient(circle,rgba(var(--c),.7) 0%,rgba(var(--c),.28) 28%,rgba(var(--c),.08) 52%,rgba(var(--c),0) 70%);animation:hglow var(--d,7s) ease-in-out var(--dl,0s) infinite alternate}
.fx-on .hero-fx .hg{opacity:.45}
@keyframes hglow{0%{opacity:.28;transform:scale(.92)}60%{opacity:var(--peak,.85)}100%{opacity:var(--peak,.85);transform:scale(1.06)}}
.hero-fx .cs{position:absolute;top:42%;width:70%;height:60%;border-radius:50%;background:radial-gradient(closest-side,rgba(20,30,45,.22),rgba(20,30,45,0));mix-blend-mode:multiply;animation:cshadow 70s linear infinite}
.hero-fx .cs2{top:58%;width:55%;height:45%;animation-duration:95s;animation-delay:-48s}
@keyframes cshadow{from{transform:translateX(-80%)}to{transform:translateX(200%)}}
/* the words arrive after the painting */
.js .phero .copy>*{animation:herocopy .9s cubic-bezier(.2,.7,.2,1) both}
.js .phero .copy>*:nth-child(1){animation-delay:.25s}
.js .phero .copy>*:nth-child(2){animation-delay:.4s}
.js .phero .copy>*:nth-child(3){animation-delay:.58s}
.js .phero .copy>*:nth-child(4){animation-delay:.72s}
.js .phero .copy>*:nth-child(5){animation-delay:.86s}
@keyframes herocopy{from{opacity:0;transform:translateY(14px);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@media (prefers-reduced-motion:reduce){.hero-fx .hg,.hero-fx .cs,.js .phero .copy>*{animation:none}.fx-on .hero-fx .hg{opacity:.6}}
/* tap size for the "How it works" links on the product cards */
.pc-more{min-height:44px}

/* consent on phones: one compact bar, same words and choices (2026-10-19) */
@media (max-width:640px){
 #ck{left:8px;right:8px;bottom:calc(8px + env(safe-area-inset-bottom,0px));max-width:none;flex-direction:row;align-items:center;gap:12px;padding:10px 10px 10px 14px;border-radius:14px}
 #ck .ck-txt{flex:1;min-width:0;font-size:12px;line-height:1.4}
 #ck .ck-long{display:none}
 #ck .ck-short{display:inline!important}
 #ck .ck-actions{flex-direction:column;gap:6px;flex:none}
 #ck .ck-accept,#ck .ck-min{flex:none;min-height:40px;padding:0 18px;font-size:14px}
 body:has(#ck.up) .chat-fab{bottom:calc(112px + env(safe-area-inset-bottom,0px))}
}
/* phones: the Tuesday becomes a swipe row, so the prices arrive in half the scrolling */
.sh-mob{display:none}
@media (max-width:760px){
 .sh-desk{display:none}.sh-mob{display:inline}
 .book .scenes{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:4px max(16px,env(safe-area-inset-left,0px)) 10px;scroll-padding-inline:max(16px,env(safe-area-inset-left,0px))}
 .book .scenes::-webkit-scrollbar{display:none}
 .book .scene{flex:0 0 86%;scroll-snap-align:start;align-content:start;padding:20px 18px 18px;border:0;border-radius:14px;background:var(--pane);box-shadow:inset 0 0 0 1px var(--rule)}
 .book .scene h2{font-size:26px}
 .book .scene p{font-size:15px}
 .book .scene .inphone{display:none}
 .book .scene .frames>div:nth-child(2){display:none}
 .book .scene .buy{margin-top:auto}
}

/* chat button: a soft blue glow that breathes, and a live dot, so it reads as a person to talk to (2026-10-19) */
.chat-fab{background:linear-gradient(180deg,#2B2F38 0%,#16181D 100%);color:#F4F2ED;
 box-shadow:0 0 0 1px rgba(255,255,255,.10),0 12px 30px rgba(11,13,16,.35),0 0 22px 2px rgba(74,134,240,.5);
 animation:chatglow 3.4s ease-in-out infinite}
.chat-fab:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 16px 36px rgba(11,13,16,.4),0 0 34px 8px rgba(74,134,240,.75);animation-play-state:paused}
.chat-fab:after{content:"";position:absolute;top:6px;right:8px;width:9px;height:9px;border-radius:50%;background:#36E07F;box-shadow:0 0 0 2px #16181D,0 0 10px rgba(54,224,127,.9);animation:chatlive 2.2s ease-in-out infinite}
@keyframes chatglow{0%,100%{box-shadow:0 0 0 1px rgba(255,255,255,.10),0 12px 30px rgba(11,13,16,.35),0 0 18px 1px rgba(74,134,240,.42)}50%{box-shadow:0 0 0 1px rgba(255,255,255,.14),0 12px 30px rgba(11,13,16,.35),0 0 34px 8px rgba(74,134,240,.72)}}
@keyframes chatlive{0%,100%{opacity:1}50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.chat-fab,.chat-fab:after{animation:none}}
.pz-perk{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;margin:10px 0 0;padding:6px 12px;border-radius:999px;background:#E6EEFC;color:#2257BD;font:600 13.5px var(--body);box-shadow:inset 0 0 0 1px rgba(45,108,223,.25)}

/* menus open on hover with no dead strip (Circle 10-20: "you have to click and they're buggy").
   The top links were shorter than the bar, so the mouse left the hover zone on its way down to the
   menu and it closed; a click then pinned it open through :focus-within. Links now fill the bar's
   full height, only keyboard focus holds a menu open, and hovering one top item closes any other. */
.nav-center{align-self:stretch}
.mwrap{display:flex;align-self:stretch}
.nav-center>.mtop,.mwrap>.mtop{display:flex;align-items:center;padding-top:0;padding-bottom:0;height:100%}
.mwrap:focus-within .mega{display:none}
.mwrap:hover .mega,.mwrap:has(:focus-visible) .mega{display:block}
.nav-center:hover .mwrap:not(:hover) .mega{display:none}

/* 2026-10-21 conversion pass: on phones the chat pill is icon-only so it stops sitting on card buttons; the audit form's one-line email note */
@media (max-width:640px){.chat-fab{width:48px;min-width:48px;height:48px;padding:0;gap:0;justify-content:center;border-radius:50%}.chat-fab .cf-l{display:none}.chat-fab svg{width:24px;height:24px}}
.af-fine{margin:10px 0 0;font-size:12.5px;line-height:1.45;color:#6B665B;text-align:center}

/* 2026-10-21 search bar: the row is a rounded field; focus is a soft ring on the field, not a square black box around it */
.searchbar{padding:14px 22px}
.sb-in{max-width:720px;padding:0 6px 0 18px;min-height:52px;background:#fff;border:1px solid rgba(29,29,31,.14);border-radius:999px;
 box-shadow:0 1px 2px rgba(11,13,16,.04);transition:border-color .15s,box-shadow .15s}
.sb-in:focus-within{outline:none;border-color:rgba(29,29,31,.55);box-shadow:0 0 0 4px rgba(45,108,223,.16)}
.sb-in input{font:500 16px var(--fb,var(--body));min-height:50px}
.sb-x{width:40px;height:40px;padding:0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:20px;line-height:1}
.sb-x:hover{background:rgba(29,29,31,.06);color:var(--ink)}
.sb-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.sb-res{padding:10px 0 0}