/* ==========================================================================
   Doux — design system.
   Built in the APEX idiom: same structure, rhythm and density, our own
   palette, components and words. Green is primary. Amber is reserved
   strictly for "needs you". Rose appears only in the problem section.
   ========================================================================== */

:root {
  color-scheme: light;

  --sans: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
          "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Segoe UI Mono",
          Menlo, Consolas, monospace;

  --maxw: 1180px;
  --gut: 24px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-2xl: 28px;

  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
}

/* ---------------------------------------------------------- LIGHT: the ground */
:root, :root[data-theme="light"] {
  --bg:        #ffffff;
  --bg-tint:   #f7f8fa;
  --surface:   #ffffff;
  --surface-2: #f6f7f9;
  --line:      #e7e9ee;
  --line-2:    #d6dae2;

  --ink:    #0b1020;
  --ink-2:  #525a6e;
  --ink-3:  #838b9c;

  --brand:        #0b9e6a;
  --brand-ink:    #07724d;
  --brand-bright: #10c98a;
  --brand-soft:   #e8f8f1;
  --brand-line:   #b6e5d1;
  --on-brand:     #ffffff;

  --amber:      #a8620a;
  --amber-soft: #fdf3e3;
  --amber-line: #eed3a8;

  --rose:      #c0392f;
  --rose-soft: #fdf0ef;
  --rose-line: #f2cdc9;

  --grid-line: rgba(15, 23, 42, .04);
  --orb-1: rgba(16, 185, 129, .50);
  --orb-2: rgba(45, 212, 191, .32);
  --orb-3: rgba(132, 204, 22, .22);

  --shadow-1: 0 1px 2px rgba(11,16,32,.05), 0 1px 1px rgba(11,16,32,.04);
  --shadow-2: 0 2px 4px rgba(11,16,32,.05), 0 14px 30px -14px rgba(11,16,32,.16);
  --shadow-3: 0 6px 14px rgba(11,16,32,.07), 0 34px 64px -26px rgba(11,16,32,.26);
  --glow: rgba(11,158,106,.16);
}

/* ------------------------------------------------------- DARK: toggle only */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg:        #07090c;
  --bg-tint:   #0c0f13;
  --surface:   #111419;
  --surface-2: #161a20;
  --line:      #222831;
  --line-2:    #2f3742;

  --ink:    #f2f4f6;
  --ink-2:  #a3acba;
  --ink-3:  #78828f;

  --brand:        #3fd6ab;
  --brand-ink:    #6fe6c3;
  --brand-bright: #5cf0c0;
  --brand-soft:   #0d2620;
  --brand-line:   #1d4b3e;
  --on-brand:     #04211b;

  --amber:      #f0b25c;
  --amber-soft: #2a2013;
  --amber-line: #4d3a1c;

  --rose:      #f2848d;
  --rose-soft: #2a1416;
  --rose-line: #4a2126;

  --grid-line: rgba(255,255,255,.045);
  --orb-1: rgba(16,185,129,.30);
  --orb-2: rgba(45,212,191,.20);
  --orb-3: rgba(132,204,22,.14);

  --shadow-1: 0 1px 2px rgba(0,0,0,.45);
  --shadow-2: 0 2px 6px rgba(0,0,0,.5), 0 16px 34px -16px rgba(0,0,0,.75);
  --shadow-3: 0 6px 14px rgba(0,0,0,.5), 0 34px 66px -26px rgba(0,0,0,.9);
  --glow: rgba(63,214,171,.18);
}

/* ==================================================================== base */

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 800px; }

h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
h1 { font-size: clamp(38px, 6.4vw, 66px); }
h2 { font-size: clamp(30px, 4.5vw, 46px); letter-spacing: -.032em; }
h3 { font-size: 19px; letter-spacing: -.02em; line-height: 1.28; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }

.lede { color: var(--ink-2); font-size: clamp(16.5px, 1.7vw, 19px); line-height: 1.55; max-width: 62ch; }
.lede b, .lede strong { color: var(--ink); font-weight: 650; }
.tiny { font-size: 13px; color: var(--ink-3); }

.accent {
  background-image: linear-gradient(108deg, var(--brand-bright), var(--brand) 55%, #0e9488);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.accent-warn {
  background-image: linear-gradient(108deg, #e05548, var(--rose) 60%, #9d2b22);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.underdraw { position: relative; display: inline-block; }
.underdraw::after {
  content: ""; position: absolute; left: 0; bottom: .04em; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--brand-bright), var(--brand));
  border-radius: 3px; transform-origin: left center;
  animation: underdraw .9s var(--ease) .35s both;
}
@keyframes underdraw { from { transform: scaleX(0); } to { transform: scaleX(1); } }

.eyebrow {
  font-size: 11.5px; font-weight: 500;
  letter-spacing: .17em; text-transform: uppercase; color: var(--brand-ink);
  display: inline-flex; align-items: center; gap: 9px;
}
.eyebrow.warn { color: var(--rose); }
.eyebrow .rule { width: 34px; height: 1px; background: currentColor; opacity: .45; }

:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px;
}
.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 { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--surface); border: 1px solid var(--line); padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-2); transition: top .18s var(--ease); }
.skip:focus { top: 12px; }

/* ======================================================= background layers */

.bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; }
.bg-mesh {
  position: absolute; inset: -160px 0 auto 0; height: 980px; filter: saturate(1.1);
  background:
    radial-gradient(50% 40% at 78% 8%,  var(--orb-1), transparent 70%),
    radial-gradient(45% 38% at 12% 4%,  var(--orb-2), transparent 72%),
    radial-gradient(55% 45% at 88% 40%, var(--orb-3), transparent 70%);
}
.orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; }
.orb.o1 { width: 520px; height: 520px; top: -120px; right: -80px; background: radial-gradient(circle, var(--orb-1), transparent 65%); animation: floatA 17s var(--ease-io) infinite; }
.orb.o2 { width: 440px; height: 440px; top: 120px; left: -140px; background: radial-gradient(circle, var(--orb-2), transparent 65%); animation: floatB 21s var(--ease-io) infinite; }
.orb.o3 { width: 480px; height: 480px; top: 420px; right: 22%; background: radial-gradient(circle, var(--orb-3), transparent 65%); animation: floatA 25s var(--ease-io) infinite reverse; }
@keyframes floatA { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(-34px,30px,0)} }
@keyframes floatB { 0%,100%{transform:translate3d(0,0,0)} 50%{transform:translate3d(38px,-26px,0)} }
.bg-grid {
  position: absolute; inset: 0 0 auto 0; height: 780px;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 46px 46px, 46px 46px;
}
.bg-fade { position: absolute; left: 0; right: 0; top: 470px; height: 520px; background: linear-gradient(transparent, var(--bg) 78%); }

