/* Erase Me landing in the grail-app.com design language, 2026-11-07.
   Structure, type scale, motion and story follow the measured study in docs/design-study/grail.
   Only colour, objects and story change. Inky black, ashen gray, stark white, faded denim.
   Original code. No reference code, fonts, images or copy. */

@font-face {
  font-family:Cormorant;
  src:url('/fonts/cormorant-garamond-300-latin.woff2') format('woff2');
  font-weight:300;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family:Cormorant;
  src:url('/fonts/cormorant-garamond-300-latin-ext.woff2') format('woff2');
  font-weight:300;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family:GeistFx;
  src:url('/fonts/geist.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap;
}

:root {
  /* the four erasure colours */
  --ink:#0e0f11;
  --graphite:#1c1d20;
  --ash:#bcbbb6;
  --ash-light:#e6e5e1;
  --ash-deep:#4c4b47;
  --paper:#fbfbfa;
  --white:#fbfbfa;
  --denim:#8ea6c2;
  --denim-ink:#3f5a7a;
  /* roles kept from the workspace, re-pointed */
  --accent:var(--ash);
  --muted:#55554f;
  --line:var(--ink);
  --good:#2e5a44;
  --good-bg:#dfe8e2;
  --warn:#6b4a1c;
  --warn-bg:#efe6d6;
  --bad:#8a251b;
  --bad-bg:#f6e3de;
  --chrome:var(--ash);
  --window:#f3f2ef;
  --panel:var(--ash-light);
  --sans:GeistFx,ui-sans-serif,system-ui,sans-serif;
  --mono:Mono,ui-monospace,monospace;
  --term:Mono,ui-monospace,monospace;
  --display:Cormorant,'Times New Roman',serif;
  /* main curve, edit curve, UI and pop curves */
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-edit:cubic-bezier(.65,.05,.36,1);
  --ease-ui:cubic-bezier(.4,0,.2,1);
  --ease-pop:cubic-bezier(.34,1.56,.64,1);
  --side:40px;
  --header:72px;
  --smudge:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='640'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .012' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .05 0 0 0 0 .05 0 0 0 0 .06 0 0 0 -1.6 1.05'/%3E%3C/filter%3E%3Crect width='640' height='640' filter='url(%23s)' opacity='.34'/%3E%3C/svg%3E");
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
  --blob:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 400'%3E%3Cfilter id='r' x='-25%25' y='-25%25' width='150%25' height='150%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.028' numOctaves='3' seed='3'/%3E%3CfeDisplacementMap in='SourceGraphic' scale='74' xChannelSelector='R' yChannelSelector='G'/%3E%3C/filter%3E%3Ccircle cx='200' cy='200' r='138' filter='url(%23r)'/%3E%3C/svg%3E");
  --cloud:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1100' height='1100' viewBox='0 0 1100 1100' preserveAspectRatio='none'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0026 .0042' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .984 0 0 0 0 .984 0 0 0 0 .98 0 0 0 2.6 -1.05'/%3E%3C/filter%3E%3Crect width='1100' height='1100' filter='url(%23c)' opacity='.34'/%3E%3C/svg%3E");
  --smoke:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200' viewBox='0 0 1200 1200' preserveAspectRatio='none'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0022 .0034' numOctaves='4' seed='5' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .74 0 0 0 0 .73 0 0 0 0 .71 0 0 0 2.2 -.95'/%3E%3C/filter%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.003 .0026' numOctaves='3' seed='21' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .03 0 0 0 0 .03 0 0 0 0 .04 0 0 0 2.4 -.9'/%3E%3C/filter%3E%3Crect width='1200' height='1200' filter='url(%23a)' opacity='.1'/%3E%3Crect width='1200' height='1200' filter='url(%23b)' opacity='.6'/%3E%3C/svg%3E");
}

body {
  font:400 17px/1.45 var(--sans);
  letter-spacing:.005em;
  padding-top:var(--header);
}
body:has(#welcome-view:not([hidden])) { padding-top:0; background:var(--ink); }
::selection { background:var(--denim); color:var(--ink); }
/* One focus ring for every ground: a light ring with a dark halo. */
:focus-visible { outline:2px solid rgba(251,251,250,.95); outline-offset:2px; box-shadow:0 0 0 2px var(--ink); }

/* Workspace captions. */
.mode-badge,.quiet-label,.eyebrow,.form-kicker,.footer-note,.fact-label,label:not(.checkbox-label) {
  font-family:var(--mono);
  font-weight:500;
  font-size:12px;
  line-height:1.55;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* Header. On the workspace it stays fixed and light. On the landing it sits on the black stage and scrolls away. */
.site-header {
  height:var(--header);
  background:rgba(251,251,250,.9);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  color:var(--ink);
  border:0;
}
.site-header .header-inner { height:var(--header); width:100%; padding:0 var(--side); border:0; }
.brand { font:700 21px/1 var(--sans); letter-spacing:-.03em; gap:8px; text-transform:none; }
.brand-mark { width:20px; height:20px; stroke-width:2.6; }
.header-caption { font:400 15px/20.25px var(--sans); letter-spacing:0; opacity:.72; }
.mode-badge { border-radius:999px; padding:3px 10px; border:1px solid currentColor; font:500 12px/1.4 system-ui,sans-serif; letter-spacing:0; text-transform:none; }
.text-button { text-decoration:none; font:500 15px/1 var(--sans); }
.fx-header-cta { display:none; }

body:has(#welcome-view:not([hidden])) .site-header {
  position:absolute;
  top:var(--banner-h,0px);
  height:104px;
  background:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  color:var(--paper);
}
body:has(#welcome-view:not([hidden])) .site-header .header-inner {
  height:104px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 430px minmax(0,1fr);
  gap:24px;
  align-items:start;
  padding:30px 40px 0;
}
body:has(#welcome-view:not([hidden])) .brand { color:var(--denim); margin-top:10px; justify-self:start; }
body:has(#welcome-view:not([hidden])) .header-caption { position:static; transform:none; white-space:normal; width:auto; text-align:center; color:var(--paper); }
body:has(#welcome-view:not([hidden])) .header-actions { justify-self:end; gap:20px; }
body:has(#welcome-view:not([hidden])) .mode-badge { color:rgba(251,251,250,.72); border-color:rgba(251,251,250,.24); }
body:has(#welcome-view:not([hidden])):has(#demo-banner:not([hidden])) .mode-badge { display:none; }
body:has(#welcome-view:not([hidden])) .text-button { color:rgba(251,251,250,.78); min-height:44px; }
body:has(#welcome-view:not([hidden])) .text-button:hover { color:var(--paper); }
body:has(#welcome-view:not([hidden])) .fx-header-cta {
  display:inline-flex;
  align-items:center;
  height:44px;
  padding:12px 22px;
  border-radius:999px;
  background:var(--denim);
  color:var(--ink);
  font:600 15px/1 var(--sans);
  text-decoration:none;
  transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.fx-header-cta:hover { transform:translateY(-2px) scale(1.03); background:#a9bcd2; box-shadow:0 8px 22px rgba(142,166,194,.28); }
.fx-header-cta:active { transform:scale(.99); }
body:has(#welcome-view:not([hidden])) #demo-banner {
  position:relative;
  z-index:31;
  justify-content:center;
  gap:10px;
  padding:8px 40px;
  border:0;
  background:var(--ink);
  color:rgba(251,251,250,.72);
  font:500 13px/1.4 system-ui,sans-serif;
  letter-spacing:0;
}
body:has(#welcome-view:not([hidden])) #demo-banner .topbar-tag { border:1px solid rgba(142,166,194,.6); color:var(--denim); border-radius:99px; padding:1px 9px; }

/* Buttons. Plain pills, Grail's header button behaviour. */
.button,.button-primary,.button-danger,.button-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  padding:0 24px;
  border:1px solid transparent;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  font:600 15px/1.1 var(--sans);
  letter-spacing:0;
  text-transform:none;
  text-decoration:none;
  transition:transform .15s ease,background-color .15s ease,box-shadow .15s ease;
}
.button::before,.button::after { content:none; }
.button:hover { text-decoration:none; transform:translateY(-2px) scale(1.03); }
.button:active { transform:scale(.99); }
.button-primary { background:var(--denim-ink); color:var(--paper); }
.button-primary:hover { background:#4b6888; }
.button-danger { background:var(--bad); color:var(--paper); }
.button-danger:hover { background:#9b2e22; }
.button-secondary { background:transparent; color:var(--ink); border-color:rgba(14,15,17,.4); }
.button-ghost { background:transparent; color:inherit; border-color:currentColor; }
.button-light { background:var(--paper); color:var(--ink); }
.button-small { min-height:40px; padding:0 18px; font-size:13px; }
.button-full { width:100%; }

/* ---------- Landing ---------- */
.welcome-view.g { display:block; padding:0; overflow-x:clip; background:var(--ink); color:var(--paper); }
.g-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.g .g-label { position:absolute; z-index:4; top:0; left:0; right:0; display:flex; justify-content:space-between; gap:20px; margin:0; padding:25px 32px 0; font:500 14px/18.34px system-ui,-apple-system,sans-serif; letter-spacing:0; pointer-events:none; }
.g-display { margin:0; font:300 92px/.88 var(--display); letter-spacing:-.01em; text-transform:uppercase; }
.g-display .g-l { display:block; }
.g-body { margin:0; font:400 16px/19.84px var(--sans); color:#b5b4af; }
.g-lead { margin:0; font:700 18px/20.16px var(--sans); letter-spacing:-.01em; }
.g-mark { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:butt; }

/* Lines rise .5em and fade in as they enter. */
.g-js [data-rise] .g-l,.g-js [data-rise]:not(:has(.g-l)) { transform:translateY(.5em); opacity:0; transition:transform .9s var(--ease),opacity .9s var(--ease); transition-delay:calc(var(--li,0) * 70ms); }
.g-js [data-rise]:not(:has(.g-l)) { transform:translateY(24px); }
.g-js [data-rise].is-in .g-l,.g-js [data-rise].is-in:not(:has(.g-l)) { transform:none; opacity:1; }

/* The pattern set. Flat, bold, drawn in the four colours. */
.pat-lines { --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 170'%3E%3Crect width='120' height='170' fill='%230e0f11'/%3E%3Cg fill='%238ea6c2'%3E%3Crect x='16' y='26' width='88' height='17'/%3E%3Crect x='16' y='57' width='60' height='17'/%3E%3Crect x='16' y='88' width='32' height='17'/%3E%3C/g%3E%3Crect y='124' width='120' height='46' fill='%234c4b47'/%3E%3Cg fill='%23fbfbfa'%3E%3Ccircle cx='18' cy='147' r='7'/%3E%3Ccircle cx='46' cy='147' r='7'/%3E%3Ccircle cx='74' cy='147' r='7'/%3E%3Ccircle cx='102' cy='147' r='7'/%3E%3C/g%3E%3C/svg%3E"); }
.pat-check { --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 170'%3E%3Cdefs%3E%3Cpattern id='p' width='40' height='40' patternUnits='userSpaceOnUse'%3E%3Cpath d='M0 0h20v10a10 10 0 0 1-20 0zM20 20h20v10a10 10 0 0 1-20 0z' fill='%233f5a7a'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='120' height='170' fill='%23e6e5e1'/%3E%3Crect width='120' height='170' fill='url(%23p)'/%3E%3C/svg%3E"); }
.pat-wave { --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 170'%3E%3Crect width='120' height='170' fill='%233f5a7a'/%3E%3Cg fill='none' stroke='%23fbfbfa' stroke-width='9'%3E%3Cpath d='M-10 34q15-16 30 0t30 0t30 0t30 0t30 0'/%3E%3Cpath d='M-10 70q15-16 30 0t30 0t30 0t30 0t30 0'/%3E%3Cpath d='M-10 106q15-16 30 0t30 0t30 0t30 0t30 0'/%3E%3Cpath d='M-10 142q15-16 30 0t30 0t30 0t30 0t30 0'/%3E%3C/g%3E%3C/svg%3E"); }
.pat-stamp { --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 170'%3E%3Crect width='120' height='170' fill='%23bcbbb6'/%3E%3Ccircle cx='60' cy='62' r='36' fill='%230e0f11'/%3E%3Ccircle cx='60' cy='62' r='19' fill='none' stroke='%23bcbbb6' stroke-width='7'/%3E%3Crect y='120' width='120' height='50' fill='%230e0f11'/%3E%3Cg fill='%238ea6c2'%3E%3Crect x='8' y='135' width='20' height='20'/%3E%3Crect x='38' y='135' width='20' height='20'/%3E%3Crect x='68' y='135' width='20' height='20'/%3E%3Crect x='98' y='135' width='20' height='20'/%3E%3C/g%3E%3C/svg%3E"); }
.pat-zig { --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 170'%3E%3Crect width='120' height='170' fill='%238ea6c2'/%3E%3Cg fill='none' stroke='%230e0f11' stroke-width='9'%3E%3Cpath d='M-5 30l20-16 20 16 20-16 20 16 20-16 20 16 20-16'/%3E%3Cpath d='M-5 64l20-16 20 16 20-16 20 16 20-16 20 16 20-16'/%3E%3Cpath d='M-5 98l20-16 20 16 20-16 20 16 20-16 20 16 20-16'/%3E%3Cpath d='M-5 132l20-16 20 16 20-16 20 16 20-16 20 16 20-16'/%3E%3Cpath d='M-5 166l20-16 20 16 20-16 20 16 20-16 20 16 20-16'/%3E%3C/g%3E%3C/svg%3E"); }
.pat-key { --pat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 170'%3E%3Cdefs%3E%3Cpattern id='c' width='30' height='30' patternUnits='userSpaceOnUse'%3E%3Crect width='15' height='15' fill='%23fbfbfa'/%3E%3Crect x='15' y='15' width='15' height='15' fill='%23fbfbfa'/%3E%3C/pattern%3E%3C/defs%3E%3Crect width='120' height='170' fill='%230e0f11'/%3E%3Cpath d='M60 14l42 50-42 50-42-50z' fill='%238ea6c2'/%3E%3Cpath d='M60 44l17 20-17 20-17-20z' fill='%230e0f11'/%3E%3Crect x='55' y='59' width='10' height='10' fill='%23fbfbfa'/%3E%3Crect y='126' width='120' height='44' fill='url(%23c)'/%3E%3C/svg%3E"); }
.g-crest { display:block; width:46px; height:52px; background:var(--pat) center/cover; clip-path:polygon(0 0,100% 0,100% 66%,50% 100%,0 66%); }

/* Loader. A framed card on ash, its face turns black and zooms into the hero. 1.5 s in all, CSS timed. */
.g-loader { position:fixed; inset:0; z-index:80; display:grid; place-items:center; background:var(--ash-light); perspective:900px; pointer-events:none; animation:g-loader-out .15s linear 1.35s forwards; }
.g-loader-card { width:86px; height:120px; padding:6px; border-radius:11px; background:var(--ash-deep); transform-style:preserve-3d; animation:g-card-in .8s var(--ease) both,g-card-zoom .55s cubic-bezier(.7,0,.2,1) .8s forwards; }
.g-loader-face { display:grid; align-content:center; justify-items:center; gap:10px; height:100%; border-radius:6px; background:var(--paper); color:var(--ink); animation:g-face-ink .25s ease .82s forwards; }
.g-loader-face .g-mark { width:24px; height:24px; }
.g-loader-word { font:300 11px/1 var(--display); text-transform:uppercase; letter-spacing:.02em; text-align:center; }
.g-loader-word b { font-weight:300; }
@keyframes g-card-in { from { opacity:0; transform:rotateY(-28deg) rotateX(10deg) scale(.86); } 55% { opacity:1; transform:rotateY(12deg) rotateX(-4deg) scale(1); } to { transform:rotateY(-4deg) rotateX(2deg); } }
@keyframes g-card-zoom { from { transform:rotateY(-4deg) rotateX(2deg) rotateZ(0); } 40% { transform:rotateY(8deg) rotateX(14deg) rotateZ(-5deg) scale(2.4); } to { transform:rotateY(0) rotateX(0) rotateZ(0) scale(var(--zs,26)); } }
@keyframes g-face-ink { to { background:var(--ink); color:transparent; } }
@keyframes g-loader-out { to { opacity:0; visibility:hidden; } }

/* ---- The story. One black stage pinned for four screens. */
.g-story { position:relative; height:500svh; background:var(--ink); }
.g-stage { position:sticky; top:0; height:100svh; min-height:600px; overflow:hidden; background:var(--ink); color:var(--paper); }
.g-scrim { position:absolute; inset:0 0 auto; z-index:2; height:380px; background:linear-gradient(rgba(14,15,17,.92),rgba(14,15,17,.4) 38%,rgba(14,15,17,0)); pointer-events:none; }
.g-hero-line {
  position:absolute;
  z-index:3;
  left:0;
  right:0;
  top:128px;
  margin:0;
  padding:0 40px;
  font:300 var(--fit,9.6vw)/.88 var(--display);
  letter-spacing:-.01em;
  text-transform:uppercase;
  white-space:nowrap;
  pointer-events:none;
  transform-origin:50% 0;
  transform:translateY(var(--hy,0px)) scale(var(--hs,1));
  opacity:var(--ho,1);
}
.g-hero-line .g-line { display:inline-block; }
.g-ch { display:inline-block; }
.g-js .g-hero-line .g-ch { opacity:0; transform:translateY(.62em); }
.g-ready .g-ch { animation:g-rise .6s var(--ease) both; animation-delay:calc(var(--i) * 48ms + var(--rise-at,1250ms)); }
@keyframes g-rise { from { opacity:0; transform:translateY(.62em); } to { opacity:1; transform:none; } }

/* The floating card field, CSS 3D. Cards sit on a cylinder around the camera, gather into a fan, then into one. */
.g-field { position:absolute; inset:0; z-index:1; perspective:1000px; perspective-origin:50% 42%; }
.g-rig { position:absolute; left:50%; top:62%; width:0; height:0; transform-style:preserve-3d; transform:scale(var(--k,1)) translateZ(250px) rotateX(calc(var(--py,0) * -3deg)) rotateY(calc(var(--px,0) * 6deg)); }
.g-card {
  --A:calc((var(--a) + (var(--fa) - var(--a)) * var(--g,0)) * (1 - var(--c,0)));
  --Y:calc((var(--y) + (var(--fy) - var(--y)) * var(--g,0)) * (1 - var(--c,0)));
  --Z:calc(var(--dz) + (var(--fdz) - var(--dz)) * var(--g,0));
  --RZ:calc((var(--rz) + (var(--frz) - var(--rz)) * var(--g,0)) * (1 - var(--c,0)));
  position:absolute;
  left:0;
  top:0;
  width:var(--w);
  height:calc(var(--w) * 1.43);
  margin:calc(var(--w) * -.715) 0 0 calc(var(--w) * -.5);
  transform-style:preserve-3d;
  transform:rotateY(var(--A)) translateZ(calc(var(--Z) - 780px)) translateY(var(--Y)) rotateZ(var(--RZ));
  opacity:calc((1 - var(--g,0) * .9 * var(--fade,0)) * (1 - var(--c,0)));
}
.g-face { position:absolute; inset:0; overflow:hidden; border-radius:var(--rad,10px); backface-visibility:hidden; filter:brightness(var(--lit,1)); animation:g-bob var(--dur,7s) ease-in-out var(--delay,0s) infinite alternate; }
.g-face.is-tile { background:var(--pat) center/cover; }
@keyframes g-bob { from { transform:translateY(-9px) rotateX(4deg) rotateY(-4deg); } to { transform:translateY(9px) rotateX(-3deg) rotateY(4deg); } }
.g-face.is-quest { display:flex; flex-direction:column; padding:24px 20px 14px; background:linear-gradient(#fbfbfa 52%,#e6e5e1); color:var(--ink); }
.g-face.is-quest .g-crest { width:44px; height:50px; }
.g-card-group { margin:14px 0 6px; font:400 13px/1.2 var(--sans); color:#55554f; }
.g-card-line { margin:0; font:700 26px/1.04 var(--sans); letter-spacing:-.03em; }
.g-card-small { margin:14px 0 0; font:400 13.5px/1.3 var(--sans); color:#3a3a38; }
.g-chips { display:flex; flex-wrap:wrap; gap:6px; margin:auto 0 0; }
.g-chips span { display:inline-flex; align-items:center; height:28px; padding:0 11px; border-radius:99px; background:#fff; border:1px solid #d6d5d0; font:600 12px/1 var(--sans); color:#2a2a28; }
.g-card-foot { margin:10px 0 0; padding-top:8px; border-top:1px solid #d6d5d0; font:400 11px/1.2 var(--sans); color:#5f5e5a; text-align:center; }

/* Chapter 01 scrolls through the pinned stage as if it were in the page flow. */
.g-problem { position:absolute; inset:0; z-index:4; transform:translateY(var(--pt,100svh)); }
.g-problem-head { position:absolute; left:0; right:0; top:21.3%; font-size:min(6.4vw,92px); }
.g-problem-head .g-l { width:max-content; }
.g-problem-head .g-l:nth-child(1),.g-problem-head .g-l:nth-child(4) { margin-left:42.4%; }
.g-problem-head .g-l:nth-child(2) { margin-left:25%; }
.g-problem-head .g-l:nth-child(3) { margin-left:17%; }
.g-problem-body { position:absolute; left:42.4%; top:66.6%; width:410px; }

/* Chapter 02. The ash ground burns in from the edges with a ragged mask. */
.g-burn {
  position:absolute;
  inset:0;
  z-index:5;
  background:var(--ash);
  color:var(--ink);
  visibility:var(--bv,hidden);
  -webkit-mask:linear-gradient(#000 0 0),var(--blob) center/var(--bs,360%) no-repeat;
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0),var(--blob) center/var(--bs,360%) no-repeat;
  mask-composite:exclude;
}
.g-cloud { position:absolute; inset:0; background:var(--cloud) 0 0/100% 100% no-repeat; pointer-events:none; }
.g-burn-head { position:absolute; z-index:2; left:0; right:0; top:40px; text-align:center; font-size:max(52px,min(9svh,92px)); color:var(--ash-deep); }
.g-clock { position:absolute; z-index:0; left:0; right:0; top:50%; margin:0; transform:translateY(-50%); text-align:center; white-space:nowrap; font:300 21vw/1 var(--display); letter-spacing:-.01em; text-transform:uppercase; color:rgba(76,75,71,.14); pointer-events:none; }
.g-phone { position:absolute; z-index:1; left:50%; top:50.5%; width:220px; height:452px; margin:-226px 0 0 -110px; padding:8px; border-radius:42px; background:linear-gradient(140deg,#efeeea,#a9a8a3 34%,#e6e5e1 52%,#8f8e89); box-shadow:0 0 0 1px rgba(14,15,17,.28),0 34px 70px rgba(14,15,17,.2); opacity:var(--ph,1); filter:blur(calc((1 - var(--ph,1)) * 14px)); }
.g-phone-screen { position:relative; height:100%; overflow:hidden; border-radius:35px; background:var(--ash-light); color:var(--ink); }
.g-phone-screen::before { content:''; position:absolute; left:50%; top:10px; width:68px; height:20px; margin-left:-34px; border-radius:20px; background:var(--ink); }
.g-phone-status { display:flex; justify-content:space-between; align-items:center; margin:0; padding:13px 22px 0 26px; font:600 11px/1 system-ui,sans-serif; }
.g-phone-status i { width:22px; height:9px; border-radius:3px; background:var(--ink); }
.g-phone-brand { display:flex; justify-content:center; align-items:center; gap:5px; margin:20px 0 0; font:700 14px/1 var(--sans); letter-spacing:-.03em; }
.g-phone-brand .g-mark { width:13px; height:13px; }
.g-phone-bar { position:absolute; left:14px; right:14px; bottom:62px; display:flex; justify-content:center; gap:8px; margin:0; }
.g-phone-bar span { display:inline-flex; align-items:center; height:26px; padding:0 12px; border-radius:99px; background:var(--paper); border:1px solid rgba(14,15,17,.14); font:600 11px/1 system-ui,sans-serif; }
.g-burn-foot { position:absolute; z-index:2; left:40px; right:40px; bottom:86px; display:grid; grid-template-columns:minmax(0,430px) minmax(0,1fr) minmax(0,520px); }
.g-burn-foot .g-lead { grid-column:1; color:var(--ink); }
.g-burn-foot .g-body { grid-column:3; color:var(--ink); }
.g-rule { position:absolute; left:0; right:0; top:-34px; height:1px; background:rgba(14,15,17,.3); transform-origin:0 50%; transform:scaleX(var(--rule,1)); }

/* The story object. One listing card. It holds, gets erased, folds in half and lands in the phone. */
.g-object { position:absolute; z-index:6; left:50%; top:50.5%; width:200px; height:286px; margin:-143px 0 0 -100px; perspective:1100px; transform:translateY(var(--oy,120svh)) scale(var(--os,1)); }
.g-slip { position:relative; width:100%; height:100%; transform-style:preserve-3d; }
.g-half { position:absolute; left:0; right:0; height:50%; color:var(--ink); }
.g-half-top,.g-half-front,.g-half-back { overflow:hidden; }
.g-half-top { top:0; padding:12px 14px 0; border-radius:14px 14px 0 0; background:#fbfbfa; }
.g-half-bottom { top:50%; transform-origin:50% 0; transform-style:preserve-3d; transform:translateZ(1px) rotateX(calc(var(--fold,0) * 180deg)); }
.g-half-front,.g-half-back { position:absolute; inset:0; backface-visibility:hidden; }
.g-half-front { display:flex; flex-direction:column; padding:2px 14px 9px; border-radius:0 0 14px 14px; background:linear-gradient(#fbfbfa,#e6e5e1); filter:brightness(calc(1 - var(--fold,0) * .35)); }
.g-half-back { display:flex; flex-direction:column; padding:16px 14px 12px; border-radius:14px 14px 0 0; background:linear-gradient(#fbfbfa 60%,#eceae6); transform:rotateX(180deg); }
.g-object .g-crest { width:24px; height:27px; }
.g-object .g-card-group { margin:7px 0 2px; font-size:10px; }
.g-object .g-card-line { font-size:16px; line-height:1.05; }
.g-half-back .g-chips { margin-top:auto; }
.g-object .g-chips span { height:20px; padding:0 8px; font-size:9px; }
.g-object .g-card-foot { margin-top:6px; padding-top:5px; font-size:8px; }
.g-fact { display:flex; justify-content:space-between; gap:8px; margin:8px 0 0; padding-top:5px; border-top:1px solid #dddcd7; font:400 10px/1.2 var(--sans); color:#55554f; }
.g-fact b { position:relative; font-weight:600; color:var(--ink); white-space:nowrap; }
.g-fact b::after { content:''; position:absolute; left:-2px; right:-2px; top:50%; height:1.05em; margin-top:-.55em; background:var(--ink); transform-origin:0 50%; transform:scaleX(var(--e,0)); }

/* ---- Chapter 03. A full-width card that tilts in from 7deg and .84 and leaves at -7deg. */
.g-card-wrap { position:relative; z-index:7; margin-top:-100svh; }
.g-ccard {
  --cp:1;
  --lp:0;
  position:relative;
  padding:0 40px 110px;
  border-radius:24px;
  background:var(--paper);
  color:var(--ink);
  transform-origin:50% 0;
  transform:rotate(calc((1 - var(--cp)) * 7deg - var(--lp) * 7deg)) scale(calc(.84 + var(--cp) * .16 - var(--lp) * .16));
}
.g-ccard .g-label { position:relative; padding:25px 0 0; margin:0 -8px; }
.g-ccard-head { margin-top:44px; font-size:min(6.2vw,92px); }
.g-crest-inline { display:inline-block; width:.84em; height:.8em; margin:0 .06em; vertical-align:-.06em; clip-path:polygon(0 0,100% 0,100% 72%,50% 100%,0 72%); }
.g-sub { margin:34px 0 0; max-width:520px; font:400 16px/19.84px var(--sans); color:#55554f; }
.g-rows { margin:56px 0 0; padding:0; list-style:none; }
.g-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--tw,200px) minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  column-gap:5%;
  min-height:170px;
  margin:0 calc(var(--ri) * 90px) 0 calc(var(--ri) * 65px);
  padding:17px 0 22px;
  border-top:1px solid rgba(14,15,17,.16);
  opacity:var(--ro,1);
}
.g-row:nth-child(1) { --ri:0; --tw:200px; }
.g-row:nth-child(2) { --ri:1; --tw:150px; }
.g-row:nth-child(3) { --ri:2; --tw:104px; }
.g-row:nth-child(4) { --ri:3; --tw:72px; }
.g-row-k { grid-column:1; margin:0; font:400 16px/1.2 var(--sans); color:#55554f; }
.g-row h3 { grid-column:1; margin:2px 0 0; font:700 18px/20.16px var(--sans); letter-spacing:-.01em; }
.g-row-n { grid-column:1; align-self:end; padding-top:24px; font:400 16px/1 var(--sans); color:#55554f; }
.g-row-tile { grid-column:2; grid-row:1 / span 3; align-self:start; width:var(--tw); aspect-ratio:200/132; background:var(--pat) center/cover; }
.g-row-p { grid-column:3; grid-row:1 / span 3; justify-self:end; max-width:335px; margin:0; font:400 16px/19.84px var(--sans); color:#55554f; }

/* ---- Chapter 04. Second ash chapter. The card leaves over it. */
.g-voice { position:relative; z-index:6; height:240svh; margin-top:-100svh; }
.g-voice-pin { position:sticky; top:0; height:100svh; min-height:640px; overflow:hidden; background:var(--ash); color:var(--ink); }
.g-flank { position:absolute; z-index:2; top:120px; font-size:min(6.4vw,92px); color:var(--ink); }
.g-flank-l { left:44px; }
.g-flank-r { right:44px; text-align:right; }
.g-voice .g-phone { top:49%; opacity:1; filter:none; }
.g-voice-p { position:absolute; z-index:2; bottom:120px; width:335px; color:var(--ink); }
.g-voice-pl { left:44px; }
.g-voice-pr { right:44px; }
.g-phone-dark .g-sheet { position:absolute; left:6px; right:6px; bottom:6px; top:148px; padding:12px 14px 16px; border-radius:20px 20px 30px 30px; background:var(--graphite); color:var(--paper); text-align:center; }
.g-phone-dark .g-phone-screen::after { content:''; position:absolute; left:22px; right:22px; top:118px; height:60px; border-radius:12px 12px 0 0; background:var(--paper) var(--pat-mini,none); box-shadow:0 0 0 1px rgba(14,15,17,.1); }
.g-sheet { z-index:1; }
.g-sheet-grip { display:block; width:30px; height:3px; margin:0 auto 18px; border-radius:3px; background:rgba(251,251,250,.3); }
.g-sheet-title { margin:0; font:300 25px/.9 var(--display); text-transform:uppercase; letter-spacing:-.01em; }
.g-sheet-sub { margin:8px 0 14px; font:400 11px/1.35 system-ui,sans-serif; color:#b5b4af; }
.g-sheet-rows { margin:0; padding:0; list-style:none; text-align:left; }
.g-sheet-rows li { display:flex; justify-content:space-between; padding:8px 2px; border-top:1px solid rgba(251,251,250,.14); font:400 11px/1.2 system-ui,sans-serif; color:#d6d5d0; }
.g-sheet-rows b { font-weight:600; color:var(--denim); }
.g-sheet-pills { display:flex; justify-content:center; gap:6px; margin:14px 0 0; }
.g-sheet-pills span { display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:99px; background:rgba(251,251,250,.13); font:500 11px/1 system-ui,sans-serif; }

/* ---- Chapter 05. A feature name set twice around an object, a counter and pills. */
.g-feature { position:relative; z-index:6; height:180svh; }
.g-feature-pin,.g-stats-pin { position:sticky; top:0; height:100svh; min-height:680px; overflow:hidden; background:var(--graphite); color:var(--paper); }
.g-smoke { position:absolute; inset:0; background:var(--smoke) 0 0/100% 100% no-repeat,radial-gradient(60% 50% at 50% 42%,rgba(188,187,182,.07),transparent 70%); pointer-events:none; }
.g-feature-one { position:absolute; z-index:4; left:32px; top:52px; width:200px; margin:0; font:700 18px/20.16px var(--sans); letter-spacing:-.01em; }
.g-count { position:absolute; z-index:4; right:32px; top:52px; margin:0; font:300 104px/.88 var(--display); letter-spacing:0; font-variant-numeric:lining-nums; font-feature-settings:'lnum'; }
.g-name { position:absolute; left:0; right:0; top:30.5%; margin:0; font:300 var(--nfit,208px)/.88 var(--display); letter-spacing:-.005em; text-transform:uppercase; white-space:nowrap; pointer-events:none; }
.g-name span { display:block; }
.g-name-back span:first-child,.g-name-front .g-sr+span { padding-left:17%; }
.g-name span:last-child { text-align:center; }
.g-name-back { z-index:1; color:var(--paper); }
.g-name-back span:last-child { visibility:hidden; }
.g-name-front { z-index:3; color:var(--paper); }
.g-name-front span[aria-hidden]:not(:last-child) { visibility:hidden; }
.g-token-wrap { position:absolute; z-index:2; left:50%; top:45%; width:290px; height:340px; margin:-170px 0 0 -145px; perspective:1100px; }
.g-token-wrap::before { content:''; position:absolute; inset:-30% -50%; border-radius:50%; background:radial-gradient(closest-side,rgba(142,166,194,.18),transparent); filter:blur(26px); }
.g-token { position:absolute; inset:0; transform-style:preserve-3d; animation:g-turn 7s ease-in-out infinite alternate; }
.g-token i { position:absolute; inset:0; clip-path:polygon(0 0,100% 0,100% 68%,50% 100%,0 68%); transform:translateZ(var(--z)); background:var(--edge,#2c2d31); }
.g-token i.is-face { background:linear-gradient(118deg,rgba(255,255,255,.28),rgba(255,255,255,0) 38%,rgba(0,0,0,.28)),var(--pat) center/cover; transition:opacity .35s ease; }
.g-token i.is-back { background:var(--ash-deep); }
@keyframes g-turn { from { transform:rotateY(-34deg) rotateX(8deg); } to { transform:rotateY(30deg) rotateX(-4deg); } }
.g-feature-rule { position:absolute; z-index:4; left:32px; right:32px; top:74.1%; height:1px; background:rgba(251,251,250,.16); }
.g-feature-tag { position:absolute; z-index:4; left:32px; bottom:40px; font-size:min(5vw,72px); letter-spacing:-.005em; }
.g-feature-side { position:absolute; z-index:4; right:32px; top:calc(74.1% + 40px); width:333px; }
.g-feature-p { margin:0 0 22px; font:400 14px/18.34px system-ui,sans-serif; color:#a9a8a3; }
.g-pills { display:flex; flex-wrap:wrap; gap:6px; }
.g-pill { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:0; border-radius:99px; background:rgba(251,251,250,.13); color:var(--paper); font:600 16px/1 system-ui,sans-serif; transition:background-color .2s ease,color .2s ease; }
.g-pill:hover { background:rgba(251,251,250,.22); }
.g-pill[aria-pressed=true] { background:var(--denim); color:var(--ink); }

/* ---- Chapter 06. Four columns with 1px rules, tiles piling up at the bottom. */
.g-stats { position:relative; z-index:6; height:200svh; }
.g-stats-head { position:absolute; z-index:3; left:32px; top:64px; font-size:min(6.4vw,92px); }
.g-stats-p { position:absolute; z-index:3; left:40px; top:270px; width:425px; font:400 14px/18.34px system-ui,sans-serif; color:#a9a8a3; }
.g-cols { position:absolute; z-index:3; left:0; right:0; top:440px; bottom:0; display:grid; grid-template-columns:repeat(4,1fr); margin:0; }
.g-col { padding:10px 32px 0; border-left:1px solid rgba(251,251,250,.14); }
.g-col:first-child { border-left:0; }
.g-col dt { font:400 16px/1.2 system-ui,sans-serif; color:#a9a8a3; }
.g-col dd { margin:6px 0 0; font:700 24px/25.92px system-ui,sans-serif; color:var(--paper); }
.g-pile { position:absolute; z-index:2; inset:0; pointer-events:none; }
.g-blob { position:absolute; bottom:var(--b); left:var(--x); width:var(--s); height:var(--s); border-radius:var(--r,28%); background:var(--pat) center/cover; transform:translateY(-120svh) rotate(var(--rot)); }
.g-pile.is-down .g-blob { animation:g-drop 1.1s var(--d,0s) both; }
@keyframes g-drop {
  0% { transform:translateY(-120svh) rotate(calc(var(--rot) - 30deg)); animation-timing-function:cubic-bezier(.5,0,.9,.5); }
  72% { transform:translateY(0) rotate(var(--rot)); animation-timing-function:cubic-bezier(.2,.6,.4,1); }
  84% { transform:translateY(-22px) rotate(calc(var(--rot) + 4deg)); animation-timing-function:cubic-bezier(.6,0,.9,.4); }
  100% { transform:translateY(0) rotate(var(--rot)); }
}

/* ---- Chapter 07. Black, a tile on light rays, and the form set in the display face. */
.g-get { position:relative; z-index:6; overflow:hidden; padding:0 32px 70px; background:var(--ink); color:var(--paper); }
.g-get>.g-label { padding:25px 32px 0; }
.g-tile-wrap { position:relative; display:grid; place-items:center; height:290px; }
.g-rays { position:absolute; left:50%; top:50%; width:1400px; height:1000px; margin:-500px 0 0 -700px; background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(142,166,194,.1) 0 1.5deg,transparent 1.5deg 7deg); -webkit-mask:radial-gradient(closest-side,#000,transparent 72%); mask:radial-gradient(closest-side,#000,transparent 72%); pointer-events:none; }
.g-tile { position:relative; display:grid; place-items:center; width:123px; height:123px; margin-top:70px; border-radius:32px; background:radial-gradient(circle at 50% 30%,#dfe7f0,#a9bcd2 55%,#8ea6c2); color:var(--ink); box-shadow:0 0 90px rgba(142,166,194,.4); }
.g-tile .g-mark { width:64px; height:64px; stroke-width:2.8; }
.g .form-card,.g .window-body { margin:0; padding:0; border:0; background:none; box-shadow:none; }
.g .form-card::before,.g .form-card::after { content:none; display:none; }
.g .form-kicker { display:none; }
.g .form-card h2 { max-width:none; margin:0; text-align:center; font:700 18px/20.16px var(--sans); letter-spacing:-.01em; text-transform:none; color:var(--paper); }
.g .form-description { max-width:330px; margin:10px auto 0; text-align:center; font:400 14px/18.34px system-ui,sans-serif; color:#a9a8a3; }
.g .form-description strong { color:var(--paper); font-weight:600; }
.g form { margin-top:64px; }
.g .form-grid { display:grid; grid-template-columns:minmax(0,320px) minmax(0,1fr); gap:0 48px; margin:0; }
.g-field-big { position:relative; margin-top:26px; }
.g-field-big label { display:block; margin:0 0 6px; font:500 14px/18.34px system-ui,sans-serif; letter-spacing:0; text-transform:none; color:#a9a8a3; }
.g .window-body .g-field-big input {
  display:block;
  width:100%;
  min-height:0;
  margin:0;
  padding:0 0 10px;
  border:0;
  border-bottom:1px solid rgba(251,251,250,.32);
  border-radius:0;
  background:none;
  color:var(--paper);
  font:300 92px/1 var(--display);
  letter-spacing:-.01em;
  text-transform:uppercase;
  -moz-appearance:textfield;
  appearance:textfield;
  transition:border-color .3s var(--ease);
}
.g-field-big input::-webkit-outer-spin-button,.g-field-big input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.g .g-field-big input::placeholder { color:#8a8984; opacity:1; }
.g .window-body .g-field-big input:focus { border-bottom-color:var(--paper); }
.g .window-body .g-field-big input:focus-visible { outline:2px solid rgba(251,251,250,.95); outline-offset:4px; box-shadow:0 0 0 2px var(--ink); }
.g .window-body .g-field-big input[readonly] { color:#d6d5d0; }
.g-form-row { display:flex; justify-content:space-between; align-items:center; gap:40px; margin-top:28px; }
.g-form-row-end { justify-content:flex-end; }
.g .checkbox-label { display:flex; gap:12px; align-items:flex-start; max-width:760px; margin:0; font:400 14px/18.34px system-ui,sans-serif; color:#b5b4af; }
.g .checkbox-label strong { color:var(--paper); font-weight:600; }
.g .checkbox-label input { flex:none; width:20px; height:20px; margin:0; accent-color:var(--denim); }
.g .g-submit { flex:none; min-height:48px; font-size:15px; padding:0 26px; background:var(--denim); color:var(--ink); }
.g .g-submit:hover { background:#a9bcd2; box-shadow:0 8px 22px rgba(142,166,194,.28); }
.g .authorization-details { margin:18px 0 0; font:400 14px/18.34px system-ui,sans-serif; color:#b5b4af; }
.g .authorization-details summary { width:max-content; min-height:44px; display:flex; align-items:center; cursor:pointer; color:var(--paper); }
.g .authorization-details p { max-width:760px; margin:4px 0 0; }
.g .form-error { margin-top:14px; color:#f0b4aa; font:500 14px/1.4 system-ui,sans-serif; }
.g .card-footnote,.g .login-switch { margin:26px auto 0; text-align:center; font:400 14px/18.34px system-ui,sans-serif; color:#a9a8a3; }
.g .login-switch { margin-top:4px; }
.g .inline-button { min-height:44px; color:var(--paper); text-decoration:underline; text-underline-offset:4px; }
.g .demo-code { margin:20px auto 0; width:max-content; border-radius:99px; padding:8px 16px; background:rgba(251,251,250,.1); border:0; color:var(--paper); font:500 14px/1.3 system-ui,sans-serif; }

/* ---- Dock. Hidden at the top, then travels left to right as a progress bar. Three themes. */
.g-dock {
  --dp:0;
  position:fixed;
  z-index:35;
  left:24px;
  bottom:24px;
  display:flex;
  align-items:center;
  gap:12px;
  height:58px;
  padding:6px 6px 6px 16px;
  border-radius:84px;
  border:1px solid rgba(251,251,250,.14);
  background:rgba(24,25,28,.6);
  -webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);
  color:var(--denim);
  opacity:0;
  translate:0 16px;
  transform:translateX(calc(var(--dp) * (100vw - 100% - 48px)));
  transition:opacity .35s ease,translate .35s ease,background-color .35s ease,border-color .35s ease,color .35s ease,scale .2s ease;
}
.g-dock.is-on,.g-dock:focus-within { opacity:1; translate:0 0; }
.g-dock .g-mark { width:22px; height:22px; }
.g-dock-button { display:inline-flex; align-items:center; height:44px; padding:0 22px; border-radius:99px; background:rgba(251,251,250,.14); color:var(--denim); font:600 16px/19.84px var(--sans); text-decoration:none; transition:background-color .35s ease,color .35s ease,transform .2s ease; }
.g-dock-button:hover { transform:scale(1.03); }
.g-dock[data-theme=ash] { background:rgba(76,75,71,.2); border-color:rgba(251,251,250,.34); color:var(--ash-deep); }
.g-dock[data-theme=ash] .g-dock-button { background:rgba(251,251,250,.6); color:var(--ink); }
.g-dock[data-theme=light] { background:#fff; border-color:rgba(14,15,17,.14); color:var(--ink); }
.g-dock[data-theme=light] .g-dock-button { background:var(--ash-light); color:var(--ink); }

/* ---- Footer. Black, three columns, the wordmark in the middle. */
.site-footer { margin:0; padding:40px 32px 34px; border:0; background:var(--ink); color:var(--paper); }
.g-foot { display:grid; grid-template-columns:1fr auto 1fr; align-items:start; gap:24px; }
.g-foot-col { display:grid; gap:8px; justify-items:start; }
.g-foot-end { justify-items:end; }
.g-foot a { font:500 14px/18.34px system-ui,sans-serif; color:var(--paper); text-decoration:none; }
.g-foot a:hover { text-decoration:underline; }
.g-foot-mid { display:grid; justify-items:center; gap:8px; }
.g-foot .g-foot-brand { display:inline-flex; align-items:center; gap:7px; font:700 21px/1 var(--sans); letter-spacing:-.03em; color:var(--denim); }
.g-foot-mid p { margin:0; font:500 14px/18.34px system-ui,sans-serif; color:var(--paper); }
.site-footer .g-foot-note { margin:34px 0 0; text-align:center; font:400 13px/1.4 system-ui,sans-serif; color:#8f8e89; max-width:none; }

/* ---------- Workspace. Same type and colour, no motion on data. ---------- */
body:has(#dashboard-view:not([hidden])) { --page-ground:var(--paper); background:var(--paper); }
.dashboard-view .dash-band { background:var(--ash) var(--smudge); background-size:640px 640px; background-blend-mode:multiply; border:0; color:var(--ink); }
.dashboard-header h1 { font:300 min(8vw,112px)/.86 var(--display); text-transform:uppercase; letter-spacing:-.01em; }
/* Grail cards for data. Mono labels, serif numbers that snap. No title bars. */
.dashboard-header { border-top:1px solid rgba(14,15,17,.28); }
.metric { background:var(--paper); border:1px solid rgba(14,15,17,.16); border-radius:20px; padding:18px 20px 20px; }
.metric p { background:none; color:var(--muted); height:auto; margin:0 0 10px; padding:0; font:500 12px/1.5 var(--mono); letter-spacing:.12em; text-transform:uppercase; }
.metric strong { background:none; padding:0; font:300 84px/.9 var(--display); color:var(--ink); }
.metric span { background:none; padding:8px 0 0; color:var(--muted); }
.metric-success { background:var(--good-bg); border-color:rgba(46,90,68,.3); }
.metric-success strong,.metric-success span,.metric-success p { background:none; color:var(--good); }
.panel { background:var(--window); padding:0; border:1px solid rgba(14,15,17,.16); border-radius:24px; overflow:hidden; }
.panel-header { background:none; color:var(--ink); margin:0; padding:22px 22px 14px; min-height:0; border:0; align-items:baseline; }
.panel-header h2 { font:300 40px/.9 var(--display); text-transform:uppercase; letter-spacing:-.01em; }
.panel-header .quiet-label { color:var(--muted); }
.filters,.listing-items,.activity-list,.activity-empty,.next-check,.empty-state { background:none; border:0; }
.filters { padding:0 22px 14px; }
.listing-items,.activity-list { border-top:1px solid rgba(14,15,17,.14); }
.listing-item { padding:20px 22px; }
.empty-state { border-top:1px solid rgba(14,15,17,.14); }
.empty-state h3 { font:300 36px/.95 var(--display); text-transform:uppercase; }
.activity-empty,.next-check { padding-left:22px; padding-right:22px; }
.next-check { border-top:1px solid rgba(14,15,17,.14); }
.filter-button { border:1px solid rgba(14,15,17,.3); background:none; }
.filter-button.selected { background:var(--ink); color:var(--paper); border-color:var(--ink); }
.status-pill { border-radius:999px; }
.topbar { background:var(--ash-light); border-color:rgba(14,15,17,.2); }
.topbar-tag { border-radius:999px; }
.status-pill,.filter-button { border-radius:999px; }
dialog { border-radius:24px; }
.dialog-body h2 { font-family:var(--display); font-weight:300; text-transform:uppercase; line-height:.9; }

/* ---------- Breakpoints. Grail switches at 768. ---------- */
@media(max-width:1100px) {
  body:has(#welcome-view:not([hidden])) .site-header .header-inner { grid-template-columns:minmax(0,1fr) minmax(0,330px) minmax(0,1fr); }
  .g-problem-head .g-l:nth-child(n) { margin-left:8%; }
  .g-problem-head .g-l:nth-child(odd) { margin-left:24%; }
  .g-problem-body { left:24%; }
  .g-burn-foot { grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr); }
  .g-row-p { max-width:none; }
  .g-voice-p { width:280px; }
}
@media(max-height:760px) and (min-width:768px) {
  .g-hero-line { top:116px; }
  .g-phone { transform:scale(.84); }
  .g-burn-foot { bottom:80px; }
  .g-cols { top:400px; }
}
@media(max-width:767px) {
  :root { --side:16px; --header:64px; }
  body:has(#welcome-view:not([hidden])) .site-header { height:auto; }
  body:has(#welcome-view:not([hidden])) .site-header .header-inner { height:auto; display:flex; flex-direction:column; align-items:center; gap:10px; padding:18px 16px 0; }
  body:has(#welcome-view:not([hidden])) .brand { margin:0; justify-self:auto; }
  body:has(#welcome-view:not([hidden])) .header-caption { display:block; max-width:310px; font-size:14px; line-height:18.9px; opacity:.66; }
  body:has(#welcome-view:not([hidden])) .header-actions { position:absolute; top:8px; right:8px; gap:8px; }
  body:has(#welcome-view:not([hidden])) .mode-badge,body:has(#welcome-view:not([hidden])) .fx-header-cta { display:none; }
  body:has(#welcome-view:not([hidden])) .text-button { font-size:13px; padding:0 8px; }
  body:has(#welcome-view:not([hidden])) #demo-banner { padding:8px 16px; font-size:12px; }
  .header-caption { display:none; }
  .g .g-label { padding:16px 16px 0; font-size:13px; }

  .g-stage { min-height:0; }
  .g-hero-line { top:142px; padding:0 16px; white-space:normal; text-align:center; font-size:15.5vw; }
  .g-hero-line .g-line { display:block; white-space:nowrap; }
  .g-scrim { height:300px; }
  .g-rig { top:64%; }
  .g-face.is-quest { padding:22px 18px 12px; }

  .g-problem-head { top:13%; padding:0 16px; font-size:10.4vw; }
  .g-problem-head .g-l:nth-child(n) { margin-left:0; width:auto; }
  .g-problem-body { left:16px; right:16px; top:auto; bottom:110px; width:auto; font-size:15px; line-height:18.6px; }

  .g-burn-head { top:48px; padding:0 16px; font-size:8.6vw; }
  .g-clock { top:36%; font-size:25vw; }
  .g-phone { top:36%; transform:scale(.62); }
  .g-burn-foot { left:16px; right:16px; bottom:96px; display:block; }
  .g-burn-foot .g-lead { font-size:16px; line-height:19px; }
  .g-burn-foot .g-body { margin-top:10px; font-size:14px; line-height:17.4px; }
  .g-rule { top:-18px; }

  .g-ccard { padding:0 16px 70px; }
  .g-ccard .g-label { margin:0; }
  .g-ccard-head { margin-top:30px; font-size:10.2vw; }
  .g-sub { margin-top:20px; font-size:15px; }
  .g-rows { margin-top:36px; }
  .g-row { --ri:0!important; grid-template-columns:minmax(0,1fr) auto; grid-template-rows:auto; margin:0; min-height:0; padding:16px 0 22px; gap:6px 16px; }
  .g-row-k { grid-column:1; grid-row:1; }
  .g-row-n { grid-column:2; grid-row:1; align-self:start; padding:0; }
  .g-row h3 { grid-column:1 / -1; grid-row:2; }
  .g-row-tile { grid-column:1; grid-row:3; width:min(160px,44vw); margin-top:8px; }
  .g-row-p { grid-column:1 / -1; grid-row:4; justify-self:start; margin-top:8px; font-size:15px; line-height:18.6px; }

  .g-voice,.g-feature,.g-stats { height:auto; margin-top:0; }
  .g-voice-pin,.g-feature-pin,.g-stats-pin { position:relative; height:auto; min-height:0; }
  .g-voice-pin { display:grid; grid-template-columns:1fr 1fr; gap:0 16px; padding:64px 16px 110px; }
  .g-flank { position:relative; top:auto; left:auto; right:auto; font-size:8.6vw; }
  .g-flank-r { text-align:right; }
  .g-voice .g-phone { position:relative; grid-column:1 / -1; left:auto; top:auto; margin:28px auto 0; transform:none; width:200px; height:410px; }
  .g-voice-p { position:relative; grid-column:1 / -1; left:auto; right:auto; bottom:auto; width:auto; margin-top:24px; font-size:15px; line-height:18.6px; }

  .g-feature-pin { display:grid; padding:64px 16px 110px; }
  .g-feature-one { position:relative; left:auto; top:auto; width:auto; max-width:240px; }
  .g-count { top:44px; right:16px; font-size:58.5px; }
  .g-token-wrap { position:relative; left:auto; top:auto; width:190px; height:224px; margin:44px auto 0; }
  .g-name-back { display:none; }
  .g-name { position:relative; top:auto; margin-top:-64px; font-size:var(--nfit,12.5vw); }
  .g-name-front span[aria-hidden]:not(:last-child) { visibility:visible; }
  .g-name-front .g-sr+span { padding-left:0; text-align:center; }
  .g-feature-rule { position:relative; left:auto; right:auto; top:auto; margin-top:48px; }
  .g-feature-tag { position:relative; left:auto; bottom:auto; margin-top:24px; font-size:10.2vw; }
  .g-feature-side { position:relative; right:auto; top:auto; width:auto; margin-top:22px; }

  .g-stats-pin { display:grid; padding:64px 16px 110px; }
  .g-stats-head { position:relative; left:auto; top:auto; font-size:10.2vw; }
  .g-stats-p { position:relative; left:auto; top:auto; width:auto; margin-top:18px; }
  .g-cols { position:relative; top:auto; grid-template-columns:1fr 1fr; margin-top:34px; }
  .g-col { padding:10px 12px 0; border-left:0; border-top:1px solid rgba(251,251,250,.14); }
  .g-col:nth-child(even) { border-left:1px solid rgba(251,251,250,.14); }
  .g-col dd { font-size:20px; line-height:22px; }
  .g-col::after { content:''; display:block; height:110px; margin:14px -12px 0; background:var(--pat) center/cover; }
  .g-pile { display:none; }

  .g-get { padding:0 16px 60px; }
  .g-get>.g-label { padding:16px 16px 0; }
  .g-tile-wrap { height:220px; }
  .g-tile { width:96px; height:96px; margin-top:50px; border-radius:26px; }
  .g-tile .g-mark { width:50px; height:50px; }
  .g form { margin-top:36px; }
  .g .form-grid { grid-template-columns:96px minmax(0,1fr); gap:0 16px; }
  .g .window-body .g-field-big input { font-size:40px; padding-bottom:8px; }
  .g-form-row { flex-direction:column; align-items:stretch; gap:20px; }
  .g .g-submit { width:100%; }

  .g-dock,.g-dock.is-on,.g-dock:focus-within { left:50%; bottom:20px; opacity:1; translate:-50% 0; transform:none; }
  .g-dock.is-off:not(:focus-within) { opacity:0; translate:-50% 16px; }
  .site-footer { padding:34px 16px 110px; }
  .g-foot { grid-template-columns:1fr 1fr; }
  .g-foot-mid { grid-column:1 / -1; grid-row:1; margin-bottom:16px; }
}

/* Reduced motion stops every motion: no loader, no rise, no drift, no pinned story, no tilt, no travel, no smoothing. */
@media(prefers-reduced-motion:reduce) {
  .g-loader { display:none; }
  .g-js .g-hero-line .g-ch,.g-ready .g-ch { animation:none; opacity:1; transform:none; }
  .g-js [data-rise] .g-l,.g-js [data-rise]:not(:has(.g-l)) { transform:none; opacity:1; transition:none; }
  .g-face,.g-token { animation:none; }
  .g-story { height:auto; }
  .g-stage { position:relative; height:auto; overflow:hidden; }
  .g-stage::before { content:''; display:block; height:100svh; }
  .g-field { bottom:auto; height:100svh; min-height:600px; overflow:hidden; }
  .g-problem { position:relative; inset:auto; height:100svh; min-height:640px; transform:none; }
  .g-burn { position:relative; inset:auto; height:100svh; min-height:680px; visibility:visible; -webkit-mask:none; mask:none; }
  .g-phone { opacity:1; filter:none; }
  .g-object { top:calc(100svh + max(100svh, 640px) + max(100svh, 680px) * .505); }
  .g-card-wrap,.g-voice { margin-top:0; }
  .g-ccard { transform:none; }
  .g-row { opacity:1; }
  .g-voice,.g-feature,.g-stats { height:auto; }
  .g-voice-pin,.g-feature-pin,.g-stats-pin { position:relative; }
  .g-blob { transform:rotate(var(--rot)); }
  .g-pile.is-down .g-blob { animation:none; }
  .g-dock { transform:none; left:auto; right:24px; transition:none; }
  .g-dock-button,.g-pill,.fx-header-cta,.button,.g-field-big input,.g-token i.is-face { transition:none; }
  .fx-header-cta:hover,.button:hover,.g-dock-button:hover { transform:none; }
}
@media(prefers-reduced-motion:reduce) and (max-width:767px) {
  .g-dock { left:50%; right:auto; translate:-50% 0; }
}

/* WebGL takes over the card field and the route object when it starts. The CSS versions stay as the fallback. */
.g-gl { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none; }
.gl-on .g-rig,.gl-on .g-token { display:none; }
.gl-on .g-token-wrap { left:0; top:0; width:100%; height:100%; margin:0; perspective:none; }
.gl-on .g-token-wrap::before { inset:18% 30%; background:radial-gradient(closest-side,rgba(142,166,194,.12),transparent); }
@media (max-width:767px) {
  .gl-on .g-token-wrap { position:relative; width:auto; height:min(62svh,420px); margin:12px -16px 0; }
}

/* The story phones are real geometry when WebGL runs. The CSS box stays for layout, fade and blur. */
.gl-on .g-phone { background:none; box-shadow:none; }
.gl-on .g-phone > .g-phone-screen { visibility:hidden; }
.g-gl.g-gl-phone { inset:auto; left:-70px; top:-70px; width:calc(100% + 140px); height:calc(100% + 140px); }