/* Durward v4: the Gate world. Porcelain, graphite, one vermilion light. No inline styles (CSP style-src 'self'). */
@font-face{font-family:"DW Sans";src:url("/assets/fonts/instrument-sans-var.woff2") format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"DW Mono";src:url("/assets/fonts/jetbrains-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
:root{
  /* FINAL Durward palette (verified by Orion, 29 Oct 2026). Use only these tokens. */
  --ink:#0F1722;--page:#F6F6F4;--card:#FFFFFF;--line:#E4E4E6;--text-2:#41444C;--text-3:#5B5F68;
  --hold:#F04A1A;--hold-text:#C2340C;--ok:#1A7A50;
  --hold-tint:#FFE8E0;--ok-tint:#E2F2EA;
  --sans:"DW Sans","Instrument Sans",ui-sans-serif,system-ui,sans-serif;--mono:"DW Mono","JetBrains Mono",ui-monospace,monospace;
  --gut:clamp(20px,4.4vw,72px);--wrap:clamp(1160px,84vw,1520px);--nav:76px;
  --ease:cubic-bezier(.2,.8,.2,1);--calm:cubic-bezier(0,0,.2,1);
  --shadow:0 40px 80px -40px rgba(15,23,34,.28),0 2px 8px -4px rgba(15,23,34,.08)
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--page);color:var(--ink);-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 16px)}
body{margin:0;font:400 17px/1.6 var(--sans);color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit}
p{margin:0}h1,h2,h3{margin:0;font-weight:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--hold-text);outline-offset:2px;border-radius:8px}
::selection{background:var(--hold-text);color:var(--card)}
.sr{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--card);padding:10px 16px;border-radius:999px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.wrap{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto}

/* type */
.display{font-family:var(--sans);font-weight:600;font-stretch:84%;letter-spacing:-.045em;line-height:.94;text-wrap:balance}
.display em{font-style:normal;color:var(--hold-text)}
.h1{font-size:clamp(54px,7.8vw,132px)}
.h2{font-size:clamp(40px,5.2vw,84px)}
.h3{font-family:var(--sans);font-weight:600;font-stretch:88%;font-size:clamp(22px,1.9vw,28px);letter-spacing:-.025em;line-height:1.12}
.lead{font-size:clamp(17px,1.4vw,21px);line-height:1.52;color:var(--text-2);max-width:33em;text-wrap:pretty}
.fine{font-size:13.5px;line-height:1.5;color:var(--text-3)}
.mono{font-family:var(--mono);font-size:12.5px}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12.5px;color:var(--text-3);margin-bottom:22px}
.eyebrow i,.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--hold);box-shadow:0 0 0 4px rgba(240,74,26,.14),0 0 12px rgba(240,74,26,.7)}
.tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 11px;border-radius:999px;font-weight:650;font-size:12.5px;background:var(--hold-tint);color:var(--hold-text);white-space:nowrap}
.tag::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.tag-ok{background:var(--ok-tint);color:var(--ok)}
.tag-grey{background:var(--page);color:var(--text-2)}
.tag-grey::before{display:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:48px;padding:0 24px;border-radius:999px;border:1px solid transparent;font-weight:600;font-size:15.5px;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .3s var(--calm),border-color .3s var(--calm),transform .3s var(--ease)}
.btn:active{transform:scale(.98)}
.btn-lg{height:58px;padding:0 30px;font-size:16.5px}
.btn-ink{background:var(--ink);color:var(--card)}
.btn-ink:hover{background:var(--text-2)}
.btn-ink .live{width:7px;height:7px}
.btn-glass{background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-color:rgba(23,24,28,.14);color:var(--ink)}
.btn-glass:hover{border-color:var(--ink)}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;height:var(--nav);transition:background-color .35s var(--calm),box-shadow .35s var(--calm)}
.nav.scrolled{background:rgba(246,246,244,.8);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.nav-in{width:min(var(--wrap),100% - 2*var(--gut));margin-inline:auto;height:100%;display:flex;align-items:center;gap:36px}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto;text-decoration:none;font-weight:650;font-stretch:90%;font-size:22px;letter-spacing:-.025em}
.mark{width:26px;height:30px;flex:none}
.mark .arch{fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.mark .sill{stroke:var(--hold);stroke-width:2.6;stroke-linecap:round}
.links{display:flex;gap:32px;font-size:15px;font-weight:500;color:var(--text-2)}
.links a{text-decoration:none;transition:color .3s var(--calm)}
.links a:hover,.links a[aria-current=page]{color:var(--ink)}
.menu-btn{display:none;width:44px;height:44px;border-radius:999px;border:1px solid var(--text-3);background:var(--card);cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.menu-btn span{display:block;width:16px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease)}
.menu-btn[aria-expanded=true] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.menu{position:fixed;inset:var(--nav) 0 0 0;background:var(--page);padding:28px var(--gut);display:flex;flex-direction:column;gap:18px;z-index:49}
.menu a:not(.btn){font-weight:600;font-stretch:84%;font-size:40px;letter-spacing:-.04em;text-decoration:none}
.menu .btn{margin-top:auto}
.menu-note{font-size:13px;color:var(--text-3);text-align:center}
.read{display:none}

/* source notes */
.src{position:relative;display:inline-block;vertical-align:super;line-height:0;margin-left:2px}
.src-n{font-family:var(--mono);font-size:10px;line-height:1;min-width:18px;height:18px;padding:0 5px;border-radius:999px;border:0;background:var(--line);color:var(--text-2);cursor:pointer}
.src-n:hover{background:var(--hold-tint);color:var(--hold-text)}
.src-q{position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%);width:min(320px,80vw);padding:14px 16px;border-radius:14px;background:var(--ink);color:var(--card);font:500 13.5px/1.5 var(--sans);text-align:left;box-shadow:var(--shadow);display:none;z-index:20;white-space:normal}
.src-q q{font-weight:650}.src-q cite{display:block;margin-top:6px;font-style:normal;font-size:12px;opacity:.75}
.src-q a{display:inline-block;margin-top:8px;font-weight:650;color:var(--hold)}
.src.open .src-q,.src:has(:focus-visible) .src-q{display:block}

/* reveal */
html.js [data-r]{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
html.js [data-r].in{opacity:1;transform:none}

/* rooms */
.room{position:relative;padding-block:clamp(110px,15vh,190px)}
.room-head{max-width:46em}
.room-head .lead{margin-top:22px}

/* 1. hero */
.hero{position:relative;min-height:max(760px,100svh);overflow:hidden;display:flex;align-items:center;padding:calc(var(--nav) + 20px) 0 56px}
.hero-art{position:absolute;inset:0;margin:0}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:62% 50%}
.hero-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,246,244,.96) 0%,rgba(246,246,244,.82) 30%,rgba(246,246,244,0) 58%)}
.hero .wrap{position:relative;z-index:2}
.hero-copy{max-width:720px;display:flex;flex-direction:column;gap:26px}
.hero-copy .eyebrow{margin:0}
.ctas{display:flex;flex-wrap:wrap;gap:12px}
.hero-chip{position:absolute;z-index:3;right:8%;top:24%;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow);font-family:var(--mono);font-size:13px}
.scrollcue{position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--mono);font-size:12px;color:var(--text-3)}

/* 2. the gap */
.gap{padding-block:clamp(80px,11vh,140px)}
.gap-line{font-weight:600;font-stretch:86%;font-size:clamp(30px,3.4vw,54px);line-height:1.04;letter-spacing:-.04em;max-width:20em;text-wrap:balance}
.gap-line em{font-style:normal;color:var(--hold-text)}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:56px;background:var(--line);border-radius:22px;overflow:hidden;border:1px solid var(--line)}
.fact{background:var(--card);padding:30px 30px 34px}
.fact .num{font-weight:600;font-stretch:80%;font-size:clamp(56px,5.6vw,92px);line-height:.9;letter-spacing:-.05em}
.fact .unit{font-family:var(--mono);font-size:12.5px;color:var(--hold-text);margin:12px 0 14px}
.fact p{font-size:15.5px;line-height:1.6;color:var(--text-2)}

/* 3. try the gate */
.try{background:var(--card);border-block:1px solid var(--line)}
.try-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,90px);align-items:start;margin-top:56px}
.ask{display:flex;flex-direction:column;gap:14px}
.ask label{font-weight:600;font-size:14px}
.ask-row{display:flex;gap:10px}
.ask input{flex:1;min-width:0;height:58px;padding:0 18px;border-radius:16px;border:1px solid var(--text-3);background:var(--page);font-size:17px;transition:border-color .2s,box-shadow .2s,background-color .2s}
.ask input:focus{outline:none;border-color:var(--ink);background:var(--card);box-shadow:0 0 0 5px rgba(23,24,28,.07)}
.ask .btn{height:58px}
.tries{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.tries button{height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--text-3);background:var(--card);font-size:13.5px;cursor:pointer;transition:border-color .2s}
.tries button:hover{border-color:var(--ink)}
.verdict-card{position:relative;border-radius:26px;background:var(--page);border:1px solid var(--line);padding:28px;min-height:420px;display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:24px;align-content:start}
.v-state{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.v-word{font-weight:600;font-stretch:82%;font-size:clamp(40px,3.8vw,60px);letter-spacing:-.045em;line-height:.95;margin-top:16px}
.v-word.held{color:var(--hold-text)}.v-word.runs{color:var(--ok)}.v-word.blocked{color:var(--ink)}
.v-why{margin-top:12px;color:var(--text-2);font-size:16px;max-width:30em}
.v-rows{grid-column:1/-1;margin:6px 0 0;border-top:1px solid var(--line);padding-top:16px;font-family:var(--mono);font-size:12.5px;line-height:2}
.v-rows div{display:flex;justify-content:space-between;gap:18px}
.v-rows dt{color:var(--text-3)}.v-rows dd{margin:0;text-align:right;overflow-wrap:anywhere}
.v-code{width:150px;height:150px}
.v-code svg{width:100%;height:100%}
.v-note{grid-column:1/-1;font-size:13px;color:var(--text-3)}

/* object rooms */
.obj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:center}
.obj.flip .obj-art{order:-1}
.obj-art{margin:0;position:relative;aspect-ratio:1;border-radius:32px;background:radial-gradient(70% 60% at 50% 46%,var(--card) 0%,var(--page) 100%);overflow:hidden}
.obj-art img{position:absolute;inset:4%;width:92%;height:92%;object-fit:contain}
.obj-copy .lead{margin-top:22px}
.points{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.points li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15.5px;color:var(--text-2)}
.points b{font-weight:650;color:var(--ink)}
.plain{margin-top:28px;padding:18px 20px;border-radius:18px;background:var(--hold-tint);font-weight:600;font-size:16px;color:var(--ink)}
.forge{margin-top:30px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:end}
.forge .field{display:flex;flex-direction:column;gap:7px}
.forge label{font-weight:600;font-size:13px;color:var(--text-2)}
.forge select{height:50px;padding:0 36px 0 14px;border-radius:14px;border:1px solid var(--text-3);background:var(--card);appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 20px) 22px,calc(100% - 15px) 22px;background-size:5px 5px;background-repeat:no-repeat;font-size:15px}
.forge .btn{grid-column:1/-1;justify-self:start;height:44px}
.verdict{margin-top:16px;font-weight:600;font-size:15px;padding:14px 16px;border-radius:14px;background:var(--page)}
.verdict.ok{background:var(--ok-tint);color:var(--ok)}.verdict.bad{background:var(--hold-tint);color:var(--hold-text)}
.forge-code{position:absolute;right:7%;bottom:7%;width:132px;height:132px;padding:10px;border-radius:24px;background:rgba(255,255,255,.86);box-shadow:var(--shadow)}
.forge-code svg{width:100%;height:100%}

/* who, status, founder, faq, join */
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:56px}
.card{border-radius:24px;padding:30px;background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;gap:14px}
.card p{font-size:15.5px;color:var(--text-2)}
.codes{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.codes code{font-family:var(--mono);font-size:12.5px;padding:7px 10px;border-radius:9px;background:var(--page);border:1px solid var(--line)}
.status{list-style:none;margin:48px 0 0;padding:0;border-top:1px solid var(--line)}
.status li{display:grid;grid-template-columns:200px minmax(0,1fr) auto;gap:24px;align-items:center;padding:20px 0;border-bottom:1px solid var(--line)}
.status b{font-weight:600;font-stretch:88%;font-size:22px;letter-spacing:-.03em}
.status span{color:var(--text-2);font-size:15.5px}
.founder{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,6vw,110px);align-items:center}
.portrait{margin:0;aspect-ratio:4/5;border-radius:30px;background:radial-gradient(80% 70% at 50% 40%,var(--card),var(--page));display:grid;place-items:center}
.portrait span{font-weight:600;font-stretch:80%;font-size:clamp(80px,9vw,150px);letter-spacing:-.06em;color:var(--ink)}
.portrait figcaption{grid-row:2;font-size:13px;color:var(--text-3)}
.role{margin-top:12px;font-family:var(--mono);font-size:13px;color:var(--hold-text)}
.shipped{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line)}
.shipped li{display:grid;grid-template-columns:210px minmax(0,1fr);gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--text-2)}
.shipped a{font-weight:650;font-size:18px;color:var(--ink);text-decoration-color:var(--hold);text-decoration-thickness:2px;text-underline-offset:5px}
.faq{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,96px)}
.qa details{border-bottom:1px solid var(--line)}.qa details:first-child{border-top:1px solid var(--line)}
.qa summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-weight:600;font-stretch:90%;font-size:clamp(19px,1.6vw,23px);letter-spacing:-.02em}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";display:grid;place-items:center;flex:none;width:32px;height:32px;border-radius:50%;border:1px solid var(--text-3);font-size:18px;transition:transform .3s var(--ease)}
.qa details[open] summary::after{transform:rotate(45deg)}
.qa details p{padding:0 0 24px;color:var(--text-2);max-width:38em}
.join{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,96px);align-items:start}
.join-card{background:var(--card);border:1px solid var(--line);border-radius:30px;padding:clamp(24px,3vw,40px);box-shadow:var(--shadow)}
.join-form{display:flex;flex-direction:column;gap:18px}
.form-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:14px;border-bottom:1px solid var(--line);font-weight:600}
.form-head .mono{display:none}
.join-form .field{display:flex;flex-direction:column;gap:8px}
.join-form label{font-weight:600;font-size:14px}
.join-form input[type=email],.join-form input[type=text],.join-form select,.join-form textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:14px;border:1px solid var(--text-3);background:var(--page);font-size:16px}
.join-form select{appearance:none}
.opt{font-weight:400;color:var(--text-3)}
.hint{font-size:13px;color:var(--text-3)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:14px;line-height:1.5;color:var(--text-2)}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--ink)}
.join-form .btn{align-self:flex-start;background:var(--ink);color:var(--card)}
.msg{font-size:14px;font-weight:600;min-height:1.2em}.msg.bad{color:var(--hold-text)}
.done{display:flex;flex-direction:column;gap:14px}
.seal{width:120px;aspect-ratio:1}.seal svg{width:100%;height:100%}