/* ================================================================== topbar */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .3s var(--ease);
}
.topbar.is-stuck { border-bottom-color: var(--line); }
.topbar .wrap { display: flex; align-items: center; gap: 14px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -.04em; font-size: 20px; }
.mark {
  width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--brand-bright), var(--brand));
  color: #fff; font-size: 16px; font-weight: 800; box-shadow: 0 4px 14px var(--glow);
}
:root[data-theme="dark"] .mark { color: var(--on-brand); }
.topbar nav { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.navlink { font-size: 14.5px; color: var(--ink-2); padding: 8px 12px; border-radius: var(--r-sm); transition: color .18s, background .18s; }
.navlink:hover { color: var(--ink); background: var(--surface-2); }
.navlink.is-current { color: var(--ink); font-weight: 620; }
@media (max-width: 980px) { .navlink { display: none; } }
.iconbtn {
  width: 36px; height: 36px; display: grid; place-items: center; flex: none; margin-left: 4px;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
  border-radius: 10px; cursor: pointer; transition: color .18s, border-color .18s, transform .18s var(--ease);
}
.iconbtn:hover { color: var(--ink); border-color: var(--line-2); }
.iconbtn:active { transform: scale(.94); }
.iconbtn svg { width: 16px; height: 16px; }
.icon-sun { display: none; } .icon-moon { display: block; }
:root[data-theme="dark"] .icon-sun { display: block; }
:root[data-theme="dark"] .icon-moon { display: none; }

/* ================================================================= buttons */

.btn {
  --b-bg: var(--ink); --b-fg: var(--bg);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: -.01em;
  padding: 13px 22px; border-radius: var(--r-md); border: 1px solid transparent;
  background: var(--b-bg); color: var(--b-fg); cursor: pointer;
  transition: transform .18s var(--ease), filter .18s, box-shadow .18s, background .18s, border-color .18s;
  box-shadow: var(--shadow-1);
}
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; filter: none; }
.btn.primary { --b-fg: var(--on-brand); background: linear-gradient(140deg, var(--brand-bright), var(--brand)); box-shadow: 0 6px 18px var(--glow); }
.btn.ghost { --b-bg: var(--surface); --b-fg: var(--ink); border-color: var(--line-2); }
.btn.ghost:hover { background: var(--surface-2); filter: none; }
.btn.onDark { --b-bg: rgba(255,255,255,.10); --b-fg: #fff; border-color: rgba(255,255,255,.24); }
.btn.onDark:hover { --b-bg: rgba(255,255,255,.18); }
.btn.sm { font-size: 14px; padding: 9px 16px; }
.arrow { transition: transform .22s var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.link-more { color: var(--brand-ink); font-weight: 620; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; }
.link-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ==================================================================== hero */

.hero { position: relative; padding: 56px 0 34px; }
/* start, not center: the console is a live surface whose height changes as
   specialists claim work. Centring the copy against it drags the headline down
   the page as the desk fills, which is what a visitor sees first. */
.hero-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.02fr); gap: 46px; align-items: start; }
@media (max-width: 1040px) { .hero-grid { grid-template-columns: 1fr; gap: 34px; } }
.status-pill {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); background: var(--surface); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 100px; box-shadow: var(--shadow-1);
}
.dot { width: 7px; height: 7px; border-radius: 100px; background: var(--brand); flex: none; animation: beat 2.4s var(--ease-io) infinite; }
.dot.rose { background: var(--rose); }
@keyframes beat { 0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--brand) 55%,transparent)} 70%{box-shadow:0 0 0 8px transparent} 100%{box-shadow:0 0 0 0 transparent} }
.hero h1 { margin: 20px 0 20px; }
.hero .lede { max-width: 52ch; }
.cta-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.proof { display: flex; align-items: center; gap: 11px; margin-top: 24px; font-size: 14.5px; color: var(--ink-2); }
.proof b { color: var(--ink); font-weight: 650; }
.proof-mark { width: 30px; height: 30px; border-radius: 9px; flex: none; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-ink); }
.proof-mark svg { width: 15px; height: 15px; }
.trustbar {
  display: flex; align-items: center; gap: 12px; margin-top: 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 13px 15px; box-shadow: var(--shadow-1);
  font-size: 12px; line-height: 1.55; color: var(--ink-2);
  transition: border-color .2s, box-shadow .2s, transform .2s var(--ease);
}
.trustbar:hover { border-color: var(--brand-line); box-shadow: var(--shadow-2); transform: translateY(-1px); }
.trustbar .lock { color: var(--brand); flex: none; display: grid; place-items: center; }
.trustbar .lock svg { width: 15px; height: 15px; }
.trustbar b { color: var(--ink); font-weight: 620; }
.trustbar .go { margin-left: auto; color: var(--ink-3); flex: none; }
@media (max-width: 460px) { .trustbar { font-size: 11px; } }

/* ================================================================= console */

/* The desk is unbounded by nature — specialists keep claiming work — so the
   shell caps it and scrolls inside itself. Without the cap the hero grows
   without limit and pushes everything below it off the first screen. */
.console-shell { position: relative; max-height: 78vh; display: flex; flex-direction: column; }
.console-shell > .console { min-height: 0; max-height: 100%; display: flex; flex-direction: column; }
/* Only the lanes scroll. The counters at the top and the sample-data notice at
   the bottom stay pinned — the notice is a disclosure and must never scroll
   out of sight. */
.console-shell .console-body { overflow-y: auto; min-height: 0; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 34px), transparent 100%); }
@media (max-width: 1040px) { .console-shell { max-height: none; }
  .console-shell .console-body { overflow-y: visible; -webkit-mask-image: none; mask-image: none; } }
