/* ============================================================
   BuildScope V2 design system + hero
   Dark premium foundation, amber brand anchor, construction
   accent set. Tokens first, components after.
   ============================================================ */

:root {
  /* Surfaces */
  --bg-0: #0a0c10;
  --bg-1: #0d1016;
  --bg-2: #12151d;
  --card: rgba(17, 20, 28, 0.86);
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);

  /* Ink */
  --ink: #f4f1ea;
  --ink-dim: #a8b0bd;
  --ink-faint: #8b93a2;

  /* Brand + accents */
  --brand: #f59e0b;
  --brand-hi: #fbbf24;
  --brand-ink: #201302;
  --lime: #c8f542;
  --safety: #ff6b35;
  --cyan: #3dd6f5;
  --violet: #8b7cf6;

  /* Type */
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  /* Rhythm */
  --r-sm: 12px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-pill: 999px;
  --wrap: 1240px;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 160ms;
  --t-med: 320ms;

  /* Layers */
  --z-bg: 0;
  --z-content: 2;
  --z-noti: 3;
  --z-nav: 40;
  --z-grain: 60;
}

/* ---------- Scrollbars ----------
   One slim pill instead of the chunky OS default with its arrow buttons.
   V3 is dark only, so the bar is too. color-scheme is what stops the browser
   painting the native bar light on a dark page. */
:root { color-scheme: dark; --sb-thumb: rgba(255,255,255,.18); --sb-thumb-hover: rgba(255,255,255,.32); }

*::-webkit-scrollbar { width: 12px; height: 12px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-corner { background: transparent; }
*::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
*::-webkit-scrollbar-thumb {
  background: var(--sb-thumb);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover,
*::-webkit-scrollbar-thumb:active { background: var(--sb-thumb-hover); background-clip: padding-box; }

/* Firefox. Behind @supports because Chromium honours these OVER the ::-webkit
   rules above when both are present, which would undo the pill. */
@supports not selector(::-webkit-scrollbar) {
  * { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
.mono { font-family: var(--mono); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Film grain across the whole page, very low, no layout cost. */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.62rem 1.25rem;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
  white-space: nowrap;
}
.btn-primary {
  background: linear-gradient(180deg, var(--brand-hi), var(--brand));
  color: var(--brand-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 8px 24px -8px rgba(245, 158, 11, 0.55);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 12px 32px -8px rgba(245, 158, 11, 0.65);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
  color: var(--ink);
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.02);
}
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.22); }
.btn-lg { font-size: 1.05rem; padding: 0.85rem 1.7rem; }

/* ============================================================
   Floating capsule navigation
   ============================================================ */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  padding: max(14px, env(safe-area-inset-top)) 18px 0;
  pointer-events: none;
}
.nav-row {
  pointer-events: auto;
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
}
.nav-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-weight: 800;
  font-size: 1.12rem;
  letter-spacing: -0.01em;
  justify-self: start;
}
.nav-brand img { width: 30px; height: 32px; }
.nav-capsule {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.32rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(13, 16, 22, 0.55);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background var(--t-med) var(--ease), border-color var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.nav.scrolled .nav-capsule {
  background: rgba(13, 16, 22, 0.88);
  border-color: var(--line-strong);
  box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.6);
}
.nav-capsule a {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--ink-dim);
  padding: 0.42rem 0.95rem;
  border-radius: var(--r-pill);
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.nav-capsule a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.nav-capsule a.is-active { color: var(--ink); background: rgba(255, 255, 255, 0.08); }
.nav-actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.nav-actions .btn { font-size: 0.88rem; padding: 0.5rem 1.05rem; }
.nav-burger {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line-strong);
  background: rgba(13, 16, 22, 0.7);
  color: var(--ink);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-burger svg { width: 20px; height: 20px; }

/* Compact dropdown, not a full-screen takeover. */
.nav-menu {
  pointer-events: auto;
  display: none;
  max-width: 340px;
  margin: 0.6rem 0 0 auto;
  padding: 0.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
  background: rgba(13, 16, 22, 0.96);
  box-shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.7);
}
.nav-menu.open { display: block; }
.nav-menu a {
  display: block;
  padding: 0.7rem 0.9rem;
  border-radius: 10px;
  font-weight: 600;
  color: var(--ink-dim);
}
.nav-menu a:hover { color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.nav-menu-signin { border-top: 1px solid var(--line); margin-top: 0.35rem; padding-top: 0.9rem !important; }

/* ============================================================
   Hero
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(6.5rem, 12vh, 9rem) 18px 4.5rem;
  overflow: clip;
}
.hero-bg { position: absolute; inset: 0; z-index: var(--z-bg); }
#stars { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Blueprint layer: fine grid + crosshair marks, faded at the edges. */
.bg-blueprint {
  position: absolute;
  inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.16' stroke-width='1'%3E%3Cpath d='M128 120v16M120 128h16'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 256px 256px, 64px 64px, 64px 64px;
  mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, #000 35%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 42%, #000 35%, transparent 78%);
}

/* Large soft colour fields, slow drift. */
.bg-glow {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation: glow-drift 22s var(--ease) infinite alternate;
}
.bg-glow-amber {
  width: 780px;
  height: 780px;
  left: -240px;
  top: -180px;
  background: radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.17), transparent 62%);
}
.bg-glow-cool {
  width: 900px;
  height: 900px;
  right: -300px;
  bottom: -260px;
  background: radial-gradient(circle at 55% 45%, rgba(61, 214, 245, 0.1), rgba(139, 124, 246, 0.08) 45%, transparent 68%);
  animation-duration: 28s;
  animation-delay: -9s;
}
@keyframes glow-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(60px, 40px, 0); }
}
.bg-grain { display: none; }

.hero-in {
  position: relative;
  z-index: var(--z-content);
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
}

