/* ============================================================================
   Sandhi — product site. Same royal theme as the apps: dark chocolate + gold.
   Self-contained: fonts are local, no external requests of any kind.
   ========================================================================== */

/* ---- fonts (copied from the desktop app bundle; variable weight) ---------- */
@font-face {
  font-family: "Manrope";
  src: url("assets/manrope-latin.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  src: url("assets/manrope-latin-ext.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113;
}

/* ---- tokens (mirrors the app) --------------------------------------------- */
:root {
  color-scheme: dark;
  --bg: #150d07;
  --bg-2: #1e130b;
  --surface: #271910;
  --surface-2: #322115;
  --border: rgba(240, 195, 74, 0.14);
  --border-hi: rgba(240, 195, 74, 0.28);
  --text: #f6ead4;
  --dim: #cbb082;
  --faint: #937953;
  --gold: #f0c34a;
  --gold-2: #ffd76b;
  --gold-3: #d9a838;
  --good: #86c98a;
  --grad-gold: linear-gradient(135deg, #d9a838, #ffd76b);
  --grad-text: linear-gradient(135deg, #ffe6a8, #f6ead4 62%);
  --r-card: 20px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 1px 0 rgba(255, 220, 150, 0.06) inset,
    0 24px 60px -28px rgba(0, 0, 0, 0.85);
}

/* ---- base ------------------------------------------------------------------ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; overflow-x: clip; }
body {
  background: var(--bg);
  color: var(--text);
  font: 400 16.5px/1.65 "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
/* Wide by default: content runs close to the viewport edge for a full-width feel. */
.wrap { max-width: 1520px; margin: 0 auto; padding: 0 clamp(20px, 3.4vw, 56px); }
/* Break out of .wrap to true viewport width.
   NOTE 100vw includes the scrollbar, so it is wider than the content box and
   overflows by the scrollbar's width. `overflow-x: clip` on the root absorbs
   that (unlike `hidden`, it does not create a scroll container, so sticky and
   fixed positioning still work). */
.bleed { width: 100vw; margin-left: calc(50% - 50vw); }
.center { text-align: center; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--gold); color: #1d1108; padding: 10px 18px; border-radius: 0 0 12px 0;
  font-weight: 700;
}
.skip:focus { left: 0; }

/* film grain — one inline SVG tile, extremely subtle */
.grain {
  position: fixed; inset: 0; z-index: 40; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* ---- type ------------------------------------------------------------------ */
h1 {
  font-size: clamp(40px, 6vw, 64px);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.028em;
}
h2 {
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 760;
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 10px 0 18px;
}
h3 { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.gold-text {
  background: var(--grad-gold);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kicker {
  font-size: 11.5px;
  font-weight: 640;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.kicker i { text-transform: none; letter-spacing: 0.02em; }

/* ---- buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 700 15px/1 "Manrope", sans-serif; letter-spacing: -0.01em;
  padding: 16px 30px;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease),
    border-color 0.35s var(--ease), background 0.35s var(--ease);
}
.btn.sm { padding: 11px 20px; font-size: 13.5px; }
.btn.wide { width: 100%; }
.btn.primary {
  background: var(--grad-gold); color: #1d1108;
  box-shadow: 0 10px 30px -10px rgba(240, 195, 74, 0.5);
}
.btn.primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -12px rgba(240, 195, 74, 0.62); }
.btn.ghost { background: transparent; color: var(--text); border: 1px solid var(--border-hi); }
.btn.ghost:hover { border-color: var(--gold); transform: translateY(-2px); }

/* ---- nav --------------------------------------------------------------------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(21, 13, 7, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s var(--ease);
}
.nav.scrolled { border-bottom-color: var(--border); }
.nav-in {
  max-width: 1520px; margin: 0 auto; padding: 14px clamp(20px, 3.4vw, 56px);
  display: flex; align-items: center; gap: 30px;
}
.brand { display: inline-flex; align-items: center; gap: 11px; }
/* The mark itself, drawn from the same geometry as the app launcher icons. */
.brand-svg { width: 32px; height: 32px; border-radius: 9px; flex: none; }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 26px; margin-left: auto; }
.nav-links a {
  font-size: 14px; font-weight: 560; color: var(--dim);
  transition: color 0.3s var(--ease);
}
.nav-links a:hover { color: var(--text); }

/* ---- hero --------------------------------------------------------------------- */
.hero { position: relative; padding: 150px 0 64px; overflow: hidden; }
.hero-glow {
  position: absolute; inset: -20% -10% auto; height: 130%;
  background:
    radial-gradient(50% 44% at 50% 30%, rgba(240, 195, 74, 0.12), transparent 70%),
    radial-gradient(30% 36% at 82% 70%, rgba(240, 195, 74, 0.08), transparent 72%);
  pointer-events: none;
  animation: heroBreathe 10s ease-in-out infinite;
}
@keyframes heroBreathe { 0%, 100% { opacity: 0.8; } 50% { opacity: 1; } }
/* Centered copy, with the stage lifted up alongside it — the devices flank the
   buttons at the edges while the text stays on top of the graphics. */
.hero-copy { position: relative; z-index: 2; text-align: center; max-width: 820px; margin: 0 auto 6px; }
.hero-copy h1 { font-size: clamp(46px, 6.2vw, 82px); }
/* The name in the script it comes from, under the one people will type. The
   transliteration is there because a reader who cannot read Devanagari should
   still know how to say it out loud. */
.hero-deva { margin: 12px 0 0; line-height: 1.1; }
.deva {
  display: block;
  font-size: clamp(21px, 2.3vw, 30px);
  font-weight: 600; letter-spacing: 0.01em;
  color: var(--gold); opacity: 0.92;
}
.deva-tr {
  display: block; margin-top: 5px;
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.19em; text-transform: lowercase;
  color: var(--faint);
}

.hero-sub {
  font-size: clamp(17px, 1.7vw, 22px);
  font-weight: 560;
  letter-spacing: -0.012em;
  color: var(--dim);
  margin: 10px 0 9px;
}
/* The one claim nothing else on the page makes: the symmetry runs both ways and
   does not depend on where you are standing. Set below the descriptor so the
   three "any"s carry the line rather than competing with the headline. */
.hero-tag {
  font-size: clamp(15px, 1.35vw, 18px);
  font-weight: 620;
  letter-spacing: 0.005em;
  color: var(--dim);
  margin: 0 0 28px;
  text-wrap: balance;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.trust-row { margin-top: 26px; font-size: 13px; color: var(--faint); letter-spacing: 0.02em; }
/* Quieter than the trust row above it — attribution, not another claim. */
.hero-parent { margin-top: 9px; font-size: 12.5px; color: var(--faint); opacity: 0.85; }
.hero-parent a {
  color: var(--dim); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: rgba(240, 195, 74, 0.35); transition: color 0.3s var(--ease);
}
.hero-parent a:hover { color: var(--gold); }
/* No-JS fallback; script.js measures the exact lift on load/resize. Only applied on
   wide viewports — see alignStage(), and the reset in the 1120px query below. */
.hero-stage { position: relative; z-index: 1; margin-top: -155px; }

/* ---- intro: the two-sentence statement under the animation --------------------
   A hairline drops out of the diagram into the text, so the statement reads as
   the animation's conclusion rather than a new block. */
.intro { padding: 0 0 108px; }
.intro .wrap { display: flex; flex-direction: column; align-items: center; }
.intro-thread {
  width: 1px; height: 52px; margin-bottom: 30px;
  background: linear-gradient(180deg, transparent, rgba(240, 195, 74, 0.55));
}
.intro-text {
  max-width: 60ch; text-align: center; text-wrap: balance;
  font-size: clamp(19px, 2.05vw, 27px);
  font-weight: 500; line-height: 1.52; letter-spacing: -0.016em;
  color: var(--text);
}
.intro-soft { color: var(--faint); }
/* The paragraph explains what Sandhi is; the next thing a reader wants is to be
   shown it working. The .wrap is a centring flex column, so this only needs the
   space above it — and it needs a lot: at one line-height the button read as part
   of the sentence rather than as the answer to it. */
.intro-cta { margin: 58px 0 0; }

/* the network viz: SVG mesh + HTML bubbles positioned at device coordinates.
   Full viewport width, softly capped so ultrawide screens keep it composed. */
.hero-viz { position: relative; max-width: 1760px; margin: 0 auto; padding: 0 8px; }
.hero-viz svg { width: 100%; height: auto; }
.edge {
  stroke: #f0c34a; stroke-opacity: 0.14; stroke-width: 1.2; fill: none;
  transition: stroke-opacity 0.5s var(--ease), stroke-width 0.5s var(--ease);
}
.edge.lit { stroke-opacity: 0.6; stroke-width: 2; }
.nodeGlow { opacity: 0; transition: opacity 0.55s var(--ease); }
.nodeGlow.on { opacity: 0.16; }

/* The device being spoken to grows while its command is typed, then settles back
   as the command is sent. Each scales about its OWN node point (the exact pixel
   the wires terminate at), so the mesh never shifts while a device resizes. */
.dev {
  transform-box: view-box;
  transform: scale(1);
  transition: transform 0.55s var(--ease);
}
.dev.focus { transform: scale(1.22); }
#d-desktop { transform-origin: 245px 198px; }
#d-phone   { transform-origin: 1196px 218px; }
#d-tablet  { transform-origin: 1110px 426px; }
#d-phone2  { transform-origin: 600px 447px; }
#d-desktop-m { transform-origin: 86px 76px; }
#d-phone-m   { transform-origin: 286px 80px; }
#d-tablet-m  { transform-origin: 278px 288px; }
#d-phone2-m  { transform-origin: 55px 298px; }

/* One drawing or the other, never both. The switch matches the hero's own
   breakpoint: above it the mesh spans the viewport and flanks the buttons, below
   it the wide mesh's labels would shrink to ~6px, so the compact square takes over. */
.net-narrow { display: none; }
@media (max-width: 1120px) {
  .hero-viz > svg:not(.net-narrow) { display: none; }
  .net-narrow { display: block; }
}
/* On wide screens the wrapper must not create a box — the cards position
   themselves against .hero-viz. On small screens it becomes their slot. */
.net-cards { display: contents; }
#netPulse { opacity: 0; }
.net-bubble {
  position: absolute; z-index: 2; max-width: 292px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border-hi); border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 10px 14px;
  font-size: 12.5px; line-height: 1.45;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.net-bubble.show, .net-result.show { opacity: 1; }
/* Cards anchor to a device EDGE (not its centre) and are pushed clear of it, so
   they read as attached and never sit on top of the device. The anchors allow for
   the device being scaled up while its command is typed. */
.net-bubble.below { transform: translate(-50%, 16px); }
.net-bubble.below.show { transform: translate(-50%, 8px); }
.net-bubble.above { transform: translate(-50%, calc(-100% - 16px)); }
.net-bubble.above.show { transform: translate(-50%, calc(-100% - 8px)); }
.net-bubble.left { transform: translate(calc(-100% - 16px), -50%); }
.net-bubble.left.show { transform: translate(calc(-100% - 8px), -50%); }
.nb-from {
  display: block; font-size: 9.5px; font-weight: 640;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint);
  margin-bottom: 3px;
}
.nb-text { color: var(--text); font-weight: 600; }
.nb-caret {
  display: inline-block; width: 2px; height: 12px; margin-left: 2px;
  background: var(--gold); vertical-align: -2px;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.net-result {
  position: absolute; z-index: 2; max-width: 268px;
  background: rgba(21, 13, 7, 0.94);
  border: 1px solid rgba(134, 201, 138, 0.45); border-radius: 13px;
  font-size: 12px; padding: 8px 13px 9px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.nr-head { display: block; color: var(--good); font-weight: 700; line-height: 1.35; }
.nr-detail {
  display: block; margin-top: 3px;
  color: var(--faint); font-size: 11px; font-weight: 560; line-height: 1.4;
}
.net-result.below { transform: translate(-50%, 16px); }
.net-result.below.show { transform: translate(-50%, 8px); }
.net-result.above { transform: translate(-50%, calc(-100% - 16px)); }
.net-result.above.show { transform: translate(-50%, calc(-100% - 8px)); }
.net-result.left { transform: translate(calc(-100% - 16px), -50%); }
.net-result.left.show { transform: translate(calc(-100% - 8px), -50%); }

/* ---- sections ------------------------------------------------------------------ */
.section { padding: 108px 0; }
.card {
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 30px;
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.card:hover { transform: translateY(-4px); border-color: var(--border-hi); }

/* shared svg strokes for the line-art scenes */
.ln { stroke: var(--gold); stroke-opacity: 0.8; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ln.thin { stroke-width: 1.2; stroke-opacity: 0.55; }
.ln.dim { stroke-opacity: 0.35; }
.ln.dash { stroke-dasharray: 4 7; stroke-opacity: 0.4; }
.fill { fill: var(--gold); }
.fillDim { fill: var(--gold); fill-opacity: 0.72; }
.pkt { fill: var(--gold-2); }
.svg-cap { fill: var(--faint); font-size: 10.5px; font-family: inherit; letter-spacing: 0.06em; }
.smallprint { margin-top: 28px; font-size: 13px; color: var(--faint); max-width: 68ch; }
/* the one technical sentence, kept for the readers who want it */
.sp-tech { opacity: 0.72; }

/* panel grid shared by Security / Brain / Enterprise */
.case-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 34px; }
.case-viz {
  border-radius: 14px; background: rgba(21, 13, 7, 0.55);
  border: 1px solid var(--border); margin-bottom: 18px; overflow: hidden;
}
.case h3 { margin-bottom: 7px; }
.case p { font-size: 14px; color: var(--dim); }
.step-ico {
  width: 52px; height: 52px; border-radius: 14px; margin-bottom: 18px;
  background: rgba(240, 195, 74, 0.08); border: 1px solid var(--border);
  display: grid; place-items: center;
}
.step-ico svg { width: 30px; height: 30px; }

/* ---- anywhere: two situations, both ticked ---------------------------------------
   Left: devices on one Wi-Fi, talking directly. Right: devices on entirely
   different networks, meeting through the blind relay. Same green tick on both —
   the point being that sharing a network is an option, not a requirement. */
.anywhere .anw-lede { color: var(--dim); max-width: 66ch; margin-bottom: 30px; }

/* Two cards with identical parts — claim, drawing, verdict — so they line up
   exactly. The verdict is pushed to the bottom of each card, and the claims are
   given a common minimum height, so both ticks sit on the same line. */
.anw-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 34px; align-items: stretch;
}
.anw-card {
  display: flex; flex-direction: column;
  padding: 28px;
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  border: 1px solid var(--border); border-radius: var(--r-card);
  box-shadow: var(--shadow);
  transition: transform 0.5s var(--ease), border-color 0.5s var(--ease);
}
.anw-card:hover { transform: translateY(-4px); border-color: var(--border-hi); }
.anw-h { font-size: 19px; font-weight: 720; letter-spacing: -0.018em; margin-bottom: 8px; }
.anw-p { font-size: 14.5px; color: var(--dim); min-height: 4.4em; }
.anw-art {
  margin: 16px 0 20px; border-radius: 14px; overflow: hidden;
  background: rgba(21, 13, 7, 0.5); border: 1px solid var(--border);
}
.anw-art svg { display: block; width: 100%; height: auto; }
.anw-verdict {
  margin-top: auto; display: flex; align-items: center; gap: 11px;
  font-size: 15px; font-weight: 720; letter-spacing: -0.012em; color: var(--good);
}
.anw-tick {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12.5px;
  background: rgba(134, 201, 138, 0.14); border: 1px solid rgba(134, 201, 138, 0.42);
}
/* direct hop, left card */
.anw-pulse { offset-path: path("M182.7 133.6 L330.0 133.6"); offset-distance: 0%; opacity: 0; animation: anwPulse 3.6s linear infinite; }
@keyframes anwPulse {
  0% { offset-distance: 0%; opacity: 0; }
  8% { opacity: 1; }
  62% { offset-distance: 100%; opacity: 1; }
  70%, 100% { offset-distance: 100%; opacity: 0; }
}
/* sealed packet crossing the relay, right panel */
.anw-pkt {
  offset-path: path("M117.3 171.8 C 160.9 122.7, 201.8 54.5, 248.2 54.5 L351.8 54.5 C 403.6 54.5, 439.1 122.7, 450.0 166.4");
  offset-distance: 0%; opacity: 0; animation: anwPkt 4.2s linear infinite;
}
@keyframes anwPkt {
  0% { offset-distance: 0%; opacity: 0; }
  7% { opacity: 1; }
  72% { offset-distance: 100%; opacity: 1; }
  80%, 100% { offset-distance: 100%; opacity: 0; }
}
.anw-wifi, .anw-wifi2, .anw-cell { animation: anwWave 3.2s ease-in-out infinite; }
.anw-wifi2 { animation-delay: 0.5s; }
.anw-cell { animation-delay: 1s; }
@keyframes anwWave { 0%, 100% { stroke-opacity: 0.3; } 50% { stroke-opacity: 0.72; } }

/* ---- security animations ------------------------------------------------------- */
/* pairing: scan sweeps the QR → password dots land → keys pin, check draws */
.s-scan { fill: var(--gold-2); fill-opacity: 0.85; animation: sScan 6.5s var(--ease) infinite; }
@keyframes sScan {
  0% { transform: translateY(0); opacity: 0; }
  4% { opacity: 1; }
  14% { transform: translateY(28px); opacity: 1; }
  18% { transform: translateY(0); opacity: 1; }
  28% { transform: translateY(28px); opacity: 1; }
  32%, 100% { opacity: 0; }
}
.s-dots circle { fill: var(--gold); fill-opacity: 0.85; transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); }
.s-dots circle:nth-child(1) { animation: sDot 6.5s var(--ease) infinite; }
.s-dots circle:nth-child(2) { animation: sDot 6.5s var(--ease) 0.18s infinite; }
.s-dots circle:nth-child(3) { animation: sDot 6.5s var(--ease) 0.36s infinite; }
.s-dots circle:nth-child(4) { animation: sDot 6.5s var(--ease) 0.54s infinite; }
@keyframes sDot { 0%, 34% { transform: scale(0); } 40%, 92% { transform: scale(1); } 97%, 100% { transform: scale(0); } }
.s-lock { transform-box: fill-box; transform-origin: 50% 60%; transform: scale(0); animation: sLock 6.5s var(--ease) infinite; }
@keyframes sLock { 0%, 56% { transform: scale(0); } 63%, 93% { transform: scale(1); } 98%, 100% { transform: scale(0); } }
.s-check {
  stroke: var(--good); stroke-width: 2.2; fill: none; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26; animation: sCheck 6.5s var(--ease) infinite;
}
@keyframes sCheck { 0%, 64% { stroke-dashoffset: 26; } 76%, 92% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 26; } }

/* e2e: the packet seals at the sender, slips past the crossed-out eye, opens only at the far end */
.s-pkt { animation: sPkt 6s linear infinite; }
@keyframes sPkt {
  0% { transform: translate(44px, 60px); opacity: 0; }
  6% { opacity: 1; }
  10% { transform: translate(52px, 60px); }
  88% { transform: translate(176px, 60px); opacity: 1; }
  96%, 100% { transform: translate(176px, 60px); opacity: 0; }
}
.s-seal { transform-box: fill-box; transform-origin: 50% 50%; transform: scale(0); animation: sSeal 6s var(--ease) infinite; }
@keyframes sSeal { 0%, 8% { transform: scale(0); } 14%, 84% { transform: scale(1); } 90%, 100% { transform: scale(0); } }
.s-slash {
  stroke: var(--gold); stroke-opacity: 0.7; stroke-width: 1.6; stroke-linecap: round;
  stroke-dasharray: 42; stroke-dashoffset: 42; animation: sSlash 6s var(--ease) infinite;
}
@keyframes sSlash { 0%, 38% { stroke-dashoffset: 42; } 52%, 94% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 42; } }

/* relay: sealed packet crosses the blind box unchanged (also used on the security card) */
.a-pkt { animation: pkt 6.4s linear infinite; }
@keyframes pkt {
  0% { transform: translate(44px, 60px); opacity: 0; }
  6% { opacity: 1; }
  46% { transform: translate(111px, 60px); opacity: 1; }
  54% { transform: translate(111px, 60px); }
  92% { transform: translate(182px, 60px); opacity: 1; }
  100% { transform: translate(182px, 60px); opacity: 0; }
}

/* ---- brain animations ------------------------------------------------------------ */
/* local: the core pulses, work orbits inside the house, the cloud stays crossed out */
.b-core { fill: var(--gold); animation: bCore 2.6s ease-in-out infinite; }
@keyframes bCore { 0%, 100% { fill-opacity: 0.35; } 50% { fill-opacity: 0.95; } }
.b-orbit { transform-box: view-box; transform-origin: 110px 76px; animation: bOrbit 5s linear infinite; }
@keyframes bOrbit { to { transform: rotate(360deg); } }
/* byo key: requests march out, responses march back, your key rides along */
.b-dash { stroke-dasharray: 6 7; animation: bDash 1.4s linear infinite; }
.b-dash.back { stroke: var(--good); stroke-opacity: 0.5; animation-direction: reverse; }
@keyframes bDash { to { stroke-dashoffset: -26; } }
.b-key { animation: bKey 5s var(--ease) infinite; }
@keyframes bKey {
  0% { transform: translate(62px, 52px); opacity: 0; }
  8% { opacity: 1; }
  46% { transform: translate(128px, 52px); opacity: 1; }
  54%, 100% { transform: translate(128px, 52px); opacity: 0; }
}
/* hosted-soon: a quiet shimmer, nothing more */
.b-soon { animation: bSoon 3.6s ease-in-out infinite; }
@keyframes bSoon { 0%, 100% { stroke-opacity: 0.35; } 50% { stroke-opacity: 0.7; } }
.b-spark { animation: bSpark 3.6s ease-in-out infinite; }
@keyframes bSpark { 0%, 100% { fill-opacity: 0.2; } 50% { fill-opacity: 1; } }
.soon-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--border); border-radius: 999px;
  padding: 2px 8px; vertical-align: 2px; margin-left: 6px;
}

/* ---- fleet -------------------------------------------------------------------------- */
.fleet-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 56px; align-items: center; }
/* grid items default to min-width:auto, which refuses to shrink below their
   content and pushes the row wider than the viewport */
.fleet-copy, .fleet-right { min-width: 0; }
.fleet-copy p:not(.kicker) { color: var(--dim); margin-bottom: 26px; }
.fleet-viz svg { width: 100%; height: auto; }
.fleet-viz .multi { opacity: 0; transition: opacity 0.7s var(--ease); }
.fleet-viz .single { opacity: 1; transition: opacity 0.5s var(--ease); }
.fleet-viz.on .multi { opacity: 1; }
.fleet-viz.on .single { opacity: 0; }
@keyframes wire { from { stroke-dashoffset: 90; } to { stroke-dashoffset: 0; } }
/* the network pulses live only on the visible form */
/* The section's edge, stated at the size it deserves — and only while
   multi-device is actually on, since it is that mode's headline. */
.fleet-badge {
  opacity: 0; transform: translateY(10px) scale(0.96); pointer-events: none;
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
  display: flex; align-items: center; justify-content: center; gap: 13px;
  /* max-content would let a long label force the whole grid wider than the
     viewport — cap it and let the text wrap instead. */
  width: max-content; max-width: 100%; margin: 20px auto 0;
  padding: 11px 21px 11px 18px;
  border: 1px solid var(--border-hi); border-radius: 999px;
  background: linear-gradient(180deg, rgba(240, 195, 74, 0.07), rgba(240, 195, 74, 0.01));
  box-shadow: 0 18px 46px -26px rgba(240, 195, 74, 0.5);
}
.fleet-badge-mark {
  font-size: clamp(26px, 2.5vw, 34px); line-height: 0.85; font-weight: 700;
  background: var(--grad-gold); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.fleet-badge-text {
  font-size: clamp(13px, 1.25vw, 16px); font-weight: 560;
  letter-spacing: -0.008em; color: var(--dim);
  text-wrap: balance;
}
.fleet-badge.show { opacity: 1; transform: none; }

/* the app's switch, rebuilt for the page */
.switch {
  display: inline-flex; align-items: center; gap: 13px;
  background: none; border: 0; cursor: pointer; color: var(--dim);
  font: 600 14.5px "Manrope", sans-serif;
}
.switch-knob {
  width: 46px; height: 26px; border-radius: 999px; position: relative; flex: none;
  background: var(--surface-2); border: 1px solid var(--border-hi);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}
.switch-knob::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--faint);
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.switch[aria-checked="true"] .switch-knob { background: rgba(240, 195, 74, 0.25); border-color: var(--gold); }
.switch[aria-checked="true"] .switch-knob::after { transform: translateX(20px); background: var(--gold); }

/* ---- enterprise: its own section, given weight ------------------------------------------ */
.enterprise {
  border-top: 1px solid var(--border);
  background:
    radial-gradient(52% 40% at 50% 0%, rgba(240, 195, 74, 0.07), transparent 72%);
}
.ent-lede { font-size: 17.5px; color: var(--dim); max-width: 64ch; margin-top: 4px; }
.ent-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; }
.ent-card { padding: 34px 32px; }
.ent-card h3 { font-size: 20px; font-weight: 720; letter-spacing: -0.018em; margin-bottom: 10px; }
.ent-card p { font-size: 15px; color: var(--dim); line-height: 1.66; }
.ent-ico {
  width: 62px; height: 62px; border-radius: 17px; margin-bottom: 22px;
  background: rgba(240, 195, 74, 0.09); border: 1px solid var(--border);
  display: grid; place-items: center;
}
.ent-ico svg { width: 36px; height: 36px; }
.ent-strip {
  display: flex; flex-wrap: wrap; gap: 12px 14px; margin-top: 34px;
}
.ent-strip span {
  font-size: 13.5px; font-weight: 560; color: var(--dim); letter-spacing: 0.01em;
  border: 1px solid var(--border); border-radius: 999px; padding: 9px 18px;
  background: linear-gradient(180deg, rgba(240, 195, 74, 0.05), transparent);
}

