/* Zeroform website. Tokens from the design system (project/tokens.json): Ink (dark, default) and Paper (light).
   Vermilion is the origin point: one per view, never a background, never body text on Ink. */
@font-face{font-family:Sora;src:url(/assets/fonts/sora.woff2?v=b91eb456) format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/assets/fonts/instrument-sans.woff2?v=f0ab22f1) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"JetBrains Mono";src:url(/assets/fonts/jetbrains-mono.woff2?v=d35b996a) format("woff2");font-weight:100 800;font-display:swap}

:root{
  --navy:#071C3B;--deep:#04142B;--tide:#0F3B76;--blue:#1E78D8;--sky:#C9E6FF;--foam:#EAF2FB;--coral:#FF6B57;--origin:#FF6B57;
  --display:Sora,"Instrument Sans",system-ui,sans-serif;
  --ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --s1:4px;--s2:8px;--s3:16px;--s4:24px;--s5:40px;--s6:64px;--s7:112px;
  --r1:3px;--r2:6px;--r3:10px;
  --max:1200px;--head:68px;--ease:cubic-bezier(.2,.8,.2,1);--pen:cubic-bezier(.65,0,.35,1);
  /* Dark (Ocean night) */
  --ground:#071C3B;--ground-deep:#04142B;--surface:#0B254B;--raised:#0F3B76;
  --line:rgba(201,230,255,.14);--line-strong:rgba(201,230,255,.36);
  --text:#EAF2FB;--text-muted:#A3BAD6;--origin-text:#FF8B7A;
  --btn:#EAF2FB;--on-btn:#071C3B;--dot:rgba(201,230,255,.3);--photo-filter:none;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --ground:#F3F8FD;--ground-deep:#E3EEF9;--surface:#FFFFFF;--raised:#FFFFFF;
    --line:rgba(7,28,59,.12);--line-strong:rgba(7,28,59,.34);
    --text:#071C3B;--text-muted:#46597A;--origin-text:#C03826;
    --btn:#071C3B;--on-btn:#F3F8FD;--dot:rgba(7,28,59,.24);
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --ground:#F3F8FD;--ground-deep:#E3EEF9;--surface:#FFFFFF;--raised:#FFFFFF;
  --line:rgba(7,28,59,.12);--line-strong:rgba(7,28,59,.34);
  --text:#071C3B;--text-muted:#46597A;--origin-text:#C03826;
  --btn:#071C3B;--on-btn:#F3F8FD;--dot:rgba(7,28,59,.24);
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:88px}
body{margin:0;background:var(--ground);color:var(--text);font:400 17px/27px var(--ui);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .4s,color .4s}
img,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px;text-decoration-color:var(--line-strong)}
a:hover{text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--origin);outline-offset:3px;border-radius:2px}
h1,h2,h3{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.03em;text-wrap:balance}
p{margin:0 0 var(--s3)}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--s3)}
@media (min-width:720px){.wrap{padding:0 var(--s5)}}
.skip{position:absolute;left:-999px;top:0;background:var(--btn);color:var(--on-btn);padding:var(--s2) var(--s3);font-weight:600;z-index:20}
.skip:focus{left:0}
.muted{color:var(--text-muted)}
.mono{font-family:var(--mono);font-size:12px;line-height:18px;letter-spacing:.02em}
/* A section label like a drawing's callout: [02] line */
.label{display:flex;align-items:center;gap:10px;font:500 12px/18px var(--mono);letter-spacing:.04em;color:var(--text-muted);margin:0 0 var(--s4)}
.label::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--origin)}
.label b{font-weight:500;color:var(--text)}
/* Crop marks in the four corners (engineering-drawing frame) */
.ticks{--tk:var(--line-strong);background:
  linear-gradient(var(--tk),var(--tk)) left top/14px 1px,linear-gradient(var(--tk),var(--tk)) left top/1px 14px,
  linear-gradient(var(--tk),var(--tk)) right top/14px 1px,linear-gradient(var(--tk),var(--tk)) right top/1px 14px,
  linear-gradient(var(--tk),var(--tk)) left bottom/14px 1px,linear-gradient(var(--tk),var(--tk)) left bottom/1px 14px,
  linear-gradient(var(--tk),var(--tk)) right bottom/14px 1px,linear-gradient(var(--tk),var(--tk)) right bottom/1px 14px;background-repeat:no-repeat}

