/* ============================================================
   Jabee. A product of M4B1, Dubai.

   Theme: Forest Pro.
   Type:  Plus Jakarta Sans throughout. One typeface, with weight and
          letter-spacing doing the work a second family used to do.
          JetBrains Mono survives in exactly one place, the code sample,
          because losing the alignment is what makes code look wrong to the
          people that section is written for.

   Logo:  a mark plus the name. The mark is one conversation reaching the
          systems behind it: a speech bubble with two connections, the
          second of them gold. It is an inline SVG referencing a single
          symbol, so there is one drawing to change. The name stays live
          text, so it is selectable and cannot break if a font fails.

   Treatment is deliberately quiet: hairline borders, soft ambient
   shadows, 8 to 18px radii, weight 600 headings. Warmth comes from
   spacing and roundness, never from novelty.

   Colour rule: forest is the only accent, gold appears once or twice
   as punctuation. WhatsApp green is avoided on purpose, because using
   it implies a Meta endorsement we do not have.
   ============================================================ */

:root {
  color-scheme: light dark;

  --bg:    #fbfbf9;
  --pnl:   #ffffff;
  --sunk:  #f5f6f3;
  --tx:    #17211b;
  --mu:    #5f6b63;
  --dim:   #68716b;
  --bd:    #e7eae5;
  --bd-s:  #d5dad3;

  --ac:    #1f5f43;
  --ac-d:  #174934;
  --ac-w:  #edf4f0;
  --gold:  #8a6c14;
  --gold-w:#fbf4e2;
  --sage:  #8fbfa4;
  --on-ac: #ffffff;

  --sh-s: 0 1px 2px rgba(23,33,27,.05);
  --sh-m: 0 4px 16px rgba(23,33,27,.07);
  --sh-l: 0 16px 44px rgba(23,33,27,.10);
  --sh-xl:0 28px 70px rgba(23,33,27,.13);

  --r-s: 8px; --r-m: 14px; --r-l: 18px; --r-p: 999px;
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --maxw: 1140px;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-o: cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:   #0f1512; --pnl: #161d19; --sunk: #121815;
    --tx:   #edf2ee; --mu: #97a49b; --dim: #7d8b83;
    --bd:   #212a25; --bd-s: #2c3730;
    --ac:   #4fa87d; --ac-d: #3d8a65; --ac-w: rgba(79,168,125,.11);
    --gold: #d3ab48; --gold-w: rgba(211,171,72,.11);
    --sage: #6f9c85; --on-ac: #08120c;
    --sh-s: 0 1px 2px rgba(0,0,0,.3); --sh-m: 0 4px 16px rgba(0,0,0,.35);
    --sh-l: 0 16px 44px rgba(0,0,0,.45); --sh-xl: 0 28px 70px rgba(0,0,0,.55);
  }
}


/* ---------- atmosphere ----------
   Three fixed layers behind the page: a soft colour field, a fine grid,
   and film grain. None of them animate. Together they are what stops
   large flat areas reading as empty CSS. */
.field {
  position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background:
    radial-gradient(760px 520px at 8% -6%,  color-mix(in srgb, var(--ac) 13%, transparent), transparent 62%),
    radial-gradient(680px 460px at 96% 4%,  color-mix(in srgb, var(--gold) 11%, transparent), transparent 60%),
    radial-gradient(900px 620px at 50% 108%, color-mix(in srgb, var(--sage) 16%, transparent), transparent 62%);
}
.field::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--tx) 5%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--tx) 5%, transparent) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 78%);
  mask-image: radial-gradient(ellipse 90% 55% at 50% 0%, #000 0%, transparent 78%);
}
.grain {
  position: fixed; inset: 0; z-index: -2; pointer-events: none; opacity: .14;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) { .grain { opacity: .26; mix-blend-mode: overlay; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
[id] { scroll-margin-top: 92px; }

body { margin: 0; background: var(--bg); color: var(--tx); font: 16px/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button, summary, a[href] { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; border-radius: var(--r-s); }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ico-xs { width: 14px; height: 14px; }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: var(--s4); top: -100px; z-index: 100; background: var(--ac); color: var(--on-ac); padding: var(--s2) var(--s4); border-radius: var(--r-s); transition: top .15s var(--ease); }
.skip-link:focus { top: var(--s4); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--s5); padding-right: var(--s5); }
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 60; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; background: var(--ac); opacity: .85; transform: scaleX(0); transform-origin: 0 50%; }