/* ---- download ------------------------------------------------------------------------ */
.download .sub { color: var(--faint); font-size: 14px; margin-top: -6px; }
.dl-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 420px)); gap: 18px;
  justify-content: center; margin-top: 38px;
}
.dl { text-align: center; display: flex; flex-direction: column; align-items: center; }
.dl-ico {
  width: 64px; height: 64px; border-radius: 18px; margin-bottom: 18px;
  background: rgba(240, 195, 74, 0.08); border: 1px solid var(--border);
  display: grid; place-items: center;
}
.dl-ico svg { width: 36px; height: 36px; }
.dl p { color: var(--dim); font-size: 14.5px; margin-top: 7px; }
.dl-req { font-size: 12.5px !important; color: var(--faint) !important; margin: 12px 0 20px !important; letter-spacing: 0.04em; }
.dl .btn { margin-top: auto; }
.dl-note { text-align: center; margin-top: 26px; font-size: 13.5px; color: var(--faint); }
.dl-note b { color: var(--dim); font-weight: 640; }
.dl-cta { text-align: center; margin-top: 20px; }

/* ---- legal documents (privacy / terms / legal) ------------------------------------------ */
.doc { padding: 140px 0 90px; }
.doc-head { max-width: 74ch; }
.doc h1 {
  font-size: clamp(34px, 4.4vw, 52px); font-weight: 800;
  letter-spacing: -0.026em; line-height: 1.08; margin: 10px 0 12px;
}
.doc-date { font-size: 13px; color: var(--faint); letter-spacing: 0.03em; }
.doc-intro { font-size: 17.5px; color: var(--dim); max-width: 68ch; margin-top: 22px; }
.doc-body { max-width: 74ch; margin-top: 12px; }
.doc-body section { padding-top: 38px; }
.doc-body h2 {
  font-size: clamp(19px, 1.9vw, 23px); font-weight: 720;
  letter-spacing: -0.018em; margin: 0 0 12px;
}
.doc-body p, .doc-body li { font-size: 15.5px; color: var(--dim); line-height: 1.72; }
.doc-body p + p { margin-top: 12px; }
.doc-body ul { margin: 12px 0 0; padding-left: 20px; }
.doc-body li { margin-bottom: 9px; }
.doc-body li::marker { color: var(--gold); }
.doc-body b, .doc-body strong { color: var(--text); font-weight: 640; }
.doc-body a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
/* The legal documents wrap each clause in a <section>, which carries the spacing.
   The privacy feature page is a straight read with no clause numbering, so its
   headings are direct children and need that air themselves. Scoped with > so it
   cannot reach into the sectioned documents. */
