/* Fractl Agents marketing site: shared/site.css, the frame every page loads FIRST.
 * site-v52 (Sept 26): moved toward the APP (founder: "these pages … should better match the app"). The app is the reference:
 * DESIGN.md + public/theme.css (.dark) + public/custom.css. Headings 600 at the app's tracking-tight (-.025em), h1 capped at 60px;
 * the app's greys (#b3b3b3 / #7a7a7a) and border (#454545); the app's primary button (teal, WHITE text, r8, h40, px-5) and its
 * lg size (h44, px-8) for page CTAs; the app's link (teal, hover #1b9279); the app's lockup and 60px header; windows drawn as the
 * app's own frame (4u teal top bar, #454545 edge, no browser chrome, no shadow except the hero window); labels in Plex. See SPEC.md.
 * The contract is DESIGN_AUDIT_2026_09_25.md §4 as the founder accepted it (Sept 25): the home's frame, type, window and motion
 * everywhere; inner heroes on the home's pattern with no rotating or orange word; teal primary button (v52: white ink, the app's), hover #1b9279;
 * flat page/deep canvas, no orange wash. Values come from the home (site-v45) and the app's theme.css.
 * Page files load AFTER this one: they add drawings and section layouts, and never redeclare a token below.
 * How a page is built on this frame: shared/TEMPLATE.md.
 *
 * Red-team wave 1 (Sept 25, REDTEAM_FIXES_WAVE1.md): pins and lit steps key on html.anim (reduced motion and no JS = final
 * states, every step lit, no pins); a 24svh end hold; --pin-step is measured by stage.js from a probe; captions sit under their
 * window (.fit hugs the start edge); on phones (html.anim) the windows sit inline and play themselves on a timer, with tappable dots (§10 "phone play"); one close pattern on deep.
 * 1 tokens · 2 base · 3 type · 4 buttons and links · 5 frame: container, header, footer · 6 sections
 * 7 inner-page hero · 8 stages (pinned steps) · 9 the window (one chrome, drawn on --u) · 10 narrow screens · 11 no JS, reduced motion */

/* ── 1 tokens ── */
@font-face{font-family:Plex;src:url('../assets/ibm-plex-sans-latin.woff2') format('woff2');font-weight:100 700;font-display:swap}
@font-face{font-family:'Source Code Pro';src:url('../assets/source-code-pro-400-latin.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Source Code Pro';src:url('../assets/source-code-pro-600-latin.woff2') format('woff2');font-weight:600;font-display:swap}
@property --u{syntax:'<length>';inherits:true;initial-value:1px}
:root{
  color-scheme:dark;
  /* colour: the app's dark scale only (theme.css .dark): background #212121, canvas-deep #1a1a1a (the ambient canvas recipe), card #292929,
     surface-elevated #303030 (menus), surface-hover #333, border #454545 (the hairline is that border at 60%, the app's opacity layering);
     text: foreground #f5f5f5, muted #b3b3b3, dim #7a7a7a (dim only inside drawings and for marks: 3.7:1 on #212121 fails AA for text) */
  --page:#212121;--deep:#1a1a1a;--panel:#292929;--elev:#303030;--hover:#333333;--hair:rgba(69,69,69,.6);--edge:#454545;--border:#454545;
  --ink:#f5f5f5;--sub:#b3b3b3;--dim:#7a7a7a;--link-rule:#454545;
  --teal:#21ad8f;--teal-hover:#1b9279;--teal-hi:#5fd6bd;--teal-ink:#fff; /* the app's --action-foreground: white on teal (≈2.9:1, the app's choice) */
  --brand:#e94f29; /* the logo slash and in-drawing identity marks only: never text, a button, a rule or a dash */
  --sans:Plex,system-ui,sans-serif;--mono:'Source Code Pro',ui-monospace,monospace;
  /* type scale (Plex 400/500/600; labels in Plex like the app; mono only for code) */
  --fs-h1:clamp(40px,4.2vw,60px);--fs-h2:clamp(28px,2.6vw,40px);--fs-h2-close:clamp(32px,3.2vw,48px);--fs-h3:18px;
  --fs-lead:clamp(18px,1.3vw,19px);--fs-body:17px;--fs-base:17px;--fs-cap:13.5px;--fs-label:12px;
  /* space (8 px base) */
  --gut:clamp(16px,3.4vw,48px);--wrap:1344px;--hdr:60px; /* the app's header height */
  --sec-pad:clamp(64px,9vh,96px);--sec-pad-close:clamp(80px,11vh,112px);
  --sp-lead:22px;--sp-actions:32px;--sp-cap:14px;--sp-p:16px;--col-gap:clamp(32px,5vw,96px);--stage-gap:clamp(32px,4.4vw,72px);
  /* motion: the app's tokens by name (theme.css), one curve. Scroll drives state; nothing runs on a timer. */
  --motion-fast:120ms;--motion-base:180ms;--motion-medium:240ms;--motion-slow:320ms;--motion-stagger:32ms;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --ease:var(--ease-out); /* alias: page files written against --ease get the one curve */
  --pin-step:21svh;       /* scroll per pinned state; shared/stage.js measures this token from a probe (no 0.21 × innerHeight) */
  --pin-hold:24svh;       /* the pinned scroll left after the last state arrives: about one step plus a breath */
  /* buttons drawn INSIDE app windows follow the app, not the marketing .btn: primary = teal with white text;
     a button inside a result card = the app's darker in-card teal (color-mix 66% black) with white text */
  --app-btn:#21ad8f;--app-btn-ink:#fff;--card-btn:color-mix(in srgb,#21ad8f 66%,#000);--card-btn-ink:#fff;
  /* the window: no shadow (the app has no card shadows); the hero window alone keeps this one */
  --shadow:0 24px 60px rgba(0,0,0,.42),0 2px 6px rgba(0,0,0,.3);
  /* floating UI (menus, popovers, dialogs) keeps a shadow, as in the app */
  --float-shadow:0 18px 40px rgba(0,0,0,.45);
}

/* ── 2 base ── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-size:var(--fs-base);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
b,strong{font-weight:600} /* Plex 400/500/600 only: the browser default 700 is off the contract */
img{max-width:100%}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--teal-hi);outline-offset:3px;border-radius:4px}
.skip{position:fixed;top:8px;left:16px;z-index:100;padding:10px 14px;background:var(--panel);border-radius:8px;transform:translateY(-200%)}
.skip:focus{transform:none}
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}