/* ---------- the wordmark ----------
   Serif name, hairline rule beneath it, set the way a masthead is set.
   The rule is drawn on a pseudo-element so it hugs the text width at
   any size and inherits the current colour in both themes. */
.brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; }
.mark {
  /* Sized in em so the mark scales with whatever the wordmark is set to,
     rather than needing a second number every time the logo changes size. */
  width: 1.35em; height: 1.35em; flex: none;
  font-size: 22px;
  color: var(--ac);
}
.wordmark {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.045em;
  line-height: 1;
  color: var(--tx);
}
.footer .mark, .footer .wordmark { font-size: 21px; }

/* ---------- type ---------- */
h1, h2 { font-weight: 600; letter-spacing: -.033em; line-height: 1.09; margin: 0; text-wrap: balance; }
h1 {
  font-size: clamp(38px, 4.1vw, 52px);
  letter-spacing: -.04em;
  line-height: 1.04;
  /* Bounded in characters, not pixels, so the measure holds when the type
     scales. text-wrap: balance then evens the lines out on its own, which
     is what the hardcoded <br> used to do badly. */
  max-inline-size: 21ch;
  /* balance, not pretty, is what h2 wants: it evens the line lengths out.
     Here it was doing that at the cost of the sentence, breaking after
     "ask." and starting the next sentence mid-line. A headline made of two
     sentences should break between them, so this one wraps naturally and
     only guards against an orphan. */
  text-wrap: pretty;
}
h2 { font-size: clamp(28px, 3.4vw, 38px); }
h3 { font-size: 17px; font-weight: 600; letter-spacing: -.015em; line-height: 1.4; margin: 0; }
p { margin: 0; }
h1 u { text-decoration: none; color: var(--ac); }

.tag { display: inline-block; background: var(--ac-w); color: var(--ac); font-weight: 600; font-size: 13px; padding: 6px 14px; border-radius: var(--r-s); margin-bottom: var(--s5); }
.tag-sm { font-size: 12px; padding: 5px 12px; margin-bottom: var(--s4); }
.lede { color: var(--mu); font-size: 18px; max-width: 46ch; margin: 0 0 var(--s6); }
.lede-sm { color: var(--mu); font-size: 17px; margin-top: var(--s3); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  background: var(--ac); color: var(--on-ac);
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: 11px 20px; border: 1px solid transparent; border-radius: var(--r-s);
  box-shadow: var(--sh-s);
  transition: background .18s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover { background: var(--ac-d); box-shadow: var(--sh-m); }
.btn:active { box-shadow: none; }
.btn .ico { transition: transform .18s var(--ease); }
.btn:hover .ico { transform: translateX(3px); }
.btn-sm { padding: 8px 15px; font-size: 14px; }
.btn-lg { padding: 13px 24px; font-size: 16px; }
.btn-block { width: 100%; margin-top: var(--s6); }
.btn-g { background: var(--pnl); color: var(--tx); border-color: var(--bd-s); box-shadow: none; }
.btn-g:hover { background: var(--ac-w); border-color: var(--ac); color: var(--ac); box-shadow: none; }

/* ---------- nav ---------- */
.nav-wrap { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--bd); padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: var(--s4); }
.nav-links { display: flex; align-items: center; gap: var(--s6); }
.nav-links a:not(.btn) { font-size: 14.5px; font-weight: 500; color: var(--mu); padding: 10px 4px; transition: color .18s var(--ease); }
.nav-links a:hover { color: var(--tx); }
.nav-links .btn { color: var(--on-ac); }
.nav-toggle { display: none; }

/* ---------- hero ---------- */
/* The app panel carries three columns and is the thing worth looking at,
   so it takes the larger share. The copy only needs a readable measure. */