/* Header */
.top{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--ground) 82%,transparent);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);border-bottom:1px solid transparent;transition:border-color .3s,background-color .4s}
.top.scrolled{border-bottom-color:var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);height:68px}
.brand{display:block;color:var(--text);padding:6px 0}
.brand svg{height:22px;width:auto}
.nav{display:flex;align-items:center;gap:2px;margin-left:auto}
.nav a{color:var(--text-muted);text-decoration:none;font:500 15px/20px var(--ui);padding:10px 12px;border-radius:var(--r2);position:relative;transition:color .2s}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--text)}
.nav a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:2px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--origin)}
.theme{appearance:none;border:1px solid var(--line);background:transparent;color:var(--text);width:40px;height:40px;border-radius:50%;display:grid;place-items:center;cursor:pointer;flex:none;transition:border-color .2s}
.theme:hover{border-color:var(--line-strong)}
.theme svg{width:18px;height:18px}
.theme .sun{display:none}
:root[data-theme="light"] .theme .sun{display:block}:root[data-theme="light"] .theme .moon{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme]) .theme .sun{display:block}:root:not([data-theme]) .theme .moon{display:none}}
@media (max-width:620px){
  :root{--head:97px}
  .top-in{flex-wrap:wrap;height:auto;padding-top:12px;padding-bottom:4px;row-gap:0}
  .brand svg{height:19px}
  .nav{order:3;width:calc(100% + 24px);margin:0 -12px;justify-content:flex-start}
  .nav a{padding:10px 12px}
}

/* Buttons: bone on ink (ink on paper). The origin point slides in on hover. */
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s4)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r1);font:600 15px/20px var(--ui);text-decoration:none;background:var(--btn);color:var(--on-btn);border:1px solid var(--btn);transition:padding .25s var(--ease)}
.btn::before{content:"";width:0;height:7px;border-radius:50%;background:var(--origin);transition:width .25s var(--ease),margin .25s var(--ease);margin-right:-10px}
.btn:hover::before{width:7px;margin-right:0}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line-strong)}
.link{font:600 15px/20px var(--ui);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.link::after{content:"\2192";transition:transform .25s var(--ease)}
.link:hover::after{transform:translateX(4px)}

/* The hero: the word going from zero to form (the intro, huge), over a field of points that gain weight toward the
   right and swell around the pointer (site/hero.js) */
.hero{position:relative;min-height:clamp(560px,calc(100svh - var(--head)),960px);display:flex;flex-direction:column;justify-content:center;overflow:hidden;isolation:isolate;border-bottom:1px solid var(--line);-webkit-tap-highlight-color:transparent;touch-action:pan-y}
.field{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.hero-in{position:relative;z-index:1;padding-top:var(--s6);padding-bottom:var(--s7)}
.hero-title{margin:0 0 var(--s4);font-size:clamp(64px,15.5vw,236px);letter-spacing:-.03em;line-height:.9;color:var(--text);font-weight:inherit}
.hero-title .zf-intro{display:block;margin-left:-.04em}
.hero-tag{margin:0;font:300 clamp(24px,3.4vw,46px)/1.1 var(--display);letter-spacing:-.03em;opacity:0;animation:zf-fade .8s 2.2s forwards}
.hero-tag b{font-weight:800}
.hero-lead{margin:var(--s4) 0 0;max-width:32em;color:var(--text-muted);font-size:19px;line-height:30px;opacity:0;animation:zf-fade .8s 2.5s forwards}
.hero-line{position:absolute;z-index:2;left:0;right:0;bottom:0;padding-bottom:var(--s4)}
.hero-line .wrap{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--s3);flex-wrap:wrap}
.hero-line p{margin:0;font:500 12px/18px var(--mono);color:var(--text-muted);letter-spacing:.03em}
.hero-hint{opacity:0;animation:zf-fade .6s 3s forwards}
@keyframes zf-fade{from{opacity:0}to{opacity:1}}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:620px){.hero{min-height:clamp(520px,82svh,760px)}.hero-in{padding-bottom:var(--s6)}.hero-hint{display:none}}
@media (prefers-reduced-motion:reduce){.hero-hint,.hero-tag,.hero-lead{animation:none;opacity:1}}

/* Statement under the hero */
.statement{padding-top:var(--s6);padding-bottom:var(--s5)} /* not the padding shorthand: it would zero .wrap's side gutter */
.statement h2{font-size:clamp(40px,7vw,96px);line-height:.95;max-width:12ch;letter-spacing:-.045em;margin:0}
.statement h2 em{font-style:normal;font-weight:200;color:var(--text-muted)}
.statement .cols{display:grid;gap:var(--s4);margin-top:var(--s5)}
.statement .lead{font:400 20px/31px var(--ui);max-width:30em;margin:0}
.statement .facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin:0}
.statement .facts div{padding:var(--s3) var(--s3) 0 0}
.statement .facts dt{font:500 12px/18px var(--mono);color:var(--text-muted)}
.statement .facts dd{margin:4px 0 0;font:600 clamp(24px,3vw,34px)/1.1 var(--display);letter-spacing:-.03em}
@media (min-width:900px){.statement{padding-top:var(--s7);padding-bottom:var(--s6)}.statement .cols{grid-template-columns:1.2fr 1fr;gap:var(--s6);align-items:end}}

/* Sections */
.section{padding:var(--s6) 0}
@media (min-width:900px){.section{padding:var(--s7) 0}}
.section h2,.page h2.big{font-size:clamp(36px,5.8vw,72px);line-height:.98;letter-spacing:-.04em;margin-bottom:var(--s4);max-width:14ch}
.section .intro-p{font-size:19px;line-height:30px;color:var(--text-muted);max-width:34em}