/* ── 3 type ── */
h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
h1 span{display:inline-block}
h2{font-size:var(--fs-h2);line-height:1.12;letter-spacing:-.025em;font-weight:600;text-wrap:balance}
.h3{font-size:var(--fs-h3);line-height:1.3;letter-spacing:-.01em;font-weight:600}
.lead{margin-top:var(--sp-lead);font-size:var(--fs-lead);line-height:1.5;color:var(--sub);max-width:31em}
.blocks p,.blocks-one,.body{font-size:var(--fs-body);line-height:1.55;color:var(--sub);max-width:34em}
.blocks p+p{margin-top:var(--sp-p)}
.blocks-one,h2+.body{margin-top:var(--sp-lead)}
.body+.body{margin-top:var(--sp-p)}
.ink{color:var(--ink)}
.cap{margin-top:var(--sp-cap);font-size:var(--fs-cap);line-height:1.45;color:var(--sub);max-width:62ch} /* the app's helper text: muted-foreground */
/* a label names a thing inside the page (a table head, a list, a group). Never a tiny all-caps line above a heading (COPY_RULES §4).
   The app's section label: text-xs font-semibold uppercase tracking-wide text-muted-foreground (DESIGN.md §3), in Plex, never mono. */
.label{font:600 var(--fs-label)/1.2 var(--sans);letter-spacing:.025em;text-transform:uppercase;color:var(--sub)}