/* footer */
.foot{background:var(--ink);color:var(--card);padding:80px 0 40px}
.foot-top{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px}
.foot-brand p{margin-top:16px;color:var(--page);max-width:24em;font-size:15px}
.foot-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.foot-cols div{display:flex;flex-direction:column;gap:10px}
.foot-cols h2{font-family:var(--mono);font-size:12px;font-weight:400;color:var(--page);margin-bottom:4px}
.foot-cols a{text-decoration:none;font-size:15px;font-weight:500;width:fit-content}
.foot-cols a:hover{color:var(--hold)}
.foot-base{display:flex;justify-content:space-between;gap:24px;margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:var(--page)}

@media (max-width:1100px){
  .try-grid,.obj,.founder,.faq,.join,.foot-top{grid-template-columns:1fr}
  .obj.flip .obj-art{order:0}
  .cards{grid-template-columns:1fr}
}
@media (max-width:760px){
  :root{--nav:64px}
  .links,.nav-cta{display:none}.menu-btn{display:inline-flex}
  .hero{align-items:flex-start;padding-top:calc(var(--nav) + 32px);min-height:auto}
  .hero-art{position:relative;inset:auto;order:2;margin-top:28px;aspect-ratio:4/3}
  .hero{flex-direction:column}
  .hero-veil{display:none}
  .hero-chip{right:4%;top:auto;bottom:18%;font-size:11.5px}
  .facts{grid-template-columns:1fr}
  .verdict-card{grid-template-columns:1fr}.v-code{width:120px;height:120px}
  .ask-row{flex-direction:column}.ask input{flex:none}
  .forge{grid-template-columns:1fr}
  .points li,.shipped li{grid-template-columns:1fr;gap:4px}
  .status li{grid-template-columns:1fr auto}.status li span:not(.tag){grid-column:1/-1;order:3}
  .foot-cols{grid-template-columns:1fr 1fr}.foot-base{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  html.js [data-r]{opacity:1;transform:none}
}

/* the opening film */
.film{position:relative}
html.js .film{height:640vh}
.film-stage{position:relative;height:100vh;min-height:680px;overflow:hidden}
html.js .film-stage{position:sticky;top:0}
.film-canvas,.film-poster{position:absolute;inset:0;width:100%;height:100%}
.film-poster{object-fit:cover;object-position:62% 50%;transition:opacity .4s var(--calm)}
.film-poster.gone{opacity:0}
.film-canvas{display:none}.film.has-film .film-canvas{display:block}
.film-veil{position:absolute;inset:0;background:linear-gradient(90deg,rgba(246,246,244,.96) 0%,rgba(246,246,244,.8) 30%,rgba(246,246,244,0) 56%)}
.film-ui{position:relative;z-index:2;height:100%}
.film-intro{position:absolute;left:0;top:50%;transform:translateY(-50%);max-width:700px;display:flex;flex-direction:column;gap:24px;transition:opacity .5s var(--calm),transform .7s var(--ease)}
.film-intro .eyebrow{margin:0}
.film-intro.off{opacity:0;transform:translateY(-58%);pointer-events:none}
.beats{list-style:none;margin:0;padding:0;position:absolute;left:0;top:50%;width:min(640px,100%)}
.beats li{position:absolute;left:0;top:0;width:100%;transform:translateY(calc(-50% + 22px));opacity:0;transition:opacity .45s var(--calm),transform .7s var(--ease);pointer-events:none}
.beats li.on{opacity:1;transform:translateY(-50%);pointer-events:auto}
.beat-k{color:var(--hold-text);margin-bottom:14px}
.beat-h{font-size:clamp(40px,4.8vw,80px)}
.beat-p{margin-top:18px;font-size:clamp(16px,1.35vw,20px);line-height:1.5;color:var(--text-2);max-width:28em}
.switch{position:absolute;right:0;bottom:44px;display:flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:var(--shadow);transition:opacity .4s var(--calm)}
.switch button{height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;font-weight:600;font-size:14px;color:var(--text-2);cursor:pointer;transition:background-color .25s,color .25s}
.switch button[aria-pressed=true]{background:var(--ink);color:var(--card)}
.film:not([data-beat=held]):not([data-beat=signed]):not([data-beat=covered]) .switch{opacity:0;pointer-events:none}
.film-note{position:absolute;left:0;bottom:52px}
html:not(.js) .beats,.reduce .beats{position:static;margin-top:48px}
html:not(.js) .beats li{position:static;opacity:1;transform:none;margin-bottom:28px}
.obj-art-wide{aspect-ratio:16/10}
.obj-art-wide img{inset:0;width:100%;height:100%;object-fit:cover}
.try .obj{margin-bottom:8px}
.forge-rows{margin-top:16px;grid-column:auto}
@media (max-width:760px){
  html.js .film{height:560vh}
  .film-veil{background:linear-gradient(180deg,rgba(246,246,244,.96) 0%,rgba(246,246,244,.85) 46%,rgba(246,246,244,0) 70%)}
  .film-poster{object-position:70% 80%}
  .film-intro,.beats{top:calc(var(--nav) + 24px);transform:none}.film-intro.off{transform:translateY(-12px)}
  .beats li{transform:translateY(22px)}.beats li.on{transform:none}
  .switch{left:0;right:auto;bottom:24px}.film-note{display:none}
}
@media (prefers-reduced-motion:reduce){
  html.js .film{height:auto}
  html.js .film-stage{position:relative;height:auto;min-height:100vh;padding-bottom:64px}
  .film-intro{position:relative;top:auto;transform:none;padding-top:calc(var(--nav) + 64px)}
  .film-intro.off{opacity:1;transform:none;pointer-events:auto}
  .beats{position:relative;top:auto;margin-top:56px}
  .beats li{position:static;opacity:1;transform:none;margin-bottom:28px}
  .switch{display:none}
}

/* the original Durward logo (brand/logo.svg): the doorway D and the wordmark */
.brand .logo{height:24px;width:auto;flex:none}
.logo .logo-mark{fill:currentColor}
.foot .brand .logo{height:26px}

.foot :focus-visible{outline-color:var(--card)}

/* v4.1: centred, layered film. The title sits inside the scene, behind the gate layer. */
.film-poster{object-position:50% 55%}
.film-veil{background:linear-gradient(180deg,rgba(246,246,244,.94) 0%,rgba(246,246,244,.55) 26%,rgba(246,246,244,0) 44%,rgba(246,246,244,0) 66%,rgba(246,246,244,.9) 100%)}
.film-ui{position:absolute;inset:0}
.mega{position:absolute;z-index:2;left:0;right:0;top:calc(var(--nav) + 2vh);margin:0;text-align:center;font-weight:650;font-stretch:75%;font-size:clamp(58px,12.2vw,236px);line-height:.8;letter-spacing:-.05em;text-transform:uppercase;color:var(--ink);transition:opacity .6s var(--calm),transform .8s var(--ease)}
.mega span{display:block}
.mega.off{opacity:0;transform:translateY(-4vh)}
.film-gate{position:absolute;z-index:3;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;pointer-events:none}
.film-intro{position:absolute;z-index:4;left:50%;top:auto;bottom:64px;transform:translateX(-50%);width:min(760px,92%);max-width:none;text-align:center;align-items:center;gap:20px}
.film-intro .lead{max-width:36em;margin-inline:auto}
.film-intro .ctas{justify-content:center}
.film-intro .fine{display:inline-flex;align-items:center;gap:8px}
.film-intro.off{transform:translate(-50%,16px)}
.beats{z-index:4;left:50%;top:auto;bottom:150px;transform:translateX(-50%);width:min(980px,92%);text-align:center}
.beats li{top:auto;bottom:0;transform:translateY(24px)}
.beats li.on{transform:none}
.beat-k{margin-inline:auto}
.beat-p{margin-inline:auto}
.switch{z-index:4;left:50%;right:auto;bottom:52px;transform:translateX(-50%)}
.film-note{z-index:4;left:var(--gut);bottom:28px}
@media (max-width:760px){
  .mega{top:calc(var(--nav) + 20px);font-size:clamp(48px,16vw,84px)}
  .film-intro{bottom:28px}
  .film-intro .lead{font-size:15px}
  .beats{bottom:110px}.beats li{transform:translateY(16px)}
  .switch{bottom:28px;left:50%}
}
@media (prefers-reduced-motion:reduce){
  .mega{position:relative;top:auto;padding-top:calc(var(--nav) + 40px)}
  .film-intro{position:relative;left:auto;bottom:auto;transform:none;margin:40px auto 0}
  .beats{position:relative;left:auto;bottom:auto;transform:none;margin:48px auto 0}
}
.film-gate.gone{opacity:0;transition:opacity .4s}

/* palette rule: vermilion only where something is held */
.display em,.gap-line em{color:inherit}
.display em.hold,.beat-h em.hold{color:var(--hold-text)}

/* v4.2: the hero film plays behind a centred title */
.hero2{position:relative;height:100svh;min-height:720px;overflow:hidden;background:var(--page)}
.hero2-stage{position:absolute;inset:0}
.hero2-poster,.hero2-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 62%}
.hero2-video{opacity:0;transition:opacity .9s var(--calm)}
.hero2.playing .hero2-video{opacity:1}
.hero2-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(246,246,244,.93) 0%,rgba(246,246,244,.45) 27%,rgba(246,246,244,0) 44%,rgba(246,246,244,0) 60%,rgba(246,246,244,.94) 100%)}
.hero2-ui{position:absolute;inset:0;z-index:2}
.hero2 .mega{transition:none}
html.js .mega .ln{display:block;overflow:hidden;padding-bottom:.04em}
html.js .mega .ln>span{display:block;transform:translateY(104%);transition:transform 1.2s var(--ease)}
html.js .mega .ln+.ln>span{transition-delay:.12s}
html.js .mega.in .ln>span{transform:none}
.caption{position:absolute;left:50%;bottom:clamp(220px,30vh,290px);transform:translateX(-50%);margin:0;padding:10px 18px;border-radius:999px;background:rgba(255,255,255,.76);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-weight:600;font-stretch:86%;font-size:clamp(17px,1.7vw,26px);letter-spacing:-.02em;color:var(--ink);white-space:nowrap;transition:opacity .25s var(--calm),transform .4s var(--ease)}
.caption:empty{display:none}
.caption.swap{opacity:0}
.hero2-foot{position:absolute;left:50%;bottom:44px;transform:translateX(-50%);width:min(780px,92%);text-align:center;display:flex;flex-direction:column;align-items:center;gap:18px}
.hero2-foot .lead{max-width:36em}
.hero2-foot .ctas{justify-content:center}
.hero2-foot .fine{display:inline-flex;align-items:center;gap:8px}
.pause{position:absolute;right:var(--gut);bottom:28px;z-index:3;height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--text-3);background:var(--card);font-size:13px;font-weight:600;cursor:pointer}
.hero2 .film-note{position:absolute;left:var(--gut);bottom:28px;z-index:3}
.foot-logo{margin-top:72px;color:var(--card)}
.foot-logo .logo{width:100%;height:auto}
@media (max-width:760px){
  .hero2-foot{bottom:24px}.hero2-foot .lead{font-size:15px}
  .caption{bottom:auto;top:calc(var(--nav) + 46vw);white-space:normal;text-align:center;max-width:88%}
  .hero2 .film-note{display:none}.pause{bottom:auto;top:calc(var(--nav) + 12px)}
}
@media (prefers-reduced-motion:reduce){
  html.js .mega .ln>span{transform:none}
}

/* inner pages: one template, a big centred title over its object */
.phero{position:relative;padding:calc(var(--nav) + clamp(56px,10vh,120px)) 0 0;text-align:center;overflow:hidden}
.phero .eyebrow{justify-content:center}
.phero h1{font-weight:650;font-stretch:76%;font-size:clamp(54px,9.4vw,168px);line-height:.84;letter-spacing:-.05em;text-transform:uppercase;max-width:14em;margin-inline:auto}
.phero .lead{margin:28px auto 0;max-width:36em}
.phero .chips{display:flex;justify-content:center;gap:8px;margin-top:22px;flex-wrap:wrap}
.phero-art{position:relative;margin:clamp(32px,6vh,64px) auto 0;width:min(1100px,100%);aspect-ratio:16/8;overflow:hidden}
.phero-art img{width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.phero-art::after{content:"";position:absolute;inset:auto 0 0 0;height:30%;background:linear-gradient(180deg,rgba(246,246,244,0),var(--page))}
.plain-top{margin:30px auto 0;max-width:40em;padding:16px 20px;border-radius:16px;background:var(--hold-tint);font-weight:600;color:var(--ink)}
.sec{padding-block:clamp(90px,13vh,170px)}
.sec-head{max-width:46em;margin-bottom:56px}
.sec-head.c{margin-inline:auto;text-align:center}
.sec-head .lead{margin-top:20px}
.sec-head.c .lead{margin-inline:auto}
.band{background:var(--card);border-block:1px solid var(--line)}

/* where it sits: a diagram built from real elements */
.flow{display:grid;grid-template-columns:1fr auto 1.4fr auto 1fr;gap:18px;align-items:center}
.node{border-radius:22px;background:var(--card);border:1px solid var(--line);padding:24px;box-shadow:var(--shadow)}
.node h3{font-weight:650;font-stretch:88%;font-size:21px;letter-spacing:-.02em}
.node p{margin-top:8px;font-size:14.5px;color:var(--text-2)}
.node-gate{border:2px solid var(--ink);position:relative}
.node-gate::after{content:"";position:absolute;left:24px;right:24px;bottom:-2px;height:3px;border-radius:3px;background:var(--hold);box-shadow:0 0 14px rgba(240,74,26,.6)}
.node-gate ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.node-gate li{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:10px 12px;border-radius:12px;background:var(--page)}
.node-gate li b{font-weight:650}
.arrow{width:56px;height:2px;background:var(--ink);position:relative}
.arrow::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left:8px solid var(--ink)}
.under{margin-top:18px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.under .node{box-shadow:none}

/* the action classes */
.classes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cls{border-radius:20px;background:var(--card);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:10px;min-height:190px}
.cls code{font-family:var(--mono);font-size:13px;color:var(--ink)}
.cls p{font-size:14.5px;color:var(--text-2)}
.cls .ex{margin-top:auto;font-family:var(--mono);font-size:12px;color:var(--text-3)}

/* a rule you can read */
.rule-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center}
.rule{border-radius:22px;background:var(--ink);color:var(--card);padding:28px;font-family:var(--mono);font-size:14px;line-height:2}
.rule .k{color:var(--page);opacity:.7}
.rule .h{color:var(--hold)}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line)}
.ticks li{padding:18px 0;border-bottom:1px solid var(--line)}
.ticks b{display:block;font-weight:650;font-size:17px}
.ticks li>span{display:block;margin-top:4px;color:var(--text-2);font-size:15.5px}