.console { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); box-shadow: var(--shadow-3); overflow: hidden; }
.console-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.console-title { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 620; letter-spacing: -.012em; }
.console-sub { font-size: 12px; color: var(--ink-3); }
.console-bar .spacer { margin-left: auto; }
.counters { display: flex; gap: 6px; flex-wrap: wrap; }
.counter { display: flex; align-items: baseline; gap: 6px; background: var(--surface); border: 1px solid var(--line); padding: 4px 10px; border-radius: 100px; }
.counter b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.counter span { font-size: 11px; color: var(--ink-3); white-space: nowrap; }
.counter.done b { color: var(--brand-ink); }
.counter.you b { color: var(--amber); }
.counter.tick { animation: pop .5s var(--ease); }
@keyframes pop { 0%{transform:scale(1)} 32%{transform:scale(1.12)} 100%{transform:scale(1)} }
.console-body { display: grid; grid-template-columns: 1fr; }
.lane { padding: 14px; min-width: 0; }
.lane + .lane { border-top: 1px solid var(--line); background: var(--surface-2); }
.lane-head { display: flex; align-items: center; gap: 8px; padding: 0 2px 11px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.lane-head .count { margin-left: auto; letter-spacing: 0; font-size: 10.5px; text-transform: none; }
.desk { display: flex; flex-direction: column; gap: 8px; }
.job { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 11px 12px; box-shadow: var(--shadow-1); animation: rise .46s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: translateY(-8px) scale(.99); } to { opacity: 1; transform: none; } }
.job.is-leaving { animation: sink .42s var(--ease-io) both; }
@keyframes sink { to { opacity: 0; transform: translateY(6px) scale(.985); max-height: 0; padding-top: 0; padding-bottom: 0; margin-bottom: -8px; } }
.job.done { border-color: var(--brand-line); background: color-mix(in srgb, var(--brand-soft) 45%, var(--surface)); }
.job.needs { border-color: var(--amber-line); background: color-mix(in srgb, var(--amber-soft) 55%, var(--surface)); }
.job-top { display: flex; align-items: center; gap: 8px; }
.avatar { width: 25px; height: 25px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 9.5px; font-weight: 700; background: var(--surface-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.avatar[data-desk="cert"]   { background: color-mix(in srgb,var(--brand) 15%,var(--surface)); color: var(--brand-ink); border-color: var(--brand-line); }
.avatar[data-desk="renew"]  { background: color-mix(in srgb,#6b8cff 15%,var(--surface)); color:#4463c9; border-color: color-mix(in srgb,#6b8cff 32%,var(--surface)); }
.avatar[data-desk="market"] { background: color-mix(in srgb,#b06fe0 14%,var(--surface)); color:#8347b5; border-color: color-mix(in srgb,#b06fe0 30%,var(--surface)); }
.avatar[data-desk="comply"] { background: color-mix(in srgb,var(--amber) 16%,var(--surface)); color: var(--amber); border-color: var(--amber-line); }
.avatar[data-desk="claim"]  { background: color-mix(in srgb,#4fa3b5 15%,var(--surface)); color:#2f7d8e; border-color: color-mix(in srgb,#4fa3b5 30%,var(--surface)); }
.avatar[data-desk="bill"]   { background: color-mix(in srgb,#d1746b 14%,var(--surface)); color:#b0524a; border-color: color-mix(in srgb,#d1746b 30%,var(--surface)); }
:root[data-theme="dark"] .avatar[data-desk="renew"]{color:#9db3ff}
:root[data-theme="dark"] .avatar[data-desk="market"]{color:#cfa2f0}
:root[data-theme="dark"] .avatar[data-desk="claim"]{color:#86ccdb}
:root[data-theme="dark"] .avatar[data-desk="bill"]{color:#eb9b93}
.job-who .nm { font-size: 13px; font-weight: 650; letter-spacing: -.015em; }
.job-who .dc { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.chip { margin-left: auto; flex: none; font-size: 9.5px; letter-spacing: .09em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; border: 1px solid var(--line); color: var(--ink-3); background: var(--surface-2); white-space: nowrap; }
.chip.done { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }
.chip.needs { color: var(--amber); border-color: var(--amber-line); background: var(--amber-soft); }
.job-subject { margin: 8px 0 0; font-size: 13.8px; font-weight: 620; letter-spacing: -.015em; }
.job-meta { margin-top: 2px; font-size: 12px; color: var(--ink-3); }
.trace { list-style: none; margin: 9px 0 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.trace li { display: grid; grid-template-columns: 13px 1fr; gap: 8px; align-items: start; font-size: 12.2px; line-height: 1.45; color: var(--ink-2); animation: slidein .34s var(--ease) both; }
@keyframes slidein { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: none; } }
.trace .dot-s { width: 11px; height: 11px; margin-top: 4px; border-radius: 100px; flex: none; border: 1.5px solid var(--line-2); position: relative; }
.trace li.ok .dot-s { border-color: var(--brand); background: var(--brand); }
.trace li.ok .dot-s::after { content: ""; position: absolute; left: 2.8px; top: 1px; width: 2.6px; height: 5.4px; border: solid var(--surface); border-width: 0 1.5px 1.5px 0; transform: rotate(42deg); }
.trace li.run .dot-s { border-color: var(--brand); border-right-color: transparent; animation: wk .8s linear infinite; }
@keyframes wk { to { transform: rotate(360deg); } }
.trace code { font-family: var(--mono); font-size: 11px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.job-out { margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 12.2px; color: var(--ink-2); display: flex; gap: 7px; align-items: start; animation: slidein .34s var(--ease) both; }
.job-out .glyph { color: var(--brand); flex: none; font-weight: 700; }
.job-out .glyph.warn { color: var(--amber); }
.ask { border: 1px solid var(--amber-line); background: linear-gradient(180deg, color-mix(in srgb,var(--amber-soft) 75%,var(--surface)), var(--surface)); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-2); animation: rise .5s var(--ease) both; }
.ask.is-resolved { animation: sink .45s var(--ease-io) both; }
.ask-head { display: flex; align-items: center; gap: 8px; }
.ask-head .who { font-size: 13px; font-weight: 650; }
.ask-head .dc { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.ask-flag { margin-left: auto; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--amber); }
.ask-q { margin: 11px 0 0; font-size: 15px; font-weight: 650; letter-spacing: -.022em; line-height: 1.3; }
.ask-sub { margin-top: 6px; font-size: 12.8px; color: var(--ink-2); line-height: 1.5; }
.ask-evidence { margin: 12px 0 0; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); }
.ask-evidence div { display: grid; grid-template-columns: 84px 1fr; gap: 10px; padding: 6px 10px; font-size: 12px; }
.ask-evidence div + div { border-top: 1px solid var(--line); }
.ask-evidence .k { color: var(--ink-3); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding-top: 1px; }
.ask-evidence .v { color: var(--ink); overflow-wrap: anywhere; }
.ask-actions { display: flex; gap: 8px; margin-top: 12px; }
.ask-actions .btn { flex: 1; padding: 10px 12px; font-size: 14px; }
.btn.decide { --b-fg: var(--on-brand); background: linear-gradient(140deg, var(--brand-bright), var(--brand)); }
.btn.reject { --b-bg: var(--surface); --b-fg: var(--ink); border-color: var(--line-2); }
.btn.reject:hover { background: var(--rose-soft); border-color: var(--rose-line); color: var(--rose); filter: none; }
.ask-hint { margin-top: 8px; font-size: 11px; color: var(--ink-3); text-align: center; }
kbd { font-family: var(--mono); font-size: 10px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; color: var(--ink-2); background: var(--surface); }
.ask-empty { border: 1px dashed var(--line-2); border-radius: var(--r-lg); padding: 20px 16px; text-align: center; color: var(--ink-3); font-size: 12.8px; display: flex; flex-direction: column; gap: 7px; }
.ask-empty .big { font-size: 14px; color: var(--ink-2); font-weight: 600; }
.ask-queued { font-size: 11.5px; color: var(--ink-3); text-align: center; padding: 6px; border: 1px solid var(--line); border-radius: 100px; background: var(--surface); margin-top: 10px; }
.ledger { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 11px; }
.ledger-h { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.ledger ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ledger li { display: grid; grid-template-columns: 14px 1fr auto; gap: 8px; align-items: baseline; font-size: 12px; color: var(--ink-2); animation: slidein .36s var(--ease) both; }
.ledger li.is-empty { grid-template-columns: 1fr; }
.ledger li .g { font-weight: 700; }
.ledger li.yes .g { color: var(--brand); }
.ledger li.no .g { color: var(--rose); }
.ledger li .t { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); }
.ledger li em { font-style: normal; color: var(--ink); }
.console-foot { border-top: 1px solid var(--line); background: var(--surface-2); padding: 9px 16px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-3); }
.console-foot .dotsep { opacity: .5; }
.mock-badge {
  position: absolute; top: -14px; right: 16px; z-index: 3; display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 100px; padding: 7px 14px;
  font-size: 12.5px; font-weight: 620; box-shadow: var(--shadow-2); animation: floatTilt 6s var(--ease-io) infinite;
}
@keyframes floatTilt { 0%,100%{transform:translateY(0) rotate(-.4deg)} 50%{transform:translateY(-5px) rotate(.5deg)} }

/* ================================================================ sections */

section { padding: 88px 0; position: relative; }
section.tight { padding: 58px 0; }
.band { background: var(--bg-tint); border-block: 1px solid var(--line); }
.section-head { max-width: 780px; margin-bottom: 42px; }
.section-head h2 { margin: 14px 0 16px; }
.center { text-align: center; margin-left: auto; margin-right: auto; }
.center .lede { margin-left: auto; margin-right: auto; }
.center .cta-row { justify-content: center; }
/* Fails OPEN. The hidden state applies only once JS has confirmed it is alive
   (`html.has-js`), so no-JS, a broken handler or a non-painting renderer all
   leave the content visible. A fade is a nicety; invisible copy is a dead page. */
.has-js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.has-js .reveal.is-in { opacity: 1; transform: none; }

/* ---- the honest logo/system strip ---- */
.strip { border-block: 1px solid var(--line); background: var(--surface); padding: 20px 0; }
.strip .wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.strip .label { font-size: 11.5px; letter-spacing: .1em; color: var(--ink-3); white-space: nowrap; }
.strip .chips { display: flex; gap: 7px; flex-wrap: wrap; margin-left: auto; }
.sys {
  display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--line); border-radius: 100px; padding: 6px 13px; white-space: nowrap;
}
.sys .st { width: 6px; height: 6px; border-radius: 100px; flex: none; }
.sys .st.live { background: var(--brand); }
.sys .st.soon { background: var(--line-2); }
.sys em { font-style: normal; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }

/* ---- problem cards ---- */
.pains { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: 16px; }
@media (max-width: 560px) { .pains { grid-template-columns: 1fr; } }
.pain { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); gap: 16px; background: linear-gradient(150deg, var(--rose-soft), var(--surface) 72%); border: 1px solid var(--rose-line); border-radius: var(--r-xl); padding: 20px; }
@media (max-width: 700px) { .pain { grid-template-columns: 1fr; } }
.pain .emo { font-size: 20px; line-height: 1; margin-bottom: 10px; }
.pain h3 { margin-bottom: 8px; }
.pain p { font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }
.pain-tag { display: inline-block; margin-top: 12px; font-size: 11px; color: var(--rose); background: var(--surface); border: 1px solid var(--rose-line); border-radius: 7px; padding: 5px 10px; }
.mini { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; box-shadow: var(--shadow-1); align-self: start; }
.mini-bar { display: flex; align-items: center; gap: 8px; padding: 8px 11px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 11.5px; font-weight: 650; }
.mini-bar .tag { margin-left: auto; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--rose); background: var(--rose-soft); border: 1px solid var(--rose-line); border-radius: 100px; padding: 2px 7px; }
.mini-row { display: grid; grid-template-columns: 7px 1fr auto; gap: 8px; align-items: center; padding: 7px 11px; font-size: 11.8px; color: var(--ink-2); border-top: 1px solid var(--line); }
.mini-row:first-of-type { border-top: 0; }
.mini-row i { width: 6px; height: 6px; border-radius: 100px; background: var(--line-2); }
.mini-row i.hot { background: var(--rose); }
.mini-row b { color: var(--ink); font-weight: 620; }
.mini-row .r { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); white-space: nowrap; }
.mini-row.dim { opacity: .48; }
.mini-row.dim b { text-decoration: line-through; }

/* ---- orchestration ---- */
.orch { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); padding: 30px 26px 34px; box-shadow: var(--shadow-2); }
@media (max-width: 560px) { .orch { padding: 22px 16px 26px; } }
.orch-ask { display: grid; grid-template-columns: auto 1fr; gap: 13px; align-items: center; max-width: 620px; margin: 0 auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; }
.orch-ask .youpill { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; background: var(--ink); color: var(--bg); border-radius: 7px; padding: 6px 9px; }
.orch-ask .lbl { font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); display: block; margin-bottom: 3px; }
.orch-ask .q { font-size: 15px; font-weight: 560; letter-spacing: -.015em; }
.orch-arrow { display: grid; place-items: center; color: var(--ink-3); height: 40px; font-size: 17px; }
.orch-node { display: flex; flex-direction: column; align-items: center; }
.orch-node .tile { width: 58px; height: 58px; border-radius: 16px; display: grid; place-items: center; background: linear-gradient(140deg, var(--brand-bright), var(--brand)); color: #fff; font-size: 26px; font-weight: 800; box-shadow: 0 10px 26px var(--glow); animation: nodepulse 3.2s var(--ease-io) infinite; }
:root[data-theme="dark"] .orch-node .tile { color: var(--on-brand); }
@keyframes nodepulse { 0%,100%{box-shadow:0 10px 26px var(--glow)} 50%{box-shadow:0 10px 42px var(--glow)} }
.orch-node .nm { font-weight: 700; font-size: 16px; letter-spacing: -.02em; margin-top: 8px; }
.orch-node .role { font-size: 9.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.orch-spawn { margin: 14px auto 0; display: flex; width: fit-content; align-items: center; gap: 9px; font-size: 11.5px; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 100px; padding: 6px 14px; }
.orch-stem { width: 1px; height: 28px; background: var(--brand-line); margin: 0 auto; }
.orch-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 12px; }
.orch-card { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); padding: 12px; box-shadow: var(--shadow-1); }
.orch-card .chan { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--ink-2); padding-bottom: 9px; border-bottom: 1px solid var(--line); }
.orch-card .chan .t { margin-left: auto; color: var(--ink-3); font-size: 10px; }
.orch-card .agent { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.orch-card .role2 { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.orch-card .nm2 { font-size: 13px; font-weight: 650; letter-spacing: -.015em; }
.orch-card .badge { margin-left: auto; font-size: 8.5px; letter-spacing: .08em; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 100px; padding: 2px 7px; }
.orch-card .res { margin-top: 9px; font-size: 12.4px; color: var(--ink-2); line-height: 1.5; }
.orch-out { margin-top: 20px; display: flex; align-items: center; gap: 11px; justify-content: center; flex-wrap: wrap; text-align: center; font-size: 15px; color: var(--ink-2); }
.orch-out b { color: var(--ink); font-weight: 650; }

/* ---- tools tabs ---- */
.tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 26px; }
.tab { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-size: 14px; font-weight: 620; padding: 9px 16px; border-radius: 100px; cursor: pointer; background: var(--surface); color: var(--ink-2); border: 1px solid var(--line); transition: all .2s var(--ease); }
.tab:hover { color: var(--ink); border-color: var(--line-2); }
.tab[aria-selected="true"] { background: linear-gradient(140deg, var(--brand-bright), var(--brand)); color: var(--on-brand); border-color: transparent; box-shadow: 0 5px 16px var(--glow); }
.tabwrap { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 40px; align-items: center; }
@media (max-width: 940px) { .tabwrap { grid-template-columns: 1fr; gap: 28px; } }
.surface-mock { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-3); }
.surface-bar { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.surface-bar .dot3 { display: flex; gap: 4px; }
.surface-bar .dot3 i { width: 8px; height: 8px; border-radius: 100px; background: var(--line-2); }
.surface-in { padding: 15px; display: flex; flex-direction: column; gap: 12px; }
.mail-row { display: grid; grid-template-columns: 27px 1fr; gap: 11px; align-items: start; }
.mail-row .who { font-weight: 650; font-size: 12.8px; }
.mail-row .when { color: var(--ink-3); font-size: 11.5px; font-weight: 400; }
.mail-row .body { color: var(--ink-2); font-size: 13px; line-height: 1.5; margin-top: 3px; }
.mail-row.is-agent .body { color: var(--ink); }
.mail-sep { height: 1px; background: var(--line); }
.caret { display: inline-block; width: 2px; height: 1em; background: var(--brand); vertical-align: -2px; animation: blink 1.05s steps(2) infinite; }
@keyframes blink { 0%,50%{opacity:1} 51%,100%{opacity:0} }
.log-row { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: start; }
.log-row .ts { font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); padding-top: 2px; }
.log-row .what { color: var(--ink-2); line-height: 1.5; font-size: 12.6px; }
.log-row .what b { color: var(--ink); font-weight: 620; }
.log-row .by { color: var(--brand-ink); font-weight: 650; }
.portal-field { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12.8px; }
.portal-field:last-of-type { border-bottom: 0; }
.portal-field .lb { color: var(--ink-3); }
.portal-field .vl { color: var(--ink); font-weight: 620; text-align: right; }
.state-pill { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-size: 10px; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-ink); background: var(--brand-soft); border: 1px solid var(--brand-line); padding: 4px 10px; border-radius: 100px; }
.checks { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.checks li { display: grid; grid-template-columns: 19px 1fr; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.checks li b { color: var(--ink); font-weight: 650; }
.checks .tk { color: var(--brand); font-weight: 800; }

/* ---- pillars ---- */
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px,1fr)); gap: 16px; }
.pillar { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s; }
.pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-2); }
.pillar .ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-ink); margin-bottom: 16px; font-size: 19px; }
.pillar .ic svg { width: 20px; height: 20px; }
.pillar h3 { margin-bottom: 9px; }
.pillar p { color: var(--ink-2); font-size: 14.2px; line-height: 1.55; }
.pillar .link-more { margin-top: 16px; }