/* ── 4 buttons and links ── */
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:var(--sp-actions)}
/* the app's primary (DESIGN.md §5: bg #21ad8f text-white hover #1b9279 rounded-lg px-5 h-10, text-sm font-medium). Page CTAs (.ctas)
   take the app's lg size (h-11 px-8, the shadcn Button in apps/prompt-library), the only larger variant the app has. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border-radius:8px;background:var(--teal);color:var(--teal-ink);font-size:14px;font-weight:500;white-space:nowrap;transition:background-color var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.btn:hover{background:var(--teal-hover)}
.btn:active{transform:scale(.97)}
.ctas .btn{height:44px;padding:0 32px}
/* the app's secondary: border border-border hover:bg-muted rounded-lg */
.btn-2{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:40px;padding:0 20px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--ink);font-size:14px;font-weight:500;white-space:nowrap;transition:background-color var(--motion-base) var(--ease-out),transform var(--motion-fast) var(--ease-out)}
.btn-2:hover{background:#454545}
.btn-2:active{transform:scale(.97)}
/* the app's link style: teal text, hover #1b9279 (DESIGN.md §5 Link-style), at the button's text size */
.tlink{display:inline-flex;align-items:center;gap:6px;color:var(--teal);font-size:14px;font-weight:500;transition:color var(--motion-base) var(--ease-out)}
.tlink::after{content:"→"}
.tlink:hover{color:var(--teal-hover)}
/* a link inside prose */
.prose a,a.inline{color:var(--teal);text-decoration:underline;text-decoration-color:rgba(33,173,143,.4);text-underline-offset:3px;transition:color var(--motion-base) var(--ease-out),text-decoration-color var(--motion-base) var(--ease-out)}
.prose a:hover,a.inline:hover{color:var(--teal-hover);text-decoration-color:var(--teal-hover)}

/* ── 5 frame: container, header (72 px, over the hero), footer ── */
.wrap{width:min(var(--wrap),calc(100% - 2 * var(--gut)));margin-inline:auto}
.page-header{position:absolute;top:0;left:0;right:0;z-index:40;background:var(--page)} /* the app's header: 60px, solid background */
.hdr{height:var(--hdr);display:flex;align-items:center;justify-content:space-between;gap:16px}
/* the app's lockup (workspace header, UnifiedHeader.jsx): 28px round mark, gap 10, orange slash, gap 6, word 15px / 600 / +.02em */
.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:15px;font-weight:600;letter-spacing:.02em;line-height:1}
.wordmark img{width:28px;height:28px;border-radius:50%}
.wordmark span{display:flex;align-items:baseline;gap:6px}
.wordmark i{font-style:normal;color:var(--brand)}
.header-nav{display:flex;align-items:center;gap:2px}
.header-nav details{position:relative}
.header-nav summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:8px;font-size:14px;color:var(--sub);transition:color var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out)}
.header-nav summary::-webkit-details-marker{display:none}
.header-nav summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}
.header-nav summary:hover,.header-nav details[open] summary{color:var(--ink);background:var(--hover)}
.header-nav>a{padding:8px 12px;border-radius:8px;font-size:14px;color:var(--sub);transition:color var(--motion-base) var(--ease-out),background-color var(--motion-base) var(--ease-out)}
.header-nav>a:hover{color:var(--ink);background:var(--hover)}
/* Sign in = the app's secondary (border) button */
.header-nav details.more{display:none}
.header-nav>a.header-app{display:inline-flex;align-items:center;height:36px;margin-left:8px;padding:0 14px;border:1px solid var(--border);color:var(--ink);font-weight:500}
.header-nav>a.header-app:hover{background:#454545}
.menu{position:absolute;top:calc(100% + 8px);left:auto;right:0;width:360px;padding:6px;display:grid;background:var(--elev);border:1px solid var(--border);border-radius:12px;box-shadow:var(--float-shadow);z-index:60} /* the app's menu: surface-elevated */
.menu a{display:block;padding:10px 12px;border-radius:8px;font-size:15px;font-weight:500;transition:background-color var(--motion-fast) var(--ease-out)}
.menu a:hover{background:var(--hover)}
.menu small{display:block;margin-top:2px;font-size:13px;font-weight:400;line-height:1.4;color:var(--sub)}
.page-footer{border-top:1px solid var(--hair);background:var(--deep)}
.ftr{min-height:88px;display:flex;align-items:center;justify-content:space-between;gap:16px 32px;flex-wrap:wrap;padding-block:20px}
.ftr nav{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:14.5px;color:var(--sub)}
.ftr nav a:hover{color:var(--ink)}

/* ── 6 sections: page and deep alternate, each with a hairline on top; --panel is never a section ── */
.sec{position:relative;background:var(--page);border-top:1px solid var(--hair);padding-block:var(--sec-pad)}
.sec.deep{background:var(--deep)}
.sec-top,.sec-hero{border-top:0}
.sec-stage{padding-block:0}
/* the close, one pattern for every page: deep, the close h2, one lead sentence, the button and one text link (TEMPLATE.md §4).
   The close is always deep; the section above it should be a page section. */
.sec-close{text-align:left;padding-block:var(--sec-pad-close);background:var(--deep)}
.sec-close h2{font-size:var(--fs-h2-close)}
.sec-close .lead{max-width:30em}
/* a text page or a hub: one column, the reading measure */
.col{max-width:44rem}

/* ── 7 inner-page hero: h1 → lead → button + text link, beside ONE still window with a caption. Not pinned, no timers. ── */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:40px var(--col-gap);align-items:center;min-height:min(100svh,calc(820px + var(--hdr)));padding-block:calc(var(--hdr) + 32px) 56px}
.hero-fig{min-width:0}
.hero-fig .pinfit .win{--room:calc(var(--hdr) + 150px)}
/* a short laptop screen: start the hero at the top so the window's caption and the buttons stay above the fold */
@media (max-height:820px) and (min-width:900px){.hero:not(.hero-solo){align-items:start;padding-top:calc(var(--hdr) + 40px)}}
/* hubs, why/ and research/: the same left column without the window */
.hero-solo{display:block;min-height:0;padding-block:calc(var(--hdr) + clamp(48px,8vh,80px)) 0} /* v52: the home's rhythm, not a whole screen */
.sec-hero:has(>.hero-solo){padding-top:0} /* the section's own --sec-pad stays below the lead only */
.hero-solo .hero-text{max-width:44rem}