.hero {
  overflow: clip;
  padding: var(--s9) var(--s5) var(--s8);
  display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: var(--s7); align-items: center;
}
.hero > div:first-child { max-width: 34rem; }
.cta { display: flex; gap: var(--s3); flex-wrap: wrap; }
.pills { list-style: none; padding: 0; margin: var(--s7) 0 0; display: flex; flex-wrap: wrap; gap: var(--s5); font-size: 13.5px; font-weight: 500; color: var(--mu); }
.pills li { display: inline-flex; align-items: center; gap: var(--s2); }
.pills .ico { color: var(--ac); }

/* ---------- the product interface ----------
   A three pane app: queue, conversation, reasoning trace. The trace pane
   is the part that makes it read as an agent rather than a canned bot,
   so it gets real estate rather than being hidden. */
.stage { position: relative; }
.stage-glow {
  position: absolute; inset: -14% -10% -18%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 45%, color-mix(in srgb, var(--ac) 18%, transparent), transparent 70%);
  filter: blur(48px);
}

.app {
  position: relative; z-index: 1;
  background: var(--pnl);
  border: 1px solid var(--bd);
  border-radius: var(--r-l);
  overflow: hidden;
  box-shadow: var(--sh-xl), 0 0 0 1px color-mix(in srgb, var(--ac) 7%, transparent);
}
.app-bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 15px; border-bottom: 1px solid var(--bd);
  background: linear-gradient(to bottom, var(--sunk), var(--pnl));
}
.tl { width: 9px; height: 9px; border-radius: 50%; background: var(--bd-s); }
.app-title { margin-left: var(--s3); font-weight: 600; font-size: 14px; letter-spacing: -.02em; color: var(--mu); }
.app-live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ac); background: var(--ac-w); border-radius: var(--r-p); padding: 3px 9px; }
.app-live i { width: 5px; height: 5px; border-radius: 50%; background: var(--ac); animation: blip 2.4s ease-in-out infinite; }
@keyframes blip { 0%,100% { opacity: 1 } 50% { opacity: .3 } }

.app-body { display: grid; grid-template-columns: 128px minmax(0, 1fr) 164px; min-height: 320px; }
.pane { padding: var(--s4) var(--s3); }
.pane + .pane { border-left: 1px solid var(--bd); }
.pane-list { background: var(--sunk); }
.pane-trace { background: var(--sunk); }
.pane-h { display: flex; align-items: center; gap: var(--s2); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--dim); margin-bottom: var(--s4); }
.pane-thread .pane-h { text-transform: none; letter-spacing: 0; font-size: 13px; padding-bottom: var(--s3); border-bottom: 1px solid var(--bd); }
.pane-thread .pane-h { gap: var(--s2); }
.pane-thread .pane-h > div { min-width: 0; }
.pane-thread .pane-h b {
  display: block; font-size: 13px; color: var(--tx); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pane-thread .pane-h i { font-style: normal; font-size: 10.5px; color: var(--dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.count { margin-left: auto; background: var(--ac); color: var(--on-ac); border-radius: var(--r-p); padding: 1px 7px; font-size: 10px; }
.badge { margin-left: auto; font-size: 10px; font-weight: 600; color: var(--ac); background: var(--ac-w); border: 1px solid color-mix(in srgb, var(--ac) 20%, transparent); border-radius: var(--r-p); padding: 2px 8px; }

.conv { display: flex; gap: var(--s2); align-items: center; padding: 7px 8px; border-radius: var(--r-s); margin: 0 -8px; }
.conv.on { background: var(--pnl); box-shadow: var(--sh-s); }
.conv b { display: block; font-size: 11.5px; font-weight: 600; }
.conv i { font-style: normal; font-size: 10.5px; color: var(--dim); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 84px; }
.cav { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--ac) 16%, transparent); color: var(--ac); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }
.cav.lg { width: 30px; height: 30px; font-size: 12px; background: var(--ac); color: var(--on-ac); }

.thread { display: grid; gap: var(--s2); padding-top: var(--s3); }
.msg { font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; max-width: 100%; }
.msg-in { background: var(--sunk); border: 1px solid var(--bd); justify-self: start; border-end-start-radius: 4px; }
.msg-out { background: var(--ac); color: var(--on-ac); justify-self: end; border-end-end-radius: 4px; }
.msg time { display: block; font-size: 10px; opacity: .8; margin-top: 5px; font-variant-numeric: tabular-nums; }
.msg .src { display: flex; align-items: center; gap: 6px; font-size: 10.5px; opacity: .92; margin-top: 7px; padding-top: 7px; border-top: 1px solid color-mix(in srgb, currentColor 24%, transparent); }
/* The caret only shows while text is streaming in. */
#a-text.streaming::after { content: ""; display: inline-block; width: 2px; height: 1em; background: currentColor; margin-left: 2px; vertical-align: -2px; animation: caret 1s steps(2) infinite; }
@keyframes caret { 50% { opacity: 0 } }

.typing { display: none; gap: 5px; justify-self: start; padding: 10px 13px; background: var(--sunk); border: 1px solid var(--bd); border-radius: 12px; border-bottom-left-radius: 4px; }
.typing.on { display: flex; }
.typing span { width: 5px; height: 5px; border-radius: 50%; background: var(--dim); animation: bob 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .15s; }
.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bob { 0%,60%,100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.trace { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s3); }
.tr { position: relative; padding-left: var(--s5); font-size: 10.5px; }
.tr::before { content: ""; position: absolute; left: 4px; top: 14px; bottom: -14px; width: 1px; background: var(--bd); }
.tr:last-child::before { display: none; }
.tdot { position: absolute; left: 0; top: 4px; width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--bd-s); background: var(--pnl); transition: border-color .3s var(--ease), background .3s var(--ease); }
.tr.done .tdot { border-color: var(--ac); background: var(--ac); }
.tr b { display: block; font-size: 10.5px; font-weight: 600; color: var(--tx); line-height: 1.35; }
.tr i { font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums; line-height: 1.45; display: block; margin-top: 2px; }