.doc-body > h2 { margin-top: 46px; }
.doc-body > h2:first-child { margin-top: 30px; }
/* A pointer away from this page, so it sits apart from the intro rather than
   reading as its last sentence. */
.doc-aside {
  margin-top: 16px; font-size: 13.5px; color: var(--faint);
}
.doc-aside a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.doc-close {
  margin-top: 46px; padding-top: 22px;
  border-top: 1px solid var(--border);
  font-size: 14px !important; color: var(--faint) !important;
}
/* the plain-language summary that opens each document */
.doc-tldr {
  margin-top: 30px; padding: 22px 26px;
  border: 1px solid var(--border); border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--surface), var(--bg-2));
  box-shadow: var(--shadow);
}
.doc-tldr h2 {
  font-size: 11.5px; font-weight: 640; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 10px;
}
.doc-tldr p { font-size: 16px; color: var(--text); line-height: 1.6; }
.doc-nav {
  display: flex; gap: 10px; flex-wrap: wrap; margin-top: 56px;
  padding-top: 26px; border-top: 1px solid var(--border);
}
.doc-nav a {
  font-size: 13.5px; font-weight: 560; color: var(--dim);
  border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px;
  transition: color var(--t-fast, 0.18s) var(--ease), border-color 0.3s var(--ease);
}
.doc-nav a:hover { color: var(--text); border-color: var(--border-hi); }
.doc-nav a[aria-current="page"] { color: #1d1108; background: var(--grad-gold); border-color: transparent; }

/* ---- footer --------------------------------------------------------------------------- */
.foot { border-top: 1px solid var(--border); padding: 64px 0 44px; }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.5fr); gap: 56px; }
.foot-brand .brand { margin-bottom: 18px; }
.foot-blurb { max-width: 42ch; font-size: 14px; line-height: 1.8; color: var(--faint); }
.foot-venture {
  margin-top: 16px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint);
}
.foot-social { display: flex; align-items: center; gap: 14px; margin-top: 20px; }
.foot-parent { display: inline-flex; margin-top: 28px; }
.foot-social a { color: var(--faint); transition: color 0.3s var(--ease); }
.foot-social a:hover { color: var(--gold); }
.foot-social svg { width: 18px; height: 18px; display: block; }