/* the annotated receipt */
.anat{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:start}
.anat-doc{position:sticky;top:calc(var(--nav) + 24px);border-radius:24px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);padding:28px;font-family:var(--mono);font-size:13px;line-height:2}
.anat-doc .grp{padding:10px 0;border-bottom:1px dashed var(--line)}
.anat-doc .grp:last-child{border-bottom:0}
.anat-doc .gk{display:block;color:var(--hold-text);font-size:12px}
.anat-doc .row{display:flex;justify-content:space-between;gap:18px}
.anat-doc .row span:first-child{color:var(--text-3)}
.anat-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.anat-list li{border-radius:18px;background:var(--card);border:1px solid var(--line);padding:20px}
.anat-list b{font-weight:650}
.anat-list p{margin-top:6px;font-size:15px;color:var(--text-2)}
.verify{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.verify textarea{width:100%;min-height:340px;padding:18px;border-radius:18px;border:1px solid var(--text-3);background:var(--card);font-family:var(--mono);font-size:12.5px;line-height:1.7;resize:vertical}
.verify-out{border-radius:18px;background:var(--card);border:1px solid var(--line);padding:22px;display:flex;flex-direction:column;gap:14px}
.verify-out .v-word{margin-top:0}
.std{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.std .node{box-shadow:none}

/* steps and the closing band */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:s}
.steps li{counter-increment:s;border-radius:20px;background:var(--card);border:1px solid var(--line);padding:22px}
.steps li::before{content:counter(s,decimal-leading-zero);display:block;font-family:var(--mono);font-size:12.5px;color:var(--hold-text);margin-bottom:10px}
.steps b{font-weight:650}
.steps p{margin-top:6px;font-size:14.5px;color:var(--text-2)}
.cta{text-align:center;padding-block:clamp(90px,13vh,160px)}
.cta h2{font-weight:650;font-stretch:78%;font-size:clamp(44px,6.4vw,112px);line-height:.88;letter-spacing:-.05em;text-transform:uppercase;max-width:13em;margin-inline:auto}
.cta .ctas{justify-content:center;margin-top:32px}
@media (max-width:1100px){
  .flow{grid-template-columns:1fr}.arrow{width:2px;height:36px;justify-self:center}.arrow::after{right:-4px;top:auto;bottom:-1px;border:5px solid transparent;border-top:8px solid var(--ink)}
  .under,.std{grid-template-columns:1fr}.classes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rule-grid,.anat,.verify{grid-template-columns:1fr}.anat-doc{position:relative;top:0}.steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:600px){.classes,.steps{grid-template-columns:1fr}.phero-art{aspect-ratio:4/3}}
.tag-hold{background:var(--hold-tint);color:var(--hold-text)}
.hold-text{color:var(--hold-text)}
.ok-text{color:var(--ok)}
.under.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.under .mono{display:block;margin-bottom:8px}
.tiers-note{margin-top:18px}
@media (max-width:1100px){.under.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.under.four{grid-template-columns:1fr}}
.v-word.ok{color:var(--ok)}.v-word.bad{color:var(--hold-text)}
.vf-label{display:block;font-weight:650;margin-bottom:10px}
.vf-ctas{margin-top:14px}
.verify-out .v-code{width:132px;height:132px}
.verify .fine{margin-top:8px}

/* inner page variants */
.phero-text{padding-bottom:clamp(40px,8vh,90px)}
.phero-ctas{justify-content:center;margin-top:30px}
.founder-text{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.founder-text .shipped{margin-top:0}
.steps-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.classes-4 .cls{min-height:150px}
.deal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px}
.deal .node{padding:30px;box-shadow:none}
.deal .ticks{margin-top:16px}
.nav .links a[aria-current="page"]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}
.menu a[aria-current="page"]{color:var(--hold-text)}

/* privacy */
.legal-page{padding:calc(var(--nav) + clamp(48px,8vh,96px)) 0 clamp(90px,12vh,150px)}
.legal{max-width:760px}
.legal h1{font-weight:650;font-stretch:80%;font-size:clamp(40px,5.6vw,80px);line-height:.92;letter-spacing:-.045em;margin:18px 0 22px;text-wrap:balance}
.legal h2{font-weight:650;font-stretch:88%;font-size:24px;letter-spacing:-.02em;margin:44px 0 12px}
.legal p,.legal li{font-size:17px;line-height:1.65;color:var(--text-2)}
.legal ul{padding-left:20px;display:grid;gap:8px}
.legal .fine{display:block;font-size:14.5px}
.legal a{color:var(--ink);text-decoration-color:var(--hold);text-underline-offset:4px}
.legal code{font-family:var(--mono);font-size:.88em;background:var(--card);border:1px solid var(--line);border-radius:6px;padding:1px 6px}

/* 404 */
.lost{min-height:100svh;display:grid;place-items:center;text-align:center;padding:calc(var(--nav) + 40px) 0 80px}
.lost .eyebrow{justify-content:center;margin:26px 0 18px}
.lost h1{font-weight:650;font-stretch:76%;font-size:clamp(48px,8vw,128px);line-height:.86;letter-spacing:-.05em;text-transform:uppercase;max-width:12em;margin-inline:auto}
.lost .lead{margin:24px auto 0}
.lost .ctas{justify-content:center;margin-top:30px}
.lost-door{width:clamp(120px,14vw,180px);height:auto;fill:none;stroke:var(--ink);stroke-width:4}
.lost-door .lost-line{stroke:var(--hold);stroke-width:5;filter:drop-shadow(0 0 6px rgba(240,74,26,.7))}
@media (max-width:1100px){.founder-text,.deal{grid-template-columns:1fr}.steps-3{grid-template-columns:1fr}}
.phero h1.h1-long{font-size:clamp(44px,6.6vw,118px);max-width:15em}

.phero h1,.cta h2,.lost h1,.legal h1{text-wrap:balance}
.phero-art img{mix-blend-mode:multiply}
.rule-grid .h2{font-size:clamp(38px,4vw,68px)}
.rule-grid .lead{margin-top:24px}
.rule-grid .ticks{margin-top:34px}
.lead+.lead{margin-top:18px}
.phero-art .pos-top{object-position:50% 34%}
.phero-art.tall{aspect-ratio:16/9.5}
.lost-door{display:block;margin:0 auto}
.display.h2+.lead{margin-top:24px}
.tbc{background:var(--hold-tint);color:var(--hold-text);padding:0 6px;border-radius:6px;font-weight:600}
.lead{text-wrap:wrap}
.src-n{min-width:24px;height:24px;border:3px solid transparent;background-clip:padding-box;padding:0 4px}
.phero-art img{mix-blend-mode:normal;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 90%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent),linear-gradient(180deg,transparent,#000 12%,#000 90%,transparent);mask-composite:intersect}
.phero-art::after{display:none}
.phero [data-r],.hero2 [data-r]{opacity:1}
.src-q.below{bottom:auto;top:calc(100% + 10px)}


/* v5 "Porcelain holds, glass moves" (30 Oct 2026). Two materials from our own renders: glazed porcelain for the gate,
   its decisions and its records; thick glass tiles for actions, like the tile the gate holds. The arch and the sill of
   the mark shape the doors. Vermilion still lights only where something is held. */
:root{
  --porcelain:linear-gradient(118deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,0) 42%),linear-gradient(180deg,var(--card) 0%,var(--page) 100%);
  --glaze:inset 0 1px 0 #fff,inset 0 -2px 0 rgba(15,23,34,.035),0 0 0 1px rgba(15,23,34,.075),0 1px 2px rgba(15,23,34,.06),0 22px 38px -24px rgba(15,23,34,.24);
  --tile:linear-gradient(180deg,rgba(255,255,255,.82) 0%,rgba(255,255,255,.38) 100%);
  --tile-edge:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(15,23,34,.06),0 0 0 1px rgba(15,23,34,.11),0 3px 0 -1px rgba(15,23,34,.09),0 9px 16px -9px rgba(15,23,34,.28);
  --sill:linear-gradient(90deg,rgba(15,23,34,0),rgba(15,23,34,.34) 18%,rgba(15,23,34,.34) 82%,rgba(15,23,34,0))
}

/* porcelain: glazed, with a lit top edge and a foot shadow where it meets the floor */
.card,.fact,.cls,.steps li,.anat-list li,.node:not(.node-gate),.verdict-card,.join-card,.verify-out,.anat-doc,.status li{
  border:0;background:var(--porcelain);box-shadow:var(--glaze)}