.conf { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--bd); }
.conf-h { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); margin-bottom: 7px; }
.conf-h b { color: var(--ac); font-variant-numeric: tabular-nums; }
.conf-bar { height: 5px; border-radius: 3px; background: var(--bd); overflow: hidden; }
.conf-bar span { display: block; height: 100%; width: 94%; border-radius: 3px; background: linear-gradient(90deg, var(--sage), var(--ac)); transition: width .6s var(--ease-o); }
.conf-note { font-size: 10.5px; color: var(--dim); margin-top: 7px; line-height: 1.5; }

.demo-toggle {
  position: absolute; left: 14px; bottom: 14px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--sans); font-size: 11.5px; font-weight: 500;
  color: var(--mu); background: var(--pnl);
  border: 1px solid var(--bd); border-radius: var(--r-p); padding: 0 16px; min-height: 44px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
/* Always visible. Hiding it until hover meant touch users could tap a
   control they could not see, and could not tell paused from playing. */
.demo-toggle[hidden] { display: none; }
.demo-toggle:hover { color: var(--ac); border-color: var(--ac); }

/* ---------- trust ---------- */
.trust { padding-top: var(--s8); }
.trust ul { list-style: none; margin: 0; padding: var(--s5) 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s5); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.trust li { display: inline-flex; align-items: center; gap: var(--s2); font-size: 14px; font-weight: 500; color: var(--mu); }
.trust .ico { color: var(--ac); }

/* ---------- sections ---------- */
.section { padding-top: var(--s10); }
.head { max-width: 48ch; margin-bottom: var(--s7); }
.head.center { margin-left: auto; margin-right: auto; text-align: center; }
.head p { color: var(--mu); font-size: 17px; margin-top: var(--s4); }

.probs { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s4); }
.prob { background: var(--pnl); border: 1px solid var(--bd); border-radius: var(--r-m); padding: var(--s5); display: grid; gap: var(--s3); align-content: start; box-shadow: var(--sh-s); transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease); }
.prob:hover { box-shadow: var(--sh-l); transform: translateY(-3px); border-color: var(--bd-s); }
.ptime { font-size: 11.5px; font-weight: 500; color: var(--dim); font-variant-numeric: tabular-nums; }
.prob p { font-weight: 500; font-size: 21px; letter-spacing: -.02em; line-height: 1.35; }
.pout { font-size: 13px; font-weight: 500; color: var(--ac); padding-top: var(--s3); border-top: 1px solid var(--bd); }

