/* =============================================================================
   Ekkovia — Redesign (dark-mode, computational)
   Design system v2. Dark-first; not the light cream site.
   ========================================================================== */

/* ---- Fonts -------------------------------------------------------------- */
@font-face {
  font-family: "Michroma";
  src: url("../fonts/Michroma-Regular.ttf") format("truetype");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Montserrat";
  src: url("../fonts/Montserrat-Bold.otf") format("opentype");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------- */
:root {
  /* Ground + surfaces */
  --bg:        #0A0F1A;
  --bg-2:      #0C1220;
  --surface:   #0E1524;
  --surface-2: #111a2c;
  --panel:     #121C30;
  --line:      rgba(255,255,255,.08);
  --line-2:    rgba(255,255,255,.13);
  --line-blue: rgba(45,107,255,.28);

  /* Brand */
  --blue:      #2D6BFF;
  --blue-soft: #5B8BFF;
  --blue-deep: #1B47B8;
  --gold:      #EFBF04;
  --gold-soft: #F7D24A;
  --green:     #34D399;
  --red:       #F0736B;

  /* Text */
  --text:      #E6E8EE;
  --muted:     #97A2B6;   /* cool gray — ~6.2:1 on --bg */
  --faint:     #5F6B82;

  /* HexNet cell palette (consumed by hexnet.js state map) */
  --hx-idle:  #35507F;
  --hx-blue:  #2D6BFF;
  --hx-gold:  #EFBF04;
  --hx-white: #DCE6FF;
  --hx-green: #34D399;
  --hx-red:   #F0736B;

  /* Type */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter",
          "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Montserrat", var(--sans);
  --tech: "Michroma", var(--sans);

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 16px;
  --radius-sm: 10px;
  --radius-lg: 22px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);

  /* Card shadow. Previously declared ONLY under [data-theme="light"], which made
     every `box-shadow: … var(--shadow)` invalid at computed-value time on the
     default dark theme — so those shadows silently resolved to `none`, including
     the Studio card's blue feature glow. Declared here so the token always
     resolves; light mode still overrides it with its warmer value. */
  --shadow: 0 20px 54px rgba(0,0,0,.55);
}

