/* Tokens, read from web/src/design/tokens.css at build time. */
:root{--brand-rgb:255 102 0;--brand:rgb(var(--brand-rgb));--brand-strong:#B84500;--brand-wash:#FFF4EC;--page:#FAF9F8;--surface:#FFFFFF;--surface-sunk:#F3F1EF;--ink:#1A1714;--ink-soft:#5B534C;--ink-faint:#8C837B;--ink-onbrand:#FFFFFF;--line:#E6E2DE;--line-soft:#F0EDEA;--line-strong:#D2CCC6;--good:#1F7A55;--good-wash:#E9F5F0;--warn:#B07E04;--warn-wash:#FDF6E3;--bad:#B3392B;--bad-wash:#FBEDEB;--info:#1D63C9;--info-wash:#EAF1FC;--font:ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;--font-arabic:"Segoe UI", Tahoma, "Noto Naskh Arabic", "Arabic Typesetting", serif;--font-mono:ui-monospace, "Cascadia Mono", "SF Mono", Menlo, monospace;--t-xs:0.72rem;--t-sm:0.82rem;--t-md:0.94rem;--t-lg:1.13rem;--t-xl:1.42rem;--t-2xl:1.78rem;--t-3xl:2.25rem;--w-normal:400;--w-medium:500;--w-semibold:600;--s-1:0.25rem;--s-2:0.5rem;--s-3:0.75rem;--s-4:1rem;--s-5:1.5rem;--s-6:2rem;--s-7:3rem;--s-8:4rem;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-full:999px;--shadow-sm:0 1px 2px rgb(26 23 20 / 6%);--shadow-md:0 1px 2px rgb(26 23 20 / 5%), 0 10px 24px -14px rgb(26 23 20 / 22%);--shadow-lg:0 2px 4px rgb(26 23 20 / 6%), 0 24px 48px -24px rgb(26 23 20 / 26%);--quick:120ms cubic-bezier(0.2, 0, 0.2, 1);--settled:220ms cubic-bezier(0.2, 0, 0.2, 1);color-scheme:light}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--brand-rgb:255 102 0;--brand-strong:#FFA268;--brand-wash:#2A1A0F;--page:#14120F;--surface:#1C1917;--surface-sunk:#131110;--ink:#F0EBE6;--ink-soft:#A9A099;--ink-faint:#79706A;--ink-onbrand:#1A1714;--line:#302B27;--line-soft:#262220;--line-strong:#453E39;--good:#58B58C;--good-wash:#14251E;--warn:#DFB040;--warn-wash:#262014;--bad:#E4796B;--bad-wash:#2A1917;--info:#6BA6FF;--info-wash:#131D2C;--shadow-sm:0 1px 2px rgb(0 0 0 / 40%);--shadow-md:0 1px 2px rgb(0 0 0 / 40%), 0 10px 24px -14px rgb(0 0 0 / 70%);--shadow-lg:0 2px 4px rgb(0 0 0 / 40%), 0 24px 48px -24px rgb(0 0 0 / 80%);color-scheme:dark}}
:root[data-theme="dark"]{--brand-rgb:255 102 0;--brand-strong:#FFA268;--brand-wash:#2A1A0F;--page:#14120F;--surface:#1C1917;--surface-sunk:#131110;--ink:#F0EBE6;--ink-soft:#A9A099;--ink-faint:#79706A;--ink-onbrand:#1A1714;--line:#302B27;--line-soft:#262220;--line-strong:#453E39;--good:#58B58C;--good-wash:#14251E;--warn:#DFB040;--warn-wash:#262014;--bad:#E4796B;--bad-wash:#2A1917;--info:#6BA6FF;--info-wash:#131D2C;--shadow-sm:0 1px 2px rgb(0 0 0 / 40%);--shadow-md:0 1px 2px rgb(0 0 0 / 40%), 0 10px 24px -14px rgb(0 0 0 / 70%);--shadow-lg:0 2px 4px rgb(0 0 0 / 40%), 0 24px 48px -24px rgb(0 0 0 / 80%);color-scheme:dark}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  margin:0;background:var(--page);color:var(--ink);
  font-family:var(--font);
  font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%}
a{color:inherit}
b{font-weight:650;color:var(--ink)}

.wrap{width:min(1140px,calc(100% - 48px));margin-inline:auto}
@media (max-width:640px){.wrap{width:calc(100% - 32px)}}

/* THE LOGO. Two masks over a colour, exactly as the application draws it. */
.logo{display:inline-flex;align-items:center;flex:none}
.logo i{display:block;flex:none}
.mark{display:inline-block;flex:none}

/* THE ARC — his signature device. One per surface, and it bleeds off the
   edge: an arc with a visible start and end is a shape, not a device. */
.arc{
  position:absolute;display:block;border-radius:50%;
  border:1.5px solid #FF6600;
  pointer-events:none;
}

/* ---------- the header ---------- */
header.top{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--page) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.top .bar{display:flex;align-items:center;gap:28px;height:72px}
.top nav{display:flex;gap:24px;margin-inline-start:12px;flex:1}
.top nav a{
  text-decoration:none;color:var(--ink-soft);font-size:.94rem;
  padding:6px 0;border-bottom:2px solid transparent;
}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current="page"]{color:var(--ink);border-bottom-color:#FF6600}
.top .doors{display:flex;align-items:center;gap:10px;flex:none}
@media (max-width:900px){
  .top nav{display:none}
  .top .bar{height:64px;gap:14px;justify-content:space-between}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  height:44px;padding:0 20px;border-radius:10px;
  font-size:.95rem;font-weight:600;text-decoration:none;
  border:1px solid transparent;white-space:nowrap;
  transition:transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:active{transform:translateY(1px)}
.btn--brand{background:#FF6600;color:#FFFFFF;box-shadow:0 1px 2px rgb(0 0 0 / .08)}
.btn--brand:hover{box-shadow:0 6px 18px rgb(255 102 0 / .28)}
.btn--quiet{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--quiet:hover{background:var(--surface)}
.btn--onbrand{background:#FFFFFF;color:#FF6600}
.btn--sm{height:38px;padding:0 15px;font-size:.9rem}

/* ---------- sections ---------- */
section{position:relative;padding:96px 0}
section.tint{background:var(--surface-sunk)}
@media (max-width:640px){section{padding:64px 0}}

.eyebrow{
  margin:0 0 14px;font-size:.75rem;font-weight:650;
  letter-spacing:.13em;text-transform:uppercase;color:#FF6600;
}
h1,h2,h3{margin:0;text-wrap:balance;letter-spacing:-0.021em;line-height:1.08}
h1{font-size:clamp(2.3rem,5.4vw,3.9rem);font-weight:680}
h2{font-size:clamp(1.7rem,3.3vw,2.5rem);font-weight:670;line-height:1.14}
h3{font-size:1.02rem;font-weight:650;line-height:1.3}

/* ---------- the hero ---------- */
.hero{padding-top:84px;padding-bottom:88px;overflow:hidden}
.hero h1{max-width:16ch}
.hero .lines{margin-top:34px;display:flex;flex-direction:column;gap:16px;max-width:62ch}

/* A hero with no device: the headline and the lines side by side, so the
   fold is not half empty and the headline is not six lines long. */
.hero__split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:end}
.hero__split h1{max-width:20ch}
.hero__split .lines{margin-top:0;padding-bottom:6px}
@media (max-width:980px){
  .hero__split{grid-template-columns:1fr;gap:30px;align-items:stretch}
  .hero__split .lines{margin-top:8px}
}
.hero .lines p{
  margin:0;font-size:1.2rem;color:var(--ink-soft);line-height:1.5;
  padding-inline-start:18px;border-inline-start:2px solid var(--line-strong);
}
.hero .lines p b{color:var(--ink)}
.hero .doors{display:flex;flex-wrap:wrap;gap:12px;margin-top:38px}
.hero .under{margin:18px 0 0;font-size:.88rem;color:var(--ink-faint)}

/* ---------- the hero device ---------- */
.hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center}
@media (max-width:980px){.hero__grid{grid-template-columns:1fr;gap:44px}.talk{max-width:440px}}

/* (The still .talk device was replaced by the phone in lib/motion.mjs —
   the same idea, playing rather than posed.) */
.talk .who{
  display:flex;align-items:center;gap:9px;padding-bottom:14px;
  border-bottom:1px solid var(--line-soft);
}
.talk .who .av{
  width:30px;height:30px;border-radius:50%;flex:none;
  background:#FF6600;color:#fff;display:grid;place-items:center;
  font-size:.78rem;font-weight:650;
}
.talk .who .nm{font-size:.9rem;font-weight:640}
.talk .who .tag{
  margin-inline-start:auto;font-size:.66rem;font-weight:650;letter-spacing:.07em;
  text-transform:uppercase;color:#FF6600;
  border:1px solid #FF6600;border-radius:99px;padding:3px 9px;
}
.talk .msg{max-width:84%;padding:11px 14px;border-radius:14px;font-size:.95rem;line-height:1.45}
.talk .msg.them{background:var(--surface-sunk);color:var(--ink);border-end-start-radius:5px}
.talk .msg.us{
  align-self:flex-end;background:#FF6600;color:#fff;border-end-end-radius:5px;
}
.talk .msg.us b{color:#fff}
.talk .foot{
  margin-top:2px;font-size:.78rem;color:var(--ink-faint);
  display:flex;align-items:center;gap:7px;
}
.talk .foot .dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}

/* ---------- the hero deck ----------
   Five slides, one showing at a time, with the ticks underneath. Everything
   that HIDES a slide is scoped to .motion — without the script all five are
   simply stacked and read as a list, which is what a crawler and a screen
   reader get and what the page is before any JavaScript runs. */
/* THE SLIDES HAVE TO BE IN THE FOLD. Pushed below it they are a carousel
   nobody knows exists — which is the fault this change was made to fix,
   moved one screen down. Everything above them is tightened until they fit. */
.hero--deck{padding-top:28px;padding-bottom:44px}
/* THE DEVICE IS POSITIONED AGAINST THE WHOLE HERO, not against the deck.
   Anchored to the deck it began below the buttons and ran off the bottom of
   the fold, while the space beside the headline sat empty — "up you are
   leaving the space where you can show long long animation". */
.motion .hero--deck .wrap{position:relative}
.hero__head{max-width:56ch}
.hero__head h1{max-width:17ch;font-size:clamp(1.85rem,3.4vw,2.45rem)}
.hero__head .lines{margin-top:18px;gap:10px;max-width:56ch}
.hero__head .lines p{font-size:1.02rem}
.hero__head .doors{margin-top:24px}

.deck{margin-top:10px}
.deck__slides{display:flex;flex-direction:column;gap:46px}
/* start, not center: the device is much taller than two lines of text, so
   centring left a band of empty page between the buttons and the slide. */
.slide{display:grid;grid-template-columns:1fr 520px;gap:56px;align-items:start}
.slide__say h2{font-size:clamp(1.25rem,2vw,1.55rem);max-width:17ch}
.slide__say p{
  margin:15px 0 0;font-size:1.05rem;line-height:1.55;color:var(--ink-soft);
  max-width:52ch;padding-inline-start:18px;border-inline-start:2px solid var(--line-strong);
}
.slide__say p b{color:var(--ink)}

.deck .dev__frame{max-width:520px;padding:15px 15px 16px}

/* With the script running, the DECK becomes the grid and each slide dissolves
   into it — display:contents — so the five headings stack in the left column,
   the five devices stack in the right, AND THE TICKS SIT DIRECTLY UNDER THE
   WRITING.

   They were under the DEVICE before, which is three hundred pixels taller
   than two lines of text: a hole in the middle of the fold, with the marks
   landing somewhere nobody was looking. */
/* align-content:start as well as align-items. The min-height is there to
   contain the positioned device; without align-content the grid spent that
   spare height INFLATING THE ROWS, which pushed the ticks back down away
   from the sentence they belong to — the very thing the row was moved for. */
.motion .deck{display:grid;grid-template-columns:1fr 520px;gap:0 56px;align-items:start;align-content:start}
.motion .deck__slides{display:contents}
.motion .slide{display:contents}
.motion .slide__say,.motion .slide__dev{
  opacity:0;visibility:hidden;transform:translateY(14px);
  transition:opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1), visibility 0s linear .5s;
}
.motion .slide__say{grid-column:1;grid-row:1}
/* THE DEVICE IS TAKEN OUT OF THE ROW FLOW. Spanning both rows it forced the
   text row to grow to nearly its own height, so the ticks were pushed a
   hundred and fifty pixels below the sentence they belong to. Positioned, it
   sizes nothing but itself, and the left column measures on its own writing. */
.motion .slide__dev{position:absolute;top:0;inset-inline-end:0;width:520px}
.motion .hero__head{max-width:calc(100% - 576px)}
.motion .deck{grid-template-columns:minmax(0,1fr)}
.motion .slide[data-on] .slide__say,.motion .slide[data-on] .slide__dev{
  opacity:1;visibility:visible;transform:none;transition-delay:0s;
}
.motion .deck__ticks{grid-column:1;grid-row:2;align-self:start}

/* THE TICKS. "Tick tick tick tick tick." Five marks, the current one filling
   across five seconds, so a visitor knows there is more coming before they
   decide there is not. */
.deck__ticks{display:flex;gap:9px;margin-top:26px;max-width:520px}
.motion .deck__ticks{margin-top:24px}
.deck__tick{
  appearance:none;border:0;background:none;padding:8px 0;cursor:pointer;
  flex:1;max-width:96px;
}
.deck__tick i{display:block;height:3px;border-radius:99px;background:var(--line-strong);overflow:hidden;position:relative}
.deck__tick i::after{
  content:'';position:absolute;inset:0;width:0;border-radius:99px;background:#FF6600;
}
.deck__tick[aria-selected="true"] i::after{animation:tickfill 5s linear forwards}
.deck__tick[data-done] i::after{width:100%}
.deck__tick[data-held][aria-selected="true"] i::after{animation:none;width:100%}
@keyframes tickfill{from{width:0}to{width:100%}}
.deck__tick:focus-visible{outline:2px solid #FF6600;outline-offset:4px;border-radius:6px}

/* No script: no stacking, so the ticks would point at nothing. */
html:not(.motion) .deck__ticks{display:none}

@media (max-width:1180px){
  .slide{grid-template-columns:1fr;gap:26px}
  .slide__dev{order:2}
  .motion .deck{grid-template-columns:1fr;min-height:0}
  .motion .slide__dev{position:static;width:100%;max-width:520px;grid-column:1;grid-row:3}
  .motion .deck__ticks{grid-row:2}
}
@media (prefers-reduced-motion: reduce){
  .deck__tick[aria-selected="true"] i::after{animation:none;width:100%}
}

/* ---------- a module block: the device, and the two halves ----------
   Fifteen of these run down the home page, so they alternate side and ground
   — otherwise the eye stops reading at about the fourth. */
.mod{padding:78px 0}
.mod:nth-of-type(even){background:var(--surface-sunk)}
.mod__grid{display:grid;grid-template-columns:1fr 520px;gap:60px;align-items:center}
.mod--flip .mod__grid{grid-template-columns:520px 1fr}
.mod--flip .mod__say{order:2}
.mod--flip .mod__dev{order:1}
.mod__n{
  margin:0 0 12px;font-size:.78rem;font-weight:680;letter-spacing:.14em;
  color:;font-variant-numeric:tabular-nums;
}
.mod__say h2{font-size:clamp(1.5rem,2.6vw,2.05rem)}
.mod__halves{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:30px}
.half h3{
  margin:0 0 12px;font-size:.72rem;font-weight:650;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-faint);
  padding-bottom:9px;border-bottom:1px solid var(--line);
}
.half--ai h3{color:;border-bottom-color:}
.half ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:11px}
.half li{
  position:relative;padding-inline-start:17px;font-size:.97rem;line-height:1.5;
  color:var(--ink-soft);
}
.half li::before{
  content:'';position:absolute;inset-inline-start:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--line-strong);
}
.half--ai li::before{background:}
@media (max-width:1080px){
  .mod__grid,.mod--flip .mod__grid{grid-template-columns:1fr;gap:38px}
  .mod--flip .mod__say{order:1}
  .mod--flip .mod__dev{order:2}
}
@media (max-width:640px){
  .mod{padding:54px 0}
  .mod__halves{grid-template-columns:1fr;gap:24px}
}

