@font-face { font-family:'Geist'; src:url('assets/fonts/Geist-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Geist'; src:url('assets/fonts/Geist-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Geist'; src:url('assets/fonts/Geist-SemiBold.woff2') format('woff2'); font-weight:600; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('assets/fonts/GeistMono-Regular.woff2') format('woff2'); font-weight:400; font-display:swap; }
@font-face { font-family:'Geist Mono'; src:url('assets/fonts/GeistMono-Medium.woff2') format('woff2'); font-weight:500; font-display:swap; }
@font-face { font-family:'Geist Pixel'; src:url('assets/fonts/GeistPixel-Square.woff2') format('woff2'); font-weight:400; font-display:swap; }

/* ---------- tokens ---------- */
:root {
  --paper:#edf0f5;
  --ink:#1c2a40;
  --muted:#5b6981;
  --navy:#172638;
  --blue:#284893;
  --sky:#4f6fb3;
  --line:rgba(28,42,64,.12);
  --on-sea:#dfe6f0;
  --on-sea-muted:rgba(223,230,240,.55);

  --text-xs:12px;
  --text-sm:13.5px;
  --text-md:clamp(16px,.9vw + 6px,22px);
  --text-h1:clamp(34px,4.4vw,84px);
  --sq:0; /* 0..1, set by layout(): how far the hero, header, steps and footer are squeezed to keep the window large */

  --gutter:clamp(16px,4vw,72px);
  --window-w:1200px;
  --window-h:675px; /* 16:9, a 16:10 display with the owner-requested 10% off the height */
  --s:1;

  font-family:'Geist',system-ui,sans-serif;
  color:var(--ink);
  background:var(--navy);
  font-synthesis:none;
  -webkit-font-smoothing:antialiased;
}
* { box-sizing:border-box; }
body { margin:0; }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
button:disabled { cursor:default; }
a:focus-visible, button:focus-visible { outline:2px solid var(--sky); outline-offset:4px; border-radius:4px; }
.skip { position:absolute; left:16px; top:-100px; z-index:9; padding:10px 14px; background:#fff; border-radius:8px; }
.skip:focus { top:12px; }
.muted { color:var(--muted); font-weight:400; }

/* ---------- world ---------- */
.world {
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:radial-gradient(ellipse at 50% 30%, #fbfcfe 0%, var(--paper) 55%, #e3e9f1 100%);
}
#sea { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.header, .hero, .stage, .footer { position:relative; z-index:1; }

/* ---------- header ---------- */
.header {
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:24px;
  padding:calc(22px * (1 - var(--sq) * .5)) var(--gutter);
}
.brand { display:flex; align-items:center; gap:10px; font-family:'Geist Pixel',monospace; font-size:26px; letter-spacing:-.5px; }
.brand img { image-rendering:pixelated; }
.header .signup { display:flex; align-items:center; gap:6px; position:relative; justify-self:end; }
.signup input[type=email] {
  width:clamp(180px,16vw,240px); padding:9px 12px; border-radius:8px; font:inherit; font-size:var(--text-sm);
  border:1px solid var(--line); background:rgba(255,255,255,.7); color:var(--ink);
}
.signup input[type=email]::placeholder { color:var(--muted); }
.signup input[type=email]:focus { outline:2px solid var(--sky); outline-offset:1px; border-color:transparent; }
.signup button { padding:9px 14px; border-radius:8px; border:0; background:var(--ink); color:#fff; font-size:var(--text-sm); font-weight:500; white-space:nowrap; }
.signup button:hover { background:var(--blue); }
.signup .trap { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.signup-note { position:absolute; right:0; top:100%; margin-top:6px; font-size:11px; color:var(--muted); white-space:nowrap; opacity:0; transition:opacity .2s; }
.signup:focus-within .signup-note, .signup.ok .signup-note, .signup.err .signup-note { opacity:1; }
.signup.ok .signup-note { color:#2e7d4f; }
.signup.err .signup-note { color:#b4372b; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- hero ---------- */
.hero { text-align:center; margin-top:auto; padding:calc(clamp(12px,3.5vh,40px) * (1 - var(--sq) * .9)) var(--gutter) calc(clamp(18px,3vh,32px) * (1 - var(--sq) * .6)); }
.eyebrow {
  display:inline-flex; align-items:center; gap:10px; margin:0 0 calc(14px * (1 - var(--sq) * .5));
  font-size:var(--text-xs); font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}
.eyebrow img { image-rendering:pixelated; }
h1 { margin:0; font-size:calc(var(--text-h1) * (1 - var(--sq) * .4)); line-height:1.02; letter-spacing:-.04em; font-weight:600; }
h1 em { font-style:normal; color:var(--sky); }
.lede { max-width:52ch; margin:calc(16px * (1 - var(--sq) * .5)) auto 0; font-size:calc(var(--text-md) * (1 - var(--sq) * .2)); line-height:1.5; color:var(--muted); }

/* ---------- stage: scaled app window ---------- */
.stage { padding:0 var(--gutter); max-width:calc(var(--window-w) * 1.25 + 2 * var(--gutter)); margin:0 auto auto; width:100%; }
.frame { width:calc(var(--window-w) * var(--s)); height:calc(var(--window-h) * var(--s)); margin:0 auto; position:relative; }
/* a soft pool of shadow under the window so it reads as lifted off the sea */
.frame::after { content:''; position:absolute; left:6%; right:6%; bottom:-22px; height:44px; border-radius:50%; background:radial-gradient(ellipse at center, rgba(5,12,24,.55), rgba(5,12,24,0) 70%); filter:blur(6px); z-index:-1; }
.app-window {
  /* the UI spec's dark roles (DEC-083) in the site's navy, so the mock sits in the sea */
  --app:#172638; --sheet:#0f1a2a; --card:#15243a; --bar:#1b2b43; --ink:#ecedef; --ink2:#b7c1d0; --dim:#a9b4c4; --dim2:#8794a8;
  --hair:rgba(255,255,255,.08); --hair2:rgba(255,255,255,.16); --pri:#8ec5ff; --priw:#203656; --onpri:#0b1424; --ok:#62c48f; --warn:#e3aa52; --warnw:#2b2616; --track:#2b3b55;
  width:var(--window-w); height:var(--window-h);
  transform:scale(var(--s)); transform-origin:top left;
  display:flex; background:var(--app); color:var(--ink);
  border-radius:14px; overflow:hidden;
  /* elevated: a hairline top highlight, a tight contact shadow and a long soft one */
  box-shadow:0 1px 0 rgba(255,255,255,.09) inset, 0 0 0 1px rgba(255,255,255,.08),
    0 2px 6px rgba(8,16,30,.45), 0 24px 48px -12px rgba(8,16,30,.6), 0 60px 120px -30px rgba(8,16,30,.7);
  font-size:12.5px; line-height:1.5;
}
.app-window .dim { color:var(--dim2); font-weight:400; }
.app-window b { font-weight:500; }
.status { width:8px; height:8px; border-radius:50%; background:var(--pri); flex-shrink:0; display:inline-block; vertical-align:middle; }
.status.blue { background:var(--pri); box-shadow:0 0 0 3px var(--priw); animation:breathe 2.4s ease-in-out infinite; }
.status.green { background:var(--ok); }
.status.amber { background:var(--warn); }
.status.hollow { background:transparent; box-shadow:0 0 0 1.5px var(--dim2) inset; }
.status.past { background:var(--dim2); }
@keyframes breathe { 50% { box-shadow:0 0 0 1px var(--priw); } }

/* sidebar: chrome in Geist */
.sidebar { width:200px; flex-shrink:0; padding:14px 10px 12px; display:flex; flex-direction:column; gap:2px; }
.traffic { display:flex; gap:7px; margin:0 0 22px 4px; }
.traffic i { width:11px; height:11px; border-radius:50%; background:var(--hair2); }
.side-heading { display:flex; justify-content:space-between; font-size:11.5px; color:var(--dim2); padding:6px 6px 2px; }
.side-project { display:flex; align-items:center; gap:6px; padding:5px 6px; font-weight:500; }
.side-project .status { width:6px; height:6px; margin-left:auto; animation:none; box-shadow:none; }
.side-item { display:flex; align-items:center; gap:8px; padding:5px 6px 5px 16px; border-radius:6px; color:var(--ink2); }
.side-item.selected { background:var(--card); color:var(--ink); box-shadow:0 0 0 1px var(--hair2); }
.side-item .status { width:7px; height:7px; animation:none; box-shadow:none; }
.side-item .status.hollow { box-shadow:0 0 0 1.5px var(--dim2) inset; }
.side-project .status.hollow { box-shadow:0 0 0 1.5px var(--dim2) inset; }
.side-item.selected .status.blue { box-shadow:0 0 0 2px var(--priw); }
.side-bottom { margin-top:auto; padding:5px 6px; border-radius:6px; color:var(--dim); }
.side-bottom.selected { background:var(--card); color:var(--ink); box-shadow:0 0 0 1px var(--hair2); }
.app-window.on-settings .side-item.selected { background:transparent; color:var(--ink2); box-shadow:none; }

/* sheets */
.screens { flex:1; min-width:0; display:flex; flex-direction:column; padding:10px 10px 0 0; }
.screen { flex:1; min-height:0; display:flex; }
.screen[hidden] { display:none; }
.sheet { flex:1; min-width:0; background:var(--sheet); border-radius:14px; border:1px solid var(--hair); padding:16px 18px; display:flex; flex-direction:column; min-height:0; }
.session { font-family:'Geist Mono',ui-monospace,monospace; line-height:1.6; }
.sheet-head { padding-bottom:12px; border-bottom:1px solid var(--hair); margin-bottom:10px; }
.work-title { font-weight:500; }
.live { color:var(--pri); display:flex; align-items:center; gap:8px; margin-top:2px; }
.strip { display:inline-flex; gap:2px; }
.strip b { width:7px; height:9px; background:var(--pri); border-radius:1px; opacity:.9; }
.strip b.on ~ b { background:var(--track); opacity:1; }
.now { color:var(--ink2); }
.meta { color:var(--dim2); font-size:11.5px; }
.record { flex:1; min-height:0; overflow:hidden; }
.record p.in u { color:var(--pri); }
.record p { margin:0 0 6px; }
.record p .status { position:relative; top:-1px; margin-right:7px; }
.record p.in { display:block; padding-left:16px; color:var(--ink2); }
.record u { text-decoration:none; color:var(--pri); }
.record p.in .status { margin-right:6px; }
.composer { margin-top:auto; border:1px solid var(--hair2); border-radius:10px; background:var(--card); padding:10px 12px 8px; }
.composer-bar { display:flex; align-items:center; gap:16px; margin-top:10px; font-size:11.5px; color:var(--ink2); }
.composer-bar .send { white-space:nowrap; margin-left:auto; padding:3px 9px; border-radius:6px; background:var(--pri); color:var(--onpri); font-weight:500; }
.needs { display:inline-flex; align-items:center; gap:6px; padding:1px 8px; border-radius:999px; background:var(--warnw); color:var(--warn); }
.needs .status { animation:none; box-shadow:none; }

/* pending block: one amber rule, one action */
.pending { border-left:2px solid var(--warn); background:var(--warnw); border-radius:0 10px 10px 0; padding:10px 14px 10px 12px; margin:8px 0 10px; }
.pending-head { display:flex; justify-content:space-between; font-size:11.5px; color:var(--warn); margin-bottom:4px; }
.pending p { margin:0 0 4px; }
.pending ol { list-style:none; margin:8px 0 10px; padding:0; }
.pending li { padding:3px 8px; border-radius:6px; color:var(--ink2); }
.pending li.chosen { background:var(--priw); color:var(--ink); }
.pending-foot { display:flex; align-items:center; gap:14px; font-size:11.5px; }
.pending-foot .action { white-space:nowrap; padding:3px 9px; border-radius:6px; background:var(--pri); color:var(--onpri); font-weight:500; }

/* settings sheet (scene 2) and workflow editor (scene 5): chrome in Geist */
.settings h3 { margin:0 0 2px; font-size:16px; font-weight:600; }
.settings h4 { margin:16px 0 6px; font-size:11.5px; font-weight:500; color:var(--dim2); text-transform:uppercase; letter-spacing:.08em; }
.settings > p { margin:0; max-width:60ch; }
.row { display:grid; grid-template-columns:1fr auto auto; align-items:center; gap:14px; padding:9px 0; border-bottom:1px solid var(--hair); }
.row.grant { grid-template-columns:1fr auto; }
.row > div > b { display:block; }
.row > div > span { color:var(--dim2); font-size:11.5px; }
.usage { display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--dim2); }
.usage i, .bottom-bar i { display:inline-block; width:70px; height:4px; border-radius:2px; background:var(--track); overflow:hidden; }
.usage i b, .bottom-bar i b { display:block; height:100%; background:var(--pri); }
.mini { padding:3px 9px; border-radius:8px; border:1px solid var(--hair2); font-size:11.5px; font-weight:500; white-space:nowrap; }
.primary { padding:4px 10px; border-radius:8px; background:var(--pri); color:var(--onpri); font-weight:500; white-space:nowrap; }
.library { display:flex; align-items:center; gap:6px; margin-bottom:14px; font-size:11.5px; }
.library b { padding:3px 10px; border-radius:999px; border:1px solid var(--hair2); font-weight:500; color:var(--ink2); }
.library b.on { background:var(--priw); border-color:var(--pri); color:var(--ink); }
.library b.plus { border-style:dashed; }
.version { padding:0 6px; border-radius:6px; border:1px solid var(--hair2); font-size:11.5px; font-weight:500; vertical-align:middle; }
.steps-table { margin-top:12px; font-size:12px; }
.steps-table .th, .steps-table .tr { display:grid; grid-template-columns:1.1fr 1.5fr 1.4fr 1fr; gap:12px; padding:7px 10px; align-items:center; }
.steps-table .th { background:var(--bar); border-radius:8px; color:var(--dim2); font-size:11px; text-transform:uppercase; letter-spacing:.06em; }
.steps-table .tr { border-bottom:1px solid var(--hair); }
.steps-table .tr .status { width:7px; height:7px; margin-right:6px; }
.steps-table .tr.sel { outline:2px solid var(--pri); outline-offset:-2px; border-radius:8px; }
.steps-table .tr.add { display:block; border:0; }
.sheet-actions { margin-top:auto; display:flex; align-items:center; gap:10px; font-size:11.5px; }
.sheet-actions .mini { margin-left:auto; }

/* flow pane (scene 3) */
.split { flex:1; display:flex; gap:10px; min-width:0; }
.sheet.narrow { flex:0 0 320px; }
.pane { flex:1; min-width:0; background:var(--sheet); border-radius:14px; border:1px solid var(--hair); display:flex; flex-direction:column; font-family:'Geist',system-ui,sans-serif; }
.pane-head { display:flex; align-items:center; gap:12px; padding:10px 14px; border-bottom:1px solid var(--hair); font-weight:500; font-size:12px; }
.seg { display:inline-flex; padding:2px; border-radius:7px; background:var(--bar); }
.seg b { padding:1px 9px; border-radius:5px; font-weight:500; color:var(--dim); font-size:11.5px; }
.seg b.on { background:var(--sheet); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.3); }
.pane-head .dim { margin-left:auto; font-size:11.5px; }
.flow { flex:1; display:flex; flex-direction:column; align-items:center; padding:14px 14px 6px; overflow:hidden; }
.card { width:260px; background:var(--card); border:1px solid var(--hair2); border-radius:10px; padding:5px 10px; display:grid; grid-template-columns:auto 1fr; column-gap:8px; align-items:center; font-size:11.5px; }
.card b { font-size:12px; color:var(--ink); }
.card > span { grid-column:2; color:var(--dim2); }
.card > small { grid-column:2; font-size:11px; color:var(--ink2); padding-top:2px; margin-top:2px; border-top:1px dashed var(--hair); }
.card.running { border-color:var(--pri); box-shadow:0 0 0 2px var(--priw); }
.card.next { border-color:var(--warn); }
.card .pill { display:inline-block; padding:0 7px; border-radius:999px; background:var(--warnw); color:var(--warn); font-size:11px; }
.arrow { width:2px; height:16px; background:var(--dim2); position:relative; flex-shrink:0; }
.arrow::after { content:''; position:absolute; left:-4px; bottom:-1px; border:5px solid transparent; border-top:7px solid var(--dim2); border-bottom:0; }
.fork { width:424px; height:12px; border:2px solid var(--dim2); border-bottom:0; border-radius:8px 8px 0 0; position:relative; flex-shrink:0; }
.fork::before, .fork::after { content:''; position:absolute; bottom:-7px; width:0; border:5px solid transparent; border-top:7px solid var(--dim2); border-bottom:0; }
.fork::before { left:-6px; } .fork::after { right:-6px; }
.fork.join { border:2px solid var(--dim2); border-top:0; border-radius:0 0 8px 8px; }
.fork.join::before, .fork.join::after { display:none; }
.lanes { display:flex; gap:24px; }
.lanes .card { width:200px; }
.pane-foot { display:flex; gap:14px; padding:4px 14px 8px; font-size:11px; }
.pane-foot span { display:inline-flex; align-items:center; gap:5px; }
.pane-foot .right { margin-left:auto; }
.pane-foot .status { width:6px; height:6px; animation:none; box-shadow:none; }

/* bottom bar */
.bottom-bar { position:absolute; left:200px; right:0; bottom:0; height:30px; display:flex; align-items:center; gap:24px; padding:0 14px; font-size:11px; color:var(--dim2); }
.bottom-bar span { display:inline-flex; align-items:center; gap:6px; }
.bottom-bar span:last-child { margin-left:auto; }
.app-window { position:relative; }
.screens { padding-bottom:30px; }

/* ---------- footer integrations ---------- */
.integrations b { font-weight:500; color:var(--on-sea); }

/* ---------- steps ---------- */
.steps { display:flex; justify-content:center; gap:6px; padding:calc(18px * (1 - var(--sq) * .5)) 0 0; }
.steps a {
  display:flex; flex-direction:column; gap:calc(10px * (1 - var(--sq) * .5)); min-width:120px; padding:calc(8px * (1 - var(--sq) * .5)) 10px; border-radius:8px;
  font-size:var(--text-xs); font-weight:500; color:var(--on-sea-muted);
}
.steps .n { font-family:'Geist Pixel',monospace; font-size:11px; letter-spacing:.05em; }
.steps a:hover, .steps a.active { color:#fff; }
.bar { display:block; height:2px; border-radius:2px; background:rgba(223,230,240,.18); overflow:hidden; }
.bar b { display:block; height:100%; width:0; background:#fff; }

/* ---------- footer ---------- */
.footer {
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:20px;
  padding:calc(22px * (1 - var(--sq) * .5)) var(--gutter) calc(18px * (1 - var(--sq) * .5)); font-size:var(--text-xs); color:var(--on-sea-muted);
}
.footer .motion { justify-self:end; }
.footer p { margin:0; }
.integrations { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; }
.integrations span { text-transform:uppercase; letter-spacing:.12em; font-size:10.5px; }
.fine a { text-decoration:underline; text-underline-offset:4px; }
.fine a:hover { color:#fff; }
.motion { padding:7px 12px; border-radius:8px; border:1px solid rgba(223,230,240,.25); background:transparent; color:var(--on-sea); font-size:var(--text-xs); }
.motion:hover { border-color:rgba(223,230,240,.6); }
.no-script { padding:16px var(--gutter); background:#fff; text-align:center; }

/* ---------- narrow screens ---------- */
@media (max-width:1150px) {
  .signup input[type=email] { width:160px; }
  .footer { grid-template-columns:1fr; justify-items:center; text-align:center; gap:14px; }
  .footer .motion { justify-self:center; }
  .integrations { justify-content:center; }
}
@media (max-width:860px) {
  .header { grid-template-columns:1fr; gap:12px; padding-bottom:28px; }
  .header .signup { justify-self:stretch; }
  .signup input[type=email] { flex:1; width:auto; min-width:0; }
  .signup-note { right:auto; left:0; }
}
@media (max-width:760px) {
  .hero { margin-top:0; padding-top:10px; }
  .stage { margin-bottom:0; padding:0 8px; }
  .steps { padding-top:14px; }
  .frame { margin:0; }
  .steps { gap:4px; }
  .steps a { min-width:0; flex:1; padding:6px 4px; }
  .steps .t { display:none; }
}

}

/* ---------- large displays ---------- */
@media (min-width:1900px) {
  :root { --text-xs:13px; --text-sm:15px; }
  .brand { font-size:30px; }
  .steps a { min-width:150px; }
  .steps .n { font-size:12px; }
  .motion, .signup button, .signup input[type=email] { font-size:15px; }
  .signup input[type=email] { width:clamp(200px,14vw,280px); }
}

/* ---------- motion ---------- */
@media (prefers-reduced-motion:reduce) {
  .working i { animation:none; opacity:.7; }
}