/* ---- dark CTA band ---- */
.cta-panel { position: relative; overflow: hidden; border-radius: var(--r-2xl); background: linear-gradient(140deg, #06231b, #05392a 46%, #0b1020); color: #fff; padding: 64px 54px 56px; }
@media (max-width: 620px) { .cta-panel { padding: 42px 24px 38px; } }
.cta-panel .watermark { position: absolute; right: -70px; bottom: -110px; font-size: 420px; line-height: .8; font-weight: 800; color: rgba(255,255,255,.045); pointer-events: none; user-select: none; letter-spacing: -.06em; }
.cta-panel::after { content: ""; position: absolute; right: -60px; bottom: -140px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(16,185,129,.30), transparent 66%); filter: blur(40px); }
.cta-panel > *:not(.watermark) { position: relative; z-index: 1; }
.cta-panel h2 { color: #fff; max-width: 16ch; }
.cta-panel p { color: rgba(255,255,255,.76); margin-top: 16px; font-size: 17px; max-width: 54ch; }
.cta-panel .cta-row { margin-top: 30px; }
.cta-ticks { display: flex; flex-wrap: wrap; gap: 22px; margin-top: 30px; font-size: 13.5px; color: rgba(255,255,255,.74); }
.cta-ticks span { display: inline-flex; align-items: center; gap: 8px; }
.cta-ticks i { color: var(--brand-bright); font-style: normal; font-weight: 800; }

/* ---- page heads & security ---- */
.page-head { padding: 62px 0 26px; position: relative; }
.page-head h1 { margin: 18px 0 20px; }
.mono-note { font-size: 12px; color: var(--ink-2); display: inline-flex; align-items: center; gap: 9px; margin-top: 22px; flex-wrap: wrap; }
.dark-panel { position: relative; overflow: hidden; border-radius: var(--r-2xl); background: linear-gradient(140deg, #06231b, #0b1020 62%); color: #fff; padding: 44px 44px 46px; }
@media (max-width: 620px) { .dark-panel { padding: 30px 22px; } }
.dark-panel h2 { color: #fff; }
.dark-panel p { color: rgba(255,255,255,.75); margin-top: 14px; max-width: 54ch; font-size: 15.5px; }
.dark-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 34px; align-items: center; }
@media (max-width: 860px) { .dark-grid { grid-template-columns: 1fr; gap: 26px; } }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fact { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 18px; }
.fact b { display: block; font-size: 17px; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1.25; }
.fact span { display: block; margin-top: 7px; font-size: 12.5px; color: rgba(255,255,255,.62); line-height: 1.5; }
.tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-xl); background: var(--surface); box-shadow: var(--shadow-1); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 580px; font-size: 14.2px; }
table.cmp th, table.cmp td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--line); }
table.cmp thead th { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--surface-2); }
table.cmp thead th.us { color: var(--brand-ink); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td:first-child { font-weight: 620; color: var(--ink); width: 42%; }
table.cmp td.yes { color: var(--brand-ink); font-weight: 620; }
table.cmp td.no { color: var(--ink-3); }
.layers { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px,1fr)); gap: 14px; }
.layer { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; }
.layer .emo { font-size: 20px; line-height: 1; }
.layer h3 { margin: 12px 0 5px; }
.layer .sub { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-ink); }
.layer p { color: var(--ink-2); font-size: 13.8px; line-height: 1.55; margin-top: 10px; }
.hood { margin-top: 14px; border-top: 1px dashed var(--line); padding-top: 12px; }
.hood .h { font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.hood ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.hood li { font-size: 11.2px; color: var(--ink-2); line-height: 1.45; padding-left: 14px; position: relative; }
.hood li::before { content: "–"; position: absolute; left: 0; color: var(--ink-3); }

/* ---- use cases / integrations ---- */
.desks { display: grid; grid-template-columns: repeat(auto-fit, minmax(268px,1fr)); gap: 14px; }
.deskcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s; }
.deskcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--brand-line); }
.deskcard .kicker { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-ink); }
.deskcard h3 { margin: 10px 0 9px; }
.deskcard p { font-size: 14px; color: var(--ink-2); line-height: 1.55; }
.deskcard .ask-eg { margin-top: 14px; font-size: 11.5px; color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--line); border-left: 2px solid var(--brand); border-radius: 6px; padding: 9px 11px; line-height: 1.5; }
.cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; }
.cat { background: var(--surface); padding: 22px 20px; transition: background .25s var(--ease); }
.cat:hover { background: var(--surface-2); }
.cat .kicker { font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--brand-ink); display: block; margin-bottom: 10px; }
.cat h3 { font-size: 16.5px; margin-bottom: 7px; }
.cat p { font-size: 13.2px; color: var(--ink-2); line-height: 1.5; }
.cat .how { margin-top: 12px; font-size: 10.5px; color: var(--ink-3); display: flex; align-items: center; gap: 7px; }