/* ---------- bento ---------- */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.cell { background: var(--pnl); border: 1px solid var(--bd); border-radius: var(--r-m); padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); box-shadow: var(--sh-s); transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease); }
.cell { position: relative; }
.cell::before {
  content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px;
  background: linear-gradient(150deg, color-mix(in srgb, var(--ac) 45%, transparent), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .25s var(--ease); pointer-events: none;
}
.cell:hover::before { opacity: 1; }
.cell:hover { box-shadow: var(--sh-l); transform: translateY(-3px); }
.cell.wide { grid-column: span 2; }
.cell.full { grid-column: 1 / -1; }
.cell p { color: var(--mu); font-size: 15px; }
.cell.full { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--s5) var(--s6); align-items: start; }
.cell.full .ibox { grid-row: 1; }
.cell.full h3, .cell.full p { grid-column: 1; }
.cell.full .code { grid-column: 2; grid-row: 1 / span 3; margin: 0; }
@media (max-width: 767.98px) {
  .cell.full { display: flex; }
  .cell.full .code { margin-top: auto; }
}
.cico { width: 36px; height: 36px; border-radius: var(--r-s); display: grid; place-items: center; background: var(--ac-w); color: var(--ac); border: 1px solid color-mix(in srgb, var(--ac) 18%, transparent); margin-bottom: var(--s2); }
.cvis { display: flex; flex-wrap: wrap; gap: var(--s2); margin-top: auto; padding-top: var(--s4); }
.chip { font-size: 12px; font-weight: 500; letter-spacing: -.01em; padding: 4px 10px; border-radius: var(--r-p); background: var(--sunk); border: 1px solid var(--bd); color: var(--mu); }
.chip-ac { background: var(--gold-w); border-color: color-mix(in srgb, var(--gold) 30%, transparent); color: var(--gold); }

.ticks { list-style: none; padding: 0; margin: auto 0 0; display: grid; gap: var(--s2); }
.ticks li { position: relative; padding-left: var(--s5); font-size: 14.5px; color: var(--mu); }
.ticks li::before { content: ""; position: absolute; left: 0; top: .58em; width: 6px; height: 6px; border-radius: 50%; background: var(--ac); opacity: .55; }
.ticks.big { margin-top: var(--s6); gap: var(--s3); }
.ticks.big li { font-size: 15.5px; }

/* ---------- code ---------- */
.code { min-width: 0; max-width: 100%; font-family: var(--mono); font-size: 12.5px; line-height: 1.8; background: var(--sunk); border: 1px solid var(--bd); border-radius: var(--r-s); padding: var(--s4); margin: auto 0 0; overflow-x: auto; color: var(--mu); white-space: pre; }
.code:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.code .k { color: var(--ac); }
.code .s { color: var(--tx); }
.code .c { color: var(--dim); }
.codewin { background: var(--pnl); border: 1px solid var(--bd); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-l); }
.cbar { display: flex; align-items: center; gap: 6px; padding: 11px 15px; border-bottom: 1px solid var(--bd); background: var(--sunk); }
.cbar span { width: 9px; height: 9px; border-radius: 50%; background: var(--bd-s); }
.cbar em { margin-left: var(--s3); font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--dim); }
.cblock { border: 0; border-radius: 0; background: transparent; font-size: 12.5px; margin: 0; }

/* ---------- steps ---------- */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3,1fr); gap: var(--s4); }
.step { background: var(--pnl); border: 1px solid var(--bd); border-radius: var(--r-m); padding: var(--s5); box-shadow: var(--sh-s); transition: box-shadow .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease); }
.step:hover { box-shadow: var(--sh-l); transform: translateY(-3px); border-color: var(--bd-s); }
.sn { display: inline-block; font-weight: 700; font-size: 12px; letter-spacing: -.01em; color: var(--ac); background: var(--ac-w); border-radius: var(--r-s); padding: 3px 9px; margin-bottom: var(--s4); }
.step h3 { margin-bottom: var(--s2); }
.step p { color: var(--mu); font-size: 15px; }