/* ----- Copy ----- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-dim);
  letter-spacing: 0.01em;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  padding: 0.42rem 0.95rem;
  border-radius: var(--r-pill);
}
.eyebrow-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
  box-shadow: 0 0 10px 2px rgba(245, 158, 11, 0.55);
  animation: dot-pulse 2.6s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.72); opacity: 0.65; }
}
.hero-copy h1 {
  margin-top: 1.4rem;
  font-size: clamp(2.7rem, 4.6vw + 1rem, 5.1rem);
  font-weight: 900;
  letter-spacing: -0.032em;
  line-height: 1.02;
  text-wrap: balance;
}
.grad {
  background: linear-gradient(92deg, var(--brand-hi) 5%, var(--brand) 55%, #f9822a 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-sub {
  margin-top: 1.35rem;
  max-width: 34rem;
  font-size: clamp(1.05rem, 1.1vw + 0.6rem, 1.25rem);
  color: var(--ink-dim);
}
.hero-cta {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
}
.hero-trust {
  margin-top: 1.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--ink-faint);
}
.hero-trust svg { width: 15px; height: 15px; color: var(--lime); flex: none; }

/* ----- Art column ----- */
.hero-art {
  position: relative;
  min-height: clamp(480px, 62vh, 720px);
  perspective: 1600px;
}
.phone-stage {
  position: absolute;
  inset: 0;
  z-index: var(--z-content);
  display: flex;
  align-items: center;
  justify-content: center;
}
.phone {
  border-radius: clamp(2.6rem, 2.6vw, 3.3rem);
  padding: clamp(8px, 0.8vw, 11px);
  background: linear-gradient(155deg, #262b36, #14171e 55%, #1d212b);
  border: 1px solid rgba(255, 255, 255, 0.12);
  will-change: transform;
}
.phone img {
  border-radius: clamp(2rem, 2vw, 2.6rem);
  width: 100%;
  height: auto;
}
.phone-main {
  position: relative;
  z-index: 2;
  width: clamp(290px, 26vw, 428px);
  transform: rotateY(calc(-13deg + var(--ry, 0deg))) rotateX(calc(4.5deg + var(--rx, 0deg))) rotateZ(2.2deg);
  box-shadow:
    -18px 4px 44px -18px rgba(245, 158, 11, 0.38),
    22px 16px 60px -20px rgba(61, 214, 245, 0.28),
    0 48px 90px -30px rgba(0, 0, 0, 0.85);
  animation: phone-float 9s ease-in-out infinite alternate;
}
.phone-back {
  position: absolute;
  z-index: 1;
  width: clamp(230px, 19vw, 320px);
  left: -9%;
  top: 1%;
  transform: rotateY(-20deg) rotateX(6deg) rotateZ(-5deg) scale(0.96);
  filter: brightness(0.55) saturate(0.85) blur(1.5px);
  box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.8);
  animation: phone-float 11s ease-in-out infinite alternate-reverse;
}
@keyframes phone-float {
  from { translate: 0 -8px; }
  to { translate: 0 10px; }
}
.phone-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.07) 50%, transparent 58%);
  pointer-events: none;
}
.phone-glow {
  position: absolute;
  left: 50%;
  top: 58%;
  transform: translate(-50%, -50%);
  width: 130%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.12), transparent 60%);
  z-index: 1;
  pointer-events: none;
}

/* ----- Blueprint dimension marks ----- */
.dim {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  opacity: 0.4;
  color: var(--ink-dim);
}
.dim-v {
  flex-direction: column;
  left: -2%;
  top: 14%;
  height: 62%;
  border-left: 1px dashed rgba(255, 255, 255, 0.28);
}
.dim-v .dim-cap { width: 12px; border-top: 1px solid rgba(255, 255, 255, 0.35); margin-left: -6px; }
.dim-v .dim-cap:first-child { margin-top: -1px; }
.dim-v .dim-label { writing-mode: vertical-rl; rotate: 180deg; font-size: 0.68rem; letter-spacing: 0.08em; margin-left: -1.7em; }
.dim-h {
  left: 22%;
  right: 4%;
  bottom: -1%;
  border-top: 1px dashed rgba(255, 255, 255, 0.28);
}
.dim-h .dim-cap { height: 12px; border-left: 1px solid rgba(255, 255, 255, 0.35); margin-top: -6px; }
.dim-h .dim-label { font-size: 0.68rem; letter-spacing: 0.08em; margin-top: 0.35em; }

/* ----- Floating notifications ----- */
.noti {
  position: absolute;
  z-index: var(--z-noti);
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.68rem 0.95rem;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: var(--card);
  box-shadow: 0 22px 44px -18px rgba(0, 0, 0, 0.75);
  max-width: 270px;
  will-change: transform;
  animation: noti-float var(--dur, 10s) ease-in-out var(--delay, 0s) infinite alternate;
}
@keyframes noti-float {
  from { transform: translate3d(0, -7px, 0) rotate(-0.4deg); }
  to { transform: translate3d(0, 9px, 0) rotate(0.4deg); }
}
.noti-ic {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.noti-ic svg { width: 17px; height: 17px; }
.ic-lime { background: rgba(200, 245, 66, 0.13); color: var(--lime); }
.ic-cyan { background: rgba(61, 214, 245, 0.13); color: var(--cyan); }
.ic-safety { background: rgba(255, 107, 53, 0.14); color: var(--safety); }
.ic-violet { background: rgba(139, 124, 246, 0.15); color: var(--violet); }
.ic-amber { background: rgba(245, 158, 11, 0.14); color: var(--brand); }
.noti-txt { display: flex; flex-direction: column; min-width: 0; }
.noti-txt strong { font-size: 0.83rem; font-weight: 700; letter-spacing: -0.01em; }
.noti-txt em { font-style: normal; font-size: 0.76rem; color: var(--ink-dim); }
.noti-time { align-self: flex-start; font-size: 0.66rem; color: var(--ink-faint); margin-left: 0.2rem; }

.noti-1 { left: -5%; top: 9%; --dur: 9s; }
.noti-2 { left: -11%; bottom: 24%; --dur: 11.5s; --delay: -4s; }
.noti-3 { right: -4%; top: 33%; --dur: 10.5s; --delay: -7s; }
.noti-4 { right: 0%; bottom: 5%; --dur: 12.5s; --delay: -2s; }
/* Fifth card, only present once an integration is approved for marketing. It
   fills the gap on the right between "Missing detail flagged" and the bottom
   card, which is the one slot in the hero art with nothing in it. */
.noti-5 { right: -5%; top: 56%; --dur: 11s; --delay: -3.5s; }
.noti-deep { z-index: 1; pointer-events: none; }
.noti-a { right: 12%; top: -3%; filter: blur(2px); opacity: 0.55; --dur: 13s; --delay: -5s; }
.noti-b { left: 4%; top: 47%; filter: blur(3px); opacity: 0.38; --dur: 14s; --delay: -9s; }

/* Voice waveform icon */
.wave { display: flex; align-items: center; gap: 2.5px; height: 16px; }
.wave i {
  width: 2.5px;
  border-radius: 2px;
  background: var(--cyan);
  height: 30%;
  animation: wave-b 1.15s ease-in-out infinite alternate;
}
.wave i:nth-child(2) { animation-delay: 0.12s; height: 70%; }
.wave i:nth-child(3) { animation-delay: 0.24s; height: 100%; }
.wave i:nth-child(4) { animation-delay: 0.36s; height: 60%; }
.wave i:nth-child(5) { animation-delay: 0.48s; height: 35%; }
@keyframes wave-b {
  from { transform: scaleY(0.45); }
  to { transform: scaleY(1); }
}

/* Scroll cue */
.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: var(--z-content);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-dim);
  animation: cue-bob 2.4s ease-in-out infinite;
  transition: color var(--t-fast), border-color var(--t-fast);
}
.hero-scroll:hover { color: var(--ink); border-color: rgba(255, 255, 255, 0.3); }
.hero-scroll svg { width: 18px; height: 18px; }
@keyframes cue-bob {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 6px; }
}

/* ============================================================
   Sections: shared shell
   ============================================================ */