/* ---- docs ---- */
.docs-grid { display: grid; grid-template-columns: 236px minmax(0,1fr); gap: 46px; align-items: start; }
@media (max-width: 900px) { .docs-grid { grid-template-columns: 1fr; gap: 26px; } }
.docs-nav { position: sticky; top: 92px; }
.docs-nav .h { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.docs-nav a { display: block; padding: 7px 11px; border-radius: 8px; font-size: 14px; color: var(--ink-2); }
.docs-nav a:hover { background: var(--surface-2); color: var(--ink); }
.doc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px,1fr)); gap: 14px; }
.doc-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; transition: border-color .25s, transform .25s var(--ease); }
.doc-card:hover { border-color: var(--brand-line); transform: translateY(-2px); }
.doc-card .emo { font-size: 19px; }
.doc-card h3 { font-size: 16.5px; margin: 10px 0 8px; }
.doc-card p { font-size: 13.6px; color: var(--ink-2); line-height: 1.55; }
.doc-sec { scroll-margin-top: 90px; }
.doc-sec h2 { font-size: clamp(24px,3vw,32px); margin: 44px 0 14px; }
.doc-sec p { color: var(--ink-2); margin-bottom: 12px; max-width: 76ch; }
.doc-sec ul { color: var(--ink-2); max-width: 76ch; padding-left: 20px; margin: 0 0 12px; }
.doc-sec li { margin-bottom: 8px; }
.doc-sec b { color: var(--ink); }

