/* ===================================================================
   Hire Alien — Design System
=================================================================== */

/* Fonts are bundled locally so the site never depends on a CDN.

   These are VARIABLE fonts: a single file that contains every weight
   from 400 to 900 as a continuous range. That is what makes it
   possible to animate weight smoothly — a headline can physically
   thicken as you scroll, which simply cannot be done by swapping
   between separate static weight files. */
@font-face {
  font-family: 'Bodoni Moda'; src: url('../vendor/fonts/bodoni-moda-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 400 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Bodoni Moda'; src: url('../vendor/fonts/bodoni-moda-latin-wght-italic.woff2') format('woff2-variations');
  font-weight: 400 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Manrope'; src: url('../vendor/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}
@font-face { font-family:'IBM Plex Mono'; src:url('../vendor/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../vendor/fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

:root {
  /* =====================================================================
     DARK LIGHTNING BLUE ON BLACK
     ---------------------------------------------------------------------
     Every colour below was measured against pure black before it went
     in. A cafe owner reading their order list at 6am on a phone with the
     brightness down is the person this has to work for, and "it looks
     nice on my monitor" is not the same test.

       body text      #DCEEFF   17.7:1   AAA
       muted text     #9CC4E8   11.5:1   AAA
       faint text     #7FA8CC    8.4:1   AAA   (small print still legible)
       primary blue   #4DA8FF    8.4:1   AAA
       lightning      #00E5FF   13.7:1   AAA

     WCAG asks 4.5:1 for body text. Nothing here is below 5.4:1.

     Button text is BLACK on the blue, not white: 8.4:1 against 2.5:1.
     White on a mid-blue button is the commonest contrast failure in
     dark themes and it looks fine to a designer with good eyes.
  ===================================================================== */

  --ink: #000000;
  --surface: #050A10;
  --surface-raised: #0A1420;
  --border: #16304A;

  --text: #DCEEFF;
  --text-muted: #9CC4E8;
  --text-faint: #7FA8CC;

  /* The blues. --gold and --caramel keep their names so the hundreds of
     rules that reference them keep working; only the values changed.
     Renaming them would have meant touching every rule in the file for
     no visual difference and a large chance of missing one. */
  --gold: #4DA8FF;
  --gold-bright: #7CC4FF;
  --gold-dim: #2A5C8A;
  --caramel: #6FB8FF;
  --caramel-deep: #2E7BFF;

  --blue: #4DA8FF;
  --blue-bright: #7CC4FF;
  --blue-pale: #C9E4FF;
  --lightning: #00E5FF;
  --electric: #2E7BFF;

  /* The accent pair used for gradients and live indicators. */
  --aurora-a: #00E5FF;
  --aurora-b: #4DA8FF;
  --aurora-gradient: linear-gradient(135deg, var(--aurora-a), var(--aurora-b));
  --aurora-gradient-soft: linear-gradient(135deg, rgba(0,229,255,0.14), rgba(77,168,255,0.14));
  --spark: #00E5FF;

  --danger: #FF6B8A;

  --font-display: 'Bodoni Moda', serif;
  --font-body: 'Manrope', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
  --radius: 12px;
  --max-width: 1140px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.5), 0 12px 32px -12px rgba(0,0,0,0.6);
  /* The "shiny" in shiny blue: a lit edge plus a cast glow. */
  --shadow-glow: 0 0 0 1px rgba(77,168,255,0.22), 0 8px 40px -8px rgba(0,229,255,0.30);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* Real keyboard focus visibility, on-brand rather than the browser's
   default blue outline, which would clash against this dark theme.
   :focus-visible specifically (not plain :focus) so a mouse click
   doesn't show a focus ring — only actual keyboard navigation does. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--aurora-a);
  outline-offset: 3px;
  border-radius: 4px;
}

body {
  margin: 0;
  background:
    radial-gradient(ellipse 900px 500px at 15% -10%, rgba(77,168,255,0.16), transparent 60%),
    radial-gradient(ellipse 800px 500px at 100% 0%, rgba(0,229,255,0.10), transparent 55%),
    var(--ink);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  position: relative;
}

body::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 700; line-height: 1.12; margin: 0 0 0.5em; letter-spacing: -0.01em; }
p { color: var(--text-muted); margin: 0 0 1em; }
.mono { font-family: var(--font-mono); }

.nav-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px rgba(232,185,91,0.55); }
.gradient-text {
  background: linear-gradient(90deg, var(--aurora-a), var(--aurora-b), var(--aurora-a));
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradient-sweep 6s linear infinite;
}
@keyframes gradient-sweep { to { background-position: 200% center; } }
@media (prefers-reduced-motion: reduce) { .gradient-text { animation: none; } }

.wrap { max-width: var(--max-width); margin: 0 auto; padding: 0 24px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--surface-raised); border-radius: 6px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--border); }
* { scrollbar-color: var(--surface-raised) var(--ink); scrollbar-width: thin; }

.icon { width: 22px; height: 22px; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; display: block; }
.icon-wrap {
  width: 44px; height: 44px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--aurora-gradient-soft); color: var(--aurora-a); border: 1px solid rgba(77,168,255,0.25); flex-shrink: 0;
}

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Staggered cascade: cards that cross into view together animate in
   sequence rather than all snapping in at once — a small choreographed
   moment rather than scattered simultaneous motion. */
.grid .reveal:nth-child(1) { transition-delay: 0s; }
.grid .reveal:nth-child(2) { transition-delay: 0.06s; }
.grid .reveal:nth-child(3) { transition-delay: 0.12s; }
.grid .reveal:nth-child(4) { transition-delay: 0.18s; }
.grid .reveal:nth-child(5) { transition-delay: 0.24s; }
.grid .reveal:nth-child(6) { transition-delay: 0.3s; }
.grid .reveal:nth-child(7) { transition-delay: 0.36s; }
.grid .reveal:nth-child(8) { transition-delay: 0.42s; }
.grid .reveal:nth-child(9) { transition-delay: 0.48s; }
@media (prefers-reduced-motion: reduce) { .grid .reveal { transition-delay: 0s !important; } }

.seal { width: 26px; height: 26px; flex-shrink: 0; position: relative; }

.faq-item { padding: 22px 0; border-bottom: 1px solid var(--border); }
.faq-item:first-child { padding-top: 0; }
.faq-item h3 { font-size: 1.05rem; margin: 0 0 8px; }
.faq-item p { color: var(--text-muted); margin: 0; line-height: 1.7; font-size: 0.95rem; }
.seal svg { width: 100%; height: 100%; display: block; }
.seal-spin svg { animation: seal-rotate 20s linear infinite; transform-origin: center; }
@keyframes seal-rotate { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .seal-spin svg { animation: none; } }
.brand-wordmark { font-family: var(--font-display); font-optical-sizing: auto; font-weight: 700; font-size: 0.98rem; letter-spacing: 0.02em; display: flex; align-items: center; gap: 10px; }

.nav { border-bottom: 1px solid var(--border); position: sticky; top: 0; background: rgba(0,0,0,0.82); backdrop-filter: blur(10px); z-index: 100; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
.nav-links { display: flex; gap: 30px; align-items: center; }
.nav-links a { color: var(--text-muted); font-size: 0.92rem; font-weight: 500; transition: color .15s; position: relative; }
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-links a:not(.btn)::after { content: ''; position: absolute; left: 0; bottom: -22px; width: 0; height: 2px; background: var(--aurora-gradient); transition: width .25s var(--ease); }
.nav-links a:not(.btn):hover::after { width: 100%; }

/* A button inside the nav must keep its OWN text colour.
   `.nav-links a` has specificity 0,1,1 and silently beats `.btn-primary`
   at 0,1,0 — which left the primary signup CTA rendering muted grey on
   a bright gradient, almost unreadable. Confirmed in a real browser:
   the nav CTA computed to rgb(147,160,194) while the identical hero
   button computed to rgb(6,17,23). These rules restore the intended
   colours without weakening the plain nav-link styling. */
.nav-links a.btn-primary { color: #050A10; }
.nav-links a.btn-secondary { color: var(--text); }

.nav-hamburger {
  display: none; flex-direction: column; justify-content: center; gap: 5px;
  width: 34px; height: 34px; background: none; border: none; cursor: pointer; padding: 0;
}
.nav-hamburger span { display: block; width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s; }
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 760px) {
  .nav-hamburger { display: flex; }
  .nav-links {
    position: fixed; top: 68px; left: 0; right: 0; z-index: 999997;
    background: var(--ink); border-bottom: 1px solid var(--border);
    flex-direction: column; align-items: flex-start; gap: 0; padding: 0;
    max-height: 0; overflow: hidden; transition: max-height .3s var(--ease);
  }
  .nav-links.mobile-open { max-height: 400px; padding: 8px 0; }
  .nav-links a { width: 100%; padding: 14px 24px; }
  .nav-links a:not(.btn)::after { display: none; }
  .nav-links a:not(.btn):hover { background: rgba(237,239,247,0.04); }
}
@media (prefers-reduced-motion: reduce) { .nav-links { transition: none; } .nav-hamburger span { transition: none; } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 24px; border-radius: 9px;
  font-family: var(--font-body); font-weight: 700; font-size: 0.94rem; cursor: pointer; border: 1px solid transparent;
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), background .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease);
  white-space: nowrap; position: relative; overflow: hidden;
}
.btn-primary { background: var(--aurora-gradient); color: #050A10; box-shadow: 0 4px 24px rgba(77,168,255,0.28), 0 0 30px rgba(255,61,154,0.12); }
.btn-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%); transform: translateX(-120%); transition: transform .6s var(--ease); }
.btn-primary:hover::before { transform: translateX(120%); }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 32px rgba(77,168,255,0.45); }
.btn-primary:active { transform: translateY(0); }
.btn-secondary { background: rgba(237,239,247,0.03); border-color: var(--border); color: var(--text); }
.btn-secondary:hover { border-color: var(--aurora-b); background: rgba(77,168,255,0.08); transform: translateY(-1px); }
.btn-block { width: 100%; }
.btn-sm { padding: 8px 15px; font-size: 0.85rem; }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none !important; }

.hero { padding: 96px 0 68px; text-align: center; position: relative; overflow: hidden; }
.hero > .wrap { position: relative; z-index: 2; }
#hero-webgl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 0; pointer-events: none; opacity: 0.85;
}

/* Kinetic typography: the headline arrives slightly expanded and
   lighter, then relaxes into its resting state — a deliberate
   "settling" moment rather than a static heading. */
.hero h1.kinetic-settle {
  letter-spacing: 0.02em;
  font-weight: 600;
  filter: blur(2px);
  opacity: 0;
  transition: letter-spacing 1.1s var(--ease), font-weight 1.1s var(--ease), filter 0.9s var(--ease), opacity 0.9s var(--ease);
}
.hero h1.kinetic-settle.kinetic-settled {
  letter-spacing: -0.015em;
  font-weight: 800;
  filter: blur(0);
  opacity: 1;
}
.hero-orb { position: absolute; border-radius: 50%; filter: blur(60px); pointer-events: none; opacity: 0.5; animation: orb-float 14s ease-in-out infinite; }
.hero-orb.a { width: 340px; height: 340px; top: -80px; left: 8%; background: radial-gradient(circle, rgba(77,168,255,0.5), transparent 70%); }
.hero-orb.b { width: 300px; height: 300px; top: 40px; right: 6%; background: radial-gradient(circle, rgba(0,229,255,0.4), transparent 70%); animation-delay: -6s; }
@keyframes orb-float { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-24px) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-orb { animation: none; } }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 0.76rem; color: var(--gold);
  border: 1px solid var(--gold-dim); background: rgba(232,185,91,0.07); padding: 6px 14px; border-radius: 100px;
  margin-bottom: 26px; letter-spacing: 0.03em; position: relative;
}
.hero h1 { font-size: clamp(2.6rem, 7vw, 5.2rem); max-width: 900px; margin: 0 auto 22px; font-weight: 800; line-height: 1.05; position: relative; }
.hero-sub { max-width: 580px; margin: 0 auto 38px; font-size: 1.1rem; position: relative; }
.hero-cta { display: flex; gap: 14px; justify-content: center; margin-bottom: 24px; position: relative; }
.hero-badge-row { display: flex; gap: 22px; justify-content: center; flex-wrap: wrap; margin-bottom: 60px; position: relative; }
.hero-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 0.85rem; color: var(--text-muted); font-weight: 500; }
.hero-badge .icon { color: var(--aurora-a); }

.diagram {
  max-width: 940px; margin: 0 auto; border: 1px solid var(--border); border-radius: 18px;
  background: linear-gradient(180deg, rgba(20,16,9,0.6), rgba(11,9,6,0.6)); backdrop-filter: blur(6px);
  padding: 38px 30px; position: relative; overflow: hidden; box-shadow: var(--shadow-soft);
}
.diagram::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(77,168,255,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(77,168,255,0.05) 1px, transparent 1px);
  background-size: 28px 28px; pointer-events: none;
}
.diagram-row { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; position: relative; }
.diagram-box { border: 1px solid var(--border); background: rgba(11,9,6,0.85); border-radius: 11px; padding: 16px 18px; min-width: 150px; text-align: left; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.diagram-box:hover { border-color: var(--text-faint); transform: translateY(-2px); }
.diagram-box .label { font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 4px; }
.diagram-box .value { font-size: 0.92rem; font-weight: 700; }
.diagram-box.you { border-color: var(--aurora-b); box-shadow: 0 0 24px rgba(77,168,255,0.18); }
.diagram-box.you .value { background: var(--aurora-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.diagram-arrow { color: var(--text-faint); font-family: var(--font-mono); padding: 0 14px; font-size: 1.1rem; position: relative; }
.diagram-arrow.flow::after {
  content: ''; position: absolute; top: 50%; left: 0; width: 6px; height: 6px; border-radius: 50%;
  background: var(--aurora-a); box-shadow: 0 0 8px var(--aurora-a); transform: translateY(-50%); animation: flow-dot 2.4s var(--ease) infinite;
}
@keyframes flow-dot { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .diagram-arrow.flow::after { animation: none; display: none; } }
.diagram-fence { margin-top: 28px; border: 1px dashed var(--gold-dim); border-radius: 13px; padding: 24px 18px 16px; position: relative; }
.diagram-fence::before {
  content: 'STAYS INSIDE YOUR SYSTEM — NEVER SENT TO US'; position: absolute; top: -11px; left: 18px; background: var(--surface);
  padding: 0 8px; font-family: var(--font-mono); font-size: 0.66rem; color: var(--gold); letter-spacing: 0.04em;
}
.diagram-fence .diagram-row { gap: 12px; }

.section { padding: 68px 0; border-top: 1px solid var(--border); }
.section-head { max-width: 640px; margin-bottom: 42px; }
.section-head .eyebrow { margin-bottom: 16px; }

.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.card {
  border: 1px solid var(--border); background: linear-gradient(180deg, rgba(20,16,9,0.5), rgba(11,9,6,0.5));
  border-radius: var(--radius); padding: 26px; transition: border-color .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); position: relative;
}
.card:hover { border-color: var(--aurora-b); transform: translateY(-3px); box-shadow: var(--shadow-glow); }
.card .icon-tag { font-family: var(--font-mono); font-size: 0.7rem; color: var(--aurora-a); margin-bottom: 14px; display: block; letter-spacing: 0.03em; }
.card .icon-wrap { margin-bottom: 16px; }
.card h3 { font-size: 1.06rem; margin-bottom: 8px; font-weight: 700; }
.card p { font-size: 0.9rem; margin: 0; }

.steps { counter-reset: step; }
.step { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--border); }
.step:first-child { border-top: none; }
.step-num { font-family: var(--font-mono); background: var(--aurora-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 0.85rem; font-weight: 700; flex-shrink: 0; width: 32px; padding-top: 2px; }
.step h4 { margin-bottom: 4px; font-size: 1.02rem; font-weight: 700; }
.step p { font-size: 0.9rem; margin: 0; }

.price-card {
  border: 1px solid var(--border); background: linear-gradient(180deg, rgba(20,16,9,0.5), rgba(11,9,6,0.5));
  border-radius: var(--radius); padding: 30px; display: flex; flex-direction: column; position: relative; transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.price-card:hover { transform: translateY(-3px); }
.price-card.featured { border-color: var(--aurora-b); background: linear-gradient(180deg, rgba(77,168,255,0.09), rgba(20,16,9,0.6)); animation: price-glow 4s ease-in-out infinite; }
@keyframes price-glow { 0%, 100% { box-shadow: 0 0 50px rgba(77,168,255,0.16); } 50% { box-shadow: 0 0 66px rgba(77,168,255,0.28); } }
@media (prefers-reduced-motion: reduce) { .price-card.featured { animation: none; box-shadow: 0 0 50px rgba(77,168,255,0.16); } }
.price-card.featured::before {
  content: 'FREE FOR 30 DAYS'; position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: linear-gradient(135deg, var(--spark), var(--aurora-b)); color: #fff;
  box-shadow: 0 4px 18px rgba(255,61,154,0.45);
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 12px; border-radius: 100px;
}
.price-card .amount { font-family: var(--font-body); font-weight: 800; font-size: 2.1rem; margin: 10px 0; }
.price-card .amount span { font-size: 0.95rem; color: var(--text-muted); font-weight: 500; }
.price-list { list-style: none; padding: 0; margin: 18px 0 24px; flex-grow: 1; }

.cost-section { padding-bottom: 20px; }
.cost-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; margin-top: 34px; }
.cost-stat { text-align: center; padding: 0 12px; }
.cost-number {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  background: var(--aurora-gradient); -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
}
.cost-label { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; max-width: 280px; margin: 0 auto; }
.cost-footnote { text-align: center; margin-top: 40px; font-size: 1.02rem; font-weight: 600; color: var(--text); }

/* ---------- Interactive role preview ---------- */
.preview-shell { max-width: 780px; margin: 0 auto; }
.preview-tabs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.preview-tab {
  background: rgba(237,239,247,0.04); border: 1px solid var(--border); color: var(--text-muted);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.02em;
  padding: 7px 13px; border-radius: 100px; cursor: pointer; transition: all .2s var(--ease);
}
.preview-tab:hover { color: var(--text); border-color: var(--aurora-b); }
.preview-tab.active {
  background: linear-gradient(135deg, var(--aurora-a), var(--aurora-b));
  color: #050A10; border-color: transparent; font-weight: 700;
}
.preview-stage {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px; min-height: 300px; display: flex; flex-direction: column;
}
.preview-business {
  font-family: var(--font-mono); font-size: 0.68rem; color: var(--text-faint);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 16px;
  padding-bottom: 12px; border-bottom: 1px solid var(--border);
}
.preview-chat { display: flex; flex-direction: column; gap: 10px; flex-grow: 1; }
.preview-msg {
  max-width: 82%; padding: 11px 15px; border-radius: 13px; font-size: 0.92rem; line-height: 1.55;
  animation: preview-msg-in .4s var(--ease);
}
.preview-msg.customer { background: rgba(237,239,247,0.06); border: 1px solid var(--border); align-self: flex-end; }
.preview-msg.agent {
  background: linear-gradient(135deg, rgba(0,229,255,0.13), rgba(77,168,255,0.13));
  border: 1px solid rgba(77,168,255,0.3); align-self: flex-start;
}
@keyframes preview-msg-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .preview-msg { animation: none; } }
.preview-note {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 0.85rem; color: var(--gold); line-height: 1.6; min-height: 1.2em;
}

.analogy-box {
  max-width: 720px; margin: 0 auto 44px; padding: 22px 26px; border-radius: 14px;
  background: rgba(77,168,255,0.06); border: 1px solid rgba(77,168,255,0.2);
}
.analogy-box p { color: var(--text-muted); font-size: 0.98rem; line-height: 1.75; margin: 0 0 12px; }
.analogy-box p:last-child { margin-bottom: 0; }
.analogy-box strong { color: var(--text); }
.not-technical-badge {
  display: flex; align-items: center; gap: 8px; color: var(--aurora-a) !important;
  font-weight: 600; font-size: 0.9rem !important;
}
.not-technical-badge .icon { stroke: var(--aurora-a); flex-shrink: 0; }
.price-list li { font-size: 0.88rem; color: var(--text-muted); padding: 7px 0 7px 22px; border-top: 1px solid var(--border); position: relative; }
.price-list li:first-child { border-top: none; }
.price-list li::before { content: ''; position: absolute; left: 0; top: 13px; width: 12px; height: 8px; border-left: 2px solid var(--aurora-a); border-bottom: 2px solid var(--aurora-a); transform: rotate(-45deg); }

.footer { border-top: 1px solid var(--border); padding: 34px 0; color: var(--text-faint); font-size: 0.85rem; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; }

.auth-shell { min-height: 100vh; display: flex; }
.auth-visual {
  flex: 1; position: relative; display: flex; flex-direction: column; justify-content: center; padding: 60px;
  background: radial-gradient(ellipse 700px 500px at 30% 20%, rgba(77,168,255,0.22), transparent 60%), radial-gradient(ellipse 600px 500px at 80% 80%, rgba(0,229,255,0.14), transparent 55%), var(--surface);
  border-right: 1px solid var(--border); overflow: hidden;
}
.auth-visual::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(rgba(77,168,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(77,168,255,0.06) 1px, transparent 1px);
  background-size: 36px 36px; mask-image: radial-gradient(ellipse 600px 600px at 50% 50%, black, transparent);
}
.auth-visual .seal-big { width: 88px; height: 88px; margin-bottom: 32px; position: relative; }
.auth-visual .seal-big svg { width: 100%; height: 100%; }
.auth-visual h2 { font-size: 1.7rem; max-width: 380px; position: relative; }
.auth-visual p { max-width: 360px; font-size: 0.98rem; position: relative; }
.auth-visual .auth-points { list-style: none; padding: 0; margin: 28px 0 0; position: relative; }
.auth-visual .auth-points li { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--text-muted); margin-bottom: 12px; }
.auth-visual .auth-points .icon { width: 18px; height: 18px; color: var(--aurora-a); }
.auth-form-side { flex: 1; display: flex; align-items: center; justify-content: center; padding: 24px; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h2 { margin-bottom: 6px; }
.auth-card .sub { font-size: 0.88rem; margin-bottom: 28px; }

.field { margin-bottom: 16px; }
.field label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 6px; font-family: var(--font-mono); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--ink); border: 1px solid var(--border); border-radius: 8px; padding: 11px 12px;
  color: var(--text); font-family: var(--font-body); font-size: 0.94rem; transition: border-color .2s, box-shadow .2s;
}
.field textarea { resize: vertical; min-height: 90px; font-family: var(--font-mono); font-size: 0.85rem; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--aurora-b); box-shadow: 0 0 0 3px rgba(77,168,255,0.15); }
.field .hint { font-size: 0.78rem; color: var(--text-faint); margin-top: 5px; }
.form-error { background: rgba(77,168,255,0.08); border: 1px solid rgba(77,168,255,0.3); color: var(--danger); padding: 10px 14px; border-radius: 8px; font-size: 0.85rem; margin-bottom: 16px; display: none; }
.form-error.show { display: block; }
/* Success state — the same box reused for good news. Without this, a
   "your password was changed" message renders in red error styling,
   telling the user something went wrong when it actually went right. */