/* ---------- ledger: the label, then the line ---------- */
.ledger{margin-top:44px;border-top:1px solid var(--line)}
.ledger .row{
  display:grid;grid-template-columns:minmax(190px,26%) 1fr;
  gap:28px;padding:22px 0;border-bottom:1px solid var(--line);
  align-items:baseline;
}
.ledger .row h3{color:var(--ink)}
.ledger .row p{margin:0;color:var(--ink-soft);font-size:1.06rem}
@media (max-width:760px){
  .ledger .row{grid-template-columns:1fr;gap:7px;padding:18px 0}
  .ledger .row p{font-size:1rem}
}

/* ---------- points: cards ---------- */
.cards{margin-top:44px;display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  padding:26px 24px;display:flex;flex-direction:column;gap:10px;
}
.card h3{color:var(--ink)}
.card p{margin:0;color:var(--ink-soft);font-size:1rem}
.card .rule{width:26px;height:2px;background:#FF6600;border-radius:2px}

/* ---------- proof: a plain read-down list ---------- */
.proof{margin-top:42px;display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}
.proof .item{padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
.proof .item .name{font-size:.76rem;font-weight:650;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);display:block;margin-bottom:6px}
.proof .item p{margin:0;color:var(--ink-soft);font-size:1.02rem}

/* ---------- steps ---------- */
.steps{margin-top:44px;display:grid;gap:0}
.steps .step{display:grid;grid-template-columns:auto 1fr;gap:22px;padding:20px 0;border-bottom:1px solid var(--line)}
.steps .n{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:grid;place-items:center;font-size:.85rem;font-weight:650;
  color:#FF6600;border:1px solid #FF6600;
}
.steps h3{margin-bottom:4px}
.steps p{margin:0;color:var(--ink-soft)}

/* ---------- quote: one line, alone ---------- */
.quote{text-align:center;max-width:none}
.quote h2{font-size:clamp(1.9rem,4.4vw,3.1rem);max-width:24ch;margin-inline:auto}
.quote p{margin:26px auto 0;max-width:58ch;font-size:1.15rem;color:var(--ink-soft)}

/* ---------- the closing band ---------- */
.action{background:#FF6600;color:#FFFFFF;text-align:center;overflow:hidden}
.action h2{color:#FFFFFF;max-width:26ch;margin-inline:auto}
.action p{margin:20px auto 0;max-width:58ch;font-size:1.12rem;color:rgb(255 255 255 / .92)}
.action p b{color:#FFFFFF}
.action .doors{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
.action .arc{border-color:#FFFFFF}

/* ---------- footer ---------- */
footer{background:var(--surface-sunk);border-top:1px solid var(--line);padding:60px 0 44px}
footer .cols{display:grid;gap:34px;grid-template-columns:1.4fr repeat(2,1fr)}
footer h4{margin:0 0 14px;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-faint);font-weight:650}
footer a{display:block;text-decoration:none;color:var(--ink-soft);font-size:.95rem;padding:5px 0}
footer a:hover{color:var(--ink)}
footer .said{margin:16px 0 0;color:var(--ink-faint);font-size:.92rem;max-width:34ch}
footer .end{margin-top:42px;padding-top:22px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;color:var(--ink-faint);font-size:.86rem}
@media (max-width:760px){footer .cols{grid-template-columns:1fr 1fr}footer .cols>div:first-child{grid-column:1/-1}}

/* Keyboard focus, everywhere, and visible on both grounds. */
a:focus-visible,.btn:focus-visible{outline:2px solid #FF6600;outline-offset:3px;border-radius:6px}


/* ================= the device frame ================= */
.dev{display:flex;justify-content:center;width:100%}
.dev__frame{
  width:100%;max-width:520px;
  background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:15px 15px 16px;
  box-shadow:0 26px 64px rgb(0 0 0 / .10), 0 2px 6px rgb(0 0 0 / .05);
  display:flex;flex-direction:column;gap:11px;
}
.dev__top{display:flex;align-items:center;gap:10px;padding-bottom:11px;border-bottom:1px solid var(--line-soft)}
.dev__top .txt{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.dev__top .txt b{font-size:.9rem;font-weight:640}
.dev__top .txt i{font-style:normal;font-size:.71rem;color:var(--good)}
.dev__tag{
  margin-inline-start:auto;font-size:.62rem;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:#FF6600;border:1px solid #FF6600;
  border-radius:99px;padding:3px 9px;white-space:nowrap;flex:none;
}
/* LONG ENOUGH TO READ A WHOLE CONVERSATION. It was 262px and four turns —
   "you are showing very small, and up you are leaving the space where you can
   show long long animation". The thread scrolls itself as it fills, so twelve
   turns fit without the frame growing down the page. */
.dev__body{
  display:flex;flex-direction:column;gap:8px;
  min-height:352px;max-height:352px;overflow:hidden;
}
/* A CONVERSATION SITS AT THE BOTTOM, the way a real thread does — but only a
   conversation. Applied to every device it left the voice meters and the
   lists with a hundred pixels of empty frame above them. */
.dev--chat .dev__body,.dev--order .dev__body,.dev--call .dev__body{justify-content:flex-end}
.dev__body::-webkit-scrollbar{display:none}

/* THE COMPOSER. The reply is typed here, letter by letter, and then sent —
   which is what the product actually does: the AI drafts and a person sends
   (input 81). */
.dev__compose{
  display:flex;align-items:center;gap:9px;
  background:var(--surface-sunk);border-radius:99px;padding:9px 8px 9px 15px;
  min-height:42px;
}
.dev__draft{
  flex:1;min-width:0;font-size:.9rem;color:var(--ink);
  display:flex;align-items:center;gap:1px;overflow:hidden;white-space:nowrap;
}
.dev__draft i{font-style:normal}
.dev__draft .caret{
  display:inline-block;width:2px;height:15px;background:#FF6600;border-radius:1px;
  opacity:0;flex:none;
}
.dev__compose[data-writing] .dev__draft .caret{opacity:1;animation:blink 1s steps(1) infinite}
.dev__send{
  flex:none;font-size:.78rem;font-weight:650;letter-spacing:.04em;
  color:#fff;background:#FF6600;border-radius:99px;padding:7px 15px;
  opacity:.35;transition:opacity .2s ease, transform .2s ease;
}
.dev__compose[data-ready] .dev__send{opacity:1}
.dev__compose[data-sent] .dev__send{transform:scale(.9)}
.dev__foot{
  margin-top:2px;padding-top:10px;border-top:1px solid var(--line-soft);
  font-size:.74rem;color:var(--ink-faint);display:flex;align-items:center;gap:7px;
}
.dev__foot .dot{width:6px;height:6px;border-radius:50%;background:var(--good);flex:none}

.dev .av{
  width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:.76rem;font-weight:650;
  background:var(--surface-sunk);color:var(--ink-soft);
}
.dev .av[data-tone="brand"]{background:#FF6600;color:#fff}
.dev .chip{
  margin-inline-start:auto;flex:none;font-size:.63rem;font-weight:650;
  letter-spacing:.05em;text-transform:uppercase;border-radius:99px;padding:3px 8px;
  background:var(--surface-sunk);color:var(--ink-soft);
}
.dev .chip[data-tone="brand"]{background:#FF6600;color:#fff}

/* ================= the pieces devices are built from ================= */
.dev .msg{max-width:86%;padding:9px 12px;border-radius:14px;font-size:.9rem;line-height:1.45}
.dev .msg.them{background:var(--surface-sunk);color:var(--ink);border-end-start-radius:4px;align-self:flex-start}
.dev .msg.us{background:#FF6600;color:#fff;border-end-end-radius:4px;align-self:flex-end}
.dev .msg.us b{color:#fff}
.dev .msg.rtl{text-align:right}

.dev .row{display:flex;align-items:center;gap:9px;padding:7px 0}
.dev .row .txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.dev .row .txt b{font-size:.86rem;font-weight:620}
.dev .row .txt i{font-style:normal;font-size:.74rem;color:var(--ink-faint)}
.dev .row.picked{background:var(--brand-wash);margin-inline:-8px;padding-inline:8px;border-radius:10px}

/* The card device names its customer with the same .txt pattern the rows
   use, but .row was the only selector that styled it — so the name and the
   description ran together on one line: "Fatima A.Customer since 2024". */
.dev .who{display:flex;align-items:center;gap:9px;padding-bottom:2px}
.dev .who .txt{display:flex;flex-direction:column;line-height:1.3;min-width:0}
.dev .who .txt b{font-size:.88rem;font-weight:640}
.dev .who .txt i{font-style:normal;font-size:.76rem;color:var(--ink-faint)}

.dev .tiles{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.dev .tile{
  background:var(--surface-sunk);border-radius:10px;padding:9px 11px;
  display:flex;flex-direction:column;gap:2px;
}
.dev .tile .k{font-size:.63rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.dev .tile .v{font-size:.86rem;font-weight:600}

.dev .pop{
  position:relative;background:var(--surface);border:1px solid #FF6600;
  border-radius:12px;padding:11px 12px 11px 14px;display:flex;flex-direction:column;gap:2px;
  box-shadow:0 10px 26px rgb(255 102 0 / .16);
}
.dev .pop .pin{position:absolute;inset-inline-start:0;top:12px;bottom:12px;width:3px;background:#FF6600;border-radius:3px}
.dev .pop b{font-size:.85rem;font-weight:640}
.dev .pop i{font-style:normal;font-size:.8rem;color:var(--ink-soft)}

.dev .done{
  display:flex;align-items:center;gap:8px;font-size:.83rem;font-weight:600;
  color:var(--good);background:var(--good-wash);border-radius:10px;padding:9px 12px;
}
.dev .done .tick{
  width:18px;height:18px;border-radius:50%;background:var(--good);color:#fff;
  display:grid;place-items:center;font-size:.65rem;flex:none;
}

.dev .think{
  display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-faint);
  background:var(--surface-sunk);border-radius:10px;padding:8px 11px;
}
.dev .think .sp{
  width:13px;height:13px;border-radius:50%;flex:none;
  border:2px solid #FF6600;border-top-color:transparent;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}

.dev .pick{display:flex;align-items:center;gap:8px;background:var(--surface-sunk);border-radius:10px;padding:9px 11px}
.dev .pick .k{font-size:.63rem;font-weight:650;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-faint)}
.dev .pick .v{font-size:.86rem;font-weight:620}

/* mass chat — one message going out to everybody */
.dev .spray{display:flex;flex-wrap:wrap;gap:5px;padding:4px 0}
.dev .spray i{
  width:16px;height:16px;border-radius:5px;background:#FF6600;opacity:0;
  animation:sent .5s ease forwards;animation-delay:var(--d);
}
@keyframes sent{from{opacity:0;transform:translateY(7px) scale(.7)}to{opacity:.9;transform:none}}
.dev .stat{display:flex;align-items:baseline;gap:9px;padding:5px 0}
.dev .stat b{font-size:1.15rem;font-weight:680;color:#FF6600;font-variant-numeric:tabular-nums}
.dev .stat i{font-style:normal;font-size:.82rem;color:var(--ink-soft)}

.dev .prod{display:flex;align-items:center;gap:11px;background:var(--surface-sunk);border-radius:12px;padding:10px}
.dev .prod .ph{width:44px;height:44px;border-radius:9px;flex:none;background:linear-gradient(135deg,#FF6600,color-mix(in srgb, #FF6600 45%, #FFFFFF))}
.dev .prod .txt{display:flex;flex-direction:column;line-height:1.3}
.dev .prod .txt b{font-size:.88rem;font-weight:640}
.dev .prod .txt i{font-style:normal;font-size:.8rem;color:var(--ink-soft)}

/* the call */
.dev .ring{display:flex;align-items:center;gap:10px;background:var(--surface-sunk);border-radius:12px;padding:11px}
.dev .ring .pulse{
  width:12px;height:12px;border-radius:50%;background:#FF6600;flex:none;
  box-shadow:0 0 0 0 rgb(255 102 0 / .55);animation:pulse 1.4s infinite;
}
@keyframes pulse{70%{box-shadow:0 0 0 12px rgb(255 102 0 / 0)}100%{box-shadow:0 0 0 0 rgb(255 102 0 / 0)}}
.dev .ring b{font-size:.87rem;font-weight:640}
.dev .ring i{font-style:normal;font-size:.8rem;color:var(--ink-faint);margin-inline-start:auto}
.dev .live{display:flex;align-items:center;gap:8px;font-size:.76rem;color:var(--ink-faint)}
.dev .live .rec{width:8px;height:8px;border-radius:50%;background:#d33;flex:none;animation:blink 1.1s infinite}
@keyframes blink{50%{opacity:.25}}
.dev .said{font-size:.86rem;line-height:1.5;padding:6px 0;display:flex;flex-direction:column;gap:2px}
.dev .said .lbl{font-size:.62rem;font-weight:650;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint)}
.dev .said.us .lbl{color:#FF6600}

/* the voice */
.dev .bars{display:flex;align-items:center;gap:3px;height:64px;padding:4px 0}
.dev .bars i{
  flex:1;border-radius:2px;background:#FF6600;height:12%;opacity:.85;
  animation:rise .42s ease forwards;animation-delay:var(--d);
}
@keyframes rise{to{height:var(--h)}}
.dev .meter{display:flex;align-items:center;gap:9px;padding:4px 0}
.dev .meter .k{font-size:.76rem;color:var(--ink-soft);width:64px;flex:none}
.dev .meter .bar{flex:1;height:6px;border-radius:99px;background:var(--surface-sunk);overflow:hidden}
.dev .meter .bar i{display:block;height:100%;width:0;border-radius:99px;background:#FF6600;animation:fill .8s ease forwards}
@keyframes fill{to{width:var(--w)}}
.dev .meter .v{font-size:.76rem;font-weight:640;font-variant-numeric:tabular-nums;width:34px;text-align:right}

/* [hidden] MEANS HIDDEN. A class with display:flex outranks the user agent's
   [hidden]{display:none}, so the dots were hidden in the DOM and painted
   anyway — an AI apparently typing forever under every device that has no
   typing step at all. */
.dev [hidden]{display:none!important}

/* THE DOTS. "Tick tick tick AI is chatting." */
.typing{
  align-self:flex-end;display:flex;gap:4px;align-items:center;
  background:#FF6600;border-radius:14px;border-end-end-radius:4px;padding:12px 13px;
}
.typing i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.45;animation:tick 1.05s infinite}
.typing i:nth-child(2){animation-delay:.16s}
.typing i:nth-child(3){animation-delay:.32s}
@keyframes tick{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

/* A step being played back arrives; one that was never hidden just sits
   there, which is what happens with JavaScript switched off. */
.motion .dev .st[data-hidden]{display:none}
.dev .st[data-in]{animation:pop .34s cubic-bezier(.2,.9,.3,1.3) both}
@keyframes pop{from{opacity:0;transform:translateY(9px) scale(.98)}to{opacity:1;transform:none}}
.dev .st{display:contents}

/* ================= sections arriving =================
   EVERY HIDING RULE IS SCOPED TO .motion, set by one line in the head.
   Unscoped, these made the entire site invisible below the fold for anybody
   without JavaScript — a 200, a header, and nothing else. */
.motion [data-rise]{opacity:0;transform:translateY(18px);transition:opacity .62s ease, transform .62s cubic-bezier(.2,.7,.3,1)}
.motion [data-rise][data-seen]{opacity:1;transform:none}
.motion [data-rise-stagger] > *{opacity:0;transform:translateY(16px);transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.3,1)}
.motion [data-rise-stagger][data-seen] > *{opacity:1;transform:none}
.motion [data-rise-stagger][data-seen] > *:nth-child(2){transition-delay:.07s}
.motion [data-rise-stagger][data-seen] > *:nth-child(3){transition-delay:.14s}
.motion [data-rise-stagger][data-seen] > *:nth-child(4){transition-delay:.21s}
.motion [data-rise-stagger][data-seen] > *:nth-child(5){transition-delay:.28s}
.motion [data-rise-stagger][data-seen] > *:nth-child(6){transition-delay:.35s}
.motion [data-rise-stagger][data-seen] > *:nth-child(n+7){transition-delay:.42s}

/* The arc turns, slowly. It is a device and not a spinner. */
.arc{animation:drift 42s linear infinite}
@keyframes drift{from{transform:rotate(0)}to{transform:rotate(360deg)}}

/* THE RULE THAT IS NOT NEGOTIABLE. */
@media (prefers-reduced-motion: reduce){
  .motion [data-rise],.motion [data-rise-stagger] > *{opacity:1!important;transform:none!important;transition:none!important}
  .arc,.typing i,.dev .st[data-in],.dev .spray i,.dev .bars i,
  .dev .meter .bar i,.dev .think .sp,.dev .ring .pulse,.dev .live .rec{animation:none!important}
  .dev .spray i{opacity:.9}
  .dev .bars i{height:50%}
  .dev .meter .bar i{width:var(--w)}
  .typing{display:none!important}
}