.sec {
  position: relative;
  z-index: var(--z-content);
  padding: clamp(4.5rem, 9vw, 7.5rem) 18px;
}
.sec-raised {
  margin-top: calc(var(--r-lg) * -1);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, var(--bg-1), var(--bg-0) 62%);
}
.sec-in { max-width: var(--wrap); margin: 0 auto; }
.sec-in.narrow { max-width: 860px; }
.sec-in.wide { max-width: 1400px; }
.sec-in.center { text-align: center; }
.sec h2 {
  margin-top: 1.3rem;
  font-size: clamp(2rem, 2.7vw + 0.8rem, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.026em;
  line-height: 1.06;
  text-wrap: balance;
}
.sec-head { max-width: 780px; }
.sec-head .sec-lead { margin-top: 1.1rem; }
.sec-lead { color: var(--ink-dim); font-size: clamp(1rem, 0.9vw + 0.6rem, 1.15rem); max-width: 40rem; }
.sec-cta { margin-top: 2.2rem; text-align: center; }
.bp-desk { display: none; }
@media (min-width: 700px) { .bp-desk { display: inline; } }

.grad-safety { background: linear-gradient(92deg, #ff8f5a, var(--safety)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-cyan { background: linear-gradient(92deg, #8ae6fa, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-violet { background: linear-gradient(92deg, #b3a8fa, var(--violet)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.grad-lime { background: linear-gradient(92deg, #e0fa82, var(--lime)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dot-safety { background: var(--safety); box-shadow: 0 0 10px 2px rgba(255, 107, 53, 0.5); }
.dot-cyan { background: var(--cyan); box-shadow: 0 0 10px 2px rgba(61, 214, 245, 0.5); }
.dot-violet { background: var(--violet); box-shadow: 0 0 10px 2px rgba(139, 124, 246, 0.5); }
.dot-lime { background: var(--lime); box-shadow: 0 0 10px 2px rgba(200, 245, 66, 0.5); }

/* Scroll reveals: JS adds .in when the block enters the viewport. Hiding is
   gated on html.js so content is fully visible when JavaScript is off. */
html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
html.js [data-reveal].in { opacity: 1; transform: none; }

.tick-list { list-style: none; margin-top: 1.6rem; display: grid; gap: 0.7rem; }
.tick-list li { display: flex; gap: 0.65rem; align-items: flex-start; color: var(--ink-dim); font-size: 0.98rem; }
.tick-list svg { width: 16px; height: 16px; color: var(--lime); flex: none; margin-top: 0.2rem; }

/* ============================================================
   02 Super app: pipeline + big desktop screen
   ============================================================ */
.pipeline {
  margin-top: 2.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}
.pipe-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 700;
  padding: 0.45rem 0.95rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--ink-dim);
}
.pd { width: 7px; height: 7px; border-radius: 50%; }
.pd-amber { background: var(--brand); }
.pd-cyan { background: var(--cyan); }
.pd-violet { background: var(--violet); }
.pd-lime { background: var(--lime); }

.browser-wrap { position: relative; margin-top: 3rem; }
.browser-glow {
  position: absolute;
  inset: -8% -6%;
  background: radial-gradient(ellipse at 50% 40%, rgba(245, 158, 11, 0.12), transparent 62%);
  pointer-events: none;
}
.browser {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  background: #171a22;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
}
.browser-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--line);
}
.bdot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.browser-bar .bdot:first-child { background: rgba(255, 107, 53, 0.6); }
.burl {
  margin-left: 0.8rem;
  font-size: 0.72rem;
  color: var(--ink-faint);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 0.22rem 0.85rem;
}
.browser img { width: 100%; height: auto; }

/* ============================================================
   03 The problem: narrative + two timelines
   ============================================================ */
.truth-body { margin-top: 1.6rem; display: grid; gap: 1rem; }
.truth-body p { color: var(--ink-dim); font-size: clamp(1.02rem, 1vw + 0.6rem, 1.2rem); }
.truth-strong { color: var(--ink); font-weight: 700; font-size: clamp(1.15rem, 1.2vw + 0.7rem, 1.45rem) !important; }
.tl-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}
.tl-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  padding: 1.5rem 1.6rem;
}
.tl-good { border-color: rgba(200, 245, 66, 0.25); box-shadow: 0 24px 60px -30px rgba(200, 245, 66, 0.18); }
.tl-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.tl-label { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 0.95rem; }
.tl-label svg { width: 16px; height: 16px; color: var(--ink-faint); }
.tl-good .tl-label svg { color: var(--brand); }
.tl-tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3rem 0.7rem; border-radius: var(--r-pill); }
.tag-bad { color: var(--safety); background: rgba(255, 107, 53, 0.12); }
.tag-good { color: var(--lime); background: rgba(200, 245, 66, 0.12); }
.tl-steps { list-style: none; margin-top: 1.3rem; display: grid; gap: 0.85rem; }
.tl-steps li { display: grid; grid-template-columns: 92px 1fr; gap: 0.9rem; align-items: baseline; }
.tl-steps .mono { font-size: 0.74rem; color: var(--ink-faint); }
.tl-good .tl-steps .mono { color: var(--brand); }
.tl-steps span:last-child { color: var(--ink-dim); font-size: 0.94rem; }

/* ============================================================
   04 Workflow: steps + sticky phone
   ============================================================ */