.form-error.ok {
  background: rgba(0,229,255,0.08);
  border-color: rgba(0,229,255,0.35);
  color: var(--aurora-a);
}
.auth-switch { text-align: center; font-size: 0.88rem; margin-top: 20px; color: var(--text-muted); }
.auth-switch a { color: var(--aurora-a); font-weight: 700; }
@media (max-width: 860px) { .auth-visual { display: none; } }

.app-shell { display: flex; min-height: 100vh; }
.sidebar { width: 244px; border-right: 1px solid var(--border); padding: 24px 16px; flex-shrink: 0; display: flex; flex-direction: column; background: rgba(11,9,6,0.4); }
.sidebar-brand { padding: 0 8px 24px; display: flex; align-items: center; gap: 9px; }
.side-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; margin-bottom: 2px; transition: background .2s, color .2s; }
.side-link:hover { background: var(--surface-raised); color: var(--text); }
.side-link.active { background: var(--surface-raised); color: var(--text); border: 1px solid var(--border); }
.sidebar-foot { margin-top: auto; font-size: 0.78rem; color: var(--text-faint); padding: 0 8px; }
.main { flex-grow: 1; padding: 32px 40px; max-width: 980px; }
.page-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.page-head h1 { font-size: 1.6rem; margin: 0; }

.empty-state { border: 1px dashed var(--border); border-radius: 14px; padding: 56px 24px; text-align: center; position: relative; overflow: hidden; }
.empty-state .icon-wrap { margin: 0 auto 18px; width: 56px; height: 56px; }
.empty-state .icon-wrap .icon { width: 26px; height: 26px; }
.empty-state h3 { margin-bottom: 8px; }
.empty-state p { max-width: 340px; margin: 0 auto 20px; }

.agent-card {
  border: 1px solid var(--border); background: linear-gradient(180deg, rgba(20,16,9,0.5), rgba(11,9,6,0.5)); border-radius: var(--radius);
  padding: 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; flex-wrap: wrap; transition: border-color .2s, transform .2s;
}
.agent-card:hover { border-color: var(--text-faint); transform: translateY(-1px); }
.agent-card .agent-info { display: flex; align-items: center; gap: 14px; }
.agent-avatar { width: 44px; height: 44px; border-radius: 11px; background: var(--aurora-gradient-soft); display: flex; align-items: center; justify-content: center; color: var(--aurora-a); flex-shrink: 0; border: 1px solid rgba(77,168,255,0.25); }
.agent-avatar .icon { width: 20px; height: 20px; }
.agent-name { font-weight: 700; font-size: 0.98rem; }
.agent-meta { font-size: 0.8rem; color: var(--text-faint); font-family: var(--font-mono); }
.status-pill { font-family: var(--font-mono); font-size: 0.72rem; padding: 4px 11px; border-radius: 100px; display: inline-flex; align-items: center; gap: 6px; }
.status-pill.live { color: var(--aurora-a); background: rgba(0,229,255,0.1); }
.status-pill.paused { color: var(--text-faint); background: rgba(147,160,194,0.1); }
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-pill.live .dot { animation: pulse-dot 1.8s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .status-pill.live .dot { animation: none; } }
.agent-actions { display: flex; gap: 8px; }

.live-indicator { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.05em; color: var(--aurora-a); background: rgba(0,229,255,0.1); border: 1px solid rgba(0,229,255,0.25); padding: 5px 10px; border-radius: 100px; }
.live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--aurora-a); box-shadow: 0 0 6px var(--aurora-a); animation: pulse-dot 1.6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

.wizard-progress { display: flex; gap: 8px; margin-bottom: 36px; }
.wizard-progress .seg { flex: 1; height: 4px; border-radius: 4px; background: var(--border); transition: background .3s var(--ease); }
.wizard-progress .seg.done { background: var(--aurora-gradient); }
.wizard-panel { border: 1px solid var(--border); background: linear-gradient(180deg, rgba(20,16,9,0.5), rgba(11,9,6,0.5)); border-radius: 16px; padding: 36px; }
.wizard-panel h2 { font-size: 1.32rem; margin-bottom: 6px; }
.wizard-panel .sub { font-size: 0.9rem; margin-bottom: 28px; }
.role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 8px; }
.role-opt { border: 1px solid var(--border); border-radius: 11px; padding: 18px 14px; cursor: pointer; text-align: left; background: var(--ink); transition: all .2s var(--ease); }
.role-opt:hover { border-color: var(--text-faint); transform: translateY(-2px); }
.role-opt.selected { border-color: var(--aurora-b); background: rgba(77,168,255,0.08); box-shadow: 0 0 0 1px var(--aurora-b) inset; }
.role-opt .icon-wrap { width: 36px; height: 36px; margin-bottom: 10px; }
.role-opt .icon-wrap .icon { width: 18px; height: 18px; }
.role-opt .name { font-weight: 700; font-size: 0.92rem; display: block; margin-bottom: 3px; }
.role-opt .desc { font-size: 0.78rem; color: var(--text-faint); }
.role-opt { position: relative; }
.role-dot { position: absolute; top: 14px; right: 14px; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 8px var(--dot-glow, transparent); }
.wizard-nav { display: flex; justify-content: space-between; margin-top: 32px; }

.orb-stage {
  width: 100%; height: 260px; position: relative;
  border-radius: 18px; border: 1px solid var(--border);
  background: radial-gradient(circle at 50% 40%, rgba(77,168,255,0.08), var(--surface) 70%);
  margin-bottom: 24px; overflow: hidden; display: flex; align-items: center; justify-content: center;
}
#orb-canvas { width: 100%; height: 100%; display: block; }
.orb-caption {
  position: absolute; bottom: 18px; left: 0; right: 0; text-align: center;
  pointer-events: none; display: flex; flex-direction: column; gap: 3px;
}
.orb-name { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; color: var(--text); }
.orb-role { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.04em; }

.conn-test { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: 0.85rem; font-family: var(--font-mono); }
.conn-test .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); }
.conn-test.ok .dot { background: var(--aurora-a); }
.conn-test.bad .dot { background: var(--danger); }

.code-block { background: var(--ink); border: 1px solid var(--border); border-radius: 11px; padding: 18px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--aurora-a); overflow-x: auto; white-space: pre; position: relative; }
.copy-btn { position: absolute; top: 10px; right: 10px; background: var(--surface-raised); border: 1px solid var(--border); color: var(--text-muted); font-size: 0.75rem; padding: 5px 10px; border-radius: 6px; cursor: pointer; font-family: var(--font-body); transition: color .2s, border-color .2s; }
.copy-btn:hover { color: var(--text); border-color: var(--aurora-b); }

.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(0); background: var(--surface-raised); border: 1px solid var(--aurora-b);
  color: var(--text); padding: 12px 20px; border-radius: 9px; font-size: 0.88rem; z-index: 1000; opacity: 0; pointer-events: none;
  transition: opacity .25s var(--ease), transform .25s var(--ease); box-shadow: 0 8px 30px rgba(77,168,255,0.2);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-6px); }

@media (max-width: 780px) {
  .app-shell { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: row; overflow-x: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .sidebar-foot { display: none; }
  .main { padding: 24px 18px; }
  .diagram-arrow { transform: rotate(90deg); padding: 8px 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; animation: none !important; } }

/* ================= "WATCH IT THINK" ================= */
.tv-shell { display: grid; grid-template-columns: 260px 1fr; gap: 22px; max-width: 900px; margin: 0 auto; }
.tv-steps { display: flex; flex-direction: column; gap: 7px; }
.tv-step {
  display: flex; align-items: center; gap: 11px; text-align: left; cursor: pointer;
  background: rgba(237,239,247,.03); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px; color: var(--text-muted);
  font-family: inherit; font-size: 0.86rem;
  /* Transition specific properties, NOT `all`. Animating `color` here
     left the freshly-clicked step showing muted grey text on a bright
     gradient — unreadable, and the same class of contrast bug as the
     nav button. Colour now switches instantly and is always correct;
     only the decorative properties animate. */
  transition: background .28s var(--ease), border-color .28s var(--ease), box-shadow .28s var(--ease);
}
.tv-step:hover { border-color: rgba(77,168,255,.45); color: var(--text); }
.tv-step-n {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700;
  background: rgba(237,239,247,.07); color: var(--text-faint); transition: background .28s var(--ease);
}
.tv-step.done .tv-step-n { background: rgba(0,229,255,.18); color: var(--aurora-a); }
.tv-step.active {
  border-color: transparent; color: #050A10; font-weight: 700;
  background: linear-gradient(135deg, var(--aurora-a), var(--aurora-b));
  box-shadow: 0 6px 22px rgba(77,168,255,.3);
}
.tv-step.active .tv-step-n { background: rgba(6,17,23,.22); color: #050A10; }

.tv-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px; min-height: 300px; display: flex; flex-direction: column;
}
.tv-stage { flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.tv-stage.tv-in { animation: tv-fade .5s var(--ease); }
@keyframes tv-fade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.tv-detail {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 0.87rem; color: var(--text-muted); line-height: 1.6; min-height: 2.6em;
}

.tv-bubble { max-width: 88%; padding: 12px 16px; border-radius: 13px; font-size: 0.93rem; line-height: 1.55; }
.tv-customer { align-self: flex-end; background: rgba(237,239,247,.07); border: 1px solid var(--border); }
.tv-agent { align-self: flex-start; background: linear-gradient(135deg, rgba(0,229,255,.14), rgba(77,168,255,.14)); border: 1px solid rgba(77,168,255,.32); }

.tv-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tv-lane-h { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .1em; color: var(--aurora-a); margin-bottom: 7px; }
.tv-chip { background: rgba(237,239,247,.04); border: 1px solid var(--border); border-radius: 7px; padding: 7px 10px; font-size: 0.76rem; color: var(--text-muted); margin-bottom: 6px; }

.tv-rank-row { display: flex; align-items: center; gap: 11px; margin-bottom: 11px; }
.tv-bar { height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--aurora-a), var(--aurora-b)); flex-shrink: 0; animation: tv-grow .7s var(--ease); }
@keyframes tv-grow { from { width: 0 !important; } }
.tv-rank-l { font-size: 0.78rem; color: var(--text-muted); }

.tv-code { font-family: var(--font-mono); font-size: 0.78rem; line-height: 2; color: var(--text-muted); background: var(--ink); border: 1px solid var(--border); border-radius: 10px; padding: 15px 17px; }
.tv-c-key { color: var(--aurora-b); }

.tv-capture { background: rgba(0,229,255,.06); border: 1px solid rgba(0,229,255,.3); border-radius: 12px; padding: 15px 17px; }
.tv-cap-h { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: .1em; color: var(--aurora-a); margin-bottom: 10px; }
.tv-cap-r { display: flex; justify-content: space-between; padding: 5px 0; font-size: 0.86rem; color: var(--text-muted); }
.tv-cap-r b { color: var(--text); }

@media (max-width: 760px) { .tv-shell { grid-template-columns: 1fr; } .tv-lanes { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .tv-stage.tv-in, .tv-bar { animation: none; } }

/* Cursor light — atmosphere only, never intercepts clicks */
#cursor-glow {
  position: fixed; top: 0; left: 0; width: 440px; height: 440px; pointer-events: none;
  z-index: 0; border-radius: 50%; opacity: .5;
  background: radial-gradient(circle, rgba(77,168,255,.13), rgba(0,229,255,.05) 45%, transparent 70%);
}