.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot-h {
  margin-bottom: 14px; font-size: 11px; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--faint);
}
.foot-col ul { list-style: none; margin: 0; padding: 0; }
.foot-col li { margin-bottom: 10px; }
.foot-col a {
  font-size: 13.5px; color: var(--dim); transition: color 0.3s var(--ease);
  /* the address is long and the column is narrow */
  overflow-wrap: anywhere;
}
.foot-col a:hover { color: var(--gold); }

.foot-base {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  margin-top: 52px; padding-top: 22px; border-top: 1px solid var(--border);
  font-size: 12px; color: var(--faint);
}
.foot-base { justify-content: flex-end; }
.foot-copy { white-space: nowrap; }

.ent-cta {
  display: flex; align-items: center; justify-content: center; gap: 20px;
  flex-wrap: wrap; text-align: center; margin-top: 34px;
}
.ent-cta p { font-size: 13.5px; color: var(--faint); max-width: 46ch; text-align: left; }
@media (max-width: 560px) { .ent-cta p { text-align: center; } }

/* ---- contact form -------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 40px; margin-top: 34px; }
.contact-form { display: flex; flex-direction: column; gap: 18px; }
/* Present to bots, gone for everyone else — including screen readers. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.f-row { display: contents; }
.f-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.f-field { display: flex; flex-direction: column; gap: 7px; }
.f-field > span { font-size: 12.5px; font-weight: 620; color: var(--dim); letter-spacing: 0.01em; }
.f-field input, .f-field select, .f-field textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 14.5px; color: var(--text);
  background: var(--surface); border: 1px solid var(--border-hi); border-radius: 12px;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.f-field textarea { resize: vertical; min-height: 130px; line-height: 1.65; }
.f-field input:focus, .f-field select:focus, .f-field textarea:focus {
  outline: none; border-color: rgba(240, 195, 74, 0.55);
  box-shadow: 0 0 0 3px rgba(240, 195, 74, 0.12);
}
.f-field input::placeholder, .f-field textarea::placeholder { color: var(--faint); }
.f-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 4px; }
.f-note { font-size: 13px; color: var(--faint); }
.f-note.ok { color: var(--good); }
.f-note.bad { color: var(--bad); }

.contact-aside { display: flex; flex-direction: column; gap: 14px; }
.contact-card { padding: 20px 22px; }
.contact-card p:not(.foot-h) { font-size: 13.5px; line-height: 1.75; color: var(--faint); }
.contact-card a { color: var(--gold); text-decoration: underline; text-underline-offset: 3px; }
.contact-card b { color: var(--dim); }

@media (max-width: 900px) {
  .foot-grid { grid-template-columns: 1fr; gap: 40px; }
  .foot-base { flex-direction: column; align-items: flex-start; gap: 12px; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 26px; }
  .f-two { grid-template-columns: 1fr; }
}

/* ---- reveal on scroll ------------------------------------------------------------------
   Progressive: content is visible by default and only *starts* hidden once the
   script has stamped `.js` on the root — so no-JS visitors (and any environment
   where IntersectionObserver never fires) always see the page. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
.case-grid .reveal:nth-child(3n + 2), .ent-grid .reveal:nth-child(3n + 2) { transition-delay: 0.08s; }
.case-grid .reveal:nth-child(3n), .ent-grid .reveal:nth-child(3n) { transition-delay: 0.16s; }

/* ---- responsive -------------------------------------------------------------------------- */
/* Narrower than this the devices would reach the centred buttons, so the stage
   drops back below the copy (JS applies the same rule). */