.node-gate{background:var(--porcelain);box-shadow:inset 0 1px 0 #fff,0 0 0 2px var(--ink),0 30px 60px -36px rgba(15,23,34,.4)}
.facts{background:none;border:0;gap:14px;overflow:visible}
.fact{border-radius:24px}

/* glass: every action is a thick glass tile with a visible edge, pressed like a key */
.tries button,.codes code,.cls code{border:0;background:var(--tile);box-shadow:var(--tile-edge);-webkit-backdrop-filter:blur(10px) saturate(1.4);backdrop-filter:blur(10px) saturate(1.4)}
.codes code,.cls code{border-radius:9px}
.cls code{align-self:flex-start;padding:5px 10px}
.tries button{border-radius:12px;transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.tries button:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(15,23,34,.06),0 0 0 1px rgba(15,23,34,.2),0 5px 0 -1px rgba(15,23,34,.1),0 14px 22px -10px rgba(15,23,34,.32)}
.tries button:active{transform:translateY(2px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(15,23,34,.2),0 1px 0 -1px rgba(15,23,34,.1),0 4px 8px -6px rgba(15,23,34,.3)}

/* the gate's verdict stands on a sill; the sill becomes the hold line only when the action is held */
.verdict-card{overflow:visible}
.verdict-card::after{content:"";position:absolute;left:28px;right:28px;bottom:-1px;height:2px;border-radius:2px;background:var(--sill);transition:background-color .5s var(--calm),box-shadow .6s var(--calm)}
.verdict-card:has(.v-word.held)::after{background:var(--hold);box-shadow:0 0 10px 1px rgba(240,74,26,.55),0 0 46px 8px rgba(240,74,26,.22)}
.verdict-card:has(.v-word.runs)::after{background:var(--ok)}
.verdict-card:has(.v-word.blocked)::after{background:var(--ink);height:3px}

/* doors: what is being built stands open with light inside; what is planned is still a closed door */
.status{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;border:0}
.status li{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:150px 24px 24px;border-radius:24px}
.status li b{font-size:19px;letter-spacing:-.02em}
.status li .tag{margin-top:auto}
.status li::before{content:"";position:absolute;left:32px;top:30px;width:60px;height:80px;border-radius:999px 999px 0 0;
  background:linear-gradient(90deg,rgba(15,23,34,0) calc(50% - .5px),rgba(15,23,34,.22) 50%,rgba(15,23,34,0) calc(50% + .5px)),linear-gradient(180deg,rgba(15,23,34,.06),rgba(15,23,34,.13)),var(--card);
  box-shadow:0 0 0 7px var(--card),0 0 0 8px rgba(15,23,34,.16),-6px 10px 18px -6px rgba(15,23,34,.22),inset 0 2px 3px rgba(15,23,34,.14)}
.status li::after{content:"";position:absolute;left:12px;top:117px;width:100px;height:1px;background:var(--sill)}
.status li[data-door=open]{background:radial-gradient(80px 26px at 62px 118px,#fff 0%,rgba(255,255,255,0) 100%),var(--porcelain)}
.status li[data-door=open]::before{background:radial-gradient(95% 75% at 50% 100%,#fff 0%,rgba(255,255,255,.8) 40%,rgba(15,23,34,.1) 100%)}
.status li[data-door=open] b::before{content:"";position:absolute;left:51px;top:94px;width:22px;height:14px;border-radius:3px;background:var(--tile);box-shadow:var(--tile-edge)}

/* headings rise through the threshold: the text climbs from behind a sill at its own foot */
html.js h2.display[data-r]{opacity:1;transform:translateY(120%);clip-path:inset(-20% -6% 100% -6%);transition:transform 1.1s var(--ease),clip-path 1.1s var(--ease)}
html.js h2.display[data-r].in{transform:none;clip-path:inset(-20% -6% -20% -6%)}

/* the last call stands in an open arch, lit from inside */
.cta .wrap{position:relative;width:min(720px,100% - 2*var(--gut));padding:clamp(150px,20vw,290px) clamp(24px,4vw,56px) clamp(64px,7vw,104px);border-radius:999px 999px 0 0;
  background:radial-gradient(70% 62% at 50% 100%,var(--card) 0%,rgba(255,255,255,0) 72%),linear-gradient(180deg,rgba(15,23,34,.05),rgba(15,23,34,.012) 78%);
  box-shadow:inset 0 0 0 1px rgba(15,23,34,.12),inset 0 0 0 14px var(--card),inset 0 0 0 15px rgba(15,23,34,.08)}
.cta .wrap::after{content:"";position:absolute;left:-14%;right:-14%;bottom:0;height:1px;background:var(--sill)}
.cta{overflow-x:clip}

@media (max-width:760px){
  .status li{padding-top:150px}.status li span:not(.tag){order:0}
  .cta .wrap{padding-top:clamp(190px,52vw,230px)}
  .cta .wrap{width:calc(100% - 2*var(--gut))}
}
@media (prefers-reduced-motion:reduce){
  html.js h2.display[data-r]{transform:none;clip-path:none}
  .tries button:hover,.tries button:active{transform:none}
}

/* door light (light.js): multiplied onto the page behind everything */
.doorlight{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;mix-blend-mode:multiply;opacity:0;transition:opacity 1.8s var(--calm)}
.doorlight.on{opacity:1}

/* the story (home): one action goes through the door. The stage stays put while four steps scroll past it; the step in
   the middle of the screen sets data-act on the stage (main.js), and the renders and the glass tile move to match. */
.room{padding-block:clamp(84px,11vh,140px)}
.story{position:relative;padding-block:clamp(24px,5vh,64px) 0}
.story-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,80px)}
.story-steps{grid-column:1;grid-row:1;list-style:none;margin:0;padding:0}
.step{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding-block:12vh}
.step .lead{margin-top:22px}
.step-tag{margin-top:22px}
.story .facts{grid-template-columns:1fr;margin-top:36px;gap:12px}
.story .fact{display:grid;grid-template-columns:minmax(92px,auto) minmax(0,1fr);column-gap:22px;align-items:start;padding:22px 24px}
.story .fact .num{grid-row:1/3;font-size:clamp(46px,4vw,68px)}
.story .fact .unit{margin:2px 0 6px}
.story .fact p:last-child{font-size:15px}
.story .plain{margin-top:18px}
.story .points{margin-top:18px}

.story-stage{grid-column:2;grid-row:1;position:sticky;top:var(--nav);height:calc(100vh - var(--nav));display:flex;align-items:center;justify-content:center;pointer-events:none}
.stage-box{position:relative;width:100%;aspect-ratio:16/10;max-height:100%}
.st{position:absolute;inset:0;margin:auto;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity 1s var(--calm),transform 1.4s var(--ease)}
.st-gate{-webkit-mask-image:radial-gradient(70% 74% at 60% 52%,#000 58%,transparent 100%);mask-image:radial-gradient(70% 74% at 60% 52%,#000 58%,transparent 100%)}
.st-receipt,.st-cover{height:88%;transform:translateY(7%) scale(.94)}
[data-act=action] .st-gate{opacity:.42;transform:scale(.9) translateX(9%)}
[data-act=gate] .st-gate{opacity:1;transform:none}
[data-act=receipt] .st-gate,[data-act=cover] .st-gate{opacity:0;transform:scale(1.08)}
[data-act=receipt] .st-receipt{opacity:1;transform:none}
[data-act=cover] .st-receipt{opacity:0;transform:translateY(-5%) scale(.86)}
[data-act=cover] .st-cover{opacity:1;transform:none}

/* the action itself: a glass tile that flies into the arch and becomes the tile the gate holds */
.st-tile{position:absolute;left:31%;top:47%;width:38%;transform:translate(-50%,-50%);border-radius:16px;
  background:var(--tile);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(15,23,34,.06),0 0 0 1px rgba(15,23,34,.12),0 7px 0 -2px rgba(15,23,34,.1),0 30px 50px -24px rgba(15,23,34,.4);
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  transition:left 1.3s var(--ease),top 1.3s var(--ease),transform 1.3s var(--ease),opacity .4s var(--calm)}
.st-in{display:flex;align-items:center;gap:12px;padding:20px 22px;font-family:var(--mono);font-size:clamp(12px,1.05vw,15px);color:var(--ink);white-space:nowrap;animation:drift 5s ease-in-out infinite}
.st-in i{flex:none;width:9px;height:9px;border-radius:50%;background:var(--text-3)}
@keyframes drift{50%{transform:translateY(-7px)}}
[data-act=gate] .st-tile{left:64.2%;top:61.6%;transform:translate(-50%,-50%) scale(.2);opacity:0;transition:left 1.3s var(--ease),top 1.3s var(--ease),transform 1.3s var(--ease),opacity .5s .95s var(--calm)}
[data-act=receipt] .st-tile,[data-act=cover] .st-tile{left:64.2%;top:61.6%;transform:translate(-50%,-50%) scale(.2);opacity:0}

/* one word under each moment, in the palette's own meanings */
.st-word{position:absolute;left:50%;bottom:2%;transform:translate(-50%,10px);margin:0;height:30px;display:inline-flex;align-items:center;padding:0 14px;border-radius:999px;font-weight:650;font-size:13px;white-space:nowrap;opacity:0;transition:opacity .5s var(--calm),transform .6s var(--ease)}
.st-held{left:64%;background:var(--hold-tint);color:var(--hold-text)}
.st-signed{background:var(--ok-tint);color:var(--ok)}
.st-planned{background:var(--card);color:var(--text-2);box-shadow:0 0 0 1px var(--line)}
[data-act=gate] .st-held{opacity:1;transform:translate(-50%,0);transition-delay:1.2s}
[data-act=receipt] .st-signed,[data-act=cover] .st-planned{opacity:1;transform:translate(-50%,0);transition-delay:.6s}

/* the demos follow the story as "try it": the verdict stands on its own sill */
.try .room-head{margin-bottom:8px}

@media (max-width:900px){
  .story-in{grid-template-columns:1fr}
  .story-stage{grid-column:1;grid-row:1;z-index:2;height:44svh;top:var(--nav);background:linear-gradient(180deg,var(--card) 82%,rgba(255,255,255,0))}
  .stage-box{max-height:92%}
  .story-steps{grid-row:2}
  .step{min-height:78svh;justify-content:flex-start;padding-block:6svh 10svh}
  .story .fact{grid-template-columns:1fr}.story .fact .num{grid-row:auto}
}
@media (prefers-reduced-motion:reduce){
  .st-in{animation:none}
}

/* story v2: the objects are the heroes. The stage takes most of the width and bleeds to the right edge; the gate is
   scaled about its own held tile, so the tile's landing point stays exact at any size. */
.story-in{grid-template-columns:minmax(0,4.1fr) minmax(0,7.9fr)}
.story-stage{margin-right:calc((100vw - 100%) / -2 + 0px)}
.story-in>.story-stage{margin-right:calc(-1 * max(var(--gut),(100vw - var(--wrap)) / 2))}
.stage-box{aspect-ratio:auto;height:min(82vh,64vw);max-height:none}
.st-gate{transform-origin:64.2% 61.6%}
[data-act=action] .st-gate{opacity:.38;transform:scale(1.05) translateX(6%)}
[data-act=gate] .st-gate{opacity:1;transform:scale(1.32)}
[data-act=receipt] .st-gate,[data-act=cover] .st-gate{opacity:0;transform:scale(1.5)}
.st-receipt,.st-cover{height:100%}
.st-tile{left:27%;top:52%;width:46%}
.st-in{padding:24px 26px;font-size:clamp(13px,1.15vw,17px)}
.step h2.display{font-size:clamp(36px,3.5vw,60px)}
.st-held{left:64.2%;bottom:auto;top:calc(61.6% + 25%)}
@media (max-width:900px){
  .story-in>.story-stage{margin-right:0}
  .stage-box{height:100%}
  [data-act=gate] .st-gate{transform:scale(1.25)}
  .st-held{top:auto;bottom:2%}
}
.st-gate{mix-blend-mode:multiply}
.story-steps{position:relative;z-index:1}
@media (max-width:900px){.story-steps{z-index:0}}
@media (max-width:900px){
  .story-in{grid-template-columns:minmax(0,1fr)}
  .stage-box{width:100%;height:100%}
  .st-tile{width:60%;left:34%}
}
@media (max-width:900px){
  .st-word,.st-held{top:6%;bottom:auto;left:50%}
}

/* v6: every page opens like a door. Moving between pages, the new page is revealed through our arch rising from the
   floor and widening until it fills the screen; the nav stays where it is. CSS only (cross-document view transitions);
   browsers without them just navigate. Off under reduced motion. */
@view-transition{navigation:auto}
.nav{view-transition-name:dw-nav}
::view-transition-group(root){animation-duration:.95s;animation-timing-function:cubic-bezier(.7,0,.2,1)}
::view-transition-old(root){animation:door-behind .95s cubic-bezier(.7,0,.2,1) both}
::view-transition-new(root){animation:door-open .95s cubic-bezier(.7,0,.2,1) both}
@keyframes door-open{
  0%{clip-path:inset(46% 44% 0 44% round 12vw 12vw 0 0)}
  45%{clip-path:inset(18% 30% 0 30% round 20vw 20vw 0 0)}
  100%{clip-path:inset(0 0 0 0 round 0 0 0 0)}}
@keyframes door-behind{to{opacity:.22;transform:scale(.97)}}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none}}

/* the stills stage: soft on all four sides, and multiplied so white drops into the page */
.story{overflow-x:clip}
.st-gate{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 92%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 30%,#000 90%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 92%,transparent 100%);mask-composite:intersect}
.st-receipt,.st-cover{mix-blend-mode:multiply}

/* the scrubbed shot replaces the stills once its first frame is ready */
.st-canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .8s var(--calm)}
.story-stage.scrub .st-canvas{opacity:1}
.story-stage.scrub .st,.story-stage.scrub .st-tile{opacity:0!important;transition:opacity .6s var(--calm)}
.st-label{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 28px));padding:8px 12px;border-radius:10px;font-family:var(--mono);font-size:13px;white-space:nowrap;color:var(--ink);
  background:var(--tile);box-shadow:var(--tile-edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;transition:opacity .4s var(--calm)}
.st-label.on{opacity:1}

/* page heroes play their chapter of the shot: pinned for one screen of scrolling */
html.js .pin{height:185vh}
html.js .pin .pin-in{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;overflow:hidden}
html.js .pin .phero-art{flex:1 1 auto;min-height:0;aspect-ratio:auto;width:min(1200px,100%);margin-bottom:2vh}
html.js .pin .phero-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pin-stage.scrub img{opacity:0;transition:opacity .6s var(--calm)}
@media (max-width:760px){html.js .pin{height:160vh}}
@media (prefers-reduced-motion:reduce){html.js .pin{height:auto}html.js .pin .pin-in{position:relative;height:auto}html.js .pin .phero-art{aspect-ratio:4/3;flex:none}}
html.js .pin{overflow:visible;overflow-x:clip;padding-top:0}
html.js .pin .pin-in{isolation:isolate;padding-top:calc(var(--nav) + clamp(40px,7vh,96px))}
html.js .pin .phero-art{position:absolute;left:0;right:0;top:40%;bottom:0;margin:0;width:100%;height:auto;z-index:-1}
html.js .pin .phero-art img{object-position:50% 100%}
@media (prefers-reduced-motion:reduce){html.js .pin .phero-art{position:relative;top:auto;z-index:auto}}

/* ====================================================================================================================
   v7 "Brand district" (30 Oct 2026). Only the company's colours, used boldly: ink #0F1722, cream #F5F2EA and gold
   #D9A441 from the logo files in brand/, white, vermilion #F04A1A and its deep #C2340C, and the signed green #1A7A50.
   Full-bleed stills from our own film open every page. Status carries meaning in colour: ink is being built, green
   is a draft that signs, gold is planned, vermilion is held. Sentence case, left aligned, no glowing dots.
   ==================================================================================================================== */
:root{
  --page:#F5F2EA;--card:#FFFFFF;--paper:#FFFFFF;--cream:#F5F2EA;--gold:#D9A441;--gold-tint:#F3E6CC;--ink-2:#1B2533;
  --line:rgba(15,23,34,.12);--text-2:#41444C;--text-3:#5B5F68;--r:16px
}
html{background:var(--page)}
body{background:var(--page)}

/* type: sentence case, wider, calmer */
.display{font-stretch:94%;letter-spacing:-.036em;line-height:1}
.h2{font-size:clamp(40px,4.6vw,76px)}
.display em,.gap-line em{color:var(--hold-text)}
.lead{color:var(--text-2)}
.eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--hold-text);gap:12px;margin-bottom:20px}
.eyebrow i{width:22px;height:2px;border-radius:0;background:currentColor;box-shadow:none}
.cta h2,.mega,.phero h1{text-transform:none}

/* buttons: squared, solid, no glow */
.btn{border-radius:10px;height:50px;padding:0 22px;transform:none}
.btn-lg{height:56px;padding:0 26px}
.btn .live{display:none}
.btn-ink{background:var(--ink);color:var(--cream);box-shadow:none}
.btn-ink:hover{background:var(--hold-text);transform:none;box-shadow:none}
.btn-glass{background:transparent;border:1.5px solid var(--ink);color:var(--ink);box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.btn-glass:hover{background:var(--ink);color:var(--cream);border-color:var(--ink);transform:none;box-shadow:none}

/* tags: what each status means, in the brand's colours */
.tag{border-radius:6px;font-family:var(--mono);font-weight:400;font-size:12px;letter-spacing:.02em;height:28px;padding:0 10px}
.tag-grey{background:rgba(15,23,34,.07);color:var(--text-2)}
.tag-build,.status .tag-build{background:var(--ink);color:var(--cream)}
.tag-draft,.status .tag-draft{background:var(--ok-tint);color:var(--ok)}
.tag-plan,.status .tag-plan{background:var(--gold-tint);color:#5A4214}
.tag-build::before,.tag-draft::before,.tag-plan::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
.tag-build::before{background:var(--gold)}

/* nav: cream over the film, cream glass once you scroll; the mark turns gold on dark, as in brand/logo-dark.svg */
.nav.scrolled{background:rgba(245,242,234,.92);box-shadow:0 1px 0 var(--line)}
.links a[aria-current="page"],.nav .links a[aria-current="page"]{box-shadow:inset 0 -2px 0 currentColor}
body:has(.hero2,.phero-film) .nav:not(.scrolled){color:var(--cream)}
body:has(.hero2,.phero-film) .nav:not(.scrolled) .logo-mark{fill:var(--gold)}
body:has(.hero2,.phero-film) .nav:not(.scrolled) .links{color:rgba(245,242,234,.86)}
body:has(.hero2,.phero-film) .nav:not(.scrolled) .links a:hover,body:has(.hero2,.phero-film) .nav:not(.scrolled) .links a[aria-current=page]{color:var(--cream)}
body:has(.hero2,.phero-film) .nav:not(.scrolled) .nav-cta{background:var(--cream);color:var(--ink)}
body:has(.hero2,.phero-film) .nav:not(.scrolled) .menu-btn{background:rgba(15,23,34,.3);border-color:rgba(245,242,234,.6)}
body:has(.hero2,.phero-film) .nav:not(.scrolled) .menu-btn span{background:var(--cream)}
body:has(.hero2,.phero-film) .nav:not(.scrolled) :focus-visible{outline-color:var(--cream)}

/* home hero: the film, full bleed, the line set low and left like a title card */
.hero2{background:var(--ink);color:var(--cream);height:100svh;min-height:680px}
.hero2-poster,.hero2-video{object-position:50% 50%}
.hero2-veil{background:linear-gradient(180deg,rgba(15,23,34,.55) 0%,rgba(15,23,34,0) 22%,rgba(15,23,34,0) 40%,rgba(15,23,34,.88) 100%)}
.hero2-ui{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;padding:0 max(var(--gut),calc((100vw - var(--wrap)) / 2)) clamp(36px,7vh,72px)}
.hero2 .mega{position:static;top:auto;left:auto;right:auto;margin:0;text-align:left;color:var(--cream);font-weight:600;font-stretch:92%;font-size:clamp(58px,8.4vw,140px);line-height:.95;letter-spacing:-.04em;max-width:9.4em}
.hero2-foot{position:static;transform:none;left:auto;bottom:auto;width:100%;margin-top:30px;display:grid;grid-template-columns:minmax(0,34em) auto;justify-content:space-between;gap:18px 48px;align-items:end;text-align:left}
.hero2-foot .lead{grid-row:1/3;color:rgba(245,242,234,.88);max-width:34em;font-size:clamp(16px,1.3vw,19px)}
.hero2-foot .ctas{justify-content:flex-start}
.hero2-foot .fine{color:rgba(245,242,234,.72);font-family:var(--mono);font-size:12px}
.hero2-foot .fine .live{display:none}
.hero2 .btn-ink{background:var(--cream);color:var(--ink)}.hero2 .btn-ink:hover{background:var(--gold)}
.hero2 .btn-glass{border-color:rgba(245,242,234,.75);color:var(--cream)}.hero2 .btn-glass:hover{background:var(--cream);color:var(--ink)}
.hero2 :focus-visible{outline-color:var(--cream)}
.caption{top:calc(var(--nav) + 22px);bottom:auto;left:max(var(--gut),calc((100vw - var(--wrap)) / 2));transform:none;border-radius:8px;background:rgba(15,23,34,.6);color:var(--cream);font-size:clamp(15px,1.3vw,20px)}
.pause{top:calc(var(--nav) + 22px);bottom:auto;right:max(var(--gut),calc((100vw - var(--wrap)) / 2));border-radius:8px;background:rgba(15,23,34,.6);border-color:rgba(245,242,234,.4);color:var(--cream)}
.hero2 .film-note{left:auto;right:max(var(--gut),calc((100vw - var(--wrap)) / 2));bottom:auto;top:calc(var(--nav) + 70px);color:rgba(245,242,234,.66)}

/* page heroes: a still from the film, full bleed, title set low and left */
.phero-film{position:relative;min-height:86svh;display:flex;align-items:flex-end;padding:calc(var(--nav) + 40px) 0 clamp(44px,8vh,88px);text-align:left;color:var(--cream);background:var(--ink);overflow:hidden}
.phero-film .phero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.phero-film::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,23,34,.58) 0%,rgba(15,23,34,0) 26%,rgba(15,23,34,.14) 48%,rgba(15,23,34,.88) 100%)}
.phero-film .wrap{position:relative;z-index:2}
.phero-film .eyebrow{justify-content:flex-start;color:var(--gold)}
.phero-film h1,.phero-film h1.h1-long{color:var(--cream);text-align:left;margin:0;font-weight:600;font-stretch:92%;font-size:clamp(48px,6.8vw,112px);line-height:.96;letter-spacing:-.04em;max-width:12em}
.phero-film .lead{margin:24px 0 0;color:rgba(245,242,234,.88);max-width:38em}
.phero-film .chips{justify-content:flex-start}
.phero-film .tag-grey{background:rgba(245,242,234,.16);color:var(--cream)}
.phero-film .tag-build{background:var(--cream);color:var(--ink)}
.phero-film .plain-top{margin:24px 0 0;background:rgba(245,242,234,.14);color:var(--cream);border-radius:10px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.phero-film .btn-ink{background:var(--cream);color:var(--ink)}
.phero-film :focus-visible{outline-color:var(--cream)}
.phero-film .src-n{background:rgba(245,242,234,.22);color:var(--cream)}
.phero-text{padding-top:calc(var(--nav) + clamp(56px,10vh,120px));text-align:left}
.phero-text h1{text-align:left;margin-left:0}
.phero-text .eyebrow{justify-content:flex-start}.phero-text .lead{margin-left:0}

/* cards: white, flat, one hairline; the colour comes from the sections */
.card,.fact,.cls,.steps li,.anat-list li,.node:not(.node-gate),.verdict-card,.join-card,.verify-out,.anat-doc,.status li{
  background:var(--paper);box-shadow:0 0 0 1px rgba(15,23,34,.09);border-radius:var(--r);-webkit-backdrop-filter:none;backdrop-filter:none}
.node-gate{background:var(--paper);box-shadow:0 0 0 2px var(--ink);border-radius:var(--r)}
.join-card{box-shadow:0 30px 60px -30px rgba(0,0,0,.5);color:var(--ink)}
.codes code,.cls code,.tries button{background:var(--card);box-shadow:0 0 0 1px rgba(15,23,34,.14),0 2px 0 rgba(15,23,34,.08);border-radius:8px;-webkit-backdrop-filter:none;backdrop-filter:none}
.tries button:hover{transform:translateY(-1px);box-shadow:0 0 0 1px var(--ink),0 3px 0 rgba(15,23,34,.12)}
.steps li::before{color:var(--hold-text)}

/* sections: cream, white, ink and deep vermilion, in turn */
.band{background:var(--card);border:0}
.try{background:var(--ink);color:var(--cream)}
.try .display{color:var(--cream)}.try .display em{color:var(--gold)}
.try .eyebrow{color:var(--gold)}
.try .lead{color:rgba(245,242,234,.8)}
.try .ask label{color:var(--cream)}
.try .ask input{background:var(--card);border-color:transparent;color:var(--ink)}
.try .tries button{box-shadow:0 2px 0 rgba(0,0,0,.35)}
.try .verdict-card{box-shadow:0 40px 80px -40px rgba(0,0,0,.7)}
.try .btn-ink{background:var(--gold);color:var(--ink)}.try .btn-ink:hover{background:var(--cream)}
.try :focus-visible{outline-color:var(--gold)}
#first{background:var(--card)}
#first .card:nth-child(1){background:var(--ok-tint)}
#first .card:nth-child(2){background:var(--ink);color:var(--cream)}
#first .card:nth-child(2) p{color:rgba(245,242,234,.78)}
#first .card:nth-child(2) .codes code{background:var(--ink-2);color:var(--cream);box-shadow:0 0 0 1px rgba(245,242,234,.16)}
#first .card:nth-child(3){background:var(--gold-tint)}
#first .status li{background:var(--page)}
#joinsec{background:var(--ink);color:var(--cream)}
#joinsec .join>div:first-child .display{color:var(--cream)}
#joinsec .join>div:first-child .display em{color:var(--gold)}
#joinsec .join>div:first-child .lead{color:rgba(245,242,234,.84)}
#joinsec .join>div:first-child .eyebrow{color:var(--gold)}
.foot{background:var(--ink)}
.foot .logo-mark,.foot-logo .logo-mark{fill:var(--gold)}
.foot-logo{color:var(--cream)}

/* the last call: our arch, cut into a deep vermilion wall */
.cta{background:var(--hold-text);color:#fff}
.cta .wrap{background:radial-gradient(70% 62% at 50% 100%,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 72%),rgba(0,0,0,.08);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55),inset 0 0 0 14px rgba(255,255,255,.06),inset 0 0 0 15.5px rgba(255,255,255,.22)}
.cta .wrap::after{background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.6) 18%,rgba(255,255,255,.6) 82%,rgba(255,255,255,0))}
.cta h2{color:#fff;font-weight:600;font-stretch:92%;letter-spacing:-.04em;line-height:.98;font-size:clamp(40px,5vw,84px)}
.cta .btn-ink{background:var(--cream);color:var(--ink)}.cta .btn-ink:hover{background:#fff}
.cta .btn-glass{border-color:rgba(255,255,255,.85);color:#fff}.cta .btn-glass:hover{background:#fff;color:var(--ink)}
.cta :focus-visible{outline-color:#fff}

/* the story on cream; facts on white with vermilion units */
.story .fact .unit,.fact .unit{color:var(--hold-text)}
.st-tile,.st-label{background:var(--card);box-shadow:0 0 0 1px rgba(15,23,34,.14),0 6px 0 -2px rgba(15,23,34,.1),0 24px 40px -20px rgba(15,23,34,.35);-webkit-backdrop-filter:none;backdrop-filter:none}

/* doors keep their meaning: open (ink frame, gold sill) where something is being built, closed where it is planned */
.status li::before{box-shadow:0 0 0 7px var(--paper),0 0 0 8px rgba(15,23,34,.22),inset 0 2px 3px rgba(15,23,34,.14)}
.status li[data-door=open]::before{box-shadow:0 0 0 7px var(--paper),0 0 0 8px var(--ink),inset 0 2px 3px rgba(15,23,34,.14)}
.status li[data-door=open]::after{background:var(--gold);height:2px}
#first .status li::before,#first .status li[data-door=open]::before{box-shadow:0 0 0 7px var(--page),0 0 0 8px rgba(15,23,34,.22),inset 0 2px 3px rgba(15,23,34,.14)}
#first .status li[data-door=open]::before{box-shadow:0 0 0 7px var(--page),0 0 0 8px var(--ink),inset 0 2px 3px rgba(15,23,34,.14)}

@media (max-width:760px){
  .hero2-foot{grid-template-columns:1fr}.hero2-foot .lead{grid-row:auto}
  .hero2 .mega{font-size:clamp(44px,12.4vw,72px)}
  .caption{left:var(--gut);right:var(--gut);white-space:normal;text-align:left;top:calc(var(--nav) + 12px)}
  .pause{top:auto;bottom:12px}
  .phero-film{min-height:78svh}
}

/* fixes: text inside white objects on ink stays ink; home sign-up on deep vermilion so it parts from the footer */
.try .tries button,.try .verdict-card,.try .ask input{color:var(--ink)}
.try .tries button:hover{box-shadow:0 0 0 1px var(--gold),0 3px 0 rgba(0,0,0,.35)}
#joinsec{background:var(--hold-text)}
#joinsec .join>div:first-child .display em{color:var(--cream)}
#joinsec .join>div:first-child .eyebrow{color:var(--cream)}
#joinsec .join>div:first-child .lead{color:rgba(255,255,255,.88)}
#joinsec :focus-visible{outline-color:#fff}
#joinsec .join-card :focus-visible{outline-color:var(--hold-text)}

/* the 404 and the legal pages speak in the same voice */
.lost h1{text-transform:none;font-weight:600;font-stretch:92%;letter-spacing:-.04em;line-height:.98}
.legal h1{font-stretch:94%;letter-spacing:-.036em}

/* ====================================================================================================================
   v8 (30 Oct 2026): no hard seams, real glass. Sections dissolve into the next like light changing: the film fades
   into cream, cream into ink and back, and the deep vermilion door at the end of each page sinks into the night of
   the footer. Cards are glass over soft brand light (gold, vermilion and green glows sit behind every card group).
   ==================================================================================================================== */
:root{--blend:clamp(96px,15vh,170px)}

/* the film heroes fade into the page instead of stopping */
.phero-film{padding-bottom:calc(var(--blend) + 8px)}
.phero-film::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--blend);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(245,242,234,0) 0%,rgba(245,242,234,.55) 55%,var(--page) 100%)}
.hero2::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:var(--blend);z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(245,242,234,0) 0%,rgba(245,242,234,.55) 55%,var(--page) 100%)}
.hero2-ui{z-index:2;padding-bottom:calc(var(--blend) + 4px)}
.hero2 .pause{z-index:3}