/* ---------- comparison ---------- */
.cmp { background: var(--pnl); border: 1px solid var(--bd); border-radius: var(--r-m); overflow: hidden; box-shadow: var(--sh-m); }
.crow { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: var(--s4); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--bd); font-size: 14.5px; align-items: center; }
.crow:last-child { border-bottom: 0; }
.chead { background: var(--sunk); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--dim); }
.crow > span { display: flex; align-items: center; gap: var(--s2); color: var(--mu); }
.crow > span:first-child { color: var(--tx); font-weight: 500; }
.crow .us { color: var(--tx); font-weight: 500; }
.crow .us .ico { color: var(--ac); }
.chead .us { color: var(--ac); }

/* ---------- dev band ---------- */
.band { margin-top: var(--s10); padding: var(--s9) 0; background: var(--sunk); border-top: 1px solid var(--bd); border-bottom: 1px solid var(--bd); }
.dev { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--s8); align-items: center; }
.dev > * { min-width: 0; }

/* ---------- pricing ---------- */
.price { max-width: 460px; margin: 0 auto; background: var(--pnl); border: 1px solid var(--bd); border-radius: var(--r-l); padding: var(--s7) var(--s6); box-shadow: var(--sh-l); }
.ptop { text-align: center; padding-bottom: var(--s6); border-bottom: 1px solid var(--bd); }
.pname { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; color: var(--dim); }
.pamt { font-weight: 700; font-size: 58px; letter-spacing: -.05em; line-height: 1; margin-top: var(--s4); font-variant-numeric: tabular-nums; }
.pamt .cur { font-size: 30px; vertical-align: super; color: var(--mu); }
.pamt .per { font-family: var(--sans); font-size: 15px; font-weight: 500; color: var(--mu); margin-left: var(--s2); letter-spacing: -.01em; }
.pnote { font-size: 13px; color: var(--mu); margin-top: var(--s4); }
.plist { margin-top: var(--s6); }

/* ---------- faq ---------- */
.faq { max-width: 720px; margin: 0 auto; display: grid; gap: var(--s3); }
.faq details { background: var(--pnl); border: 1px solid var(--bd); border-radius: var(--r-m); box-shadow: var(--sh-s); transition: border-color .2s var(--ease); }
.faq details[open] { border-color: var(--bd-s); }
.faq summary { list-style: none; padding: var(--s5); font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: space-between; gap: var(--s4); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ac); }
.chev { width: 10px; height: 10px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform .22s var(--ease); flex: none; margin-top: -4px; }
.faq details[open] .chev { transform: rotate(-135deg); margin-top: 3px; }
.faq p { padding: 0 var(--s5) var(--s5); color: var(--mu); font-size: 15px; }

/* ---------- cta ----------
   Previously a full-bleed accent slab, which inverted the page: every other
   section is a dark panel using green sparingly, so a saturated block read
   as a different site. It is now the same panel treatment as the pricing
   card, with the accent kept to the button and a soft glow behind. */
.cta-sec { padding-bottom: var(--s10); }

.cta-box {
  position: relative;
  max-width: 680px; margin: 0 auto;
  background: var(--pnl);
  border: 1px solid var(--bd);
  border-radius: var(--r-l);
  padding: var(--s8) var(--s7);
  text-align: center;
  box-shadow: var(--sh-l);
  overflow: hidden;
}
/* A single wash behind the heading, so the panel is not flat. */
.cta-box::before {
  content: ""; position: absolute; inset: -60% 10% auto; height: 320px;
  background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 70%);
  pointer-events: none;
}
.cta-box > * { position: relative; }

.cta-box h2 {
  font-weight: 600;
  letter-spacing: -.033em;
  font-size: clamp(28px, 3.4vw, 38px);
  color: var(--tx);
}
.cta-box p {
  margin: var(--s4) auto 0; max-width: 42ch;
  color: var(--mu); font-size: 16px;
}