@media (max-width: 1120px) {
  .hero-stage { margin-top: 0; }
  /* the compact hero does not need to bleed, and 100vw only risks overflow here */
  .hero-stage.bleed { width: auto; margin-left: 0; }
}
@media (max-width: 960px) {
  .hero { padding-top: 134px; }
  .case-grid, .ent-grid { grid-template-columns: 1fr 1fr; }
  .fleet-grid { grid-template-columns: 1fr; gap: 30px; }
}
/* ---- compact hero: diagram on top, cards in a fixed slot beneath ---------------- */
@media (max-width: 1120px) {
  .hero { padding-bottom: 40px; }
  .hero-copy { margin-bottom: 20px; }
  .hero-stage { padding-top: 0; }
  /* the compact drawing is nearly square — keep it from filling the screen */
  .hero-viz { max-width: min(520px, 94vw); padding: 0 4px; }

  .net-cards {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    width: 100%; margin-top: 14px;
    /* reserved so the diagram never shifts as cards come and go */
    min-height: 104px;
  }
  /* in the slot they are ordinary blocks: no anchoring, no offsets */
  .net-cards .net-bubble, .net-cards .net-result {
    position: static; max-width: min(420px, 92%); width: max-content;
  }
  .net-cards .net-bubble { transform: translateY(6px); }
  .net-cards .net-bubble.show { transform: none; }
  .net-cards .net-result { transform: translateY(6px); }
  .net-cards .net-result.show { transform: none; }
  .net-bubble { font-size: 13px; }
  .intro { padding-bottom: 76px; }
  .intro-cta { margin-top: 40px; }
  .intro-thread { height: 34px; margin-bottom: 22px; }
}
@media (max-width: 760px) {
  .hero { padding-top: 128px; }
  .hero-copy h1 { font-size: clamp(38px, 11vw, 52px); }
  .hero-deva { margin-top: 9px; }
  .deva { font-size: 22px; }
  .deva-tr { font-size: 11px; letter-spacing: 0.16em; }
  .hero-sub { font-size: 16.5px; margin: 8px 0 7px; }
  .hero-tag { font-size: 14.5px; margin-bottom: 22px; }
}