/* How we work: point, line, plane, form. A sticky drawing that the steps scroll past (site/form.js). */
.how{border-top:1px solid var(--line)}
.how-grid{display:grid;position:relative}
.how-stage{position:sticky;top:var(--head);height:min(48svh,420px);z-index:3;margin:0 calc(var(--s3) * -1);background:var(--ground);border-bottom:1px solid var(--line)}
.how-stage canvas{width:100%;height:100%;display:block}
.how-stage .readout{position:absolute;left:var(--s3);bottom:12px;margin:0;font:500 11px/16px var(--mono);color:var(--text-muted);font-variant-numeric:tabular-nums}
.how-stage .readout b{color:var(--text);font-weight:500}
.steps{list-style:none;margin:0;padding:0;position:relative;z-index:1}
.step{min-height:72svh;display:flex;flex-direction:column;justify-content:center;padding:var(--s5) 0;opacity:.35;transition:opacity .5s}
.step.on{opacity:1}
.step .n{font:500 12px/18px var(--mono);color:var(--text-muted);margin:0 0 var(--s3);display:flex;gap:12px;align-items:center}
.step .n i{display:inline-block;width:40px;height:1px;background:var(--line-strong)}
.step h3{font-size:clamp(34px,4.6vw,56px);line-height:1;letter-spacing:-.04em;margin-bottom:var(--s3)}
.step p{max-width:28em;font-size:18px;line-height:29px;color:var(--text-muted)}
.step p strong{color:var(--text);font-weight:600}
@media (min-width:900px){
  .how-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s6)}
  .how-stage{order:2;top:calc(68px + 6svh);height:calc(88svh - 68px);margin:0;border:0;align-self:start;background:none}
  .how-stage .readout{left:0}
  .step{min-height:88svh}
}
@media (prefers-reduced-motion:reduce){.step{opacity:1}}

