/* v24: headings now use Inter (Bricolage Grotesque no longer referenced). 800 = Inter Display (opsz 32) static instance, same character set */
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-display-800-v26.woff2) format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Inter";src:url(../assets/fonts/inter-v26.woff2) format("woff2");font-weight:400 700;font-display:swap}
@font-face{font-family:"Caveat";src:url(../assets/fonts/caveat-v26.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"JBMono";src:url(../assets/fonts/jetbrains-mono-v26.woff2) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --bg:#000613; --bg-2:#030b1c; --panel:#07112a; --line:rgba(226,236,245,.10); --line-2:rgba(226,236,245,.18);
  --text:#eef3f7; --muted:#97a3b6; --faint:#5d6a80;
  --accent:#14B8A6; --accent-hi:#5eead4; --accent-glow:rgba(20,184,166,.45);
  --wrap:1200px; --pad:24px; --tx-gap:44px;
  --ease:cubic-bezier(.2,.7,.1,1);
  --display:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"JBMono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--sans);font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip}
img{max-width:100%;display:block}
a{color:var(--accent-hi)}
h1,h2,h3,p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
.sr-only{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:10px;z-index:200;background:var(--accent);color:#00110f;padding:8px 14px;border-radius:8px}
.skip:focus{left:10px}
:focus-visible{outline:2px solid var(--accent-hi);outline-offset:4px;border-radius:6px}
::selection{background:var(--accent);color:#00110f}

/* v8: the sitewide film-grain overlay (.grain, grain.png at 4.5% overlay blend) was removed so the slabs and backgrounds render perfectly smooth */

/* ---------- type ---------- */
.display{font-family:var(--display);font-weight:800;letter-spacing:-.03em;line-height:1.04;text-wrap:balance}
.display.xl{font-size:clamp(2.9rem,7.4vw,7.6rem);letter-spacing:-.03em;line-height:.95}
.display.xl2{font-size:clamp(2.4rem,5.4vw,5.2rem);letter-spacing:-.028em;line-height:.98}
.display.lg{font-size:clamp(2.05rem,4.4vw,4.1rem);max-width:19ch}
.display.md{font-size:clamp(1.55rem,2.3vw,2.1rem);font-weight:700;letter-spacing:-.012em;line-height:1.08}
.display.sm{font-size:1.45rem;font-weight:700;letter-spacing:-.008em;line-height:1.1}
.display em{font-style:normal;color:var(--accent)}
.accent{color:var(--accent)}
.dim{color:#7d8aa1}
.mono{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase}
.label{color:var(--accent);margin-bottom:28px;display:flex;align-items:center;gap:10px}
.label-sm{color:var(--accent-hi);margin-bottom:22px}
.sep{color:var(--faint);margin:0 .35em}
.micro{color:var(--faint);font-size:.68rem;letter-spacing:.14em}
.section-lead{color:var(--muted);font-size:1.12rem;max-width:58ch;margin-top:26px}
.section-lead a{color:var(--text)}

/* ---------- buttons ---------- */
.btn{--bx:50%;display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);font-weight:600;font-size:1rem;text-decoration:none;color:#00110f;background:var(--accent);padding:15px 24px;border-radius:999px;border:1px solid transparent;position:relative;isolation:isolate;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease);box-shadow:0 10px 40px -12px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.35)}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120px circle at var(--bx) 50%,rgba(255,255,255,.45),transparent 60%);opacity:0;transition:opacity .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 18px 50px -14px var(--accent-glow),inset 0 1px 0 rgba(255,255,255,.4)}
.btn:hover::before{opacity:1}
.btn .arrow{transition:transform .35s var(--ease)}
.btn:hover .arrow{transform:translateX(4px)}
.btn-ghost{background:rgba(255,255,255,.03);color:var(--text);border-color:var(--line-2);box-shadow:none;backdrop-filter:blur(6px)}
.btn-ghost:hover{border-color:var(--accent);box-shadow:none}
.btn-small{padding:10px 18px;font-size:.9rem;white-space:nowrap;flex:none}
.btn-large{padding:18px 30px;font-size:1.06rem}
.link-u{color:var(--text);text-decoration:none;background:linear-gradient(var(--accent),var(--accent)) 0 100%/0 1px no-repeat;transition:background-size .4s var(--ease),color .3s;padding-bottom:2px}
.link-u:hover{background-size:100% 1px;color:var(--accent-hi)}

/* ---------- header ---------- */
.site-header{position:fixed;inset:0 0 auto;z-index:80;transition:background .4s,border-color .4s,backdrop-filter .4s;border-bottom:1px solid transparent}
.site-header.scrolled{background:rgba(0,6,19,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.header-inner{max-width:calc(var(--wrap) + 2*var(--pad));margin:0 auto;padding:0 var(--pad);height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);background:none;line-height:1}
.logo-mark{height:34px;width:auto;flex:none;overflow:visible}
.logo-word{font-family:var(--sans);font-weight:600;font-size:1.32rem;letter-spacing:-.018em;white-space:nowrap}
.logo-word span{color:var(--accent);font-weight:400}
.nav-links{display:flex;gap:34px}
.nav-links a{color:var(--muted);text-decoration:none;transition:color .25s;font-size:.7rem}
.nav-links a:hover{color:var(--text)}

/* ---------- hero (autoplay film + timed headline carousel; no scroll dependency) ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:600px;overflow:hidden}
.hero-media{position:absolute;inset:0;width:100%;height:100%;background:#000613;overflow:hidden}
/* the film frame is placed right of the headline and feathered into the page background on both sides,
   so there is never a visible edge, whatever the viewport width */
.hero-frame{position:absolute;top:50%;left:62%;height:max(86%,calc(60vw * 9 / 16));aspect-ratio:16/9;transform:translate(-50%,-50%);
  /* feathered on all four sides so the film never shows an edge; sized so the whole stack stays in view on 16:10, 16:9 and ultrawide */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 26%,#000 88%,transparent 100%),linear-gradient(180deg,transparent 0,#000 9%,#000 84%,transparent 100%);mask-composite:intersect}
.hero-frame img,.hero-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero-poster-end{opacity:0}
.no-js .hero-poster-end,.rm .hero-poster-end{opacity:1}
.hero-video{opacity:0;transition:opacity .8s var(--ease)}
.hero-video.playing{opacity:1}
.hero-video.fading{opacity:0;transition-duration:.5s}
/* once the film runs, the start poster steps aside so a restart fades through dark (never a crossfade between different stack states) */
.hero-frame.film-on .hero-poster{opacity:0;transition:opacity .2s linear .9s}
.rm .hero-video{display:none}
@media (max-width:900px){.hero-frame{left:58%}}
@media (max-width:760px){
  .hero-frame{top:56px;left:24%;height:46%;transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%)}
}
@media (max-width:760px) and (max-height:780px){.hero-frame{top:46px;height:33%;
  /* v13: on shorter phones the frame is narrower than the screen, so feather its right edge too (no visible edge) */
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0,#000 84%,transparent 100%),linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%);mask-composite:intersect}}
/* readability: smooth full-width gradients only (no boxes, no hard edges) */
.hero-scrim{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(90deg,rgba(0,6,19,.88) 0%,rgba(0,6,19,.70) 22%,rgba(0,6,19,.34) 42%,rgba(0,6,19,.08) 60%,rgba(0,6,19,0) 74%),
  linear-gradient(0deg,rgba(0,6,19,.92) 0%,rgba(0,6,19,.35) 18%,rgba(0,6,19,0) 36%),
  linear-gradient(180deg,rgba(0,6,19,.5) 0%,rgba(0,6,19,0) 16%)}
.hero-text{position:absolute;inset:0;max-width:calc(var(--wrap) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.hero-state{position:absolute;left:var(--pad);right:var(--pad);bottom:17vh;max-width:min(880px,62vw);opacity:0;visibility:hidden;transform:translate3d(0,34px,0);transition:opacity .45s ease-in,transform .6s ease-in,visibility 0s linear .45s;pointer-events:none}
.hero-state.is-on{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition:opacity .9s var(--ease) .45s,transform 1.1s var(--ease) .45s,visibility 0s}
.hero-state.is-off{transform:translate3d(0,-26px,0)}
.hero-state .display{text-shadow:0 4px 40px rgba(0,6,19,.6)}
.no-js .hero-state[data-state="2"],.rm .hero-state[data-state="2"]{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.rm .hero-state:not([data-state="2"]){display:none}
.brandline{font-size:clamp(3rem,6.4vw,6.6rem)!important}
.hero-lead{color:#c4cddb;font-size:1.13rem;max-width:52ch;margin:26px 0 30px}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin-bottom:18px}
.hero-dots{position:absolute;left:0;right:0;bottom:40px;max-width:calc(var(--wrap) + 2*var(--pad));margin:0 auto;padding:0 var(--pad);display:flex;gap:10px;z-index:3}
.dot{appearance:none;border:0;background:none;padding:10px 0;cursor:pointer;width:46px}
.dot i{display:block;height:3px;border-radius:3px;background:rgba(226,236,245,.18);overflow:hidden;position:relative}
.dot i::after{content:"";position:absolute;inset:0;background:var(--accent);box-shadow:0 0 10px var(--accent);transform-origin:0 50%;transform:scaleX(0)}
.dot.is-past i::after{transform:scaleX(1)}
.dot.is-on i::after{animation:dotfill var(--dur,3s) linear forwards}
.hero.paused .dot.is-on i::after{animation-play-state:paused}
.dot:hover i{background:rgba(226,236,245,.32)}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.no-js .hero-dots,.rm .hero-dots{display:none}
@keyframes pulse{50%{opacity:.25}}

/* ---------- thread ---------- */
.threaded{position:relative}
.thread{position:absolute;top:0;bottom:0;left:var(--tx,40px);width:1px;background:linear-gradient(180deg,var(--line) 0,var(--line) 92%,transparent);z-index:2;pointer-events:none}
.thread-fill{position:absolute;inset:0 0 auto;height:100%;background:linear-gradient(180deg,rgba(20,184,166,.1),var(--accent));transform-origin:0 0;transform:scaleY(var(--tp,0));box-shadow:0 0 12px var(--accent-glow)}
.thread-head{opacity:0;transition:opacity .5s;position:absolute;left:-3px;top:0;transform:translateY(var(--tpx,0px));width:7px;height:7px;margin-top:-3px;border-radius:50%;background:var(--accent-hi);box-shadow:0 0 0 4px rgba(20,184,166,.15),0 0 18px 4px var(--accent-glow)}
.node{position:absolute;left:calc(var(--tx,40px) - 5px);width:11px;height:11px;border-radius:50%;border:1px solid var(--line-2);background:var(--bg);z-index:3;transition:border-color .4s,background .4s,box-shadow .4s;pointer-events:none}
.node.on{border-color:var(--accent);background:var(--accent);box-shadow:0 0 14px var(--accent-glow)}

.thread.started .thread-head{opacity:1}
/* ---------- sections ---------- */
.section{position:relative;padding:136px 0}
.wrap{position:relative;z-index:1;max-width:calc(var(--wrap) + 2*var(--pad));margin:0 auto;padding:0 var(--pad)}
.section-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.section-bg img{position:absolute;right:0;top:0;width:min(1100px,85vw);height:auto;opacity:.55;-webkit-mask-image:radial-gradient(ellipse at 60% 35%,#000 20%,transparent 70%);mask-image:radial-gradient(ellipse at 60% 35%,#000 20%,transparent 70%)}
.bg-floor img{top:auto;bottom:0;left:0;right:0;width:100%;opacity:.7;-webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 80%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,#000 80%,transparent)}

/* reveal */
.js [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js [data-reveal].in{opacity:1;transform:none}

/* problem rows */
.rows{margin-top:84px;border-top:1px solid var(--line)}
.row{display:grid;grid-template-columns:120px minmax(0,1fr) minmax(0,1.15fr);gap:32px;align-items:baseline;padding:38px 0;border-bottom:1px solid var(--line);transition:background .4s}
.row h3{font-family:var(--display);font-size:clamp(1.35rem,2vw,1.8rem);font-weight:700;letter-spacing:-.018em;line-height:1.1}
.row p{color:var(--muted)}
.row-idx{color:var(--faint);transition:color .3s}
.row:hover .row-idx{color:var(--accent)}
.row:hover h3{color:#fff}

/* ---------- tidy interaction ---------- */
.tidy{background:linear-gradient(180deg,var(--bg),var(--bg-2) 30%,var(--bg-2) 70%,var(--bg))}
.tidy-head{display:block}
.tidy-head h2{max-width:24ch}
.tidy-head .section-lead{margin:0}
.stage{position:relative;margin-top:64px;border:1px solid var(--line);border-radius:28px;padding:30px;background:
  radial-gradient(900px 400px at 50% -10%,rgba(20,184,166,.10),transparent 70%),
  linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0));
  box-shadow:0 60px 120px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
.stage::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(226,236,245,.09) 1px,transparent 1px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%);pointer-events:none}
.board{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.lane{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:18px;border:1px solid var(--line);background:rgba(0,6,19,.55);min-height:300px;transition:border-color .6s,background .6s}
.lane-title{display:flex;align-items:center;gap:10px;color:var(--faint);font-size:.66rem;padding:2px 2px 8px;transition:color .5s}
.lane-title i{width:7px;height:7px;border-radius:50%;border:1px solid var(--faint);transition:all .5s}
.lane.lit{border-color:rgba(20,184,166,.35);background:rgba(20,184,166,.04)}
.lane.lit .lane-title{color:var(--accent-hi)}
.lane.lit .lane-title i{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px var(--accent)}
.slot{height:104px;border-radius:14px;border:1px dashed rgba(226,236,245,.08)}
.chips{position:absolute;inset:0;pointer-events:none}
.chip-card{position:absolute;left:0;top:0;width:220px;height:104px;will-change:transform;transform-origin:50% 50%}
.face{position:absolute;inset:0;border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;font-size:.9rem;line-height:1.35;overflow:hidden}
.face .src{font-size:.6rem;letter-spacing:.12em;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mess{box-shadow:0 24px 40px -18px rgba(0,0,0,.9)}
.t-wa .mess{background:#0d3b30;color:#dcfce7;border:1px solid rgba(134,239,172,.2);border-radius:14px 14px 14px 4px}
.t-vm .mess{background:#1b1f2e;color:#e2e8f0;border:1px solid rgba(255,255,255,.1)}
.t-xl .mess{background:#f4f6f8;color:#1f2937;border:1px solid #cbd5e1;border-radius:6px}
.t-xl .mess .src{color:#166534;opacity:1}
.cells{display:grid;grid-template-columns:1.3fr .7fr .7fr;border:1px solid #cbd5e1;font-size:.8rem}
.cells i{font-style:normal;padding:5px 7px;border-right:1px solid #cbd5e1}
.cells i:last-child{border-right:0;color:#b91c1c}
.t-em .mess{background:#e8edf5;color:#111827;border-radius:8px}
.t-em .mess .src{color:#475569;opacity:1}
.t-st .mess{background:#f6d860;color:#3b2f05;border-radius:3px;justify-content:center;box-shadow:0 30px 40px -20px rgba(0,0,0,.95)}
.hand{font-family:"Caveat","Segoe Print","Bradley Hand",cursive;font-size:1.45rem;font-weight:700;line-height:1.05;transform:rotate(-2deg)}
.neat{opacity:0;background:linear-gradient(180deg,#0c1a36,#08122a);border:1px solid rgba(20,184,166,.32);box-shadow:0 18px 40px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05);color:var(--text)}
.neat b{font-weight:600;font-size:.98rem}
.neat span{color:var(--muted);font-size:.86rem}
.neat em{font-style:normal;align-self:flex-start;margin-top:auto;font-size:.58rem;color:#00110f;background:var(--accent);padding:4px 9px;border-radius:999px;letter-spacing:.1em}
.tidy-controls{display:flex;align-items:center;gap:24px;margin-top:34px;flex-wrap:wrap}
.tidy-controls{gap:20px 28px}
.hold{--hp:0;position:relative;display:inline-flex;align-items:center;gap:16px;padding:10px 30px 10px 10px;border-radius:999px;border:0;background:linear-gradient(180deg,#22d3c0,var(--accent));color:#00110f;font:700 1.12rem var(--sans);cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;box-shadow:0 14px 44px -10px var(--accent-glow),0 0 0 1px rgba(94,234,212,.5),inset 0 1px 0 rgba(255,255,255,.45);transition:transform .2s var(--ease),box-shadow .3s,background .3s;isolation:isolate}
.hold::before,.hold::after{content:"";position:absolute;inset:-2px;border-radius:inherit;border:2px solid var(--accent-hi);opacity:0;z-index:-1;pointer-events:none;animation:holdping 2.2s var(--ease) infinite}
.hold::after{animation-delay:1.1s}
@keyframes holdping{0%{opacity:.75;inset:-2px}100%{opacity:0;inset:-18px}}
.hold:hover{transform:translateY(-2px);box-shadow:0 20px 54px -10px var(--accent-glow),0 0 0 1px rgba(94,234,212,.7),inset 0 1px 0 rgba(255,255,255,.5)}
.hold.pressing{transform:scale(.97)}
.hold.pressing::before,.hold.pressing::after,.hold.done::before,.hold.done::after,.hold.auto::before,.hold.auto::after{animation:none;opacity:0}
.hold.done{background:rgba(20,184,166,.14);color:var(--text);box-shadow:0 0 0 1px var(--accent)}
.hold-ico{position:relative;width:56px;height:56px;flex:none;border-radius:50%;background:#00110f;display:grid;place-items:center}
.ring{position:absolute;inset:0;width:56px;height:56px;transform:rotate(-90deg)}
.ring circle{fill:none;stroke:rgba(94,234,212,.22);stroke-width:4.5}
.ring .ring-fill{stroke:var(--accent-hi);stroke-linecap:round;stroke-dasharray:157.08;stroke-dashoffset:calc(157.08 * (1 - var(--hp,0)));filter:drop-shadow(0 0 4px var(--accent))}
.hand-ico{width:24px;height:24px;fill:none;stroke:var(--accent-hi);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;animation:tapnudge 2.2s var(--ease) infinite}
.hold.pressing .hand-ico,.hold.done .hand-ico,.hold.auto .hand-ico{animation:none}
@keyframes tapnudge{0%,60%,100%{transform:none}70%{transform:translateY(2px) scale(.9)}80%{transform:none}}
.hold-text{min-width:12.5em;display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left}
.hold-sub[hidden]{display:none}
.hold.nudge{animation:holdnudge .45s var(--ease)}
@keyframes holdnudge{20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
.hold.done .hold-sub{opacity:.8}
.hint-keys{display:block;color:var(--faint);font-size:.85em;margin-top:4px}
.hold-reset{appearance:none;background:none;border:1px solid var(--line-2);color:var(--muted);border-radius:999px;padding:9px 16px;cursor:pointer;font-size:.64rem;transition:border-color .3s,color .3s}
.hold-reset:hover{border-color:var(--accent);color:var(--text)}
.hold-reset[hidden]{display:none}
.hold-sub{font-size:.62rem;letter-spacing:.14em;opacity:.72;font-weight:600}
.hold-hint{color:var(--muted);font-size:.95rem;max-width:44ch;display:flex;gap:10px;align-items:baseline}
.hint-arrow{color:var(--accent);font-weight:700;display:inline-block;animation:hintx 1.6s var(--ease) infinite}
@keyframes hintx{50%{transform:translateX(-5px)}}
@media (max-width:760px){.hold{font-size:1.02rem;padding-right:24px;width:100%}.hold-hint .hint-arrow{transform:rotate(90deg);animation:none}}
.disclaimer{margin-top:22px;color:var(--faint);font-size:.62rem}

/* ---------- offers ---------- */
.offers{display:grid;grid-template-columns:1.15fr 1fr;gap:24px;margin-top:80px}
.offer{--mx:50%;--my:0%;position:relative;padding:48px 44px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.005));overflow:hidden;transition:border-color .4s}
.offer::before{content:"";position:absolute;inset:0;background:radial-gradient(500px circle at var(--mx) var(--my),rgba(20,184,166,.13),transparent 60%);opacity:0;transition:opacity .5s;pointer-events:none}
.offer:hover::before{opacity:1}
.offer:hover{border-color:var(--line-2)}
.offer-main{border-color:rgba(20,184,166,.35);background:radial-gradient(600px 300px at 0% 0%,rgba(20,184,166,.12),transparent 70%),linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.005))}
.offer-tag{color:var(--accent);margin:0}
.offer-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.pill-soon,.pill-now{font-size:.62rem;letter-spacing:.14em;padding:7px 12px;border-radius:999px;white-space:nowrap}
.pill-soon{background:var(--accent);color:#00110f;font-weight:700;box-shadow:0 0 22px -4px var(--accent-glow)}
.pill-now{color:var(--accent-hi);border:1px solid rgba(20,184,166,.45);background:rgba(20,184,166,.08)}
.offer-soon{border-style:dashed;border-color:rgba(226,236,245,.16)}
.offer-soon h3,.offer-soon .ticks{opacity:.55}
.offer-soon>p{color:#8592a6}
.offer-soon>p strong{color:var(--accent-hi);font-weight:600}
.offer h3{margin-bottom:16px;max-width:16ch}
.offer>p{color:var(--muted);margin-bottom:30px;max-width:46ch}
.ticks{display:grid;gap:0;border-top:1px solid var(--line)}
.ticks li{padding:13px 0 13px 30px;border-bottom:1px solid var(--line);position:relative;font-size:.98rem}
.ticks li::before{content:"";position:absolute;left:2px;top:50%;width:12px;height:1px;background:var(--accent);box-shadow:0 0 8px var(--accent)}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:84px;position:relative}
.steps::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--accent),rgba(20,184,166,.15))}
.step{position:relative;padding:44px 28px 0 0}
.step::before{content:"";position:absolute;top:-4px;left:0;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--accent);box-shadow:0 0 10px var(--accent-glow)}
.step-n{color:var(--accent);display:block;margin-bottom:22px}
.step h3{margin-bottom:14px}
.step p{color:var(--muted);font-size:.97rem}

/* ---------- principles ---------- */
.why{padding-bottom:170px}
.principles{border-top:1px solid var(--line)}
.principle{display:grid;grid-template-columns:150px minmax(0,1.5fr) minmax(0,1fr);gap:32px;align-items:center;padding:46px 0;border-bottom:1px solid var(--line)}
.principle .mono{color:var(--faint)}
.principle>p:last-child{color:var(--muted)}
.principle h3{transition:color .4s}
/* v23: the teal state follows scroll (js/principles.js), one principle at a time; tap/click also sets it */
.principle.is-active h3{color:var(--accent-hi)}
.principle{cursor:default}
@media (prefers-reduced-motion:reduce){.principle h3{transition:none}}
.founder{margin:96px 0 0;max-width:820px;padding-left:0}
.founder blockquote{margin:0}
.founder blockquote p{font-family:var(--display);font-weight:500;font-size:clamp(1.35rem,2.3vw,1.95rem);line-height:1.32;letter-spacing:-.004em;color:#dfe6ee}
.founder figcaption{margin-top:22px;color:var(--accent)}

/* ---------- FAQ ---------- */
.faq-grid{display:grid;grid-template-columns:1fr 1.3fr;gap:72px;align-items:start}
.faq-side{position:sticky;top:120px}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:24px;padding:28px 0;font-family:var(--display);font-weight:600;font-size:1.22rem;letter-spacing:-.004em;transition:color .3s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-hi)}
.faq summary::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line-2);background:
  linear-gradient(var(--accent),var(--accent)) center/11px 1.5px no-repeat,
  linear-gradient(var(--accent),var(--accent)) center/1.5px 11px no-repeat;transition:transform .4s var(--ease),border-color .3s}
.faq details[open] summary::after{transform:rotate(45deg);border-color:var(--accent)}
.ans{overflow:hidden}
.ans p{color:var(--muted);padding:0 60px 30px 0;max-width:62ch}

/* ---------- CTA ---------- */
.cta{position:relative;padding:190px 0 170px;overflow:hidden;border-top:1px solid var(--line)}
.cta-media{position:absolute;inset:0}
.cta-media img{position:absolute;right:-6%;top:50%;transform:translateY(-50%);width:min(1250px,95vw);height:auto;opacity:.9;-webkit-mask-image:radial-gradient(ellipse 60% 70% at 62% 50%,#000 35%,transparent 72%);mask-image:radial-gradient(ellipse 60% 70% at 62% 50%,#000 35%,transparent 72%)}
.cta-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 18%,rgba(0,6,19,.55) 52%,rgba(0,6,19,0) 80%)}
.cta-inner h2{max-width:14ch}
.cta .hero-ctas{margin-top:40px}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--line);padding:72px 0 34px;background:#00040d;position:relative;z-index:1}
.footer-inner{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.logo-foot{margin-bottom:18px}
.logo-foot .logo-mark{height:30px}.logo-foot .logo-word{font-size:1.18rem}
.footer-brand p{color:var(--muted);font-size:.95rem;max-width:34ch}
.footer-cols{display:flex;gap:72px;flex-wrap:wrap}
.footer-cols .fh{color:var(--faint);margin-bottom:16px}
.footer-cols a{font-size:.72rem}
.socials{display:flex;flex-direction:column;gap:10px}
.footer-base{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:64px;padding-top:24px;border-top:1px solid var(--line);color:var(--faint);font-size:.62rem}

/* ---------- responsive ---------- */
@media (max-width:1280px){ .threaded .wrap{padding-left:84px} }
@media (max-width:1100px){
  .nav-links{display:none}
  .faq-grid{grid-template-columns:1fr;gap:28px}
  .faq-side{position:static}
  .steps{grid-template-columns:1fr 1fr;row-gap:56px}
  .steps::before{display:none}
  .step{border-top:1px solid var(--accent)}
  .offers{grid-template-columns:1fr}
  .principle{grid-template-columns:120px 1fr;}
  .principle>p:last-child{grid-column:2}
  .hero-state{max-width:80vw}
}
@media (max-width:760px){
  :root{--pad:20px;--tx-gap:26px}
  body{font-size:16px}
  .threaded .wrap{padding-left:48px}
  .header-inner{height:64px}
  .brand .logo-mark{height:26px}.brand .logo-word{font-size:1.08rem}.logo{gap:10px}
  .hero-state{max-width:none;bottom:12vh}
  .hero-ctas .btn-ghost{display:none}
  .hero-state .micro{display:none}
  .hero-scrim{background:linear-gradient(0deg,#000613 0%,rgba(0,6,19,.97) 46%,rgba(0,6,19,.4) 56%,rgba(0,6,19,0) 66%,rgba(0,6,19,.45) 100%)!important}
  .display.xl{font-size:clamp(2.6rem,12vw,4rem)}
  .brandline{font-size:clamp(2.8rem,13vw,4.2rem)!important}
  .hero-lead{font-size:1rem;margin:18px 0 24px}
  .hero-ctas .btn{flex:1 1 auto;justify-content:center}
  .hero-dots{bottom:18px}
  .dot{width:34px}
  .section{padding:104px 0}
  .rows{margin-top:56px}
  .row{grid-template-columns:1fr;gap:10px;padding:28px 0}
  .stage{padding:14px;border-radius:20px;min-height:0}
  .board{grid-template-columns:1fr 1fr;gap:10px}
  .lane{min-height:0;padding:10px;gap:8px;border-radius:14px}
  .slot{height:92px}
  .chip-card{height:92px}
  .face{padding:10px 11px;font-size:.78rem;gap:4px}
  .neat b{font-size:.84rem}.neat span{font-size:.74rem}
  .neat em{font-size:.5rem;padding:3px 7px}
  .hand{font-size:1.15rem}
  .cells{font-size:.68rem}
  .offer{padding:34px 24px;border-radius:20px}
  .steps{grid-template-columns:1fr;row-gap:44px}
  .step{padding-top:32px}
  .principle{grid-template-columns:1fr;gap:12px;padding:34px 0}
  .principle>p:last-child{grid-column:auto}
  .founder{margin-top:64px}
  .faq summary{font-size:1.08rem;padding:22px 0}
  .ans p{padding-right:0}
  .cta{padding:120px 0 110px}
  .cta-media img{right:-30%;top:auto;bottom:-4%;transform:none;width:150vw;opacity:.55}
  .cta-media::after{background:linear-gradient(180deg,var(--bg) 25%,rgba(0,6,19,.6) 65%,rgba(0,6,19,.3))}
  .footer-cols{gap:40px}
}

/* reduced motion: static hero, no reveals */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .js [data-reveal]{opacity:1;transform:none}
}


@media (max-width:420px){.brand .logo-mark{height:22px}.brand .logo-word{font-size:.96rem}.logo{gap:8px}.site-header .btn-small{padding:9px 14px;font-size:.84rem}}
.footer-brand .logo-foot{color:var(--text);max-width:none;font-size:inherit}

/* ---------- v10 hero layout: text block vertically centred between the fixed header and the progress bars,
   all three slides stacked in one grid cell (stable height, no jumps), text column kept clear of the slabs ---------- */
:root{--hdr:76px;--hero-foot:104px;--hcol:min(43vw,680px)}
.hero-text{inset:auto;left:0;right:0;top:var(--hdr);bottom:var(--hero-foot);display:grid;grid-template-columns:minmax(0,var(--hcol));align-content:center;align-items:center}
.hero-state{grid-area:1/1;position:relative;left:auto;right:auto;bottom:auto;max-width:none;min-width:0}
.hero .display.xl{font-size:clamp(2.7rem,4.6vw,5.3rem)}
.hero .brandline{font-size:clamp(2.5rem,4.25vw,4.6rem)!important;white-space:nowrap}
/* the film's slabs start 9.4% of the frame width left of the frame centre (union of every frame, glow included):
   place the frame centre so that edge sits >= 48px right of the text column, never further left than the old 62% */
.hero-frame{left:max(62%,calc(var(--hcol) + (100vw - min(100vw,var(--wrap) + 2*var(--pad))) / 2 + var(--pad) + 48px + max(14.4vh,5.64vw)))}
/* phones: blocks above, text centred in the space below them (frame = top 56px + 46% of the hero; the stack ends ~92% down the frame) */
@media (max-width:760px){
  :root{--hdr:64px;--hcol:100%}
  .hero-frame{left:24%}
  .hero-text{top:calc(56px + 46% * .92);bottom:50px}
  .hero .display.xl{font-size:clamp(2.4rem,10.6vw,3.6rem)}
  .hero .brandline{font-size:clamp(2.4rem,11.4vw,3.8rem)!important}
}
@media (max-width:760px) and (max-height:780px){.hero-text{top:calc(46px + 33% * .9)}}

/* v11: slide-1 headline in three deliberate lines, sized to the text column (widest line ~5.6em), "template." in brand teal like "Digital." */
.hero .display.xl.hero-h1{font-size:clamp(3rem,calc(min(43vw,680px) / 5.85),7.4rem);line-height:.93}
.hero-h1 .ln{display:block;white-space:nowrap}
@media (max-width:760px){.hero .display.xl.hero-h1{font-size:clamp(2.6rem,14.6vw,4.6rem)}}

/* v11: fixed stacking order for the tidy cards (DOM order = chaos-state order), never changed by JS:
   WhatsApp 1 < voicemail 2 < spreadsheet 3 < inbox 4 < sticky note 5 */
.chip-card:nth-child(1){z-index:1}.chip-card:nth-child(2){z-index:2}.chip-card:nth-child(3){z-index:3}.chip-card:nth-child(4){z-index:4}.chip-card:nth-child(5){z-index:5}

/* v12: one shared headline size for all three hero slides, sized so "Clearmason Digital." (7.18em wide, one line)
   fits the text column; same line-height and letter-spacing everywhere */
:root{--hero-fs:clamp(2.6rem,calc(min(43vw,680px) / 7.35),6rem)}
@media (max-width:760px){:root{--hero-fs:clamp(2.2rem,12vw,3.6rem)}}
.hero .hero-state .display.xl,.hero .hero-state .display.xl.hero-h1,.hero .hero-state .brandline{font-size:var(--hero-fs)!important;line-height:.95;letter-spacing:-.03em}
.hero-lines .ln{display:block;white-space:nowrap}


/* ================= v13: mobile optimisation pass (desktop >1100px unchanged) ================= */
[id]{scroll-margin-top:88px}                       /* fixed header never covers anchor targets */
.nav-toggle,.mobile-menu{display:none}
@media (max-width:1100px){
  .nav-toggle{display:inline-flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;flex:none;border:1px solid var(--line-2);border-radius:999px;background:rgba(0,6,19,.4);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .nav-toggle span{display:block;width:18px;height:1.5px;border-radius:2px;background:var(--text);transition:transform .3s var(--ease)}
  .menu-open .nav-toggle span:first-child{transform:translateY(3.75px) rotate(45deg)}
  .menu-open .nav-toggle span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
  .header-inner .btn-small{margin-left:auto}
  .header-inner{gap:12px}
  .mobile-menu:not([hidden]){display:block;position:fixed;left:0;right:0;top:0;bottom:0;z-index:-1;padding:calc(var(--hdr,76px) + 18px) max(var(--pad),env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(var(--pad),env(safe-area-inset-left));background:rgba(0,6,19,.97);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);overflow-y:auto;overscroll-behavior:contain}
  .mobile-links{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line)}
  .mobile-links a{display:flex;align-items:baseline;gap:16px;min-height:60px;padding:16px 2px;border-bottom:1px solid var(--line);color:var(--text);text-decoration:none;font-family:var(--display);font-weight:700;font-size:1.6rem;letter-spacing:-.02em}
  .mobile-links a .mono{font-size:.75rem;color:var(--accent-hi);letter-spacing:.12em;font-family:var(--mono);font-weight:400}
  .mobile-menu .btn{width:100%;justify-content:center;min-height:52px}
  .menu-open, .menu-open body{overflow:hidden}
  .menu-open .site-header{background:rgba(0,6,19,.97);border-bottom-color:var(--line);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
}
@media (max-width:760px){
  /* header: 44px tap targets, safe areas */
  .header-inner{padding-left:max(var(--pad),env(safe-area-inset-left));padding-right:max(var(--pad),env(safe-area-inset-right));gap:10px}
  .site-header .brand{min-height:44px}
  .site-header .btn-small{min-height:44px;padding:0 16px}
  .skip{min-height:44px;display:inline-flex;align-items:center}
  /* hero: more room between slide 3 and the progress bars; 44px-tall dot hit areas (bars stay where they were) */
  .hero-text{bottom:calc(74px + env(safe-area-inset-bottom))}
  .hero-dots{bottom:calc(8px + env(safe-area-inset-bottom))}
  .dot{padding:20.5px 0;width:44px}
  /* small print readable */
  .pill-soon,.pill-now{font-size:.7rem}
  .disclaimer{font-size:.7rem;line-height:1.6}
  /* section 07: give the slab picture its own space under the button so the whole stack shows, instead of a clipped corner behind the email */
  .cta{padding-bottom:calc(58vw + 24px)}
  .cta-media img{right:calc(6vw + 14px);bottom:-3%;width:122vw;opacity:.8;-webkit-mask-image:radial-gradient(ellipse 58% 62% at 60% 52%,#000 40%,transparent 74%);mask-image:radial-gradient(ellipse 58% 62% at 60% 52%,#000 40%,transparent 74%)}
  .cta-media::after{background:linear-gradient(180deg,var(--bg) 30%,rgba(0,6,19,.55) 52%,rgba(0,6,19,0) 70%)}
  .cta .link-u{display:inline-block;padding:12px 0}
  .faq-side .section-lead a{padding:12px 0}
  /* footer: bigger links with 44px hit areas, readable base line, safe area */
  .footer-cols{gap:32px}
  .footer-cols a{font-size:.86rem;display:inline-flex;align-items:center;min-height:44px;min-width:44px}
  .socials{gap:0}
  .footer-base{font-size:.78rem;line-height:1.6}
  .site-footer{padding-bottom:calc(34px + env(safe-area-inset-bottom))}
}
@media (max-width:380px){
  .site-header .btn-small{padding:0 11px;font-size:.76rem}
  .header-inner{gap:6px}
  .brand .logo-word{font-size:.86rem}.brand .logo-mark{height:20px}.logo{gap:7px}
}
/* short phones (iPhone SE class): smaller film band so slide 3 has room above the progress bars */
@media (max-width:760px) and (max-height:700px){
  .hero-frame{top:46px;height:29%}
  .hero-text{top:calc(46px + 29% * .9);bottom:calc(66px + env(safe-area-inset-bottom))}
  .hero-lead{margin:12px 0 18px}
  .hero-state .label-sm{margin-bottom:12px}
}

/* touch tablets (761-1100px, coarse pointer): same 44px hit areas, without changing the layout */
@media (min-width:761px) and (max-width:1100px) and (pointer:coarse){
  .site-header .brand{min-height:44px}
  .dot{padding:20.5px 0}
  .hero-dots{bottom:30px}
  .cta .link-u{display:inline-block;padding:12px 0}
  .faq-side .section-lead a{padding:12px 0}
  .footer-cols a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;font-size:.84rem}
  .pill-soon,.pill-now,.disclaimer{font-size:.7rem}
  .footer-base{font-size:.76rem}
  .socials{gap:0}
}

/* v13: portrait tablets (e.g. iPad 768x1024, 820x1180, 834x1194): the desktop side-by-side hero cropped the blocks off the right edge
   and left the headline small, so use the phone arrangement (blocks above, text below) at tablet scale. Landscape tablets and desktop unchanged. */
@media (min-width:761px) and (max-width:1100px) and (orientation:portrait) and (min-height:900px){
  :root{--hcol:100%;--hero-fs:clamp(3.6rem,8.4vw,5.4rem)}
  .hero-frame{top:60px;left:40%;height:52%;transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%)}
  .hero-scrim{background:linear-gradient(0deg,#000613 0%,rgba(0,6,19,.97) 42%,rgba(0,6,19,.4) 54%,rgba(0,6,19,0) 64%,rgba(0,6,19,.45) 100%)!important}
  .hero-text{top:calc(60px + 52% * .86);bottom:96px;grid-template-columns:minmax(0,860px)}
  .hero-state{max-width:none}
  .hero-lead{max-width:36em}
}

/* v16: footer small grey text lightened just enough for WCAG AA (4.5:1). Same grey hue/saturation as --faint (#5d6a80, 3.75:1);
   #697891 is 4.59:1 on the footer background (#00040d). Only the footer uses it; --faint elsewhere is unchanged. */
.footer-cols .fh,.footer-base{color:#697891}

/* v17: phones - blocks and text form one balanced group in the hero instead of blocks at the top and text at the bottom.
   --F  = film frame height (a bit larger than before); the settled stack spans 17.8%..78.1% of the frame height.
   --T  = reference text height (between slide 1 and slide 3), used only to centre the group between header and progress bars.
   Text starts a fixed --gap below the stack, so no slide can overlap the blocks. Tablet portrait (761px+) and desktop untouched. */
@media (max-width:760px){
  .hero{--hh:max(100svh,600px);--F:min(calc(var(--hh) * .5),108vw);--T:230px;--gap:32px;
    --stackTop:calc(64px + max(8px,(var(--hh) - 135px - var(--F) * .603 - var(--gap) - var(--T)) / 2));
    --textTop:calc(var(--stackTop) + var(--F) * .603 + var(--gap))}
  .hero .hero-frame{top:calc(var(--stackTop) - var(--F) * .178);height:var(--F);left:calc(50% - var(--F) * .24);transform:translateX(-50%);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 62%,transparent 100%)}
  .hero .hero-text{top:var(--textTop);bottom:calc(66px + env(safe-area-inset-bottom));align-content:start}
  .hero .hero-scrim{background:linear-gradient(180deg,rgba(0,6,19,.45) 0,rgba(0,6,19,0) 12%,rgba(0,6,19,0) calc(var(--textTop) - 28px),rgba(0,6,19,.88) calc(var(--textTop) + 28px),#000613 calc(var(--textTop) + 90px))!important}
}

/* v18: footer bottom bar - Privacy and Terms links (replace the "Serving businesses..." line) */
.footer-base .legal-links{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.footer-base .legal-links a{color:inherit;text-decoration:none;transition:color .3s}
.footer-base .legal-links a:hover,.footer-base .legal-links a:focus-visible{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){.footer-base .legal-links{gap:6px}.footer-base .legal-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}}
@media (min-width:761px) and (max-width:1100px) and (pointer:coarse){.footer-base .legal-links a{display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center}}

/* v18: Privacy and Terms pages */
.legal .site-header{background:rgba(0,6,19,.72);backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line)}
.legal-main{padding:clamp(120px,14vh,160px) 0 96px}
.legal-doc{max-width:46rem}
.legal-doc h1{margin:16px 0 14px}
.legal-doc .updated{color:var(--muted);font-size:.95rem;margin-bottom:28px}
.legal-doc .intro{color:var(--text);font-size:1.08rem;line-height:1.65;margin-bottom:12px}
.legal-doc h2{font-family:var(--display);font-weight:700;font-size:clamp(1.3rem,2.2vw,1.6rem);letter-spacing:-.02em;line-height:1.2;margin:44px 0 12px;color:var(--text)}
.legal-doc h3{font-size:1.02rem;font-weight:600;margin:22px 0 6px;color:var(--text)}
.legal-doc p,.legal-doc li{color:var(--muted);font-size:1rem;line-height:1.7}
.legal-doc p+p{margin-top:12px}
.legal-doc ul{margin:10px 0 0;padding-left:1.2em}
.legal-doc li+li{margin-top:6px}
.legal-doc strong{color:var(--text);font-weight:600}
.legal-doc a{color:var(--accent-hi);text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-doc .toc{margin:8px 0 0;padding:20px 22px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.legal-doc .toc ol{margin:0;padding-left:1.3em;columns:2;column-gap:28px}
.legal-doc .toc li{font-size:.95rem;break-inside:avoid}
.legal-doc .toc a{text-decoration:none}
.legal-doc .toc a:hover{text-decoration:underline}
.legal-doc .note{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);font-size:.92rem}
@media (max-width:760px){.legal-main{padding:104px 0 72px}.legal-doc .toc ol{columns:1}.legal-doc .toc a{display:inline-block;padding:6px 0}.legal-doc h2{margin-top:36px}}
.legal-doc .label{color:var(--accent)}
.legal-doc ul{list-style:disc}.legal-doc ol{list-style:decimal}
.legal-doc li::marker{color:var(--accent)}
.legal-doc .toc ol{padding-left:1.4em}
.legal-doc ul+p{margin-top:14px}

/* v19: simpler, airier Privacy and Terms pages. Content starts well clear of the fixed header (header height + safe area + space). */
.legal-v19{max-width:65ch}
.legal-main{padding:calc(76px + env(safe-area-inset-top) + 80px) 0 112px}
.legal-v19 .legal-title{font-family:var(--display);font-weight:700;font-size:clamp(2.2rem,4.4vw,3.2rem);line-height:1.08;letter-spacing:-.025em;color:var(--text);margin:0}
.legal-v19 .updated{margin:16px 0 0;color:var(--muted);font-size:.9rem}
.legal-v19 .intro{margin:28px 0 0;color:var(--text);font-size:1.1rem;line-height:1.6}
.legal-v19 section{margin-top:44px;padding-top:36px;border-top:1px solid var(--line)}
.legal-v19 section:first-of-type{margin-top:48px}
.legal-v19 h2{font-family:var(--sans);font-weight:600;font-size:1.15rem;letter-spacing:-.005em;line-height:1.35;margin:0 0 14px;color:var(--text)}
.legal-v19 p,.legal-v19 li{color:var(--muted);font-size:1.06rem;line-height:1.7}
.legal-v19 p+p,.legal-v19 ul+p{margin-top:14px}
.legal-v19 ul{margin:0;padding-left:1.15em;list-style:disc}
.legal-v19 li+li{margin-top:10px}
.legal-v19 li::marker{color:var(--accent)}
.legal-v19 strong{color:var(--text);font-weight:600}
.legal-v19 a{color:var(--accent-hi);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.legal-v19 .note{margin-top:56px;padding-top:28px;border-top:1px solid var(--line);font-size:.95rem}
@media (max-width:760px){
  .legal-main{padding:calc(64px + env(safe-area-inset-top) + 56px) 0 80px}
  .legal-v19 .legal-title{font-size:2.15rem}
  .legal-v19 .intro{margin-top:22px;font-size:1.05rem}
  .legal-v19 section{margin-top:36px;padding-top:32px}
  .legal-v19 section:first-of-type{margin-top:40px}
  .legal-v19 h2{font-size:1.1rem}
  .legal-v19 p,.legal-v19 li{font-size:1rem}
}

/* v22: cookie consent as a full-width bar pinned to the bottom (fixed, no backdrop, page stays usable, no layout shift) */
.cc{position:fixed;left:0;right:0;bottom:0;z-index:79;box-sizing:border-box;background:#0b1424;border-top:1px solid rgba(20,184,166,.35);box-shadow:0 -12px 32px rgba(0,0,0,.35);color:var(--text);padding:18px calc(24px + env(safe-area-inset-right)) calc(18px + env(safe-area-inset-bottom)) calc(24px + env(safe-area-inset-left))}
.cc[hidden]{display:none}
.cc:focus{outline:none}
.cc:focus-visible{outline:2px solid var(--accent-hi);outline-offset:-4px}
.cc-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:32px}
.cc-copy{min-width:0;max-width:620px}
.cc-title{margin:0 0 4px;font-family:var(--sans);font-weight:700;font-size:1.05rem;line-height:1.3;letter-spacing:-.005em;color:var(--text)}
.cc-text{margin:0;font-size:.9rem;line-height:1.5;color:var(--muted)}
.cc-text a{color:var(--text);text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.cc-text a:hover{color:var(--accent-hi)}
.cc-actions{flex:0 0 300px;display:flex;flex-direction:column;gap:8px}
.cc-btn{width:100%;min-height:44px;padding:10px 18px;border-radius:999px;font:600 .92rem/1.2 var(--sans);cursor:pointer;transition:background-color .15s,color .15s,border-color .15s}
.cc-accept{border:1px solid #14B8A6;background:#14B8A6;color:#00110f}
.cc-accept:hover{background:var(--accent-hi);border-color:var(--accent-hi)}
.cc-reject{border:1px solid rgba(238,243,247,.7);background:transparent;color:var(--text)}
.cc-reject:hover{border-color:var(--text);background:rgba(238,243,247,.08)}
.cc-btn:focus-visible{outline:2px solid var(--accent-hi);outline-offset:3px}
html.cc-open body{padding-bottom:var(--cc-h,0px)}
@media (max-width:760px){
  .cc{padding:14px calc(16px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left))}
  .cc-inner{flex-direction:column;align-items:stretch;gap:12px}
  .cc-title{font-size:1rem;margin-bottom:2px}
  .cc-text{font-size:.875rem}
  .cc-actions{flex:none;gap:8px}
}
@media print{.cc{display:none}}

/* v23: anti-banding dither. The hero film, its posters and the dark section images contain very dark gradients that
   compress into 1-level steps; on low-bit-depth or lifted-black monitors those steps show as contour lines.
   A static 128px tile of faint white noise (alpha 0-4 of 255, about +2 levels on average) breaks the steps up.
   Edges are feathered so the layer never leaves a seam against the flat page colour. No animation, no layout cost. */
.hero-media::after,.cta-media::before,.section-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:url(/assets/img/dither-v23.png) 0 0/128px 128px repeat}
.hero-media::after{-webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,#000 72%,transparent 100%)}
.cta-media::before{z-index:1;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
.section-bg::after{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 82%,transparent 100%)}
@media (min-resolution:2dppx){.hero-media::after,.cta-media::before,.section-bg::after{background-size:64px 64px}}
.cta-media{isolation:isolate}

/* v23: no ligatures or contextual alternates anywhere (requested). Note: the shipped Bricolage subset has no OpenType
   substitution features at all and Inter's only one is 'calt', so the distinctive 'f' was Bricolage's default glyph (v24: headings moved to Inter). */
html,body,h1,h2,h3,h4,.display{font-variant-ligatures:no-common-ligatures no-discretionary-ligatures no-contextual;font-feature-settings:"liga" 0,"clig" 0,"dlig" 0,"calt" 0}
/* v24: Inter is wider than Bricolage, so the one-line "Clearmason Digital." slide is scaled to keep it inside the text column */
.hero .hero-state .display.xl.brandline{font-size:calc(var(--hero-fs) * .84)!important}
/* v24: Inter is about 10% wider than Bricolage; heading sizes trimmed so line breaks stay close to before */
.display.lg{font-size:clamp(1.85rem,4vw,3.75rem);max-width:20ch}
.display.xl2{font-size:clamp(2.1rem,4.9vw,4.7rem)}
.row h3{font-size:clamp(1.22rem,1.8vw,1.62rem)}