/* ---- mobile menu --------------------------------------------------------- */
.nav-toggle {
  display: none; width: 40px; height: 40px; padding: 0;
  flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--surface); border: 1px solid var(--border-hi); border-radius: 11px;
  cursor: pointer; margin-left: 10px;
}
.nav-toggle span {
  display: block; width: 16px; height: 1.6px; border-radius: 2px;
  background: var(--gold); transition: transform 0.28s var(--ease), opacity 0.2s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.6px) rotate(-45deg); }

/* The parent-site link reads as a button beside the nav on a wide screen, and as
   one more row once the nav becomes a menu. */
.nav-parent {
  padding: 7px 13px; border: 1px solid var(--border-hi); border-radius: 999px;
  font-size: 12.5px !important;
}

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav-in { position: relative; }
  /* .nav-links was carrying the primary button rightwards with margin-left:auto;
     once it leaves the flow, the button has to do that itself. */
  .nav-in .btn.primary.sm { margin-left: auto; }
  .nav-links {
    position: absolute; top: calc(100% + 10px); right: 16px; left: 16px;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px; border: 1px solid var(--border-hi); border-radius: 16px;
    background: var(--bg-2); box-shadow: var(--shadow);
    opacity: 0; visibility: hidden; transform: translateY(-6px);
    transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
  }
  .nav-links.open { opacity: 1; visibility: visible; transform: none; }
  .nav-links a {
    padding: 13px 14px; border-radius: 11px; font-size: 15px !important;
  }
  .nav-links a:hover { background: var(--surface); }
  .nav-parent {
    margin-top: 4px; border: 0; border-top: 1px solid var(--border); border-radius: 0;
    padding-top: 15px;
  }
}