/* Work */
.work-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:var(--s3);margin-bottom:var(--s5)}
.work-head h2{margin:0}
.product{display:grid;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.product .trailer{border-bottom:1px solid var(--line)}
.product .body{padding:var(--s4);display:flex;flex-direction:column;gap:var(--s3)}
.product .tagrow{display:flex;justify-content:space-between;gap:var(--s3);font:500 12px/18px var(--mono);color:var(--text-muted)}
.product .tagrow b{color:var(--origin-text);font-weight:500}
.product h3{font-size:clamp(34px,4vw,48px);line-height:1;letter-spacing:-.04em}
.product h3 a{text-decoration:none}
.product p{margin:0;color:var(--text-muted);font-size:17px;line-height:27px}
.spec{display:grid;grid-template-columns:auto 1fr;margin:0;border-top:1px solid var(--line)}
.spec dt,.spec dd{padding:10px 0;border-bottom:1px solid var(--line);margin:0;font-size:15px;line-height:22px}
.spec dt{font:500 12px/22px var(--mono);color:var(--text-muted);padding-right:var(--s4)}
.product .actions{margin-top:auto;padding-top:var(--s2)}
@media (min-width:960px){.product{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}.product .trailer{border-bottom:0;border-right:1px solid var(--line);aspect-ratio:auto;height:100%;min-height:440px}.product .body{padding:var(--s5)}}
.next{margin-top:var(--s4);display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center;padding:var(--s4);border-radius:var(--r2);border:1px dashed var(--line-strong)}
.next .dots{width:72px;color:var(--text-muted)}
.next h3{font-size:22px;letter-spacing:-.02em;margin-bottom:4px}
.next p{margin:0;color:var(--text-muted)}
.next .mono{color:var(--text-muted)}

/* The name */
.name-grid{display:grid;gap:var(--s5);align-items:center}
.photo{position:relative;margin:0;border-radius:var(--r2);overflow:hidden;background:var(--raised)}
.photo img{width:100%;height:100%;object-fit:cover;filter:var(--photo-filter)}
.photo figcaption{position:absolute;left:12px;bottom:10px;font:500 11px/16px var(--mono);color:#071C3B;background:rgba(243,248,253,.86);padding:3px 8px;border-radius:2px}
.photo.dark figcaption{color:#EAF2FB;background:rgba(4,20,43,.7)}
.name-grid .photo{aspect-ratio:3/2}
.name-text p{font-size:19px;line-height:31px;max-width:30em}
.name-text p.muted{font-size:17px;line-height:28px}
.equation{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font:500 clamp(18px,2.4vw,26px)/1.2 var(--display);letter-spacing:-.02em;margin:0 0 var(--s4);padding:0;list-style:none}
.equation li{display:flex;align-items:center;gap:14px}
.equation li+li::before{content:"\2192";color:var(--text-muted);font-family:var(--mono);font-size:.8em}
.equation li:first-child span{display:inline-flex;align-items:center;gap:10px}
.equation li:first-child span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--origin)}
@media (min-width:900px){.name-grid{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:var(--s6)}}

.craft{display:grid;gap:var(--s4);margin-top:var(--s6)}
.craft article{display:flex;flex-direction:column;gap:var(--s3)}
.craft .photo{aspect-ratio:4/3}
.craft .photo img[src*=points]{object-position:62% 50%}
.craft h3{font-size:22px;letter-spacing:-.02em}
.craft p{margin:0;color:var(--text-muted);font-size:16px;line-height:26px}
@media (min-width:760px){.craft{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Patterns (made in scripts/site.mjs): stripes from hairline to heavy, dots that grow, atoll contours */
.band{display:block;width:100%;height:56px;color:var(--text);opacity:.9}
.band svg{width:100%;height:100%;display:block}
.atoll{position:absolute;pointer-events:none;color:var(--text);opacity:.14}
.atoll svg{width:100%;height:auto;display:block}

/* Page transition: a hairline that grows into a full-screen wipe (hero.js) */
.wipe{position:fixed;inset:0;z-index:50;pointer-events:none;display:grid;align-items:center}
.wipe i{display:block;height:0;background:var(--text);transform-origin:center;transition:height .45s var(--pen)}
.wipe.line i{height:1px}
.wipe.cover i{height:100vh;height:100lvh}
.wipe.out i{height:0;transition-duration:.5s}
.wiping .wipe i{height:100vh;height:100lvh;transition:none}

/* Footer */
.foot{position:relative;overflow:hidden;border-top:1px solid var(--line);margin-top:var(--s5);padding:var(--s6) 0 var(--s4)}
.foot>.wrap{position:relative;z-index:1}
.foot-atoll{right:-180px;bottom:-240px;width:min(680px,90vw)}
.foot .grid{display:grid;gap:var(--s5) var(--s4);grid-template-columns:1fr 1fr}
.foot .grid>div:first-child{grid-column:1/-1}
@media (min-width:860px){.foot .grid{grid-template-columns:1.6fr 1fr 1fr 1.3fr}.foot .grid>div:first-child{grid-column:auto}}
.foot .mark{color:var(--text);display:block;width:160px}
.foot-tag{margin:var(--s3) 0 0}
.foot h2{font:500 12px/18px var(--mono);color:var(--text-muted);margin:0 0 var(--s3);letter-spacing:.03em}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;line-height:22px}
.foot a{text-decoration:none;overflow-wrap:anywhere}
.foot a:hover{text-decoration:underline}
.foot .legal{color:var(--text-muted);border-top:1px solid var(--line);margin-top:var(--s6);padding-top:var(--s3);display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--s2)}

/* Text pages: press, privacy, terms, support */
.page{padding-bottom:var(--s6)}
.page-head{padding:var(--s6) 0 var(--s5);border-bottom:1px solid var(--line);margin-bottom:var(--s5)}
.page-head h1{font-size:clamp(44px,7.4vw,96px);line-height:.95;letter-spacing:-.045em;margin-bottom:var(--s4);max-width:12ch}
.page-head .lead{font:400 20px/31px var(--ui);color:var(--text-muted);margin:0;max-width:34em}
.prose{max-width:44em}
.prose h2{font-size:clamp(28px,3.6vw,40px);line-height:1.05;letter-spacing:-.035em;margin:var(--s6) 0 var(--s3);scroll-margin-top:96px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:21px;line-height:1.2;letter-spacing:-.02em;margin:var(--s5) 0 var(--s2)}
.prose ul,.prose ol{padding-left:1.2em;margin:0 0 var(--s3)}
.prose li{margin-bottom:var(--s2)}
.prose li::marker{color:var(--text-muted)}
.prose strong{font-weight:600}
.prose a{text-decoration-color:var(--line-strong)}
.updated{font:500 12px/18px var(--mono);color:var(--text-muted);margin-top:var(--s4)}
.toc{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:var(--s4) 0 0}
.toc a{display:inline-block;border:1px solid var(--line);border-radius:var(--r1);padding:8px 12px;font:500 13px/18px var(--mono);text-decoration:none}
.toc a:hover{border-color:var(--line-strong)}
.doc{display:grid;gap:var(--s5)}
@media (min-width:1000px){.doc{grid-template-columns:220px minmax(0,1fr);gap:var(--s6)}.doc .side{position:sticky;top:96px;align-self:start}.doc .side .toc{flex-direction:column;margin:0}.doc .side .toc a{border:0;padding:6px 0;color:var(--text-muted)}.doc .side .toc a:hover{color:var(--text)}}
.table{width:100%;border-collapse:collapse;margin:0 0 var(--s4);font-size:15px;line-height:23px}
.table th,.table td{text-align:left;vertical-align:top;padding:12px 16px 12px 0;border-bottom:1px solid var(--line)}
.table th{font-weight:600}
.table thead th{font:500 12px/16px var(--mono);color:var(--text-muted)}
@media (max-width:640px){
  .table.stack thead{display:none}
  .table.stack tr{display:block;border-bottom:1px solid var(--line);padding:12px 0}
  .table.stack td,.table.stack th{display:block;border:0;padding:2px 0}
  .table.stack td::before{content:attr(data-label);display:block;font:500 11px/16px var(--mono);color:var(--text-muted);margin-top:8px}
}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4)}
.panel>:last-child{margin-bottom:0}
.note{border-left:2px solid var(--origin);padding:2px 0 2px var(--s3);color:var(--text-muted)}