/* ==================================================== the waitlist wizard */

.wiz-shell { max-width: 640px; margin: 0 auto; }
.wiz-head { text-align: center; margin-bottom: 26px; }
.wiz-head .mark { width: 54px; height: 54px; border-radius: 16px; font-size: 27px; margin: 0 auto 14px; }
.wiz-head h1 { font-size: clamp(27px, 4.4vw, 38px); }
.wiz-head p { color: var(--ink-2); margin-top: 10px; font-size: 15.5px; }
.wiz-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-2xl); box-shadow: var(--shadow-3); overflow: hidden; }
.wiz-progress { height: 6px; background: var(--surface-2); position: relative; }
.wiz-progress i { position: absolute; inset: 0 auto 0 0; width: 14%; border-radius: 0 100px 100px 0; background: linear-gradient(90deg, var(--brand-bright), var(--brand)); transition: width .45s var(--ease); }
/* Width by class, not element.style — the CSP forbids inline styles. */
.wiz-progress i.p1 { width: 14%; }  .wiz-progress i.p2 { width: 28%; }
.wiz-progress i.p3 { width: 43%; }  .wiz-progress i.p4 { width: 57%; }
.wiz-progress i.p5 { width: 71%; }  .wiz-progress i.p6 { width: 86%; }
.wiz-progress i.p7 { width: 100%; }
.wiz-body { padding: 34px 34px 28px; }
@media (max-width: 620px) { .wiz-body { padding: 26px 20px 22px; } }
.wiz-step[hidden] { display: none; }
.wiz-count { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.wiz-q { font-size: clamp(20px, 2.8vw, 25px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; margin: 10px 0 6px; }
.wiz-hint { color: var(--ink-2); font-size: 14px; margin-bottom: 20px; }
.opts { display: flex; flex-direction: column; gap: 9px; }
.opt {
  display: grid; grid-template-columns: 20px 1fr; gap: 13px; align-items: start;
  border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px;
  background: var(--surface); cursor: pointer; transition: border-color .18s, background .18s, transform .18s var(--ease);
}
.opt:hover { border-color: var(--brand-line); background: var(--surface-2); }
.opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.opt .radio { width: 19px; height: 19px; border-radius: 100px; border: 1.8px solid var(--line-2); margin-top: 2px; position: relative; transition: border-color .18s; }
.opt .t { font-size: 15px; font-weight: 620; letter-spacing: -.015em; }
.opt .d { font-size: 13px; color: var(--ink-2); margin-top: 3px; line-height: 1.45; }
.opt:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); }
.opt:has(input:checked) .radio { border-color: var(--brand); }
.opt:has(input:checked) .radio::after { content: ""; position: absolute; inset: 3px; border-radius: 100px; background: var(--brand); }
.opt:has(input:focus-visible) { outline: 2px solid var(--brand); outline-offset: 3px; }
.opt .sev { margin-left: auto; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 100px; border: 1px solid; }
.opt .sev.s4 { color: #a8321f; border-color: #f0c4bd; background: #fdefec; }
.opt .sev.s3 { color: #a8620a; border-color: var(--amber-line); background: var(--amber-soft); }
.opt .sev.s2 { color: #7a6a12; border-color: #e6e0af; background: #fbf8e6; }
.opt .sev.s1 { color: var(--brand-ink); border-color: var(--brand-line); background: var(--brand-soft); }
:root[data-theme="dark"] .opt .sev.s4 { color:#f2848d; border-color:#4a2126; background:#2a1416; }
:root[data-theme="dark"] .opt .sev.s2 { color:#ddd08a; border-color:#3d3820; background:#211f14; }
.opt-top { display: flex; align-items: center; gap: 10px; }
.wiz-nav { display: flex; align-items: center; gap: 10px; margin-top: 24px; }
.wiz-nav .back { margin-right: auto; }
.wiz-err { color: var(--rose); font-size: 13px; margin-top: 14px; display: none; }
.wiz-err.show { display: block; }
.wiz-fields { display: grid; gap: 15px; }

/* ------------------------------------------- form fields (wizard step 7) */
.wiz-fields .field, .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 620; color: var(--ink); }
.field label .opt { color: var(--ink-3); font-weight: 400; }
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
  font-family: inherit; font-size: 15px; color: var(--ink); background: var(--surface-2);
  border: 1px solid var(--line-2); border-radius: 10px; padding: 12px 13px; width: 100%;
  transition: border-color .18s, background .18s, box-shadow .18s; appearance: none;
}
textarea { resize: vertical; min-height: 84px; line-height: 1.5; }
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--glow); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ⚠ .thanks must default to display:none. Without it the confirmation panel
   renders on page load, above a form nobody has filled in yet. */
.is-gone { display: none !important; }
.thanks { display: none; text-align: center; padding: 44px 24px 48px; }
.thanks.show { display: block; animation: rise .55s var(--ease) both; }
.thanks .tick-c { width: 58px; height: 58px; border-radius: 100px; margin: 0 auto 20px; background: var(--brand-soft); border: 1px solid var(--brand-line); color: var(--brand-ink); display: grid; place-items: center; }
.thanks .tick-c svg { width: 28px; height: 28px; }
.thanks h3 { font-size: clamp(22px, 3vw, 29px); margin-bottom: 12px; letter-spacing: -.03em; }
.thanks p { color: var(--ink-2); max-width: 46ch; margin: 0 auto; font-size: 15px; }
.thanks .recap { margin: 24px auto 0; max-width: 430px; text-align: left; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); font-size: 13px; }
.thanks .recap div { display: grid; grid-template-columns: 100px 1fr; gap: 10px; padding: 9px 14px; }
.thanks .recap div + div { border-top: 1px solid var(--line); }
.thanks .recap .k { color: var(--ink-3); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }

/* ================================================================== footer */
footer { border-top: 1px solid var(--line); background: var(--bg-tint); padding: 54px 0 60px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 34px; justify-content: space-between; margin-bottom: 32px; }
.foot-links { display: flex; gap: 26px; flex-wrap: wrap; font-size: 14px; }
.foot-links a { color: var(--ink-2); }
.foot-links a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.rule { height: 1px; background: var(--line); border: 0; margin: 0 0 24px; }
.legal { font-size: 12.2px; line-height: 1.75; color: var(--ink-3); max-width: 88ch; }
.legal + .legal { margin-top: 10px; }

/* ========================================================= floating prompt */
.floater { position: fixed; right: 20px; bottom: 20px; z-index: 60; max-width: 330px; background: var(--surface); border: 1px solid var(--brand-line); border-radius: var(--r-lg); padding: 15px 15px 15px 17px; box-shadow: var(--shadow-3); display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: start; animation: rise .6s var(--ease) 1.4s both; }
.floater .ttl { font-size: 14px; font-weight: 650; letter-spacing: -.018em; display: flex; align-items: center; gap: 8px; }
.floater p { font-size: 12.8px; color: var(--ink-2); margin-top: 5px; line-height: 1.5; }
.floater .go { margin-top: 12px; display: inline-flex; font-size: 13.5px; padding: 9px 17px; }
.floater .x { width: 26px; height: 26px; border-radius: 100px; border: 0; background: transparent; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; font-size: 15px; font-family: inherit; }
.floater .x:hover { color: var(--ink); background: var(--surface-2); }
.floater.is-tucked { display: none; }
@media (max-width: 720px) { .floater { left: 12px; right: 12px; bottom: 12px; max-width: none; padding: 12px 12px 12px 15px; } .floater p { display: none; } }

/* =============================================================== motion off */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .dot, .caret, .orb, .mock-badge, .orch-node .tile { animation: none; }
  .underdraw::after { animation: none; transform: scaleX(1); }
  .trace li.run .dot-s { animation: none; border-right-color: var(--line-2); }
  .pillar:hover, .btn:hover, .deskcard:hover { transform: none; }
}