/* ── 8 stages: a text column and a window column over one scroll track; the state is a function of scroll (shared/stage.js) ── */
.stage{display:grid;grid-template-columns:minmax(0,var(--tc,430px)) minmax(0,1fr);gap:0 clamp(32px,4.4vw,72px)}
.st-text-in{padding-block:clamp(64px,9vh,96px)}
.st-pin{padding-block:clamp(64px,9vh,96px)}
/* pins only when the visitor allows motion (html.anim). Reduced motion and no JS: no pins, the final state, every step lit. */
html.anim .st-track{height:calc(100svh + (var(--n) - 1) * var(--pin-step) + var(--pin-hold))}
html.anim .st-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;padding:56px 0 22px}
html.anim .st-text{position:sticky;top:0;height:100svh;align-self:start;display:flex;align-items:center}
html.anim .st-text-in{padding:56px 0 22px}
.st-text .blocks{margin-top:26px}
html.anim .stage .blocks p[data-on]{transition:color var(--motion-medium) var(--ease-out)}
html.anim .stage .blocks p[data-on].on,html:not(.anim) .stage .blocks p[data-on]{color:var(--ink)}
.snap,.snap *,.snap *::before,.snap *::after{transition:none!important;animation:none!important}
/* phones: the lit step, copied by stage.js under the pinned window (hidden on wide screens, where the text column stays in view) */
.st-now{display:none}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}
@keyframes rise-solid{from{transform:translateY(8px)}} /* for a panel that covers something: never see-through */
@keyframes cur-press{50%{transform:scale(.84)}}
html.anim .enter{animation:rise var(--motion-medium) var(--ease-out) both}
/* numbered step lines: each lights with its state */
.calls p{display:grid;grid-template-columns:26px 1fr;gap:12px;align-items:start}
.calls p>:not(b){grid-column:2} /* an inline link or span after the text stays in the text column */
.calls p+p{margin-top:14px}
.calls b{width:24px;height:24px;margin-top:2px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--edge);font:600 12px/1 var(--sans);color:var(--sub);transition:background-color var(--motion-medium) var(--ease-out),color var(--motion-medium) var(--ease-out),border-color var(--motion-medium) var(--ease-out)}
html.anim .calls p.on b,html:not(.anim) .calls p b{background:var(--teal);border-color:var(--teal);color:var(--teal-ink)}
/* the steps' lead-in line between the body and the numbered lines */
.steps-lead{margin-top:var(--sp-p);font-size:15.5px;color:var(--sub)}
.steps-lead+.blocks{margin-top:14px}
.st-steps{--tc:420px}

/* ── 9 the window: the app's own frame (v52): the app's 4 px teal top bar (custom.css body::before), then the app's top bar (.w-top);
   a 1 px #454545 edge, 12u radius, no browser dots or address bar, no shadow (the hero window alone keeps one).
   Every size in design units; one u = one design pixel, scaled to the room.
   A window is .fit > .win (still) or .fit.pinfit > .win.play (pinned; data-state + data-s lists). Set --dw/--dh per window. ── */
