@font-face{font-family:"Funnel Display";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/funnel-display-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Funnel Display";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/funnel-display-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Funnel Display";font-style:normal;font-weight:800;font-display:swap;src:url(/fonts/funnel-display-latin-800-normal.woff2) format("woff2")}
@font-face{font-family:"Funnel Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/funnel-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Funnel Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/funnel-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Funnel Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/funnel-sans-latin-600-normal.woff2) format("woff2")}

/* Layout: engineering-paper ground; live GG² particle wordmark beside a left-aligned thesis; products as a ledger of rows, not cards. */
:root{
  --paper:#EDF0EB; --ink:#17201C; --muted:#5B6660; --grid:#DCE1DA; --grid-major:#CDD4CB;
  --accent:#2C3FD6; --live:#1F8A55; --surface:#F6F8F4;
  --c-cards:#BC705C; --c-pdf:#A9812C; --c-cloud:#0068F8; --c-home:#12846E;
  --f-display:"Funnel Display", ui-sans-serif, system-ui, sans-serif;
  --f-body:"Funnel Sans", ui-sans-serif, system-ui, sans-serif;
  --s-1:.875rem; --s0:1rem; --s1:1.25rem; --s2:1.75rem; --s3:2.5rem; --s4:clamp(2.6rem,6vw,4.75rem);
  --wrap:1180px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --paper:#101614; --ink:#E4EAE4; --muted:#93A098; --grid:#18211D; --grid-major:#202B26;
  --accent:#8F9DFF; --live:#4CC98A; --surface:#141C19; --c-cards:#E0937F; --c-pdf:#D2AB58; --c-cloud:#4F94FF; --c-home:#4FD6B8; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#101614; --ink:#E4EAE4; --muted:#93A098; --grid:#18211D; --grid-major:#202B26;
  --accent:#8F9DFF; --live:#4CC98A; --surface:#141C19; --c-cards:#E0937F; --c-pdf:#D2AB58; --c-cloud:#4F94FF; --c-home:#4FD6B8; color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background-color:var(--paper); color:var(--ink);
  background-image:
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:120px 120px,120px 120px,24px 24px,24px 24px;
  font-family:var(--f-body); font-size:var(--s0); line-height:1.55;
  padding-inline:clamp(16px,4vw,48px); padding-block:0;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--wrap); margin-inline:auto}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
h1,h2,h3{font-family:var(--f-display); text-wrap:balance; margin:0; line-height:1.05}

/* top bar */
.top{display:flex; align-items:center; justify-content:space-between; gap:16px; padding-block:22px}
.mark{font-family:var(--f-display); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; text-decoration:none}
.mark sup{color:var(--accent); font-size:.62em; vertical-align:.7em; line-height:0}
.lang{display:flex; gap:2px; background:var(--surface); border:1px solid var(--grid-major); border-radius:999px; padding:3px}
.lang button{font:500 var(--s-1)/1 var(--f-body); color:var(--muted); background:none; border:0; padding:8px 12px; border-radius:999px; cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}

/* hero */
.hero{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:clamp(16px,4vw,56px); align-items:center; padding-block:clamp(24px,6vw,72px) clamp(24px,4vw,48px)}
.hero-copy{min-width:0}
.hero h1{font-size:var(--s4); font-weight:600; letter-spacing:-.035em}
.hero p{color:var(--muted); font-size:var(--s1); max-width:34ch; margin:22px 0 0}
.field-box{position:relative; height:clamp(260px,34vw,420px); min-width:0}
#field{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:pan-y}
.field-note{position:absolute; right:0; bottom:-4px; font-size:.75rem; color:var(--muted)}

/* intent sentence */
.intent{border-block:1px solid var(--grid-major); padding-block:28px; display:grid; gap:16px}
.intent-line{font-family:var(--f-display); font-size:var(--s2); font-weight:400; letter-spacing:-.02em; display:flex; flex-wrap:wrap; align-items:baseline; gap:10px 14px}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{font:500 var(--s0)/1.2 var(--f-body); color:var(--ink); background:var(--surface); border:1px solid var(--grid-major); border-radius:999px; padding:10px 16px; cursor:pointer; transition:background .2s,color .2s,border-color .2s}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent); border-color:var(--accent); color:var(--paper)}
.answer{min-height:1.6em; font-size:var(--s1)}
.answer a{color:var(--accent); font-weight:600; text-underline-offset:4px}