/* ==========================================================================
   2026-08-08 — THE CALM PASS
   Two design decisions, applied on top of the system above rather than woven
   through it, so each is one block to read and one block to revert.

   1. MONOSPACE IS NO LONGER A UI VOICE. It survives above on exactly five
      selectors, and every one of them is genuinely machine data: .trace code,
      kbd, .ledger li .t, .mini-row .r, .log-row .ts. Everywhere else it was
      costume, and costume reads "developer tool" to a buyer who does not write
      software. The rules below restore sizes that were tuned for a narrower
      face.

   2. AMBIENT MOTION IS OFF. Nothing on the page loops any more. The hero
      network will be the only thing that moves, because it is the only motion
      carrying an argument. A badge that floats and a counter that pops are
      motion performing activity, and on a page whose promise is to remove the
      stress they argue against the product.
   ========================================================================== */

/* ---- 1. sizes rebalanced now the labels sit in the body face ---- */
.trustbar         { font-size: 13px; }
@media (max-width: 460px) { .trustbar { font-size: 12px; } }
.mono-note        { font-size: 13.5px; }
.hood li          { font-size: 12.6px; }
.deskcard .ask-eg { font-size: 13.4px; }
.cat .how         { font-size: 11.8px; }
.orch-card .chan  { font-size: 11.8px; }
.orch-spawn       { font-size: 12.2px; }
.strip .label     { font-size: 12.2px; }
.counter b        { font-variant-numeric: tabular-nums; }
.eyebrow          { letter-spacing: .15em; font-weight: 600; }

/* ---- 2. nothing loops ----
   NOTE the orb selectors carry TWO classes upstream (.orb.o1), so a bare
   `.orb` override loses on specificity and the float keeps running. Measured
   in the browser, not assumed. */
.orb, .orb.o1, .orb.o2, .orb.o3 { animation: none; }
.dot              { animation: none; }
.mock-badge       { animation: none; }
.orch-node .tile  { animation: none; }
.caret            { animation: none; opacity: .5; }
.counter.tick     { animation: none; }
.underdraw::after { animation: none; transform: scaleX(1); }

/* ==========================================================================
   NEW COMPONENTS
   ========================================================================== */

/* ---- the hero's two-question headline: two sentences, one thought ---- */
.askline { display: block; }
.askline + .askline { margin-top: .16em; }
.hero h1 { font-size: clamp(29px, 3.9vw, 44px); line-height: 1.14; letter-spacing: -.028em; max-width: 20ch; }
@media (max-width: 1040px) { .hero h1 { max-width: 26ch; } }
.speedline {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 13px; font-weight: 620; letter-spacing: -.01em; color: var(--ink-2);
  background: var(--surface); border: 1px solid var(--line);
  padding: 7px 14px; border-radius: 100px; box-shadow: var(--shadow-1);
}
.speedline b { color: var(--ink); font-weight: 700; }
.standon { margin-top: 18px; font-size: 15.5px; line-height: 1.55; color: var(--ink); font-weight: 620; letter-spacing: -.015em; max-width: 48ch; }