@media (max-width: 700px) {
  .case-grid, .ent-grid, .dl-grid { grid-template-columns: 1fr; }
  .section { padding: 76px 0; }
  /* one panel per row: each gets the full width, so both stay legible and the
     section never scrolls sideways */
  .anw-grid { grid-template-columns: 1fr; gap: 14px; }
  .anw-card { padding: 22px; }
  /* the claims are stacked now, so they no longer need a matched height */
  .anw-p { min-height: 0; }
}

/* ---- reduced motion ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; }
  .np, #netPulse, .anw-pulse, .anw-pkt { display: none; }
  .js .reveal { opacity: 1; transform: none; }
}

/* ---- pricing ------------------------------------------------------------------------- */
.pricing-lede {
  max-width: 62ch;
  margin: 0 auto;
  color: var(--dim);
  font-size: 16.5px;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 42px;
  align-items: stretch;
}
.price-card {
  display: flex;
  flex-direction: column;
  padding: 32px 28px;
  position: relative;
}
/* the recommended plan carries a warm edge rather than a loud colour change */
.price-card.featured {
  border-color: var(--border-hi);
  background:
    linear-gradient(180deg, rgba(240, 195, 74, 0.07), transparent 46%),
    linear-gradient(180deg, var(--surface), var(--bg-2));
  box-shadow: 0 1px 0 rgba(255, 220, 150, 0.08) inset,
    0 26px 64px -30px rgba(240, 195, 74, 0.4);
}
.price-flag {
  position: absolute;
  top: -11px;
  left: 28px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #1d1108;
  background: var(--grad-gold);
  border-radius: 999px;
  padding: 4px 12px;
}
.price-name {
  font-size: 15px;
  font-weight: 640;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.price-fig {
  display: flex;
  align-items: baseline;
  gap: 9px;
  margin-top: 12px;
}
.price-amt {
  font-size: clamp(30px, 3.2vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
}
.price-per {
  font-size: 13.5px;
  color: var(--faint);
}
/* Sits on the price line, quieter than the amount but not hidden — a buyer who
   reads "₹499" and is charged ₹588.82 at checkout was misled by the card. */
.price-tax {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--dim);
  padding: 2px 8px;
  border: 1px solid var(--border);
  border-radius: 999px;
  white-space: nowrap;
}
.price-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--faint);
}
.price-list {
  list-style: none;
  margin: 22px 0 28px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.price-list li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--dim);
  line-height: 1.5;
}
.price-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 7px;
  width: 9px;
  height: 5px;
  border-left: 1.8px solid var(--gold);
  border-bottom: 1.8px solid var(--gold);
  transform: rotate(-45deg);
}
.price-list b {
  color: var(--text);
  font-weight: 680;
}
.price-card .btn {
  margin-top: auto;
}
.price-note {
  text-align: center;
  max-width: 60ch;
  margin: 30px auto 0;
  font-size: 13px;
  color: var(--faint);
  line-height: 1.6;
}
@media (max-width: 960px) {
  .price-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

/* ---- pricing toggles ------------------------------------------------------------------ */
.price-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}
.seg {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: rgba(21, 13, 7, 0.5);
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--dim);
  font: 600 13.5px "Manrope", sans-serif;
  letter-spacing: -0.01em;
  padding: 9px 18px;
  cursor: pointer;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-on {
  color: #1d1108;
  background: var(--grad-gold);
}
.seg-save {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  opacity: 0.78;
}
.seg-btn.is-on .seg-save { opacity: 0.72; }
@media (max-width: 460px) {
  .seg-btn { padding: 9px 13px; font-size: 12.5px; }
  .seg-save { display: none; }
}

