/* Lumly website v3.
   Black ground, one ink, one amber accent (only on the main action and the "best answer" frame).
   One typeface (Schibsted Grotesk); IBM Plex Mono only for real prompts, keys and drawing labels.
   Space separates sections; the product itself is the picture. */

:root{
  --bg:#000; --t1:#0b0b0c; --t2:#141416; --t3:#1f1f22;
  --ink:#f2f2f2; --ink-2:#cfcfcf; --mute:#7a7a7a; --faint:#3a3a3d; --line:#1f1f22;
  --amber:#ff9f1d; --amber-2:#ffb54a; --on-amber:#160d02;
  --sans:"Schibsted Grotesk","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --m:clamp(16px,2.3vw,32px);
  --max:1600px; --navh:72px;
  --fs-xl:clamp(46px,5.5vw,96px); --fs-l:clamp(34px,4.3vw,66px); --fs-m:clamp(21px,1.9vw,27px);
  --ease:cubic-bezier(.2,.7,0,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg); -webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--ink); font:400 17px/1.58 var(--sans); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden}
img,svg,video,canvas{display:block; max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote,pre{margin:0}
ul,ol{padding:0}
button,input,textarea{font:inherit; color:inherit}
a{color:inherit; text-decoration:underline; text-decoration-color:var(--faint); text-underline-offset:3px; text-decoration-thickness:1px; transition:text-decoration-color .2s, color .2s}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}
::selection{background:var(--ink); color:#000}
code,kbd,pre{font-family:var(--mono)}
code{font-size:.88em; color:var(--ink)}
kbd{display:inline-block; min-width:1.9em; padding:4px 7px 3px; border-radius:7px; background:var(--t3); box-shadow:inset 0 -2px 0 #000; color:var(--ink); font-size:12px; line-height:1; text-align:center}
[hidden]{display:none !important}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.wrap{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--m)}
.g12{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--m)}
.sub{color:var(--mute)}
.small{font-size:14px} .muted{color:var(--mute)}
.prose{color:var(--ink-2); max-width:60ch}
.prose b,.prose strong{color:var(--ink); font-weight:500}
.lead{font-size:19px; line-height:1.55; color:var(--ink-2); max-width:56ch}

/* headings: a statement, with its continuation in grey */
.h2{font-weight:400; font-size:var(--fs-l); line-height:1; letter-spacing:-.045em}
.h2 .sub{display:block}
.sec{padding-block:clamp(112px,12vw,200px)}
.sec-top{margin-bottom:clamp(48px,6vw,88px)}
.sec-top p{margin-top:28px; color:var(--ink-2); max-width:48ch; font-size:18px}

/* ---------- buttons (one shape: the pill) ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:12px; height:50px; padding:0 24px; border:0; border-radius:999px; background:var(--t2); color:var(--ink); font:500 15px/1 var(--sans); text-decoration:none; white-space:nowrap; cursor:pointer; transition:background-color .2s, transform .15s var(--ease)}
.btn:hover{background:var(--t3)}
.btn:active{transform:scale(.97)}
.btn-amber,.btn-dl{background:var(--amber); color:var(--on-amber); padding:0 24px 0 6px}
.btn-amber:hover,.btn-dl:hover{background:var(--amber-2)}
.btn-ic{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--on-amber); color:var(--amber); flex:none; transition:transform .35s var(--ease)}
.btn-amber:hover .btn-ic{transform:translateX(2px) rotate(-8deg)}
.btn-dl:not(:has(.btn-ic)){padding:0 24px}
.btn-light{background:var(--ink); color:#000}
.btn-light:hover{background:#fff}
.btn-sm{height:38px; padding:0 16px; font-size:14px}
.btn[disabled]{opacity:.5; cursor:default}
.bracket{display:inline-flex; align-items:center; gap:9px; height:50px; color:var(--ink); font-size:15px; text-decoration:none; background:none; border:0; padding:0; cursor:pointer}
.bracket::before{content:"["; color:var(--mute); transition:transform .3s var(--ease)}
.bracket::after{content:"]"; color:var(--mute); transition:transform .3s var(--ease)}
.bracket:hover::before{transform:translateX(-4px)}
.bracket:hover::after{transform:translateX(4px)}

/* ---------- top bar ---------- */
.nav{position:relative; z-index:20}
.nav-in{display:flex; align-items:center; height:var(--navh); gap:32px}
.brand{display:inline-flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-weight:600; font-size:19px; letter-spacing:-.03em}
.brand img{width:22px; height:22px}
.brand small{font-weight:400; font-size:14px; letter-spacing:0; color:var(--mute)}
.nav-links{display:flex; gap:30px; margin-inline:auto}
.nav-links a{font-size:14.5px; color:var(--ink-2); text-decoration:none}
.nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)}
.nav-menu{display:none; height:38px; padding:0 16px; border:0; border-radius:999px; background:var(--t2); font-size:14px; cursor:pointer}

/* ---------- entrances (only when scripts run; the page reads fine without them) ---------- */
.js .rv{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease); transition-delay:calc(var(--d,0) * 75ms)}
.js .rv.on{opacity:1; transform:none}
.in{animation:settle 1.1s var(--ease) both; animation-delay:calc(.12s + var(--d,0) * 80ms)}
@keyframes settle{from{opacity:0; transform:translateY(18px)}}
@keyframes menuIn{from{opacity:0; transform:translateY(-8px)}}

/* ---------- landing: a centred headline over a turning sphere, with the real app floating round it ---------- */
.lp{position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; min-height:calc(100svh - var(--navh)); padding-bottom:26px}
.orb{position:absolute; z-index:-3; left:50%; top:50%; width:min(920px,170vw); height:min(920px,170vw); transform:translate(-50%,-50%) translateY(calc(var(--sy,0) * 90px)); pointer-events:none}
.lp::before{content:""; position:absolute; z-index:-4; inset:0; pointer-events:none;
  background:radial-gradient(55% 40% at 50% 100%, rgba(255,159,29,.09), rgba(255,159,29,.03) 55%, transparent 100%)}
.lp::after{content:""; position:absolute; z-index:-1; inset:0; pointer-events:none;
  background:radial-gradient(26% 16% at 50% 47%, rgba(0,0,0,.5), transparent 100%)}