/* ---- the fifth problem card: a missed life, not a missed task ---- */
.pain.self { background: linear-gradient(150deg, var(--brand-soft), var(--surface) 74%); border-color: var(--brand-line); }
.pain.self .pain-tag { color: var(--brand-ink); border-color: var(--brand-line); }
.pain.self .mini-bar .tag { color: var(--brand-ink); background: var(--brand-soft); border-color: var(--brand-line); }
.pain.self .mini-row i.hot { background: var(--brand); }

/* ---- the thesis strip ---- */
.claims { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 16px; }
.claim { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 24px; box-shadow: var(--shadow-1); }
.claim .n { display: block; font-size: 21px; font-weight: 700; letter-spacing: -.03em; line-height: 1.22; color: var(--ink); }
.claim .n em { font-style: normal; color: var(--brand-ink); }
.claim p { margin-top: 11px; font-size: 14.2px; line-height: 1.6; color: var(--ink-2); }
.claim p b { color: var(--ink); font-weight: 650; }

/* ---- the scenarios: the question, and the walk it used to take ---- */
.scen { display: grid; gap: 14px; }
.scenario {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.92fr); gap: 30px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 26px 28px; box-shadow: var(--shadow-1);
}
@media (max-width: 860px) { .scenario { grid-template-columns: 1fr; gap: 20px; padding: 22px 20px; } }
.scenario .q { font-size: clamp(19px, 2.2vw, 24px); font-weight: 700; letter-spacing: -.028em; line-height: 1.26; }
.scenario .a { margin-top: 12px; font-size: 14.6px; line-height: 1.6; color: var(--ink-2); }
.scenario .a + .a { margin-top: 10px; }
.scenario .a b { color: var(--ink); font-weight: 650; }
.walk { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); overflow: hidden; align-self: start; }
.walk .h { padding: 9px 13px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); background: var(--surface); }
.walk ul { list-style: none; margin: 0; padding: 0; }
.walk li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: baseline; padding: 9px 13px; font-size: 12.9px; line-height: 1.45; color: var(--ink-2); border-top: 1px solid var(--line); }
.walk li:first-child { border-top: 0; }
.walk li .s { color: var(--brand); font-weight: 800; }
.walk li b { color: var(--ink); font-weight: 620; }
.walk .out { padding: 11px 13px; border-top: 1px solid var(--line); background: var(--surface); font-size: 13px; color: var(--ink); font-weight: 620; line-height: 1.45; }

/* ---- two-up argument blocks ---- */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px,1fr)); gap: 16px; }
.arg { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 26px; box-shadow: var(--shadow-1); }
.arg h3 { font-size: 21px; letter-spacing: -.025em; margin-bottom: 11px; }
.arg p { color: var(--ink-2); font-size: 14.4px; line-height: 1.6; }
.arg p + p { margin-top: 11px; }
.arg p b { color: var(--ink); font-weight: 650; }
.said {
  margin: 16px 0 4px; border-left: 2px solid var(--brand); background: var(--surface-2);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 13px 15px;
  font-size: 15px; line-height: 1.5; color: var(--ink); font-weight: 560; letter-spacing: -.012em;
}

/* ---- an honest statement of direction, marked as one ---- */
.direction {
  display: block; margin-top: 22px;
  border: 1px dashed var(--line-2); border-radius: var(--r-md); padding: 14px 16px;
  font-size: 13.6px; line-height: 1.6; color: var(--ink-2); background: var(--surface); max-width: 76ch;
}
.direction b { color: var(--ink); font-weight: 650; }

/* ---- one surface: desktop beside phone ---- */
.surfaces { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 34px; align-items: center; }
@media (max-width: 900px) { .surfaces { grid-template-columns: 1fr; justify-items: center; } }
.decide { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-3); width: 100%; }
.decide .top { display: flex; align-items: center; gap: 9px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: var(--surface-2); font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.decide .top .cog { margin-left: auto; color: var(--ink-3); font-size: 15px; }
.decide .in { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.decide .from { font-size: 12.4px; color: var(--ink-3); }
.decide .subject { font-size: 16.5px; font-weight: 680; letter-spacing: -.022em; line-height: 1.3; }
.decide .found { border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; }
.decide .found div { display: grid; grid-template-columns: 116px 1fr; gap: 10px; padding: 8px 11px; font-size: 12.5px; }
.decide .found div + div { border-top: 1px solid var(--line); }
.decide .found .k { color: var(--ink-3); }
.decide .found .v { color: var(--ink); }
.decide .verdict { font-size: 13.6px; line-height: 1.55; color: var(--ink); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--r-sm); padding: 11px 13px; }
.decide .acts { display: flex; gap: 8px; }
.decide .acts .btn { flex: 1; padding: 10px 12px; font-size: 14px; box-shadow: none; }
.decide .note { font-size: 11.5px; color: var(--ink-3); text-align: center; }

.phone { width: 300px; max-width: 100%; border: 10px solid var(--ink); border-radius: 34px; background: var(--ink); box-shadow: var(--shadow-3); }
.phone .screen { background: var(--bg); border-radius: 24px; overflow: hidden; }
.phone .bar { display: flex; align-items: center; gap: 8px; padding: 11px 14px 9px; font-size: 11.5px; color: var(--ink-3); border-bottom: 1px solid var(--line); }
.phone .bar .t { margin-left: auto; }
.phone .in { padding: 14px; display: flex; flex-direction: column; gap: 11px; }
.phone .subject { font-size: 14.5px; font-weight: 680; letter-spacing: -.02em; line-height: 1.32; }
.phone .verdict { font-size: 12.8px; line-height: 1.5; color: var(--ink-2); }
.phone .verdict b { color: var(--ink); font-weight: 650; }
.phone .acts { display: flex; gap: 7px; }
.phone .acts .btn { flex: 1; padding: 9px 10px; font-size: 13px; box-shadow: none; }
.phone .note { font-size: 10.8px; color: var(--ink-3); text-align: center; }

/* ---- security / integrations: plain argument cards ---- */
.walls { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px,1fr)); gap: 14px; }
.wall { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 22px; }
.wall h3 { margin-bottom: 9px; }
.wall p { color: var(--ink-2); font-size: 13.8px; line-height: 1.58; }
.wall p + p { margin-top: 9px; }

/* ---- docs FAQ. It had no styling at all and rendered as raw <details>;
       found while expanding it, so fixed rather than left. ---- */
.faq { border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.faq details + details { border-top: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none; padding: 15px 18px;
  font-size: 15.5px; font-weight: 620; letter-spacing: -.015em; color: var(--ink);
  display: flex; align-items: center; gap: 12px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; color: var(--ink-3); font-weight: 600; font-size: 18px; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq summary:hover { background: var(--surface-2); }
.faq .body { padding: 0 18px 16px; color: var(--ink-2); font-size: 14.3px; line-height: 1.6; max-width: 76ch; }
.faq .body a { color: var(--brand-ink); font-weight: 620; }
.doc-sec .faq { margin-top: 6px; }