/* Press */
.dl{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fill,minmax(250px,1fr));margin:var(--s4) 0 var(--s5)}
.asset{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--surface);display:flex;flex-direction:column}
.asset .pv{height:160px;overflow:hidden;display:grid;place-items:center;padding:var(--s4)}
.asset .pv img{width:auto;height:auto;max-width:100%;max-height:104px}
.asset .pv.dark{background:#071C3B}.asset .pv.light{background:#EAF2FB}.asset .pv.coral{background:#FF6B57}
.asset .pv.photo{padding:0}.asset .pv.photo img{width:100%;height:100%;object-fit:cover;max-height:none}
.asset .meta{padding:var(--s3);border-top:1px solid var(--line);display:flex;flex-direction:column;gap:var(--s2);flex:1}
.asset h3{font:600 15px/20px var(--ui);margin:0;letter-spacing:0}
.asset .files{display:flex;flex-wrap:wrap;gap:var(--s2);margin-top:auto}
.asset .files a{font:500 12px/18px var(--mono);border:1px solid var(--line);border-radius:var(--r1);padding:5px 10px;text-decoration:none}
.asset .files a:hover{border-color:var(--line-strong)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s3);margin:var(--s3) 0 var(--s4)}
.sw{border:1px solid var(--line);border-radius:var(--r2);overflow:hidden;background:var(--surface)}
.sw i{display:block;height:72px;border-bottom:1px solid var(--line)}
.sw span{display:block;padding:10px 12px;font:600 14px/20px var(--ui)}
.sw code{display:block;font:500 12px/18px var(--mono);color:var(--text-muted)}
.type-specimen{display:grid;gap:var(--s3);margin:var(--s3) 0 var(--s4)}
.type-specimen>div{border-top:1px solid var(--line);padding-top:var(--s3);display:grid;gap:4px}
.type-specimen .mono{color:var(--text-muted)}

/* Support */
.faq details{border-bottom:1px solid var(--line);padding:var(--s3) 0}
.faq summary{cursor:pointer;font:600 18px/27px var(--ui);list-style:none;display:flex;justify-content:space-between;gap:var(--s3)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 22px/27px var(--mono);color:var(--text-muted);flex:none;transition:transform .25s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details>div{padding-top:var(--s2);color:var(--text-muted)}
.faq details>div>:last-child{margin-bottom:0}
.contact{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
@media (min-width:720px){.contact{grid-template-columns:1fr 1fr}}
.contact .panel h3{font-size:22px;margin:0 0 var(--s2);letter-spacing:-.02em}

/* Product page (/digu/) */
.pp-hero{display:grid;gap:var(--s4);padding:var(--s5) 0;align-items:center}
.pp-hero .trailer{border-radius:var(--r2);border:1px solid var(--line)}
.pp-body{display:flex;flex-direction:column;gap:var(--s3)}
.pp-body .lead{font:400 20px/31px var(--ui);color:var(--text-muted);margin:0;max-width:30em}
.pp-logo{display:flex;align-items:center;gap:16px;margin:0}
.pp-logo img{width:64px;height:64px;border-radius:15px}
.pp-logo span{font:800 48px/1 Montserrat,var(--ui);letter-spacing:-.01em}
.pp-logo small{display:block;font:700 13px/1 Montserrat,var(--ui);letter-spacing:.42em;margin-top:6px;color:var(--text-muted)}
.pp-more{display:grid;gap:var(--s5);border-top:1px solid var(--line);padding-top:var(--s5)}
.pp-facts{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4);align-self:start}
.pp-facts h2{font-size:24px;letter-spacing:-.02em;margin:0 0 var(--s3)}
.pp-facts .more{margin:var(--s4) 0 0;font-size:15px;line-height:24px;color:var(--text-muted)}
.shots{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);margin:var(--s5) 0 0}
.shots figure{margin:0}
.shots img{border-radius:var(--r3);border:1px solid var(--line);background:#07140F}
.shots figcaption{font:500 12px/18px var(--mono);color:var(--text-muted);margin-top:8px}
@media (max-width:760px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){
  .pp-hero{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6)}
  .pp-more{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--s6)}
  .pp-facts{position:sticky;top:96px}
}
.prose .pp-h{margin-top:0}

/* 404 */
.lost{position:relative;display:grid;justify-items:center;text-align:center;padding-top:var(--s7);padding-bottom:var(--s6);overflow:hidden}
.lost .big{font:100 clamp(120px,26vw,260px)/.9 var(--display);letter-spacing:-.05em;margin:0 0 var(--s4);color:var(--text)}
.lost .big b{font-weight:800}.lost .big i{display:inline-block;width:.144em;height:.144em;border-radius:50%;background:var(--origin);margin-left:.04em}
.lost h1{font-size:clamp(40px,7vw,72px);line-height:1;letter-spacing:-.04em;margin-bottom:var(--s3)}
.lost p{color:var(--text-muted);max-width:28em}