.flow {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 430px);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.flow-step {
  position: relative;
  display: flex;
  gap: 1.4rem;
  padding: 2.4rem 0 2.4rem 1.8rem;
  border-left: 2px solid var(--line);
  transition: border-color var(--t-med) var(--ease);
}
.flow-step h3 { font-size: clamp(1.25rem, 1.3vw + 0.7rem, 1.7rem); font-weight: 800; letter-spacing: -0.02em; }
.flow-step p { margin-top: 0.6rem; color: var(--ink-dim); max-width: 28rem; }
.flow-n { font-size: 0.85rem; color: var(--ink-faint); transition: color var(--t-med); padding-top: 0.35rem; }
.flow-step.is-active { border-color: var(--brand); }
.flow-step.is-active .flow-n { color: var(--brand); }
.flow-mimg { display: none; }
.flow-device { position: relative; min-height: 100%; }
.phone-flow {
  position: sticky;
  top: 12vh;
  width: min(100%, 340px);
  margin: 0 auto;
  border-radius: clamp(2.4rem, 2.4vw, 3rem);
  padding: 9px;
  background: linear-gradient(155deg, #262b36, #14171e 55%, #1d212b);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 40px 80px -28px rgba(0, 0, 0, 0.8), -14px 6px 40px -18px rgba(245, 158, 11, 0.28);
}
.flow-img { border-radius: clamp(1.9rem, 1.9vw, 2.4rem); opacity: 0; transition: opacity 0.45s var(--ease); }
.flow-img:not(:first-child) { position: absolute; inset: 9px; }
.flow-img.is-on { opacity: 1; }
@media (min-width: 961px) {
  .flow-steps .flow-step { min-height: 46vh; align-items: center; }
}

/* ============================================================
   05 Voice capture
   ============================================================ */
.voice-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.voice-panel {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  padding: 1.7rem;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8), 0 0 60px -20px rgba(61, 214, 245, 0.15);
}
.vp-head { display: flex; align-items: center; gap: 1.1rem; }
.vp-mic {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #04252d;
  background: linear-gradient(180deg, #7ce4fa, var(--cyan));
  box-shadow: 0 0 0 6px rgba(61, 214, 245, 0.12), 0 0 30px rgba(61, 214, 245, 0.35);
  animation: mic-pulse 2.4s ease-in-out infinite;
}
.vp-mic svg { width: 22px; height: 22px; }
@keyframes mic-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(61, 214, 245, 0.12), 0 0 24px rgba(61, 214, 245, 0.3); }
  50% { box-shadow: 0 0 0 10px rgba(61, 214, 245, 0.07), 0 0 40px rgba(61, 214, 245, 0.45); }
}
.wave-lg { height: 30px; gap: 3.5px; flex: 1; }
.wave-lg i { width: 3.5px; }
.vp-rec { font-size: 0.72rem; color: var(--safety); letter-spacing: 0.08em; }
.vp-lines { margin-top: 1.4rem; display: grid; gap: 0.55rem; }
.vp-line { color: var(--ink-dim); font-size: 0.95rem; }
.vp-line:last-child { color: var(--ink); }
.vp-chips { margin-top: 1.4rem; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vp-chip { font-size: 0.78rem; font-weight: 700; padding: 0.38rem 0.8rem; border-radius: var(--r-pill); }
.ch-lime { color: var(--lime); background: rgba(200, 245, 66, 0.1); border: 1px solid rgba(200, 245, 66, 0.25); }
.ch-cyan { color: var(--cyan); background: rgba(61, 214, 245, 0.1); border: 1px solid rgba(61, 214, 245, 0.25); }
.ch-violet { color: var(--violet); background: rgba(139, 124, 246, 0.12); border: 1px solid rgba(139, 124, 246, 0.28); }
.ch-safety { color: var(--safety); background: rgba(255, 107, 53, 0.1); border: 1px solid rgba(255, 107, 53, 0.28); }

/* ============================================================
   06 Versus generic AI
   ============================================================ */
.vs-grid {
  margin-top: 3rem;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 1.4rem;
  align-items: stretch;
}
.vs-card {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
}
.vs-bs { border-color: rgba(245, 158, 11, 0.35); box-shadow: 0 24px 60px -28px rgba(245, 158, 11, 0.25); }
.vs-tag { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); }
.vs-tag-bs { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--brand); }
.vs-tag-bs img { width: 16px; height: 17px; }
.vs-blob {
  margin-top: 1rem;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--line);
  padding: 1rem 1.1rem;
}
.vs-blob p { color: var(--ink-faint); font-size: 0.88rem; line-height: 1.6; }
.vs-scope {
  margin-top: 1rem;
  border-radius: var(--r-sm);
  background: #f8f7f3;
  color: #232a38;
  padding: 1rem 1.1rem;
  font-size: 0.85rem;
}
.vs-sec { font-size: 0.68rem; letter-spacing: 0.08em; color: #a05e00; margin: 0.7rem 0 0.3rem; }
.vs-sec:first-child { margin-top: 0; }
.vs-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.3rem 0; border-bottom: 1px dotted rgba(35, 42, 56, 0.2); }
.vs-line:last-child { border-bottom: 0; }
.vs-line .mono { font-size: 0.72rem; color: #5b6472; white-space: nowrap; }
.vs-list { list-style: none; margin-top: 1.2rem; display: grid; gap: 0.5rem; }
.vs-list li { position: relative; padding-left: 1.6rem; color: var(--ink-dim); font-size: 0.92rem; }
.vs-list li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.vs-cons li::before { content: '✕'; color: var(--safety); }
.vs-pros li::before { content: '✓'; color: var(--lime); }
.vs-arrow {
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--bg-2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}
.vs-arrow svg { width: 20px; height: 20px; }

/* ============================================================
   07 Device ecosystem
   ============================================================ */
.eco { position: relative; margin-top: 3rem; padding: 0 6%; }
.eco-desktop { max-width: 76%; margin: 0 auto; }
.eco-tablet {
  position: absolute;
  right: 0;
  bottom: -6%;
  width: 21%;
  border-radius: 18px;
  padding: 7px;
  background: linear-gradient(155deg, #262b36, #14171e 60%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.85);
}
.eco-tablet img { border-radius: 12px; }
.eco-phone {
  position: absolute;
  left: 2%;
  bottom: -10%;
  width: 19%;
  z-index: 2;
  border-radius: 30px;
  padding: 8px;
  transform: rotate(-4deg);
  box-shadow: -14px 8px 44px -16px rgba(245, 158, 11, 0.4), 0 34px 70px -24px rgba(0, 0, 0, 0.9);
}
.eco-phone img { border-radius: 23px; }
.eco-cards {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.ecard {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02);
  padding: 1.3rem 1.4rem;
}
.ecard h3 { font-size: 1.02rem; font-weight: 800; }
.ecard p { margin-top: 0.45rem; color: var(--ink-dim); font-size: 0.92rem; }
.ecard-tag {
  display: inline-block;
  margin-top: 0.8rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--brand);
}

/* ---------- Native app download: App Store badge, download card, QR ----------
   The badge img is Apple's official asset (public/img/app-store-badge.svg),
   used as-is per Apple's marketing guidelines. Never restyle or redraw it. */
.store-badge { display: inline-flex; flex: none; border-radius: 8px; transition: opacity var(--t-fast) ease; }
.store-badge:hover { opacity: 0.85; }
.store-badge img { display: block; }
.hero-store { margin-top: 1.2rem; display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.hero-store span { font-size: 0.85rem; color: var(--ink-faint); }

.dl-card {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(2rem, 4vw, 3.75rem);
  align-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background:
    radial-gradient(120% 160% at 85% 0%, rgba(245, 158, 11, 0.07), transparent 55%),
    var(--bg-2);
  padding: clamp(1.7rem, 4vw, 2.9rem) clamp(1.4rem, 4vw, 3rem);
  scroll-margin-top: 96px;
}
.dl-card h3 { margin-top: 1rem; font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -0.02em; }
.dl-lead { margin-top: 0.7rem; color: var(--ink-dim); font-size: 0.98rem; line-height: 1.6; max-width: 54ch; }
.dl-app { margin-top: 1.5rem; display: flex; align-items: center; gap: 1rem; }
.dl-icon {
  width: 64px;
  height: 64px;
  border-radius: 15px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 10px 26px -12px rgba(0, 0, 0, 0.6);
}
.dl-app-meta { display: grid; gap: 0.15rem; }
.dl-app-meta strong { font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.dl-app-meta span { color: var(--ink-dim); font-size: 0.88rem; }
.dl-app-meta em { font-style: normal; color: var(--ink-faint); font-size: 0.8rem; }
.dl-badge { margin-top: 1.4rem; }
.dl-android { margin-top: 1.1rem; color: var(--ink-faint); font-size: 0.85rem; }
.dl-qr { text-align: center; }
.dl-qr img {
  display: block;
  width: 168px;
  height: 168px;
  margin: 0 auto;
  background: #fff;
  padding: 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--line-strong);
}
.dl-qr small { display: block; margin-top: 0.9rem; font-size: 0.82rem; line-height: 1.45; font-weight: 600; color: var(--ink-faint); }
.foot-store { margin-top: 1.15rem; }
@media (max-width: 760px) {
  .dl-card { grid-template-columns: 1fr; }
  /* A QR is pointless on the very phone that would scan it; the badge is the CTA. */
  .dl-qr { display: none; }
}

/* ============================================================
   08 Savings calculator
   ============================================================ */
.calc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.calc-note { margin-top: 1.4rem; color: var(--ink-faint); font-size: 0.85rem; max-width: 30rem; }
.calc-card {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--bg-2);
  padding: 1.8rem;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.8), 0 0 60px -24px rgba(200, 245, 66, 0.12);
}
.calc-row { margin-bottom: 1.3rem; }
.calc-row label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: 0.92rem; color: var(--ink-dim); margin-bottom: 0.5rem; }
.calc-row output { color: var(--ink); font-size: 1rem; }
.calc-row input[type='range'] { width: 100%; accent-color: var(--brand); cursor: pointer; }
.calc-out { list-style: none; margin-top: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.2rem; display: grid; gap: 0.7rem; }
.calc-out li { display: flex; justify-content: space-between; align-items: baseline; color: var(--ink-dim); font-size: 0.95rem; }
.calc-out strong { font-size: 1.1rem; color: var(--ink); }
.calc-total { border-top: 1px solid var(--line); padding-top: 0.8rem; }
.calc-total strong { color: var(--lime); font-size: 1.5rem; }
.calc-quip { margin-top: 1.2rem; color: var(--ink-faint); font-size: 0.85rem; }