/* products ledger */
.ledger{padding-block:clamp(32px,6vw,72px) 0}
.ledger h2,.built h2{font-size:var(--s3); font-weight:600; letter-spacing:-.03em; margin-bottom:8px}
.row{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr) 180px; gap:clamp(16px,3vw,40px); align-items:center; padding-block:32px; border-bottom:1px solid var(--grid-major); transition:opacity .35s}
.ledger.has-focus .row{opacity:.38}
.ledger.has-focus .row.is-focus{opacity:1}
.row h3{font-size:var(--s2); font-weight:800; letter-spacing:-.025em}
.row{--p:var(--accent)} #p-cards{--p:var(--c-cards)} #p-pdf{--p:var(--c-pdf)} #p-cloud{--p:var(--c-cloud)} #p-home{--p:var(--c-home)}
.row h3 sup{color:var(--p); font-size:.6em; vertical-align:.75em; line-height:0}
.row-copy{min-width:0}
.row-copy p{margin:10px 0 0; max-width:52ch; color:var(--muted)}
dl.meta{display:grid; grid-template-columns:auto 1fr; gap:6px 18px; margin:0; font-size:var(--s-1); min-width:0}
dl.meta dt{color:var(--muted)}
dl.meta dd{margin:0; font-weight:500; overflow-wrap:anywhere}
.status{display:inline-flex; align-items:center; gap:7px}
.status::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--live); box-shadow:0 0 0 3px color-mix(in srgb,var(--live) 22%,transparent)}
.status.pilot::before{background:var(--muted); box-shadow:none}
dl.meta a{color:var(--accent); text-underline-offset:3px}
.demo{width:100%; max-width:180px; height:auto; color:var(--ink); justify-self:end}
.demo .a{stroke:var(--p)} .demo .af{fill:var(--p)}

/* demo motion */
.sig{stroke-dasharray:60; stroke-dashoffset:60; animation:sign 6s infinite}
.sig:nth-of-type(2){animation-delay:.8s} .sig:nth-of-type(3){animation-delay:1.6s} .sig:nth-of-type(4){animation-delay:2.4s}
@keyframes sign{0%{stroke-dashoffset:60}18%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:0;opacity:0}}
.pg{animation:stack 5s infinite ease-in-out}
.pg.p1{--dx:-46px}.pg.p2{--dx:0px;animation-delay:.25s} .pg.p3{--dx:46px;animation-delay:.5s}
@keyframes stack{0%,15%{transform:translateX(var(--dx))}45%,85%{transform:translateX(0)}100%{transform:translateX(var(--dx))}}
.fl{animation:up 4.5s infinite ease-in}
.fl.f2{animation-delay:1.5s} .fl.f3{animation-delay:3s}
@keyframes up{0%{transform:translateY(34px);opacity:0}15%{opacity:1}70%{transform:translateY(-6px);opacity:1}85%,100%{transform:translateY(-6px);opacity:0}}
.bar{transform-box:fill-box; transform-origin:left; animation:grow 6s infinite ease-out}
.bar.b2{animation-delay:.4s} .bar.b3{animation-delay:.8s}
@keyframes grow{0%{transform:scaleX(.1)}35%,85%{transform:scaleX(1)}100%{transform:scaleX(.1)}}

/* built + spec */
.built{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(24px,5vw,72px); padding-block:clamp(48px,8vw,96px)}
.facts{display:grid; gap:22px; margin-top:20px}
.facts h3{font-size:var(--s1); font-weight:600; letter-spacing:-.01em}
.facts p{margin:4px 0 0; color:var(--muted); max-width:56ch}
.spec{background:var(--surface); border:1px solid var(--grid-major); border-radius:6px; padding:24px; align-self:start; min-width:0}
.spec h3{font-size:var(--s1); font-weight:600}
.spec p{margin:6px 0 16px; color:var(--muted); font-size:var(--s-1)}
.spec table{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.spec td{padding:10px 0; border-top:1px solid var(--grid-major)}
.spec td:last-child{text-align:right; font-family:var(--f-display); font-weight:600; font-size:var(--s1)}

footer{border-top:1px solid var(--grid-major); padding-block:28px 40px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; color:var(--muted); font-size:var(--s-1)}

@media (max-width:860px){
  .hero{grid-template-columns:minmax(0,1fr)}
  .field-box{order:-1; height:clamp(200px,52vw,300px)}
  .row{grid-template-columns:minmax(0,1fr) 120px}
  .row dl.meta{grid-column:1 / -1; grid-row:2}
  .demo{grid-row:1; grid-column:2; max-width:120px}
  .built{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important; transition:none!important}
  .sig{stroke-dashoffset:0}
}