/* ================= INSIDE THE APP ================= */
.ia-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }
.ia-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.ia-card:hover { border-color: rgba(77,168,255,.45); transform: translateY(-3px); }
.ia-wide { grid-column: 1 / -1; background: linear-gradient(140deg, rgba(77,168,255,.08), rgba(0,229,255,.05)); border-color: rgba(77,168,255,.28); }
.ia-tag { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--aurora-a); margin-bottom: 10px; }
.ia-card h3 { font-size: 1.12rem; margin: 0 0 9px; }
.ia-card p { color: var(--text-muted); font-size: .92rem; line-height: 1.65; margin: 0 0 14px; }
.ia-demo { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ia-msg { max-width: 76%; padding: 10px 14px; border-radius: 13px; font-size: .88rem; line-height: 1.5; }
.ia-you { align-self: flex-end; background: rgba(237,239,247,.07); border: 1px solid var(--border); }
.ia-bot { align-self: flex-start; background: linear-gradient(135deg, rgba(0,229,255,.14), rgba(77,168,255,.14)); border: 1px solid rgba(77,168,255,.3); }
.ia-cap { align-self: flex-start; display: flex; align-items: center; gap: 11px; background: rgba(0,229,255,.07); border: 1px solid rgba(0,229,255,.28); border-radius: 10px; padding: 9px 13px; font-size: .85rem; color: var(--text); }
.ia-cap-h { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em; color: var(--aurora-a); }
.ia-quote { border-left: 2px solid var(--aurora-b); padding: 4px 0 4px 14px; font-size: .88rem; line-height: 1.65; color: var(--text); font-style: italic; }
@media (prefers-reduced-motion: reduce) { .ia-card:hover { transform: none; } }

.price-annual {
  font-size: .88rem; color: var(--aurora-a); margin: -6px 0 14px;
  font-weight: 600; letter-spacing: .01em;
}

/* ---------- "Run the app" instructions on the deploy page ---------- */
.run-box { background: var(--ink); border: 1px solid var(--border); border-left: 3px solid var(--aurora-a); border-radius: 10px; padding: 16px 18px; margin-top: 12px; }
.run-box-h { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .1em; color: var(--aurora-a); margin-bottom: 10px; }
.run-box p { font-size: .86rem; color: var(--text-muted); margin: 0 0 10px; }
.run-cmd {
  font-family: var(--font-mono); font-size: .82rem; color: var(--text);
  background: rgba(237,239,247,.05); border: 1px solid var(--border);
  border-radius: 6px; padding: 9px 12px; margin-bottom: 7px;
  user-select: all; overflow-x: auto; white-space: nowrap;
}
.run-note { font-size: .78rem !important; color: var(--text-faint) !important; margin: 8px 0 0 !important; }

.hero-tagline {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-style: italic; font-weight: 400;
  font-size: clamp(1rem, 2.1vw, 1.35rem);
  background: linear-gradient(110deg, var(--aurora-a), var(--aurora-b), var(--spark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  max-width: 720px; margin: 0 auto 20px; position: relative;
}


/* =====================================================================
   SCROLL-DRIVEN MOTION
   Built on animation-timeline, which runs on the browser's compositor
   thread rather than in JavaScript. That means the motion stays smooth
   even while the page is busy, and it costs no JS at all.

   Everything sits inside @supports, so browsers without it simply see
   the page with no motion rather than a broken layout. And every
   effect is switched off entirely under prefers-reduced-motion —
   motion this strong genuinely makes some people unwell.
===================================================================== */

/* A hairline at the very top that fills as you read down the page. */
.read-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 200;
  transform-origin: 0 50%; transform: scaleX(0);
  background: linear-gradient(90deg, var(--aurora-a), var(--aurora-b) 55%, var(--spark));
  pointer-events: none;
}

@supports (animation-timeline: scroll()) {
  @keyframes read-fill { to { transform: scaleX(1); } }
  .read-progress {
    animation: read-fill linear both;
    animation-timeline: scroll(root block);
  }

  /* Sections rise, fade and settle as they enter the viewport. The
     range stops at 45% so content is fully readable well before it
     reaches the middle of the screen — an effect that finishes late
     makes people feel they are chasing the text. */
  @keyframes rise-in {
    from { opacity: 0; transform: translateY(38px) scale(.985); }
    to   { opacity: 1; transform: none; }
  }
  .sd-rise {
    animation: rise-in linear both;
    animation-timeline: view();
    animation-range: entry 5% cover 45%;
  }

  /* Letters of the headline arrive one after another. Each span gets
     its own slightly later range, so the word assembles itself. */
  @keyframes letter-drop {
    from { opacity: 0; transform: translateY(-0.35em) rotate(-6deg); font-variation-settings: 'wght' 400; }
    to   { opacity: 1; transform: none; font-variation-settings: 'wght' 800; }
  }

  /* The signature effect: the headline physically gains weight as you
     scroll past it. Only a variable font can do this — with static
     weights it would jump between files instead of flowing. */
  @keyframes weight-swell {
    from { font-variation-settings: 'wght' 420; letter-spacing: .012em; }
    to   { font-variation-settings: 'wght' 860; letter-spacing: -.014em; }
  }
  .sd-weight {
    animation: weight-swell linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 60%;
  }

  /* Layers drift at different speeds to give the page real depth. */
  @keyframes drift-slow { to { transform: translateY(-34px); } }
  @keyframes drift-fast { to { transform: translateY(-84px); } }
  .sd-parallax-slow { animation: drift-slow linear both; animation-timeline: scroll(root block); }
  .sd-parallax-fast { animation: drift-fast linear both; animation-timeline: scroll(root block); }
}

/* Kinetic headline — letters animate in even without scroll timelines,
   using a plain staggered delay as the baseline. */
/* Each word stays whole; only the letters inside it animate. */
.kin-word { display: inline-block; white-space: nowrap; }
.kinetic span {
  display: inline-block;
  animation: kin-in .62s cubic-bezier(0.16, 1, 0.3, 1) both;
  animation-delay: calc(var(--i) * 38ms);
}
@keyframes kin-in {
  from { opacity: 0; transform: translateY(.42em) rotate(-4deg); }
  to   { opacity: 1; transform: none; }
}

/* Letters lift and thicken as the cursor passes over them. */
.kinetic span:hover {
  font-variation-settings: 'wght' 900;
  transform: translateY(-.07em);
  transition: font-variation-settings .28s var(--ease), transform .28s var(--ease);
}

/* Bento grid — the 2026 replacement for the identical three-column row. */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.bento-cell {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px; position: relative; overflow: hidden;
  transition: border-color .35s var(--ease), transform .35s var(--ease);
}
.bento-cell:hover { border-color: rgba(77,168,255,.5); transform: translateY(-3px); }
.bento-cell::after {
  content: ''; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(77,168,255,.14), transparent 62%);
  transition: opacity .35s var(--ease);
}
.bento-cell:hover::after { opacity: 1; }
.bento-wide { grid-column: span 4; }
.bento-half { grid-column: span 3; }
.bento-third { grid-column: span 2; }
.bento-cell h3 { font-size: 1.05rem; margin: 0 0 8px; }
.bento-cell p { font-size: .88rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
.bento-stat {
  font-family: var(--font-display); font-weight: 800; font-size: 2.3rem; line-height: 1;
  background: linear-gradient(120deg, var(--aurora-a), var(--aurora-b));
  -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 6px;
}
@media (max-width: 860px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-wide, .bento-half, .bento-third { grid-column: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  .read-progress { display: none; }
  .kinetic span { animation: none; }
  .sd-rise, .sd-weight, .sd-parallax-slow, .sd-parallax-fast { animation: none !important; }
}

/* ---------- Live control bar on the analytics page ---------- */
.live-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(77,168,255,.10), rgba(0,229,255,.07));
  border: 1px solid rgba(77,168,255,.28); border-radius: 14px;
  padding: 15px 18px; margin-bottom: 12px;
}
.live-bar-left { display: flex; align-items: center; gap: 13px; }
.live-bar-right { display: flex; gap: 8px; flex-shrink: 0; }
.live-dot-lg {
  width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  background: var(--text-faint); box-shadow: 0 0 0 0 rgba(0,229,255,.5);
}
.live-dot-lg.on { background: var(--aurora-a); animation: live-pulse 2s ease-in-out infinite; }
.live-dot-lg.off { background: var(--danger); }
@keyframes live-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(0,229,255,.5); }
  50%     { box-shadow: 0 0 0 8px rgba(0,229,255,0); }
}
.live-title { font-weight: 700; font-size: .98rem; color: var(--text); }
.live-sub { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.live-note { font-size: .82rem; color: var(--gold); margin-bottom: 20px; min-height: 1.1em; }
@media (max-width: 620px) {
  .live-bar { flex-direction: column; align-items: stretch; }
  .live-bar-right { justify-content: stretch; }
  .live-bar-right .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .live-dot-lg.on { animation: none; } }

/* =====================================================================
   FOUNDER MESSAGE — a full stage, not a strip
   Sits high on the front page and stays there. Built to be the first
   thing that holds someone's attention, with real depth rather than a
   flat box: a rotating aurora behind it, a card that tilts slightly
   toward the cursor, and lines that arrive in sequence.
===================================================================== */
.ceo-stage {
  position: relative; overflow: hidden;
  padding: 54px 24px 58px;
  display: flex; align-items: center; justify-content: center;
  border-bottom: 1px solid rgba(77,168,255,.22);
  perspective: 1400px;
}

/* Slowly rotating colour field behind the card. */
.ceo-aurora {
  position: absolute; inset: -45%; pointer-events: none;
  filter: blur(85px); opacity: .55;
  background:
    radial-gradient(30% 30% at 22% 30%, rgba(77,168,255,.85), transparent 70%),
    radial-gradient(28% 28% at 76% 62%, rgba(0,229,255,.7), transparent 70%),
    radial-gradient(26% 26% at 52% 18%, rgba(255,61,154,.6), transparent 70%),
    radial-gradient(24% 24% at 38% 78%, rgba(232,185,91,.45), transparent 70%);
  animation: ceo-aurora-spin 34s linear infinite;
}
@keyframes ceo-aurora-spin {
  0%   { transform: rotate(0deg) scale(1.05); }
  50%  { transform: rotate(180deg) scale(1.18); }
  100% { transform: rotate(360deg) scale(1.05); }
}

.ceo-card {
  position: relative; z-index: 2; max-width: 780px; width: 100%;
  border-radius: 24px; padding: 2px;
  background: linear-gradient(135deg, rgba(0,229,255,.55), rgba(77,168,255,.55) 45%, rgba(255,61,154,.5));
  box-shadow: 0 34px 90px rgba(0,0,0,.55), 0 0 70px rgba(77,168,255,.22);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  animation: ceo-card-in 1s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ceo-card-in {
  from { opacity: 0; transform: translateY(30px) rotateX(9deg) scale(.965); }
  to   { opacity: 1; transform: none; }
}

/* A soft light that follows the cursor across the card face. */
.ceo-card-glow {
  position: absolute; inset: 0; border-radius: 24px; pointer-events: none; opacity: 0;
  background: radial-gradient(460px circle at var(--cx, 50%) var(--cy, 50%), rgba(255,255,255,.10), transparent 62%);
  transition: opacity .4s ease;
}
.ceo-card:hover .ceo-card-glow { opacity: 1; }

.ceo-card-inner {
  background: linear-gradient(168deg, #14100A 0%, #000000 100%);
  border-radius: 22px; padding: 42px 46px 36px; text-align: center;
}

.ceo-badge {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .18em;
  color: var(--gold); margin-bottom: 26px;
  padding: 7px 16px; border-radius: 100px;
  background: rgba(232,185,91,.09); border: 1px solid rgba(232,185,91,.3);
}
.ceo-badge-seal { width: 17px; height: 17px; display: block; }
.ceo-badge-seal svg { width: 100%; height: 100%; }

.ceo-line {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 600; line-height: 1.5; margin: 0 0 14px;
  font-size: clamp(1.12rem, 2.5vw, 1.62rem);
  color: var(--text);
  animation: ceo-line-in .85s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ceo-line-1 { animation-delay: .18s; }
.ceo-line-2 { animation-delay: .34s; }
.ceo-line-3 { animation-delay: .50s; }
@keyframes ceo-line-in {
  from { opacity: 0; transform: translateY(16px); filter: blur(5px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* The privacy promise is the line that matters most — it gets the colour. */
.ceo-line-2 {
  background: linear-gradient(110deg, var(--aurora-a), var(--aurora-b) 55%, var(--spark));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  font-weight: 700;
}
.ceo-line-2 em { font-style: italic; }

.ceo-goodluck {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(1rem, 2vw, 1.28rem); color: var(--text-muted);
  margin: 20px 0 0;
  animation: ceo-line-in .85s cubic-bezier(0.16, 1, 0.3, 1) both; animation-delay: .66s;
}

.ceo-rule {
  width: 72px; height: 1px; margin: 30px auto 20px;
  background: linear-gradient(90deg, transparent, rgba(77,168,255,.75), transparent);
}
.ceo-name {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-style: italic; font-weight: 700; font-size: 1.55rem;
  color: var(--text); margin-bottom: 5px;
}
.ceo-role {
  font-family: var(--font-mono); font-size: .66rem;
  letter-spacing: .15em; text-transform: uppercase; color: var(--text-faint);
}

@media (max-width: 620px) {
  .ceo-stage { padding: 34px 16px 38px; }
  .ceo-card-inner { padding: 30px 22px 26px; }
  .ceo-name { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ceo-aurora { animation: none; }
  .ceo-card, .ceo-line, .ceo-goodluck { animation: none; }
  .ceo-card { transition: none; }
}

/* =====================================================================
   COLOUR PASS
   The palette was carrying most of the page on two colours. These give
   each area its own identity while staying in the same family, so the
   site reads as one thing rather than a rainbow.
===================================================================== */

/* Section eyebrows cycle through the palette down the page. */
#inside-app .eyebrow { color: var(--aurora-a); }
#bento-section .eyebrow { color: var(--spark); }
#think-section .eyebrow { color: var(--aurora-b); }
#how .eyebrow { color: var(--gold); }

#inside-app .nav-dot { background: var(--aurora-a); box-shadow: 0 0 8px var(--aurora-a); }
#bento-section .nav-dot { background: var(--spark); box-shadow: 0 0 8px var(--spark); }
#think-section .nav-dot { background: var(--aurora-b); box-shadow: 0 0 8px var(--aurora-b); }
#how .nav-dot { background: var(--gold); box-shadow: 0 0 8px var(--gold); }

/* Each bento cell gets its own accent so the grid has rhythm. */
.bento-cell:nth-child(1) { border-top: 2px solid rgba(0,229,255,.55); }
.bento-cell:nth-child(2) { border-top: 2px solid rgba(255,61,154,.55); }
.bento-cell:nth-child(3) { border-top: 2px solid rgba(77,168,255,.55); }
.bento-cell:nth-child(4) { border-top: 2px solid rgba(232,185,91,.55); }
.bento-cell:nth-child(5) { border-top: 2px solid rgba(92,200,255,.55); }
.bento-cell:nth-child(2) .bento-stat { background: linear-gradient(120deg, var(--spark), var(--aurora-b)); -webkit-background-clip: text; background-clip: text; }
.bento-cell:nth-child(3) .bento-stat { background: linear-gradient(120deg, var(--aurora-b), var(--aurora-a)); -webkit-background-clip: text; background-clip: text; }

/* A faint moving grain over the whole page so flat areas have texture
   rather than looking like empty dark rectangles. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .035;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.5) 0 1px, transparent 1px 3px);
  mix-blend-mode: overlay;
}

/* Section dividers pick up the palette instead of flat grey. */
.section + .section { border-top: 1px solid transparent; border-image: linear-gradient(90deg, transparent, rgba(77,168,255,.28), rgba(0,229,255,.22), transparent) 1; }

@media (prefers-reduced-motion: reduce) { body::after { display: none; } }

/* =====================================================================
   LIVING BACKGROUND
   The page colour is never still — a slow, continuous hue rotation
   rather than hard jumps. Deliberately smooth: a background that
   changed abruptly every second would be exhausting to read against,
   and genuinely unsafe for people sensitive to flashing.
===================================================================== */
.living-bg {
  position: fixed; inset: -30%; z-index: 0; pointer-events: none;
  filter: blur(110px); opacity: .34;
  background:
    radial-gradient(26% 26% at 20% 25%, #6FB8FF, transparent 70%),
    radial-gradient(24% 24% at 78% 30%, #4DA8FF, transparent 70%),
    radial-gradient(24% 24% at 62% 74%, #00E5FF, transparent 70%),
    radial-gradient(22% 22% at 30% 78%, #00E5FF, transparent 70%);
  animation: living-hue 18s linear infinite, living-drift 46s ease-in-out infinite alternate;
}
@keyframes living-hue { from { filter: blur(110px) hue-rotate(0deg); } to { filter: blur(110px) hue-rotate(360deg); } }
@keyframes living-drift {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to   { transform: translate3d(4%, 3%, 0) scale(1.16); }
}
/* Lifts real content above the background layers.
   IMPORTANT: the background layers must be excluded. They rely on
   position:fixed, and this rule was overriding it to relative — which
   turned them into ordinary blocks occupying layout space and pushed
   the entire page below the fold. */
/* Lifts real content above the background layers.
   Anything that relies on position:fixed must be excluded, or this
   rule silently converts it to relative and it starts occupying
   layout space. That already broke the space layers once; the splash
   is the same trap. */
body > *:not(.space-layer):not(.splash) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .living-bg { animation: none; opacity: .2; }
  .founder-line { animation: none; }
}

/* ---------- WhatsApp connection panel ---------- */
.wa-connect {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(120deg, rgba(37,211,102,.10), rgba(232,177,92,.06));
  border: 1px solid rgba(37,211,102,.28); border-radius: 14px;
  padding: 15px 18px; margin-bottom: 10px;
}
.wa-connect-left { display: flex; align-items: center; gap: 13px; }
.wa-icon { font-size: 22px; }
.wa-title { font-weight: 700; font-size: .98rem; color: var(--text); }
.wa-sub { font-size: .8rem; color: var(--text-muted); margin-top: 2px; }
.wa-connect-right { display: flex; gap: 8px; flex-shrink: 0; }
.wa-status { font-size: .84rem; margin-bottom: 20px; min-height: 1.1em; color: var(--text-muted); }
.wa-status.ok { color: #25D366; }
.wa-status.bad { color: var(--danger); }
@media (max-width: 620px) {
  .wa-connect { flex-direction: column; align-items: stretch; }
  .wa-connect-right { justify-content: stretch; }
  .wa-connect-right .btn { flex: 1; }
}


/* =====================================================================
   FOUNDER NOTE — folded into the hero
   It used to sit in its own full-height block above everything, which
   pushed the actual product below the fold and made the first thing a
   visitor saw a statement rather than an offer. Now it opens the hero:
   still the first words read, but as the frame around the pitch rather
   than a wall in front of it.
===================================================================== */
.founder-note {
  display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap;
  justify-content: center; margin: 0 auto 22px; padding: 9px 20px 9px 14px;
  border-radius: 100px;
  background: linear-gradient(100deg, rgba(232,177,92,.10), rgba(77,168,255,.07));
  border: 1px solid rgba(232,177,92,.3);
  animation: founder-in 1s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes founder-in { from { opacity:0; transform: translateY(-10px); } to { opacity:1; transform:none; } }
.founder-seal { width: 19px; height: 19px; flex-shrink: 0; display: block; }
.founder-seal svg { width: 100%; height: 100%; }
.founder-words {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-style: italic; font-weight: 600; font-size: clamp(.92rem, 1.8vw, 1.12rem);
  background: linear-gradient(110deg, #F7E0B0, var(--caramel) 45%, #9CC4E8 70%, var(--caramel-deep));
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: caramel-sheen 7s ease-in-out infinite;
}
@keyframes caramel-sheen {
  0%,100% { background-position: 0% 50%; }
  50%     { background-position: 100% 50%; }
}
.founder-sig {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .13em;
  text-transform: uppercase; color: var(--caramel-deep); white-space: nowrap;
  padding-left: 12px; border-left: 1px solid rgba(232,177,92,.28);
}
@media (max-width: 560px) {
  .founder-note { gap: 8px; padding: 8px 14px; }
  .founder-sig { border-left: none; padding-left: 0; width: 100%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .founder-note { animation: none; }
  .founder-words { animation: none; }
}

/* =====================================================================
   SPACE
   Depth built from layers rather than a picture: a starfield that
   drifts, a nebula that shifts hue, and a faint horizon glow. All CSS,
   so it costs nothing to load and works with no connection.
===================================================================== */
.space-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }

.space-stars {
  background-image:
    radial-gradient(1px 1px at 8% 14%, #FFF3DC, transparent),
    radial-gradient(1px 1px at 27% 62%, #FFE9C4, transparent),
    radial-gradient(1px 1px at 44% 23%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 61% 78%, #DCEEFF, transparent),
    radial-gradient(1px 1px at 73% 35%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 88% 68%, #FFEBCB, transparent),
    radial-gradient(1px 1px at 16% 88%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 52% 47%, #C9E4FF, transparent),
    radial-gradient(2px 2px at 35% 8%, rgba(255,243,220,.85), transparent),
    radial-gradient(2px 2px at 80% 20%, rgba(232,177,92,.7), transparent);
  background-size: 640px 640px;
  opacity: .5;
  animation: stars-drift 150s linear infinite;
}
@keyframes stars-drift { to { background-position: 640px 640px; } }

/* A second, closer starfield moving faster — the parallax is what
   makes it read as depth rather than wallpaper. */
.space-stars-near {
  background-image:
    radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,.9), transparent),
    radial-gradient(1.5px 1.5px at 68% 55%, rgba(232,177,92,.8), transparent),
    radial-gradient(1.5px 1.5px at 41% 80%, rgba(255,255,255,.85), transparent),
    radial-gradient(1.5px 1.5px at 90% 12%, rgba(255,224,176,.8), transparent);
  background-size: 420px 420px;
  opacity: .38;
  animation: stars-drift-near 80s linear infinite;
}
@keyframes stars-drift-near { to { background-position: -420px 420px; } }

.space-nebula {
  inset: -35%;
  filter: blur(120px); opacity: .3;
  background:
    radial-gradient(26% 26% at 24% 28%, #6FB8FF, transparent 70%),
    radial-gradient(22% 22% at 74% 34%, #4DA8FF, transparent 70%),
    radial-gradient(24% 24% at 58% 76%, #00E5FF, transparent 70%),
    radial-gradient(20% 20% at 32% 80%, #00E5FF, transparent 70%);
  animation: nebula-turn 60s linear infinite;
}
@keyframes nebula-turn {
  0%   { transform: rotate(0deg) scale(1.04); filter: blur(120px) hue-rotate(0deg); }
  100% { transform: rotate(360deg) scale(1.04); filter: blur(120px) hue-rotate(360deg); }
}

/* The curve of a world below the fold. */
.space-horizon {
  top: auto; bottom: -58vh; height: 90vh; inset-inline: -10%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(232,177,92,.16), rgba(77,168,255,.07) 45%, transparent 70%);
  box-shadow: 0 -1px 90px rgba(232,177,92,.14);
  opacity: .8;
}

@media (prefers-reduced-motion: reduce) {
  .space-stars, .space-stars-near, .space-nebula { animation: none; }
}

/* ---------- "What this actually is" ---------- */
.idea-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 16px; margin-top: 26px; }
.idea-card {
  background: rgba(20,16,9,.55); border: 1px solid var(--border); border-radius: 16px;
  padding: 24px; backdrop-filter: blur(6px);
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.idea-card:hover { border-color: rgba(232,177,92,.45); transform: translateY(-3px); }
.idea-num {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  color: var(--caramel-deep); margin-bottom: 10px;
}
.idea-card h3 { font-size: 1.06rem; margin: 0 0 9px; }
.idea-card p { font-size: .89rem; color: var(--text-muted); line-height: 1.68; margin: 0; }
.idea-card strong { color: var(--caramel); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .idea-card:hover { transform: none; } }

.warn-box {
  background: rgba(232,177,92,.08); border: 1px solid rgba(232,177,92,.32);
  border-radius: 10px; padding: 13px 16px; margin-top: 14px;
  font-size: .84rem; line-height: 1.6; color: var(--text-muted);
}
.warn-box strong { color: var(--caramel); }

/* =====================================================================
   OPENING — three seconds, then it gets out of the way
   Deliberately brief and self-dismissing. An intro that has to be
   clicked away is an obstacle; one that lingers is an annoyance.
===================================================================== */
.splash {
  position: fixed; inset: 0; z-index: 99998; background: #000;
  display: flex; align-items: center; justify-content: center;
  animation: splash-out .9s ease-in-out 2.6s forwards;
}
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
.splash.done { display: none; }

.splash-stars {
  position: absolute; inset: 0; opacity: .55;
  background-image:
    radial-gradient(1px 1px at 14% 22%, #FFF3DC, transparent),
    radial-gradient(1px 1px at 38% 68%, #FFE9C4, transparent),
    radial-gradient(1px 1px at 62% 30%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 82% 74%, #DCEEFF, transparent),
    radial-gradient(2px 2px at 50% 46%, rgba(255,243,220,.9), transparent),
    radial-gradient(1px 1px at 26% 84%, #FFFFFF, transparent);
  background-size: 560px 560px;
  animation: splash-drift 30s linear infinite;
}
@keyframes splash-drift { to { background-position: 280px 280px; } }

.splash-inner { position: relative; text-align: center; padding: 0 24px; }
.splash-seal {
  display: block; width: 46px; height: 46px; margin: 0 auto 26px;
  animation: splash-seal-in 1s cubic-bezier(0.16,1,0.3,1) both;
}
.splash-seal svg { width: 100%; height: 100%; }
@keyframes splash-seal-in { from { opacity:0; transform: scale(.7) rotate(-25deg);} to { opacity:1; transform:none; } }

.splash-line {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 700; line-height: 1.24; margin: 0 0 18px;
  font-size: clamp(1.7rem, 5vw, 3.4rem);
  background: linear-gradient(105deg, #FFFDF7, #F7E0B0 32%, #9CC4E8 55%, #F5E6C8);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  /* The shine passes across once, rather than looping — it reads as a
     considered opening instead of a spinning logo. */
  animation: splash-shine 2.4s ease-out both, splash-rise 1.1s cubic-bezier(0.16,1,0.3,1) both;
}
@keyframes splash-shine { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes splash-rise { from { opacity:0; transform: translateY(18px); filter: blur(7px);} to { opacity:1; transform:none; filter:none; } }

.splash-sig {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--caramel-deep);
  animation: splash-rise 1.1s cubic-bezier(0.16,1,0.3,1) .35s both;
}

/* ---------- Hero wording ---------- */
.hero-promise {
  font-family: var(--font-display); font-style: italic; font-weight: 500;
  font-size: clamp(.94rem, 1.9vw, 1.16rem); color: var(--caramel);
  max-width: 680px; margin: 0 auto 18px;
}
.hero-headline {
  font-family: var(--font-display); font-optical-sizing: auto;
  font-weight: 700; line-height: 1.16; letter-spacing: -.01em;
  font-size: clamp(1.9rem, 5.2vw, 3.9rem);
  max-width: 980px; margin: 0 auto 22px;
  background: linear-gradient(112deg, #FFFDF7, #F5D9A8 34%, #FFE7B8 58%, #6FB8FF);
  background-size: 240% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: caramel-sheen 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .splash { animation: splash-out .3s ease 1.2s forwards; }
  .splash-stars, .splash-line, .splash-sig, .splash-seal, .hero-headline { animation: none; }
  .splash-line, .splash-sig { opacity: 1; }
}

/* =====================================================================
   THE FLOW — a vertical line you follow down the page
   The rail fills as you scroll, so progress through the explanation is
   visible rather than implied.
===================================================================== */
.flow { position: relative; max-width: 820px; margin: 0 auto; padding-left: 62px; }
.flow-rail {
  position: absolute; left: 21px; top: 12px; bottom: 12px; width: 2px;
  background: rgba(232,177,92,.16); border-radius: 2px; overflow: hidden;
}
.flow-rail-fill {
  display: block; width: 100%; height: 100%; transform-origin: 50% 0;
  background: linear-gradient(180deg, var(--caramel), var(--aurora-b), var(--aurora-a));
}
@supports (animation-timeline: view()) {
  @keyframes rail-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .flow-rail-fill {
    animation: rail-fill linear both;
    animation-timeline: view(block);
    animation-range: entry 20% cover 78%;
  }
}

.flow-step { position: relative; padding: 0 0 44px; }
.flow-step:last-child { padding-bottom: 0; }
.flow-node {
  position: absolute; left: -62px; top: 0; width: 44px; height: 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: #050A10; border: 2px solid rgba(232,177,92,.45);
  font-family: var(--font-mono); font-size: .92rem; font-weight: 700; color: var(--caramel);
  transition: border-color .35s var(--ease), box-shadow .35s var(--ease);
}
.flow-step:hover .flow-node { border-color: var(--caramel); box-shadow: 0 0 22px rgba(232,177,92,.3); }
.flow-body h3 { font-size: 1.2rem; margin: 6px 0 9px; }
.flow-body > p { color: var(--text-muted); line-height: 1.7; margin: 0 0 16px; font-size: .95rem; }
.flow-body strong { color: var(--caramel); font-weight: 600; }

.flow-visual {
  background: rgba(20,16,9,.5); border: 1px solid var(--border); border-radius: 13px;
  padding: 18px; backdrop-filter: blur(4px);
}
.fv-row, .fv-chain { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fv-chip, .fv-box {
  background: rgba(237,239,247,.05); border: 1px solid var(--border);
  border-radius: 8px; padding: 7px 13px; font-size: .84rem; color: var(--text-muted);
}
.fv-chip.fv-lit, .fv-box.fv-lit { border-color: rgba(232,177,92,.5); color: var(--caramel); background: rgba(232,177,92,.08); }
.fv-arrow { color: var(--caramel-deep); font-size: 1.05rem; }
.fv-note { font-size: .78rem; color: var(--text-faint); margin-top: 11px; font-style: italic; }

.fv-zip { font-family: var(--font-mono); font-size: .8rem; }
.fv-zip-h { color: var(--caramel); margin-bottom: 9px; font-size: .76rem; letter-spacing: .05em; }
.fv-zip-row { color: var(--text-muted); padding: 5px 0 5px 4px; display: flex; align-items: center; gap: 9px; }
.fv-ico { opacity: .8; }

.fv-split { display: flex; align-items: stretch; gap: 12px; }
.fv-half { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.fv-lbl { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--caramel-deep); margin-bottom: 3px; }
.fv-item { background: rgba(0,229,255,.07); border: 1px solid rgba(0,229,255,.22); border-radius: 6px; padding: 6px 10px; font-size: .78rem; color: var(--text); font-family: var(--font-mono); }
.fv-half.fv-dim .fv-item { background: rgba(237,239,247,.03); border-color: var(--border); color: var(--text-faint); }
.fv-barrier {
  width: 2px; background: repeating-linear-gradient(180deg, rgba(77,168,255,.6) 0 6px, transparent 6px 12px);
  position: relative; flex-shrink: 0; margin: 0 14px;
}
.fv-barrier span {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-90deg);
  white-space: nowrap; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .1em; color: #FF6B8A; text-transform: uppercase;
}
.fv-code {
  font-family: var(--font-mono); font-size: .76rem; line-height: 1.75; color: var(--aurora-a);
  background: #000; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px;
  overflow-x: auto;
}
@media (max-width: 620px) {
  .flow { padding-left: 46px; }
  .flow-rail { left: 15px; }
  .flow-node { left: -46px; width: 32px; height: 32px; font-size: .78rem; }
  .fv-split { flex-direction: column; }
  .fv-barrier { width: auto; height: 2px; margin: 10px 0;
    background: repeating-linear-gradient(90deg, rgba(77,168,255,.6) 0 6px, transparent 6px 12px); }
  .fv-barrier span { transform: translate(-50%,-50%); }
}
@media (prefers-reduced-motion: reduce) { .flow-rail-fill { animation: none; } }

/* ---------- Confirmation before creating ---------- */
.confirm-veil, .build-veil {
  position: fixed; inset: 0; z-index: 99990; display: none;
  background: rgba(0,0,0,.86); backdrop-filter: blur(9px);
  align-items: center; justify-content: center; padding: 24px;
}
.confirm-veil.open, .build-veil.open { display: flex; }
.confirm-card {
  max-width: 520px; width: 100%; text-align: center;
  background: linear-gradient(168deg, #14100A, #000); border: 1px solid rgba(232,177,92,.32);
  border-radius: 20px; padding: 34px 34px 28px;
  animation: cf-in .45s cubic-bezier(0.16,1,0.3,1);
}
@keyframes cf-in { from { opacity:0; transform: translateY(18px) scale(.97);} to { opacity:1; transform:none; } }
.confirm-eyebrow { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; color: var(--gold); margin-bottom: 12px; }
.confirm-card h2 { font-size: 1.4rem; margin: 0 0 18px; }
.confirm-facts { text-align: left; margin-bottom: 18px; }
.confirm-row { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .9rem; }
.confirm-row:last-child { border-bottom: none; }
.confirm-row span { color: var(--text-muted); }
.confirm-row b { color: var(--caramel); font-weight: 600; text-align: right; }
.confirm-note { font-size: .84rem; color: var(--text-faint); line-height: 1.6; margin: 0 0 20px; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions .btn { flex: 1; }

/* ---------- The three-second build ---------- */
.build-inner { text-align: center; max-width: 420px; }
.build-orb { position: relative; width: 92px; height: 92px; margin: 0 auto 26px; }
.build-orb span {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent;
  border-top-color: var(--caramel); animation: build-spin 1.4s linear infinite;
}
.build-orb span:nth-child(2) { inset: 11px; border-top-color: var(--aurora-b); animation-duration: 1.9s; animation-direction: reverse; }
.build-orb span:nth-child(3) { inset: 22px; border-top-color: var(--aurora-a); animation-duration: 2.4s; }
@keyframes build-spin { to { transform: rotate(360deg); } }
.build-title {
  font-family: var(--font-display); font-size: 1.3rem; color: var(--text); margin-bottom: 22px;
}
.build-steps { display: flex; flex-direction: column; gap: 11px; text-align: left; }
.build-step {
  display: flex; align-items: center; gap: 11px; font-size: .88rem;
  color: var(--text-faint); opacity: .4; transition: opacity .4s var(--ease), color .4s var(--ease);
}
.build-step.on { opacity: 1; color: var(--text); }
.bs-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex-shrink: 0;
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.build-step.on .bs-dot { background: var(--aurora-a); box-shadow: 0 0 10px rgba(0,229,255,.6); }
@media (prefers-reduced-motion: reduce) {
  .confirm-card { animation: none; }
  .build-orb span { animation: none; }
}

/* ---------- Daily report chart ---------- */
.report-panel { background: rgba(20,16,9,.5); border: 1px solid var(--border); border-radius: 14px; padding: 20px; margin-bottom: 24px; }
.report-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; }
.report-panel-title { font-weight: 700; font-size: .98rem; color: var(--text); }
.report-panel-sub { font-size: .78rem; color: var(--text-muted); margin-top: 2px; }
.chart { display: flex; align-items: flex-end; gap: 8px; height: 170px; padding-top: 18px; }
.chart-empty { color: var(--text-faint); font-size: .84rem; font-style: italic; align-self: center; margin: 0 auto; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; gap: 5px; }
.bar-val { font-family: var(--font-mono); font-size: .64rem; color: var(--text-muted); }
.bar {
  width: 100%; max-width: 34px; border-radius: 5px 5px 0 0; position: relative;
  background: linear-gradient(180deg, rgba(232,177,92,.45), rgba(232,177,92,.14));
  border: 1px solid rgba(232,177,92,.35); border-bottom: none;
  transition: filter .25s var(--ease);
}
.bar-col:hover .bar { filter: brightness(1.35); }
/* The inner fill shows what proportion actually turned into something */
.bar-cap { position: absolute; left: 0; right: 0; bottom: 0; border-radius: 0 0 4px 4px;
  background: linear-gradient(180deg, var(--aurora-a), rgba(0,229,255,.5)); opacity: .75; }
.bar-day { font-family: var(--font-mono); font-size: .6rem; color: var(--text-faint); }
.report-latest { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.rl-head { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; color: var(--caramel); margin-bottom: 12px; }
.rl-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(110px,1fr)); gap: 14px; }
.rl-grid div { display: flex; flex-direction: column; }
.rl-grid b { font-size: 1.4rem; color: var(--text); font-weight: 700; }
.rl-grid span { font-size: .74rem; color: var(--text-faint); margin-top: 2px; }

/* ---------- Privacy diagram ---------- */
.priv-diagram { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; max-width: 900px; margin: 0 auto 34px; }
.priv-side { background: rgba(20,16,9,.5); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.priv-yours { border-color: rgba(0,229,255,.35); }
.priv-ours { border-color: rgba(232,177,92,.28); }
.priv-side-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; color: var(--caramel-deep); margin-bottom: 14px; }
.priv-item { background: rgba(0,229,255,.07); border: 1px solid rgba(0,229,255,.22); border-radius: 8px; padding: 9px 12px; font-size: .84rem; color: var(--text); margin-bottom: 8px; }
.priv-count { background: rgba(232,177,92,.07); border-color: rgba(232,177,92,.25); }
.priv-empty { background: transparent; border-style: dashed; border-color: var(--border); color: var(--text-faint); font-style: italic; text-align: center; }
.priv-foot { font-size: .74rem; color: var(--text-faint); margin-top: 12px; font-style: italic; }
.priv-wall { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-width: 160px; position: relative; }
.priv-wall-line { position: absolute; top: 0; bottom: 0; width: 2px; background: repeating-linear-gradient(180deg, rgba(77,168,255,.55) 0 8px, transparent 8px 16px); }
.priv-wall-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; color: #FF6B8A; background: #000; padding: 4px 8px; border-radius: 4px; z-index: 1; }
.priv-wall-flow { display: flex; flex-direction: column; gap: 7px; z-index: 1; }
.priv-packet {
  font-family: var(--font-mono); font-size: .64rem; color: var(--aurora-a);
  background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.32);
  border-radius: 100px; padding: 4px 11px; white-space: nowrap;
  animation: packet-cross 4s ease-in-out infinite;
}
.priv-packet:nth-child(2) { animation-delay: .7s; }
.priv-packet:nth-child(3) { animation-delay: 1.4s; }
@keyframes packet-cross {
  0%, 100% { transform: translateX(-14px); opacity: .45; }
  50%      { transform: translateX(14px); opacity: 1; }
}
.priv-wall-sub { font-size: .68rem; color: var(--text-faint); text-align: center; z-index: 1; background: #000; padding: 3px 6px; }
.priv-points { display: grid; grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); gap: 14px; max-width: 900px; margin: 0 auto; }
.priv-point { background: rgba(20,16,9,.4); border-left: 2px solid var(--caramel); border-radius: 0 10px 10px 0; padding: 15px 18px; font-size: .88rem; color: var(--text-muted); line-height: 1.65; }
.priv-point b { color: var(--text); display: block; margin-bottom: 5px; }

/* ---------- The arithmetic ---------- */
.calc { max-width: 620px; margin: 0 auto 34px; background: rgba(20,16,9,.5); border: 1px solid var(--border); border-radius: 16px; padding: 24px 28px; }
.calc-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--border); font-size: .92rem; color: var(--text-muted); }
.calc-row b { color: var(--text); font-family: var(--font-mono); }
.calc-total { border-bottom: none; margin-top: 6px; padding-top: 16px; border-top: 2px solid rgba(255,61,154,.4); }
.calc-total span, .calc-total b { color: var(--spark); font-weight: 700; font-size: 1.02rem; }
.calc-cost { border-bottom: none; }
.calc-cost span, .calc-cost b { color: var(--aurora-a); font-weight: 700; }
.calc-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); font-size: .88rem; color: var(--text-muted); line-height: 1.65; }
.calc-note strong { color: var(--caramel); }
.ben-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(230px,1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.ben-card { background: rgba(20,16,9,.5); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.ben-stat { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; margin-bottom: 8px;
  background: linear-gradient(120deg, var(--caramel), var(--aurora-a)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ben-card h3 { font-size: 1rem; margin: 0 0 7px; }
.ben-card p { font-size: .86rem; color: var(--text-muted); line-height: 1.65; margin: 0; }

/* ---------- Talking to it ---------- */
.talk-demo { display: grid; grid-template-columns: 1.15fr 1fr; gap: 22px; max-width: 940px; margin: 0 auto; }
.talk-side { display: flex; flex-direction: column; gap: 11px; }
.talk-bubble { padding: 12px 16px; border-radius: 14px; font-size: .89rem; line-height: 1.6; max-width: 92%; }
.talk-you { align-self: flex-end; background: rgba(237,239,247,.06); border: 1px solid var(--border); color: var(--text-muted); }
.talk-bot { align-self: flex-start; background: linear-gradient(135deg, rgba(232,177,92,.13), rgba(77,168,255,.11)); border: 1px solid rgba(232,177,92,.3); color: var(--text); }
.talk-mic { margin-right: 5px; }
.talk-features { justify-content: center; }
.talk-feat { padding: 13px 0; border-bottom: 1px solid var(--border); }
.talk-feat:last-child { border-bottom: none; }
.talk-feat b { display: block; color: var(--caramel); font-size: .92rem; margin-bottom: 4px; }
.talk-feat span { font-size: .84rem; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 820px) {
  .priv-diagram { grid-template-columns: 1fr; }
  .priv-wall { min-height: 110px; }
  .priv-wall-line { top: auto; bottom: auto; left: 0; right: 0; height: 2px; width: auto;
    background: repeating-linear-gradient(90deg, rgba(77,168,255,.55) 0 8px, transparent 8px 16px); }
  .talk-demo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .priv-packet { animation: none; } }

/* =====================================================================
   CHANNELS PAGE
===================================================================== */
.back-link { display: inline-block; font-size: .84rem; color: var(--text-muted); margin-bottom: 22px; }
.back-link:hover { color: var(--caramel); }

.ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 18px; margin-bottom: 34px; }
.ch-card {
  background: rgba(20,16,9,.55); border: 1px solid var(--border); border-radius: 16px;
  padding: 22px; display: flex; flex-direction: column;
  transition: border-color .3s var(--ease);
}
.ch-card:hover { border-color: rgba(232,177,92,.42); }
.ch-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.ch-ico { font-size: 24px; }
.ch-badge {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 100px; border: 1px solid var(--border); color: var(--text-faint);
}
.ch-badge.ok   { color: var(--aurora-a); border-color: rgba(0,229,255,.42); background: rgba(0,229,255,.1); }
.ch-badge.warn { color: var(--gold); border-color: rgba(232,185,91,.42); background: rgba(232,185,91,.1); }
.ch-badge.bad  { color: var(--danger); border-color: rgba(77,168,255,.42); background: rgba(77,168,255,.1); }
.ch-card h3 { font-size: 1.1rem; margin: 0 0 7px; }
.ch-desc { font-size: .86rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 14px; }
.ch-detail { border-top: 1px solid var(--border); padding-top: 12px; margin-bottom: 14px; }
.ch-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .82rem; }
.ch-row span { color: var(--text-faint); }
.ch-row b { color: var(--text); font-weight: 600; text-align: right; }
.ch-problem {
  background: rgba(232,185,91,.08); border: 1px solid rgba(232,185,91,.3);
  border-radius: 9px; padding: 11px 13px; font-size: .8rem; line-height: 1.55;
  color: var(--text-muted); margin-bottom: 14px;
}
.ch-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.ch-status-line { font-size: .78rem; color: var(--text-faint); margin-top: 11px; min-height: 1.1em; line-height: 1.5; }
.ch-status-line.ok { color: var(--aurora-a); }
.ch-status-line.bad { color: var(--danger); }

.ch-log { background: rgba(20,16,9,.5); border: 1px solid var(--border); border-radius: 16px; padding: 22px; }
.ch-log-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.ch-log-title { font-weight: 700; font-size: .98rem; color: var(--text); }
.ch-log-sub { font-size: .78rem; color: var(--text-muted); margin-top: 3px; }
.ch-log-row {
  display: grid; grid-template-columns: 10px 150px 130px 1fr; gap: 12px; align-items: center;
  padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .8rem;
}
.ch-log-row:last-child { border-bottom: none; }
.ch-log-dot { width: 8px; height: 8px; border-radius: 50%; }
.ch-log-dot.ok { background: var(--aurora-a); }
.ch-log-dot.bad { background: var(--danger); }
.ch-log-when { font-family: var(--font-mono); font-size: .68rem; color: var(--text-faint); }
.ch-log-what b { color: var(--caramel); text-transform: capitalize; }
.ch-log-what { color: var(--text-muted); }
.ch-log-detail { color: var(--text-muted); }
.ch-log-empty { color: var(--text-faint); font-size: .84rem; font-style: italic; padding: 10px 0; }
@media (max-width: 700px) {
  .ch-log-row { grid-template-columns: 10px 1fr; gap: 6px; }
  .ch-log-when, .ch-log-what, .ch-log-detail { grid-column: 2; }
}

/* ---------- Download availability ---------- */
.dl-checking { font-size: .85rem; color: var(--text-faint); font-style: italic; padding: 10px 0; }
.dl-size { font-family: var(--font-mono); font-size: .7rem; opacity: .7; margin-left: 5px; }
.dl-none {
  background: rgba(232,185,91,.07); border: 1px solid rgba(232,185,91,.28);
  border-radius: 10px; padding: 14px 16px; font-size: .86rem; line-height: 1.65; color: var(--text-muted);
}
.dl-none strong { color: var(--caramel); display: block; margin-bottom: 6px; }
.dl-none p { margin: 0 0 8px; }
.dl-none p:last-child { margin-bottom: 0; }
.dl-none code { background: rgba(237,239,247,.07); padding: 1px 5px; border-radius: 4px; font-size: .8rem; color: var(--aurora-a); }

/* =====================================================================
   TYPOGRAPHY — a corporate voice
   ---------------------------------------------------------------------
   Bodoni is a beautiful display face, but a whole page set in it reads
   as a fashion magazine rather than a business tool. It is now reserved
   for the two places a flourish belongs: the opening message and pull
   quotes. Everything else uses Manrope with tight tracking and heavy
   weights, which is what modern software companies actually look like.

   Sizes follow a fixed scale rather than being picked per section, so
   headings stay in a clear hierarchy down the page instead of competing.
===================================================================== */
:root {
  --step--1: clamp(.82rem, .8rem + .1vw, .88rem);
  --step-0:  clamp(.95rem, .92rem + .15vw, 1.02rem);
  --step-1:  clamp(1.15rem, 1.08rem + .35vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.3rem + .75vw, 1.95rem);
  --step-3:  clamp(1.9rem, 1.6rem + 1.5vw, 2.9rem);
  --step-4:  clamp(2.4rem, 1.9rem + 2.6vw, 4rem);
}

h1, h2, h3, h4,
.hero-headline, .section-head h2, .ch-card h3, .idea-card h3,
.ben-card h3, .flow-body h3, .bento-cell h3, .ia-card h3 {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: -.022em;
  line-height: 1.14;
  text-wrap: balance;
}

.hero-headline { font-size: var(--step-4); max-width: 17ch; margin-inline: auto; }
.section-head h2 { font-size: var(--step-3); }
.flow-body h3, .idea-card h3, .ben-card h3, .ch-card h3 { font-size: var(--step-1); letter-spacing: -.014em; }

/* Body copy: a comfortable measure and a settled rhythm. Long lines are
   the most common reason a professional-looking page still feels hard
   to read. */
body { font-size: var(--step-0); line-height: 1.65; }
.section-head p { font-size: var(--step-1); line-height: 1.6; max-width: 62ch; margin-inline: auto; color: var(--text-muted); font-weight: 400; }
.idea-card p, .ben-card p, .flow-body > p, .ch-desc, .bento-cell p { font-size: var(--step-0); line-height: 1.68; max-width: 62ch; }

/* Bodoni now appears only where a flourish is earned. */
.splash-line, .founder-words, .talk-bubble.talk-bot, .ceo-name { font-family: var(--font-display); }

/* Small caps labels read as considered rather than shouty. */
.eyebrow, .idea-num, .ch-badge, .flow-node, .bar-day, .rl-head {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .13em;
}

/* =====================================================================
   COLOUR — brighter, still disciplined
   The palette was correct but sat too low: every accent hovered around
   30-40% opacity, which on pure black reads as grey. Lifting the
   accents and the background layers keeps the same identity while
   giving the page life.
===================================================================== */
:root {
  --aurora-a: #00E5FF;
  --aurora-b: #6FB8FF;
  --spark:    #00E5FF;
  --gold:     #7CC4FF;
  --caramel:  #7CC4FF;
  --caramel-deep: #2E7BFF;
  --text:       #DCEEFF;
  --text-muted: #9CC4E8;
  --text-faint: #7FA8CC;
  --sky:      #6FD4FF;
}

/* Background layers lifted out of the murk. */
.space-nebula { opacity: .52; filter: blur(105px); }
.space-stars { opacity: .72; }
.space-stars-near { opacity: .58; }
.space-horizon {
  opacity: 1;
  background: radial-gradient(ellipse at 50% 0%, rgba(124,196,255,.26), rgba(77,168,255,.13) 45%, transparent 72%);
  box-shadow: 0 -1px 120px rgba(124,196,255,.22);
}

/* Cards sit on a warmer, less flat surface. */
.idea-card, .ben-card, .ch-card, .bento-cell, .flow-visual, .report-panel, .ia-card, .calc {
  background: linear-gradient(165deg, rgba(30,23,13,.72), rgba(12,9,5,.72));
  border-color: rgba(124,196,255,.2);
}
.idea-card:hover, .ben-card:hover, .ch-card:hover, .bento-cell:hover {
  border-color: rgba(124,196,255,.5);
  box-shadow: 0 14px 44px rgba(0,0,0,.5), 0 0 34px rgba(124,196,255,.09);
}

/* Accents carry real colour now. */
.priv-item { background: rgba(0,229,255,.12); border-color: rgba(0,229,255,.34); }
.priv-count { background: rgba(124,196,255,.12); border-color: rgba(124,196,255,.34); }
.fv-chip.fv-lit, .fv-box.fv-lit { background: rgba(124,196,255,.14); border-color: rgba(124,196,255,.55); }
.bar { background: linear-gradient(180deg, rgba(124,196,255,.62), rgba(124,196,255,.2)); border-color: rgba(124,196,255,.5); }
.flow-node { border-color: rgba(124,196,255,.6); }
.btn-primary { box-shadow: 0 6px 26px rgba(0,229,255,.24); }
.btn-primary:hover { box-shadow: 0 8px 34px rgba(0,229,255,.36); }

/* A gradient headline animates as one piece instead of per letter —
   splitting it would make it disappear. */
.kinetic-whole { animation: kin-in .8s cubic-bezier(0.16, 1, 0.3, 1) both; }
.dl-note { font-size: .72rem; opacity: .75; font-weight: 400; }

/* =====================================================================
   HERO — five calm lines
   Restrained on purpose. A headline that fills the screen shouts at the
   reader; this one is sized to be read in one glance and then moved
   past, which is what a business tool should do.
===================================================================== */
.hero-headline {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.4vw, 1.85rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  max-width: 30ch;
  margin: 0 auto 26px;
  /* Each statement gets its own line rather than reflowing. */
  display: flex; flex-direction: column; gap: 2px;
  background: none; -webkit-background-clip: initial; background-clip: initial;
  color: var(--text);
  animation: none;
}
.hero-headline .hl {
  display: block;
  animation: hl-in .7s cubic-bezier(0.16,1,0.3,1) both;
}
.hero-headline .hl:nth-child(1) { animation-delay: .05s; }
.hero-headline .hl:nth-child(2) { animation-delay: .18s; }
.hero-headline .hl:nth-child(3) { animation-delay: .31s; }
.hero-headline .hl:nth-child(4) { animation-delay: .44s; }
.hero-headline .hl:nth-child(5) { animation-delay: .57s; }
@keyframes hl-in { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }

/* The privacy line is the promise — it carries the shine. */
.hero-headline .hl-accent {
  background: linear-gradient(104deg, #FFFFFF, #DCEEFF 38%, #C9E4FF 62%, #FFFFFF);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: hl-in .7s cubic-bezier(0.16,1,0.3,1) .44s both, cream-shine 8s ease-in-out 1.2s infinite;
  font-weight: 800;
}
@keyframes cream-shine { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-headline .hl-quiet { color: var(--text-muted); font-weight: 500; font-size: .8em; margin-top: 6px; }

/* =====================================================================
   NO MORE ITALICS — an official voice
   The display serif and italics read as editorial rather than corporate.
   Everything now uses the body face at a normal weight and size.
===================================================================== */
.hero-tagline, .founder-words, .ceo-name, .talk-bubble.talk-bot,
.idea-card em, .priv-point em, .section-head p em {
  font-family: var(--font-body) !important;
  font-style: normal !important;
}
.hero-tagline {
  font-size: clamp(.92rem, 1.5vw, 1.05rem);
  font-weight: 500;
  color: var(--text-muted);
  background: none; -webkit-background-clip: initial; background-clip: initial;
  animation: none;
  max-width: 56ch; margin: 0 auto 20px;
}
/* Only the opening message keeps the display face — it is ceremonial,
   and it is on screen for three seconds. */
.splash-line { font-family: var(--font-display); font-style: normal; }

/* Section headings come down to a readable size. */
.section-head h2 { font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.3; }
.section-head p { font-size: clamp(.9rem, 1.4vw, 1rem); }

/* =====================================================================
   SHINY BLACK, SPARKLING WHITE
   The galaxy from the opening, carried across the whole site: white and
   cream stars over deep black, with a slow drift so it feels alive
   rather than printed.
===================================================================== */
.space-stars {
  background-image:
    radial-gradient(1.2px 1.2px at 8% 14%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 27% 62%, #E8F4FF, transparent),
    radial-gradient(1.4px 1.4px at 44% 23%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 61% 78%, #FFEFD2, transparent),
    radial-gradient(1.2px 1.2px at 73% 35%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 88% 68%, #E8F4FF, transparent),
    radial-gradient(1.4px 1.4px at 16% 88%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 52% 47%, #FFE8C0, transparent),
    radial-gradient(2px 2px at 35% 8%, rgba(255,255,255,.95), transparent),
    radial-gradient(2px 2px at 80% 20%, rgba(255,240,212,.9), transparent);
  background-size: 560px 560px;
  opacity: .85;
}
.space-stars-near {
  background-image:
    radial-gradient(1.8px 1.8px at 20% 30%, #FFFFFF, transparent),
    radial-gradient(1.6px 1.6px at 68% 55%, #DCEEFF, transparent),
    radial-gradient(1.8px 1.8px at 41% 80%, #FFFFFF, transparent),
    radial-gradient(1.6px 1.6px at 90% 12%, #E8F4FF, transparent),
    radial-gradient(1.4px 1.4px at 12% 58%, #FFFFFF, transparent);
  background-size: 400px 400px;
  opacity: .7;
  /* A gentle twinkle — different rhythm from the drift so it never
     looks like a repeating loop. */
  animation: stars-drift-near 80s linear infinite, twinkle 7s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: .5; } to { opacity: .82; } }

/* The nebula stays as a whisper of colour, not a wash. */
.space-nebula {
  opacity: .3; filter: blur(115px);
  background:
    radial-gradient(24% 24% at 22% 26%, rgba(124,196,255,.7), transparent 70%),
    radial-gradient(22% 22% at 76% 32%, rgba(190,180,255,.55), transparent 70%),
    radial-gradient(22% 22% at 58% 76%, rgba(150,255,230,.45), transparent 70%);
}
.space-horizon {
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.12), rgba(255,224,176,.07) 42%, transparent 70%);
  box-shadow: 0 -1px 130px rgba(255,255,255,.09);
}

@media (prefers-reduced-motion: reduce) {
  .hero-headline .hl, .hero-headline .hl-accent { animation: none; }
  .space-stars-near { animation: none; }
}

/* ---------- Official stamp ---------- */
.site-stamp {
  display: flex; align-items: center; justify-content: center; gap: 22px;
  padding: 30px 24px 26px; margin-bottom: 22px;
  border-bottom: 1px solid var(--border); flex-wrap: wrap; text-align: left;
}
.site-stamp-mark {
  width: 96px; height: 96px; flex-shrink: 0; color: var(--caramel);
  opacity: .9; transform: rotate(-7deg);
  filter: drop-shadow(0 0 16px rgba(124,196,255,.22));
}
.site-stamp-mark svg { width: 100%; height: 100%; }
.site-stamp-line { font-size: .95rem; font-weight: 600; color: var(--text); }
.site-stamp-sub {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .15em;
  text-transform: uppercase; color: var(--caramel-deep); margin-top: 6px;
}
@media (max-width: 560px) { .site-stamp { flex-direction: column; text-align: center; gap: 14px; } }

/* =====================================================================
   SIZE AND STYLE — final word
   An earlier rule set the headline with var(--step-4), which resolved
   to 83px: a wall of text that shouts. This is last in the file so it
   wins, at a size meant to be read rather than endured.
===================================================================== */
.hero-headline,
h1.hero-headline {
  font-size: clamp(1.2rem, 2.1vw, 1.7rem) !important;
  line-height: 1.5;
  max-width: 34ch;
  font-weight: 700;
}
.hero-headline .hl-quiet { font-size: .84em; }

/* Italics removed everywhere except the three-second opening. */
body :not(#splash):not(#splash *) {
  font-style: normal;
}
.fv-note, .priv-foot, .ch-log-empty, .chart-empty, .dl-checking,
.calc-note, .idea-card em, .talk-bubble, .founder-words, .hero-tagline {
  font-style: normal !important;
}

/* =====================================================================
   PHONE LEGIBILITY
   On a 320px screen a dozen elements fell below 11px and several
   buttons were under 32px tall. Both are real usability faults: text
   that small is genuinely hard to read at arm's length, and a tap
   target under about 32px is easy to miss with a thumb.

   Nothing is resized on desktop — this only lifts the floor on small
   screens, where it matters.
===================================================================== */
@media (max-width: 560px) {
  .eyebrow, .idea-num, .ch-badge, .bar-day, .rl-head, .fv-lbl, .fv-note,
  .cs-privacy, .priv-foot, .site-stamp-sub, .ch-log-when, .dl-note,
  .priv-wall-label, .priv-wall-sub, .fv-zip-h, .ia-tag, .tv-lane-h,
  .flow-body .fv-code, .bento-cell .idea-num, .ch-log-sub, .report-panel-sub {
    font-size: 11.5px !important;
    line-height: 1.5;
  }
  .hero-note, .hint, .form-hint, .ch-status-line, .wa-sub, .live-sub,
  .priv-packet, .paste-label {
    font-size: 12px !important;
  }
  /* Comfortable thumb targets. */
  .btn, a.btn, button, .nav-links a, .tab-btn {
    min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .btn-sm, a.btn-sm { min-height: 38px; padding-inline: 14px; }
  /* Buttons stack rather than squeezing side by side. */
  .hero-cta, .ch-actions, .confirm-actions { flex-direction: column; align-items: stretch; }
  .hero-cta .btn, .ch-actions .btn { width: 100%; }
}

/* ---------- The star mark ----------
   A slow shimmer, not a spin. A logo that rotates draws the eye
   permanently away from the content beside it. */
.brand-wordmark .seal svg,
.site-stamp-mark svg,
.splash-seal svg { filter: drop-shadow(0 0 6px rgba(255,231,188,.5)); }
.brand-wordmark .seal svg { animation: star-breathe 5.5s ease-in-out infinite; }
@keyframes star-breathe {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,231,188,.4)); transform: scale(1); }
  50%      { filter: drop-shadow(0 0 12px rgba(255,231,188,.85)); transform: scale(1.06); }
}
.splash-seal svg { animation: star-breathe 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .brand-wordmark .seal svg, .splash-seal svg { animation: none; }
}

/* ---------- Inline payment ---------- */
.paddle-wrap {
  display: none; background: linear-gradient(165deg, rgba(30,23,13,.75), rgba(12,9,5,.85));
  border: 1px solid rgba(124,196,255,.32); border-radius: 16px;
  padding: 22px; margin-bottom: 26px;
}
.paddle-wrap.open { display: block; }
.paddle-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.paddle-title { font-weight: 700; font-size: 1.02rem; color: var(--text); }
.paddle-sub { font-size: .8rem; color: var(--text-muted); margin-top: 3px; max-width: 46ch; line-height: 1.55; }
.paddle-plans { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.paddle-plan {
  flex: 1; min-width: 150px; text-align: left; cursor: pointer; font-family: inherit;
  background: rgba(237,239,247,.04); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 16px; transition: border-color .25s var(--ease), background .25s var(--ease);
}
.paddle-plan:hover { border-color: rgba(124,196,255,.5); }
.paddle-plan.selected { border-color: var(--caramel); background: rgba(124,196,255,.1); }
.paddle-plan b { display: block; font-size: 1.3rem; color: var(--text); font-weight: 800; }
.paddle-plan span { font-size: .76rem; color: var(--text-muted); }
.paddle-checkout-frame { min-height: 100px; }
.paddle-status { font-size: .84rem; margin-top: 12px; min-height: 1.1em; color: var(--text-muted); }
.paddle-status.ok { color: var(--aurora-a); }
.paddle-status.bad { color: var(--danger); }

/* ---------- Manual payment ---------- */
.billing-notice {
  background: rgba(124,196,255,.1); border: 1px solid rgba(124,196,255,.35);
  border-radius: 9px; padding: 10px 13px; margin-bottom: 12px;
  font-size: .78rem; line-height: 1.55; color: var(--text-muted);
}
.manual-pay {
  display: none; background: linear-gradient(165deg, rgba(30,23,13,.8), rgba(12,9,5,.9));
  border: 1px solid rgba(124,196,255,.35); border-radius: 16px;
  padding: 24px; margin-bottom: 26px;
}
.manual-pay.open { display: block; }
.manual-pay-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 14px; }
.manual-pay-badge {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em;
  color: var(--gold); background: rgba(124,196,255,.1);
  border: 1px solid rgba(124,196,255,.32); border-radius: 100px; padding: 5px 12px;
}
.manual-pay h3 { font-size: 1.15rem; margin: 0 0 8px; }
.manual-pay-intro { font-size: .88rem; color: var(--text-muted); line-height: 1.6; margin: 0 0 18px; max-width: 60ch; }
.manual-plans { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.manual-plan { flex: 1; min-width: 140px; background: rgba(237,239,247,.04); border: 1px solid var(--border); border-radius: 11px; padding: 12px 15px; }
.manual-plan b { display: block; font-size: 1.25rem; color: var(--text); font-weight: 800; }
.manual-plan span { font-size: .74rem; color: var(--text-muted); }
.manual-details { border-top: 1px solid var(--border); padding-top: 14px; margin-bottom: 16px; }
.manual-row { display: grid; grid-template-columns: 140px 1fr auto; gap: 12px; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: .86rem; }
.manual-row:last-child { border-bottom: none; }
.manual-row span { color: var(--text-faint); }
.manual-row b { color: var(--text); font-weight: 600; word-break: break-all; }
.manual-copy { background: rgba(124,196,255,.1); border: 1px solid rgba(124,196,255,.3); color: var(--caramel); border-radius: 6px; padding: 4px 11px; font-size: .72rem; cursor: pointer; font-family: inherit; }
.manual-copy:hover { background: rgba(124,196,255,.2); }
.manual-missing { color: var(--danger); font-size: .86rem; line-height: 1.6; }
.manual-ref { background: rgba(0,229,255,.07); border: 1px solid rgba(0,229,255,.3); border-radius: 11px; padding: 14px 16px; margin-bottom: 16px; }
.manual-ref-label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: var(--aurora-a); margin-bottom: 7px; }
.manual-ref-code { font-family: var(--font-mono); font-size: 1.1rem; color: var(--text); font-weight: 600; letter-spacing: .04em; }
.manual-ref p { font-size: .76rem; color: var(--text-muted); margin: 8px 0 0; line-height: 1.55; }
.manual-pay-foot { font-size: .82rem; color: var(--text-muted); line-height: 1.6; margin: 0; }
@media (max-width: 560px) { .manual-row { grid-template-columns: 1fr; gap: 4px; } }

/* ---------- Channel connect dialog ---------- */
.ch-loading { color: var(--text-faint); font-size: .88rem; padding: 20px 0; }
.ch-card.is-connected { border-color: rgba(0,229,255,.42); }
.ch-meta { display: flex; gap: 12px; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; margin: 12px 0 14px; color: var(--text-faint); }
.ch-meta .no-approval { color: var(--aurora-a); }
.ch-meta .needs-approval { color: var(--gold); }

.ch-modal {
  position: fixed; inset: 0; z-index: 99992; display: none;
  background: rgba(0,0,0,.86); backdrop-filter: blur(9px);
  align-items: center; justify-content: center; padding: 24px; overflow-y: auto;
}
.ch-modal.open { display: flex; }
.ch-modal-card {
  max-width: 560px; width: 100%; margin: auto;
  background: linear-gradient(168deg, #0A1420, #000);
  border: 1px solid rgba(124,196,255,.34); border-radius: 18px; padding: 26px;

  /* Never taller than the screen.

     Without this the card grew to whatever its contents needed, so on a
     phone the heading was on screen and the button was somewhere below
     the bottom edge — you had to scroll a dialog to find the thing it
     was asking you to press. The card now fits, and only the middle
     scrolls if it has to. */
  max-height: calc(100vh - 32px);
  display: flex; flex-direction: column;
}
/* The fields scroll; the title and the button do not move. */
.ch-modal-card > .ch-modal-head,
.ch-modal-card > .ch-modal-actions { flex-shrink: 0; }
.ch-modal-card > #dm-fields,
.ch-modal-card > .ch-modal-body {
  overflow-y: auto; flex: 1 1 auto; min-height: 0;
  /* Room so the last field is never hard against the button. */
  padding-bottom: 4px;
}
@media (max-width: 560px) {
  .ch-modal { padding: 12px; align-items: flex-end; }
  .ch-modal-card { padding: 20px 18px; max-height: calc(100vh - 24px); border-radius: 18px; }
}
.ch-modal-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.ch-modal-icon { font-size: 30px; line-height: 1; }
.ch-modal-head h2 { font-size: 1.2rem; margin: 0 0 4px; }
.ch-modal-head > div { flex: 1; }
.ch-modal-sub { font-size: .82rem; color: var(--text-muted); line-height: 1.55; }
.ch-modal-note {
  display: none; background: rgba(124,196,255,.09); border: 1px solid rgba(124,196,255,.32);
  border-radius: 10px; padding: 12px 14px; font-size: .82rem; line-height: 1.6;
  color: var(--text-muted); margin-bottom: 16px;
}
.ch-steps { margin: 0 0 18px; padding-left: 20px; }
.ch-steps li { font-size: .87rem; color: var(--text-muted); line-height: 1.65; margin-bottom: 9px; }
.ch-steps li::marker { color: var(--caramel); font-weight: 700; }
.ch-fields { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.ch-field { display: flex; flex-direction: column; gap: 5px; }
.ch-field span { font-size: .78rem; color: var(--text-faint); }
.ch-field input {
  background: rgba(0,0,0,.55); border: 1px solid var(--border); border-radius: 9px;
  padding: 10px 13px; color: var(--text); font-family: var(--font-mono); font-size: .84rem;
}
.ch-field input:focus { outline: none; border-color: var(--caramel); box-shadow: 0 0 0 3px rgba(124,196,255,.13); }
.ch-nofields { font-size: .84rem; color: var(--text-faint); font-style: normal; padding: 8px 0; }
.ch-modal-actions { display: flex; gap: 10px; }
.ch-modal-actions .btn { flex: 1; }
.ch-modal-status { font-size: .84rem; margin-top: 12px; min-height: 1.1em; color: var(--text-muted); }
.ch-modal-status.ok { color: var(--aurora-a); }
.ch-modal-status.bad { color: var(--danger); }

/* ---------- Deploy page ---------- */
.dep-group {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--caramel-deep);
  margin: 30px 0 14px; font-weight: 500;
}
.dep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.dep-card {
  background: linear-gradient(165deg, rgba(30,23,13,.7), rgba(12,9,5,.8));
  border: 1px solid var(--border); border-radius: 15px; padding: 20px;
  display: flex; flex-direction: column;
  transition: border-color .3s var(--ease);
}
.dep-card:hover { border-color: rgba(124,196,255,.42); }
.dep-card.is-live { border-color: rgba(0,229,255,.45); }
.dep-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.dep-icon { font-size: 24px; }
.dep-state {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .07em;
  color: var(--text-faint); display: flex; align-items: center; gap: 5px;
}
.dep-state.ok { color: var(--aurora-a); }
.dep-state.warn { color: var(--gold); }
.dep-state.bad { color: var(--danger); }
.dep-card h3 { font-size: 1.02rem; margin: 0 0 5px; }
.dep-blurb { font-size: .83rem; color: var(--text-muted); line-height: 1.55; margin: 0 0 12px; }
.dep-identity {
  font-size: .8rem; color: var(--caramel); padding: 8px 11px; margin-bottom: 12px;
  background: rgba(124,196,255,.08); border-radius: 8px; border: 1px solid rgba(124,196,255,.22);
}
.dep-problem {
  font-size: .78rem; color: var(--text-muted); line-height: 1.55; margin-bottom: 12px;
  padding: 9px 11px; background: rgba(124,196,255,.08);
  border: 1px solid rgba(124,196,255,.28); border-radius: 8px;
}
.dep-actions { display: flex; gap: 8px; margin-top: auto; flex-wrap: wrap; }
.dm-can { margin: 0 0 16px; padding-left: 18px; }
.dm-can li { font-size: .86rem; color: var(--text-muted); line-height: 1.7; }
.dm-can li::marker { content: '✓  '; color: var(--aurora-a); }
.dm-snippet {
  background: #000; border: 1px solid var(--border); border-radius: 9px;
  padding: 13px; font-family: var(--font-mono); font-size: .72rem; line-height: 1.65;
  color: var(--aurora-a); overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}

/* ---------- Connection history on the deploy page ---------- */
.dep-log { background: rgba(20,16,9,.5); border: 1px solid var(--border); border-radius: 15px; padding: 20px; }
.dep-log-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.dep-log-head p { font-size: .8rem; color: var(--text-muted); margin: 0; }

/* ---------- Channels on the homepage ---------- */
.chan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; max-width: 940px; margin: 0 auto; }
.chan {
  background: linear-gradient(165deg, rgba(30,23,13,.6), rgba(12,9,5,.7));
  border: 1px solid var(--border); border-radius: 13px; padding: 16px;
  display: flex; flex-direction: column; gap: 4px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.chan:hover { border-color: rgba(124,196,255,.45); transform: translateY(-2px); }
.chan-i { font-size: 22px; }
.chan b { font-size: .92rem; color: var(--text); font-weight: 700; }
.chan-t { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .05em; color: var(--text-faint); }
.chan-foot { text-align: center; font-size: .85rem; color: var(--text-muted); margin: 20px auto 0; max-width: 62ch; line-height: 1.65; }
.chan-foot em { color: var(--caramel); font-style: normal; }

/* ---------- How connecting works ---------- */
.conn-flow { display: flex; align-items: stretch; gap: 10px; max-width: 960px; margin: 0 auto 24px; flex-wrap: wrap; justify-content: center; }
.conn-step {
  flex: 1; min-width: 178px;
  background: linear-gradient(165deg, rgba(30,23,13,.6), rgba(12,9,5,.7));
  border: 1px solid var(--border); border-radius: 13px; padding: 17px;
}
.conn-step.conn-done { border-color: rgba(0,229,255,.45); }
.conn-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 27px; height: 27px; border-radius: 50%; margin-bottom: 9px;
  background: rgba(124,196,255,.12); border: 1px solid rgba(124,196,255,.4);
  font-family: var(--font-mono); font-size: .78rem; color: var(--caramel);
}
.conn-done .conn-n { background: rgba(0,229,255,.12); border-color: rgba(0,229,255,.45); color: var(--aurora-a); }
.conn-step b { display: block; font-size: .92rem; color: var(--text); margin-bottom: 5px; }
.conn-step p { font-size: .8rem; color: var(--text-muted); line-height: 1.55; margin: 0; }
.conn-arrow { display: flex; align-items: center; color: var(--caramel-deep); font-size: 1.1rem; }
.conn-note {
  max-width: 780px; margin: 0 auto; padding: 16px 20px;
  background: rgba(124,196,255,.07); border: 1px solid rgba(124,196,255,.28);
  border-radius: 12px; font-size: .87rem; line-height: 1.7; color: var(--text-muted);
}
.conn-note b { color: var(--caramel); display: block; margin-bottom: 5px; }
.conn-note em { color: var(--text); font-style: normal; }

/* ---------- Trust ---------- */
.trust-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); gap: 15px; max-width: 1000px; margin: 0 auto; }
.trust {
  background: linear-gradient(165deg, rgba(30,23,13,.6), rgba(12,9,5,.75));
  border: 1px solid var(--border); border-left: 2px solid var(--aurora-a);
  border-radius: 0 13px 13px 0; padding: 18px 20px;
}
.trust b { display: block; font-size: .96rem; color: var(--text); margin-bottom: 7px; }
.trust p { font-size: .85rem; color: var(--text-muted); line-height: 1.68; margin: 0; }
.trust strong { color: var(--caramel); font-weight: 600; }
.trust em { color: var(--text); font-style: normal; }
@media (max-width: 720px) { .conn-arrow { display: none; } }

/* ---------- Control panel ---------- */
.admin-gate { display: flex; align-items: center; justify-content: center; min-height: 70vh; }
.admin-gate-card {
  max-width: 400px; width: 100%; text-align: center;
  background: linear-gradient(168deg, #0A1420, #000);
  border: 1px solid rgba(124,196,255,.34); border-radius: 18px; padding: 32px 28px;
}
.admin-gate-card h1 { font-size: 1.3rem; margin: 10px 0 8px; }
.admin-gate-card p { font-size: .85rem; color: var(--text-muted); margin: 0 0 18px; line-height: 1.6; }
#key-input {
  width: 100%; background: rgba(0,0,0,.6); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; color: var(--text);
  font-family: var(--font-mono); font-size: .88rem; margin-bottom: 12px;
}
#key-input:focus { outline: none; border-color: var(--caramel); box-shadow: 0 0 0 3px rgba(124,196,255,.14); }
.admin-gate-err { color: var(--danger); font-size: .82rem; min-height: 1.2em; margin-top: 10px; }
.admin-gate-note { font-size: .74rem !important; color: var(--text-faint) !important; margin: 14px 0 0 !important; }

.admin-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.admin-top-actions { display: flex; gap: 8px; }
.admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); gap: 10px; margin-bottom: 22px; }
.admin-tile {
  background: linear-gradient(165deg, rgba(30,23,13,.6), rgba(12,9,5,.75));
  border: 1px solid var(--border); border-radius: 12px; padding: 15px; text-align: center;
}
.admin-tile.ok { border-color: rgba(0,229,255,.35); }
.admin-tile.warn { border-color: rgba(124,196,255,.4); }
.admin-tile.bad { border-color: rgba(77,168,255,.4); }
.admin-tile-n { font-size: 1.5rem; font-weight: 800; color: var(--text); }
.admin-tile-l { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-top: 4px; }

.admin-filters { display: flex; gap: 7px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-filter {
  background: rgba(237,239,247,.04); border: 1px solid var(--border); color: var(--text-muted);
  border-radius: 100px; padding: 6px 14px; font-size: .78rem; cursor: pointer; font-family: inherit;
}
.admin-filter.selected { border-color: var(--caramel); color: var(--caramel); background: rgba(124,196,255,.1); }

.admin-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  background: rgba(20,16,9,.5); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px; margin-bottom: 9px;
}
.admin-row.is-suspended { border-color: rgba(77,168,255,.4); background: rgba(77,168,255,.05); }
.admin-row-name { font-weight: 700; font-size: .95rem; color: var(--text); display: flex; align-items: center; gap: 8px; }
.admin-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--border); }
.admin-dot.on { background: var(--aurora-a); box-shadow: 0 0 7px var(--aurora-a); }
.admin-role { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .07em; color: var(--text-faint); }
.admin-row-owner { font-size: .78rem; color: var(--text-muted); margin-top: 3px; }
.admin-row-ch { display: flex; gap: 5px; margin-top: 6px; flex-wrap: wrap; }
.admin-row-ch span {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .06em;
  background: rgba(0,229,255,.1); border: 1px solid rgba(0,229,255,.28);
  color: var(--aurora-a); border-radius: 100px; padding: 2px 8px;
}
.admin-row-reason { font-size: .76rem; color: #FF6B8A; margin-top: 6px; }
.admin-row-meta { display: flex; flex-direction: column; gap: 5px; align-items: flex-end; }
.admin-pill {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .06em;
  border: 1px solid var(--border); border-radius: 100px; padding: 3px 9px; color: var(--text-faint);
}
.admin-pill.ok { color: var(--aurora-a); border-color: rgba(0,229,255,.35); }
.admin-pill.warn { color: var(--gold); border-color: rgba(124,196,255,.35); }
.admin-empty { color: var(--text-faint); font-size: .86rem; padding: 24px; text-align: center; }
.admin-stamp { font-size: .72rem; color: var(--text-faint); margin-top: 18px; line-height: 1.6; }
@media (max-width: 680px) { .admin-row { grid-template-columns: 1fr; } .admin-row-meta { align-items: flex-start; flex-direction: row; } }

/* ---------- Pro subscription card ---------- */
.pro-card {
  background: linear-gradient(165deg, rgba(30,23,13,.8), rgba(12,9,5,.9));
  border: 1px solid rgba(124,196,255,.35); border-radius: 15px; padding: 20px; margin-bottom: 16px;
}
.pro-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.pro-name { font-weight: 800; font-size: 1.05rem; color: var(--text); }
.pro-badge { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; color: var(--gold); }
.pro-price { margin-bottom: 14px; }
.pro-price b { font-size: 2rem; font-weight: 800; color: var(--text); }
.pro-price span { font-size: .84rem; color: var(--text-muted); margin-left: 5px; }
.pro-list { list-style: none; padding: 0; margin: 0 0 16px; }
.pro-list li { font-size: .82rem; color: var(--text-muted); line-height: 1.7; padding-left: 18px; position: relative; }
.pro-list li::before { content: '✓'; position: absolute; left: 0; color: var(--aurora-a); }
.pro-note { font-size: .72rem; color: var(--text-faint); line-height: 1.55; margin-top: 10px; text-align: center; }

/* =====================================================================
   HOMEPAGE — five sections, generous space
   The old page had fifteen sections and 3,400 words. A business owner
   deciding in ninety seconds does not read that. This is sized to be
   read straight through.
===================================================================== */
.wrap.narrow { max-width: 760px; }
.section { padding: 68px 0; }
.section-head { margin-bottom: 34px; }
.section-head h2 { font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.25; margin: 0 0 10px; }
.section-head p { font-size: clamp(.94rem, 1.5vw, 1.05rem); line-height: 1.65; }

.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.two-up p { font-size: 1rem; line-height: 1.72; color: var(--text-muted); margin: 0; }
.two-up strong { color: var(--caramel); }

.answer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 15px; }
.answer-card {
  background: linear-gradient(165deg, rgba(30,23,13,.65), rgba(12,9,5,.8));
  border: 1px solid var(--border); border-radius: 14px; padding: 20px;
  transition: border-color .3s var(--ease), transform .3s var(--ease);
}
.answer-card:hover { border-color: rgba(124,196,255,.45); transform: translateY(-3px); }
.ac-i { font-size: 24px; display: block; margin-bottom: 10px; }
.answer-card b { display: block; font-size: 1rem; color: var(--text); margin-bottom: 6px; }
.answer-card p { font-size: .87rem; color: var(--text-muted); line-height: 1.65; margin: 0; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); gap: 14px; }
.step {
  background: linear-gradient(165deg, rgba(30,23,13,.6), rgba(12,9,5,.75));
  border: 1px solid var(--border); border-radius: 14px; padding: 18px;
}
.step > span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; margin-bottom: 10px;
  background: rgba(124,196,255,.12); border: 1px solid rgba(124,196,255,.4);
  font-family: var(--font-mono); font-size: .8rem; color: var(--caramel);
}
.step b { display: block; font-size: .95rem; color: var(--text); margin-bottom: 5px; }
.step p { font-size: .84rem; color: var(--text-muted); line-height: 1.6; margin: 0; }

.price-box {
  max-width: 400px; margin: 0 auto; text-align: center;
  background: linear-gradient(168deg, rgba(30,23,13,.85), rgba(10,8,4,.92));
  border: 1px solid rgba(124,196,255,.4); border-radius: 18px; padding: 30px 26px;
}
.pb-amount { font-size: 3rem; font-weight: 800; color: var(--text); line-height: 1; margin-bottom: 20px; }
.pb-amount span { font-size: .95rem; font-weight: 400; color: var(--text-muted); margin-left: 6px; }
.pb-list { list-style: none; padding: 0; margin: 0 0 22px; text-align: left; }
.pb-list li { font-size: .9rem; color: var(--text-muted); line-height: 1.9; padding-left: 22px; position: relative; }
.pb-list li::before { content: '✓'; position: absolute; left: 0; color: var(--aurora-a); font-weight: 700; }
.pb-note { font-size: .76rem; color: var(--text-faint); line-height: 1.6; margin: 14px 0 0; }
@media (max-width: 640px) { .two-up { grid-template-columns: 1fr; gap: 14px; } .section { padding: 48px 0; } }

/* =====================================================================
   BLACK AND GOLD
   Every value measured against #000 before use. The lowest is 6.5:1 and
   body text is 15.5:1 — a gold that looks right in a mockup but cannot
   be read on a phone in daylight is a mistake, not a design.

   Teal and red remain ONLY where colour carries meaning — a live
   connection, a failure — because meaning must stay distinguishable
   from decoration.
===================================================================== */
:root {
  --text:       #9CC4E8;   /* 15.5:1 on black */
  --text-muted: #6FB8FF;   /* 11.8:1 */
  --text-faint: #4A8FD0;   /*  8.1:1 */
  --gold:        #4DA8FF;
  --gold-bright: #C9E4FF;
  --gold-deep:   #2E7BFF;
  --caramel:      #4DA8FF;
  --caramel-deep: #2E7BFF;
  --border:       #4A3818;
}
body { color: var(--text); }
h1, h2, h3, h4, .section-head h2, .answer-card b, .step b, .dep-card h3, .ch-card h3 { color: var(--gold-bright); }

/* The shine, on the two lines that carry the promise. Anywhere else it
   would be noise. */
.hero-headline .hl-lead, .hero-headline .hl-accent, .splash-line {
  background: linear-gradient(105deg, #DCEEFF, #4DA8FF 30%, #C9E4FF 50%, #4DA8FF 72%, #DCEEFF);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gold-sweep 7s ease-in-out infinite;
}
@keyframes gold-sweep { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.btn-primary {
  background: linear-gradient(135deg, #7CC4FF, #2E7BFF);
  color: #1A1206; border: none;
  box-shadow: 0 5px 22px rgba(77,168,255,.26);
}
.btn-primary:hover { box-shadow: 0 8px 30px rgba(77,168,255,.4); }
.btn-secondary { border-color: var(--border); color: var(--text-muted); }
.btn-secondary:hover { border-color: var(--gold); color: var(--gold-bright); }

.answer-card, .step, .price-box, .dep-card, .ch-card, .admin-tile, .admin-row {
  background: linear-gradient(165deg, rgba(34,26,12,.75), rgba(10,8,4,.88));
  border-color: rgba(77,168,255,.22);
}
.answer-card:hover, .step:hover, .dep-card:hover, .ch-card:hover { border-color: rgba(77,168,255,.55); }

.space-stars {
  background-image:
    radial-gradient(1.2px 1.2px at 8% 14%, #DCEEFF, transparent),
    radial-gradient(1px 1px at 27% 62%, #9CC4E8, transparent),
    radial-gradient(1.4px 1.4px at 44% 23%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 61% 78%, #4DA8FF, transparent),
    radial-gradient(1.2px 1.2px at 73% 35%, #DCEEFF, transparent),
    radial-gradient(1px 1px at 88% 68%, #9CC4E8, transparent),
    radial-gradient(1.4px 1.4px at 16% 88%, #FFFFFF, transparent),
    radial-gradient(1px 1px at 52% 47%, #4DA8FF, transparent),
    radial-gradient(2px 2px at 35% 8%, rgba(255,243,208,.95), transparent),
    radial-gradient(2px 2px at 80% 20%, rgba(77,168,255,.9), transparent);
  background-size: 560px 560px;
}
.space-nebula {
  background:
    radial-gradient(24% 24% at 22% 26%, rgba(77,168,255,.75), transparent 70%),
    radial-gradient(22% 22% at 76% 32%, rgba(217,160,60,.5), transparent 70%),
    radial-gradient(22% 22% at 58% 76%, rgba(255,233,168,.4), transparent 70%);
}
.space-horizon {
  background: radial-gradient(ellipse at 50% 0%, rgba(77,168,255,.2), rgba(184,134,46,.08) 45%, transparent 72%);
  box-shadow: 0 -1px 130px rgba(77,168,255,.14);
}
.dep-state.ok, .ch-badge.ok, .admin-pill.ok { color: #00E5FF; }
.dep-state.bad, .ch-badge.bad { color: #FF6B8A; }

/* The hero as one statement. */
.hero-headline { display: flex; flex-direction: column; gap: 6px; max-width: 32ch; margin: 0 auto 24px; }
.hero-headline .hl-lead { font-size: clamp(1.5rem, 3.6vw, 2.5rem); font-weight: 800; line-height: 1.1; }
.hero-headline .hl-sub {
  font-family: var(--font-mono); font-size: .78rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 14px;
}
.hero-headline .hl { font-size: clamp(.94rem, 1.5vw, 1.08rem); font-weight: 500; line-height: 1.6; color: var(--text-muted); }
.hero-headline .hl-accent { font-size: clamp(1rem, 1.7vw, 1.2rem); font-weight: 700; margin-top: 10px; }

/* HOW IT WORKS — the four steps were cramped and the numbers collapsed. */
.steps { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 18px; }
.step { padding: 24px 22px; }
.step > span {
  /* display is declared HERE as well. Relying on the earlier rule for
     it left width and height with nothing to apply to, and the circle
     shrank to the width of the digit. */
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; min-width: 38px; border-radius: 50%;
  font-size: 1.05rem; font-weight: 700; margin-bottom: 15px;
  background: linear-gradient(135deg, rgba(77,168,255,.2), rgba(184,134,46,.12));
  border: 1px solid rgba(77,168,255,.55); color: var(--gold-bright);
}
.step b { font-size: 1.02rem; margin-bottom: 8px; line-height: 1.3; }
.step p { font-size: .87rem; line-height: 1.7; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps { grid-template-columns: 1fr; } }

/* The 32ch cap clipped "Your data lives on your setup, never exposed to
   anyone" mid-line. Widened to fit the longest line without wrapping
   awkwardly on a laptop. */
.hero-headline { max-width: 60ch; }
.hero-headline .hl { text-wrap: balance; }

/* The cookie banner was still on the old teal palette, which made it
   look like it belonged to a different site. */
.cookie-banner { background: linear-gradient(180deg, #241B0C, #120D05); border-top: 1px solid rgba(77,168,255,.3); }
.cookie-banner p, .cookie-banner span { color: var(--text-muted); }
.cookie-banner a { color: var(--gold); }
#cookie-accept-btn { background: linear-gradient(135deg, #7CC4FF, #2E7BFF); color: #1A1206; border: none; }
#cookie-decline-btn { border-color: var(--border); color: var(--text-muted); }

/* =====================================================================
   HOW IT WORKS — room for the words
   The boxes were sized for the numbers, not the sentences inside them,
   so the text ran out of space and the cards looked cramped. Wider
   minimum, more padding, and a taller line height.
===================================================================== */
.steps { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; }
.step { padding: 28px 26px; display: flex; flex-direction: column; }
.step > span { margin-bottom: 18px; }
.step b { font-size: 1.06rem; line-height: 1.35; margin-bottom: 10px; }
.step p { font-size: .89rem; line-height: 1.8; margin: 0; }
@media (max-width: 1000px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .steps { grid-template-columns: 1fr; } .step { padding: 22px 20px; } }

/* =====================================================================
   THE DOWNLOAD PAGE
   Rebuilt: it had two identical "Download ownership contract" buttons
   with two different descriptions, and inline styles fighting the
   stylesheet, which is why the text ran together.
===================================================================== */
.dl-step { display: flex; gap: 20px; margin-bottom: 30px; align-items: flex-start; }
.dl-num {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700;
  background: linear-gradient(135deg, rgba(77,168,255,.2), rgba(184,134,46,.12));
  border: 1px solid rgba(77,168,255,.55); color: var(--gold-bright);
}
.dl-body { flex: 1; min-width: 0; }
.dl-body h2 { font-size: 1.12rem; margin: 8px 0 8px; }
.dl-body > p { font-size: .9rem; color: var(--text-muted); line-height: 1.75; margin: 0 0 16px; max-width: 62ch; }

.dl-files { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.dl-file {
  background: linear-gradient(165deg, rgba(34,26,12,.7), rgba(10,8,4,.85));
  border: 1px solid rgba(77,168,255,.22); border-radius: 13px; padding: 18px;
  display: flex; flex-direction: column;
}
.dl-file-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.dl-file-icon { font-size: 19px; }
.dl-file-top b { font-size: .98rem; color: var(--gold-bright); }
.dl-file p { font-size: .84rem; color: var(--text-muted); line-height: 1.7; margin: 0 0 14px; flex: 1; }

.dl-buttons { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.dl-size { font-family: var(--font-mono); font-size: .68rem; opacity: .75; margin-left: 6px; }
.dl-note-inline { font-size: .72rem; opacity: .75; font-weight: 400; }
.dl-checking { font-size: .86rem; color: var(--text-faint); padding: 10px 0; }
.dl-warn, .dl-none {
  background: rgba(77,168,255,.07); border: 1px solid rgba(77,168,255,.28);
  border-radius: 11px; padding: 15px 17px;
}
.dl-warn b, .dl-none b { color: var(--gold); display: block; margin-bottom: 7px; font-size: .89rem; }
.dl-warn p, .dl-none p { font-size: .83rem; color: var(--text-muted); line-height: 1.7; margin: 0 0 9px; }
.dl-warn p:last-child, .dl-none p:last-child { margin-bottom: 0; }
.dl-none code {
  background: rgba(0,0,0,.5); padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-mono); font-size: .78rem; color: var(--gold);
}
.dl-list { margin: 0 0 18px; padding-left: 20px; }
.dl-list li { font-size: .88rem; color: var(--text-muted); line-height: 1.9; }
.dl-list li b { color: var(--gold-bright); }
.dl-next { display: flex; gap: 10px; flex-wrap: wrap; }
@media (max-width: 560px) {
  .dl-step { gap: 14px; }
  .dl-num { width: 34px; height: 34px; font-size: .95rem; }
}

/* Phone number picker */
.dm-numbers { display: flex; flex-direction: column; gap: 8px; }
.dm-number {
  display: grid; grid-template-columns: auto 1fr auto; gap: 11px; align-items: center;
  background: rgba(77,168,255,.05); border: 1px solid var(--border);
  border-radius: 10px; padding: 12px 14px; cursor: pointer;
}
.dm-number:has(input:checked) { border-color: var(--gold); background: rgba(77,168,255,.12); }
.dm-number-n { font-family: var(--font-mono); font-size: .95rem; color: var(--text); }
.dm-number-d { font-size: .76rem; color: var(--text-faint); }
.dm-empty { padding: 14px 16px; background: rgba(77,168,255,.07); border: 1px solid rgba(77,168,255,.28); border-radius: 11px; }
.dm-empty b { display: block; color: var(--gold); margin-bottom: 7px; font-size: .89rem; }
.dm-empty p { font-size: .83rem; color: var(--text-muted); line-height: 1.7; margin: 0; }

/* =====================================================================
   AI USAGE CREDIT
   Its own card, visually distinct from the subscription. A customer who
   cannot tell the two apart cannot tell what they have paid for.
===================================================================== */
.ai-credit, .ai-enable {
  background: linear-gradient(165deg, rgba(34,26,12,.82), rgba(10,8,4,.92));
  border: 1px solid rgba(0,229,255,.3); border-radius: 15px;
  padding: 20px; margin-bottom: 16px;
}
.aic-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 16px; }
.aic-title { font-weight: 800; font-size: 1.02rem; color: #C9E4FF; }
.aic-sub { font-size: .78rem; color: var(--text-muted); margin-top: 3px; line-height: 1.55; }
.aic-badge { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; color: var(--danger); }

.aic-numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.aic-n { text-align: center; padding: 11px 8px; background: rgba(0,0,0,.35); border-radius: 10px; }
.aic-n b { display: block; font-size: 1.15rem; color: var(--text); font-weight: 800; }
.aic-n span { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); }
.aic-remaining { background: rgba(0,229,255,.09); border: 1px solid rgba(0,229,255,.3); }
.aic-remaining b { color: #00E5FF; }

.aic-bar { height: 6px; background: rgba(0,0,0,.5); border-radius: 100px; overflow: hidden; margin-bottom: 8px; }
.aic-bar-fill { height: 100%; background: linear-gradient(90deg, #00E5FF, #6FB8FF); border-radius: 100px; transition: width .5s var(--ease); }
.aic-bar-fill.low { background: linear-gradient(90deg, #2E7BFF, #00E5FF); }
.aic-est { font-size: .78rem; color: var(--text-faint); margin-bottom: 14px; }

.aic-low {
  background: rgba(124,196,255,.1); border: 1px solid rgba(124,196,255,.35);
  border-radius: 9px; padding: 10px 13px; font-size: .8rem; color: var(--text-muted);
  line-height: 1.55; margin-bottom: 14px;
}
.aic-packs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.aic-pack {
  flex: 1; min-width: 68px; background: rgba(0,229,255,.09);
  border: 1px solid rgba(0,229,255,.35); color: #00E5FF;
  border-radius: 10px; padding: 11px 8px; font-size: .92rem; font-weight: 700;
  cursor: pointer; font-family: inherit; transition: background .2s var(--ease);
}
.aic-pack:hover:not(:disabled) { background: rgba(0,229,255,.2); }
.aic-pack:disabled { opacity: .5; cursor: default; }
.aic-status { font-size: .8rem; color: var(--text-muted); min-height: 1.1em; line-height: 1.6; margin-top: 8px; }
.aic-status.bad { color: var(--danger); }

.aic-more { margin-top: 14px; }
.aic-more summary { font-size: .8rem; color: var(--caramel); cursor: pointer; }
.aic-more p { font-size: .78rem; color: var(--text-muted); line-height: 1.7; margin: 9px 0 0; }
.aic-more b { color: var(--text); }

.ai-enable { border-color: rgba(77,168,255,.3); }
.aie-title { font-weight: 700; font-size: .98rem; color: #C9E4FF; margin-bottom: 6px; }
.ai-enable p { font-size: .84rem; color: var(--text-muted); line-height: 1.65; margin: 0 0 13px; }
@media (max-width: 480px) { .aic-numbers { grid-template-columns: 1fr; } }
.aie-note, .pb-note { font-size: .72rem; color: var(--text-faint); margin-top: 10px; }
.ai-enable code { background: rgba(0,0,0,.5); padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-mono); font-size: .76rem; color: var(--gold); }

/* =====================================================================
   PRICING — two parts, shown separately
   Most tools quote one number and hide the AI markup inside it. Showing
   both means a customer can check the arithmetic, which is the whole
   reason for the layout.
===================================================================== */
.price-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.price-part {
  background: linear-gradient(165deg, rgba(34,26,12,.75), rgba(10,8,4,.88));
  border: 1px solid rgba(77,168,255,.25); border-radius: 15px; padding: 22px;
}
.pp-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em; color: var(--gold); }
.pp-amount { font-size: 2.2rem; font-weight: 800; color: var(--gold-bright); line-height: 1.1; margin: 8px 0 14px; }
.pp-amount span { font-size: .9rem; font-weight: 400; color: var(--text-muted); margin-left: 5px; }
.pp-choice { font-size: 1.5rem; }
.price-part ul { list-style: none; padding: 0; margin: 0; }
.price-part li { font-size: .86rem; color: var(--text-muted); line-height: 1.75; padding-left: 20px; position: relative; }
.price-part li::before { content: '✓'; position: absolute; left: 0; color: var(--aurora-a); }
.pp-intro { font-size: .88rem; color: var(--text-muted); line-height: 1.7; margin: 0; }

.ai-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 20px; }
.aic-col {
  background: linear-gradient(165deg, rgba(30,23,13,.6), rgba(10,8,4,.8));
  border: 1px solid var(--border); border-radius: 15px; padding: 22px;
}
.aic-managed { border-color: rgba(0,229,255,.35); }
.aic-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; gap: 10px; }
.aic-head b { font-size: 1.02rem; color: var(--gold-bright); }
.aic-tag { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; color: var(--gold); white-space: nowrap; }
.aic-managed .aic-tag { color: var(--aurora-a); }
.aic-price { font-size: .95rem; color: var(--text); margin-bottom: 13px; }
.aic-price b { color: var(--aurora-a); }
.aic-col ul { list-style: none; padding: 0; margin: 0 0 14px; }
.aic-col li { font-size: .85rem; color: var(--text-muted); line-height: 1.75; padding-left: 18px; position: relative; margin-bottom: 6px; }
.aic-col li::before { content: '·'; position: absolute; left: 4px; color: var(--caramel); font-weight: 700; }
.aic-col li b { color: var(--text); }
.aic-for { font-size: .8rem; color: var(--text-faint); line-height: 1.6; padding-top: 12px; border-top: 1px solid var(--border); }

.price-honest {
  background: rgba(77,168,255,.06); border: 1px solid rgba(77,168,255,.26);
  border-radius: 13px; padding: 18px 20px; margin-bottom: 22px;
}
.price-honest b { display: block; color: var(--gold); margin-bottom: 7px; font-size: .92rem; }
.price-honest p { font-size: .86rem; color: var(--text-muted); line-height: 1.75; margin: 0; }
.price-cta { text-align: center; }
@media (max-width: 720px) { .price-two, .ai-compare { grid-template-columns: 1fr; } }

/* Credit packs on the pricing page */
.pack-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin: 4px 0 12px; }
.pack { background: rgba(0,229,255,.07); border: 1px solid rgba(0,229,255,.26);
  border-radius: 10px; padding: 11px 12px; text-align: center; }
.pack b { display: block; font-size: 1.05rem; color: var(--aurora-a); font-weight: 800; }
.pack span { font-size: .68rem; color: var(--text-faint); line-height: 1.4; }
.pack-note { font-size: .76rem; color: var(--text-faint); line-height: 1.6; margin: 0 0 14px; }

/* Privacy — two modes, stated separately because they genuinely differ */
.privacy-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; }
.ps-col { background: linear-gradient(165deg, rgba(30,23,13,.6), rgba(10,8,4,.8));
  border: 1px solid var(--border); border-radius: 14px; padding: 20px; }
.ps-managed { border-color: rgba(0,229,255,.3); }
.ps-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ps-head b { font-size: 1rem; color: var(--gold-bright); }
.ps-tag { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; color: var(--text-faint); white-space: nowrap; }
.ps-managed .ps-tag { color: var(--aurora-a); }
.ps-col p { font-size: .86rem; color: var(--text-muted); line-height: 1.75; margin: 0 0 10px; }
.ps-col p b { color: var(--text); }
.ps-small { font-size: .78rem !important; color: var(--text-faint) !important; margin-bottom: 0 !important; }
.privacy-note { background: rgba(77,168,255,.06); border: 1px solid rgba(77,168,255,.24);
  border-radius: 12px; padding: 16px 18px; }
.privacy-note b { display: block; color: var(--gold); margin-bottom: 6px; font-size: .9rem; }
.privacy-note p { font-size: .84rem; color: var(--text-muted); line-height: 1.75; margin: 0; }
@media (max-width: 720px) { .privacy-split { grid-template-columns: 1fr; } }

/* =====================================================================
   THE FLOW MAP — how a message actually travels
   Rebuilt to show BOTH AI paths. The old one showed only "your own AI",
   which made Managed AI invisible on the page most people read first.
===================================================================== */
.flowmap { background: linear-gradient(165deg, rgba(24,18,10,.7), rgba(8,6,3,.9));
  border: 1px solid rgba(77,168,255,.22); border-radius: 18px; padding: 24px; margin-top: 34px; }
.fm-row { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.fm-box { background: rgba(0,0,0,.45); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 18px; min-width: 190px; text-align: center; }
.fm-box span { display: block; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .11em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 4px; }
.fm-box b { font-size: .9rem; color: var(--text); font-weight: 600; }
.fm-you { border-color: rgba(77,168,255,.5); background: rgba(77,168,255,.09); }
.fm-you b { color: #C9E4FF; }
.fm-arrow { color: var(--caramel); font-size: 1.15rem; }
.fm-fence { border: 1px dashed rgba(77,168,255,.35); border-radius: 12px;
  padding: 16px; margin: 16px 0; position: relative; }
.fm-fence-label { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); text-align: center; margin-bottom: 10px; }
.fm-docs { margin: 0 auto; max-width: 280px; }
.fm-split-label { text-align: center; font-size: .82rem; color: var(--text-muted); margin-bottom: 12px; }
.fm-split { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.fm-path { background: rgba(0,0,0,.4); border: 1px solid var(--border); border-radius: 12px; padding: 15px; }
.fm-path-managed { border-color: rgba(0,229,255,.34); }
.fm-path-tag { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
.fm-path-managed .fm-path-tag { color: var(--aurora-a); }
.fm-path-line { font-size: .85rem; color: var(--text); display: flex; align-items: center; gap: 7px; margin-bottom: 6px; }
.fm-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--caramel); flex-shrink: 0; }
.fm-dot.on { background: var(--aurora-a); box-shadow: 0 0 7px var(--aurora-a); }
.fm-path p { font-size: .76rem; color: var(--text-faint); line-height: 1.55; margin: 0; }
.fm-back { flex-direction: column; gap: 8px; }
.fm-reply { border-color: rgba(0,229,255,.4); background: rgba(0,229,255,.07); }
.fm-reply b { color: var(--aurora-a); }
@media (max-width: 640px) { .fm-split { grid-template-columns: 1fr; } .fm-row { flex-direction: column; } }

/* Live AI cost panel */
.cost-panel { background: linear-gradient(165deg, rgba(34,26,12,.8), rgba(10,8,4,.92));
  border: 1px solid rgba(0,229,255,.3); border-radius: 15px; padding: 20px; margin-bottom: 18px; }
.cp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; margin-bottom: 13px; }
.cp-title { font-weight: 800; font-size: 1.02rem; color: #C9E4FF; }
.cp-sub { font-size: .78rem; color: var(--text-muted); margin-top: 3px; }
.cp-balance { text-align: right; }
.cp-balance b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--aurora-a); }
.cp-balance span { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); }
.cp-bar { height: 6px; background: rgba(0,0,0,.5); border-radius: 100px; overflow: hidden; margin-bottom: 14px; }
.cp-fill { height: 100%; background: linear-gradient(90deg,#00E5FF,#6FB8FF); border-radius: 100px; transition: width .5s var(--ease); }
.cp-fill.low { background: linear-gradient(90deg,#2E7BFF,#00E5FF); }
.cp-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 14px; }
.cp-cell { text-align: center; background: rgba(0,0,0,.35); border-radius: 10px; padding: 11px 6px; }
.cp-cell b { display: block; font-size: 1.02rem; color: var(--text); font-weight: 700; }
.cp-cell span { font-family: var(--font-mono); font-size: .54rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-faint); }
.cp-recent { margin-bottom: 14px; }
.cp-row { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem;
  color: var(--text-muted); padding: 7px 0; border-bottom: 1px solid rgba(77,168,255,.1); }
.cp-row b { color: var(--aurora-a); font-family: var(--font-mono); font-size: .76rem; }
@media (max-width: 560px) { .cp-grid { grid-template-columns: repeat(2,1fr); } }
a.pack { text-decoration: none; display: block; transition: background .18s ease, transform .18s ease; }
a.pack:hover { background: rgba(0,229,255,.16); transform: translateY(-2px); }

/* Connecting a business phone number */
.phone-opts { display: flex; flex-direction: column; gap: 9px; }
.phone-opt { display: flex; gap: 11px; align-items: flex-start; cursor: pointer;
  background: rgba(77,168,255,.05); border: 1px solid var(--border);
  border-radius: 11px; padding: 14px; }
.phone-opt:has(input:checked) { border-color: var(--gold); background: rgba(77,168,255,.12); }
.phone-opt input { margin-top: 3px; flex-shrink: 0; }
.po-body { display: flex; flex-direction: column; gap: 4px; }
.po-body b { font-size: .92rem; color: var(--text); }
.po-body b em { font-style: normal; font-family: var(--font-mono); font-size: .56rem;
  letter-spacing: .1em; color: var(--aurora-a); text-transform: uppercase; margin-left: 6px; }
.po-help { font-size: .8rem; color: var(--text-muted); line-height: 1.6; }
.po-note { font-size: .75rem; color: var(--caramel); line-height: 1.55; }
.phone-steps { margin: 0 0 14px; padding-left: 20px; }
.phone-steps li { font-size: .88rem; color: var(--text); line-height: 1.9; margin-bottom: 6px; }
.po-off { font-size: .8rem; color: var(--text-muted); margin: 0 0 12px; }
.po-off b { font-family: var(--font-mono); color: var(--gold); }
.po-warn { background: rgba(124,196,255,.1); border: 1px solid rgba(124,196,255,.32);
  border-radius: 9px; padding: 11px 13px; font-size: .8rem; color: var(--text-muted);
  line-height: 1.6; margin-bottom: 12px; }
.po-wait { font-size: .84rem; color: var(--text-faint); padding: 11px 13px;
  background: rgba(0,0,0,.35); border-radius: 9px; border: 1px solid var(--border); }
.po-wait.ok { color: var(--aurora-a); border-color: rgba(0,229,255,.35); background: rgba(0,229,255,.08); }

/* AI costs — always answered, in both modes */
.ai-cost-always { background: linear-gradient(165deg, rgba(34,26,12,.78), rgba(10,8,4,.9));
  border: 1px solid rgba(77,168,255,.26); border-radius: 15px; padding: 20px; margin-bottom: 16px; }
.aca-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 13px; }
.aca-title { font-weight: 800; font-size: 1.02rem; color: #C9E4FF; }
.aca-mode { font-family: var(--font-mono); font-size: .56rem; letter-spacing: .12em; color: var(--aurora-a); }
.aca-p { font-size: .86rem; color: var(--text-muted); line-height: 1.75; margin: 0 0 9px; }
.aca-p b { color: var(--text); }
.aca-dim { color: var(--text-faint); font-size: .8rem; margin-bottom: 0; }
.aca-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin-bottom: 13px; }
.aca-grid > div { text-align: center; background: rgba(0,0,0,.35); border-radius: 10px; padding: 12px 6px; }
.aca-grid b { display: block; font-size: 1.08rem; color: var(--aurora-a); font-weight: 800; }
.aca-grid span { font-family: var(--font-mono); font-size: .53rem; letter-spacing: .09em;
  text-transform: uppercase; color: var(--text-faint); }
.aca-recent { border-top: 1px solid rgba(77,168,255,.12); padding-top: 4px; }
.aca-row { display: flex; justify-content: space-between; gap: 12px; font-size: .8rem;
  color: var(--text-muted); padding: 7px 0; }
.aca-row b { color: var(--aurora-a); font-family: var(--font-mono); font-size: .76rem; }
@media (max-width: 560px) { .aca-grid { grid-template-columns: repeat(2,1fr); } }

/* =====================================================================
   THE CINEMATIC LAYER
   The WebGL canvas sits behind everything and is purely decorative. The
   gradient beneath it is a complete design on its own, so a device
   without WebGL loses nothing it needs.
===================================================================== */
#hero-canvas {
  position: fixed; inset: 0; width: 100%; height: 100vh;
  z-index: 0; pointer-events: none;
  /* Fades out down the page so it never competes with body text. */
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 92%);
}

/* Arrival. Elements rise into place once, as they are reached.

   GUARDED BY .js-motion, WHICH JAVASCRIPT ADDS.

   Without that guard these rules hide every section by default and
   depend on script to reveal them — so a JavaScript error, a blocked
   file, or a browser extension would leave a completely blank page.
   Content must never depend on an animation running. */
.js-motion .reveal, .js-motion .sd-rise, .js-motion .section {
  opacity: 0; transform: translate3d(0, 26px, 0);
  transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
  will-change: opacity, transform;
}
.js-motion .reveal.in, .js-motion .sd-rise.in, .js-motion .section.in { opacity: 1; transform: none; }
/* Dropped once the animation is done, so the compositor is not holding
   a layer for every section for the life of the page. */
.js-motion .reveal.in, .js-motion .sd-rise.in, .js-motion .section.in { will-change: auto; }

.js-motion .stagger > * {
  opacity: 0; transform: translate3d(0, 20px, 0);
  transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1);
}
.js-motion .in .stagger > *, .js-motion .stagger.in > * { opacity: 1; transform: none; }

/* Frosted glass, where there is something behind worth showing through. */
.flowmap, .price-part, .aic-col, .ps-col, .ai-cost-always {
  backdrop-filter: blur(14px) saturate(1.25);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
}

/* Cards lift toward the pointer. Small, quick, and only on devices with
   a real pointer — a hover state on a touchscreen is a stuck state. */
@media (hover: hover) {
  .price-part, .aic-col, .ps-col, .step, .fm-box {
    transition: transform .35s cubic-bezier(.22,1,.36,1), border-color .35s ease, box-shadow .35s ease;
  }
  .price-part:hover, .aic-col:hover, .ps-col:hover, .step:hover {
    transform: translateY(-4px);
    border-color: rgba(77,168,255,.5);
    box-shadow: 0 18px 44px -22px rgba(77,168,255,.4);
  }
}

/* Kinetic headline: each line arrives a beat after the one above. */
.hero-headline > * { display: block; animation: lineIn .9s cubic-bezier(.22,1,.36,1) both; }
.hero-headline > *:nth-child(1) { animation-delay: .05s; }
.hero-headline > *:nth-child(2) { animation-delay: .17s; }
.hero-headline > *:nth-child(3) { animation-delay: .29s; }
.hero-headline > *:nth-child(4) { animation-delay: .41s; }
.hero-headline > *:nth-child(5) { animation-delay: .53s; }
@keyframes lineIn {
  from { opacity: 0; transform: translate3d(0, 18px, 0); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* Everything above respects a person's own setting. Motion sickness is
   not a preference to override for a background effect. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .sd-rise, .section, .stagger > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-headline > * { animation: none !important; }
  #hero-canvas { opacity: .55; }
}

/* =====================================================================
   LOW-POWER MODE
   Added by the script when the page measures itself as struggling. The
   site keeps its gradients, colour and typography — which is most of
   the design — and drops everything that costs a compositor real work.
   A fast plain page beats a beautiful stuttering one, every time.
===================================================================== */
.low-power #hero-canvas { display: none !important; }
.low-power .flowmap,
.low-power .price-part,
.low-power .aic-col,
.low-power .ps-col,
.low-power .ai-cost-always {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.low-power .space-layer { animation: none !important; opacity: .35 !important; }
.low-power [data-depth] { transform: none !important; }
.low-power .reveal, .low-power .sd-rise, .low-power .section, .low-power .stagger > * {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
.low-power .hero-headline > * { animation: none !important; }
.low-power .price-part:hover, .low-power .aic-col:hover,
.low-power .ps-col:hover, .low-power .step:hover { transform: none; box-shadow: none; }

/* =====================================================================
   THE FINISHING PASS
   ---------------------------------------------------------------------
   Everything below is polish applied on top of a working interface. It
   changes how things feel, never what they do — no layout is moved in a
   way that could hide a control, and every effect degrades to plain and
   fast under .low-power.
===================================================================== */

/* --- Typography: bigger, tighter, more confident ------------------- */
h1, .hero-headline { letter-spacing: -0.035em; line-height: 1.04; }
h2 { letter-spacing: -0.028em; line-height: 1.12; }
.section-head h2 { font-size: clamp(1.75rem, 4.2vw, 2.9rem); }
.section-head p { font-size: clamp(.95rem, 1.6vw, 1.08rem); max-width: 56ch; margin-left: auto; margin-right: auto; }
.section { padding-block: clamp(56px, 9vw, 108px); }

/* A moving sheen on the key headings. Slow enough to notice only if you
   look, which is the difference between premium and distracting. */
.section-head h2, .hero-headline {
  background: linear-gradient(100deg, #C9E4FF 0%, #E8F4FF 42%, #4DA8FF 58%, #C9E4FF 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: sheen 9s ease-in-out infinite;
}
@keyframes sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.low-power .section-head h2, .low-power .hero-headline { animation: none; }

/* --- Buttons: weightier, with a light that follows the pointer ----- */
.btn {
  position: relative; overflow: hidden;
  border-radius: 12px; font-weight: 650; letter-spacing: -0.01em;
  transition: transform .22s cubic-bezier(.22,1,.36,1), box-shadow .28s ease, filter .22s ease;
}
.btn-primary {
  background: linear-gradient(135deg, #7CC4FF 0%, #4DA8FF 45%, #2E7BFF 100%);
  box-shadow: 0 8px 24px -10px rgba(77,168,255,.65), inset 0 1px 0 rgba(255,255,255,.45);
  border: none; color: #041020;
}
@media (hover: hover) {
  .btn-primary:hover { transform: translateY(-2px); filter: brightness(1.06);
    box-shadow: 0 16px 36px -12px rgba(77,168,255,.8), inset 0 1px 0 rgba(255,255,255,.55); }
  .btn-secondary:hover { transform: translateY(-2px); border-color: rgba(77,168,255,.6);
    background: rgba(77,168,255,.1); }
  /* A sweep of light across the face on hover. */
  .btn-primary::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.42) 50%, transparent 65%);
    transform: translateX(-120%); transition: transform .62s cubic-bezier(.22,1,.36,1);
  }
  .btn-primary:hover::after { transform: translateX(120%); }
}
.btn:active { transform: translateY(0) scale(.985); }
.low-power .btn::after { display: none; }

/* --- Cards: a hairline of light along the top edge ----------------- */
.price-part, .aic-col, .ps-col, .flowmap, .step, .ai-cost-always, .cost-panel {
  position: relative; border-radius: 17px;
}
.price-part::before, .aic-col::before, .ps-col::before, .flowmap::before, .ai-cost-always::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(124,196,255,.65), transparent);
  border-radius: 17px 17px 0 0;
}
.aic-managed::before, .ps-managed::before {
  background: linear-gradient(90deg, transparent, rgba(0,229,255,.7), transparent);
}

/* --- Pack tiles: the thing people click ---------------------------- */
.pack { border-radius: 13px; padding: 14px 12px; }
.pack b { font-size: 1.22rem; letter-spacing: -0.02em; }
@media (hover: hover) {
  a.pack:hover { transform: translateY(-3px) scale(1.015);
    box-shadow: 0 14px 30px -14px rgba(0,229,255,.55); border-color: rgba(0,229,255,.6); }
}

/* --- Navigation: frosted, and it settles once you scroll ----------- */
.nav {
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  background: rgba(6,5,3,.72); border-bottom: 1px solid rgba(77,168,255,.14);
  transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.nav.scrolled { background: rgba(6,5,3,.92); box-shadow: 0 10px 34px -20px rgba(0,0,0,.95); }
.low-power .nav { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,5,3,.95); }

/* Links get an underline that grows from the left. */
.nav-links a { position: relative; }
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -5px; height: 1.5px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
@media (hover: hover) { .nav-links a:hover::after { transform: scaleX(1); } }

/* --- Focus: visible, and clearly ours ------------------------------ */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

/* --- Everything scrolls as one, not in jerks ----------------------- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Provider picker — shown when we cannot detect the line */
.prov-group { margin-bottom: 14px; }
.prov-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 7px; }
.prov-opt { display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  background: rgba(77,168,255,.04); border: 1px solid var(--border);
  border-radius: 10px; padding: 11px 13px; margin-bottom: 6px; }
.prov-opt:has(input:checked) { border-color: var(--gold); background: rgba(77,168,255,.12); }
.prov-opt input { margin-top: 3px; flex-shrink: 0; }
.prov-opt b { display: block; font-size: .88rem; color: var(--text); }
.prov-svc { display: block; font-size: .76rem; color: var(--text-faint); line-height: 1.5; }
.prov-none { margin-top: 4px; border-style: dashed; }
.po-note-line { font-size: .8rem; color: var(--caramel); line-height: 1.6; margin: 0 0 12px; }

/* =====================================================================
   ACTION BARS THAT FOLLOW YOU
   The primary button used to sit at the end of a long form, so people
   filled everything in and then had to hunt for it — several swipes on
   a phone. These stay on screen, and say what is still missing rather
   than letting someone press a button that will refuse them.
===================================================================== */
.sticky-actions {
  /* FIXED, not sticky.

     position:sticky only engages when every ancestor allows it — one
     overflow:hidden anywhere up the tree and it silently does nothing.
     Testing showed exactly that: the button sat at 726px in a 700px
     window, off the bottom of a phone screen, which is the problem this
     bar exists to solve. fixed has no such dependency. */
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px max(18px, calc((100vw - 760px) / 2));
  margin: 0;
  background: linear-gradient(to top, rgba(6,5,3,.98) 70%, rgba(6,5,3,.88));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid rgba(77,168,255,.22);
  border-radius: 0;
}

/* Room at the bottom of the page so the bar never covers the last
   field — a control you cannot reach is worse than one you must scroll
   to. */
body:has(.sticky-actions) { padding-bottom: 96px; }
@media (max-width: 560px) { body:has(.sticky-actions) { padding-bottom: 132px; } }
.wn-hint { font-size: .82rem; color: var(--text-faint); line-height: 1.5; }
.wn-hint.ready { color: var(--aurora-a); }
.sticky-actions .btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .sticky-actions { flex-direction: column; align-items: stretch; gap: 9px; }
  .sticky-actions .btn { width: 100%; }
  .wn-hint { text-align: center; }
}
.low-power .sticky-actions { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6,5,3,.98); }

/* =====================================================================
   ONE SCREEN AT A TIME
   The wizard used to show nine role cards and, underneath them, every
   field. Choosing a role revealed fields below the fold, so the first
   thing you did after choosing was scroll past what you had just read.
   Now each screen replaces the last.
===================================================================== */
.wiz-screen { display: none; }
.wiz-screen.is-on { display: block; animation: screenIn .34s cubic-bezier(.22,1,.36,1); }
@keyframes screenIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.wiz-back {
  background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .85rem; color: var(--caramel); padding: 0 0 14px;
}
.wiz-back:hover { color: var(--gold); }
@media (prefers-reduced-motion: reduce) { .wiz-screen.is-on { animation: none; } }


/* The wizard's second screen can be long when a business has several
   context questions. Same treatment: the screen never exceeds the
   viewport, and the fields scroll inside it rather than pushing the
   action bar out of reach. */
.wiz-screen#screen-details.is-on {
  display: flex; flex-direction: column;
  max-height: calc(100vh - 190px);
}
.wiz-screen#screen-details > .wiz-back,
.wiz-screen#screen-details > h2,
.wiz-screen#screen-details > .sub { flex-shrink: 0; }
.wiz-screen#screen-details > #business-context-section,
.wiz-screen#screen-details > .field { flex-shrink: 0; }
#screen-details { overflow-y: auto; }
@media (max-width: 560px) {
  .wiz-screen#screen-details.is-on { max-height: calc(100vh - 210px); }
}

/* =====================================================================
   LAYOUT AND TOUCH — the usability pass
   ---------------------------------------------------------------------
   Two principles, applied everywhere:

   1. NOTHING TAPPABLE IS SMALLER THAN 44px.
      That is the size of an adult fingertip. A 34px button works fine
      with a mouse and is genuinely hard to hit on a phone — you aim,
      miss, and try again. Measured: .btn-sm was 8px padding, about
      34px tall.

   2. ONE OBVIOUS NEXT ACTION PER SCREEN.
      Two buttons of equal weight is a decision. A primary and a quiet
      secondary is an instruction.
===================================================================== */

/* --- Touch targets --------------------------------------------------- */
.btn { min-height: 48px; padding: 13px 26px; font-size: .95rem; }
.btn-sm { min-height: 44px; padding: 11px 18px; font-size: .88rem; }
input, select, textarea { min-height: 48px; padding: 13px 15px; font-size: 1rem; }
textarea { min-height: 96px; }
/* 16px stops iOS zooming the whole page when a field is focused, which
   is disorienting and then leaves the layout half off screen. */
@media (max-width: 768px) { input, select, textarea { font-size: 16px; } }

/* Anything clickable that is not a button still needs the room. */
.role-opt, .dep-card, .pack, .phone-opt, .prov-opt, .aic-pack { min-height: 56px; }
.nav-links a { padding: 10px 4px; display: inline-block; }

/* --- Breathing room -------------------------------------------------- */
.field { margin-bottom: 20px; }
.field label, label { display: block; margin-bottom: 7px; font-size: .88rem; color: var(--text); }
.wizard-panel { padding: clamp(22px, 4vw, 38px); }
.card { padding: clamp(20px, 3.5vw, 30px); }

/* --- Hierarchy: one clear action ------------------------------------- */
.btn-secondary {
  background: transparent; border: 1px solid rgba(77,168,255,.28); color: var(--text-muted);
  box-shadow: none; font-weight: 550;
}
@media (hover: hover) { .btn-secondary:hover { color: var(--text); border-color: rgba(77,168,255,.55); } }

/* --- The role grid: readable at a glance ----------------------------- */
.role-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 12px; margin-bottom: 4px;
}
.role-opt {
  display: flex; flex-direction: column; gap: 6px; padding: 18px 16px;
  border-radius: 14px; text-align: left;
}
.role-opt .name { font-size: .96rem; font-weight: 650; line-height: 1.3; }
.role-opt .desc { font-size: .78rem; color: var(--text-faint); line-height: 1.5; }
.role-opt.selected, .role-opt.active {
  border-color: var(--gold); background: rgba(77,168,255,.12);
  box-shadow: 0 0 0 1px rgba(77,168,255,.3);
}
@media (max-width: 420px) { .role-grid { grid-template-columns: 1fr 1fr; } .role-opt { padding: 15px 13px; } }

/* --- Channel cards: status first, action second ---------------------- */
.dep-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px; border-radius: 15px;
}
.dep-card h3 { font-size: 1rem; margin: 0; }
.dep-card .dep-state {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
  text-transform: uppercase; padding: 5px 10px; border-radius: 100px; align-self: flex-start;
}
.dep-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }

/* --- Dashboard: the agent is the hero -------------------------------- */
.agent-card, .agent-item {
  padding: 22px; border-radius: 16px; margin-bottom: 14px;
}
.agent-card .btn, .agent-item .btn { min-height: 44px; }

/* --- Readable measure ------------------------------------------------ */
p, li { max-width: 68ch; }
.section-head p { max-width: 58ch; }

/* --- Anything scrollable says so ------------------------------------- */
.dep-grid, .role-grid, table { scrollbar-width: thin; }

/* --- The two things measurement caught -------------------------------
   Nav links rendered at 40px — my padding rule was there but the
   anchors had no min-height, so the line box decided the size. And
   .agent-actions laid four buttons in a row that ran 90px past a
   410px screen, which is a horizontal scrollbar on a phone: the
   clearest possible sign that a layout was only ever checked wide.
--------------------------------------------------------------------- */
.nav-links a { min-height: 44px; display: inline-flex; align-items: center; }

.agent-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.agent-actions .btn { flex: 1 1 auto; min-width: 0; }
@media (max-width: 560px) {
  .agent-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .agent-actions .btn { width: 100%; }
}

/* Decorative background layers must never widen the page. They are
   positioned art; a scrollbar caused by art is indefensible. */
.space-layer { max-width: 100vw; overflow: hidden; pointer-events: none; }
html, body { overflow-x: hidden; }

/* =====================================================================
   THE PRICING PAGE
   One question per screen, then a bill. Nothing is calculated in the
   browser — every figure comes from the server, so the page and the
   card can never disagree.
===================================================================== */
.pricing-page { max-width: 760px; margin: 0 auto; padding: 100px 20px 80px; position: relative; z-index: 2; }
.pr-step { display: none; }
.pr-step.is-on { display: block; animation: screenIn .34s cubic-bezier(.22,1,.36,1); }
.pr-head { text-align: center; margin-bottom: 28px; }
.pr-eyebrow { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em;
  color: var(--blue); margin-bottom: 12px; }
.pr-head h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); line-height: 1.12; margin: 0 0 12px; }
.pr-sub { font-size: .95rem; color: var(--text-muted); line-height: 1.7; max-width: 52ch; margin: 0 auto; }
.pr-back { background: none; border: none; cursor: pointer; font-family: inherit;
  font-size: .84rem; color: var(--caramel); padding: 0 0 14px; }
.pr-back:hover { color: var(--blue-bright); }

/* --- the two choices ------------------------------------------------ */
.pr-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
.pr-choice {
  position: relative; text-align: left; cursor: pointer; font-family: inherit;
  background: linear-gradient(168deg, rgba(10,20,32,.9), rgba(5,10,16,.96));
  border: 1px solid var(--border); border-radius: 16px; padding: 24px 20px;
  display: flex; flex-direction: column; gap: 8px; min-height: 200px;
  transition: border-color .26s ease, transform .26s var(--ease), box-shadow .26s ease;
}
.pr-choice:hover { border-color: var(--blue); transform: translateY(-3px);
  box-shadow: 0 18px 44px -20px rgba(77,168,255,.45); }
.pr-choice-featured { border-color: rgba(0,229,255,.4); }
.pr-choice-icon { font-size: 1.6rem; }
.pr-choice b { font-size: 1.05rem; color: var(--text); }
.pr-choice > span { font-size: .84rem; color: var(--text-muted); line-height: 1.65; flex: 1; }
.pr-choice-price { font-size: 1.5rem; font-weight: 800; color: var(--blue); letter-spacing: -.02em; }
.pr-choice-price em { font-style: normal; font-size: .72rem; color: var(--text-faint); font-weight: 500; margin-left: 4px; }
.pr-choice-tag { position: absolute; top: 14px; right: 14px;
  font-family: var(--font-mono); font-size: .54rem; letter-spacing: .12em;
  color: var(--lightning); border: 1px solid rgba(0,229,255,.34); border-radius: 100px; padding: 4px 9px; }
.pr-foot { text-align: center; font-size: .85rem; color: var(--text-faint); margin-top: 18px; }

/* --- credit packs --------------------------------------------------- */
.pr-packs { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 11px; }
.pr-pack {
  cursor: pointer; font-family: inherit; text-align: center;
  background: rgba(0,229,255,.06); border: 1px solid rgba(0,229,255,.26);
  border-radius: 14px; padding: 20px 12px; min-height: 96px;
  display: flex; flex-direction: column; gap: 6px; justify-content: center;
  transition: background .2s ease, transform .2s var(--ease), border-color .2s ease;
}
.pr-pack:hover { background: rgba(0,229,255,.16); transform: translateY(-3px); border-color: var(--lightning); }
.pr-pack b { font-size: 1.35rem; color: var(--lightning); font-weight: 800; }
.pr-pack span { font-size: .72rem; color: var(--text-faint); line-height: 1.45; }
.pr-loading { grid-column: 1 / -1; text-align: center; color: var(--text-faint); font-size: .88rem; padding: 30px 0; }

/* --- the bill ------------------------------------------------------- */
.pr-bill { background: linear-gradient(168deg, rgba(10,20,32,.92), rgba(5,10,16,.97));
  border: 1px solid rgba(77,168,255,.3); border-radius: 18px; padding: 26px; }
.pr-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid rgba(77,168,255,.14); }
.pr-line b { display: block; font-size: .96rem; color: var(--text); margin-bottom: 3px; }
.pr-line span { font-size: .8rem; color: var(--text-faint); line-height: 1.55; }
.pr-line-amt { font-family: var(--font-mono); font-size: 1rem; color: var(--text); white-space: nowrap; }
.pr-bill-total { display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0 10px; }
.pr-bill-total span { font-size: .9rem; color: var(--text-muted); }
.pr-bill-total b { font-size: 2rem; font-weight: 800; color: var(--lightning); letter-spacing: -.02em; }
.pr-bill-note { font-size: .82rem; color: var(--text-faint); line-height: 1.65; margin: 0 0 8px; }
.pr-where { margin: 16px 0 20px; }
.pr-where summary { cursor: pointer; font-size: .86rem; color: var(--caramel); padding: 8px 0; }
.pr-where summary:hover { color: var(--blue-bright); }
.pr-bd { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0;
  border-bottom: 1px solid rgba(77,168,255,.1); font-size: .84rem; }
.pr-bd b { display: block; color: var(--text); }
.pr-bd span { display: block; font-size: .76rem; color: var(--text-faint); line-height: 1.55; margin-top: 2px; }
.pr-bd > div:last-child { font-family: var(--font-mono); color: var(--text-muted); white-space: nowrap; }
.pr-bd-note { font-size: .8rem; color: var(--text-faint); line-height: 1.65; margin: 14px 0 0;
  padding: 12px 14px; background: rgba(77,168,255,.07); border-radius: 10px; }
.pr-pay { width: 100%; justify-content: center; }
.pr-secure { text-align: center; font-size: .78rem; color: var(--text-faint); margin: 12px 0 0; }
.pr-error { color: var(--danger); font-size: .86rem; text-align: center; margin-top: 12px; }

@media (max-width: 620px) {
  .pricing-page { padding: 84px 16px 70px; }
  .pr-choices { grid-template-columns: 1fr; }
  .pr-choice { min-height: 0; padding: 20px 18px; }
  .pr-packs { grid-template-columns: 1fr 1fr; }
}