.waitlist {
  display: flex; gap: var(--s2); justify-content: center;
  margin: var(--s6) auto 0; max-width: 420px; flex-wrap: wrap;
}
.waitlist input {
  flex: 1 1 220px; min-width: 0;
  font-family: var(--sans); font-size: 16px; padding: 12px var(--s4);
  border: 1px solid var(--bd-s); border-radius: var(--r-s);
  background: var(--bg); color: var(--tx);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.waitlist input::placeholder { color: var(--dim); }
.waitlist input:focus {
  outline: none; border-color: var(--ac);
  box-shadow: 0 0 0 3px var(--ac-w);
}
.waitlist input[aria-invalid="true"] { border-color: var(--gold); }
.waitlist .btn { background: var(--ac); color: var(--on-ac); }
.waitlist .btn:hover { background: var(--ac-d); }

/* Hidden from people and from assistive tech, reachable only by something
   filling in every field it can find. Not display:none, which some bots
   skip. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fnote { font-size: 13.5px; margin-top: var(--s4); min-height: 1.4em; color: var(--mu); }
/* State must not rest on wording alone. */
.fnote.ok { color: var(--ac); }
.fnote.ok::before { content: "\2713\00a0"; font-weight: 700; }
.fnote.err { color: var(--gold); font-weight: 600; }
.fnote.err::before { content: "\26a0\00a0"; font-weight: 700; }

/* ---------- footer ---------- */
.footer { border-top: 1px solid var(--bd); background: var(--sunk); padding: var(--s9) 0 max(var(--s6), env(safe-area-inset-bottom)); }
.finner { display: flex; justify-content: space-between; gap: var(--s7); flex-wrap: wrap; }
.ftag { color: var(--mu); font-size: 14px; margin-top: var(--s4); }
.flinks { display: flex; gap: var(--s5); flex-wrap: wrap; align-items: flex-start; }
.flinks a { font-size: 14px; color: var(--mu); padding: 10px 8px; margin: -10px -8px; }
.flinks a:hover { color: var(--ac); }
.fbottom { margin-top: var(--s7); padding-top: var(--s5); border-top: 1px solid var(--bd); display: grid; gap: var(--s2); font-size: 13px; color: var(--mu); }
.fbottom a { font-weight: 500; color: var(--ac); }
.disc { color: var(--dim); font-size: 12.5px; }

/* ---------- reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-o), transform .5s var(--ease-o); }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .typing span, .app-live i { animation: none; }
  #a-text.streaming::after { display: none; }
  .cell:hover, .step:hover, .prob:hover { transform: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) { .app-body { grid-template-columns: minmax(0, 1fr) 158px; } .pane-list { display: none; } }
@media (max-width: 960px) {
  .stage { max-width: 640px; margin: 0 auto; width: 100%; }
  .hero { grid-template-columns: 1fr; gap: var(--s8); padding-top: var(--s7); }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cell.wide { grid-column: span 2; }
.cell.full { grid-column: 1 / -1; }
  .probs, .steps { grid-template-columns: 1fr; }
  .dev { grid-template-columns: 1fr; gap: var(--s7); }
  .trust ul { justify-content: flex-start; gap: var(--s4) var(--s6); }
}
@media (max-width: 767.98px) {
  .nav { flex-wrap: wrap; height: auto; padding-top: var(--s3); padding-bottom: var(--s3); }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--pnl); border: 1px solid var(--bd-s); border-radius: var(--r-s); color: var(--tx); }
  .bars, .bars::before, .bars::after { content: ""; display: block; width: 17px; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform .22s var(--ease); }
  .bars { position: relative; }
  .bars::before { position: absolute; top: -5px; }
  .bars::after { position: absolute; top: 5px; }
  .nav-toggle[aria-expanded="true"] .bars { background: transparent; }
  .nav-toggle[aria-expanded="true"] .bars::before { transform: translateY(5px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .bars::after { transform: translateY(-5px) rotate(-45deg); }
  .nav-links { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--s2); padding: var(--s4) 0; border-top: 1px solid var(--bd); margin-top: var(--s3); }
  /* Stacked menu items need a real hit area, not just a text line box. */
  .nav-links a:not(.btn) { padding: 11px 0; }
  .nav-links.open { display: flex; }

  .section { padding-top: var(--s9); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .cell.wide, .cell.full { grid-column: span 1; }
  .app-body { grid-template-columns: 1fr; min-height: 0; }
  .pane + .pane { border-left: 0; border-top: 1px solid var(--bd); }
  .pane-trace { display: none; }
  .crow { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s4); }
  .chead { display: none; }
  .cta-box { padding: var(--s7) var(--s5); }
  .price { padding: var(--s6) var(--s5); }
  .pamt { font-size: 54px; }
  .wordmark { font-size: 24px; }
}