/* ============================================================
   09 Trade carousel
   ============================================================ */
.tc-wrap {
  position: relative;
  margin-top: 2.6rem;
  /* Soft fade at both edges so cards glide in and out of frame. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tc-track {
  display: flex;
  gap: 0.9rem;
  overflow-x: auto;
  padding: 0.4rem 0.2rem 1.1rem;
  scrollbar-width: none;
}
.tc-track::-webkit-scrollbar { display: none; }
.tc-set { display: flex; gap: 0.9rem; flex: none; padding-right: 0.9rem; }
.tc-ic {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(245, 158, 11, 0.1);
  color: var(--brand);
}
.tc-ic svg { width: 20px; height: 20px; }
.tc-set a:nth-child(4n+2) .tc-ic, .hub-grid a:nth-child(4n+2) .tc-ic { background: rgba(61, 214, 245, 0.1); color: var(--cyan); }
.tc-set a:nth-child(4n+3) .tc-ic, .hub-grid a:nth-child(4n+3) .tc-ic { background: rgba(200, 245, 66, 0.1); color: var(--lime); }
.tc-set a:nth-child(4n) .tc-ic, .hub-grid a:nth-child(4n) .tc-ic { background: rgba(139, 124, 246, 0.12); color: var(--violet); }
.tcard {
  flex: 0 0 235px;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--bg-2);
  padding: 1.15rem 1.2rem 1.25rem;
  transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.tcard:hover {
  transform: translateY(-3px);
  border-color: rgba(245, 158, 11, 0.45);
  box-shadow: 0 18px 40px -18px rgba(245, 158, 11, 0.3);
}
.tc-emoji { font-size: 1.5rem; }
.tcard strong { font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }
.tcard em { font-style: normal; font-size: 0.83rem; color: var(--ink-dim); }
.tc-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(13, 16, 22, 0.92);
  color: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.tc-btn:hover { border-color: rgba(245, 158, 11, 0.5); }
.tc-btn svg { width: 18px; height: 18px; }
.tc-prev { left: -14px; }
.tc-next { right: -14px; }


/* ============================================================
   12 Founder
   ============================================================ */
.fdr-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.fdr-copy p { margin-top: 1.1rem; color: var(--ink-dim); font-size: clamp(0.98rem, 0.9vw + 0.6rem, 1.12rem); }
.fdr-honest { border-left: 3px solid var(--brand); padding-left: 1rem; color: var(--ink) !important; }
.fdr-art { position: relative; }
.fdr-photo {
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.85);
}
.fdr-photo img { width: 100%; height: clamp(320px, 34vw, 460px); object-fit: cover; object-position: 50% 22%; filter: saturate(0.92); }
.fdr-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(10, 12, 16, 0.72));
  pointer-events: none;
}
.fdr-quote {
  position: relative;
  margin: -2.4rem 1.4rem 0;
  border-radius: var(--r-md);
  background: var(--bg-2);
  border: 1px solid var(--line-strong);
  border-left: 3px solid var(--brand);
  padding: 1.1rem 1.3rem;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.7);
}
.fdr-quote p { font-weight: 700; font-size: 1rem; }

/* ============================================================
   13 FAQ
   ============================================================ */
.faq { margin-top: 2.4rem; display: grid; gap: 0.7rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.02);
  overflow: hidden;
}
.faq summary {
  list-style: none;
  cursor: pointer;
  font-weight: 700;
  padding: 1.05rem 3rem 1.05rem 1.2rem;
  position: relative;
  transition: color var(--t-fast);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  position: absolute;
  right: 1.2rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.3rem;
  font-weight: 500;
  color: var(--brand);
  transition: transform var(--t-med) var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details[open] summary { color: var(--brand-hi); }
.faq-a { padding: 0 1.2rem 1.15rem; color: var(--ink-dim); font-size: 0.95rem; max-width: 46rem; }

/* ============================================================
   14 Final CTA
   ============================================================ */
.final { overflow: clip; padding-bottom: 0; }
.final-bg { position: absolute; inset: 0; z-index: 0; }
.final .sec-in { position: relative; z-index: 1; }
.bg-glow-final {
  position: absolute;
  left: 50%;
  bottom: -30%;
  transform: translateX(-50%);
  width: 1100px;
  height: 700px;
  background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.18), transparent 62%);
}
.final h2 { font-size: clamp(2.2rem, 3.4vw + 0.8rem, 4rem); }
.final .sec-lead { margin: 1.2rem auto 0; }
.final-cta { margin-top: 2.2rem; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; }
.final-phone {
  position: relative;
  margin: 3.2rem auto 0;
  width: min(320px, 72vw);
  height: clamp(280px, 36vw, 400px);
}
.phone-final {
  border-radius: clamp(2.4rem, 2.4vw, 3rem) clamp(2.4rem, 2.4vw, 3rem) 0 0;
  border-bottom: 0;
  padding-bottom: 0;
  box-shadow: 0 -20px 80px -30px rgba(245, 158, 11, 0.45);
}
.phone-final img { border-radius: clamp(1.9rem, 1.9vw, 2.4rem) clamp(1.9rem, 1.9vw, 2.4rem) 0 0; }
.noti-final {
  position: absolute;
  top: -1.2rem;
  left: -42%;
  z-index: 2;
  --dur: 10s;
}

/* ============================================================
   Footer
   ============================================================ */