/* white bands, the ink demo and the vermilion door all fade in and out of the cream page */
.band,#first{background:linear-gradient(180deg,var(--page) 0,var(--card) var(--blend),var(--card) calc(100% - var(--blend)),var(--page) 100%)}
.try{background:linear-gradient(180deg,var(--page) 0,var(--ink) var(--blend),var(--ink) calc(100% - var(--blend)),var(--page) 100%);padding-block:calc(var(--blend) + 40px)}
.cta{background:linear-gradient(180deg,var(--page) 0,var(--hold-text) var(--blend),var(--hold-text) calc(100% - var(--blend) * 1.3),var(--ink) 100%);padding-block:calc(var(--blend) + 32px) calc(var(--blend) * 1.3 + 24px)}
.foot{background:linear-gradient(180deg,var(--page) 0,var(--ink) var(--blend));padding-top:calc(var(--blend) + 48px)}
main:has(>.cta:last-child)+.foot{background:var(--ink);padding-top:40px}

/* brand light behind every group of cards, so the glass has something to bend */
.cards,.classes,.steps,.status,.anat-list,.under,.facts,.deal,.flow,.std,.anat{position:relative;isolation:isolate}
.cards::after,.classes::after,.steps::after,.status::after,.anat-list::after,.under::after,.facts::after,.deal::after,.flow::after,.std::after,.anat::after{
  content:"";position:absolute;inset:-10% -6%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 58% at 16% 28%,rgba(217,164,65,.30),transparent 70%),radial-gradient(34% 54% at 84% 72%,rgba(240,74,26,.17),transparent 70%),radial-gradient(28% 46% at 52% 58%,rgba(26,122,80,.10),transparent 70%)}