/* Reveal on scroll (hero.js adds .in). Without JS or with reduced motion, everything just shows. */
.js .rv{opacity:0;transform:translateY(18px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* The studio intro (scripts/intro.mjs), inlined with currentColor so it follows the theme */
.zf-intro{display:inline-block;font-family:Sora,"Instrument Sans",system-ui,sans-serif;letter-spacing:-.012em;line-height:1;white-space:nowrap}
.zfi-l{display:inline-block;font-weight:var(--w);animation:zfi-in .5s calc(var(--i) * 40ms) cubic-bezier(.2,.8,.2,1) both,zfi-weight .55s calc(.65s + var(--i) * 120ms) cubic-bezier(.4,0,.2,1) both}
.zfi-pt{display:inline-block;width:.144em;height:.144em;margin-left:.07em;border-radius:50%;background:var(--zf-point,#FF6B57);animation:zfi-drop .6s 1.75s cubic-bezier(.3,1.5,.5,1) both;transform-origin:50% 100%}
@keyframes zfi-in{from{opacity:0;transform:translateY(.12em)}to{opacity:1;transform:none}}
@keyframes zfi-weight{from{font-weight:100}to{font-weight:var(--w)}}
@keyframes zfi-drop{0%{opacity:0;transform:translateY(-1.1em)}55%{opacity:1;transform:translateY(0) scale(1.18,.8)}75%{transform:translateY(-.08em) scale(.95,1.06)}100%{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.zfi-l,.zfi-pt{animation:none!important}}

/* Product trailers: each product's OWN art, type and colours (not the studio's). A scene = background art, a kicker,
   a headline and its features, sometimes phones or cards. Type is sized to the trailer (container units), so it reads at
   every width. site/trailer.js runs them and draws the chapter bar. Product skins set --tr-font, --tr-accent, --tr-ink. */
@font-face{font-family:Montserrat;src:url(/assets/fonts/montserrat.woff2?v=4541dcb9) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Fraunces Game";src:url(/assets/fonts/fraunces.woff2?v=ac20fd5f) format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
.trailer{--tr-font:var(--ui);--tr-head:var(--tr-font);--tr-accent:#fff;--tr-ink:#fff;--tr-soft:rgba(255,255,255,.78);--tr-shade:0,0,0;
  position:relative;display:block;aspect-ratio:16/10;overflow:hidden;isolation:isolate;container-type:inline-size;color:var(--tr-ink);background:#000}
.tr-f{position:absolute;inset:0;opacity:0;transition:opacity .6s ease;pointer-events:none;isolation:isolate}
.tr-f.on{opacity:1;z-index:1}
.tr-f>.bg,.tr-f>noscript>.bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transform:scale(1.05)}
.tr-f.run>.bg{animation:tr-kb calc(var(--ms,3600ms) + 800ms) linear forwards}
@keyframes tr-kb{from{transform:scale(1.05) translate(var(--fx,1%),var(--fy,0))}to{transform:scale(1.14) translate(var(--tx,-1.5%),var(--ty,-1%))}}
/* legibility: shade the side the copy sits on */
.tr-f::after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(var(--tr-shade),.88) 0%,rgba(var(--tr-shade),.55) 38%,rgba(var(--tr-shade),0) 66%)}
.tr-f.full::after{background:linear-gradient(0deg,rgba(var(--tr-shade),.85) 0%,rgba(var(--tr-shade),.25) 45%,rgba(var(--tr-shade),0) 70%)}
.tr-copy{position:absolute;z-index:3;left:5.5%;top:13%;bottom:10%;width:46%;display:flex;flex-direction:column;justify-content:center;gap:1.6cqw}
.tr-f.full .tr-copy{top:auto;width:80%;justify-content:flex-end}
.tr-kick{margin:0;font:700 max(10px,1.45cqw)/1.2 var(--tr-font);letter-spacing:.18em;text-transform:uppercase;color:var(--tr-accent)}
.tr-head{margin:0;font:800 max(20px,5.2cqw)/1.02 var(--tr-head);letter-spacing:-.02em;color:var(--tr-ink);text-wrap:balance;text-shadow:0 2px 24px rgba(0,0,0,.35)}
.tr-head em{font-style:normal;color:var(--tr-accent)}
.tr-sub{margin:0;font:500 max(12px,1.9cqw)/1.4 var(--tr-font);color:var(--tr-soft);max-width:30em}
.tr-list{list-style:none;margin:.4cqw 0 0;padding:0;display:grid;gap:.9cqw}
.tr-list li{display:flex;align-items:center;gap:1.1cqw;font:600 max(11px,1.85cqw)/1.25 var(--tr-font);color:var(--tr-ink)}
.tr-list li::before{content:"";flex:none;width:.9cqw;height:.9cqw;min-width:6px;min-height:6px;border-radius:50%;background:var(--tr-accent)}
.tr-chips{display:flex;flex-wrap:wrap;gap:.9cqw;margin:.4cqw 0 0;padding:0;list-style:none}
.tr-chips li{font:700 max(10px,1.6cqw)/1 var(--tr-font);padding:.9cqw 1.4cqw;border-radius:99px;border:1px solid color-mix(in srgb,var(--tr-accent) 60%,transparent);color:var(--tr-ink);background:rgba(var(--tr-shade),.35)}
.tr-stat{font-variant-numeric:tabular-nums}
/* staged entrance */
.tr-copy>*,.tr-list li,.tr-chips li{opacity:0;transform:translateY(1.6cqw)}
.tr-f.run .tr-copy>*{animation:tr-in .6s cubic-bezier(.2,.8,.2,1) forwards}
.tr-f.run .tr-copy>:nth-child(1){animation-delay:.15s}.tr-f.run .tr-copy>:nth-child(2){animation-delay:.3s}.tr-f.run .tr-copy>:nth-child(3){animation-delay:.55s}.tr-f.run .tr-copy>:nth-child(4){animation-delay:.7s}
.tr-f.run .tr-list li,.tr-f.run .tr-chips li{animation:tr-in .5s cubic-bezier(.2,.8,.2,1) forwards}
.tr-f.run :is(.tr-list,.tr-chips) li:nth-child(1){animation-delay:.75s}.tr-f.run :is(.tr-list,.tr-chips) li:nth-child(2){animation-delay:1s}.tr-f.run :is(.tr-list,.tr-chips) li:nth-child(3){animation-delay:1.25s}.tr-f.run :is(.tr-list,.tr-chips) li:nth-child(4){animation-delay:1.5s}
@keyframes tr-in{to{opacity:1;transform:none}}
/* media on the right: phones (screens) or cards (art) */
.tr-media{position:absolute;z-index:2;right:4%;top:10%;bottom:6%;width:48%;display:flex;justify-content:center;align-items:center;gap:2.2cqw}
.tr-phone{height:100%;width:auto;aspect-ratio:420/913;object-fit:cover;border-radius:2.4cqw;border:max(1px,.25cqw) solid rgba(255,255,255,.14);box-shadow:0 2cqw 4cqw rgba(0,0,0,.5);opacity:0;transform:translateY(12%) scale(.96)}
.tr-media.two .tr-phone{height:92%}.tr-media.two .tr-phone:nth-child(2){margin-top:8%}
.tr-card{position:relative;margin:0;width:31%;border-radius:1.4cqw;overflow:hidden;box-shadow:0 1.6cqw 3.6cqw rgba(0,0,0,.45);opacity:0;transform:translateY(12%)}
.tr-card img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.tr-card figcaption{position:absolute;left:0;right:0;bottom:0;padding:5% 7% 6%;font:700 max(9px,1.35cqw)/1.2 var(--tr-font);color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.72),rgba(0,0,0,0))}
.tr-media.cards{flex-direction:column;gap:1.4cqw;align-items:flex-end;width:40%;top:13%;bottom:14%}
.tr-media.cards .tr-card{flex:1 1 0;min-height:0;width:auto;max-width:100%;aspect-ratio:4/3}
.tr-media.cards .tr-card img{height:100%;aspect-ratio:auto}
.tr-media.row{left:5.5%;right:5.5%;width:auto;top:auto;bottom:8%;height:40%;gap:1.6cqw;justify-content:space-between}
.tr-media.row .tr-card{width:23.5%}
.tr-media.row .arrow{flex:none;color:var(--tr-accent);font:700 max(14px,2.6cqw)/1 var(--tr-font);opacity:0}
/* media enter with transitions, not keyframes: Chrome can leave images inside opacity keyframes unpainted */
.tr-phone,.tr-card,.tr-media .arrow{transition:opacity .5s ease,transform .7s cubic-bezier(.2,.9,.25,1.1)}
.tr-f.run :is(.tr-phone,.tr-card,.arrow){opacity:1;transform:none}
.tr-f.run :is(.tr-phone,.tr-card,.arrow):nth-child(1){transition-delay:.25s}.tr-f.run :is(.tr-phone,.tr-card,.arrow):nth-child(2){transition-delay:.45s}.tr-f.run :is(.tr-phone,.tr-card,.arrow):nth-child(3){transition-delay:.65s}.tr-f.run :is(.tr-phone,.tr-card,.arrow):nth-child(4){transition-delay:.85s}.tr-f.run :is(.tr-phone,.tr-card,.arrow):nth-child(5){transition-delay:1.05s}.tr-f.run :is(.tr-phone,.tr-card,.arrow):nth-child(6){transition-delay:1.25s}.tr-f.run :is(.tr-phone,.tr-card,.arrow):nth-child(7){transition-delay:1.45s}
.tr-f.cardsrow .tr-copy{top:14%;bottom:auto}
/* end card */
.tr-end .tr-copy{width:50%}
.tr-logo{display:flex;align-items:center;gap:1.6cqw;margin:0}
/* chapter bar + pause */
.tr-bar{position:absolute;z-index:4;left:5.5%;right:5.5%;top:5%;display:flex;gap:.8cqw}
.tr-seg{flex:1;height:max(14px,2cqw);padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.tr-seg i{display:block;width:100%;height:max(2px,.35cqw);border-radius:2px;background:rgba(255,255,255,.28);overflow:hidden;position:relative}
.tr-seg i::after{content:"";position:absolute;inset:0;background:var(--tr-ink);transform-origin:left;transform:scaleX(0)}
.tr-seg.done i::after{transform:none}
.tr-seg.now.run i::after{animation:tr-fill var(--ms,3600ms) linear forwards}
.tr-seg:focus-visible{outline:2px solid var(--tr-accent);outline-offset:2px}
@keyframes tr-fill{to{transform:none}}
.tr-pause{position:absolute;z-index:5;right:12px;bottom:12px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.35);background:rgba(var(--tr-shade),.55);color:#fff;cursor:pointer;display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.tr-pause::before{content:"";width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor;box-sizing:border-box}
.tr-pause[aria-pressed="true"]::before{width:0;height:0;border-style:solid;border-width:7px 0 7px 11px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.trailer.paused *,.trailer.paused *::after{animation-play-state:paused!important}
.trailer.still .tr-pause,.tr-pause[hidden]{display:none}
.trailer.still *{animation:none!important;transition:none!important}
.trailer.still :is(.tr-copy>*,.tr-list li,.tr-chips li,.tr-phone,.tr-card,.arrow){opacity:1;transform:none}
.tr-f.on:not(.run) :is(.tr-copy>*,.tr-list li,.tr-chips li,.tr-phone,.tr-card,.arrow){opacity:1;transform:none} /* the end scene before JS (or without it) */
.trailer.still .tr-seg i::after{transform:none}
/* a scene chosen while paused: everything at its end state, no entrance */
.tr-f.settled :is(.tr-copy>*,.tr-list li,.tr-chips li,.tr-phone,.tr-card,.arrow){opacity:1;transform:none;animation:none;transition:none}
.tr-f.settled>.bg{animation:none}
/* phones: the side media drops away and the copy takes the width */
@container (max-width:520px){
  .tr-copy{width:64%;gap:2.2cqw}.tr-list{gap:1.6cqw}
  .tr-media{width:34%;right:3%}
  .tr-media.two .tr-phone:nth-child(2){display:none}
  .tr-media.cards{display:none}
  .tr-media.row{height:34%}.tr-media.row .arrow{display:none}.tr-media.row .tr-card{width:31%}.tr-media.row .tr-card:nth-of-type(4){display:none}
  .tr-f::after{background:linear-gradient(90deg,rgba(var(--tr-shade),.9) 0%,rgba(var(--tr-shade),.7) 55%,rgba(var(--tr-shade),.2) 100%)}
  .tr-chips li:nth-child(n+4){display:none}
}
@media (prefers-reduced-motion:reduce){.tr-f{transition:none}}

/* DIGU: green room, lime light, Montserrat (DIGU's own) */
.digu{--tr-font:Montserrat,var(--ui);--tr-accent:#D7FF43;--tr-ink:#F7F5E8;--tr-soft:#C9D8D0;--tr-shade:4,14,10;background:#07140F}
.digu .room{position:absolute;inset:0;background:radial-gradient(90% 90% at 78% 30%,#174433 0%,#0B2219 45%,#07140F 75%)}
.digu .tr-logo img{width:max(36px,9cqw);height:auto;border-radius:22%}
.digu .tr-logo span{font:800 max(30px,8.4cqw)/1 Montserrat,sans-serif;letter-spacing:-.01em}
.digu .tr-logo small{display:block;font-size:.22em;font-weight:700;letter-spacing:.44em;color:#D7FF43;margin-top:.45em}
/* The Traveller: Fraunces with the lagoon italic, warm sand (the game's own) */
.trav{--tr-font:var(--ui);--tr-head:"Fraunces Game",Georgia,serif;--tr-accent:#8FF0E2;--tr-ink:#FFFAF0;--tr-soft:#E3CFA6;--tr-shade:4,22,36;background:#06192B}
.trav .tr-head{font-weight:800;letter-spacing:-.03em}
.trav .tr-head em{font-style:italic;font-weight:400;color:#8FF0E2}
.trav .tr-title{margin:0;font:800 max(34px,9cqw)/.92 "Fraunces Game",Georgia,serif;letter-spacing:-.035em;color:#FFFAF0;text-shadow:0 6px 40px rgba(0,0,0,.45)}
.trav .tr-title em{font-style:italic;font-weight:400;color:#8FF0E2}

/* A product's own logo, one file per theme */
.pp-gamelogo{margin:0}.pp-gamelogo img{height:clamp(56px,7vw,80px);width:auto;max-width:100%}
.for-light{display:none}
:root[data-theme="light"] .for-dark{display:none}:root[data-theme="light"] .for-light{display:block}
@media (prefers-color-scheme:light){:root:not([data-theme]) .for-dark{display:none}:root:not([data-theme]) .for-light{display:block}}