/* Miles landing page, after Linear's homepage: near-black, one type family set tight, big two-tone statements, the real
   product framed and lit from below, and quiet motion that only reveals. Every colour is a token below. */
/* Inter, served from the site (fonts/). Pages preload the latin file; latin-ext loads only if a page uses its letters. */
@font-face {font-family:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/inter-latin-ext.woff2) format('woff2');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:'Inter';font-style:normal;font-weight:300 800;font-display:swap;src:url(fonts/inter-latin.woff2) format('woff2');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;}
:root{
  color-scheme:dark;
  /* Linear's neutrals, the same as the app's Desk theme, so page and product are one surface. */
  --bg:#08090a; --panel:#0f1011; --card:#141516; --card-2:#1c1d1f; --hover:rgba(255,255,255,.05);
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.13);
  --text:#f7f8f8; --soft:#d0d6e0; --muted:#8a8f98; --faint:#7a7f88;
  --accent:#7c86ef; --ok:#4cb782; --warn:#f2c94c;
  --font:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --mono:var(--font);
  --ease:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --w:1280px; --gut:80px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.5 var(--font);font-feature-settings:"cv01","ss03";font-optical-sizing:auto;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;overflow-x:clip}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
h1,h2,h3,p{margin:0}
/* No lone word on the last line of a heading, and fewer ragged short lines in paragraphs. */
.h-hero .ln,.h-ch,h3{text-wrap:balance}
p{text-wrap:pretty}
img,svg{display:block}
[hidden]{display:none!important}
.mono{font-family:var(--mono);letter-spacing:0}
.skip{position:absolute;left:16px;top:-60px;z-index:100;background:var(--text);color:var(--bg);padding:8px 14px;border-radius:999px}
.skip:focus{top:12px}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}