.lp-in{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding-block:clamp(40px,8vh,96px) clamp(24px,4vh,48px)}
.pill{display:inline-flex; align-items:center; gap:10px; height:38px; padding:0 6px 0 14px; border:0; border-radius:999px; background:rgba(20,20,22,.8); box-shadow:inset 0 0 0 1px #26262a; color:var(--ink); font:400 14px var(--sans); text-decoration:none; cursor:pointer; backdrop-filter:blur(8px); transition:box-shadow .25s}
.pill:hover{box-shadow:inset 0 0 0 1px #3c3c42}
.pill i{width:7px; height:7px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px rgba(255,159,29,.16); animation:pulse 2.4s ease-in-out infinite}
.pill span{display:inline-flex; align-items:center; height:28px; padding:0 12px; border-radius:999px; background:var(--t3); color:var(--ink-2); font-size:13px}
.lp h1{font-weight:400; font-size:clamp(44px,5.6vw,96px); line-height:1.02; letter-spacing:-.05em}
.lp h1 .sub{display:block; color:var(--ink)}
.lp-lede{margin-top:28px; max-width:50ch; font-size:clamp(16px,1.2vw,18px); line-height:1.55; color:var(--ink-2)}
.lp-meta{margin-top:26px; font-size:14px; color:var(--mute)}
.lp-meta a{color:var(--mute); text-underline-offset:3px}
.lp-meta a:hover{color:var(--ink-2)}
.cta{display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px; margin-top:36px}
.lp .cta{justify-content:center}
.cue{display:inline-flex; align-items:center; gap:14px; color:var(--mute); text-decoration:none}
.cue i{display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:var(--t2); color:var(--ink); transition:transform .35s var(--ease)}
.cue:hover{color:var(--ink)}
.cue:hover i{transform:translateY(3px)}

/* ---------- watch it work: the real bar doing its job ---------- */
.demo-top{align-items:end; margin-bottom:clamp(40px,5vw,72px)}
.demo-top h2{grid-column:1 / span 6}
.demo-top p{grid-column:8 / span 5; color:var(--ink-2); font-size:18px; max-width:44ch}
.demo-stage .stage{height:clamp(480px,42vw,600px); max-width:1100px; margin-inline:auto}
.demo-stage .win{width:min(880px,100%); height:74%}


/* the stage: the Prompty bar at the top, the AI app below it, floating at an angle */
.stage{position:relative; height:clamp(460px,62vh,620px); display:flex; flex-direction:column; align-items:center; perspective:1500px}
.stage::before{content:""; position:absolute; left:8%; right:8%; bottom:2%; height:55%; background:radial-gradient(closest-side, rgba(255,159,29,.13), transparent); filter:blur(28px); pointer-events:none}
.isl{position:relative; z-index:3; width:224px; background:#050505; border-radius:28px; box-shadow:0 0 0 1px #262629, 0 24px 60px -20px rgba(0,0,0,.9); overflow:hidden; transition:width .75s var(--ease)}
.isl-row{display:flex; align-items:center; gap:11px; height:54px; padding:0 18px 0 12px}
.isl-row img{width:30px; height:30px; flex:none}
.isl-brand,.isl-input,.isl-status{white-space:nowrap; overflow:hidden; font-size:14.5px}
.isl-brand{font-weight:500}
.isl-brand span{color:var(--mute); font-weight:400}
.isl-input,.isl-status{display:none}
.isl-input{flex:1}
.caret{display:inline-block; width:1.5px; height:16px; margin-left:1px; vertical-align:-3px; background:var(--ink); animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.isl-status{align-items:center; gap:10px; color:var(--ink-2)}
.isl-status i{width:7px; height:7px; border-radius:50%; background:var(--amber); animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.isl-body{display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease)}
.isl-body > div{overflow:hidden}
.isl-msgs{display:flex; flex-direction:column; gap:8px; padding:2px 18px 16px; font-size:14px; line-height:1.45}
.isl-msgs p:empty{display:none}
.isl-msgs .me{align-self:flex-end; max-width:86%; padding:8px 13px; border-radius:15px 15px 4px 15px; background:var(--t3)}
.isl-msgs .bot{max-width:92%; color:var(--ink-2)}
.isl[data-state="ask"],.isl[data-state="talk"]{width:min(470px,94%)}
.isl[data-state="ask"] .isl-brand,.isl[data-state="talk"] .isl-brand,.isl[data-state="work"] .isl-brand{display:none}
.isl[data-state="ask"] .isl-input,.isl[data-state="talk"] .isl-input{display:block}
.isl[data-state="talk"] .isl-body{grid-template-rows:1fr}
.isl[data-state="work"]{width:min(340px,94%)}
.isl[data-state="work"] .isl-status{display:flex}

.win{position:relative; z-index:1; margin-top:auto; width:min(700px,100%); height:68%; border-radius:18px; background:var(--t1); box-shadow:0 0 0 1px #1c1c1f, 0 50px 120px -40px rgba(0,0,0,.95); transform-origin:50% 0;
  transform:rotateX(calc(var(--tilt,1) * 16deg)) rotateY(calc(var(--tilt,1) * -12deg)) rotateZ(calc(var(--tilt,1) * 1.5deg)); transition:box-shadow .5s}
.win-bar{display:flex; align-items:center; gap:12px; height:44px; padding:0 18px; font-size:13px; color:var(--mute)}
.win-dots{display:flex; gap:6px}
.win-dots i{width:9px; height:9px; border-radius:50%; background:var(--t3)}
.win-name{color:var(--ink)}
.win-tag{margin-left:auto; color:var(--amber); opacity:0; transition:opacity .5s}
.win-prompt{padding:14px 24px 0; min-height:7.4em; font-size:13px; line-height:1.68; color:#d8d8d8; white-space:pre-wrap; word-break:break-word}
.win-answer{padding:6px 24px 0}
.win-answer i{display:block; height:7px; margin-top:12px; border-radius:4px; background:var(--t3); transform-origin:left; transform:scaleX(0); transition:transform .9s var(--ease)}
.win-answer i:nth-child(1){width:92%} .win-answer i:nth-child(2){width:84%} .win-answer i:nth-child(3){width:88%} .win-answer i:nth-child(4){width:70%} .win-answer i:nth-child(5){width:44%}
.win-answer.on i{transform:none}
.win-answer.on i:nth-child(2){transition-delay:.12s} .win-answer.on i:nth-child(3){transition-delay:.24s} .win-answer.on i:nth-child(4){transition-delay:.36s} .win-answer.on i:nth-child(5){transition-delay:.48s}
.win-follow{position:absolute; right:24px; bottom:22px; max-width:72%; padding:8px 13px; border-radius:15px 15px 4px 15px; background:var(--t3); font-size:13px}
.win-follow:empty{display:none}
.stage.is-best .win{box-shadow:0 0 0 2px var(--amber), 0 50px 120px -40px rgba(0,0,0,.95)}
.stage.is-best .win-tag{opacity:1}

/* ---------- how it works: the loop as a construction drawing, then four steps ---------- */
.how-top{align-items:center; margin-bottom:clamp(48px,6vw,96px)}
.how-top > div{grid-column:1 / span 5}
.how-top p{margin-top:28px; color:var(--ink-2); max-width:42ch; font-size:18px}
.how-top .bracket{margin-top:18px}
.loop{grid-column:7 / span 6; width:100%; height:auto; overflow:visible}
.loop .ax{stroke:#2c2c30; stroke-width:1; stroke-dasharray:3 5; fill:none}
.loop .ring{stroke:#3d3d42; stroke-width:1.2; fill:none}
.loop .ring2{stroke:#2a2a2e; stroke-width:1.2; fill:none}
.loop .tick{stroke:#555; stroke-width:1.2}
.loop .node{fill:#000; stroke:#8a8a8a; stroke-width:1.2}
.loop .lbl{fill:#6f6f6f; font:400 11px var(--mono)}
.loop .name{fill:var(--ink); font:500 15px var(--sans)}
.loop .arrow{fill:#8a8a8a}
.loop .runner{fill:var(--amber)}
.steps4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; list-style:none; counter-reset:step}
.cell{--c:#2b2b2f; position:relative; display:flex; flex-direction:column; min-height:320px; padding:20px 22px 24px; border:1px solid var(--line);
  background:
    linear-gradient(var(--c),var(--c)) top left/12px 1px no-repeat, linear-gradient(var(--c),var(--c)) top left/1px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/12px 1px no-repeat, linear-gradient(var(--c),var(--c)) top right/1px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/12px 1px no-repeat, linear-gradient(var(--c),var(--c)) bottom left/1px 12px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/12px 1px no-repeat, linear-gradient(var(--c),var(--c)) bottom right/1px 12px no-repeat;
  transition:border-color .4s}
.steps4 .cell::before{counter-increment:step; content:"0" counter(step); font:400 12px var(--mono); color:var(--mute)}
.cell svg{width:72%; height:120px; margin:auto auto 0; overflow:visible}
.dg path,.dg line,.dg circle,.dg rect{fill:none; stroke:#4a4a4f; stroke-width:1.25; vector-effect:non-scaling-stroke; transition:stroke .4s}
.dg .on{fill:var(--ink); stroke:none}
.cell:hover{--c:#6a6a70; border-color:#26262a}
.cell:hover .dg path,.cell:hover .dg line,.cell:hover .dg circle,.cell:hover .dg rect{stroke:var(--ink)}
.cell h3{margin-top:auto; padding-top:28px; font-weight:500; font-size:17px; letter-spacing:-.01em}
.cell p{margin-top:6px; min-height:4.5em; font-size:14.5px; line-height:1.5; color:var(--mute)}
.video{margin-top:14px}
.video summary{list-style:none}
.video summary::-webkit-details-marker{display:none}
.video video{margin-top:20px; width:100%; height:auto; border-radius:16px}

/* ---------- before / after ---------- */
.ba{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--m)}
.panel{border-radius:26px; background:var(--t1); padding:clamp(24px,3vw,40px)}
.ba-k{font-size:14px; color:var(--mute)}
.ba-typed{margin-top:22px; font:400 clamp(19px,1.8vw,24px)/1.45 var(--mono); color:var(--ink)}
.ba-sub{margin-top:auto; padding-top:40px; font-size:15px; color:var(--ink-2); max-width:34ch}
.ba-before{display:flex; flex-direction:column}
.ba-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px}
.prompt{display:none; margin-top:22px; font-size:14px; line-height:1.78; color:var(--ink-2); white-space:pre-wrap; word-break:break-word}
.prompt.on{display:block}
.prompt .t{color:var(--mute)}
.fine{margin-top:22px; font-size:14px; color:var(--mute)}
.seg-ctl{display:inline-flex; gap:2px; padding:4px; border-radius:999px; background:var(--t2)}
.seg{display:inline-flex; align-items:center; gap:8px; height:34px; padding:0 14px; border:0; border-radius:999px; background:none; color:var(--mute); font-size:14px; cursor:pointer; transition:background-color .2s, color .2s}
.seg img{width:20px; height:20px}
.seg:hover{color:var(--ink)}
.seg.on{background:var(--t3); color:var(--ink)}
.seg .save{color:var(--amber); font-size:12.5px}

/* ---------- agents and the reason it exists ---------- */
.why-g{align-items:center}
.agents{grid-column:1 / span 6; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; list-style:none}
.agents li{position:relative; aspect-ratio:1 / 1; border-radius:24px; background:var(--t1); display:flex; flex-direction:column; justify-content:flex-end; padding:22px; overflow:hidden}
.agents img{position:absolute; left:50%; top:44%; width:44%; height:auto; transform:translate(-50%,-50%); transition:filter .6s, transform .6s var(--ease)}
@media (hover:hover){
  .agents img{filter:grayscale(1) brightness(.72) contrast(1.1)}
  .agents li:hover img{filter:none; transform:translate(-50%,-54%)}
}
.agents b{position:relative; font-weight:500; font-size:17px}
.agents span{position:relative; font-size:14px; color:var(--mute)}
.why-copy{grid-column:8 / span 5}
.statement{margin-top:36px; font-size:clamp(22px,2.2vw,32px); line-height:1.25; letter-spacing:-.025em; color:var(--ink)}
.statement .sub{color:var(--mute)}
.why-copy .note{margin-top:28px; color:var(--ink-2); font-size:16px; max-width:42ch}

/* ---------- features: a row of cards you can slide through ---------- */
.feat-top{display:flex; align-items:flex-end; justify-content:space-between; gap:24px}
.arrows{display:flex; gap:8px}
.arrows button{display:grid; place-items:center; width:48px; height:48px; border:0; border-radius:50%; background:var(--t2); color:var(--ink); cursor:pointer; transition:background-color .2s, opacity .2s}
.arrows button:hover{background:var(--t3)}
.arrows button[disabled]{opacity:.35; cursor:default}
.track{display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--m); padding-inline:var(--m); padding-bottom:6px; scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent); mask-image:linear-gradient(90deg,#000 0,#000 82%,transparent)}
.track::-webkit-scrollbar{display:none}
.track.end{-webkit-mask-image:none; mask-image:none}
.fc{--glow:rgba(255,159,29,.32); position:relative; flex:0 0 min(400px,84vw); min-height:540px; scroll-snap-align:start; display:flex; flex-direction:column; padding:26px; border-radius:30px; background:var(--t1); overflow:hidden}
.fc-ic{display:grid; place-items:center; width:54px; height:54px; border-radius:50%; background:var(--t2); color:var(--ink)}
.fc p{margin-top:30px; font-size:var(--fs-m); line-height:1.24; letter-spacing:-.02em; color:var(--ink)}
.fc p .sub{color:var(--mute)}
.frag{position:relative; margin-top:auto; padding-top:40px; display:flex; justify-content:center}
.frag::before{content:""; position:absolute; left:-10%; right:-10%; bottom:-40%; height:110%; background:radial-gradient(closest-side, var(--glow), transparent); pointer-events:none}
.frag > *{position:relative}
.keys{display:flex; gap:10px}
.keys kbd{min-width:64px; height:62px; padding:0 14px; display:grid; place-items:center; border-radius:14px; background:linear-gradient(#232326,#18181a); box-shadow:inset 0 -3px 0 #050505, 0 0 0 1px #2c2c30; font:500 16px var(--sans); transition:transform .25s var(--ease)}
.fc:hover .keys kbd{transform:translateY(2px)}
.mini{display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100%}
.mini div{border-radius:12px; background:var(--t2); padding:12px; font-size:12px; color:var(--mute)}
.mini div i{display:block; height:5px; margin-top:7px; border-radius:3px; background:var(--t3)}
.mini div i:nth-child(odd){width:80%}
.mini .best{box-shadow:0 0 0 2px var(--amber)}
.mini .best b{color:var(--amber); font-weight:500}
.rowui{width:100%; display:flex; flex-direction:column; gap:8px}
.rowui div{display:flex; align-items:center; gap:12px; padding:12px; border-radius:14px; background:var(--t2); font-size:13.5px}
.rowui img{width:30px; height:30px}
.rowui span{flex:1; color:var(--ink)}
.rowui em{font-style:normal; font-size:12px; color:var(--mute)}
.rowui .use{padding:6px 12px; border-radius:999px; background:var(--amber); color:var(--on-amber); font-size:12px}
.wave{display:flex; align-items:center; gap:5px; height:64px}
.wave i{width:5px; border-radius:3px; background:var(--ink-2)}
.langs{display:flex; flex-wrap:wrap; justify-content:center; gap:6px; margin-top:16px}
.langs span{padding:5px 11px; border-radius:999px; background:var(--t2); font-size:12.5px; color:var(--ink-2)}
.upd{width:100%; border-radius:16px; background:var(--t2); padding:16px 18px}
.upd b{display:block; font-weight:500}
.upd span{display:block; font-size:13px; color:var(--mute)}
.upd div{display:flex; gap:8px; margin-top:12px}
.upd div span{padding:7px 14px; border-radius:999px; background:var(--t3); color:var(--ink); font-size:12.5px}
.upd div span:first-child{background:var(--ink); color:#000}
.newchat{display:flex; flex-direction:column; align-items:center; gap:12px}
.newchat span{padding:9px 18px; border-radius:999px; background:var(--t2); font-size:14px}
.newchat em{font-style:normal; font-size:13px; color:var(--mute); text-decoration:line-through}
.wardrobe{width:120%; max-width:none; height:auto}

/* ---------- inside the app: real screens, floating ---------- */
.field{background:var(--t1)}
.app-top{text-align:left}
.panels{position:relative; height:clamp(300px,34vw,500px); perspective:1700px; margin-top:clamp(40px,5vw,72px)}
.panels img{position:absolute; left:50%; top:50%; width:min(560px,44vw); height:auto; border-radius:18px; box-shadow:0 40px 100px -30px rgba(0,0,0,.95); transition:filter .6s}
.panels .p0{transform:translate(-50%,-50%) translateZ(calc(var(--p,0) * 40px))}
.panels .p1{transform:translate(calc(-50% - 78%),-50%) rotateY(calc(28deg + var(--p,0) * 10deg)) scale(.84); filter:brightness(.55) blur(1px); z-index:-1}
.panels .p2{transform:translate(calc(-50% + 78%),-50%) rotateY(calc(-28deg - var(--p,0) * 10deg)) scale(.84); filter:brightness(.55) blur(1px); z-index:-1}
.panels-cap{display:flex; justify-content:center; gap:28px; margin-top:28px; font-size:14px; color:var(--mute)}

/* ---------- what it sees ---------- */
.rows{border-top:1px solid var(--line)}
.rows > div{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--m); padding:28px 0; border-bottom:1px solid var(--line)}
.rows dt{grid-column:1 / span 4; font-size:18px}
.rows dd{grid-column:6 / span 7; color:var(--ink-2)}
.rows dd b{color:var(--ink); font-weight:500}
.trust{margin-top:clamp(64px,7vw,104px)}
.qa{grid-column:1 / span 6}
.qa > div{padding:20px 0; border-top:1px solid var(--line)}
.qa dt{font-weight:500}
.qa dd{margin-top:6px; font-size:15.5px; color:var(--ink-2)}
.install{grid-column:8 / span 5}
.install h3{font-weight:500; font-size:18px}
.install h3 + p{margin-top:8px}
.install h3:not(:first-child){margin-top:36px}
.hash{display:flex; align-items:center; gap:12px; margin-top:14px; padding:8px 8px 8px 16px; border-radius:16px; background:var(--t1)}
.hash code{flex:1; min-width:0; font-size:12.5px; color:var(--ink-2); word-break:break-all}

/* ---------- prices ---------- */
.prices{list-style:none}
.prices li{grid-column:span 4; display:flex; flex-direction:column; padding:30px; border-radius:26px; background:var(--t1)}
.prices b{font-weight:500; font-size:18px}
.prices .amt{margin-top:28px; font-size:clamp(46px,5vw,78px); line-height:.9; letter-spacing:-.05em}
.prices .amt small{font-size:16px; letter-spacing:0; color:var(--mute); margin-left:6px}
.prices p{margin-top:22px; color:var(--ink-2); font-size:15.5px}
.prices-foot{display:flex; flex-wrap:wrap; gap:12px 28px; align-items:center; margin-top:28px; font-size:14px; color:var(--mute)}

/* ---------- founder ---------- */
.founder blockquote{grid-column:1 / span 8; font-size:clamp(24px,2.4vw,36px); line-height:1.22; letter-spacing:-.025em}
.founder-side{grid-column:10 / span 3; align-self:end}
.founder-side p{color:var(--ink-2); font-size:15.5px}
.sig{display:flex; align-items:center; gap:12px; margin-top:24px; font-size:15px; color:var(--ink-2)}
.sig img{width:34px; height:34px}
.sig b{color:var(--ink); font-weight:500}

/* ---------- the close: a turning sphere of points ---------- */
.close{position:relative; min-height:min(92vh,860px); display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; overflow:hidden; padding-block:120px}
.close canvas{position:absolute; left:50%; top:50%; width:min(900px,100vw); height:min(900px,100vw); transform:translate(-50%,-50%); pointer-events:none}
.close::after{content:""; position:absolute; inset:0; background:radial-gradient(48% 34% at 50% 76%, rgba(255,159,29,.12), transparent); pointer-events:none}
.close > *:not(canvas){position:relative; z-index:1}
.close h2{font-weight:400; font-size:clamp(40px,5vw,84px); line-height:1; letter-spacing:-.05em; max-width:14ch}
.close p{margin-top:28px; color:var(--ink-2)}
.close .cta{justify-content:center}
.close .meta{margin-top:20px; font-size:14px; color:var(--mute)}

/* ---------- the giant name with the agents inside its "o" (footer and gate) ---------- */
.mark{display:flex; justify-content:center; align-items:baseline; overflow:hidden; font-weight:600; letter-spacing:-.065em; line-height:.9; color:var(--ink); white-space:nowrap; user-select:none;
  font-size:calc((min(100vw,var(--max)) - 2 * var(--m)) * .252); padding-bottom:.06em}
.mark .o{position:relative; display:inline-block; width:.6em; height:.6em; margin:0 .015em 0 .02em; border-radius:50%; box-shadow:inset 0 0 0 .098em var(--ink); overflow:hidden; vertical-align:baseline; transform:translateY(.01em)}
.mark .o img{position:absolute; left:50%; top:52%; width:62%; height:auto; transform:translate(-50%,-50%) scale(.9); opacity:0; animation:faces 10s var(--ease) infinite; animation-delay:calc(var(--n) * 2.5s)}
@keyframes faces{0%{opacity:0; transform:translate(-50%,-38%) scale(.86)} 4%,22%{opacity:1; transform:translate(-50%,-50%) scale(1)} 27%,100%{opacity:0; transform:translate(-50%,-62%) scale(.86)}}

/* ---------- footer ---------- */
footer{padding-top:clamp(80px,9vw,140px)}
.foot{row-gap:40px}
.foot > div:first-child{grid-column:1 / span 4}
.foot > div{grid-column:span 2}
.foot p{margin-top:14px; color:var(--mute); font-size:14.5px; max-width:30ch}
.foot-h{font-weight:400; font-size:14px; color:var(--mute); margin-bottom:12px}
.foot a{display:block; padding:3px 0; font-size:14.5px; color:var(--ink-2); text-decoration:none}
.foot a:hover{color:var(--ink)}
footer .mark{margin-top:clamp(64px,8vw,120px)}
.foot-bottom{display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; padding-block:22px 28px; font-size:13px; color:var(--mute)}

/* ---------- agent faces, the corner-tick field and link rows ---------- */
.faces{display:flex; align-items:center; gap:14px; font-size:14px; color:var(--mute)}
.faces > span{display:flex}
.faces > span:first-child{flex:none}
.faces img{width:46px; height:46px; margin-right:-12px; padding:6px; border-radius:50%; background:var(--t2); box-shadow:0 0 0 3px var(--bg)}
.faces > span + span{margin-left:12px; line-height:1.4}
.ask{margin-top:28px}
.ask label{display:block; font-size:14px; color:var(--mute)}
.tick{--c:#4a4a50; position:relative; display:flex; gap:8px; margin-top:12px; padding:7px; background:
    linear-gradient(var(--c),var(--c)) top left/9px 1px no-repeat, linear-gradient(var(--c),var(--c)) top left/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) top right/9px 1px no-repeat, linear-gradient(var(--c),var(--c)) top right/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom left/9px 1px no-repeat, linear-gradient(var(--c),var(--c)) bottom left/1px 9px no-repeat,
    linear-gradient(var(--c),var(--c)) bottom right/9px 1px no-repeat, linear-gradient(var(--c),var(--c)) bottom right/1px 9px no-repeat, var(--tick-bg,var(--t1))}.tick:focus-within{--c:var(--ink)}
.tick input{flex:1; min-width:0; height:46px; padding:0 14px; border:0; background:none; color:var(--ink); outline:none; font-size:15px}
.tick input::placeholder{color:#555}
.tick .btn{height:46px; border-radius:0}
.msg,.ok,.err,.form-msg{min-height:22px; margin-top:10px; font-size:14px; color:var(--ink-2)}
.msg.bad,.form-msg.bad,.err{color:#ff8f8f}
.msg.good{color:#9ee6b3}
.links{margin-top:22px; list-style:none}
.links a{display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:2px 16px; padding:12px 0; border-top:1px solid var(--line); text-decoration:none}
.links li:last-child a{border-bottom:1px solid var(--line)}
.links b{font-weight:500; font-size:15px}
.links span{grid-column:1; font-size:13.5px; color:var(--mute)}
.links svg{grid-column:2; grid-row:1 / 3; color:var(--mute); transition:transform .3s var(--ease), color .3s}
.links a:hover svg{transform:translateX(4px); color:var(--ink)}

/* ---------- inner pages (download, pricing, what's new, help, legal) ---------- */
.page:not([data-page="home"]){padding-top:clamp(56px,8vw,120px); padding-bottom:clamp(80px,9vw,140px)}
.col{width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--m)}
.page:not([data-page="home"]) .col + .col{margin-top:clamp(96px,10vw,160px)}
.page h1{font-weight:400; font-size:var(--fs-xl); line-height:.96; letter-spacing:-.05em; max-width:15ch}
.page:not([data-page="home"]) h2{font-weight:400; font-size:clamp(28px,3vw,44px); line-height:1.05; letter-spacing:-.035em}
.page h1 .sub{display:block}
.page h1 + .lead,.page h1 + .prose{margin-top:28px}
.page .sub-h{font-size:22px !important; letter-spacing:-.02em !important}
.steps{list-style:none; counter-reset:s; display:grid; gap:12px; max-width:760px}
.steps li{position:relative; padding:18px 20px 18px 62px; border-radius:18px; background:var(--t1); color:var(--ink-2)}
.steps li::before{counter-increment:s; content:"0" counter(s); position:absolute; left:22px; top:19px; font:400 12px var(--mono); color:var(--mute)}
.steps b{color:var(--ink); font-weight:500}
.stack{display:flex; flex-direction:column; gap:20px}
.stack h2 + .steps{margin-top:6px}
.dl-page{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--m)}
.dl-block{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.dl-meta{font-size:14px; color:var(--mute)}
.dl-meta a{color:var(--ink-2)}
.facts{display:grid; grid-template-columns:120px minmax(0,1fr); align-content:start; padding:10px 28px; border-radius:26px; background:var(--t1)}
.facts dt,.facts dd{padding:14px 0; font-size:14.5px; border-bottom:1px solid var(--line)}
.facts dt:last-of-type,.facts dd:last-of-type{border-bottom:0}
.facts dt{color:var(--mute)}
.facts dd{color:var(--ink-2)}
.form-row{display:flex; gap:8px; max-width:520px}
.form-row input{flex:1; min-width:0; height:50px; padding:0 20px; border:0; border-radius:999px; background:var(--t1); color:var(--ink); outline:none; box-shadow:inset 0 0 0 1px var(--line)}
.form-row input:focus{box-shadow:inset 0 0 0 1px #6a6a70}

.period{display:inline-flex; gap:2px; margin-top:40px; padding:4px; border-radius:999px; background:var(--t2)}
.plans{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:28px}
.plan{display:flex; flex-direction:column; padding:30px; border-radius:28px; background:var(--t1)}
.page .plan h2{font-size:19px; font-weight:500; letter-spacing:-.01em}
.plan.pop{background:var(--t2)}
.price{display:block; margin-top:30px; font-size:clamp(48px,5vw,80px); line-height:.9; letter-spacing:-.05em}
.per{margin-top:12px; font-size:14px; color:var(--mute)}
.pitch{margin-top:20px; color:var(--ink-2); font-size:15.5px}
.plan ul{list-style:none; margin:24px 0 32px}
.plan li{padding:10px 0; border-top:1px solid var(--line); font-size:14.5px; color:var(--ink-2)}
.plan li b{color:var(--ink); font-weight:500}
.plan li.x{color:var(--faint)}
.plan .btn{margin-top:auto; align-self:flex-start}
.how-up{margin-top:72px; max-width:760px}
.how-up .steps{margin-top:20px}

.faq{margin-top:28px; max-width:880px}
.faq details{border-bottom:1px solid var(--line)}
.faq details:first-child{border-top:1px solid var(--line)}
.faq summary{display:flex; justify-content:space-between; gap:24px; padding:22px 0; list-style:none; cursor:pointer; font-size:18px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; color:var(--mute); transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 24px; color:var(--ink-2); max-width:66ch}
.faq .a ul{padding-left:18px}

.changelog{margin-top:56px}
.rel{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:var(--m); padding:34px 0; border-top:1px solid var(--line)}
.rel .v{grid-column:1 / span 3; font-size:clamp(36px,3.6vw,56px); letter-spacing:-.05em; line-height:.95}
.rel .v small{display:block; margin-top:12px; font-size:14px; letter-spacing:0; color:var(--mute)}
.rel ul{grid-column:5 / span 8; list-style:none}
.rel li{padding:5px 0; color:var(--ink-2); max-width:70ch}

.legal{max-width:calc(72ch + var(--m) * 2)}
.legal p,.legal li{color:var(--ink-2); margin-top:12px}
.legal ul{padding-left:20px}
.legal .sub-h{margin-top:48px}
.legal b{color:var(--ink); font-weight:500}

/* ---------- pricing ---------- */
.pr-head{display:flex; flex-direction:column; align-items:center; text-align:center}
.page .pr-head h1{max-width:none}
.pr-head .lead{margin-inline:auto; max-width:60ch}
.bill{position:relative; display:inline-flex; margin-top:44px; padding:4px; border-radius:999px; background:var(--t1); box-shadow:inset 0 0 0 1px var(--line)}
.bill button{height:40px; padding:0 22px; border:0; border-radius:999px; background:none; color:var(--ink-2); font:500 14.5px var(--sans); cursor:pointer}
.bill-pill{position:absolute; z-index:2; top:4px; bottom:4px; left:0; width:var(--w,0); border-radius:999px; background:#fff; mix-blend-mode:difference; pointer-events:none;
  transform:translateX(var(--x,4px))}
.bill.ready .bill-pill{transition:transform .55s cubic-bezier(.3,1.25,.4,1), width .55s cubic-bezier(.3,1.25,.4,1)}
html:not(.js) .bill-pill{display:none}
html:not(.js) .bill button.on{background:var(--t3)}
.bill-note{margin-top:14px; font-size:14px; color:var(--mute)}
.tiers{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; max-width:1180px; margin:56px auto 0}
.tier{position:relative; display:flex; flex-direction:column; border-radius:26px; background:var(--t1); box-shadow:inset 0 0 0 1px var(--line)}
.tier header{padding:28px 28px 26px; border-bottom:1px solid var(--line); border-radius:26px 26px 0 0; background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0))}
.page .tier h2{font-size:19px; font-weight:500; letter-spacing:-.01em; line-height:1.2}
.tier header > p{margin-top:4px; font-size:14.5px; color:var(--mute)}
.amt{display:flex; align-items:baseline; gap:10px; margin-top:38px; overflow:hidden; padding-bottom:4px}
.amt .num{display:inline-block; font-size:clamp(48px,4.6vw,72px); line-height:1; letter-spacing:-.05em}
.amt .per{font-size:15px; color:var(--mute)}
.bill-line{margin-top:10px; font-size:13.5px; color:var(--mute)}
.roll{animation:roll .55s var(--ease) both}
.bill-line.roll{animation-name:fadeup}
@keyframes roll{from{opacity:0; transform:translateY(55%)}}
@keyframes fadeup{from{opacity:0; transform:translateY(6px)}}
.tier-tag{position:absolute; top:26px; right:26px; display:inline-flex; align-items:center; height:26px; padding:0 11px; border-radius:999px; background:rgba(255,159,29,.12); color:var(--amber); font-size:12.5px;
  opacity:0; transform:translateY(-6px); transition:opacity .35s, transform .45s var(--ease)}
.tiers.yearly .tier-tag{opacity:1; transform:none}
.feats{list-style:none; display:grid; gap:15px; padding:26px 28px 30px; font-size:14.5px; color:var(--ink-2)}
.feats li{display:flex; align-items:center; gap:12px}
.feats li::before{content:""; flex:none; width:16px; height:16px; background:var(--ink);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.3 2.7 2.7L16 9.6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m8 12.3 2.7 2.7L16 9.6'/%3E%3C/svg%3E") center/contain no-repeat}
.feats li.no{color:#58585c}
.feats li.no::before{background:#3a3a3d;
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9.5'/%3E%3Cpath d='m9 9 6 6M15 9l-6 6'/%3E%3C/svg%3E")}
.feats b{color:var(--ink); font-weight:500}
.tip{position:relative; display:inline-flex; align-items:baseline; border-bottom:1px dashed #4a4a4f; cursor:help; outline:none}
.tip:focus-visible{border-bottom-color:var(--ink)}
.tip-box{position:absolute; z-index:20; left:-12px; bottom:calc(100% + 10px); width:max-content; max-width:260px; padding:10px 13px; border-radius:12px; background:#1b1b1e; box-shadow:0 0 0 1px #2a2a2e, 0 18px 40px -12px rgba(0,0,0,.9);
  color:var(--ink-2); font-size:13px; line-height:1.45; white-space:normal; pointer-events:none; opacity:0; transform:translateY(4px); transition:opacity .2s, transform .25s var(--ease)}
.tip:hover .tip-box,.tip:focus .tip-box{opacity:1; transform:none}
.tier footer{margin-top:auto; padding:0 28px 28px}
.tier footer .btn{width:100%}
/* the plan in the middle gets a slow light running round its edge */
@property --ang{syntax:"<angle>"; inherits:false; initial-value:0deg}
.tier.hl{background:none; box-shadow:0 40px 90px -50px rgba(255,255,255,.14)}
.tier.hl::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:conic-gradient(from var(--ang), #26262a 0 62%, rgba(255,255,255,.2) 75%, #fff 88%, #26262a 94%);
  animation:trail 7s linear infinite}
.tier.hl::after{content:""; position:absolute; inset:1px; border-radius:25px; background:var(--t2); pointer-events:none}
.tier.hl > *{position:relative; z-index:1}
.tier.hl > .tier-tag{position:absolute; z-index:2}
@keyframes trail{to{--ang:360deg}}
.pr-fine{max-width:1180px; margin:22px auto 0; text-align:center; font-size:13.5px; color:var(--mute)}
.incl{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:0 var(--m); max-width:1180px; margin:clamp(72px,8vw,120px) auto 0; list-style:none}
.incl li{padding-top:20px; border-top:1px solid var(--line)}
.incl b{display:block; font-weight:500; font-size:16px}
.incl span{display:block; margin-top:6px; font-size:14.5px; color:var(--mute); line-height:1.5}
#pricing-how h2 .sub{display:block; color:var(--mute)}
.steps3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:36px; list-style:none; counter-reset:step}
.steps3 .cell{min-height:300px}
.steps3 .cell::before{counter-increment:step; content:"0" counter(step); font:400 12px var(--mono); color:var(--mute)}
.steps3 .cell svg{width:76%; height:100px}
.steps3 .cell p{min-height:0}
.steps3 b{color:var(--ink-2); font-weight:500}

/* ---------- contact ---------- */
.ct{align-items:start}
.ct-side{grid-column:1 / span 6}
.ct-main{grid-column:7 / span 6}
.page .ct-side h1{max-width:none}
.ct-links{list-style:none; margin-top:44px; display:grid; gap:6px}
.ct-links a{display:inline-flex; align-items:center; gap:14px; padding:6px 0; text-decoration:none; color:var(--ink-2)}
.ct-links b{display:block; font-weight:500; font-size:15px; color:var(--ink)}
.ct-links a > span:last-child{font-size:14.5px; line-height:1.4}
.ct-ic{display:grid; place-items:center; flex:none; width:42px; height:42px; border-radius:13px; background:var(--t1); box-shadow:inset 0 0 0 1px var(--line); color:var(--mute); transition:color .25s, box-shadow .25s, transform .35s var(--ease)}
.ct-links a:hover .ct-ic{color:var(--ink); box-shadow:inset 0 0 0 1px #3a3a3e; transform:translateX(2px)}
.globe-box{position:relative; height:clamp(240px,24vw,340px); margin-top:48px; overflow:hidden;
  -webkit-mask:linear-gradient(#000 35%, transparent 96%); mask:linear-gradient(#000 35%, transparent 96%)}
.globe-box canvas{display:block; width:100%; height:100%; cursor:grab; touch-action:pan-y}
.globe-box canvas:active{cursor:grabbing}
.ct-card{display:flex; flex-direction:column; padding:clamp(24px,3vw,40px); border-radius:28px; background:var(--t1); box-shadow:inset 0 0 0 1px var(--line)}
.page .ct-card h2{font-size:22px; font-weight:500; letter-spacing:-.02em; line-height:1.2}
.ct-sub{margin-top:6px; font-size:14.5px; color:var(--mute)}
.dots{height:4px; margin:24px 0 26px; background:radial-gradient(circle, #3c3c40 1px, transparent 1.3px) 0 50%/7px 4px repeat-x;
  -webkit-mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent)}
.ct-row{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.fld{display:flex; flex-direction:column; gap:8px}
.fld > span,.topics legend{font-size:13.5px; color:var(--mute)}
.fld input,.fld textarea{width:100%; border:0; border-radius:14px; background:var(--bg); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); outline:none; font:400 15px var(--sans); transition:box-shadow .25s}
.fld input{height:50px; padding:0 16px}
.fld textarea{min-height:170px; padding:14px 16px; resize:vertical; line-height:1.55}
.fld input:focus,.fld textarea:focus{box-shadow:inset 0 0 0 1px #6a6a70, 0 0 0 4px rgba(255,255,255,.04)}
.fld input::placeholder,.fld textarea::placeholder{color:#505054}
.topics{margin:22px 0 0; padding:0; border:0; display:flex; flex-wrap:wrap; gap:8px}
.topics legend{float:left; width:100%; margin-bottom:10px; padding:0}
.topics label{position:relative}
.topics input{position:absolute; opacity:0; width:1px; height:1px}
.topics span{display:inline-flex; align-items:center; height:36px; padding:0 15px; border-radius:999px; box-shadow:inset 0 0 0 1px var(--line); color:var(--mute); font-size:14px; cursor:pointer; transition:background-color .2s, color .2s, box-shadow .2s}
.topics label:hover span{color:var(--ink)}
.topics input:checked + span{background:var(--t3); color:var(--ink); box-shadow:inset 0 0 0 1px #34343a}
.topics input:focus-visible + span{outline:2px solid var(--ink); outline-offset:2px}
.topic-hint{min-height:1.5em; margin:12px 0 22px; font-size:13.5px; color:var(--ink-2)}
.ct-foot{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px}
.ct-foot .count{font-size:13px; color:var(--mute)}
.ct-foot .btn svg{transition:transform .3s var(--ease)}
.ct-foot .btn:hover svg{transform:translateX(3px)}

/* ---------- the separate pages (challenge, leaderboard, upgrade, reset, confirm) ---------- */
.nav-back{margin-left:auto; font-size:14.5px; color:var(--ink-2); text-decoration:none}
.nav-back:hover{color:var(--ink)}
.pg{padding-block:clamp(48px,7vw,104px) clamp(80px,9vw,140px)}
.pg-hero{align-items:end}
.pg-hero > div:first-child{grid-column:1 / span 7}
.pg-hero h1{font-weight:400; font-size:var(--fs-xl); line-height:.96; letter-spacing:-.05em}
.pg-hero h1 .sub{display:block}
.pg-hero .lead{margin-top:28px}
.figs{grid-column:9 / span 4; display:grid; gap:14px}
.fig{padding:24px 26px; border-radius:24px; background:var(--t1)}
.fig b{display:block; font-weight:400; font-size:clamp(40px,4vw,64px); line-height:.95; letter-spacing:-.05em}
.fig span{display:block; margin-top:12px; font-size:14.5px; color:var(--ink-2)}
.pg-sec{margin-top:clamp(80px,9vw,140px)}
.pg-sec > .h3t{font-weight:400; font-size:clamp(28px,3vw,44px); line-height:1.05; letter-spacing:-.035em}
.pg-sec > .h3t .sub{display:block}
.task{margin-top:28px; padding:clamp(26px,4vw,48px); border-radius:28px; background:var(--t1)}
.task p{font-size:clamp(24px,2.6vw,38px); line-height:1.18; letter-spacing:-.03em}
.task p.seal{margin-top:28px; font-size:14.5px; line-height:1.55; letter-spacing:0; color:var(--mute); max-width:70ch}
.seal code{display:block; margin-top:10px; font-size:12.5px; color:var(--ink-2); word-break:break-all}
.cells4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-top:28px; list-style:none; counter-reset:step}
.cells4 .cell::before{counter-increment:step; content:"0" counter(step); font:400 12px var(--mono); color:var(--mute)}
.cells4 .cell{min-height:300px}
.cells4 .cell svg{width:80%; height:96px; margin:auto auto 0}
.cells4 .cell h3{padding-top:22px}
.form{display:flex; flex-direction:column; gap:10px; max-width:760px; margin-top:28px}
.form label{margin-top:10px; font-size:14px; color:var(--mute)}
.form input,.form textarea{width:100%; border:0; border-radius:18px; background:var(--t1); color:var(--ink); box-shadow:inset 0 0 0 1px var(--line); outline:none; font-size:16px; transition:box-shadow .2s}
.form input{height:54px; padding:0 20px}
.form textarea{min-height:200px; padding:18px 20px; resize:vertical; line-height:1.55; font:400 14.5px/1.6 var(--mono)}
.form input:focus,.form textarea:focus{box-shadow:inset 0 0 0 1px #6a6a70}
.form input::placeholder,.form textarea::placeholder{color:#555}
.form .count{align-self:flex-end; font-size:13px; color:var(--mute)}
.form .btn{align-self:flex-start; margin-top:14px}
.form .msg{margin-top:4px}
.rules{margin-top:clamp(64px,7vw,104px); padding-top:28px; border-top:1px solid var(--line); color:var(--mute); font-size:14px; line-height:1.6}
.rules b{display:block; color:var(--ink-2); font-weight:500; margin-bottom:8px}
.rules ul{padding-left:18px; columns:2; column-gap:var(--m)}
.rules li{break-inside:avoid; margin-bottom:8px}
.rules a{color:inherit}
.board-g{align-items:start}
.board{grid-column:1 / span 7}
.board table{width:100%; border-collapse:collapse; margin-top:22px}
.board td{padding:18px 0; border-top:1px solid var(--line); font-size:18px}
.board tr:last-child td{border-bottom:1px solid var(--line)}
.board td.r{width:84px; font:400 14px var(--mono); color:var(--mute)}
.board tr.top3 td.r{color:var(--amber)}
.board td.i{text-align:right; color:var(--ink-2)}
.board td.empty{color:var(--mute)}
.board .total{margin-top:14px; font-size:14px; color:var(--mute)}
.side{grid-column:9 / span 4}
.side .panel h2{font-weight:500; font-size:19px; letter-spacing:-.01em}
.side .panel + .panel{margin-top:14px}
.side .form{margin-top:8px}
.link{display:flex; gap:8px; margin-top:14px}
.link code{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:14px 16px; border-radius:14px; background:var(--t2); font-size:13.5px; color:var(--ink-2)}
.stats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px}
.stats div{padding:16px; border-radius:16px; background:var(--t2)}
.stats b{display:block; font-weight:400; font-size:34px; letter-spacing:-.04em; line-height:1}
.stats span{display:block; margin-top:8px; font-size:13.5px; color:var(--mute)}
.narrow{max-width:620px}
.narrow h1{font-weight:400; font-size:clamp(40px,5vw,64px); line-height:1; letter-spacing:-.045em}
.narrow h1 + p{margin-top:20px}
.narrow ol{margin-top:22px; padding-left:22px; display:grid; gap:8px; color:var(--ink-2)}
.done{padding:28px; border-radius:24px; background:var(--t1)}
.done h2{font-weight:400; font-size:30px; letter-spacing:-.03em}
.done p{margin-top:12px; color:var(--ink-2)}
.done .face{width:56px; height:auto; margin-bottom:18px}
.fine-print{margin-top:48px; padding-top:20px; border-top:1px solid var(--line); font-size:13.5px; color:var(--mute)}
.note-box{padding:16px 18px; border-radius:16px; background:#1d1408; color:#f0d6a8; font-size:15px}
.choices{display:grid; gap:10px; margin-top:24px}
.choice{display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:16px; padding:20px 22px; border-radius:20px; background:var(--t1); box-shadow:inset 0 0 0 1px var(--line); cursor:pointer; transition:box-shadow .2s}
.choice input{width:18px; height:18px; margin:0; accent-color:var(--amber)}
.choice b{display:block; font-weight:500; font-size:18px}
.choice span{display:block; margin-top:2px; font-size:14px; color:var(--mute)}
.choice .p{font-size:30px; letter-spacing:-.04em; line-height:1; text-align:right; font-variant-numeric:tabular-nums}
.choice .p small{display:block; margin-top:6px; font-size:12.5px; letter-spacing:0; color:var(--mute)}
.choice:has(input:checked){box-shadow:inset 0 0 0 2px var(--amber)}
.summary{display:flex; justify-content:space-between; gap:12px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-weight:500}
#pp-buttons{min-height:50px; margin-top:16px}

/* ---------- smaller screens ---------- */
@media (max-width:1100px){
  .f3{display:none}
  .steps4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot > div:first-child{grid-column:1 / -1}
  .foot > div{grid-column:span 3}
}
@media (max-width:900px){
  .nav-links{display:none; position:absolute; top:var(--navh); left:0; right:0; flex-direction:column; gap:0; margin:0; padding:6px var(--m) 18px; background:#000}
  .nav-links a{padding:15px 0; font-size:17px; border-top:1px solid var(--line)}
  .nav.open .nav-links{display:flex; height:calc(100vh - var(--navh)); height:calc(100dvh - var(--navh)); overflow-y:auto}
  .menu-open body{overflow:hidden}
  .nav.open .nav-links a{animation:menuIn .4s cubic-bezier(.2,.7,.2,1) both}
  .nav.open .nav-links a:nth-child(2){animation-delay:.04s}
  .nav.open .nav-links a:nth-child(3){animation-delay:.08s}
  .nav.open .nav-links a:nth-child(4){animation-delay:.12s}
  .nav.open .nav-links a:nth-child(5){animation-delay:.16s}
  .nav-menu{display:inline-flex; align-items:center; margin-left:auto}
  .nav-cta{display:none}
  .how-top > div,.loop,.agents,.why-copy,.qa,.install,.founder blockquote,.founder-side,.demo-top h2,.demo-top p{grid-column:1 / -1}
  .demo-top p{margin-top:22px}
  .f1{top:3%; left:-40px; width:230px}
  .f2{top:2%; right:-70px; width:240px}
  .f4{bottom:7%; right:12px; width:150px}
  .loop{margin-top:48px}
  .why-copy{margin-top:48px}
  .install{margin-top:56px}
  .founder-side{margin-top:40px}
  .ba,.dl-page{grid-template-columns:1fr}
  .prices li{grid-column:1 / -1}
  .prices li + li{margin-top:14px}
  .plans{grid-template-columns:1fr}
  .rows dt,.rows dd{grid-column:1 / -1}
  .rows dd{margin-top:8px}
  .rel .v,.rel ul{grid-column:1 / -1}
  .rel ul{margin-top:16px}
  .panels .p1,.panels .p2{display:none}
  .panels img{width:min(560px,92vw)}
  .tiers{grid-template-columns:1fr; max-width:560px}
  .incl{grid-template-columns:1fr 1fr; gap:28px var(--m)}
  .steps3{grid-template-columns:1fr}
  .steps3 .cell{min-height:240px}
  .ct-side,.ct-main{grid-column:1 / -1}
  .ct-main{margin-top:8px}
  .globe-box{margin-top:32px; height:220px}
}
@media (max-width:560px){
  body{font-size:16px}
  .lp h1{font-size:clamp(30px,9.4vw,44px)}
  .pill span{display:none}
  .steps4{grid-template-columns:1fr}
  .cell{min-height:260px}
  .stage,.demo-stage .stage{height:520px}
  .isl[data-state="ask"],.isl[data-state="talk"]{width:100%}
  .cta .btn-amber{width:100%}
  .feat-top .arrows{display:none}
  .form-row{flex-direction:column}
  .form-row .btn{width:100%}
  .foot > div{grid-column:span 6}
  .panels{height:260px}
  .hide-s{display:none}
  .incl{grid-template-columns:1fr}
  .ct-row{grid-template-columns:1fr}
  .ct-foot{flex-direction:column-reverse; align-items:stretch}
  .ct-foot .count{text-align:right}
  .tip-box{max-width:220px}
  .agents li{aspect-ratio:auto; padding:18px 16px 20px}
  .agents img{position:relative; left:auto; top:auto; width:58%; margin:6px auto 18px; transform:none}
  .agents li:hover img{transform:none}
  .loop .lbl{display:none}
  .loop .name{font-size:22px}
  .prompt{font-size:13px}
}

@media (max-width:900px){
  .pg-hero > div:first-child,.figs,.board,.side{grid-column:1 / -1}
  .figs{margin-top:40px; grid-template-columns:1fr 1fr}
  .side{margin-top:56px}
  .cells4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rules ul{columns:1}
}
@media (max-width:560px){
  .figs,.cells4{grid-template-columns:1fr}
  .choice{grid-template-columns:auto minmax(0,1fr); }
  .choice .p{grid-column:2; text-align:left}
}

/* people who prefer less motion get the finished page straight away */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.01ms !important}
  .js .rv{opacity:1; transform:none}
  .mark .o img{opacity:0}
  .mark .o img:first-child{opacity:1; transform:translate(-50%,-50%)}
  .win{transform:none}
}