.fit{container-type:inline-size;width:100%;display:flex;justify-content:flex-start} /* the window hugs the start edge, so its caption lines up under it */
.win{--dw:960;--dh:620;--u:min(1px,calc(100cqw / var(--dw)));position:relative;flex:none;width:calc(var(--u) * var(--dw));height:calc(var(--u) * var(--dh));display:flex;flex-direction:column;overflow:hidden;background:#212121;border:1px solid var(--border);border-radius:calc(var(--u)*12);color:var(--ink);font-size:calc(var(--u)*13.5);line-height:1.45;text-align:left}
.pinfit .win{--u:min(1px,calc(100cqw / var(--dw)),calc((100svh - var(--room,132px)) / var(--dh)))}
/* the hero window (the home's and every inner page's) keeps the one shadow */
.w-hero,.hero-fig .win{box-shadow:var(--shadow)}
.w-still{height:auto}
.ic{width:calc(var(--u)*14);height:calc(var(--u)*14);flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.play [data-s]{display:none}
.play[data-state="0"] [data-s~="0"],.play[data-state="1"] [data-s~="1"],.play[data-state="2"] [data-s~="2"],.play[data-state="3"] [data-s~="3"],.play[data-state="4"] [data-s~="4"],.play[data-state="5"] [data-s~="5"],.play[data-state="6"] [data-s~="6"]{display:var(--d,block)}
.w-chrome{flex:none;height:calc(var(--u)*4);background:var(--teal)} /* the app's 4 px teal bar; the markup's dots and URL are not drawn */
.w-chrome>*{display:none!important} /* beats the state rule (.play [data-s]) on windows whose URL changed by state */
.w-body{flex:1;min-height:0;display:flex}
.w-side{flex:none;width:calc(var(--u)*188);display:flex;flex-direction:column;gap:calc(var(--u)*1);padding:calc(var(--u)*12) calc(var(--u)*10);background:#292929;border-right:1px solid var(--border);font-size:calc(var(--u)*12.5);color:var(--sub);overflow:hidden} /* the app's sidebar: card surface */
.w-mark{display:flex;align-items:center;gap:calc(var(--u)*6);padding:calc(var(--u)*2) calc(var(--u)*6) calc(var(--u)*12);font-size:calc(var(--u)*14.5);font-weight:600;color:var(--ink);letter-spacing:-.01em}
.w-mark img{width:calc(var(--u)*20);height:calc(var(--u)*20)}
.w-mark i{font-style:normal;color:var(--brand);margin-right:calc(var(--u)*2)} /* the orange slash, as the workspace's */
.w-new{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*6);height:calc(var(--u)*30);margin-bottom:calc(var(--u)*8);border:1px solid #1f6b5a;border-radius:calc(var(--u)*8);background:rgba(33,173,143,.08);color:var(--teal-hi);font-weight:500}
.w-nav{display:flex;align-items:center;gap:calc(var(--u)*8);padding:calc(var(--u)*5) calc(var(--u)*8)}
.w-lab{padding:calc(var(--u)*14) calc(var(--u)*8) calc(var(--u)*5);font:600 calc(var(--u)*10)/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.w-rc{flex:none;padding:calc(var(--u)*5) calc(var(--u)*8);border-left:calc(var(--u)*2) solid transparent;border-radius:0 calc(var(--u)*6) calc(var(--u)*6) 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.w-rc small{display:block;font-size:calc(var(--u)*11);color:var(--dim);overflow:hidden;text-overflow:ellipsis}
.w-rc.is-here{border-left-color:var(--teal);background:var(--hover);color:var(--ink)}
.w-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}
.w-top{flex:none;height:calc(var(--u)*48);display:flex;align-items:center;gap:calc(var(--u)*12);padding:0 calc(var(--u)*14);border-bottom:1px solid var(--border);font-size:calc(var(--u)*12.5)}
.w-build{display:flex;align-items:center;gap:calc(var(--u)*6);height:calc(var(--u)*28);padding:0 calc(var(--u)*10);border:1px solid var(--edge);border-radius:calc(var(--u)*8);color:var(--ink)}
.w-cv{width:calc(var(--u)*11);height:calc(var(--u)*11);color:var(--dim);margin-left:calc(var(--u)*3)}
.w-scope{position:relative;margin-left:auto;display:flex;align-items:center;gap:calc(var(--u)*9);height:calc(var(--u)*36);padding:0 calc(var(--u)*12);border:1px solid var(--edge);border-radius:calc(var(--u)*10)}
.w-scope>i{font-style:normal;color:var(--dim)}
.w-seg{position:relative;display:grid;line-height:1.15}
.w-seg small{font:600 calc(var(--u)*9)/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--dim)}
.w-seg>span:not(.w-drop){display:flex;align-items:center;font-weight:500;white-space:nowrap}
.w-addp{color:var(--teal-hi);font-weight:500;white-space:nowrap}
.w-av{flex:none;width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:50%;display:grid;place-items:center;background:#1f6b5a;color:var(--ink);font-size:calc(var(--u)*11.5);font-weight:600}
.w-thread{flex:1;min-height:0;overflow:hidden;width:100%;max-width:calc(var(--u)*720);margin-inline:auto;padding:calc(var(--u)*18) calc(var(--u)*26) calc(var(--u)*14);display:flex;flex-direction:column;justify-content:flex-end;gap:calc(var(--u)*14)}
.w-thread>*{flex:none}
.w-thread-top{justify-content:flex-start;padding-bottom:calc(var(--u)*22)}
.w-hello{margin:auto 0!important;text-align:center;font-size:calc(var(--u)*21);font-weight:500;letter-spacing:-.02em;color:var(--sub)}
.w-who{display:flex;align-items:center;gap:calc(var(--u)*6);margin-bottom:calc(var(--u)*6);font:600 calc(var(--u)*10)/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.w-who b{width:calc(var(--u)*6);height:calc(var(--u)*6);border-radius:50%;background:var(--teal)}
.w-who-a .ic{width:calc(var(--u)*11);height:calc(var(--u)*11);fill:var(--brand);stroke:none}
.w-you{background:var(--hover);border-radius:calc(var(--u)*14);padding:calc(var(--u)*11) calc(var(--u)*15) calc(var(--u)*13)}
.w-you p{font-size:calc(var(--u)*13.5);line-height:1.5}
.w-agent>p{font-size:calc(var(--u)*13.5);line-height:1.55;color:var(--ink)}
.w-agent>*+*{margin-top:calc(var(--u)*10)}
.w-card{display:block;width:calc(var(--u) * var(--cw));max-width:100%;height:auto;border-radius:calc(var(--u)*10)}
.w-zoom{position:relative;display:block;width:calc(var(--u) * var(--cw));max-width:100%;border-radius:calc(var(--u)*10)}
.w-zoom .w-card{width:100%}
.w-zl{position:absolute;right:calc(var(--u)*10);bottom:calc(var(--u)*10);padding:calc(var(--u)*5) calc(var(--u)*9);border-radius:calc(var(--u)*7);background:rgba(26,26,26,.92);border:1px solid var(--border);font-size:calc(var(--u)*11.5);color:var(--ink);opacity:0;transition:opacity var(--motion-base) var(--ease-out)}
.w-zoom:hover .w-zl,.w-zoom:focus-visible .w-zl{opacity:1}
.w-comp{flex:none;display:flex;align-items:center;gap:calc(var(--u)*10);width:calc(100% - calc(var(--u)*44));max-width:calc(var(--u)*680);min-height:calc(var(--u)*50);margin:0 auto calc(var(--u)*16);padding:calc(var(--u)*8) calc(var(--u)*8) calc(var(--u)*8) calc(var(--u)*10);border:1px solid var(--border);border-radius:calc(var(--u)*14);background:#292929;font-size:calc(var(--u)*13.5)}
.w-plus{flex:none;width:calc(var(--u)*26);height:calc(var(--u)*26);border-radius:50%;border:1px solid var(--edge);display:grid;place-items:center;color:var(--sub)}
.w-plus .ic{width:calc(var(--u)*13);height:calc(var(--u)*13)}
.w-ctext{flex:1;min-width:0;color:var(--dim);line-height:1.4}
.w-typed{display:none;color:var(--ink)}
.w-comp.f-on .w-typed{display:inline}
.w-comp.f-on .w-ph{display:none}
.w-send{flex:none;width:calc(var(--u)*32);height:calc(var(--u)*32);border-radius:calc(var(--u)*9);display:grid;place-items:center;background:var(--hover);color:var(--dim);transition:background-color var(--motion-base) var(--ease-out),color var(--motion-base) var(--ease-out)}
.w-comp.f-on .w-send{background:var(--app-btn);color:var(--app-btn-ink)}
.w-comp-wait{border-style:dashed;color:var(--dim)}
.w-comp-wait .w-send{opacity:.5}
.w-cursor{position:absolute;left:0;top:0;z-index:30;width:calc(var(--u)*20);height:calc(var(--u)*24);margin:calc(var(--u)*-2) 0 0 calc(var(--u)*-3);fill:#fff;stroke:#111;stroke-width:1.6;stroke-linejoin:round;opacity:0;pointer-events:none;transition:transform var(--motion-slow) var(--ease-out),opacity var(--motion-base) var(--ease-out)}
html.js .w-cursor.on{opacity:1}
.w-cursor path{transform-origin:3px 2px}
html.anim .w-cursor.press path{animation:cur-press var(--motion-fast) var(--ease-out)}
.w-cols{flex:1;min-height:0;display:flex}
.w-chat{position:relative;flex:1;min-width:0;display:flex;flex-direction:column}
.w-canvas{--d:flex;flex:none;width:calc(var(--u)*540);flex-direction:column;border-left:1px solid var(--border);background:#292929;min-height:0}
.c-bar{flex:none;display:flex;align-items:center;gap:calc(var(--u)*8);height:calc(var(--u)*40);padding:0 calc(var(--u)*14);border-bottom:1px solid var(--border);font-size:calc(var(--u)*12.5)}
.c-bar strong{font-weight:600}
.c-bar em{--d:inline;margin-left:auto;font-style:normal;font-size:calc(var(--u)*11.5);color:var(--sub)}
.c-btns{flex:none;display:flex;gap:calc(var(--u)*6);padding:calc(var(--u)*8) calc(var(--u)*14);border-bottom:1px solid var(--border)}
.c-btns span{height:calc(var(--u)*26);padding:0 calc(var(--u)*10);display:inline-flex;align-items:center;border:1px solid var(--edge);border-radius:calc(var(--u)*7);font-size:calc(var(--u)*11.5);color:var(--sub)}
.c-paper{flex:1;min-height:0;overflow:hidden;margin:calc(var(--u)*14);padding:calc(var(--u)*20) calc(var(--u)*24);border:1px solid var(--border);border-radius:calc(var(--u)*10);background:#212121}
.c-paper h3{font-size:calc(var(--u)*19);font-weight:600;line-height:1.25;letter-spacing:-.015em;margin-bottom:calc(var(--u)*10)}
.c-paper p{font-size:calc(var(--u)*13);line-height:1.6;color:var(--ink);margin-top:calc(var(--u)*8)}
/* a real card image: .w-card with style="--cw:600" (design px) */

/* ── 10 narrow screens: the text scrolls away above, the window pins alone in a narrow layout ── */
@media (max-width:899px){
  .hero{grid-template-columns:minmax(0,1fr);min-height:0;padding-block:calc(var(--hdr) + 16px) 40px;gap:28px}
  .hero-fig .pinfit .win{--room:120px}
  .stage{grid-template-columns:minmax(0,1fr)}
  html.anim .st-text{position:static;height:auto;display:block}
  html.anim .st-text-in,.st-text-in{padding:clamp(72px,10vh,96px) 0 8px}
  .st-pin{padding-block:24px 64px}
  html.anim .st-pin{padding:14px 0 12px}
  .pinfit .win{--room:84px}
  /* the lit step under the window: three lines reserved so the window never jumps */
  html.anim .st-now{display:block;order:1;min-height:calc(3 * 1.42 * 15px);margin:10px 0 0;font-size:15px;line-height:1.42;color:var(--ink);max-width:34em}
  html.anim .st-now b{margin-right:8px;font:600 12px/1 var(--sans);color:var(--teal-hi)}
  html.anim .st-now .st-now-t{font-weight:600;margin-right:6px;color:var(--ink);font-family:var(--sans);font-size:15px}
  html.anim .st-now.enter{animation:rise var(--motion-medium) var(--ease-out) both}
  html.anim .st-pin .cap{order:2}
  html.anim .has-now .pinfit .win{--room:160px}
  /* a panel entering over the chat on a phone never fades: the crushed chat underneath would show through */
  html.anim .w-canvas.enter{animation-name:rise-solid}
  .fit .win{--dw:430} /* two classes on purpose: beats a page's single-class --dw; a page sets a narrow --dw with .fit .w-x */
  .w-side{display:none}
  .w-thread{padding:calc(var(--u)*14) calc(var(--u)*16) calc(var(--u)*12)}
  .w-top{padding:0 calc(var(--u)*10);gap:calc(var(--u)*8)}
  .w-build{display:none}
  .w-scope{margin-left:0}
  .w-addp{display:none}
  .w-scope>i:last-of-type{display:none}
  .w-av{margin-left:auto}
  .w-comp{width:calc(100% - calc(var(--u)*24));margin-bottom:calc(var(--u)*12)}
  .w-canvas{position:absolute;z-index:3;inset:0;width:100%;border-left:0}

  /* ── phone play (html.anim only): no scroll track, no pin. Each window sits inline at its natural height under its text and
     plays itself on a timer (shared/stage.js); the dots under it set a state on tap. The lit-step copy (.st-now) is not shown. ── */
  html.anim .st-track{height:auto}
  html.anim .st-pin{position:static;height:auto;display:block;padding:16px 0 40px}
  html.anim .st-text-in{padding-bottom:0} /* the text→window gap is the pin's 16px */
  html.anim .st-now{display:none}
  html.anim .has-now .pinfit .win{--room:84px}
  html.anim{--sec-pad:48px;--sec-pad-close:56px}
  html.anim .calls.caps p+p{margin-top:8px}
  /* the hubs' and Build pages' hero window is left out on phones (the home's hero is a stage and stays); its caption stays */
  html.anim .hero .hero-fig>.fit{display:none}
  html.anim .hero .hero-fig>.cap{margin-top:0}
  /* a stage window behind a button (stage.js PHONE_COLLAPSE_AFTER_FIRST); "Hide the example" under an opened one */
  .pp-open{appearance:none;-webkit-appearance:none;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;margin:0;padding:0 16px;border:1px solid var(--edge);border-radius:10px;background:var(--panel);color:var(--ink);font:400 15px/1.3 var(--sans);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pp-open::after{content:"";flex:none;width:7px;height:7px;margin:-4px 2px 0 0;border:solid var(--sub);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
  .pp-hide{margin-top:12px}
  .pp-hide::after{margin-top:4px;transform:rotate(-135deg)}
  .pp-open:focus-visible{outline:2px solid var(--teal-hi);outline-offset:2px}
  html.anim .pp-shut>:not(.pp-open),html.anim .pp-shut>.pp-hide,html.anim .st-pin:not(.pp-shut)>.pp-open:not(.pp-hide){display:none}
  .pp-dots{display:flex;flex-wrap:wrap;margin:0 0 0 -17px}
  .pp-dot{appearance:none;-webkit-appearance:none;flex:none;display:grid;place-items:center;width:40px;height:40px;margin:0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .pp-dot::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--dim);transition:background-color var(--motion-base) var(--ease-out)}
  .pp-dot.on::before{background:var(--teal)}
  .pp-dot:focus-visible{outline:2px solid var(--teal-hi);outline-offset:-4px}
}
@media (max-width:760px){
  .header-nav>a:not(.header-app){display:none}
  .header-nav details.more{display:block}
  .header-nav summary{min-height:40px;display:inline-flex;align-items:center}
  .tlink,.ctas a{min-height:40px;display:inline-flex;align-items:center}
  .page-footer nav a{min-height:40px;display:inline-flex;align-items:center}
  .header-nav summary{padding:8px 9px;font-size:14.5px}
  .header-nav>a.header-app{margin-left:4px;padding:8px 11px;font-size:14.5px}
  .menu{position:fixed;top:64px;left:16px;right:16px;width:auto}
  .ctas .btn{width:100%;justify-content:center}
  .ftr nav{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:8px 18px} /* two even rows, never a lone link */
}

/* ── 11 no JS and reduced motion: the HTML is authored at every window's final state; pins and lit steps key on html.anim
   (§8), so both show the final state, every numbered step lit, and no pinned scroll. ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* capability bullets beside a drawn window (the settled Work-section form, 30 Sep): the bullets describe the capability, the window demonstrates */
.calls.caps p{grid-template-columns:14px 1fr;gap:10px;color:var(--ink)}
.calls.caps p::before{content:'';display:block;width:6px;height:6px;margin-top:.55em;border-radius:50%;background:var(--dim)}
.calls.caps p+p{margin-top:12px}

/* v74 (Dan 27 Oct, menu B): Research opens to Studies and Experiments; "Join the beta" sits beside Sign in. Phones keep Work · Build · Menu · Sign in (both live in Menu there). */
.header-nav>a.header-beta{display:inline-flex;align-items:center;height:36px;margin-left:8px;padding:0 14px;border-radius:8px;background:rgba(33,173,143,.14);color:var(--teal-hi);font-weight:500}
.header-nav>a.header-beta:hover{background:rgba(33,173,143,.22);color:var(--teal-hi)}
@media (max-width:760px){.header-nav details.rs,.header-nav>a.header-beta{display:none}}
/* v74: the phone header fits one row at 360–390 (v58–v73 ran "Agents" into "Work", wrapped Sign in and dropped Menu a line) */
@media (max-width:760px){
  .hdr{gap:10px}
  .wordmark{gap:8px;flex:none}
  .header-nav{gap:0;flex-wrap:nowrap;align-items:center}
  .header-nav details,.header-nav details.more{display:flex;align-items:center}
  .header-nav summary{padding:6px 5px;gap:4px;font-size:14px}
  .header-nav>a.header-app{margin-left:4px;height:36px;padding:0 10px;font-size:14px;white-space:nowrap}
}
.header-nav details.more{margin-top:0} /* home.css .more{margin-top:28px} caught the header Menu too */
/* v77: an inline link inside body copy (the tool count on the workflows page): teal text, soft tint on hover, no underline */
a.u-tools{color:var(--teal-hi);border-radius:4px;transition:background-color var(--motion-base) var(--ease-out)}
@media (hover:hover) and (pointer:fine){a.u-tools:hover{background:rgba(33,173,143,.12)}}
/* v78: with Pricing in the header, narrow desktops (761–899) tighten the spacing so the bar stays one row */
@media (min-width:761px) and (max-width:899px){
  .header-nav>a,.header-nav summary{padding:8px 7px}
  .header-nav>a.header-beta,.header-nav>a.header-app{margin-left:4px;padding:0 10px}
}