.footer {
  position: relative;
  z-index: var(--z-content);
  border-top: 1px solid var(--line);
  background: var(--bg-1);
  padding: 3.5rem 18px 0;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 2.2rem;
  padding-bottom: 2.6rem;
}
.foot-brand p { margin-top: 1rem; color: var(--ink-dim); font-size: 0.92rem; max-width: 22rem; }
.foot-mini { list-style: none; margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; }
.foot-mini a { color: var(--ink-dim); font-size: 0.88rem; font-weight: 600; }
.foot-mini a:hover { color: var(--ink); }
.foot-col h4 {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}
.foot-col ul { list-style: none; display: grid; gap: 0.5rem; }
.foot-col a { color: var(--ink-dim); font-size: 0.9rem; }
.foot-col a:hover { color: var(--ink); }
.foot-bar { border-top: 1px solid var(--line); padding: 1.3rem 0 calc(1.3rem + env(safe-area-inset-bottom)); }
.foot-bar .sec-in { display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.foot-bar p { color: var(--ink-faint); font-size: 0.78rem; max-width: 52rem; }
.foot-tag { color: var(--ink-faint); font-size: 0.8rem; white-space: nowrap; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1100px) {
  .dim { display: none; }
  .noti-2 { left: -4%; }
}
@media (max-width: 960px) {
  .nav-capsule { display: none; }
  .nav-row { grid-template-columns: auto 1fr auto; }
  .nav-actions .btn-ghost { display: none; }
  .nav-burger { display: flex; }

  .hero { padding-top: 6.5rem; padding-bottom: 3.5rem; }
  .hero-in { grid-template-columns: 1fr; gap: 3rem; }
  .hero-copy { max-width: 560px; }
  .hero-art { min-height: 0; height: min(120vw, 620px); margin: 0 auto; width: 100%; max-width: 460px; }
  .phone-main { width: min(64vw, 320px); }
  .phone-back { width: min(50vw, 250px); left: -8%; }
  .noti { max-width: 245px; padding: 0.55rem 0.8rem; }
  .noti-1 { left: -2%; top: 3%; }
  .noti-2 { left: -2%; bottom: 14%; }
  .noti-3 { right: -2%; top: 30%; }
  .noti-4 { right: 0; bottom: 2%; }
  .noti-5 { right: -2%; top: 58%; }
  .noti-b { display: none; }
  .hero-scroll { display: none; }

  .tl-grid { grid-template-columns: 1fr; }
  .flow { grid-template-columns: 1fr; }
  .flow-device { display: none; }
  .flow-step { flex-wrap: wrap; padding: 1.8rem 0 1.8rem 1.4rem; }
  .flow-mimg {
    display: block;
    width: min(58vw, 240px);
    margin-top: 1.4rem;
    border-radius: 22px;
    border: 1px solid var(--line-strong);
    box-shadow: 0 24px 50px -22px rgba(0, 0, 0, 0.8);
  }
  .voice-grid, .calc-grid, .fdr-grid { grid-template-columns: 1fr; }
  .vs-grid { grid-template-columns: 1fr; }
  .vs-arrow { transform: rotate(90deg); margin: -0.4rem auto; }
  .eco { padding: 0 0 6%; }
  .eco-desktop { max-width: 100%; }
  .eco-tablet { display: none; }
  .eco-phone { width: 28%; left: 0; bottom: -8%; padding: 5px; border-radius: 22px; }
  .eco-phone img { border-radius: 17px; }
  .eco-cards { grid-template-columns: 1fr; }
  .doc { transform: none; max-height: 480px; }
  .noti-final { left: -8%; top: -2.6rem; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-bar .sec-in { flex-direction: column; gap: 0.6rem; }
}
@media (max-width: 560px) {
  .foot-grid { grid-template-columns: 1fr; gap: 1.8rem; }
}
@media (max-width: 430px) {
  .hero-copy h1 { font-size: clamp(2.35rem, 11.5vw, 2.9rem); }
  .noti-txt em { display: none; }
  .noti-3 .noti-txt em { display: block; }
  .noti { max-width: 200px; }
}
@media (max-width: 380px) {
  .nav-brand span { display: none; }
}

/* ============================================================
   Reduced motion: static, everything still readable
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .bg-glow, .phone-main, .phone-back, .noti, .eyebrow-dot, .wave i, .hero-scroll, .vp-mic {
    animation: none !important;
  }
  .btn, .nav-capsule, .nav-capsule a, .tcard, .faq summary::after { transition: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .flow-img { transition: none; }
  .tc-track { scroll-behavior: auto; }
}

/* ============================================================
   Trade pages (V2): compact hero, pains, checks, steps, hub
   ============================================================ */
.crumbs { display: flex; gap: 0.55rem; font-size: 0.82rem; color: var(--ink-faint); margin-bottom: 1.2rem; }
.crumbs a { color: var(--ink-dim); }
.crumbs a:hover { color: var(--ink); }
/* Trade hero: same full-height stage as the homepage so the phone composition
   has room instead of cropping. */
.hero-lite { min-height: 100svh; padding-bottom: 5.5rem; }
.hero-hub { padding-bottom: 3rem; }
.hero-lite h1 { font-size: clamp(2.3rem, 3.4vw + 0.9rem, 4rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.04; margin-top: 1.3rem; text-wrap: balance; }
.hero-in-hub { grid-template-columns: 1fr; text-align: center; }
.hero-in-hub .hero-copy { max-width: 720px; margin: 0 auto; }
.hero-in-hub .hero-cta, .hero-in-hub .hero-trust { justify-content: center; }
.pain-grid { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.pcard { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); padding: 1.3rem 1.4rem; }
.pcard-ic { display: inline-flex; width: 36px; height: 36px; border-radius: 10px; align-items: center; justify-content: center; background: rgba(255, 107, 53, 0.12); color: var(--safety); }
.pcard-ic svg { width: 18px; height: 18px; }
.pcard h3 { margin-top: 0.9rem; font-size: 1.02rem; font-weight: 800; letter-spacing: -0.01em; }
.pcard p { margin-top: 0.4rem; color: var(--ink-faint); font-size: 0.88rem; }
.check-grid { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.ccard { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.02); padding: 1.3rem 1.4rem; }
.ccard-h { font-size: 0.72rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand); margin-bottom: 0.9rem; }
.ccard ul { list-style: none; display: grid; gap: 0.55rem; }
.ccard li { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--ink-dim); font-size: 0.93rem; }
.ccard svg { width: 15px; height: 15px; color: var(--lime); flex: none; margin-top: 0.22rem; }
.steps-row { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.scard { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg-2); padding: 1.5rem 1.5rem 1.6rem; }
.scard > .mono { color: var(--brand); font-size: 0.8rem; }
.scard h3 { margin-top: 0.8rem; font-size: 1.1rem; font-weight: 800; letter-spacing: -0.015em; }
.scard p { margin-top: 0.5rem; color: var(--ink-dim); font-size: 0.92rem; }
.pill-row { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 0.8rem; }
.tcard-row { flex: 0 1 auto; flex-direction: row; align-items: center; gap: 0.7rem; padding: 0.8rem 1.2rem; }
.tcard-row .tc-emoji { font-size: 1.2rem; }
.hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 0.9rem; }
.hub-grid .tcard { flex: initial; }
@media (max-width: 1100px) { .pain-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 960px) {
  .hero-lite { padding-top: 6.5rem; }
  .steps-row { grid-template-columns: 1fr; }
}
@media (max-width: 620px) { .pain-grid { grid-template-columns: 1fr; } }

/* ============================================================
   V3 overrides: same colours and materials, calmer chrome
   ============================================================ */
/* Full-row scrim once scrolling, so content never collides with the
   floating logo and CTA (the capsule alone left the row transparent). */