/* three download cards rather than two */
.dl-grid.three { grid-template-columns: repeat(3, minmax(0, 340px)); }
@media (max-width: 960px) { .dl-grid.three { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }
/* a button that is deliberately not yet a link */
.btn.is-soon { cursor: default; opacity: 0.55; border-style: dashed; }
.btn.is-soon:hover { transform: none; border-color: var(--border-hi); }

/* ---- multi-device diagram ----------------------------------------------------
   Five devices on a regular pentagon. All ten chords are drawn, so the claim
   "every device reaches every other" is literally on screen, but only one is
   lit at a time — ten simultaneous pulses over crossing lines was noise. */
.fleet-viz svg { width: 100%; height: auto; overflow: visible; }
.fl-edge {
  stroke: var(--gold);
  stroke-opacity: .1;
  stroke-width: 1.1;
  transition: stroke-opacity .45s var(--ease), stroke-width .45s var(--ease);
}
.fl-edge.lit { stroke-opacity: .85; stroke-width: 2; }
.fl-node rect {
  fill: #1e130b;
  stroke: var(--gold);
  stroke-opacity: .55;
  stroke-width: 1.5;
  transition: stroke-opacity .45s var(--ease), fill .45s var(--ease);
}
.fl-node.hub rect { stroke-opacity: .8; }
.fl-dev.active .fl-node rect { stroke-opacity: 1; fill: #33200f; }
.fl-cap {
  fill: var(--faint);
  font-family: inherit;
  font-size: 11px;
  letter-spacing: .04em;
  transition: fill .45s var(--ease);
}
.fl-dev.active .fl-cap { fill: var(--text); }
.fl-pulse { fill: var(--gold-2); opacity: 0; }

/* the two states cross-fade */
.fleet-viz .multi { opacity: 0; transition: opacity .55s var(--ease); pointer-events: none; }
.fleet-viz .single { opacity: 1; transition: opacity .45s var(--ease); }
.fleet-viz.on .multi { opacity: 1; }
.fleet-viz.on .single { opacity: 0; }

/* ---- hero CTA: an order of operations, not a choice --------------------------
   Two equal gold buttons read as "pick one". A filled primary, the word "then",
   and an outlined second button read as "this, and afterwards this" — which is
   what installing Sandhi actually is. */
.cta-pair { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.cta-a { gap: 10px; padding: 15px 26px; font-size: 14.5px; letter-spacing: -0.008em; }
.cta-os { display: grid; place-items: center; width: 17px; height: 17px; }
.cta-os svg { width: 100%; height: 100%; }

/* ---- download: both apps required -------------------------------------------- */
.both-note {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  max-width: 760px; margin: 26px auto 0;
  padding: 15px 22px;
  border: 1px solid var(--border-hi); border-radius: var(--r-card);
  background: linear-gradient(180deg, rgba(240, 195, 74, .07), transparent);
  font-size: 14.5px; color: var(--dim); line-height: 1.6; text-align: center;
}
.both-note b { color: var(--text); font-weight: 660; }
.both-ico { flex: none; color: var(--gold); }
.both-ico svg { width: 26px; height: 26px; }
/* The same marker the model-choice cards use, so "not yet" reads identically
   wherever it appears. A pricing list that looks the same whether or not a line
   exists is how a customer ends up surprised. */
.price-list .soon-tag { vertical-align: 1px; white-space: nowrap; }

.dl-step {
  display: inline-grid; place-items: center;
  width: 21px; height: 21px; border-radius: 50%;
  font-size: 11.5px; font-weight: 800; color: #1d1108;
  background: var(--grad-gold); margin-right: 8px; vertical-align: 2px;
}
@media (max-width: 560px) {
  .cta-plus { display: none; }
  .cta-pair .btn { width: 100%; }
}

/* the Free-state count, spelled out under the two devices */
.fl-count {
  fill: var(--text); font-family: inherit; font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
}
.fl-note { fill: var(--faint); font-family: inherit; font-size: 11px; letter-spacing: .04em; }

/* ---- secondary button ---------------------------------------------------------
   A transparent ghost beside a filled gold button looks unfinished rather than
   subordinate. This gives the second step real substance — a dark surface, a gold
   hairline and a gold mark — so the pair reads as two solid steps of one flow,
   with the fill still marking which comes first. */
.btn.secondary {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  color: var(--text);
  border: 1px solid var(--border-hi);
  box-shadow: 0 1px 0 rgba(255, 220, 150, .07) inset,
    0 10px 28px -14px rgba(0, 0, 0, .8);
}
.btn.secondary .cta-os { color: var(--gold); }
.btn.secondary:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  background: linear-gradient(180deg, var(--surface-hi, #402b1a), var(--surface-2));
  box-shadow: 0 1px 0 rgba(255, 220, 150, .1) inset,
    0 16px 34px -16px rgba(0, 0, 0, .85);
}