/* ---- Light mode = warm CREAM theme (toggle) ----------------------------- */
:root[data-theme="light"] {
  --bg:        #F5EAD7;
  --bg-2:      #EEDFC7;
  --surface:   #FFFDF8;
  --surface-2: #FBF3E7;
  --panel:     #FFFDF8;
  --line:      rgba(9,32,64,.16);
  --line-2:    rgba(9,32,64,.24);
  --line-blue: rgba(45,107,255,.34);

  --blue-soft: #1F5AE0;

  --text:  #0A2247;
  --muted: #2F4670;   /* darker for readability on cream */
  --faint: #5C6A86;

  /* status/accent green readable on cream */
  --green: #0E9F6E;

  /* HexNet palette — Option B "Deep": readable on the cream ground */
  --hx-idle:  #576990;
  --hx-blue:  #2158D6;
  --hx-gold:  #C87A16;
  --hx-green: #0E9F6E;
  --hx-red:   #C6564E;
  --hx-white: #10233F;

  --shadow: 0 18px 50px rgba(9,32,64,.16);
}
:root[data-theme="light"] body { background: var(--bg); }
/* faint warm-navy technical grid on cream */
:root[data-theme="light"] body::before {
  background:
    linear-gradient(rgba(7,45,90,.05) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(7,45,90,.05) 1px, transparent 1px) 0 0 / 46px 100%;
}
:root[data-theme="light"] body::after {
  background: radial-gradient(90% 60% at 50% -10%, rgba(239,191,4,.10), transparent 60%);
}
:root[data-theme="light"] .nav-inner { background: rgba(255,253,249,.62); border-color: rgba(7,45,90,.10); box-shadow: 0 14px 44px -18px rgba(7,45,90,.28), inset 0 1px 0 rgba(255,255,255,.7); }
:root[data-theme="light"] .nav.scrolled .nav-inner { background: rgba(255,253,249,.82); }
:root[data-theme="light"] .btn-ghost { background: rgba(7,45,90,.03); }
:root[data-theme="light"] .theme-toggle { background: rgba(7,45,90,.04); }
:root[data-theme="light"] .app,
:root[data-theme="light"] .player,
:root[data-theme="light"] .pipe-card { box-shadow: 0 26px 60px -30px rgba(7,45,90,.32); }
:root[data-theme="light"] .foot-wordmark { filter: brightness(0) saturate(0); opacity: .1; }
:root[data-theme="light"] em { color: var(--gold-deep, #E89412); }
/* Bright --gold (#EFBF04) is legible on dark but not on cream. Deepen it to a
   readable bronze wherever it's used as small TEXT — labels, eyebrows, section
   numbers, links. Buttons + hex marks keep the bright --gold. Readability first. */
:root[data-theme="light"] .eyebrow,
:root[data-theme="light"] .sec-meta b,
:root[data-theme="light"] .link-arrow,
:root[data-theme="light"] .pipe-label,
:root[data-theme="light"] .events li.on .ev-t,
:root[data-theme="light"] .bb-phrases i,
:root[data-theme="light"] .pc-note.is-alert { color: #8A5300; }
:root[data-theme="light"] .sec-meta { color: var(--text); }

/* ---- Reset / base ------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
}
/* The guard has to sit on the ROOT as well, not just body: the viewport takes its
   overflow from <html>, so a body-only rule still let the document scroll sideways
   (measured 457px of scrollWidth in a 375px viewport). `clip` rather than `hidden`
   because hidden makes the root a scroll container and kills the sticky nav.
   This is the safety net — individual overflows are still fixed at the source. */
html { overflow-x: clip; max-width: 100%; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
::selection { background: rgba(45,107,255,.35); color: #fff; }

/* subtle page-wide technical grid + vignette, behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 100% 46px,
    linear-gradient(90deg, rgba(255,255,255,.022) 1px, transparent 1px) 0 0 / 46px 100%;
  -webkit-mask-image: radial-gradient(120% 80% at 50% 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(120% 80% at 50% 0%, #000 55%, transparent 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -3; pointer-events: none;
  background: radial-gradient(90% 60% at 50% -10%, rgba(45,107,255,.10), transparent 60%);
}

/* ---- Focus + a11y ------------------------------------------------------- */
:focus-visible {
  outline: 2px solid var(--blue-soft);
  outline-offset: 3px;
  border-radius: 6px;
}
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 200;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 10px;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* =============================================================================
   HexNet
   ========================================================================== */
.hexnet { position: relative; width: 100%; height: 100%; line-height: 0; }
.hx-svg { width: 100%; height: 100%; overflow: visible; }
/* Gradual fade at the hex extent so every field diffuses into the background
   instead of ending on a hard rectangular line (aligned to the SVG, not the box). */
.stage-net .hx-svg, .mem-net .hx-svg, .cta-net .hx-svg, .fl-node .hx-svg {
  -webkit-mask-image: radial-gradient(68% 70% at 50% 50%, #000 30%, transparent 96%);
          mask-image: radial-gradient(68% 70% at 50% 50%, #000 30%, transparent 96%);
}
/* Hero constellation fills the whole column: keep most of it opaque (only feather the
   outer edge) and bias the bright centre upward into the empty band above the app. */
.stage-net .hx-svg {
  -webkit-mask-image: radial-gradient(120% 88% at 50% 40%, #000 62%, transparent 100%);
          mask-image: radial-gradient(120% 88% at 50% 40%, #000 62%, transparent 100%);
}
.hx {
  --a: 0; --f: 0; --e: 1;
  fill: var(--hx-base, var(--hx-blue));
  stroke: var(--hx-base, var(--hx-blue));
  stroke-width: 1;
  /* --e = per-cell edge-diffusion weight: cells dissolve toward the border so the
     grid fades into the background instead of ending on a hard rectangular line.
     Inactive cells are fully invisible (no baseline stroke) so there is NO static
     honeycomb outline — only lit hexes emerge from the background. */
  fill-opacity: calc(var(--a) * 0.92 * var(--e));
  stroke-opacity: calc(var(--a) * 0.5 * var(--e));
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(calc(0.92 + var(--a) * 0.12));
  transition: fill-opacity .12s linear, stroke-opacity .12s linear;
}
/* gold focus blend (falls back to base where color-mix is unsupported) */
@supports (color: color-mix(in srgb, red, blue)) {
  .hx {
    fill: color-mix(in srgb, var(--hx-base) calc((1 - var(--f)) * 100%), var(--hx-focus) calc(var(--f) * 100%));
    stroke: color-mix(in srgb, var(--hx-base) calc((1 - var(--f)) * 100%), var(--hx-focus) calc(var(--f) * 100%));
  }
}
/* Luminous cells: one drop-shadow on the whole grid. Transparent (dim) cells cast
   nothing, so only bright cells bloom — the "alive" glow from the concept board
   without a per-cell filter. Scaled by the instance's --hx-glow. */
.hx-svg { filter: drop-shadow(0 0 calc(2px + var(--hx-glow, .5) * 6px) rgba(78,138,255,.5)); }

/* Constellation link layer: thin blue edges between nodes + gold data-packets that ride
   them. Colours inherit the instance's --hx-base / --hx-focus (set on the <svg>), so they
   theme with everything else. Opacity is driven per-frame from JS. */
.hx-link { stroke: var(--hx-base, var(--hx-blue)); stroke-width: 1; fill: none;
  transition: stroke-opacity .12s linear; }
.hx-packet { fill: var(--hx-focus, var(--hx-gold)); transition: opacity .1s linear; }

/* an inline tech indicator: fixed small box */
.hx-inline { display: inline-block; width: 44px; height: 30px; vertical-align: middle; }

/* =============================================================================
   Layout primitives
   ========================================================================== */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding: clamp(46px, 7vw, 92px) 0; }
/* Wraps so a long trailing chip (the Experimental pill) drops to its own line on a
   phone instead of forcing the whole page wider than the viewport. */
.sec-head { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; flex-wrap: wrap; }
.sec-head.center { justify-content: center; }
.sec-meta { font-family: var(--tech); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
.sec-meta b { color: var(--gold); font-weight: 400; margin-right: 8px; }
.sec-meta.center { text-align: center; width: 100%; }

h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.03; text-wrap: balance; }
h1 { font-size: clamp(38px, 6.4vw, 76px); }
h2 { font-size: clamp(30px, 4.6vw, 54px); }
em { font-style: normal; color: var(--gold); }
em.blue { color: var(--blue-soft); }
.center-h { text-align: center; max-width: 18ch; margin: 0 auto clamp(40px, 6vw, 70px); }

/* =============================================================================
   Buttons + links
   ========================================================================== */
.btn {
  --pad: 12px 20px;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--sans); font-weight: 600; font-size: 15px;
  padding: var(--pad); border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .18s var(--ease), background .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  white-space: nowrap;
}
.btn.lg { --pad: 15px 26px; font-size: 16px; }
.btn-primary { background: var(--gold); color: #1B1403; box-shadow: 0 0 0 1px rgba(239,191,4,.4), 0 14px 40px -12px rgba(239,191,4,.5); }
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(239,191,4,.6), 0 18px 50px -12px rgba(239,191,4,.6); }
/* nav CTA sits inside the glass pill — don't lift it toward the edge, just brighten */
.nav .btn-primary:hover { transform: none; background: var(--gold-soft); box-shadow: 0 0 0 1px rgba(239,191,4,.6), 0 0 24px -6px rgba(239,191,4,.55); }

/* theme toggle */
.theme-toggle {
  width: 38px; height: 38px; flex: none; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-2); color: var(--muted);
  cursor: pointer; transition: color .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.theme-toggle:hover { color: var(--text); border-color: var(--blue); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="light"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="light"] .theme-toggle .icon-moon { display: none; }
.btn-ghost { background: rgba(255,255,255,.03); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--blue); background: rgba(45,107,255,.08); transform: translateY(-2px); }
.btn .apple { width: 15px; height: 15px; }
.btn .play { font-size: 11px; color: var(--blue-soft); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; color: var(--gold); font-weight: 600; font-size: 15px; }
.link-arrow span { transition: transform .2s var(--ease); }
.link-arrow:hover span { transform: translateX(4px); }

/* =============================================================================
   NAV
   ========================================================================== */
/* Floating GLASS PILL nav (matches the live site): a rounded frosted capsule
   sitting over the page, denser once scrolled. */
.nav { position: sticky; top: 0; z-index: 100; padding: 14px var(--gutter) 0; background: transparent; }
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 14px 0 22px;
  border-radius: 999px;
  background: rgba(16,24,41,.55);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
          backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 14px 44px -16px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.07);
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.nav.scrolled .nav-inner {
  background: rgba(12,18,32,.72);
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 50px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
}
/* fallback for engines without backdrop-filter */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav-inner { background: rgba(12,18,32,.94); }
}
.brand { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
/* transparent icon (no navy box); wings swap color per theme, flame stays gold */
/* The mark is RIGID: flex:none + fixed square + object-fit so flexbox can never steal
   width from it (that produced a skinny winged-K when the nav got tight on Android).
   The wordmark is the elastic element that absorbs any squeeze instead (min-width:0). */
.brand-mark { display: inline-flex; flex: none; }
.brand-mark .mk { display: block; flex: none; width: 30px; height: 30px; object-fit: contain; }
.brand-mark .mk-light { display: none; }
:root[data-theme="light"] .brand-mark .mk-dark { display: none; }
:root[data-theme="light"] .brand-mark .mk-light { display: block; }
/* brand wordmark = the real logotype geometry (with the special A), themed via a
   CSS mask so the letters take a color: white in dark, navy in light. */
.brand-word {
  display: block; height: 17px; aspect-ratio: 2008 / 228; min-width: 0;
  background-color: #ffffff;
  -webkit-mask: url("../brand/wordmark.svg") center / contain no-repeat;
          mask: url("../brand/wordmark.svg") center / contain no-repeat;
}
.footer .brand-word { height: 18px; }
:root[data-theme="light"] .brand-word { background-color: var(--text); }
.nav-links { display: flex; gap: 26px; }
.nav-links a { font-size: 14.5px; color: var(--muted); white-space: nowrap; transition: color .18s var(--ease); }
.nav-links a:hover { color: var(--text); }
.nav-cta { display: flex; align-items: center; gap: 16px; }

/* =============================================================================
   HERO
   ========================================================================== */
.hero { position: relative; padding: clamp(40px, 7vw, 86px) 0 clamp(24px, 4vw, 52px); overflow: hidden; }

/* Brand-band divider — fills the hero→section gap with a gold-accented tagline */
.brand-band { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 3vw, 34px); padding: clamp(18px, 3.5vw, 40px) var(--gutter) clamp(28px, 5vw, 60px); }
.bb-rail { flex: 1; max-width: 220px; height: 1px; background: linear-gradient(90deg, transparent, rgba(239,191,4,.55)); }
.bb-rail-r { background: linear-gradient(90deg, rgba(239,191,4,.55), transparent); }
.bb-phrases { display: inline-flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); font-family: var(--tech); font-size: clamp(10px, 1.15vw, 12.5px); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.bb-phrases i { color: var(--gold); font-style: normal; font-size: .72em; filter: drop-shadow(0 0 6px rgba(239,191,4,.6)); }
@media (max-width: 640px) {
  .bb-rail { display: none; }
  .bb-phrases { white-space: normal; flex-wrap: wrap; justify-content: center; text-align: center; }
}
.hero-grid { display: grid; grid-template-columns: 1.02fr 1.12fr; gap: clamp(30px, 5vw, 64px); align-items: stretch; }
.hero-copy { align-self: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: var(--tech); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 22px; }
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px rgba(240,115,107,.18); animation: blink 1.8s var(--ease) infinite; }
.eyebrow .ell { letter-spacing: 0; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.35} }
.hero-copy h1 { margin-bottom: 22px; }
.lead { font-size: clamp(16px, 1.5vw, 18.5px); color: var(--muted); max-width: 46ch; margin-bottom: 30px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-actions.center { justify-content: center; }
.sysline { display: flex; align-items: center; gap: 12px; margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--line); }
.sys-label { font-family: var(--tech); font-size: 10px; letter-spacing: .2em; color: var(--faint); }
.sys-body { font-size: 13px; color: var(--muted); }

/* Hero product mockup */
/* Stage stretches to the full row height; the constellation fills the whole right
   column and the app card floats centered within it (net behind, above + around). */
.hero-stage { position: relative; display: flex; align-items: center; justify-content: center; }
.stage-net { position: absolute; inset: -5% -6% -5% -6%; z-index: 0; opacity: 1; }
.app {
  position: relative; z-index: 1; width: 100%;
  background: linear-gradient(180deg, var(--panel), var(--surface));
  border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(45,107,255,.06), 0 0 60px -20px rgba(45,107,255,.25);
}
.app-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.app-brand { display: inline-flex; align-items: center; gap: 7px; font-family: var(--tech); font-size: 10px; letter-spacing: .16em; color: var(--muted); }
.app-tools { display: inline-flex; gap: 8px; margin-left: auto; }
.app-tools i { width: 14px; height: 14px; border: 1px solid var(--line-2); border-radius: 4px; }
.app-export { font-size: 11px; color: var(--text); background: rgba(45,107,255,.16); border: 1px solid var(--line-blue); padding: 4px 10px; border-radius: 7px; }
.app-body { display: grid; grid-template-columns: 92px 1fr 132px; min-height: 190px; }
.col-label { font-family: var(--tech); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); margin-bottom: 10px; }
.app-scenes { padding: 12px 10px; border-right: 1px solid var(--line); }
.app-scenes ul { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.app-scenes li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--muted); padding: 6px 7px; border-radius: 7px; }
.app-scenes li .ic { font-size: 10px; opacity: .7; }
.app-scenes li.on { background: rgba(45,107,255,.14); color: var(--text); border: 1px solid var(--line-blue); }
.app-canvas { position: relative; padding: 16px; display: flex; align-items: center; justify-content: center; }
.mini-dash { width: 100%; background: var(--bg-2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.md-top { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.md-val { font-family: var(--display); font-size: 20px; }
.md-pill { font-size: 10px; color: var(--green); background: rgba(52,211,153,.12); padding: 2px 7px; border-radius: 6px; }
.md-chart { width: 100%; height: 62px; }
.md-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.md-rows span { height: 5px; border-radius: 3px; background: rgba(255,255,255,.06); }
.md-rows span:nth-child(2){ width: 82%; } .md-rows span:nth-child(3){ width: 64%; }
.app-cursor { position: absolute; top: 44%; left: 52%; color: #fff; font-size: 16px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); transform: rotate(-8deg); }
.app-props { padding: 12px 12px; border-left: 1px solid var(--line); }
.prop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--muted); padding: 7px 0; border-bottom: 1px solid var(--line-soft, rgba(255,255,255,.05)); }
.prop:last-child { border-bottom: 0; }
.prop > span { flex: none; }
.prop .val { color: var(--text); font-weight: 600; font-size: 10px; text-align: right; line-height: 1.15; white-space: nowrap; }
.prop .tog { width: 22px; height: 13px; border-radius: 999px; background: rgba(255,255,255,.1); position: relative; }
.prop .tog.on { background: var(--blue); }
.prop .tog::after { content:""; position: absolute; top: 2px; width: 9px; height: 9px; border-radius: 50%; background: #fff; left: 2px; }
.prop .tog.on::after { left: auto; right: 2px; }
.app-timeline { position: relative; padding: 12px 14px 16px; border-top: 1px solid var(--line); background: rgba(0,0,0,.16); }
.tl-scale { display: flex; justify-content: space-between; font-family: var(--tech); font-size: 8.5px; color: var(--faint); margin-bottom: 8px; }
.tl-track { position: relative; height: 18px; margin-bottom: 6px; display: flex; align-items: center; }
.tl-name { font-size: 9.5px; color: var(--muted); width: 52px; flex: none; }
.tl-track .clip { position: absolute; height: 12px; border-radius: 4px; left: 0; }
.clip.blue { background: linear-gradient(90deg, #2D6BFF, #4d80ff); }
.clip.blue2 { background: linear-gradient(90deg, #1B47B8, #2D6BFF); }
.clip.gold { background: linear-gradient(90deg, #EFBF04, #f7d24a); }
.tl-playhead { position: absolute; top: 30px; bottom: 12px; width: 1.5px; background: #fff; box-shadow: 0 0 8px rgba(255,255,255,.6); }
.tl-playhead::before { content:""; position: absolute; top: -4px; left: -3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; }

/* =============================================================================
   MULTI-CAPTURE
   ========================================================================== */
.capture-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.capture-copy h2 { margin-bottom: 18px; }
.capture-copy p { color: var(--muted); max-width: 40ch; margin-bottom: 24px; }
.capture-viz { position: relative; min-height: 300px; }
.capture-paths { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.capture-paths .sig { fill: none; stroke: var(--line-blue); stroke-width: 1.5; stroke-dasharray: 4 7; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -22; } }
.dev { position: relative; z-index: 1; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 24px 60px -30px rgba(0,0,0,.8); }
.dev-tag { font-family: var(--tech); font-size: 9px; letter-spacing: .18em; color: var(--muted); text-align: center; padding: 8px 0 10px; }
.dev-mac { position: absolute; left: 0; top: 6px; width: 43%; }
.dev-mac .dev-bar { display: flex; gap: 5px; padding: 8px 10px; border-bottom: 1px solid var(--line); }
.dev-mac .dev-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); }
.dev-screen { padding: 14px; }
.dev-val { font-family: var(--display); font-size: 18px; }
.dev-val.sm { font-size: 13px; }
.dev-lines { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.dev-lines span { height: 5px; border-radius: 3px; background: rgba(45,107,255,.2); }
.dev-lines span:nth-child(2){ width: 76%; } .dev-lines span:nth-child(3){ width: 58%; }
.dev-phone { position: absolute; left: 49%; top: 0; width: 19%; border-radius: 18px; }
.dev-phone .dev-notch { width: 34%; height: 5px; border-radius: 4px; background: var(--line-2); margin: 8px auto 0; }
.dev-cam { position: absolute; right: 1%; top: 12px; width: 19%; aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cam-orb { width: 62%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #24406e, #0c1526); border: 1px solid var(--line-2); margin-top: 8px; }
.capture-node { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 96px; height: 70px; z-index: 2; }
.capture-node::before { content:""; position: absolute; inset: -30%; background: radial-gradient(circle, rgba(45,107,255,.28), transparent 70%); }

/* =============================================================================
   ATTENTION
   ========================================================================== */
.attn-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(30px, 5vw, 60px); align-items: center; }
.attn-copy h2 { margin-bottom: 18px; }
.attn-copy > p { color: var(--muted); max-width: 38ch; margin-bottom: 26px; }
.pipeline { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; margin-bottom: 26px; }
.pipeline li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.pipeline li:not(.pl-arrow) { background: var(--surface); border: 1px solid var(--line); padding: 9px 13px; border-radius: 10px; }
.pipeline .pl-ic { color: var(--blue-soft); }
.pipeline .pl-arrow { color: var(--faint); }
.attn-viz { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.player { background: var(--surface); border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 70px -34px rgba(0,0,0,.8); }
.player-screen { position: relative; aspect-ratio: 16/10; background: linear-gradient(160deg, #0d1730, #0a1120); overflow: hidden; }
.pl-chart { position: absolute; inset: 20% 8% 18%; width: 84%; height: 62%; }
.focus-ring { position: absolute; left: 60%; top: 42%; width: 92px; height: 92px; border-radius: 50%; transform: translate(-50%,-50%);
  background: radial-gradient(circle, rgba(45,107,255,.28), transparent 62%); border: 1px solid rgba(91,139,255,.5);
  animation: focusPulse 3.4s var(--ease) infinite; }
@keyframes focusPulse { 0%,100%{ transform: translate(-50%,-50%) scale(.9); opacity:.75 } 50%{ transform: translate(-50%,-50%) scale(1.12); opacity:1 } }
.pl-cursor { position: absolute; left: 60%; top: 44%; color: #fff; font-size: 15px; filter: drop-shadow(0 2px 3px rgba(0,0,0,.7)); }
.player-ctl { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line); font-family: var(--tech); font-size: 9.5px; color: var(--muted); }
.pc-bar { flex: 1; height: 4px; border-radius: 3px; background: rgba(255,255,255,.08); position: relative; }
.pc-bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 30%; border-radius: 3px; background: var(--blue); }
.events { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.events li { position: relative; display: flex; gap: 12px; padding: 10px 12px 10px 22px; border-radius: 9px; font-size: 12.5px; color: var(--muted); }
.events li::before { content:""; position: absolute; left: 7px; top: 50%; width: 7px; height: 7px; border-radius: 50%; background: var(--line-2); transform: translateY(-50%); }
.events li.on { background: rgba(45,107,255,.09); color: var(--text); }
.events li.on::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(239,191,4,.16); }
.ev-t { font-family: var(--tech); font-size: 10px; color: var(--faint); flex: none; }
.events li.on .ev-t { color: var(--gold); }

/* =============================================================================
   TRANSFORM  (Raw → Ekkovia → Polished)
   ========================================================================== */
.pipe3 { display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(18px, 3vw, 40px); align-items: center; }
.pipe-card { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.pipe-card.done { border-color: var(--line-blue); box-shadow: 0 0 50px -20px rgba(45,107,255,.4); }
.pc-window { position: relative; aspect-ratio: 16/10; padding: 34px 16px 16px; background: #0b1220; }
.pc-window i { position: absolute; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.pc-window i:nth-child(1){ left: 14px; } .pc-window i:nth-child(2){ left: 28px; } .pc-window i:nth-child(3){ left: 42px; }
.pc-window svg { width: 100%; height: 60%; margin-top: 10%; }
.pc-grain { position: absolute; inset: 34px 16px 16px; border-radius: 6px; opacity: .5;
  background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 4px);
  filter: contrast(1.1); }
.pipe-card figcaption { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 3px; }
.pipe-card figcaption b { font-family: var(--display); font-size: 15px; }
.pipe-card figcaption span { font-size: 12px; color: var(--muted); }
.pipe-mid { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 168px; }
.pipe-mid .hexnet { width: 150px; height: 104px; }
.pipe-label { font-family: var(--tech); font-size: 10px; letter-spacing: .2em; color: var(--gold); }
/* old→new: a low-energy drift in the raw window, a resolved bloom in the polished one */
.pc-net { position: absolute; inset: 32px 14px 14px; z-index: 0; }
.pipe-card .pc-window > svg { position: relative; z-index: 1; }
.pipe-card.raw .pc-net { opacity: .5; }
.pipe-card.done .pc-net { opacity: .6; }

/* =============================================================================
   MEMORY
   ========================================================================== */
.mem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 64px); align-items: center; }
.mem-copy h2 { margin-bottom: 18px; }
.mem-copy > p { color: var(--muted); max-width: 42ch; margin-bottom: 26px; }
.mem-events { list-style: none; display: flex; flex-direction: column; gap: 8px; margin-bottom: 26px; }
.mem-events li { display: grid; grid-template-columns: 54px 1fr auto; align-items: center; gap: 14px;
  background: var(--surface); border: 1px solid var(--line); border-left: 2px solid var(--blue); border-radius: 10px; padding: 12px 14px; }
.me-t { font-family: var(--tech); font-size: 11px; color: var(--blue-soft); }
.me-x { font-size: 14px; color: var(--text); }
.me-tag { font-family: var(--tech); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: rgba(255,255,255,.05); padding: 4px 8px; border-radius: 6px; }
.me-tag.gold { color: #1B1403; background: var(--gold); }
.mem-events li:has(.gold) { border-left-color: var(--gold); }
/* net on top, tagline BELOW it (no overlap) so the line stays readable */
.mem-viz { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.mem-net { position: relative; width: 100%; aspect-ratio: 16/10; opacity: .8; }
.mem-brand { font-family: var(--tech); font-size: clamp(11px, 1.3vw, 13px); letter-spacing: .12em; color: var(--muted); text-align: center; max-width: 34ch; }

/* =============================================================================
   FINAL CTA
   ========================================================================== */
/* overflow-x clip stops the wide net from causing horizontal scroll WITHOUT
   vertically clipping it into a hard line (the net fades via its own mask). */
.cta { text-align: center; overflow-x: clip; }
.cta-inner { position: relative; }
/* in-flow (not absolute) so it stays inside the section — equal spacing above/below,
   never bleeds into the pricing section; the mask fades its edges. */
.cta-net { position: relative; margin: 0 auto clamp(4px, 1vw, 16px); width: min(760px, 96%); height: clamp(190px, 22vw, 262px); z-index: 0; opacity: .85; pointer-events: none; }
.cta-inner > * { position: relative; z-index: 1; }
.cta-h { font-size: clamp(34px, 5.6vw, 66px); margin: 14px 0 12px; }
.cta-sub { color: var(--muted); font-size: 17px; margin-bottom: 32px; }

/* =============================================================================
   FOOTER
   ========================================================================== */
.footer { position: relative; border-top: 1px solid var(--line); padding-top: clamp(50px, 7vw, 84px); overflow: hidden; }
.footer-top { display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; padding-bottom: 46px; }
.foot-tag { color: var(--muted); font-size: 14px; margin: 16px 0 14px; max-width: 30ch; }
.foot-status { display: inline-flex; align-items: center; gap: 9px; font-family: var(--tech); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--green); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.foot-cols h3 { font-family: var(--tech); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--faint); margin-bottom: 14px; font-weight: 400; }
.foot-cols a { display: block; font-size: 14px; color: var(--muted); padding: 5px 0; transition: color .16s var(--ease); }
.foot-cols a:hover { color: var(--text); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; padding: 22px 0 40px; border-top: 1px solid var(--line); font-size: 13px; color: var(--faint); position: relative; z-index: 1; }
/* Full-bleed architectural wordmark — an SVG whose text is stretched to the ENTIRE
   footer width (textLength=spacingAndGlyphs). It always reads the full word and is
   never side-clipped, at any window size, including maximized. Dissolves top+bottom. */
/* Giant architectural wordmark = the real logotype geometry, full width, faded. */
.foot-wordmark {
  position: absolute; left: 0; right: 0; bottom: 2%; width: 100%; height: auto; display: block;
  z-index: 0; pointer-events: none; opacity: .11;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 84%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 30%, #000 84%, transparent 100%);
}

/* Hex-text wordmark — gold hexagons spell EKKOVIA in a blue hex field, full width */
.foot-hexword {
  position: absolute; left: 0; right: 0; bottom: 1%;
  width: 100%; height: clamp(130px, 20vw, 250px);
  z-index: 0; pointer-events: none;
  transform: scale(.94); transform-origin: 50% 100%;
  transition: transform 1s var(--ease);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 88%, transparent 100%);
}
.foot-hexword.in { transform: scale(1); }
.foot-hexword .hx-svg { filter: drop-shadow(0 0 5px rgba(239,191,4,.4)); }
.footer { padding-bottom: clamp(150px, 20vw, 250px); }

/* =============================================================================
   Reveal
   ========================================================================== */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1000px) {
  .hero-grid, .capture-grid, .attn-grid, .mem-grid { grid-template-columns: 1fr; }
  .hero-stage { order: 2; }
  .attn-viz { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
}
@media (max-width: 940px) {
  .nav-links { display: none; }
}
@media (max-width: 760px) {
  .pipe3 { grid-template-columns: 1fr; }
  .pipe-mid { flex-direction: row; width: auto; justify-content: center; }
  .pipe-mid .hexnet { width: 90px; height: 60px; }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; gap: 8px; align-items: flex-start; }
  /* trim ambient density on mobile */
  .stage-net, .cta-net { opacity: .32; }
}
/* =============================================================================
   Mobile fit-up: nothing may force the page wider than the viewport.
   Root cause was the hero mockup — its centre column was min-content-locked by
   "$24,532" (mini-dash → app-body → hero track → 427px on a 375px screen), which
   also dragged the sticky nav's "Get started" off-screen. minmax(0,1fr) + min-width:0
   let the card shrink to fit; the nav is tightened so it fits on small phones too.
   ========================================================================== */
@media (max-width: 600px) {
  /* App mockup → fully fluid (never wider than its column) */
  .app-body { grid-template-columns: 76px minmax(0, 1fr) 104px; }
  .app, .app-body, .app-canvas, .mini-dash, .md-top, .md-chart { min-width: 0; }
  .md-val { font-size: 16px; }
  .md-top { flex-wrap: wrap; row-gap: 4px; }
  .app-scenes { padding: 12px 8px; }
  .app-props { padding: 12px 9px; }
  .prop { gap: 6px; }
  .prop .val { font-size: 9px; }
  .tl-name { width: 44px; }
  .tl-scale { font-size: 8px; }

  /* Nav → tighten so brand + "Get started" fit without overflow */
  .nav-inner { padding: 0 10px 0 16px; }
  .brand { gap: 8px; }
  .brand-word { height: 14px; }
  /* guaranteed breathing room between the wordmark and the theme toggle — on tight
     widths space-between collapses to ~0, so the moon icon hugged the last letter. */
  .nav-cta { gap: 10px; margin-left: 18px; }
  .nav-cta .btn-primary { padding: 9px 15px; }
}
@media (max-width: 340px) {
  /* Smallest phones only: icon-only brand so the CTA always fits. This used to kick
     in at 380px, which hid the wordmark on nearly every phone (iPhone is 375, most
     Androids 360) to work around an overflow whose real cause was elsewhere. With
     that fixed, the wordmark fits down to ~340px. */
  .brand-word { display: none; }
}
@media (max-width: 460px) {
  .foot-cols { grid-template-columns: 1fr; }
  .capture-viz { min-height: 260px; }
}

/* =============================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .eyebrow .dot, .capture-paths .sig, .focus-ring { animation: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
}

/* =============================================================================
   PRICING
   ========================================================================== */
.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(18px, 2.4vw, 30px); max-width: 940px; margin: 0 auto; }
.price-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow);
}
.price-card.featured { border-color: var(--line-blue); box-shadow: 0 0 60px -24px rgba(45,107,255,.5), var(--shadow); }
.price-card.featured::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, rgba(45,107,255,.10), transparent 60%);
}
.pc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.pc-name { font-family: var(--display); font-size: 20px; }
.pc-badge { font-family: var(--tech); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy-900, #0b1220); background: var(--gold); padding: 4px 9px; border-radius: 999px; }
.pc-badge.soon { color: var(--blue-soft); background: rgba(45,107,255,.14); border: 1px solid var(--line-blue); }
.pc-price { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.pc-amt { font-family: var(--display); font-size: clamp(34px, 5vw, 46px); line-height: 1; }
.pc-amt.muted { font-size: clamp(22px, 3.2vw, 30px); color: var(--muted); }
.pc-per { font-size: 13px; color: var(--faint); }
.pc-desc { color: var(--muted); font-size: 14.5px; margin-bottom: 18px; max-width: 42ch; }
.pc-feats { list-style: none; display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.pc-feats li { position: relative; padding-left: 26px; font-size: 14px; color: var(--text); }
.pc-feats li::before { content: ""; position: absolute; left: 4px; top: 6px; width: 9px; height: 9px;
  border-left: 2px solid var(--blue-soft); border-bottom: 2px solid var(--blue-soft); transform: rotate(-45deg); }
.price-card .pc-cta { width: 100%; justify-content: center; margin-top: auto; }
.pc-note { margin-top: 12px; font-size: 12px; color: var(--faint); text-align: center; }
.pc-note.is-alert { color: var(--gold); }
.pc-waitlist { display: flex; gap: 8px; margin-top: auto; }
.pc-waitlist input { flex: 1; min-width: 0; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 999px;
  color: var(--text); font: inherit; font-size: 14px; padding: 11px 16px; }
.pc-waitlist input::placeholder { color: var(--faint); }
.pc-waitlist input:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 2px; }
.pc-waitlist .pc-cta { width: auto; white-space: nowrap; }

/* =============================================================================
   Section flow connectors — a small hex signal + rails bridge the gap between
   sections so the page reads as one continuous computational flow.
   ========================================================================== */
.flow-link { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: clamp(6px, 1.5vw, 18px) 0; }
.flow-link .fl-rail { width: 1px; height: clamp(26px, 4vw, 46px); background: linear-gradient(180deg, transparent, rgba(45,107,255,.4)); }
.flow-link .fl-rail.b { background: linear-gradient(180deg, rgba(45,107,255,.4), transparent); }
.flow-link .fl-node { width: 84px; height: 58px; }
@media (max-width: 640px) { .flow-link .fl-node { width: 70px; height: 48px; } }

/* pricing responsive */
@media (max-width: 760px) {
  .price-grid { grid-template-columns: 1fr; max-width: 460px; }
  .pc-waitlist { flex-direction: column; }
  .pc-waitlist .pc-cta { width: 100%; }
}

/* =============================================================================
   Copy-hierarchy additions (Studio-first pass)
   ============================================================================= */

/* 04 — Experimental status pill next to the section number */
.exp-pill { font-family: var(--tech); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--blue-soft); background: rgba(45,107,255,.14); border: 1px solid var(--line-blue);
  padding: 4px 9px; border-radius: 999px; white-space: nowrap; }

/* 03 — brand + pain lines closing the pipeline */
.pipe-close { text-align: center; margin-top: clamp(34px, 5vw, 60px); }
.pipe-thesis { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.08;
  font-size: clamp(24px, 3.2vw, 40px); }
.pipe-thesis em { font-style: normal; color: var(--gold); }
.pipe-line { color: var(--muted); font-size: 16px; margin-top: 12px; }

/* 04 — the "same decisions twice" thesis inside the memory copy */
.mem-thesis { font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.06;
  font-size: clamp(24px, 3vw, 38px); margin: clamp(26px, 3.5vw, 40px) 0 14px; }
.mem-thesis em { font-style: normal; color: var(--gold); }

/* Final CTA — practical fine line + coming-soon secondary link */
.cta-sub { margin-bottom: 10px; }
.cta-fine { color: var(--muted); font-size: 15px; max-width: 52ch; margin: 0 auto 32px; line-height: 1.5; }
.cta-soon { justify-content: center; margin-top: 22px; font-size: 14px; }

/* =============================================================================
   Intelligence interest capture
   Small and inline — this is a "keep me posted", not a conversion funnel, so it
   gets a quiet block rather than a boxed card competing with the pricing CTA.
   ============================================================================= */
.signup { margin-top: clamp(24px, 3vw, 34px); padding-top: 20px; border-top: 0.5px solid var(--line); }
.signup-h { font-size: 15px; font-weight: 600; }
.signup-sub { font-size: 13.5px; color: var(--muted); margin-top: 2px; }
.signup-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.signup-row input {
  flex: 1 1 220px; min-width: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 13px; font: inherit; font-size: 14px;
}
.signup-row input::placeholder { color: var(--faint); }
.signup-row input:focus-visible { outline: 2px solid var(--blue-soft); outline-offset: 1px; border-color: transparent; }
.signup-row .btn { flex: none; }
.signup-msg:empty { display: none; }
.signup-msg { font-size: 12.5px; color: var(--muted); margin-top: 9px; }

/* =============================================================================
   Pricing — the seeking comet
   -----------------------------------------------------------------------------
   The comet searches the whole frame, finds ONE card, blooms in that card's
   colour, releases, then searches again and finds the OTHER. Two acts per cycle,
   so the cards take turns — Intelligence in gold, Studio in blue — rather than
   one sitting lit while the other is hunted.

     --hx-pulse     act 1 → Intelligence, GOLD
     --hx-pulse-2   act 2 → Studio, BLUE

   Both are published on the section by the instance (data-emit + data-pulse-host),
   so the cards react to the field rather than running timers that would drift.
   ========================================================================== */
/* The field ran ~383px above the cards but only ~59px below, because the section's
   bottom padding is a quarter of the space the heading gives it up top. A bloom
   centred on a card spills downward into that gap, so the lit frame looked cut off
   at the bottom. Deepening the section's own bottom padding gives the field real
   room to fill — rather than overshooting into the next section, which would put
   hexes behind the CTA's own field. */
.sec.pricing {
  position: relative; isolation: isolate;
  --hx-pulse: 0; --hx-pulse-2: 0;
  padding-bottom: clamp(150px, 17vw, 300px);
}
.seek-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.seek-net { position: absolute; inset: -2% 0 0 0; opacity: .34; }
/* Dissolve ONLY the last sliver, so the field ends in diffusion rather than on a
   hard line above the CTA section. The previous 76% stop began fading 56px ABOVE
   the cards' bottom edge and erased every hex under the glow — the geometry was
   there, it was simply masked away. Anything above 88% must stay fully opaque:
   that is the band the bloom sits in. */
.seek-net .hx-svg {
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
}
.sec.pricing > .wrap { position: relative; z-index: 1; }

/* Intelligence — visited first, in gold. */
.price-card:not(.featured) {
  border-color: rgba(239,191,4, calc(0.06 + 0.50 * var(--hx-pulse, 0)));
  box-shadow:
    0 0 calc(10px + 62px * var(--hx-pulse, 0)) rgba(239,191,4, calc(0.32 * var(--hx-pulse, 0))),
    inset 0 0 calc(12px + 70px * var(--hx-pulse, 0)) rgba(239,191,4, calc(0.16 * var(--hx-pulse, 0)));
}
/* Studio — visited second, in blue. Layered over its existing feature glow. */
.price-card.featured {
  border-color: rgba(45,107,255, calc(0.28 + 0.52 * var(--hx-pulse-2, 0)));
  box-shadow:
    0 0 calc(10px + 62px * var(--hx-pulse-2, 0)) rgba(45,107,255, calc(0.34 * var(--hx-pulse-2, 0))),
    inset 0 0 calc(12px + 70px * var(--hx-pulse-2, 0)) rgba(45,107,255, calc(0.16 * var(--hx-pulse-2, 0))),
    0 0 60px -24px rgba(45,107,255,.5), var(--shadow);
}
@media (max-width: 900px) { .seek-net { opacity: .3; inset: -2% 0 -6% 0; } }

/* Mobile: the single-column grid makes each card near full-bleed, so the field
   only survived in the gutters between them. Let the cards go slightly
   translucent instead of hiding the field. Copy keeps its contrast because
   --surface sits within a few points of --bg in BOTH themes (dark #0E1524 over
   #0A0F1A, light #FFFDF8 over #F5EAD7) — so what shows through is the field, not
   a different-brightness ground. Text paints above the card background and is
   never itself faded. If color-mix is unsupported the declaration drops and the
   card stays fully opaque, which is exactly the old behaviour. */
@media (max-width: 760px) {
  .price-card { background: color-mix(in srgb, var(--surface) 68%, transparent); }
  /* The waitlist input sits on the same translucent ground; keep it opaque so
     the field never runs behind an editable field. */
  .pc-waitlist input { background: var(--bg-2); }

  /* Stacked, the Intelligence card ends the section — so the field has to reach
     BELOW its waitlist button, or the last card sits on bare ground while the
     first is framed. Two things were cutting it short: the section's own bottom
     padding collapsed to its 150px floor (17vw is only 66px on a phone), and the
     88% mask stop landed at 7073px, i.e. 7px ABOVE the button. Deeper padding
     grows the field with it; the 96% stop keeps the fade to the last sliver.
     Measured after: hexes run ~95px past the card, ~150px past the button, and
     still clear the CTA's own field by ~105px. */
  .sec.pricing { padding-bottom: 230px; }
  .seek-net .hx-svg {
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 96%, transparent 100%);
            mask-image: linear-gradient(180deg, #000 0%, #000 96%, transparent 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .price-card.featured { box-shadow: 0 0 60px -24px rgba(45,107,255,.5), var(--shadow); }
  .price-card:not(.featured) { box-shadow: none; }
}

/* =============================================================================
   Safe area (iOS landscape / notched devices)
   -----------------------------------------------------------------------------
   Paired with viewport-fit=cover in the <meta viewport>. Cover makes the layout
   span the whole display — which is what removes the bare band beside the notch
   in landscape — but it also lets content slide under the notch and the home
   indicator, so every edge-anchored container pads itself back out.

   max() rather than a bare env(): on a device with no inset (or a browser that
   does not support env at all) the insets resolve to 0 and the normal gutter
   still applies. Nothing here changes desktop rendering.
   ========================================================================== */
.wrap {
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.nav {
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
.brand-band {
  padding-left:  max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}
/* The home indicator sits over the last row of footer text in landscape. */
.footer-bottom { padding-bottom: max(40px, calc(24px + env(safe-area-inset-bottom))); }

/* =============================================================================
   Mobile navigation
   -----------------------------------------------------------------------------
   Below 940px the link row was simply hidden, which left phones with no
   navigation at all — only the logo, the theme toggle and the CTA. This
   discloses the SAME four items rather than maintaining a second, divergent
   information architecture. It borrows the nav pill's own surface treatment
   (same blur, same border, same radius family) so it reads as the header
   opening rather than as a new component.
   ========================================================================== */
.nav-toggle {
  display: none; flex: none;
  width: 38px; height: 38px; padding: 0;
  align-items: center; justify-content: center; gap: 4px; flex-direction: column;
  background: rgba(255,255,255,.05);
  border: 1px solid var(--line-2); border-radius: 11px;
  cursor: pointer; transition: background .18s var(--ease);
}
.nav-toggle:hover { background: rgba(255,255,255,.09); }
.nav-toggle .nt-bar {
  display: block; width: 15px; height: 1.5px; border-radius: 2px;
  background: var(--text);
  transition: transform .22s var(--ease), opacity .18s var(--ease);
}
/* Open state folds the three bars into a cross — the button is its own close
   control, so the menu never needs a second dismiss affordance. */
.nav[data-menu="open"] .nav-toggle .nt-bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.nav[data-menu="open"] .nav-toggle .nt-bar:nth-child(2) { opacity: 0; }
.nav[data-menu="open"] .nav-toggle .nt-bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

.nav-menu {
  display: flex; flex-direction: column; gap: 2px;
  margin-top: 10px; padding: 10px;
  border-radius: 20px;
  background: rgba(12,18,32,.92);
  -webkit-backdrop-filter: saturate(160%) blur(20px);
          backdrop-filter: saturate(160%) blur(20px);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 18px 50px -16px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.07);
}
.nav-menu[hidden] { display: none; }
.nav-menu > a {
  padding: 13px 14px; border-radius: 12px;
  font-size: 16px; color: var(--muted);
  transition: background .16s var(--ease), color .16s var(--ease);
}
.nav-menu > a:hover, .nav-menu > a:focus-visible { background: rgba(255,255,255,.06); color: var(--text); }
.nav-menu .nm-cta {
  margin-top: 8px; justify-content: center; color: var(--navy-900, #0b1220);
  font-size: 15px;
}
:root[data-theme="light"] .nav-menu { background: rgba(255,253,249,.94); border-color: rgba(7,45,90,.12); }
:root[data-theme="light"] .nav-toggle { background: rgba(7,45,90,.05); }

/* The label swap keeps the gold CTA in the header at every width instead of
   dropping it — see the note on .nav-buy in the markup. */
.nav-buy .nb-short { display: none; }
@media (max-width: 940px) {
  .nav-toggle { display: flex; }
}
@media (max-width: 560px) {
  .nav-buy .nb-full { display: none; }
  .nav-buy .nb-short { display: inline; }
}
@media (min-width: 941px) {
  /* Never leave the panel open behind a viewport that has the full row back. */
  .nav-menu { display: none !important; }
}