.nav.scrolled {
  background: linear-gradient(180deg, rgba(10, 12, 16, 0.94), rgba(10, 12, 16, 0.8));
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
/* Legibility floor: timestamps were rendering under 11px. */
.noti-time { font-size: 0.72rem; }
/* Keep the final-CTA notification clear of the nav. */
.noti-final { top: 0.5rem; }
/* Reading measure on the narrative paragraphs. */
.truth-body p { max-width: 62ch; }
/* Close the dead-space band between devices and the calculator. */
#devices { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
#calculator { padding-top: clamp(2.5rem, 5vw, 4rem); }
.eco-cards { margin-top: clamp(2rem, 4vw, 3rem); }
@media (min-width: 961px) {
  .flow-steps .flow-step { min-height: 38vh; }
}
/* Trust lines sit over the hero glow; step them up from faint to dim. */
.hero-trust { color: var(--ink-dim); }

/* ---------- Per-trade scope depth (lib/tradeDepth.js) ---------- */
.depth-grid { display: grid; gap: 1rem; margin-top: 2.6rem; grid-template-columns: 1fr; }
.dcard { border: 1px solid var(--line); border-radius: var(--r-md); background: rgba(255, 255, 255, 0.02); padding: 1.3rem 1.4rem; }
.dcard h3 { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--brand); margin: 0 0 0.9rem; }
.dlist { list-style: none; display: grid; gap: 0.7rem; margin: 0; padding: 0; }
.dlist li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; line-height: 1.55; color: var(--ink-dim); }
.dlist svg { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: 0.22rem; color: var(--lime); }
.dlist-warn svg { color: var(--brand); }
.dlist strong { color: var(--ink); font-weight: 600; }
.dlist-mute li { padding-left: 0.9rem; position: relative; color: var(--ink-faint); }
.dlist-mute li::before { content: ''; position: absolute; left: 0; top: 0.6rem; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-faint); }
@media (min-width: 900px) { .depth-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- Pricing section on the homepage (#pricing) ---------- */
.plans { display: grid; gap: 1rem; margin-top: 2.6rem; grid-template-columns: 1fr; align-items: start; }
.plan {
  position: relative; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.02); padding: 1.6rem 1.5rem;
}
.plan.is-pop { border-color: var(--brand); background: rgba(255, 255, 255, 0.04); }
.plan-tag {
  position: absolute; top: -0.7rem; left: 1.5rem;
  background: var(--brand); color: var(--brand-ink);
  font-size: 0.66rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 0.3rem 0.62rem; border-radius: var(--r-pill);
}
.plan h3 { font-size: 1.15rem; font-weight: 700; margin: 0; color: var(--ink); }
.plan-for { margin: 0.25rem 0 0; font-size: 0.9rem; color: var(--ink-dim); }
.plan-amt { display: flex; align-items: baseline; gap: 0.3rem; margin: 1.1rem 0 0; }
.plan-amt strong { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1; }
.plan-amt span { font-size: 0.95rem; color: var(--ink-dim); }
.plan-alt { margin: 0.45rem 0 0; font-size: 0.82rem; color: var(--ink-faint); }
.plan-list { list-style: none; margin: 1.2rem 0 1.5rem; padding: 0; display: grid; gap: 0.55rem; }
.plan-list li { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.93rem; line-height: 1.5; color: var(--ink-dim); }
.plan-list svg { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: 0.2rem; color: var(--lime); }
.plan .btn { margin-top: auto; width: 100%; justify-content: center; }

/* One plan, so the section is two columns: what you get on the left, what it
   costs on the right. The card is the anchor and carries the whole offer,
   terms included, so nothing about the deal lives outside it. */
.pricing-grid {
  display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start;
  max-width: 65rem; margin: 2.6rem auto 0;
}
/* Mobile leads with the price and the trial, not the feature list. */
.pricing-grid > .plan { order: -1; }
@media (min-width: 900px) {
  .pricing-grid { grid-template-columns: 45fr 55fr; gap: 2.75rem; align-items: center; }
  .pricing-grid > .plan { order: 0; grid-column: 2; grid-row: 1; }
  .pricing-feats { grid-column: 1; grid-row: 1; }
}

/* Benefits column: big enough to scan in a couple of seconds. */
.pricing-feats .eyebrow { margin: 0 0 1.25rem; }
.feat-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.95rem; }
.feat-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 1.02rem; line-height: 1.45; color: var(--ink); }
.feat-list svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; margin-top: 0.18rem; color: var(--lime); }

/* The card carries more weight than a normal panel: it is the decision. */
.pricing-grid > .plan { padding: 2rem 1.9rem 1.75rem; border-radius: var(--r-lg); box-shadow: 0 24px 60px -28px rgba(0, 0, 0, 0.9); }
.pricing-grid > .plan .plan-amt { margin-top: 1.35rem; }
.pricing-grid > .plan .plan-amt strong { font-size: 3.4rem; }
.pricing-grid > .plan .plan-amt span { font-size: 1rem; }
.pricing-grid > .plan .plan-alt { margin-top: 0.6rem; font-size: 0.86rem; }