.facts::after{inset:-6% -14% -6% -10%}

/* the glass card: frosted white, a bright top edge, an inner rim and a soft long shadow */
.card,.fact,.cls,.steps li,.anat-list li,.node:not(.node-gate),.verify-out,.anat-doc,.status li{
  background:linear-gradient(160deg,rgba(255,255,255,.80) 0%,rgba(255,255,255,.48) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(255,255,255,.55),0 0 0 1px rgba(15,23,34,.07),0 26px 50px -30px rgba(15,23,34,.30);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);backdrop-filter:blur(22px) saturate(1.5);border-radius:20px}
.node-gate{background:linear-gradient(160deg,rgba(255,255,255,.92),rgba(255,255,255,.7));box-shadow:inset 0 1px 0 #fff,0 0 0 2px var(--ink),0 30px 60px -32px rgba(15,23,34,.4);-webkit-backdrop-filter:blur(22px);backdrop-filter:blur(22px);border-radius:20px}
.verdict-card,.join-card{border-radius:20px;box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(15,23,34,.08),0 40px 80px -40px rgba(0,0,0,.55)}
#first .status li,.status li[data-door=open]{background:linear-gradient(160deg,rgba(255,255,255,.80),rgba(255,255,255,.48))}
/* the three readers of the home page, each in a tinted glass */
#first .card:nth-child(1){background:linear-gradient(160deg,rgba(226,242,234,.92),rgba(226,242,234,.6))}
#first .card:nth-child(2){background:linear-gradient(160deg,rgba(27,37,51,.96),rgba(15,23,34,.9));box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 0 0 1px rgba(15,23,34,.4),0 30px 60px -30px rgba(15,23,34,.55)}
#first .card:nth-child(3){background:linear-gradient(160deg,rgba(243,230,204,.95),rgba(243,230,204,.62))}

/* each story chapter hands off to its own page */
.step-tag{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px}
.step-link{display:inline-flex;align-items:center;min-height:32px;font-weight:600;font-size:15.5px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.step-link:hover{color:var(--hold-text)}
/* the stills in the stage fade on all four sides, so no box ever shows */
.st-receipt,.st-cover{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 18%,#000 82%,transparent 100%),linear-gradient(180deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-composite:intersect}
@media (max-width:760px){:root{--blend:84px}}

/* glass on phones: same look, no live blur (it costs main thread time on slow devices) */
@media (max-width:760px){
  .card,.fact,.cls,.steps li,.anat-list li,.node,.verify-out,.anat-doc,.status li,.node-gate{-webkit-backdrop-filter:none;backdrop-filter:none}
  .card,.fact,.cls,.steps li,.anat-list li,.node:not(.node-gate),.verify-out,.anat-doc,.status li{background:linear-gradient(160deg,rgba(255,255,255,.9),rgba(255,255,255,.7))}
}
/* the brand light behind card groups never widens the page */
.room,.sec,.band{overflow-x:clip}

/* the sign-up block fades in and out like every other section */
#joinsec{background:linear-gradient(180deg,var(--page) 0,var(--hold-text) var(--blend),var(--hold-text) calc(100% - var(--blend)),var(--page) 100%);padding-block:calc(var(--blend) + 32px)}

/* with the shot playing, the words sit under its own hold line (story.json "hold": x 0.39 to 0.59, y 0.83) */
.story-stage.scrub .st-held{left:49%;top:auto;bottom:4%}

/* the shot fades out softly at the top and the sides, so the posts rise out of frame and floor shadows never end hard */
.st-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 100%),linear-gradient(90deg,transparent 0,#000 18%,#000 90%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(180deg,transparent 0,#000 24%,#000 100%),linear-gradient(90deg,transparent 0,#000 18%,#000 90%,transparent 100%);mask-composite:intersect}

@media (max-width:900px){
  .story-stage.scrub .st-held{top:6%;bottom:auto;left:50%}
  .story-stage{background:linear-gradient(180deg,var(--page) 84%,rgba(245,242,234,0))}
}

/* ====================================================================================================================
   v9: round 3 gate fixes (31 Oct 2026)
   ==================================================================================================================== */
/* QA B1: the scrolled nav's blur lives on its own layer, so it never traps the fixed phone menu */
.nav.scrolled{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
.nav::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .35s var(--calm);
  background:rgba(245,242,234,.92);-webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 1px 0 var(--line)}
.nav.scrolled::before{opacity:1}
.menu{background:var(--page);z-index:60}
/* QA B2, B3: text over the film always sits on enough ink. Over pure white film the headline keeps at least 3:1 and the
   body text at least 4.5:1 (ink at 62% or more wherever text can sit). Eyebrows over film are cream; their rule stays gold. */
.hero2-veil{background:linear-gradient(180deg,rgba(15,23,34,.72) 0%,rgba(15,23,34,.64) 11%,rgba(15,23,34,.34) 22%,rgba(15,23,34,.4) 32%,rgba(15,23,34,.66) 42%,rgba(15,23,34,.8) 66%,rgba(15,23,34,.9) 100%)}
.hero2 .mega,.phero-film h1{text-shadow:0 2px 30px rgba(15,23,34,.45)}
.phero-film::after{background:linear-gradient(180deg,rgba(15,23,34,.72) 0%,rgba(15,23,34,.64) 11%,rgba(15,23,34,.36) 22%,rgba(15,23,34,.42) 30%,rgba(15,23,34,.68) 40%,rgba(15,23,34,.82) 64%,rgba(15,23,34,.9) 100%)}
.phero-film .eyebrow{color:var(--cream)}
.phero-film .eyebrow i{background:var(--gold)}
.hero2 .film-note{padding:6px 10px;border-radius:8px;background:rgba(15,23,34,.66);color:var(--cream)}
/* QA B4: a card with an open source note rises above its neighbours */
:is(.card,.fact,.cls,.steps li,.anat-list li,.node,.status li,.verify-out,.anat-doc,.points li,.ticks li,.rule):is(:hover,:focus-within),
:is(.card,.fact,.cls,.steps li,.anat-list li,.node,.status li,.verify-out,.anat-doc,.points li,.ticks li,.rule):has(.src.open){position:relative;z-index:30}
.src.open{z-index:31}
/* QA B5, B6, B7: on phones there is no sticky stage; each chapter shows its own key frame of the shot */
.step-key{display:none}
@media (max-width:900px){
  .story-stage{display:none}
  .step-key{display:block;width:100%;height:auto;margin:0 0 6px;aspect-ratio:16/10;object-fit:contain;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 92%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 18%,#000 92%,transparent 100%)}
  .step{min-height:0;padding-block:5svh 7svh;justify-content:flex-start}
}

/* on phones the title block sits higher in the still, so the grade is deeper from a quarter of the way down */
@media (max-width:760px){
  .phero-film::after{background:linear-gradient(180deg,rgba(15,23,34,.74) 0%,rgba(15,23,34,.64) 12%,rgba(15,23,34,.62) 24%,rgba(15,23,34,.72) 34%,rgba(15,23,34,.85) 60%,rgba(15,23,34,.92) 100%)}
}

/* round 4 QA B2: at wide screens the title block starts higher in the still, so the grade is deeper from a fifth down */
.phero-film::after{background:linear-gradient(180deg,rgba(15,23,34,.74) 0%,rgba(15,23,34,.64) 11%,rgba(15,23,34,.56) 20%,rgba(15,23,34,.64) 28%,rgba(15,23,34,.74) 38%,rgba(15,23,34,.84) 62%,rgba(15,23,34,.92) 100%)}
@media (max-width:760px){
  .phero-film::after{background:linear-gradient(180deg,rgba(15,23,34,.74) 0%,rgba(15,23,34,.64) 12%,rgba(15,23,34,.62) 24%,rgba(15,23,34,.72) 34%,rgba(15,23,34,.85) 60%,rgba(15,23,34,.92) 100%)}
}
/* the shot's posts leave the top of the frame softly */
.st-canvas{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 100%),linear-gradient(90deg,transparent 0,#000 18%,#000 90%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 34%,#000 100%),linear-gradient(90deg,transparent 0,#000 18%,#000 90%,transparent 100%)}

/* ====================================================================================================================
   v10 (31 Oct 2026): crisp arch edges instead of fades, and the story as full screen cinema.
   Where a section changes colour, the new colour rises over the old one as a wide, shallow arch (the curve of our
   door), traced with a fine gold sill. No fades between unlike tones (they turn to grey). The story pins the shot full
   screen with one giant word per chapter behind the objects, in that state's colour, and the words slide over in cards.
   ==================================================================================================================== */
:root{--rise:clamp(34px,4.6vw,76px)}

/* no fades: every section is one solid colour again */
.phero-film::before,.hero2::after{content:none}
.band,#first{background:var(--page)}
.try{background:var(--ink);padding-block:calc(var(--rise) + clamp(84px,11vh,140px))}
.cta{background:var(--hold-text);padding-block:calc(var(--rise) + clamp(84px,11vh,140px))}
#joinsec{background:var(--hold-text);padding-block:calc(var(--rise) + clamp(70px,9vh,120px))}
.foot,main:has(>.cta:last-child)+.foot{background:var(--ink);padding-top:calc(var(--rise) + 56px)}
.hero2-veil{background:linear-gradient(180deg,rgba(15,23,34,.72) 0%,rgba(15,23,34,.64) 11%,rgba(15,23,34,.34) 22%,rgba(15,23,34,.4) 32%,rgba(15,23,34,.66) 42%,rgba(15,23,34,.84) 70%,rgba(15,23,34,.96) 100%)}
.hero2-ui{padding-bottom:calc(var(--rise) + clamp(28px,5vh,56px))}
.phero-film{padding-bottom:calc(var(--rise) + clamp(36px,6vh,72px))}

/* the arch edge: the incoming colour rises over the outgoing one */
.hero2+section,.phero-film+section,.try+section,#joinsec+section,.try,.cta,#joinsec,.foot{position:relative}
.hero2+section::before,.phero-film+section::before,.try+section::before,#joinsec+section::before,.try::before,.cta::before,#joinsec::before,.foot::before{
  content:"";position:absolute;left:0;right:0;top:calc(1px - var(--rise));height:var(--rise);z-index:6;pointer-events:none;
  border-radius:50% 50% 0 0 / 100% 100% 0 0;box-shadow:0 -1px 0 rgba(217,164,65,.75);background:var(--page)}
.try::before,.foot::before{background:var(--ink)}
.cta::before,#joinsec::before{background:var(--hold-text)}
.try+.cta::before{background:var(--hold-text)}
main:has(>.cta:last-child)+.foot::before{background:var(--ink)}

/* the story as cinema: the stage pinned full screen, giant chapter words behind the shot, cards sliding over */
.step-word{display:none}
@media (min-width:901px){
  .story{padding:0}
  .story-in{display:grid;grid-template-columns:1fr;width:100%;max-width:none;margin:0}
  .story-stage{grid-area:1/1;position:sticky;top:0;height:100vh;margin:0!important;z-index:0;display:block}
  .story-steps{grid-area:1/1;position:relative;z-index:2}
  .stage-box{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:min(1240px,92vw);height:min(80vh,58vw);max-height:none;aspect-ratio:auto}
  .st-words{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;overflow:hidden}
  .st-words span{grid-area:1/1;font-weight:700;font-stretch:76%;font-size:clamp(150px,27vw,470px);line-height:.8;letter-spacing:-.065em;
    opacity:0;transform:translateY(5%);transition:opacity .7s var(--calm),transform 1.1s var(--ease)}
  .st-words [data-w=action]{color:var(--ink)}
  .st-words [data-w=gate]{color:var(--hold)}
  .st-words [data-w=receipt]{color:var(--ok)}
  .st-words [data-w=cover]{color:var(--gold)}
  [data-act=action] .st-words [data-w=action],[data-act=gate] .st-words [data-w=gate],[data-act=receipt] .st-words [data-w=receipt],[data-act=cover] .st-words [data-w=cover]{opacity:1;transform:none}
  .st-rail{position:absolute;right:max(var(--gut),calc((100vw - var(--wrap)) / 2));top:50%;transform:translateY(-50%);margin:0;padding:0;list-style:none;display:grid;gap:16px;font-family:var(--mono);font-size:12px;color:var(--text-3);z-index:3}
  .st-rail li{display:flex;align-items:center;gap:10px;transition:color .4s var(--calm)}
  .st-rail li::before{content:"";width:14px;height:2px;background:currentColor;transition:width .5s var(--ease)}
  [data-act=action] .st-rail [data-k=action],[data-act=gate] .st-rail [data-k=gate],[data-act=receipt] .st-rail [data-k=receipt],[data-act=cover] .st-rail [data-k=cover]{color:var(--ink)}
  [data-act=action] .st-rail [data-k=action]::before,[data-act=gate] .st-rail [data-k=gate]::before,[data-act=receipt] .st-rail [data-k=receipt]::before,[data-act=cover] .st-rail [data-k=cover]::before{width:34px}
  .st-word{display:none}
  .step{min-height:125vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 max(var(--gut),calc((100vw - var(--wrap)) / 2)) 14vh}
  .step:nth-child(even){align-items:flex-end}
  .step-card{width:min(470px,100%);padding:30px 32px;border-radius:22px;background:rgba(245,242,234,.88);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(15,23,34,.07),0 30px 60px -30px rgba(15,23,34,.35)}
  .step-card h2.display{font-size:clamp(30px,2.5vw,42px)}
  .step-card .lead{font-size:17px}
  .step-card .facts{margin-top:22px;gap:0}
  .step-card .facts::after{content:none}
  .step-card .fact{background:none;box-shadow:none;border-radius:0;padding:14px 0;border-top:1px solid var(--line);-webkit-backdrop-filter:none;backdrop-filter:none}
  .step-card .fact .num{font-size:44px}
  .step:first-child{padding-top:30vh}
}
@media (max-width:900px){
  .step-word{display:block;margin:0 0 -8px;font-weight:700;font-stretch:78%;font-size:clamp(64px,22vw,120px);line-height:.85;letter-spacing:-.06em}
  .step[data-act=action] .step-word{color:var(--ink)}
  .step[data-act=gate] .step-word{color:var(--hold-text)}
  .step[data-act=receipt] .step-word{color:var(--ok)}
  .step[data-act=cover] .step-word{color:#9A6E1C}
  :root{--rise:28px}
}

/* ====================================================================================================================
   v11 (31 Oct 2026): the cinema chapter on every page (.cine). Same language as the home story: the stage pins full
   screen with the page's own object, one giant word per chapter behind it in the colour of what it means, a 01 to 0n
   rail, and the chapter cards sliding over. main.js puts .on on the word, rail mark and parts of the chapter in view.
   ==================================================================================================================== */
.step-card [data-r]{opacity:1!important;transform:none!important;clip-path:none!important}
.w-ink{color:var(--ink)}.w-hold{color:var(--hold)}.w-ok{color:var(--ok)}.w-gold{color:var(--gold)}
.cine{position:relative}
.cine-steps{list-style:none;margin:0;padding:0}
.cine .step-word{display:none}
@media (min-width:901px){
  .cine-in{display:grid;grid-template-columns:1fr}
  .cine-stage{grid-area:1/1;position:sticky;top:0;height:100vh;z-index:0;overflow:hidden}
  .cine-steps{grid-area:1/1;position:relative;z-index:2}
  .cine-words{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
  .cine-words span{grid-area:1/1;font-weight:700;font-stretch:76%;font-size:clamp(150px,27vw,470px);line-height:.8;letter-spacing:-.065em;white-space:nowrap;
    opacity:0;transform:translateY(5%);transition:opacity .7s var(--calm),transform 1.1s var(--ease)}
  .cine-words span.wl{font-size:clamp(120px,19vw,340px)}
  .cine-words span.wxl{font-size:clamp(100px,14vw,250px)}
  .cine-words span.on{opacity:1;transform:none}
  .cine .st-rail li.on{color:var(--ink)}
  .cine .st-rail li.on::before{width:34px}
  .cine-art{position:absolute;left:50%;top:55%;transform:translate(-50%,-50%);width:min(1100px,84vw);height:min(74vh,54vw);display:grid;place-items:center;pointer-events:none}
  .cine-art img{width:100%;height:100%;object-fit:contain}
  .cine-step{min-height:115vh;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:0 max(var(--gut),calc((100vw - var(--wrap)) / 2)) 14vh}
  .cine-step:nth-child(even){align-items:flex-end}
  .cine-step:first-child{padding-top:28vh}
  .cine .step-card{width:min(480px,100%);padding:30px 32px;border-radius:22px;background:rgba(245,242,234,.9);
    -webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);
    box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(15,23,34,.07),0 30px 60px -30px rgba(15,23,34,.35)}
  .cine .step-card h2.display{font-size:clamp(30px,2.5vw,42px)}
  .cine .step-card .lead{font-size:17px;margin-top:14px}
  .cine .step-card .h3{margin:20px 0 8px}
  .cine .step-card .ticks{margin-top:6px}
  /* the receipt on the stage: the chapter in view lights its own fields, the rest step back */
  .cine-keep .cine-art{width:min(560px,46vw);height:auto;top:52%}
  .cine-keep .anat-doc{width:100%;position:relative;top:0;pointer-events:auto}
  .cine-keep .anat-doc .grp{transition:opacity .5s var(--calm),background-color .5s var(--calm);border-radius:10px;padding-inline:8px;margin-inline:-8px}
  .cine-keep .anat-doc:has(.grp.on) .grp:not(.on){opacity:.32}
  .cine-keep .anat-doc .grp.on{background:var(--hold-tint)}
}
@media (max-width:900px){
  .cine-stage{display:none}
  .cine-keep .cine-stage{display:block;position:relative;height:auto;padding:24px var(--gut) 0}
  .cine-keep .cine-words,.cine-keep .st-rail{display:none}
  .cine-step{padding:5svh var(--gut) 4svh;max-width:var(--wrap);margin:0 auto}
  .cine .step-word{display:block;margin:0 0 6px;font-weight:700;font-stretch:78%;font-size:clamp(60px,20vw,110px);line-height:.85;letter-spacing:-.06em}
  .cine .step-word.wl{font-size:clamp(52px,16vw,90px)}
  .cine .step-word.wxl{font-size:clamp(44px,12.5vw,72px)}
  .cine .step-word.w-gold{color:#9A6E1C}.cine .step-word.w-hold{color:var(--hold-text)}
}
/* the home story's giant words use the same deeper gold where they must be read on phones */
.story .w-gold{color:var(--gold)}

@media (min-width:901px){
  /* the words stand higher than the object, so it overlaps only their lower half: depth, and still readable */
  .cine-words{align-items:start;padding-top:max(13vh,calc(var(--nav) + 36px))}
  /* the receipt on the stage is solid paper, so the word sits behind it and the fields read cleanly */
  .cine-keep .anat-doc{background:var(--card);-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:0 0 0 1px rgba(15,23,34,.08),0 40px 80px -40px rgba(15,23,34,.45)}
  .cine-keep .anat-doc:has(.grp.on) .grp:not(.on){opacity:.45}
}

/* ====================================================================================================================
   v12 (31 Oct 2026): the home story reads first. Its words stand above the object, so the shot overlaps only their foot;
   each letter rises in turn when its chapter arrives. The arch edge appears once, where the film meets the page; every
   other change of colour is a straight, confident edge.
   ==================================================================================================================== */
.try::before,.cta::before,#joinsec::before,.foot::before,.try+section::before,#joinsec+section::before,main:has(>.cta:last-child)+.foot::before{content:none}
.try{padding-block:clamp(90px,12vh,150px)}
.cta{padding-block:clamp(90px,12vh,150px)}
#joinsec{padding-block:clamp(80px,10vh,130px)}
.foot,main:has(>.cta:last-child)+.foot{padding-top:80px}
@media (min-width:901px){
  .story .st-words{place-items:start center;padding-top:max(12vh,calc(var(--nav) + 30px))}
  .story .stage-box{top:60%;height:min(70vh,52vw)}
  .story .st-words span{transform:none;opacity:0;transition:opacity .2s linear}
  .story .st-words span i{display:inline-block;font-style:normal;transform:translateY(55%);opacity:0;transition:transform .9s var(--ease),opacity .6s var(--calm);transition-delay:calc(var(--i) * 45ms)}
  [data-act=action] .st-words [data-w=action],[data-act=gate] .st-words [data-w=gate],[data-act=receipt] .st-words [data-w=receipt],[data-act=cover] .st-words [data-w=cover]{opacity:1}
  [data-act=action] .st-words [data-w=action] i,[data-act=gate] .st-words [data-w=gate] i,[data-act=receipt] .st-words [data-w=receipt] i,[data-act=cover] .st-words [data-w=cover] i{transform:none;opacity:1}
}
@media (prefers-reduced-motion:reduce){.story .st-words span i{transform:none;opacity:1;transition:none}}

/* vermilion means held, so a dark button's hover deepens to ink instead of turning vermilion */
.btn-ink:hover{background:var(--ink-2)}

/* source note buttons keep a margin above the 24 px tap floor */
.src-n{min-width:26px;height:26px}

/* ====================================================================================================================
   v13 (31 Oct 2026): one canvas. Gautam: no curves, no hard edges, no cards, no drop shadows. Once main.js runs, no
   section paints a background: the whole screen floods to the tone of the section at the reading line (html[data-canvas])
   and a section that cannot be read on that colour steps out (.off). Without JS every section keeps its solid colour.
   ==================================================================================================================== */
html[data-canvas]{--rise:0px}
html[data-canvas=ink]{background-color:var(--ink)}
html[data-canvas=cream]{background-color:var(--cream)}
html[data-canvas=verm]{background-color:var(--hold-text)}
html.canvas-on{transition:background-color .9s var(--calm)}
html[data-canvas] [data-tone]{background:transparent!important;border-block:0!important}
html.canvas-on [data-tone]{transition:opacity .8s var(--calm)}
html[data-canvas] [data-tone].off{opacity:0;pointer-events:none}
@media (prefers-reduced-motion:reduce){html.canvas-on,html.canvas-on [data-tone]{transition-duration:.01s}}
.hero2+section::before,.phero-film+section::before,.try+section::before,#joinsec+section::before,.try::before,.cta::before,#joinsec::before,.foot::before,main:has(>.cta:last-child)+.foot::before{content:none!important}
.cta .wrap{background:none!important;box-shadow:none!important;border-radius:0!important}

/* no cards: things stand on the canvas, divided by hairlines, never boxed, never lifted by shadow */
.card,.fact,.cls,.node,.node-gate,.join-card,.verify-out,.status li,.step-card,.cine .step-card,.verdict-card,.steps li,.anat-list li{
  background:none!important;box-shadow:none!important;border-radius:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  border:0!important;border-top:1px solid var(--line)!important;padding-inline:0!important}
.verdict-card::after,.node-gate::after{content:none!important}
[data-tone=ink],[data-tone=verm]{--line:rgba(245,242,234,.22);--text-2:rgba(245,242,234,.84);--text-3:rgba(245,242,234,.72)}
.try .verdict-card{color:var(--cream)!important}
.try .v-word.held{color:var(--hold)}.try .v-word.runs{color:#5BD39A}.try .v-word.blocked{color:var(--cream)}
.try .v-why,.try .v-note,.try .v-rows dt{color:var(--text-2)}
.try .v-rows dd{color:var(--cream)}
html[data-canvas] body{background:transparent}
.cards::after,.classes::after,.steps::after,.status::after,.anat-list::after,.under::after,.facts::after,.deal::after,.flow::after,.std::after,.anat::after{content:none!important}
.rule{background:none;color:var(--ink);border-radius:0;border-left:2px solid var(--ink);padding:6px 0 6px 26px;font-size:15.5px}
.rule .k{color:var(--text-3);opacity:1}.rule .h{color:var(--hold-text)}

/* the home story as one pinned scene: the object and its giant word glide to one side, the chapter's words stand on the
   other, and the sides swap every act, so text and object never share space and the stage is never still */
@media (min-width:901px){
  .story-stage{--ox:17vw}
  .story-stage[data-act=gate],.story-stage[data-act=cover]{--ox:-17vw}
  .story .stage-box{width:min(1060px,64vw);height:min(70vh,42vw);top:57%;transform:translate(calc(-50% + var(--ox)),-50%);transition:transform 1.3s var(--ease)}
  .story .st-words{transform:translateX(var(--ox));transition:transform 1.3s var(--ease);overflow:visible;padding-top:max(11vh,calc(var(--nav) + 20px))}
  .story .st-words span{font-size:clamp(120px,13.5vw,250px)}
  .story .st-rail{right:auto;left:50%;top:auto;bottom:5vh;transform:translateX(-50%);display:flex;gap:22px}
  .story .st-rail li::before{width:14px}
  .story .step{min-height:135vh;display:block;padding:0 max(var(--gut),calc((100vw - var(--wrap)) / 2))}
  .story .step:first-child{padding-top:0}
  .story .step-card{position:sticky;top:calc(var(--nav) + 9vh);width:min(470px,33vw);padding:26px 0 0!important;opacity:0;transform:translateY(48px);
    transition:opacity .6s var(--calm),transform .9s var(--ease)}
  .story .step:nth-child(even) .step-card{margin-left:auto}
  .story-stage[data-act=action]~.story-steps [data-act=action] .step-card,.story-stage[data-act=gate]~.story-steps [data-act=gate] .step-card,
  .story-stage[data-act=receipt]~.story-steps [data-act=receipt] .step-card,.story-stage[data-act=cover]~.story-steps [data-act=cover] .step-card{opacity:1;transform:none}
  .story .step-card .facts{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:26px}
  .story .step-card .fact{border:0!important;padding:0}
  .story .step-card .fact .num{font-size:clamp(56px,5vw,84px);line-height:.9;letter-spacing:-.05em;font-weight:650;font-stretch:80%}
  .story .step-card .fact p:last-child{font-size:14px;line-height:1.5;color:var(--text-2)}
}

/* the nav is the canvas, frosted: the same colour as the screen under it, so it never draws a bar */
html{--cv:var(--cream)}
html[data-canvas=ink]{--cv:var(--ink)}html[data-canvas=verm]{--cv:var(--hold-text)}
.nav::before{background:var(--cv);box-shadow:none;transition:opacity .35s var(--calm),background-color .9s var(--calm)}
html .nav.on-ink{color:var(--cream)}
html .nav.on-ink .logo-mark{fill:var(--gold)}
html .nav.on-ink .links{color:rgba(245,242,234,.86)}
html .nav.on-ink .links a:hover,html .nav.on-ink .links a[aria-current=page]{color:var(--cream)}
html .nav.on-ink .nav-cta{background:var(--cream);color:var(--ink)}
html .nav.on-ink .menu-btn{background:rgba(15,23,34,.3);border-color:rgba(245,242,234,.6)}
html .nav.on-ink .menu-btn span{background:var(--cream)}
html .nav.on-ink :focus-visible{outline-color:var(--cream)}

/* the ending: the whole screen turns vermilion and the ask fills it */
.cta{padding-block:clamp(120px,18vh,210px)!important}
.cta .wrap{width:min(var(--wrap),100% - 2*var(--gut));padding:0!important}
.cta .wrap::after{content:none}
.cta h2{font-size:clamp(48px,7.4vw,132px);font-weight:650;font-stretch:80%;line-height:.92;letter-spacing:-.05em;max-width:12.5em}
.cta .ctas{margin-top:clamp(36px,5vh,56px)}
.story .step-card .fact{display:block}
.story .step-card .fact .unit{margin:10px 0 8px}

/* live film in every page hero, and the hero as a camera that pushes in as it leaves */
.phero-film .phero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--calm);z-index:0}
.phero-film.playing .phero-video{opacity:1}
.phero-film .phero-bg,.phero-film .phero-video,.hero2-poster,.hero2-video{transform:scale(calc(1 + var(--hp,0) * .14));transform-origin:50% 40%}
.phero-film .wrap,.hero2-ui{transform:translate3d(0,calc(var(--hp,0) * -14vh),0)}
.phero-film .pause{z-index:3}

/* phones: the story's words keep the page gutter now that they have no card around them */
@media (max-width:900px){.story .step{padding-inline:var(--gut)}.story .step-card{border-top:0!important;padding-top:6px!important}}

/* home, who it is for: three rows, not three boxes. A big number, the audience, then what it means to them */
#first .cards{display:grid;grid-template-columns:1fr;gap:0;counter-reset:aud;margin-top:clamp(36px,6vh,64px)}
#first .card,#first .card:nth-child(n){color:inherit;display:grid;grid-template-columns:minmax(70px,.45fr) minmax(0,1.3fr) minmax(0,1.5fr);column-gap:clamp(20px,3.4vw,64px);row-gap:14px;align-items:start;padding-block:clamp(30px,4.6vh,52px)!important;counter-increment:aud}
#first .card::before{content:"0" counter(aud);grid-column:1;grid-row:1/span 3;font-weight:650;font-stretch:78%;font-size:clamp(52px,5.6vw,96px);line-height:.82;letter-spacing:-.05em;color:var(--ink)}
#first .card .h3{grid-column:2;grid-row:1/span 3;font-size:clamp(26px,2.5vw,42px);line-height:1.05;letter-spacing:-.035em}
#first .card>p{grid-column:3;color:var(--text-2)}
#first .card:nth-child(n) p{color:var(--text-2)}
#first .card:nth-child(n) .codes code{background:var(--ink);color:var(--cream);box-shadow:none}
#first .card:last-child{border-bottom:1px solid var(--line)}
@media (max-width:760px){
  #first .card,#first .card:nth-child(n){grid-template-columns:1fr}
  #first .card::before,#first .card .h3,#first .card>p{grid-column:1;grid-row:auto}
}
/* reduced motion keeps the still renders, which fill more of the frame: they sit lower so the giant word stays clear */
@media (min-width:901px) and (prefers-reduced-motion:reduce){.story .stage-box .st{scale:.74;transform-origin:50% 100%}.story .stage-box{top:60%}}

/* every hero is a full screen of film whose foot is the canvas itself: the film ends in solid ink, so it never shows
   an edge where the page begins (it only ever darkens under the words, so their contrast can only rise) */
.phero-film{min-height:100vh;min-height:100svh}
.phero-film::before{content:"";position:absolute;left:0;right:0;bottom:0;height:24%;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(15,23,34,0) 0%,var(--ink) 92%)}

/* vermilion carries only white or cream at full strength: small text needs it to pass 4.5:1 there */
[data-tone=verm]{--text-2:#fff;--text-3:#fff}
#joinsec .join-card{color:#fff}
#joinsec .join-form .msg.bad{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
#joinsec .join-card :focus-visible{outline-color:var(--ink)}
#joinsec .consent input{accent-color:var(--ink)}
#joinsec .join-form input[type=email],#joinsec .join-form input[type=text],#joinsec .join-form select,#joinsec .join-form textarea{color:var(--ink);background-color:var(--cream);border-color:transparent}

/* ====================================================================================================================
   v13b (31 Oct 2026): gate round 5 fixes. The canvas only cuts where nothing is being read; no cards or drop shadows
   remain; reduced motion and no JS keep solid sections; every word reads on every colour it can stand on.
   ==================================================================================================================== */
/* the nav takes the colour of the section it names (html[data-nav]); on vermilion its words are white */
html[data-nav=ink]{--cv:var(--ink)}html[data-nav=verm]{--cv:var(--hold-text)}html[data-nav=cream]{--cv:var(--cream)}
html[data-nav=verm] .nav.on-ink .links,html[data-nav=verm] .nav.on-ink .links a{color:#fff}
/* the phone menu is always paper, so its words are always ink */
html .nav.on-ink .menu{color:var(--ink)}
html .nav.on-ink .menu a[aria-current=page]{color:var(--hold-text)}
html .nav.on-ink .menu :focus-visible{outline-color:var(--hold-text)}
/* air at every change of colour: the section leaving is past the top fifth before the one arriving reaches 75% */
/* where the colour changes is read from the markup itself, so this air exists from the first layout */
html.canvas [data-tone=ink]+[data-tone=cream],html.canvas [data-tone=ink]+link+[data-tone=cream],html.canvas [data-tone=ink]+[data-tone=verm],html.canvas [data-tone=ink]+link+[data-tone=verm],html.canvas [data-tone=cream]+[data-tone=ink],html.canvas [data-tone=cream]+link+[data-tone=ink],html.canvas [data-tone=cream]+[data-tone=verm],html.canvas [data-tone=cream]+link+[data-tone=verm],html.canvas [data-tone=verm]+[data-tone=ink],html.canvas [data-tone=verm]+link+[data-tone=ink],html.canvas [data-tone=verm]+[data-tone=cream],html.canvas [data-tone=verm]+link+[data-tone=cream]{padding-top:var(--air-in,clamp(120px,38vh,560px))!important}
html.canvas [data-tone=ink]:not(.hero2):not(.phero-film):has(+[data-tone=cream]),html.canvas [data-tone=ink]:not(.hero2):not(.phero-film):has(+link+[data-tone=cream]),html.canvas [data-tone=ink]:not(.hero2):not(.phero-film):has(+[data-tone=verm]),html.canvas [data-tone=ink]:not(.hero2):not(.phero-film):has(+link+[data-tone=verm]),html.canvas [data-tone=cream]:not(.hero2):not(.phero-film):has(+[data-tone=ink]),html.canvas [data-tone=cream]:not(.hero2):not(.phero-film):has(+link+[data-tone=ink]),html.canvas [data-tone=cream]:not(.hero2):not(.phero-film):has(+[data-tone=verm]),html.canvas [data-tone=cream]:not(.hero2):not(.phero-film):has(+link+[data-tone=verm]),html.canvas [data-tone=verm]:not(.hero2):not(.phero-film):has(+[data-tone=ink]),html.canvas [data-tone=verm]:not(.hero2):not(.phero-film):has(+link+[data-tone=ink]),html.canvas [data-tone=verm]:not(.hero2):not(.phero-film):has(+[data-tone=cream]),html.canvas [data-tone=verm]:not(.hero2):not(.phero-film):has(+link+[data-tone=cream]){padding-bottom:var(--air-out,clamp(60px,18vh,280px))!important}
/* the footer carries on in the colour of the last section */
html[data-canvas] .foot[data-tone=cream]{color:var(--ink)}
html[data-canvas] .foot[data-tone=cream] .foot-brand p,html[data-canvas] .foot[data-tone=cream] .foot-cols h2,html[data-canvas] .foot[data-tone=cream] .foot-base{color:var(--text-2)}
html[data-canvas] .foot[data-tone=cream] .foot-logo{color:var(--ink)}
html[data-canvas] .foot[data-tone=cream] .foot-base{border-top-color:rgba(15,23,34,.16)}
html[data-canvas] .foot[data-tone=cream] .foot-cols a:hover{color:var(--hold-text)}
html[data-canvas] .foot[data-tone=cream] :focus-visible{outline-color:var(--hold-text)}
html[data-canvas] .foot[data-tone=verm] .foot-cols a:hover{color:#fff;text-decoration:underline}
html[data-canvas] .foot[data-tone=verm] :focus-visible{outline-color:#fff}
/* without JS: the stream keeps its ink and hides its empty rows, and the nav is a solid ink bar */
.stream{background:var(--ink)}
html:not(.js) .stream-rows{display:none}
html:not(.js) .nav{background:var(--ink);color:var(--cream)}
html:not(.js) .nav .logo-mark{fill:var(--gold)}
html:not(.js) .nav .links{color:rgba(245,242,234,.9)}
html:not(.js) .nav .nav-cta{background:var(--cream);color:var(--ink)}
/* a reveal that has not fired yet never hides what has keyboard focus (keyboard only: a mouse press must not move the
   thing being pressed, or the click lands on something else) */
html.js [data-r]:has(:focus-visible),html.js [data-r]:focus-visible{opacity:1;transform:none;clip-path:none;transition:none}
/* reduced motion: the story's travelling tile stays out of the words */
@media (prefers-reduced-motion:reduce){.story .st-tile,.story .st-label{display:none}}
/* the last cards and drop shadows */
.st-tile,.st-label{box-shadow:0 0 0 1px rgba(15,23,34,.16)!important}
.plain{background:none!important;border-radius:0!important;padding:2px 0 2px 16px!important;border-left:2px solid var(--hold-text);color:var(--ink)}
.phero-film .plain-top{background:none;border-radius:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:2px 0 2px 16px;border-left:2px solid var(--gold)}
.obj-art{background:none!important;border-radius:0!important}
.forge-code{box-shadow:0 0 0 1px rgba(15,23,34,.14)!important;border-radius:4px!important}
.verdict,.verdict.ok,.verdict.bad{background:none!important;border-radius:0!important;padding:4px 0 4px 16px!important;border-left:2px solid currentColor}
.tries button,.codes code,.cls code{box-shadow:0 0 0 1px rgba(15,23,34,.16)}
/* the join form: a field that needs fixing says so beside itself */
.field-err{margin:2px 0 0;font-size:14px;font-weight:650;color:var(--hold-text)}
.consent .field-err{grid-column:1/-1}
#joinsec .field-err{color:#fff;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.msg.at-field{position:absolute!important;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* a hero is all picture to its last pixel, so the section after it gets the whole air itself */
html.cut,html.cut [data-tone]{transition:none!important}
/* round 6: without JS the story's words all show, in one column beside the pinned object */
html:not(.js) .story .step-card{position:relative;top:auto;opacity:1;transform:none;margin-left:0}
/* the story's travelling tile and the source-note popover are flat, never cards */
.st-tile,.st-label{border-radius:4px!important}
.src-q{border-radius:4px;box-shadow:0 0 0 1px rgba(245,242,234,.2)}
.src.shut .src-q{display:none!important}
.src-q a{display:inline-flex;align-items:center;min-height:28px}
/* round 6 security B1: a story card that is not showing takes no clicks; only the act on screen does */
@media (min-width:901px){
  html.js .story .step-card{pointer-events:none}
  html.js .story-stage[data-act=action]~.story-steps [data-act=action] .step-card,html.js .story-stage[data-act=gate]~.story-steps [data-act=gate] .step-card,
  html.js .story-stage[data-act=receipt]~.story-steps [data-act=receipt] .step-card,html.js .story-stage[data-act=cover]~.story-steps [data-act=cover] .step-card{pointer-events:auto}
}
/* ====== round 7 fixes ====== */
/* desktop B1: nothing in a section that has stepped out takes a click, whatever its own rules say */
html[data-canvas] [data-tone].off,html[data-canvas] [data-tone].off *{pointer-events:none!important}
/* desktop B2: without JS the story's pinned word and tile stand aside, so the words of every act read */
html:not(.js) .story .st-words,html:not(.js) .story .st-tile,html:not(.js) .story .st-rail{display:none}
/* desktop B3: a note stays open while the pointer crosses the gap to it */
.src-q::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.src-q.below::after{top:auto;bottom:100%}
/* phone B1: the rule never forces its column wider than a phone */
.rule{max-width:100%;overflow-x:auto;white-space:pre-wrap;overflow-wrap:anywhere}
@media (max-width:700px){.rule-grid{grid-template-columns:minmax(0,1fr)}}
/* phone B2: the hero caption is words on the film, not a filled panel */
.caption{background:none!important;border-radius:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;text-shadow:0 1px 12px rgba(15,23,34,.9)}
/* phone B3: without JS the phone menu button does nothing, so it is not shown and the links stay in the header */
.nav-nojs{display:none}
@media (max-width:900px){html:not(.js) .menu-btn{display:none}html:not(.js) .nav-nojs{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid rgba(245,242,234,.6);border-radius:999px;color:var(--cream);font-weight:600;text-decoration:none}}
/* desktop P3: the company door icons lose their drop shadow */

/* round 8: a reload keeps the exact scroll position; the browser's scroll anchoring would chase whichever element sat
 there in the half-built layout, and the finished layout is the same one the reader left */
html,body{overflow-anchor:none}
/* round 8 phones: the film's Pause sits at the top of the film, so it never fades out mid-screen as the hero leaves */
@media (max-width:700px){
  html.canvas .phero-film .pause{top:calc(var(--nav) + 12px)!important;bottom:auto!important}
}
/* ====== round 10 fixes ====== */
/* claims B1: without JS, nothing that claims to run in the browser is shown */
html:not(.js) .js-only{display:none!important}
/* desktop B1: a light button keeps its words readable on hover (and every button: hover never drops below its own ink) */
.phero-film .btn-ink:hover,.phero-film .btn-ink:focus-visible{background:#fff;color:var(--ink)}
/* phone POLISH: the Gate demo chips are flat */
.tries button{box-shadow:0 0 0 1px rgba(15,23,34,.16)!important}
/* ====== round 11 fixes ====== */
/* the phone menu is a modal: nothing behind it scrolls */
html.menu-open,html.menu-open body{overflow:hidden}
/* a source note stays open for a moment after the pointer leaves, so a diagonal move reaches its link */
.src .src-q{display:block;visibility:hidden;opacity:0;transition:visibility 0s linear .45s,opacity .15s var(--calm) .3s}
.src:hover .src-q,.src:focus-within .src-q,.src.open .src-q{visibility:visible;opacity:1;transition-delay:0s}
/* a form field that takes focus is never under the screen's edge */
.join-form input,.join-form select,.join-form textarea,.consent input{scroll-margin:96px 0 120px}
/* ====== round 12 fixes ====== */
/* source notes: no hover at all; open by tap, click or keyboard, close by tap, Escape or leaving with the keyboard */
.src .src-q,.src:hover .src-q,.src:focus-within .src-q{visibility:visible;opacity:1;transition:none}
.src:not(.open):not(:has(:focus-visible)) .src-q{display:none!important}
html:not(.js) .src:focus-within .src-q{display:block!important}
.src-q::after{content:none!important}
/* the phone menu scrolls inside itself on a short screen, and never scrolls the page behind */
.menu{overflow-y:auto;overscroll-behavior:contain}
/* short screens (phones held sideways): smaller air at a change of colour, so a gap never outgrows the screen */
@media (max-height:520px){html.canvas [data-tone]{--air-in:clamp(60px,26vh,140px);--air-out:clamp(24px,8vh,60px)}}
/* round 13: short landscape screens have no canvas; keep section padding small so no screen is only empty colour */
@media (max-height:520px){html:not(.canvas) main>[data-tone]:not(.hero2):not(.phero-film){padding-top:40px!important;padding-bottom:40px!important}}