.wrap{width:min(var(--w),100% - 2*var(--gut));margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.wrap-wide{width:min(1320px,100% - 2*(var(--gut) - 20px));margin-inline:auto}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 20px;border-radius:999px;font-weight:510;font-size:16px;transition:transform .16s var(--ease),box-shadow .2s ease}
.btn.sm{height:32px;padding:0 13px;font-size:13px}
.btn.light{background:linear-gradient(180deg,#fafafa,#dcdcdf);color:#08090a;box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.5),0 10px 30px -10px rgba(255,255,255,.28)}
.btn.dark{background:linear-gradient(180deg,#202124,#16171a);color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.07),0 1px 2px rgba(0,0,0,.5)}
/* Hover fades a layer in over the gradient. Swapping the gradient for a flat colour flashed the button dark for a
   frame, because the browser faded in from no colour at all. */
.btn.light,.btn.dark{position:relative;isolation:isolate}
.btn.light::after,.btn.dark::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:#fff;opacity:0;transition:opacity .2s ease;pointer-events:none}
.btn.dark::after{background:rgba(255,255,255,.06)}
@media (hover:hover){.btn.light:hover::after{opacity:.85}.btn.dark:hover::after{opacity:1}}
.btn:active{transform:scale(.97)}

/* ---------- Navigation ---------- */
.nav{position:sticky;top:0;z-index:50;height:72px;background:color-mix(in srgb,var(--bg) 80%,transparent);backdrop-filter:saturate(1.4) blur(18px);-webkit-backdrop-filter:saturate(1.4) blur(18px);border-bottom:1px solid var(--line)}
.nav-in{height:100%;display:flex;align-items:center;gap:24px}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:19px;letter-spacing:-.02em}
.mark{width:30px;height:auto;overflow:visible}
.brand:hover .mark .eyes{transform:translateX(2px);transition:transform .3s var(--ease)}
.mark .eyes{transition:transform .3s var(--ease)}
.links{display:flex;align-items:center;gap:2px;margin-left:auto}
.nl{display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:999px;color:var(--muted);font-size:13px;transition:color .15s ease,background-color .15s ease}
.nl:hover,.nl[aria-expanded="true"]{color:var(--text)}
.nl[aria-expanded="true"]{background:rgba(255,255,255,.07)}
.nav-acts{display:flex;align-items:center;gap:8px}
.sep{width:1px;height:18px;background:var(--line-2);margin:0 6px}
.menu-wrap{position:static}
.nav-in{position:relative}

/* Mega-menus: three columns, title and one line in the first two, plain links in the third, hairline rules between. */
.mega{position:absolute;top:calc(100% - 2px);right:0;width:min(880px,calc(100vw - 48px));display:grid;grid-template-columns:1fr 1fr .9fr;padding:12px;background:#0e0f10;border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.04),0 24px 64px -12px rgba(0,0,0,.85);transform-origin:top center}
.mega:not([hidden]){animation:megain .22s var(--ease)}
@keyframes megain{from{opacity:0;transform:translateY(-6px) scale(.985)}}
.mega::before{content:"";position:absolute;inset:-16px 0 auto;height:16px}
.mega-col{display:grid;align-content:start;gap:6px;padding:8px 14px}
.mega-col+.mega-col{box-shadow:inset 1px 0 0 var(--line)}
.mi{display:grid;gap:3px;padding:10px 12px;border-radius:10px;transition:background-color .15s ease}
.mi b{font-weight:550;font-size:15px;color:var(--text)}
.mi span{font-size:14px;line-height:1.45;color:var(--muted);max-width:30ch}
.mega-col.plain a{padding:9px 12px;border-radius:8px;font-size:15px;color:var(--soft);transition:background-color .15s ease,color .15s ease}
@media (hover:hover){.mi:hover,.mega-col.plain a:hover{background:var(--hover)}.mega-col.plain a:hover{color:var(--text)}}

.burger{display:none;width:40px;height:40px;border-radius:10px;place-items:center;gap:5px;align-content:center}
.burger span{display:block;width:18px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .25s var(--ease)}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
/* The phone menu covers the page below the bar, so nothing peeks out under it; the page you're on is lit. */
.sheet{position:fixed;inset:72px 0 auto;height:calc(100vh - 72px);height:calc(100dvh - 72px);overflow-y:auto;overscroll-behavior:contain;background:var(--bg);padding:12px 20px 24px;display:grid;align-content:start;gap:2px}
.sheet a{padding:12px 4px;font-size:18px;border-bottom:1px solid var(--line);color:var(--soft)}
.sheet a[aria-current="page"]{color:var(--text);font-weight:550}
.sheet-acts{display:flex;gap:10px;margin-top:16px}
.sheet-acts .btn{flex:1;border-bottom:0}

/* ---------- Hero ---------- */
.hero{padding:clamp(96px,14vw,200px) 0 56px}
.h-hero{font-weight:510;font-size:clamp(40px,4.45vw,64px);line-height:1;letter-spacing:-.022em;max-width:20ch}
.h-hero .ln{color:var(--text)}
.h-hero .ln{display:block}
.hero-row{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-top:32px}
.lede{color:var(--muted);font-size:15px;line-height:24px;letter-spacing:-.011em;max-width:640px}
.news{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-size:15px;letter-spacing:-.011em;white-space:nowrap;transition:color .15s ease}
.news b{color:var(--text);font-weight:550}
.news span{transition:transform .2s var(--ease)}
@media (hover:hover){.news:hover{color:var(--text)}.news:hover span{transform:translateX(3px)}}

/* Load-in: each line rises out of a soft blur, then the lede, then the product. */
.js .h-hero .ln,.js .hero-row,.js .stage{opacity:0;filter:blur(8px);transform:translateY(14px);animation:rise 1s var(--ease) forwards}
.js .h-hero .ln:nth-child(2){animation-delay:.08s}
.js .hero-row{animation-delay:.18s}
.js .stage{animation-delay:.3s;animation-duration:1.3s}
@keyframes rise{to{opacity:1;filter:none;transform:none}}

/* ---------- The product, framed ---------- */
.stage{position:relative;padding-bottom:40px}
/* The frame is glass, after macOS windows: a soft light inside it (the embedded app's surfaces are see-through, so the
   light shows through them), a sheen across the top, and a hairline edge lit from above that fades down the sides. */
.frame{position:relative;aspect-ratio:1280/800;border-radius:18px;overflow:hidden;background:radial-gradient(80% 70% at 18% 0%,rgba(124,134,239,.16),transparent 62%),radial-gradient(60% 60% at 100% 100%,rgba(96,190,200,.07),transparent 70%),linear-gradient(180deg,rgba(28,29,33,.9),rgba(15,16,18,.94));box-shadow:0 0 0 1px rgba(0,0,0,.55),0 40px 120px -40px rgba(0,0,0,.9);isolation:isolate}
.frame::before,.frame::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none}
.frame::before{z-index:3;background:linear-gradient(172deg,rgba(255,255,255,.06),rgba(255,255,255,0) 26%);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.frame::after{z-index:4;padding:1px;background:linear-gradient(170deg,rgba(255,255,255,.34),rgba(255,255,255,.12) 18%,rgba(255,255,255,.05) 50%,rgba(255,255,255,.09));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:.85;transition:opacity .3s ease}
.frame iframe{position:absolute;inset:0 auto auto 0;width:1280px;height:800px;border:0;transform:scale(var(--s,1)) translate(calc(var(--cx,0) * -1px),calc(var(--cy,0) * -1px));transform-origin:0 0;pointer-events:none;background:transparent;color-scheme:dark}
.frame.crop{aspect-ratio:var(--ar);-webkit-mask-image:linear-gradient(to right,#000 82%,transparent),linear-gradient(to bottom,#000 78%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 82%,transparent),linear-gradient(to bottom,#000 78%,transparent);mask-composite:intersect;border-radius:18px}
.frame.crop .frame-cover{display:none}
/* A boxed frame: the whole crop, rounded, no edge fade (other crops bleed off the right and bottom). */
.frame.crop.boxed{-webkit-mask-image:none;mask-image:none;border-radius:14px;box-shadow:0 0 0 1px rgba(0,0,0,.5),0 18px 50px -20px rgba(0,0,0,.8)}
/* Boxed, the crop is inset on all four sides, so its right and bottom edges are cut softly too. */
.frame.crop.boxed iframe{-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--cy) * 1px),#000 calc(var(--cy) * 1px + var(--fe))),linear-gradient(to right,transparent calc(var(--cx) * 1px),#000 calc(var(--cx) * 1px + var(--fe))),linear-gradient(to top,transparent calc(100% - (var(--cy) + var(--ch)) * 1px),#000 calc(100% - (var(--cy) + var(--ch)) * 1px + var(--fe))),linear-gradient(to left,transparent calc(100% - (var(--cx) + var(--cw)) * 1px),#000 calc(100% - (var(--cx) + var(--cw)) * 1px + var(--fe)));-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent calc(var(--cy) * 1px),#000 calc(var(--cy) * 1px + var(--fe))),linear-gradient(to right,transparent calc(var(--cx) * 1px),#000 calc(var(--cx) * 1px + var(--fe))),linear-gradient(to top,transparent calc(100% - (var(--cy) + var(--ch)) * 1px),#000 calc(100% - (var(--cy) + var(--ch)) * 1px + var(--fe))),linear-gradient(to left,transparent calc(100% - (var(--cx) + var(--cw)) * 1px),#000 calc(100% - (var(--cx) + var(--cw)) * 1px + var(--fe)));mask-composite:intersect}
/* A crop's content sits inset from the glass (main.js › PAD): the iframe moves in by the padding and shows only the
   crop, its cut edges softened over a few pixels so a line through the UI reads as an edge, not a slice. */
.frame.crop iframe{transform:scale(var(--s,1)) translate(calc((var(--pl,0) - var(--cx,0)) * 1px),calc((var(--pt,0) - var(--cy,0)) * 1px));--fe:0px;-webkit-mask-image:linear-gradient(to bottom,transparent calc(var(--cy,0) * 1px),#000 calc(var(--cy,0) * 1px + var(--fe))),linear-gradient(to right,transparent calc(var(--cx,0) * 1px),#000 calc(var(--cx,0) * 1px + var(--fe)));-webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent calc(var(--cy,0) * 1px),#000 calc(var(--cy,0) * 1px + var(--fe))),linear-gradient(to right,transparent calc(var(--cx,0) * 1px),#000 calc(var(--cx,0) * 1px + var(--fe)));mask-composite:intersect}
.ch-stage.narrow .frame{width:min(100%,760px);margin-left:0}
.ch-stage.narrow .float-card.approve{left:min(640px,58%);right:auto;bottom:auto;top:16%;width:min(360px,40%)}
.frame.on iframe{pointer-events:auto}
.frame-cover{position:absolute;inset:0;z-index:2;background:linear-gradient(to bottom,transparent 72%,var(--bg) 100%);pointer-events:none;transition:opacity .4s ease}
.frame.on .frame-cover{opacity:0}
.frame .ph{position:absolute;inset:0;display:grid;place-items:center;color:var(--faint);font:13px var(--mono)}
.try{position:absolute;z-index:5;right:16px;bottom:16px;height:34px;padding:0 14px;border-radius:999px;font-size:13px;font-weight:550;background:rgba(20,21,22,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--soft);opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .25s var(--ease),background-color .2s ease}
.frame:hover .try,.try:focus-visible,.frame.on .try{opacity:1;transform:none}
.frame.on .try{background:var(--text);color:var(--bg)}
/* Crops that fade off the right and bottom keep their button where the fade doesn't reach. */
.frame.crop:not(.boxed) .try{right:auto;bottom:auto;left:16px;top:16px}
@media (max-width:760px){.frame.crop:not(.boxed) .try{top:auto;bottom:14px;left:14px}}
.frame.on{box-shadow:0 0 0 2px var(--accent),0 40px 120px -40px rgba(0,0,0,.9)!important}
@media (hover:none){.try{opacity:1;transform:none}}
.hero-frame{border-radius:16px}
/* While a view loads: the hero shows a still of itself, the others a faint shimmer, and the live app fades in over
   them once it has drawn (main.js › load), so no frame is ever an empty box. */
.frame iframe{opacity:0}
.frame.loaded iframe{opacity:1}
.hero-frame:not(.loaded){background:url(posters/hero.webp) center/cover no-repeat,#0f1011}
@media (max-width:760px){.hero-frame:not(.loaded){background-image:url(posters/hero-m.webp)}}
.frame:not(.loaded):not(.hero-frame)::before{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.035) 50%,transparent 70%) 0 0/200% 100%,linear-gradient(172deg,rgba(255,255,255,.06),rgba(255,255,255,0) 26%);animation:frame-load 1.4s linear infinite}
@keyframes frame-load{to{background-position:-200% 0,0 0}}
@media (prefers-reduced-motion:reduce){.frame:not(.loaded)::before{animation:none}}
/* A floating ask over the product, like Linear's agent window: the moment Miles is built around. */
.float-card.hero-ask{left:auto;right:calc(3% - 4px);bottom:auto;top:44%;width:min(340px,30%)}
.fc-q{font-size:15px;line-height:1.4;color:var(--text);margin:2px 0 14px;letter-spacing:-.011em}
.fc-x{margin-left:auto;color:var(--faint);font-size:16px;line-height:1}
.av-tm{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.2);overflow:hidden}
.av-tm svg{width:15px;height:auto}
.js .hero-ask{opacity:0;transform:translateY(10px) scale(.98);animation:rise .9s var(--ease) .9s forwards}
@media (prefers-reduced-motion:reduce){.js .hero-ask{opacity:1;transform:none;animation:none}}
@media (max-width:1060px){.float-card.hero-ask{display:none}}
.stage-glow{position:absolute;z-index:-1;left:6%;right:6%;bottom:-40px;height:360px;background:radial-gradient(60% 70% at 50% 100%,rgba(130,150,190,.22),transparent 70%);filter:blur(30px);pointer-events:none}

/* ---------- Logos ---------- */
.logos{padding:96px 0 40px}
.logo-row{display:grid;grid-template-columns:repeat(8,1fr);align-items:center;gap:24px}
.logo-row .lg{white-space:nowrap;display:flex;align-items:center;justify-content:center;gap:12px;color:var(--text);font-weight:600;font-size:21px;letter-spacing:-.025em;opacity:.86;filter:grayscale(1) brightness(1.25);transition:opacity .3s ease,filter .3s ease}
.logo-row .lg svg{width:30px;height:30px;flex:none}
@media (hover:hover){.logo-row .lg:hover{opacity:1;filter:none}}
.cap{margin-top:40px;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}

/* ---------- Statement and figures ---------- */
.statement{padding:96px 0 40px}
.h-statement{font-weight:510;font-size:clamp(28px,3.35vw,48px);line-height:1;letter-spacing:-.022em;max-width:26em;text-wrap:pretty}
.h-statement .dim,.dim{color:var(--faint)}
/* Display-size dim text keeps its deeper grey: at this size it passes the large-text contrast bar. */
.h-statement .dim{color:#62666d}
.figs{display:grid;grid-template-columns:repeat(3,1fr);padding:72px 0 128px}
.fig{display:grid;grid-template-rows:auto 280px auto auto;padding:8px 32px 0;box-shadow:inset 1px 0 0 var(--line)}
.fig:first-of-type{padding-left:0;box-shadow:none}
.fig-n{font-size:11px;letter-spacing:.06em;color:var(--faint)}
.fig-art{display:grid;place-items:center;color:var(--line-2);overflow-x:clip}
.fig-art>svg{width:min(260px,100%);height:auto;max-height:240px;overflow:visible}
.fig-art .ln-a{stroke:rgba(255,255,255,.28);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.fig-art .ln-b{stroke:rgba(255,255,255,.12);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.fig-art .fill{fill:var(--bg)}
.fig-art .glow{stroke:var(--accent);stroke-width:1.3;fill:none;vector-effect:non-scaling-stroke;opacity:.95;stroke-linecap:round;stroke-linejoin:round}
.fig-art .dash{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:2 3;fill:none;vector-effect:non-scaling-stroke}
.fig-art .ln-c{stroke:rgba(255,255,255,.045);stroke-width:1;fill:none;vector-effect:non-scaling-stroke}
.fig-art .fill-only{fill:var(--bg);stroke:none}
.fig-art .glow.wide{stroke-width:2}
.fig-art .fill-solid{fill:var(--accent)}
.fig h3{font-weight:510;font-size:15px;line-height:24px;margin-top:28px;color:var(--soft);letter-spacing:-.011em}
.fig p{margin-top:4px;color:var(--muted);font-size:15px;line-height:24px;letter-spacing:-.011em;max-width:30em}

/* ---------- Chapters ---------- */
.chapter{border-top:1px solid var(--line);padding:clamp(96px,9.5vw,136px) 0 96px}
.ch-head{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.h-ch{font-weight:510;font-size:clamp(32px,3.35vw,48px);line-height:1;letter-spacing:-.022em}
.ch-sum{font-size:clamp(19px,1.67vw,24px);line-height:1.33;color:var(--soft);letter-spacing:-.012em;max-width:24em}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:48px;color:var(--muted);font-size:15px;letter-spacing:-.011em;transition:color .15s ease}
.more span{transition:transform .2s var(--ease)}
@media (hover:hover){.more:hover{color:var(--text)}.more:hover span{transform:translateX(3px)}}
.ch-stage{position:relative;margin-top:72px}
.ch-stage .frame{width:min(100%,1180px);margin-left:auto}
.ch-stage .frame.crop{width:min(100%,calc(var(--cw) * 1.15px))}

/* Floating cards in front of the product, like Linear's Slack thread over the board. */
.float-card{position:absolute;z-index:4;left:0;bottom:-28px;width:min(420px,42%);background:rgba(18,19,20,.92);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:14px;box-shadow:inset 0 0 0 1px var(--line-2),0 30px 80px -20px rgba(0,0,0,.85);padding:16px;font-size:14px}
.float-card.approve{left:auto;right:4%;bottom:-36px;width:min(340px,38%)}
.fc-h{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid var(--line);margin-bottom:12px}
.fc-h b{font-weight:600}
.fc-h .muted,.muted{color:var(--muted)}
.dot-live{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(76,183,130,.18)}
.fc-msg{display:grid;grid-template-columns:28px 1fr;gap:10px;padding:8px 0}
.fc-msg b{font-weight:600;margin-right:6px}
.fc-msg .t{color:var(--faint);font-size:12px}
.fc-msg p{color:var(--soft);line-height:1.45;margin-top:2px}
.av{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:600;color:#08090a}
.av-a{background:#c9b8ff}.av-b{background:#9fd8c2}.av-c{background:#ffd3a3}
img.av{object-fit:cover;flex:none}
/* People drawn as a photo rather than initials (decorative; the name sits beside each one): Tamish and Priyanshu. */
.av.pf,.vig .av.xs.pf{background-color:#1c1d20;background-position:center;background-size:cover;background-repeat:no-repeat;color:transparent;font-size:0}
.av.pf-tm,.vig .av.xs.pf-tm{background-image:url(avatars/tamish.webp)}
.av.pf-pr,.vig .av.xs.pf-pr{background-image:url(avatars/daisy.webp)}
.fc-compose{margin-top:10px;padding:12px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line);color:var(--soft);min-height:64px}
.mention{background:rgba(122,162,255,.18);color:#b7caff;border-radius:4px;padding:1px 4px}
.caret{display:inline-block;width:1.5px;height:1.05em;background:var(--text);vertical-align:-2px;margin-left:2px;animation:blink 1.1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.pill{margin-left:auto;font-size:12px;padding:2px 8px;border-radius:999px;background:rgba(242,201,76,.12);color:var(--warn)}
.fc-dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.fc-dl dt{color:var(--muted)}
.fc-dl dd{margin:0;text-align:right;color:var(--soft)}
.fc-dl code{font:12px var(--mono);background:rgba(255,255,255,.06);padding:2px 6px;border-radius:5px}
.num{font-variant-numeric:tabular-nums;font-weight:600}

/* "Features" row: a label, then items that open to one line each. */
.feats{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:96px}
.feats-l{color:var(--faint);font-size:15px}
.feats-g{display:grid;grid-template-columns:1fr 1fr;column-gap:32px}
.feats-g details{padding:6px 0;border-left:1px solid transparent}
.feats-g details:nth-child(even){padding-left:32px;box-shadow:inset 1px 0 0 var(--line)}
.feats-g summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer;color:var(--soft);font-size:16px;transition:color .15s ease}
.feats-g summary::-webkit-details-marker{display:none}
.feats-g summary::after{content:"+";color:var(--faint);font-size:17px;transition:transform .25s var(--ease)}
.feats-g details[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){.feats-g summary:hover{color:var(--text)}}
.feats-g p{color:var(--muted);font-size:14px;line-height:1.5;margin-top:6px;max-width:36ch;animation:fadein .3s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(-3px)}}

/* Deployment cards */
.deploy-g{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:72px}
.dcard{padding:28px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .25s ease,transform .25s var(--ease)}
@media (hover:hover){.dcard:hover{box-shadow:inset 0 0 0 1px var(--line-2);transform:translateY(-2px)}}
.dcard h3{font-weight:550;font-size:19px;margin-top:56px;letter-spacing:-.015em}
.dcard p{color:var(--muted);margin-top:6px}
.dcard ul{list-style:none;padding:16px 0 0;margin:16px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:14px;color:var(--soft)}
.dcard li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ok);margin-right:10px;vertical-align:2px}


/* ---------- Pricing ---------- */
.pricing{border-top:1px solid var(--line);padding:120px 0}
.pricing .cl-head{gap:24px;flex-wrap:wrap}
.plans{display:grid;grid-template-columns:repeat(4,1fr);margin-top:48px;border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.plan{display:flex;flex-direction:column;padding:28px 24px;background:var(--panel)}
.plan+.plan{box-shadow:inset 1px 0 0 var(--line)}
.plan h3{font-weight:550;font-size:16px}
.price{display:flex;align-items:baseline;gap:8px;margin-top:20px}
.price .num{font-size:36px;font-weight:560;letter-spacing:-.02em}
.price small{color:var(--muted);font-size:14px}
.pdesc{color:var(--muted);font-size:14px;margin-top:6px;min-height:42px}
.plan ul{list-style:none;padding:0;margin:20px 0 28px;display:grid;gap:10px;font-size:14px;color:var(--soft);flex:1}
.plan li::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--muted);margin-right:10px;vertical-align:2px}
.plan .btn{height:38px;font-size:14px}

/* ---------- Promises ---------- */
.promises{display:grid;grid-template-columns:1.65fr 1fr;gap:8px;padding:0}
.promise{position:relative;overflow:hidden;min-height:480px;border-radius:12px;padding:28px 28px 32px;display:flex;flex-direction:column;justify-content:space-between;color:#0b0c0e}
.promise.blue{background:linear-gradient(160deg,#d6e6ff,#e6dcff)}
.promise.lime{background:#e3f224}
.pq{font-weight:500;font-size:clamp(26px,2.5vw,34px);line-height:1.12;letter-spacing:-.02em;max-width:17ch;position:relative;z-index:1}
.pfoot{display:flex;align-items:center;gap:14px;font-size:14px;position:relative;z-index:1}
.pk{font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-right:14px;border-right:1px solid rgba(0,0,0,.18)}
.pmark{position:absolute;right:-60px;top:-30px;width:520px;height:520px;fill:none;stroke:rgba(255,255,255,.55);stroke-width:2.4}
.promise-note{display:flex;justify-content:space-between;align-items:baseline;padding:28px 0 0;color:var(--muted)}
.promise-note .more{margin:0}

/* ---------- Closing and footer ---------- */

/* ---------- Scroll reveal: opacity and a short rise, once ---------- */
.js [data-reveal]{opacity:0;transform:translateY(16px);transition:opacity .8s var(--ease) var(--d,0ms),transform .9s var(--ease) var(--d,0ms)}
.js [data-reveal].in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal],.js .h-hero .ln,.js .hero-row,.js .stage{opacity:1!important;transform:none!important;filter:none!important;animation:none!important;transition:none!important}
  .caret{animation:none}
}

/* ---------- Tablet ---------- */
@media (max-width:1060px){
  :root{--gut:40px}
  .links .nl[href$="#contact"]{display:none}
  .logo-row{grid-template-columns:repeat(4,1fr);row-gap:32px}
  .figs{grid-template-columns:1fr;row-gap:56px;padding-bottom:96px}
  .fig{padding:24px 0 0;box-shadow:inset 0 1px 0 var(--line);grid-template-rows:auto 220px auto auto}
  .fig-art>svg{max-height:200px}
  .fig:first-of-type{box-shadow:inset 0 1px 0 var(--line)}
  .feats{grid-template-columns:1fr;gap:16px}
  .deploy-g{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr 1fr}
  .plan:nth-child(3){box-shadow:inset 0 1px 0 var(--line)}
  .plan:nth-child(4){box-shadow:inset 1px 0 0 var(--line),inset 0 1px 0 var(--line)}
}
/* ---------- Phone ---------- */
@media (max-width:760px){
  :root{--gut:20px}
  .links,.nav-acts .sep,.nav-acts .nl{display:none}
  .burger{display:grid}
  .nav-in{justify-content:space-between}
  .hero{padding:72px 0 40px}
  .hero-row{flex-direction:column;align-items:flex-start;gap:20px}
  .wrap-wide{width:calc(100% - 24px)}
  .frame{border-radius:14px}
  .ch-head{grid-template-columns:1fr;gap:20px}
  .ch-stage{margin-top:40px}
  .float-card,.float-card.approve{position:relative;inset:auto;width:auto;margin:-24px 12px 0}
  .ch-stage.narrow .float-card.approve{left:auto;top:auto;width:auto}
  .ch-stage .frame.crop{width:100%}
  .feats{margin-top:56px}
  .feats-g{grid-template-columns:1fr}
  .feats-g details:nth-child(even){padding-left:0;box-shadow:none}
  .promises{grid-template-columns:1fr}
  .promise{min-height:300px}
  .promise-note{flex-direction:column;gap:12px}
  .logo-row{grid-template-columns:repeat(2,1fr)}
  .plans{grid-template-columns:1fr}
  .plan+.plan,.plan:nth-child(3),.plan:nth-child(4){box-shadow:inset 0 1px 0 var(--line)}
}

/* Approvals: the request floats in front of the policy it answers to. */
.float-card.ask{width:min(380px,40%)}
.float-card.ask .fc-h .muted{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}


/* Each promise carries one large, quiet mark: the mascot in white, the lock in ink. */
.pmark{position:absolute;pointer-events:none}
.pmark[data-mascot]{right:48px;bottom:-34px;width:340px;opacity:.55;mix-blend-mode:soft-light}
.pmark[data-mascot] svg{width:100%;height:auto;filter:brightness(0) invert(1)}
.pmark.lock{right:-24px;bottom:-56px;width:250px;height:250px;fill:none;stroke:rgba(11,12,14,.12);stroke-width:1.1}
@media (max-width:760px){.pmark[data-mascot]{width:260px}.pmark.lock{width:200px;height:200px}}

@media (max-width:760px){
  .float-card.spend,.float-card.ask{width:auto}
}
@media (max-width:1060px){.promises{grid-template-columns:1fr}.promise{min-height:340px}}

/* ---------- Live frames ---------- */
.frame iframe{transition:opacity .25s ease}
.frame.swapping iframe{opacity:0}
.frame{transition:box-shadow .3s ease}
@media (hover:hover){.frame:hover::after{opacity:1}}
/* Feature items are tabs for the visual above: the open one is lit. */
.feats-g details[open] summary{color:var(--text)}
.feats-g details[data-route] summary::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:2px;opacity:0;transform:scale(.4);transition:opacity .2s ease,transform .25s var(--ease)}
.feats-g details[open][data-route] summary::before{opacity:1;transform:none}
/* Playing through (main.js): a hairline under the open feature fills, and when it's full the next one opens. */
.feats-g details{position:relative}
.feats-g.auto details[open]::after{content:"";position:absolute;left:0;bottom:-3px;width:min(100%,200px);height:1px;border-radius:1px;background:var(--accent);opacity:.8;transform:scaleX(0);transform-origin:left;animation:feat-run 4.5s linear forwards}
.feats-g.auto details[open]:nth-child(even)::after{left:32px;width:min(100% - 32px,200px)}
.feats-g.auto details[open]::before{content:"";position:absolute;left:0;bottom:-3px;width:min(100%,200px);height:1px;background:var(--line)}
.feats-g.auto details[open]:nth-child(even)::before{left:32px;width:min(100% - 32px,200px)}
.feats-g.paused details[open]::after{animation-play-state:paused}
@keyframes feat-run{to{transform:scaleX(1)}}
@media (max-width:760px){.feats-g.auto details[open]:nth-child(even)::after,.feats-g.auto details[open]:nth-child(even)::before{left:0;width:min(100%,200px)}}

/* ---------- Promises, quieter ---------- */
.promise{color:var(--text);background:radial-gradient(120% 90% at 100% 0%,rgba(124,134,239,.12),transparent 55%),var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.promise+.promise{background:radial-gradient(120% 90% at 100% 0%,rgba(76,183,130,.10),transparent 55%),var(--panel)}
.promise .pk{border-right-color:var(--line-2);color:var(--muted)}
.promise .pfoot{color:var(--soft)}
.pmark[data-mascot]{mix-blend-mode:normal;opacity:.08}
.pmark[data-mascot] svg{filter:grayscale(1) brightness(2)}
.pmark.lock{stroke:rgba(255,255,255,.07)}

/* =================================================================================================================
   Figure vignettes (iso.js › computer, approve, record): small, real product moments at illustration scale. One card
   language (the hero cards'), one canvas size, a soft fade where the product crops off, one accent moment each.
   ================================================================================================================= */
.vig{position:relative;width:min(300px,100%);height:236px;margin:0 auto;font:400 11px/1.4 var(--font);letter-spacing:-.005em;color:var(--soft);text-align:left;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent 99%);mask-image:linear-gradient(to right,#000 82%,transparent 99%)}
.vig.v-log{-webkit-mask-image:linear-gradient(to right,#000 80%,transparent 99%),linear-gradient(to bottom,#000 82%,transparent 99%);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 80%,transparent 99%),linear-gradient(to bottom,#000 82%,transparent 99%);mask-composite:intersect}
.vig .mono{font-family:var(--mono);font-size:10px;letter-spacing:0}
.vig .dim{color:var(--faint)}
.vig .num{font-weight:600;color:var(--text)}
.vig code{font:10px var(--mono);color:var(--soft);background:rgba(255,255,255,.06);padding:1px 5px;border-radius:4px}
.vc{position:absolute;border-radius:12px;background:linear-gradient(180deg,#17181a,#121314);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.04),0 24px 60px -28px rgba(0,0,0,.95)}
.vc-bar{display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;border-bottom:1px solid var(--line)}
.vc-bar b{font-weight:600;color:var(--text)}
.vc-lights{display:flex;gap:4px;margin-right:4px}.vc-lights i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.14)}
.vc-live{margin-left:auto;display:inline-flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}
.vc-live i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 2.5px rgba(76,183,130,.18)}
.vig .av.xs{width:16px;height:16px;font-size:7px;flex:none;position:relative;background:#ffd3a3;color:#08090a}
.vig .av.xs.av-a{background:#c9b8ff}
.vig .av-tm.xs,.vig .ap-h .av-tm{width:16px;height:16px;border-radius:5px;flex:none}
.vig .av-tm svg{width:12px}
.js .fig:not(.in) .vig *{animation-play-state:paused}

/* FIG 0.1 · Ledger's computer, the cursor working down a vendor portal. */
.v-vm .vc{left:0;top:12px;width:340px}
.vm-page{position:relative;padding:10px 12px 8px}
.vm-head{display:flex;align-items:baseline;justify-content:space-between;height:16px;margin-bottom:6px;padding-right:40px}
.vm-head b{font-weight:600;color:var(--text);font-size:11.5px}.vm-head .mono{color:var(--faint)}
.vm-row{display:grid;grid-template-columns:1fr .8fr .9fr;gap:8px;align-items:center;height:22px;padding:0 6px;margin-right:40px;border-bottom:1px solid rgba(255,255,255,.05)}
.vm-row.th{color:var(--faint);font-size:10px}
.vm-row .r{text-align:right}
.vm-hl{position:absolute;left:12px;right:52px;top:54px;height:22px;border-radius:5px;background:rgba(124,134,239,.13);box-shadow:inset 0 0 0 1px rgba(124,134,239,.45);transform:translateY(22px);animation:vm-move 6s ease-in-out infinite}
.vm-ptr{position:absolute;left:206px;top:62px;width:11px;transform:translateY(22px);animation:vm-move 6s ease-in-out infinite;animation-delay:-.12s}
.vm-ptr path{fill:#f7f8f8;stroke:#08090a;stroke-width:1;stroke-linejoin:round}
@keyframes vm-move{0%,18%{transform:translateY(22px)}32%,56%{transform:translateY(66px)}70%,86%{transform:translateY(0)}100%{transform:translateY(22px)}}
.vc-foot{display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 52px 0 11px;border-top:1px solid var(--line)}
.vc-watch{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:10px}
.vc-btn{display:inline-flex;align-items:center;height:20px;padding:0 9px;border-radius:6px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--soft);font-size:10px;font-weight:550}

/* FIG 0.2 · Three approvals waiting; the front one is being held, its first approver is in. */
.ap-back{left:0;right:-24px;padding:7px 12px;height:60px;display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ap-back .ap-t{color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ap-back .mono{flex:none;padding-right:30px}
.ap-back.b2{top:4px;transform:scale(.9);transform-origin:50% 0;opacity:.45}
.ap-back.b1{top:22px;transform:scale(.95);transform-origin:50% 0;opacity:.7}
.ap-front{left:0;right:-24px;top:42px;padding:12px 36px 12px 12px}
.ap-h{display:flex;align-items:center;gap:8px}
.ap-h b{font-weight:600;color:var(--text);font-size:11.5px}
.ap-h .num{margin-left:auto;font-size:11.5px}
.ap-dl{display:grid;grid-template-columns:auto 1fr;gap:7px 12px;margin:11px 0 0;align-items:center}
.ap-dl dt{color:var(--faint);font-size:10.5px}.ap-dl dd{margin:0;display:flex;align-items:center;gap:5px;color:var(--soft)}
.ap-arrow{color:var(--faint);margin:0 1px}
.ap-foot{display:flex;justify-content:space-between;margin-top:9px;font-size:10px;color:var(--faint)}
.av.ok i{position:absolute;right:-3px;bottom:-3px;width:9px;height:9px;border-radius:50%;background:#f7f8f8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='m2.6 5.2 1.6 1.6 3.2-3.4' fill='none' stroke='%2308090a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;box-shadow:0 0 0 1.5px #141516;animation:ap-tick 5s ease-in-out infinite}
@keyframes ap-tick{0%,8%{transform:scale(0)}16%,90%{transform:scale(1)}100%{transform:scale(0)}}
.av.wait{animation:ap-wait 2.4s ease-in-out infinite}
@keyframes ap-wait{50%{box-shadow:0 0 0 3px rgba(255,255,255,.12)}}

/* FIG 0.3 · The log: a new step arrives, links to the last, and the chain stays verified. */
.v-log .vc{left:0;right:-6px;top:12px;height:250px;overflow:hidden}
.v-log .vc-bar{padding-right:22px}
.lg-ok{margin-left:auto;display:inline-flex;align-items:center;gap:5px;height:18px;padding:0 7px 0 5px;border-radius:999px;background:rgba(124,134,239,.13);box-shadow:inset 0 0 0 1px rgba(124,134,239,.35);color:#aeb5ff;font-size:10px;font-weight:550}
.lg-ok svg{width:11px;height:11px}
.lg-list{position:relative;height:200px;overflow:hidden}
.lg-move{position:relative;animation:lg-move 6s ease-in-out infinite}
@keyframes lg-move{0%{transform:translateY(-30px);opacity:0}8%{opacity:1}16%{transform:translateY(-30px)}32%,88%{transform:translateY(0);opacity:1}97%,100%{transform:translateY(0);opacity:0}}
.lg-row{display:grid;grid-template-columns:10px 48px minmax(0,1fr) 16px auto;gap:7px;align-items:center;height:30px;padding:0 22px 0 12px;border-bottom:1px solid rgba(255,255,255,.05)}
.lg-row code{justify-self:start;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lg-t{color:var(--faint)}.lg-h{color:var(--muted);text-align:right;white-space:nowrap}
.lg-row>*{min-width:0}
.lg-dot{position:relative;z-index:1;width:7px;height:7px;border-radius:50%;background:#141516;box-shadow:inset 0 0 0 1px rgba(255,255,255,.32)}
.lg-row.new{animation:lg-new 6s ease-in-out infinite}
@keyframes lg-new{0%,18%{opacity:0}34%,100%{opacity:1}}
.lg-line{position:absolute;left:15.5px;top:45px;bottom:0;width:1px;background:rgba(255,255,255,.12)}
.lg-link{position:absolute;left:15.5px;top:15px;height:30px;width:1px;background:rgba(255,255,255,.5);transform-origin:top;animation:lg-link 6s ease-in-out infinite}
@keyframes lg-link{0%,26%{transform:scaleY(0)}42%,100%{transform:scaleY(1)}}
@media (prefers-reduced-motion:reduce){
  .vig *{animation:none!important}
  .vm-hl,.vm-ptr{transform:translateY(22px)}
  .lg-move{transform:none;opacity:1}.lg-row.new{opacity:1}.lg-link{transform:none}
  .v-ap .hold.mini .hold-fill{transform:scaleX(.62)}
}

/* =================================================================================================================
   Hold to approve: a real control. Press and hold (pointer, Enter or Space); a blue fill sweeps in 1.2 s, letting go
   early slides it back, and finishing turns it green and says what happened. main.js › wireHold.
   ================================================================================================================= */
.hold{position:relative;display:grid;place-items:center;width:100%;margin-top:16px;height:40px;border:0;border-radius:11px;font:600 14px/1 var(--font);letter-spacing:-.01em;background:linear-gradient(180deg,#fdfdff,#e3e9f8);color:#0b0d12;overflow:hidden;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;-webkit-tap-highlight-color:transparent;box-shadow:inset 0 0 0 1px rgba(150,170,225,.75),inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.45),0 8px 22px -12px rgba(124,150,239,.5);transition:transform .2s var(--ease),box-shadow .25s ease,background .3s ease}
.hold-fill{position:absolute;inset:0;background:linear-gradient(90deg,#d3dcff,#aebfff);transform:scaleX(var(--p,0));transform-origin:left;transition:transform .35s cubic-bezier(.33,1,.68,1)}
.hold.holding{transform:scale(.98)}
.hold.holding .hold-fill{transition:none}
.hold:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.hold .ht{position:relative;display:inline-flex;align-items:center;gap:8px}
.hold .ht svg{width:15px;height:15px}
.hold.done{background:linear-gradient(180deg,#e9fbf1,#c9f0da);color:#06210f;cursor:default;box-shadow:inset 0 0 0 1px rgba(76,183,130,.6),inset 0 1px 0 #fff,0 1px 2px rgba(0,0,0,.45),0 8px 22px -12px rgba(76,183,130,.6)}
.hold.done .hold-fill{opacity:0}
.hold.done .ht{animation:hold-in .3s ease-out}
@keyframes hold-in{from{opacity:0;transform:translateY(3px)}}
.hold-hint{display:block;margin-top:8px;text-align:center;font-size:12px;color:var(--faint)}
/* The same button at illustration scale, held part of the way. */
.hold.mini{display:grid;height:26px;margin-top:12px;border-radius:8px;font-size:11px;cursor:default;pointer-events:none}
.hold.mini .hold-fill{transition:none;animation:ap-fill 5s ease-in-out infinite}
@keyframes ap-fill{0%,10%{transform:scaleX(.06)}72%,88%{transform:scaleX(.74)}100%{transform:scaleX(.06)}}
@media (prefers-reduced-motion:reduce){.hold,.hold-fill{transition:none}.hold.done .ht{animation:none}}

/* =================================================================================================================
   The Slack thread: a composer with a send button. Sending posts the message; the teammate works, then replies.
   ================================================================================================================= */
.fc-compose{display:grid;gap:10px;min-height:0}
.fc-text{min-height:40px}
.fc-bar{display:flex;align-items:center;gap:4px;color:var(--faint)}
.fc-bar .fc-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:7px}
.fc-bar .fc-ic svg{width:15px;height:15px}
.fc-send{margin-left:auto;display:grid;place-items:center;width:32px;height:28px;border-radius:8px;background:#007a5a;color:#fff;cursor:pointer;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(0,0,0,.4);transition:transform .2s var(--ease),background-color .2s ease,opacity .2s ease}
.fc-send svg{width:15px;height:15px}
@media (hover:hover){.fc-send:hover{background:#008a66}}
.fc-send:active{transform:scale(.9)}
.fc-send[disabled]{background:rgba(255,255,255,.08);color:var(--faint);cursor:default;box-shadow:none}
.fc-send.replay{background:rgba(255,255,255,.08);color:var(--soft)}
.fc-msg.enter{animation:msg-in .45s var(--ease)}
@keyframes msg-in{from{opacity:0;transform:translateY(8px)}}
.fc-msg.leave{animation:msg-out .35s var(--ease) forwards}
@keyframes msg-out{to{opacity:0;transform:translateY(-6px);height:0;padding:0;margin:0}}
.fc-msg .av-tm{width:28px;height:28px;border-radius:8px}
.fc-msg .av-tm svg{width:21px}
.fc-work{display:flex;align-items:center;gap:8px;margin-top:3px;color:var(--muted);font-size:13px}
.fc-work i{width:12px;height:12px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18);border-top-color:#e9e36b;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}
.fc-msg .tag{display:inline-block;margin:0 6px 0 2px;padding:0 6px;border-radius:4px;background:rgba(255,255,255,.07);color:var(--muted);font-size:11px;font-weight:500;vertical-align:1px}
@media (prefers-reduced-motion:reduce){.fc-msg.enter,.fc-msg.leave,.fc-work i{animation:none}}

/* =================================================================================================================
   AI spend: the number, a chart of spend so far, the forecast with its range, and the budget it crosses.
   ================================================================================================================= */
.float-card.spend{width:min(360px,38%);padding:18px 18px 16px}
.sp-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.sp-l{font-size:13px;color:var(--muted)}
.sp-per{font:11px var(--mono);color:var(--faint)}
.sp-v{display:flex;align-items:baseline;gap:8px;margin-top:6px}
.sp-v b{font-size:30px;line-height:1;color:var(--text);font-weight:600;letter-spacing:-.025em}
.sp-v span{color:var(--muted);font-size:14px}
.sp-chart{display:block;width:100%;height:auto;margin:14px 0 4px;overflow:visible}
.sp-chart line,.sp-chart polyline{vector-effect:non-scaling-stroke;fill:none}
.sp-grid{stroke:rgba(255,255,255,.05)}
.sp-cap{stroke:rgba(255,255,255,.4);stroke-dasharray:3 3}
.sp-capl{fill:var(--muted);font:500 8.5px var(--font)}
.sp-band{fill:rgba(240,180,76,.12)}
.sp-area{fill:url(#sp-fill)}
.sp-act{stroke:#f0b44c;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.sp-fc{stroke:#f0b44c;stroke-width:1.5;stroke-dasharray:4 4;opacity:.75}
.sp-today{stroke:rgba(255,255,255,.18);stroke-dasharray:2 3}
.sp-now{fill:#f0b44c;stroke:#121314;stroke-width:2}
.sp-hit{fill:#ff7a59;stroke:#121314;stroke-width:1.5}
.sp-hit-ring{fill:none;stroke:#ff7a59;stroke-width:1;transform-box:fill-box;transform-origin:center;animation:sp-ring 2.4s ease-out infinite}
@keyframes sp-ring{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.2);opacity:0}}
.js .spend:not(.in) .sp-act{stroke-dashoffset:1}
.js .spend .sp-act{transition:stroke-dashoffset 1.4s var(--ease) .3s}
.js .spend :is(.sp-fc,.sp-band,.sp-area,.sp-hit,.sp-hit-ring,.sp-now){transition:opacity .6s ease 1.3s}
.js .spend:not(.in) :is(.sp-fc,.sp-band,.sp-area,.sp-hit,.sp-hit-ring,.sp-now){opacity:0}
.sp-axis{position:relative;height:14px;font:10px var(--mono);color:var(--faint)}
.sp-axis span{position:absolute;top:0}.sp-axis span:nth-child(2){left:40%;translate:-50% 0}.sp-axis span:last-child{right:0}
.sp-foot{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.sp-chip{display:inline-flex;align-items:center;gap:6px;padding:3px 9px 3px 8px;border-radius:999px;background:rgba(240,180,76,.12);color:#f0b44c;font-size:12px}
.sp-chip i{width:6px;height:6px;border-radius:50%;background:#f0b44c}
.sp-chip b{font-weight:600}
.sp-when{font-size:12px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.sp-hit-ring{animation:none;opacity:0}.js .spend .sp-act{transition:none}}
@media (max-width:760px){.float-card.spend{width:auto}}

/* =================================================================================================================
   Closing: one card. A soft sky with the loop Miles runs, and a sheet over it with a stepped notch (after the AI
   workflow cards reference). Hovering raises the sheet to show what the call is; touch screens show it open.
   ================================================================================================================= */
.closing{padding:clamp(140px,13vw,180px) 0 clamp(90px,9vw,130px)}
.cc{--sheet:#141517;--r:28px;position:relative;width:min(760px,100% - 2 * var(--gut));height:560px;padding:10px;border-radius:38px;background:var(--sheet);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.06),0 60px 140px -50px rgba(0,0,0,.95),0 0 120px -30px rgba(124,150,239,.18)}
/* The sky: a quiet blue, lighter toward the bottom left, with two soft clouds. */
.cc-sky{position:absolute;z-index:0;inset:10px;border-radius:var(--r);overflow:hidden;background:radial-gradient(70% 55% at 22% 100%,rgba(226,238,248,.85),transparent 70%),radial-gradient(45% 30% at 80% 18%,rgba(255,255,255,.22),transparent 70%),linear-gradient(180deg,#4f6e95 0%,#7395bd 42%,#a9c7e2 100%)}
.cc-sky::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,9,10,.18),transparent 40%);pointer-events:none}
.cc-flow{position:absolute;left:50%;top:28px;width:600px;height:190px;translate:-50% 0;scale:var(--fs,1);transform-origin:50% 0}
/* When the sheet rises on hover, the loop shrinks and lifts with it, so the sheet never slices a pill. */
@media (min-width:761px){.cc-flow{transition:scale .55s var(--ease),top .55s var(--ease)}.cc:is(:hover,:focus-within) .cc-flow{scale:.7;top:12px}}
.fl-path{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.fl-path path{fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.5;vector-effect:non-scaling-stroke}
.fl-dot{position:absolute;left:0;top:0;width:9px;height:9px;offset-anchor:50% 50%;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25),0 0 18px #fff;offset-path:path("M118 46 H488 C560 46 560 128 488 128 H118 C46 128 46 46 118 46 Z");offset-rotate:0deg;animation:fl-run 7s linear infinite}
@keyframes fl-run{to{offset-distance:100%}}
.fl-row{position:absolute;display:flex;align-items:center;gap:10px}
.fl-row.r1{left:88px;top:28px}.fl-row.r2{left:60px;top:110px}.fl-row.r3{left:330px;top:160px}
.fl-p{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;background:#fff;color:#0b0c0e;font:650 12.5px/1 var(--font);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap;box-shadow:0 6px 18px -8px rgba(20,40,80,.45)}
.fl-p i{display:grid;place-items:center;width:26px;height:26px;margin-left:-11px;border-radius:50%;background:#0b0c0e;color:#fff}
.fl-p i svg{width:14px;height:14px;--icon-sw:2.2}
.fl-p.dark{background:#0b0c0e;color:#fff;box-shadow:0 6px 18px -8px rgba(0,0,0,.6)}
.fl-row.r3 .fl-p{height:30px;font-size:11px}.fl-row.r3 .fl-p i{width:22px;height:22px}
/* The sheet: a tongue on the left reaches higher than the body; the step between them is rounded both ways. */
.cc-sheet{position:absolute;z-index:1;isolation:isolate;left:10px;right:10px;bottom:10px;padding:26px 30px 24px;background:var(--sheet);border-radius:0 var(--r) var(--r) var(--r)}
.cc-sheet::before{content:"";position:absolute;left:0;bottom:100%;width:calc(100% - 150px);height:44px;background:var(--sheet);border-radius:var(--r) var(--r) 0 0}
/* The tab is 44px tall: its corner takes var(--r) of that and this fillet the rest, so the two curves meet in one S. */
.cc-sheet::after{--f:calc(44px - var(--r));content:"";position:absolute;left:calc(100% - 150px);bottom:100%;width:var(--f);height:var(--f);background:radial-gradient(circle at 100% 0,transparent calc(var(--f) - .5px),var(--sheet) var(--f))}
.cc-notch{position:absolute;right:0;bottom:100%;width:150px;height:44px;display:grid;place-items:center;padding-left:calc(var(--r) - 6px)}
.cc-tag{position:relative;z-index:1;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 13px;border-radius:999px;background:rgba(20,21,23,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);color:var(--soft);font:500 12px var(--font)}
.cc-tag i{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(76,183,130,.2)}
.cc-meta{position:relative;margin-top:-34px;font-size:15px;color:var(--muted)}
.cc-meta span{margin:0 6px;color:var(--faint);font-size:10px;vertical-align:2px}
.cc-h{margin-top:8px;padding-bottom:22px;border-bottom:1px solid var(--line);font-weight:510;font-size:clamp(28px,3.4vw,38px);line-height:1.08;letter-spacing:-.025em;text-wrap:balance;color:var(--text)}
.cc-more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}
.cc-more>div{overflow:hidden;min-height:0}
.cc-desc{padding-top:18px;color:var(--muted);font-size:15px;line-height:1.5;max-width:44ch;opacity:0;transition:opacity .35s ease}
.cc-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding-bottom:4px;opacity:0;transition:opacity .35s ease}
.cc-tags span{height:30px;display:inline-flex;align-items:center;padding:0 13px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-2);color:var(--soft);font-size:13px}
.cc-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.cc-crew{display:flex;align-items:center}
.cc-av{display:grid;place-items:center;width:42px;height:42px;margin-left:-10px;border-radius:50%;background:color-mix(in oklab,var(--c,#2a2b2e) 30%,#1c1d20);box-shadow:0 0 0 3px var(--sheet);overflow:hidden}
.cc-av:first-child{margin-left:0}
.cc-av .mascot{width:30px;margin-top:4px}
.cc-av.cc-plus{background:#232427;color:var(--soft);font-size:13px;font-weight:550}
.cc:is(:hover,:focus-within) .cc-more{grid-template-rows:1fr}
.cc:is(:hover,:focus-within) .cc-desc,.cc:is(:hover,:focus-within) .cc-tags{opacity:1;transition-delay:.15s}
@media (hover:none){.cc .cc-more{grid-template-rows:1fr}.cc .cc-desc,.cc .cc-tags{opacity:1}}
.mascot{display:block;height:auto;overflow:visible}
.mascot .m-side{fill:var(--c)}
.mascot .m-side2{fill:color-mix(in oklab,var(--c) 70%,#000)}
.mascot .m-led{fill:var(--c)}
@media (prefers-reduced-motion:reduce){.fl-dot{animation:none;offset-distance:12%}.cc-more,.cc-desc,.cc-tags,.cc-flow{transition:none}}
@media (max-width:760px){
  .closing{padding:110px 0 90px}
  .cc{height:auto;padding:8px;border-radius:30px;--r:22px}
  .cc-sky{position:relative;inset:auto;height:250px}
  .cc-flow{--fs:.55;top:24px}
  .cc-sheet{position:relative;left:auto;right:auto;bottom:auto;margin-top:-44px;padding:26px 20px 20px}
  .cc-sheet::before{width:calc(100% - 136px)}.cc-sheet::after{left:calc(100% - 136px)}.cc-notch{width:136px;padding-left:calc(var(--r) - 8px)}
  .cc-tag{height:26px;padding:0 10px;font-size:12px}
  .cc-meta{margin-top:-30px;font-size:14px}
  .cc-foot{flex-direction:column;align-items:stretch}
  .cc-foot .cta-pill{width:100%}
}

/* =================================================================================================================
   Book a call, animated (after the reference video, flipped for the dark page: a light pill). On hover or focus the
   label slides up and blurs out, a teammate and "you" blur in, "you" slides over to join the teammate and "Let's
   talk!" arrives. Leaving reverses it, the label dropping back in from above.
   ================================================================================================================= */
.cta-pill{position:relative;display:inline-grid;place-items:center;width:200px;height:54px;border-radius:999px;overflow:hidden;background:linear-gradient(180deg,#fdfdfe,#dfe1e6);color:#08090a;font:650 14px/1 var(--font);letter-spacing:.04em;text-transform:uppercase;box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.12),0 0 0 1px rgba(255,255,255,.12),0 2px 4px rgba(0,0,0,.5),0 16px 34px -14px rgba(200,210,255,.35);transition:transform .2s var(--ease),box-shadow .3s ease;isolation:isolate}
.cta-pill:active{transform:scale(.97)}
.cta-pill:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cta-pill>span{position:absolute;transition:transform .45s var(--ease),opacity .35s ease,filter .35s ease}
.cp-label{transition-delay:.18s!important}
.cp-a,.cp-you{top:7px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;opacity:0;filter:blur(6px);transform:scale(.7)}
.cp-a{left:8px;background:#e7ecfb;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06);overflow:hidden}
.cp-a .mascot{width:30px;margin-top:5px}
.cp-you{left:76px;background:#08090a;color:#fff;font-size:10.5px;letter-spacing:.03em;box-shadow:0 0 0 2px #f1f2f5}
.cp-plus{left:58px;font-size:15px;font-weight:500;opacity:0;filter:blur(4px)}
.cp-talk{left:84px;font-size:14px;letter-spacing:-.005em;text-transform:none;font-weight:600;opacity:0;filter:blur(6px);transform:translateX(10px)}
@media (hover:hover){.cta-pill:hover{box-shadow:inset 0 1px 0 #fff,inset 0 -2px 3px rgba(0,0,0,.12),0 0 0 1px rgba(255,255,255,.16),0 2px 4px rgba(0,0,0,.5),0 20px 44px -14px rgba(200,210,255,.5)}}
/* In: the label leaves at once; the two circles arrive; then "you" joins the teammate and the words come. */
.cta-pill:is(:hover,:focus-visible) .cp-label{transform:translateY(-140%);opacity:0;filter:blur(6px);transition-delay:0s!important}
.cta-pill:is(:hover,:focus-visible) :is(.cp-a,.cp-you){opacity:1;filter:none;transform:none;transition-delay:.08s}
.cta-pill:is(:hover,:focus-visible) .cp-plus{opacity:1;filter:none;transition-delay:.08s;animation:cp-plus .9s forwards}
.cta-pill:is(:hover,:focus-visible) .cp-you{transform:translateX(-40px);transition:transform .5s cubic-bezier(.65,0,.35,1) .62s,opacity .35s ease .08s,filter .35s ease .08s}
.cta-pill:is(:hover,:focus-visible) .cp-talk{opacity:1;filter:none;transform:none;transition-delay:.78s}
@keyframes cp-plus{0%,62%{opacity:1}80%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .cta-pill>span{transition:opacity .15s ease!important;filter:none!important;transform:none!important}
  .cta-pill:is(:hover,:focus-visible) .cp-label{opacity:1;transform:none}
  .cta-pill:is(:hover,:focus-visible) :is(.cp-a,.cp-you,.cp-plus,.cp-talk){opacity:0}
}

/* =================================================================================================================
   Footer, after resend.com. A giant wordmark that fades from grey into the page, its bottom dissolving rather than
   cut, with a soft light that follows the cursor across it; then the links in quiet columns, and a bottom bar.
   ================================================================================================================= */
.ft{position:relative;overflow:hidden;background:#000;border-top:1px solid var(--line);padding-top:clamp(56px,6vw,88px);--lx:30%}
.ft-mark{position:relative;container-type:inline-size;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,#000 48%,transparent 100%);mask-image:linear-gradient(180deg,#000 48%,transparent 100%)}
.ft-mark::before{content:"";display:block;height:calc(42.5cqw * .74)}
.ft-word{position:absolute;left:-.02em;bottom:-.215em;display:block;font:700 42.5cqw/1 var(--font);letter-spacing:-.03em;white-space:nowrap;color:transparent;user-select:none}
.ft-word::after{content:attr(data-word);position:absolute;top:0;left:0;padding-right:.12em;color:transparent}
/* One clean fill: grey at the top fading into the page, and a soft light that follows the cursor (main.js › --lx). */
.ft-word::after{background:radial-gradient(30% 110% at var(--lx) 0%,rgba(255,255,255,.16),transparent 72%),linear-gradient(180deg,#2c2d33 0%,#17181b 42%,#0b0b0d 78%,#08090a 100%);-webkit-background-clip:text;background-clip:text}
.ft-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:48px;margin-top:clamp(8px,1.5vw,24px);padding-bottom:64px}
.ft-brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);font-weight:600;font-size:16px}
.ft-brand .mark{width:26px}
.ft-tag{margin-top:14px;max-width:26ch;color:var(--muted);font-size:14px;line-height:21px}
.ft-call{display:inline-flex;gap:6px;margin-top:20px;padding-block:4px;color:var(--soft);font-size:14px;transition:color .15s ease}
.ft-copy{color:var(--faint);font-size:13px}
.ft-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.ft-col h2{font-weight:550;font-size:14px;color:var(--text)}
.ft-col ul{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:14px}
.ft-col a{display:inline-block;padding-block:2px;color:var(--muted);font-size:14px;transition:color .15s ease}
.ft-col .ft-sub a{padding-left:12px;font-size:13px;color:var(--faint);box-shadow:inset 1px 0 0 var(--line)}
.ft-col ul:has(.ft-sub){gap:12px}
/* The bottom bar: the copyright left, the legal links right. */
.ft-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;padding-bottom:40px;border-top:1px solid var(--line)}
.ft-legal{display:flex;flex-wrap:wrap;column-gap:22px;row-gap:2px}
.ft-legal a{padding-block:4px;color:var(--faint);font-size:13px;transition:color .15s ease}
@media (hover:hover) and (pointer:fine){.ft-col a:hover,.ft-call:hover,.ft-legal a:hover{color:var(--text)}}
@media (max-width:760px){.ft-col .ft-sub a{padding-block:8px}.ft-col ul:has(.ft-sub){gap:6px}.ft-body{grid-template-columns:1fr;gap:44px}.ft-cols{grid-template-columns:1fr 1fr;row-gap:36px}.ft-bar{padding-bottom:32px}}
@media (max-width:420px){.ft-bar{flex-direction:column;align-items:flex-start;gap:12px}}

/* Tap targets at least 24px tall on phones. */
@media (max-width:520px){.news,.more{padding-block:3px}.cap{text-align:center}}

/* Small labels and figures use the page's own sans, in tabular figures, instead of a code face. */
.mono,code,.num,.fig-n,time{font-variant-numeric:tabular-nums;letter-spacing:0}

/* ===========================================================================================================
   Home: hero buttons, the three deploy options, what agents do (five hairline columns), and the FAQ.
   =========================================================================================================== */
.hero-cta{display:flex;gap:10px;flex-shrink:0}
.ch-opts{display:grid;gap:10px;margin-top:24px;list-style:none;padding:0}
.ch-opts li{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;padding-top:10px;border-top:1px solid var(--line);font-size:15px}
.ch-opts b{font-weight:510;color:var(--text);min-width:11em}
.ch-opts span{color:var(--muted)}
.future{padding-bottom:96px}
.faq{margin-top:56px}
.faq-q:last-child{border-bottom:1px solid var(--line)}
.faq-q{border-top:1px solid var(--line)}
.faq-q summary{list-style:none;display:flex;justify-content:space-between;gap:16px;padding:18px 0;cursor:pointer;color:var(--soft);font-size:16px;line-height:1.4;transition:color .15s ease}
.faq-q summary::-webkit-details-marker{display:none}
.faq-q summary::after{content:"+";color:var(--faint);font-size:17px;line-height:1.3;transition:transform .25s var(--ease)}
.faq-q[open] summary{color:var(--text)}
.faq-q[open] summary::after{transform:rotate(45deg)}
@media (hover:hover){.faq-q summary:hover{color:var(--text)}}
.faq-q p{color:var(--muted);font-size:15px;line-height:1.55;padding:0 32px 22px 0;max-width:64ch;animation:fadein .3s var(--ease)}
@media (max-width:760px){.hero-cta{flex-wrap:wrap}}

/* ===========================================================================================================
   Book a call: every "Book a call" opens this form in a dialog (main.js › wireBook). Dark, solid, one column.
   =========================================================================================================== */
.lead{width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);margin:auto;padding:0;border:0;border-radius:20px;background:#0f1011;color:var(--text);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 1px 0 rgba(255,255,255,.05),0 40px 120px -20px rgba(0,0,0,.9);overflow:auto;overscroll-behavior:contain}
.lead::backdrop{background:rgba(4,5,6,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.lead[open]{animation:leadin .28s var(--ease)}
.lead[open]::backdrop{animation:leadbg .28s ease}
@keyframes leadbg{from{opacity:0}}
@keyframes leadin{from{opacity:0;transform:translateY(8px) scale(.98)}}
.lead-in{position:relative;padding:28px 28px 24px}
.lead-x{position:absolute;top:14px;right:14px;display:grid;place-items:center;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--muted);cursor:pointer;transition:background-color .15s ease,color .15s ease}
.lead-x svg{width:16px;height:16px}
@media (hover:hover){.lead-x:hover{background:rgba(255,255,255,.06);color:var(--text)}}
.lead-x:focus-visible,.lf :is(input,select):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.lead-k{color:var(--faint);font-size:13px}
.lead h2{margin-top:6px;font-weight:550;font-size:24px;line-height:1.2;letter-spacing:-.02em}
.lead-sub{margin-top:8px;color:var(--muted);font-size:15px;line-height:1.5;max-width:34ch}
.lead-f{display:grid;gap:16px;margin-top:24px}
.lf{display:grid;gap:7px}
.lf>span:first-child{color:var(--soft);font-size:13px;font-weight:510}
.lf :is(input,select){width:100%;height:44px;padding:0 14px;border:0;border-radius:10px;background:#16171a;color:var(--text);font:inherit;font-size:16px;box-shadow:inset 0 0 0 1px var(--line-2);transition:box-shadow .15s ease;appearance:none;-webkit-appearance:none}
.lf input::placeholder{color:#62666d}
.lf select{padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='m4.5 6.5 3.5 3.5 3.5-3.5' fill='none' stroke='%238a8f98' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:16px;cursor:pointer}
.lf select:invalid{color:#62666d}
.lf option{color:var(--text);background:#16171a}
@media (hover:hover){.lf :is(input,select):hover{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}}
.lf [aria-invalid="true"]{box-shadow:inset 0 0 0 1px #eb5757}
.lf>.lf-e{color:#ff8a80;font-size:13px;line-height:1.4}
.lf-e:empty{display:none}
.lead-hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.lead-go{width:100%;margin-top:6px}
.lead-go[aria-busy="true"]{opacity:.7;pointer-events:none}
.lead-fail{color:#ff8a80;font-size:14px;line-height:1.45}
.lead-fail:empty{display:none}
.lead-fine{color:var(--faint);font-size:13px;line-height:1.45;text-align:center}
.lead-done{padding:8px 0 4px}
.lead-done .lead-ok{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(76,183,130,.14);color:#4cb782;margin-bottom:18px}
.lead-done .lead-ok svg{width:20px;height:20px}
.lead-done .btn{width:100%;margin-top:24px}
html:has(.lead[open]){overflow:hidden}
@media (max-width:520px){.lead-in{padding:24px 20px 20px}}
@media (prefers-reduced-motion:reduce){.lead[open],.lead[open]::backdrop{animation:none}}

/* ===========================================================================================================
   Cells with a small piece of UI, after linear.app/intake: Security's sections and the home page's teams.
   =========================================================================================================== */
/* The grid: hairline cells, the UI centred in the top, the caption at the bottom left. */
.pl-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--line);border-left:1px solid var(--line)}
.pl-cell{display:flex;flex-direction:column;min-height:560px;background:radial-gradient(60% 55% at 50% 38%,rgba(255,255,255,.035),transparent 75%);border-right:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.pl-cell.pl-wide{grid-column:1/-1;min-height:0}
.pl-ui{flex:1;display:flex;align-items:center;justify-content:center;padding:64px 48px 32px;overflow:hidden}
.pl-txt{padding:0 40px 36px}
.pl-txt h3{font-weight:510;font-size:16px;line-height:24px;letter-spacing:-.011em;color:var(--text)}
.pl-txt p{margin-top:4px;max-width:42ch;color:var(--muted);font-size:16px;line-height:24px;letter-spacing:-.011em}
/* The cell UI, after linear.app/intake: cards #121315 with a 1px rgba(255,255,255,.08) edge and a soft drop, Inter at
   14-15px in Linear's greys, IDs muted (#8a8f98) beside titles (#e2e4e9), Linear's kinds of status icon, chips that
   read "field is value", and everything fading as it leaves the cell. */
.pl-ui{position:relative;font-size:14px;line-height:20px;letter-spacing:-.006em;color:#e2e4e9}
.lx-w,.lx-list .lx-id:last-child{font-variant-numeric:tabular-nums}
.pl-ui p{margin:0}
.lx-i{width:14px;height:14px;flex:none}
.lx-card{position:relative;border-radius:10px;background:#121315;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 1px 0 rgba(255,255,255,.03),0 24px 48px -20px rgba(0,0,0,.7)}
.lx-wide{width:calc(100% + 40px);margin-right:-40px;padding:22px 24px 18px;-webkit-mask-image:linear-gradient(90deg,#000 78%,transparent);mask-image:linear-gradient(90deg,#000 78%,transparent)}
.lx-h{display:flex;align-items:center;gap:10px;font-size:15px;line-height:22px;font-weight:450;color:#e2e4e9}
.lx-h .lx-i{color:#8a8f98}
.lx-meta{margin-top:2px!important;color:#8a8f98}
.lx-t{display:flex;align-items:center;gap:9px;color:#e2e4e9;min-width:0;white-space:nowrap}
.lx-t b{font-weight:500}
.lx-id{display:inline-flex;align-items:center;gap:7px;color:#8a8f98;white-space:nowrap}
.lx-r{margin-left:auto}
.lx-sub{display:flex;align-items:flex-start;gap:9px;color:#8a8f98;line-height:20px}
.lx-sub .lx-av{margin-top:1px}
.lx-av{width:16px;height:16px;flex:none;border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--a),var(--b));box-shadow:0 0 0 1px rgba(255,255,255,.08)}
img.lx-av{object-fit:cover;background:#1b1c20}
.lx-logo{display:grid;place-items:center;width:18px;height:18px;flex:none;border-radius:5px;background:var(--c)}
.lx-logo svg{width:12px;height:12px}
.lx-ok{display:inline-flex;align-items:center;gap:7px;color:#e2e4e9}
/* Lists: rows that fade as they go down. */
.lx-list{list-style:none;margin:14px 0 0;padding:0}
.lx-list li{display:flex;align-items:center;gap:10px;padding:7px 0;opacity:calc(1 - var(--k) * .22)}
.lx-list .lx-id:last-child{margin-left:auto}
.lx-w{width:44px}
/* Rules: When / Then, the value chips joined in one segmented control. */
.lx-rule{display:grid;grid-template-columns:max-content minmax(0,1fr);align-items:center;gap:12px 16px;margin-top:18px;padding-top:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.lx-k{color:#8a8f98}
.lx-chips{display:inline-flex;width:max-content;border-radius:6px;background:#191a1d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden;font-size:13px}
.lx-chips span{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;color:#d0d6e0}
.lx-chips span+span{box-shadow:inset 1px 0 0 rgba(255,255,255,.07)}
.lx-chips span:nth-child(2):not(:last-child){color:#8a8f98}
/* Stacked: a card with two fainter cards under it. */
.lx-stack{position:relative;width:min(100%,440px);padding-bottom:16px}
.lx-stack>.lx-card{z-index:2;padding:18px 20px}
.lx-stack>.lx-card>*+*{margin-top:12px}
.lx-stack>i{position:absolute;left:14px;right:14px;bottom:8px;height:24px;border-radius:0 0 10px 10px;background:#0f1012;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05);z-index:1}
.lx-stack>i+i{left:28px;right:28px;bottom:0;background:#0c0d0f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);z-index:0}
.lx-secret{display:flex;align-items:center;gap:8px;height:36px;padding:0 12px;border-radius:7px;background:#0c0d0f;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);color:#8a8f98}
.lx-hid{color:#3e4148;letter-spacing:.1em}
.lx-tag{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#d0d6e0;font-size:13px}
.lx-big{font-size:15px;line-height:22px;color:#f7f8f8}
.lx-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.lx-send{display:inline-flex;align-items:center;height:28px;padding:0 10px;gap:9px;border-radius:7px;background:#5e6ad2;color:#fff;font-size:13px;font-weight:500;box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.lx-send i{width:1px;height:12px;background:rgba(255,255,255,.35)}
.lx-field{display:flex;align-items:center;height:34px;padding:0 12px;border-radius:7px;background:#0c0d0f;box-shadow:inset 0 0 0 1px rgba(94,106,210,.6),0 0 0 3px rgba(94,106,210,.14);color:#e2e4e9}
.lx-field i{width:1px;height:15px;margin-left:2px;background:#e2e4e9;animation:pl-blink 1s steps(1) infinite}
@keyframes pl-blink{50%{opacity:0}}
.lx-btns{display:inline-flex;gap:8px}
.lx-btn{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 11px;border-radius:7px;background:#191a1d;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);color:#e2e4e9;font-size:13px}
.lx-red{background:#eb5757;box-shadow:inset 0 1px 0 rgba(255,255,255,.18);color:#fff;font-weight:500}
/* Flows: a node, connectors, the nodes it reaches; the right side fades as it leaves the cell. */
.lx-flow{display:flex;align-items:center;width:calc(100% + 40px);margin-right:-40px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 80%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 80%,transparent)}
.lx-node{padding:10px 12px}
.lx-src .lx-node{padding:12px 14px 12px 40px;border-radius:0 10px 10px 0;margin-left:-40px}
.lx-src .lx-btn{height:30px}
.lx-wires{flex:none;width:92px;height:220px;overflow:visible}
.lx-wires path{fill:none;stroke:rgba(255,255,255,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.lx-outs{flex:1;display:grid;gap:14px;min-width:0}
.lx-out{padding:10px 14px}
.lx-out .lx-id{font-size:12.5px;line-height:18px}
.lx-out .lx-t{margin-top:4px}
.lx-gap{-webkit-mask-image:none;mask-image:none;width:100%;margin:0}
.lx-zone{flex:1;display:grid;gap:10px;padding:36px 14px 14px;border-radius:12px;border:1px dashed rgba(94,106,210,.5);background:radial-gradient(90% 70% at 50% 0%,rgba(94,106,210,.08),transparent 70%);position:relative}
.lx-zl{position:absolute;left:14px;top:12px;color:#8f99ef;font-size:12.5px}
.lx-cutw{width:56px;height:20px}
.lx-cutw path{stroke:rgba(235,87,87,.6);stroke-dasharray:3 3}
.lx-dim{opacity:.7}
.lx-off{color:#8a8f98}
.pl-cell.pl-wide{flex-direction:row;align-items:center}
.pl-cell.pl-wide .pl-ui{order:2;flex:1.3;padding:48px 48px 48px 0}
.pl-cell.pl-wide .pl-txt{flex:1;padding:48px 40px}
@media (max-width:900px){.pl-cell.pl-wide{flex-direction:column;align-items:stretch}.pl-cell.pl-wide .pl-ui{order:0;padding:32px 20px 20px}.pl-cell.pl-wide .pl-txt{padding:0 20px 28px}}

/* ===========================================================================================================
   Home › AI agents for every team (roles.mjs): five cells, two wide then three, each showing the work an agent
   hands back. The cells and the .lx-* parts are the shared ones above.
   =========================================================================================================== */
.roles-sec{padding-bottom:0}
.tg{grid-template-columns:repeat(6,minmax(0,1fr));margin-top:72px}
.tg-c{grid-column:span 2;min-height:500px}
.tg-c.tg-3{grid-column:span 3;min-height:520px}
.tg .pl-ui{padding:56px 40px 28px}
.tg-k{color:var(--faint);font-size:13px;line-height:20px;margin-bottom:6px}
.tg .pl-txt h3{font-size:17px}
.tg .pl-txt p:last-child{font-size:15px;line-height:23px}
.tg .lx-card b{font-weight:500}
.tg-ag{display:grid;place-items:center;width:20px;height:20px;flex:none;border-radius:50%;background:color-mix(in oklab,var(--c) 26%,#1c1d20);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.tg-ag .mascot{width:15px;margin-top:3px}
.tg-by{margin-top:16px!important;padding-top:14px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06);align-items:center}
.tg-by b{color:#e2e4e9;font-weight:500}
.tg-pf{width:32px;height:32px;flex:none;border-radius:50%;object-fit:cover;background:#1b1c20;box-shadow:0 0 0 1px rgba(255,255,255,.1)}
.tg-who{display:grid;gap:1px;min-width:0;flex:1}
.tg-who b{color:#e2e4e9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tg-who .lx-id{font-size:13px;margin-left:0!important;overflow:hidden;text-overflow:ellipsis}
.tg-leads li{gap:12px;padding:8px 0;opacity:calc(1 - var(--k) * .14)}
.tg-sig{gap:7px;margin-left:auto;flex:none;height:26px}
.tg-pr{display:grid;place-items:center;width:18px;height:18px;flex:none;color:#4cb782}
.tg-pr svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.tg-tests li{opacity:1}
.tg-fail .lx-id{color:#ff8a80}
.tg-ops{position:relative;width:min(100%,400px);height:390px}
.tg-day{position:absolute;left:0;top:0;width:78%;padding:16px 18px;z-index:1}
.tg-dash{position:absolute;right:-6%;bottom:0;width:70%;padding:16px 18px;z-index:2;background:#141518}
.tg-cal{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.tg-ev{display:grid;grid-template-columns:44px minmax(0,1fr);gap:10px;align-items:start}
.tg-ev>span:last-child{display:grid;gap:1px;padding:6px 10px;border-radius:7px;background:color-mix(in oklab,var(--e) 14%,#16171a);box-shadow:inset 2px 0 0 var(--e)}
.tg-ev .lx-id{font-size:12.5px;font-variant-numeric:tabular-nums}
.tg-ev>span:first-child{padding-top:6px}
.tg-ev.a{--e:#7c86ef}.tg-ev.b{--e:#4cb782}.tg-ev.c{--e:#f0b44c}
.tg-bars{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;height:96px;margin-top:14px}
.tg-bars span{display:grid;grid-template-rows:1fr auto;gap:6px;height:100%;align-items:end}
.tg-bars i{display:block;height:var(--v);border-radius:4px 4px 2px 2px;background:linear-gradient(180deg,#7c86ef,rgba(124,134,239,.35))}
.tg-bars em{font-style:normal;color:#8a8f98;font-size:12px;text-align:center}
.tg-txt{color:#b4bac4;line-height:21px}
.tg-txt sup{display:inline-grid;place-items:center;min-width:15px;height:15px;margin-left:2px;padding:0 3px;border-radius:4px;background:rgba(124,134,239,.18);color:#aab2f5;font-size:10px;line-height:1;vertical-align:2px}
.tg-src{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.tg-src li{display:flex;align-items:center;gap:10px}
.tg-src .lx-id{margin-left:auto}
.tg-n{display:grid;place-items:center;width:18px;height:18px;flex:none;border-radius:5px;background:#1b1c20;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#8a8f98;font-size:11px}
.tg-mood{width:min(100%,420px)}
.tg-mood>.lx-card{padding:16px}
.tg-prompt{color:#b4bac4;overflow:hidden;text-overflow:ellipsis}
.tg-tiles{display:grid;grid-template-columns:1.4fr 1fr;grid-template-rows:84px 84px;gap:8px;margin-top:14px}
.tg-tile{position:relative;margin:0;border-radius:8px;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.tg-tile.a{grid-row:span 2;background:radial-gradient(120% 70% at 70% 100%,#ff8a5c 0%,#b8487a 32%,transparent 60%),linear-gradient(180deg,#141a3a 0%,#3a2b5e 55%,#1a1424 100%)}
.tg-tile.a::after{content:"";position:absolute;inset:auto 0 0;height:38%;background:#07080c;clip-path:polygon(0 40%,12% 40%,12% 10%,24% 10%,24% 55%,38% 55%,38% 0,50% 0,50% 35%,66% 35%,66% 20%,80% 20%,80% 50%,100% 50%,100% 100%,0 100%)}
.tg-tile.b{background:radial-gradient(40% 50% at 30% 40%,rgba(64,224,255,.7),transparent 70%),radial-gradient(45% 55% at 75% 65%,rgba(255,64,170,.65),transparent 70%),linear-gradient(160deg,#0b1020,#1b0f22)}
.tg-tile.c{background:radial-gradient(60% 90% at 50% 100%,#ffd7a8 0%,#e07a4a 30%,#3a1d2c 70%),#1a1016}
.tg-tile.c::after{content:"";position:absolute;left:66%;bottom:0;width:14%;height:62%;border-radius:40% 40% 0 0;background:#0a0709}
.tg-tile.d{display:none}
.tg-tile figcaption{position:absolute;left:8px;bottom:6px;z-index:1;color:rgba(255,255,255,.9);font-size:11.5px;text-shadow:0 1px 2px rgba(0,0,0,.6)}
@media (max-width:1100px){.tg{grid-template-columns:repeat(2,minmax(0,1fr))}.tg-c,.tg-c.tg-3{grid-column:span 1}.tg-c:last-child{grid-column:1/-1}}
@media (max-width:900px){.tg{grid-template-columns:minmax(0,1fr);margin-top:48px}.tg-c,.tg-c.tg-3,.tg-c:last-child{grid-column:auto;min-height:0}.tg .pl-ui{padding:32px 20px 20px}.tg .pl-txt{padding:0 20px 28px}.tg.pl-grid{border-left:0;border-right:0}.tg .pl-cell{border-right:0}.tg .lx-wide{width:100%;margin-right:0;-webkit-mask-image:none;mask-image:none}}
@media (max-width:520px){.tg-when{display:none}.tg-leads li{flex-wrap:wrap;row-gap:8px}.tg-who{flex:1 1 calc(100% - 44px)}.tg-sig{margin-left:44px}.tg-ops{height:380px}.tg-dash{right:0;width:80%}}
/* Narrow screens: labels in the team cells shorten or wrap, never run into the value beside them. */
.tg .lx-list .lx-t{flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.tg .lx-list .lx-id{flex:none}
.tg .lx-card>.lx-t b{min-width:0;overflow:hidden;text-overflow:ellipsis}
.tg .lx-card>.lx-t .lx-id{flex:none}
.tg-dash .lx-h,.tg-day .lx-h{flex-wrap:wrap;row-gap:2px}
@media (max-width:420px){
  .tg-fail{flex-wrap:wrap;row-gap:2px}.tg .tg-fail .lx-id{flex-basis:100%;padding-left:24px;margin-left:0}
  .tg-ops{height:auto;display:grid}.tg-day,.tg-dash{position:relative;width:auto;right:auto;bottom:auto}.tg-dash{margin:-14px 0 0 28px}
}
/* Hero intros: a step up from body text, so the line under the headline reads as part of it. */
.hero-row .lede,.pl-lede{font-size:18px;line-height:28px;font-weight:560;letter-spacing:-.014em;max-width:660px;text-wrap:pretty}
@media (max-width:760px){.hero-row .lede,.pl-lede{font-size:16px;line-height:25px}}