/* Free trial: the strongest offer on the page, so it gets its own panel. */
.trial-panel {
  margin: 1.5rem 0; padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid var(--line-strong); border-radius: var(--r-md);
  background: rgba(200, 245, 66, 0.05);
}
.trial-head {
  margin: 0 0 0.9rem; font-size: 0.68rem; font-weight: 800;
  letter-spacing: 0.09em; text-transform: uppercase; color: var(--lime);
}
.trial-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.trial-facts .tf { display: flex; flex-direction: column; gap: 0.15rem; }
.trial-facts .tf + .tf { border-left: 1px solid var(--line); padding-left: 0.75rem; }
.trial-facts strong { font-size: 1.02rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.trial-facts span { font-size: 0.76rem; color: var(--ink-dim); }
/* Narrow phones: three columns forces "10 scopes" onto two lines, which kills
   the glance. Stack them as rows instead, value left and label right. */
@media (max-width: 559px) {
  .trial-facts { grid-template-columns: 1fr; gap: 0; }
  .trial-facts .tf { flex-direction: row; align-items: baseline; justify-content: space-between; padding: 0.5rem 0; }
  .trial-facts .tf + .tf { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
}

/* Reassurance at the moment of the click, then the fine print. */
.plan-note { margin: 0.7rem 0 0; text-align: center; font-size: 0.82rem; color: var(--ink-dim); }
.plan-terms { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.75rem; line-height: 1.5; color: var(--ink-faint); }
.plans-foot { margin: 1.4rem 0 0; text-align: center; font-size: 0.82rem; color: var(--ink-faint); }

/* ============================================================
   Quote life-cycle (lib/lifecycle.js)
   Eight steps from enquiry to boots on site. Amber is the four
   BuildScope owns, grey is the tradie's. Horizontal rail on
   desktop, vertical list with the descriptions on mobile.
   ============================================================ */
.lcyc { margin-top: 2.4rem; }
.lcyc-key { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.4rem; }
.lcyc-chip {
  display: inline-flex; align-items: center; gap: 0.55rem;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  padding: 0.45rem 0.95rem 0.45rem 0.75rem;
  font-size: 0.82rem; font-weight: 600; color: var(--ink-dim);
}
.lcyc-chip i { width: 10px; height: 10px; border-radius: 3px; background: var(--line-strong); }
.lcyc-chip.is-bs i { background: var(--brand); }

.lcyc-rail { position: relative; padding-top: 1.5rem; }
.lcyc-shelf {
  position: absolute; left: 25%; width: 50%; top: 0.55rem; bottom: -0.7rem;
  border-radius: var(--r-md);
  background: rgba(245, 158, 11, 0.09); border: 1px solid rgba(245, 158, 11, 0.32);
}
.lcyc-wire, .lcyc-wire-on { position: absolute; top: 3.55rem; height: 2px; }
.lcyc-wire { left: 6.25%; right: 6.25%; background: var(--line-strong); }
.lcyc-wire-on { left: 31.25%; right: 31.25%; background: var(--brand); }

.lcyc-nodes { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(8, 1fr); list-style: none; }
.lcyc-node { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0.3rem; }
.lcyc-n { font-size: 0.72rem; font-weight: 700; color: var(--ink-faint); letter-spacing: 0.1em; }
.lcyc-dot {
  margin-top: 0.5rem; width: 46px; height: 46px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2); border: 1.5px solid var(--line-strong); color: var(--ink-faint);
}
.lcyc-dot svg { width: 22px; height: 22px; }
.lcyc-t { margin-top: 0.7rem; font-size: 0.86rem; font-weight: 600; color: var(--ink-dim); line-height: 1.25; }
.lcyc-d { display: none; }
.lcyc-node.is-bs .lcyc-n { color: var(--brand); }
.lcyc-node.is-bs .lcyc-dot { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.lcyc-node.is-bs .lcyc-t { color: var(--brand); font-weight: 800; }
.lcyc-foot { margin-top: 1.9rem; color: var(--ink-dim); font-size: 0.95rem; font-weight: 500; }
.lcyc-foot b { color: var(--brand); font-weight: 800; }

/* Stack it once eight across stops fitting. The rail becomes a spine down
   the left, the four BuildScope steps tint as a block, and every step gets
   its description back. */
@media (max-width: 900px) {
  .lcyc-rail { padding-top: 0; }
  .lcyc-shelf, .lcyc-wire-on { display: none; }
  .lcyc-wire { left: 23px; right: auto; top: 14px; bottom: 14px; width: 2px; height: auto; }
  .lcyc-nodes { grid-template-columns: 1fr; gap: 0.5rem; }
  .lcyc-node {
    display: grid; grid-template-columns: 46px 1fr; column-gap: 0.9rem;
    text-align: left; padding: 0.55rem 0.8rem 0.7rem 0;
  }
  .lcyc-node.is-bs {
    background: rgba(245, 158, 11, 0.07);
    box-shadow: inset 2px 0 0 rgba(245, 158, 11, 0.55);
    border-radius: 0 var(--r-sm) var(--r-sm) 0;
  }
  .lcyc-dot { grid-column: 1; grid-row: 1 / span 2; margin-top: 0; align-self: start; }
  .lcyc-n { grid-column: 2; grid-row: 1; align-self: end; }
  .lcyc-t { grid-column: 2; grid-row: 2; margin-top: 0.15rem; font-size: 1rem; }
  .lcyc-d {
    display: block; grid-column: 2; grid-row: 3; margin-top: 0.25rem;
    font-size: 0.88rem; color: var(--ink-faint); line-height: 1.45;
  }
  .lcyc-node.is-bs .lcyc-d { color: var(--ink-dim); }
  .lcyc-foot { margin-top: 1.5rem; }
}


/* ============================================================
   Integrations: "Built to fit your workflow. Not replace it."
   Markup comes from lib/integrationsSection.js. Everything here
   is brand-neutral on purpose: the logos only ever arrive
   through the registry, and only once approval is in writing.
   ============================================================ */
.int-sec .sec-head { max-width: 820px; }

/* The logo row. Static under three, scrolling at three or more. Both share the
   chip; only the wrapper changes, so a new integration cannot look different. */
.int-strip { margin-top: 2.6rem; }
.int-strip.is-static {
  display: flex; flex-wrap: wrap; gap: 0.9rem;
}
.int-chip {
  display: inline-flex; align-items: center; gap: 0.7rem; flex: none;
  padding: 0.7rem 1.15rem 0.7rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}
.int-chip img {
  width: 32px; height: 32px; flex: none; border-radius: 8px;
  object-fit: contain; background: rgba(255, 255, 255, 0.94); padding: 3px;
}
.int-chip-t { display: flex; flex-direction: column; line-height: 1.25; }
.int-chip-t strong { font-size: 0.92rem; font-weight: 650; letter-spacing: -0.01em; color: var(--ink); }
.int-chip-t em { font-style: normal; font-size: 0.72rem; color: var(--ink-faint); }

/* Marquee. The track holds the run twice, so translating it exactly -50% lands
   back on an identical frame and the loop has no seam. The mask is what stops
   chips appearing and vanishing at a hard edge. */
.int-strip.is-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.int-track { display: flex; width: max-content; animation: int-scroll 34s linear infinite; }
.int-run { display: flex; gap: 0.9rem; padding-right: 0.9rem; }
.int-strip.is-marquee:hover .int-track { animation-play-state: paused; }
@keyframes int-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* The feature card: the actual story, not a logo wall. Copy left, the three
   reassurances right, because the reassurances are what close the objection. */
.int-card {
  margin-top: 2.6rem;
  display: grid; grid-template-columns: 1.05fr 1fr; gap: 2.6rem;
  align-items: start;
  padding: 2.3rem;
  background: linear-gradient(180deg, rgba(61, 214, 245, 0.05), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.int-card h3 {
  font-size: clamp(1.4rem, 1.5vw + 0.9rem, 1.95rem);
  font-weight: 800; letter-spacing: -0.025em; line-height: 1.15; color: var(--ink);
}
.int-card-lead { margin-top: 1rem; color: var(--ink-dim); font-size: 1rem; line-height: 1.6; }
.int-proof { list-style: none; display: grid; gap: 1.1rem; }
.int-proof li { display: flex; gap: 0.7rem; align-items: flex-start; }
.int-proof svg { width: 17px; height: 17px; flex: none; margin-top: 0.18rem; color: var(--cyan); }
.int-proof strong { display: block; font-size: 0.93rem; font-weight: 650; color: var(--ink); margin-bottom: 0.15rem; }
.int-proof span { font-size: 0.86rem; line-height: 1.5; color: var(--ink-faint); }
.int-link {
  grid-column: 1 / -1; justify-self: start;
  color: var(--cyan); font-size: 0.9rem; font-weight: 600; text-decoration: none;
  border-bottom: 1px solid rgba(61, 214, 245, 0.35); padding-bottom: 1px;
}
.int-link:hover { border-bottom-color: var(--cyan); }

/* Condensed trade-page version. One row, one claim, no essay. */
.int-sec-lite .int-lite {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.6rem 1.8rem;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-md);
}
.int-lite-logo {
  width: 40px; height: 40px; flex: none; border-radius: 9px;
  object-fit: contain; background: rgba(255, 255, 255, 0.94); padding: 4px;
}
.int-lite h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -0.015em; color: var(--ink); }
.int-lite p { margin-top: 0.45rem; font-size: 0.92rem; line-height: 1.6; color: var(--ink-dim); }

@media (max-width: 860px) {
  .int-card { grid-template-columns: 1fr; gap: 1.8rem; padding: 1.6rem; }
  .int-strip { margin-top: 2rem; }
  .int-chip { padding: 0.6rem 1rem 0.6rem 0.6rem; }
  .int-sec-lite .int-lite { flex-direction: column; gap: 0.9rem; padding: 1.3rem; }
}

/* Reduced motion: park the marquee rather than hide it. The names still need
   to be readable, they just stop moving. */
@media (prefers-reduced-motion: reduce) {
  .int-track { animation: none; flex-wrap: wrap; width: 100%; }
  .int-run:nth-child(2) { display: none; }
  .int-run { flex-wrap: wrap; gap: 0.9rem; }
}