/* ============================================================
   Dihyah Raj — dihyahraj.com
   Dark 3D scroll experience. Vanilla CSS, no build step.
   Palette: bg #0a0c11 · indigo #e8722a → cyan #f7b267
   ============================================================ */

/* ---------- fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-var.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("fonts/inter-tight-var.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  --bg: #05060b;
  --bg-2: #090b12;
  --gold: #e8b573;
  --ink: #eceef6;
  --muted: #9aa2b6;
  --faint: #7a8398;
  --line: rgba(255, 255, 255, 0.08);
  --line-soft: rgba(255, 255, 255, 0.05);
  --green: #e8722a;
  --mint: #f7b267;
  --grad: linear-gradient(135deg, #e8722a 0%, #f7b267 100%);
  --grad-soft: linear-gradient(135deg, rgba(232, 114, 42, 0.16), rgba(247, 178, 103, 0.1));
  --glass: rgba(255, 255, 255, 0.035);
  --glass-2: rgba(255, 255, 255, 0.055);
  --display: "Space Grotesk", "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --body: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --r-lg: 28px;
  --r-md: 20px;
  --r-sm: 14px;
  --wrap: 1200px;
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- reset / base ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* stable gutter: the intro scroll-lock hides the scrollbar for ~3s —
     without this the page would widen and snap back around the ceremony */
  scrollbar-gutter: stable;
}
html,
body {
  overflow-x: clip;
}
/* the wordmark ceremony holds the page still until the name has formed */
html.intro-lock,
html.intro-lock body {
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 420;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
video {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
}
::selection {
  background: rgba(232, 114, 42, 0.45);
  color: #fff;
}
:focus-visible {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.9rem, 7.4vw, 6.4rem);
  font-weight: 560;
  line-height: 1.06;
  letter-spacing: -0.025em;
}
h2 {
  font-size: clamp(2rem, 4.6vw, 3.7rem);
}
h3 {
  font-size: 1.25rem;
  letter-spacing: -0.015em;
  line-height: 1.25;
}
p {
  color: var(--muted);
}
strong {
  color: var(--ink);
  font-weight: 640;
}

.wrap {
  width: min(var(--wrap), calc(100% - 3rem));
  margin-inline: auto;
}
.ic {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.7;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.ic-sm {
  width: 16px;
  height: 16px;
}

/* ---------- atmosphere: fixed depth backdrop ---------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(56% 42% at 18% 8%, rgba(232, 114, 42, 0.045), transparent 62%),
    radial-gradient(48% 40% at 86% 86%, rgba(247, 178, 103, 0.025), transparent 60%),
    var(--bg);
}
.backdrop::before {
  /* hairline grid, fades toward edges */
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    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: 84px 84px;
  -webkit-mask-image: radial-gradient(75% 62% at 50% 38%, #000 0%, transparent 100%);
  mask-image: radial-gradient(75% 62% at 50% 38%, #000 0%, transparent 100%);
}
.backdrop .orb {
  position: absolute;
  border-radius: 50%;
  /* fixed brand tones — hue cycling made the whole page drift rainbow,
     which is exactly the cheap look we are killing */
  filter: blur(90px);
  opacity: 0.32;
  transition: opacity 0.8s ease; /* lite-mode flip dims them gently */
  will-change: transform;
}
.backdrop .orb-a {
  width: 560px;
  height: 560px;
  left: -180px;
  top: -140px;
  background: radial-gradient(circle at 35% 35%, rgba(232, 114, 42, 0.16), transparent 70%);
}
.backdrop .orb-b {
  width: 480px;
  height: 480px;
  right: -160px;
  top: 34%;
  background: radial-gradient(circle at 60% 40%, rgba(247, 178, 103, 0.10), transparent 70%);
}
.backdrop .orb-c {
  width: 520px;
  height: 520px;
  left: 28%;
  bottom: -260px;
  background: radial-gradient(circle at 50% 50%, rgba(232, 114, 42, 0.10), transparent 70%);
}
.grain {
  position: fixed;
  inset: -50%;
  z-index: 60;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml;utf8,%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%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: transform 0.4s var(--ease);
}
.nav-inner {
  position: relative;
  width: min(var(--wrap), calc(100% - 2rem));
  margin: 14px auto 0;
  height: var(--nav-h);
  padding: 0 0.7rem 0 1.1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid transparent;
  border-radius: 999px;
  transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease,
    backdrop-filter 0.35s ease, -webkit-backdrop-filter 0.35s ease;
}
/* liquid-glass sheen: a specular reflection that GLIDES across the pill as
   you scroll (JS writes --sprog 0..1), over a curved top highlight — like
   light moving through real glass */
.nav-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, 0.11) 49%, rgba(247, 178, 103, 0.05) 53%, transparent 64%),
    radial-gradient(130% 220% at 50% -90%, rgba(255, 255, 255, 0.17), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 32%, transparent 76%, rgba(255, 255, 255, 0.035));
  background-size: 280% 100%, 100% 100%, 100% 100%;
  background-position: calc(var(--sprog, 0) * 100%) 0, 0 0, 0 0;
  opacity: 0;
  transition: opacity 0.35s ease;
}
/* lensed rim: a hairline chromatic ring (warm amber rim) that
   reads as light refracting at the glass edge */
.nav-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  padding: 1.5px;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.5),
    rgba(247, 178, 103, 0.22) 26%,
    rgba(255, 255, 255, 0.07) 48%,
    rgba(245, 158, 76, 0.24) 74%,
    rgba(255, 255, 255, 0.34)
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.nav.scrolled .nav-inner {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 55%, rgba(255, 255, 255, 0.03)),
    rgba(7, 9, 14, 0.72);
  backdrop-filter: blur(30px) saturate(1.7) brightness(1.05);
  -webkit-backdrop-filter: blur(30px) saturate(1.7) brightness(1.05);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -8px 16px -10px rgba(255, 255, 255, 0.14),
    inset 0 0 26px rgba(255, 255, 255, 0.035),
    0 18px 48px -20px rgba(0, 0, 0, 0.75);
}
.nav.scrolled .nav-inner::before,
.nav.scrolled .nav-inner::after {
  opacity: 1;
}
.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--display);
  font-weight: 640;
  font-size: 1.14rem;
  letter-spacing: -0.02em;
}
.logo img {
  border-radius: 10px;
  box-shadow: 0 0 0 1px var(--line);
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav-links > a:not(.btn) {
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.25s ease, background 0.25s ease;
}
.nav-links > a:not(.btn):hover {
  color: var(--ink);
}
.nav-links > a.active {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
}
.nav-cta {
  margin-left: 0.55rem;
}
.nav-burger {
  display: none;
  background: none;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
/* the three lines morph into an X while the menu is open */
.nav-burger path {
  transition: transform 0.4s var(--ease), opacity 0.25s ease;
  transform-origin: 12px 12px;
}
.nav-burger[aria-expanded="true"] .b1 {
  transform: translateY(6px) rotate(45deg) scaleX(0.82);
}
.nav-burger[aria-expanded="true"] .b2 {
  opacity: 0;
}
.nav-burger[aria-expanded="true"] .b3 {
  transform: translateY(-6px) rotate(-45deg) scaleX(0.82);
}
/* open state: the button itself reads as pressed glass */
.nav-burger[aria-expanded="true"] {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.22);
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.92rem 1.7rem;
  border-radius: 999px;
  font-family: var(--body);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.28s var(--ease), box-shadow 0.28s ease, background 0.28s ease,
    border-color 0.28s ease, color 0.28s ease;
  will-change: transform;
}
.btn-primary {
  /* dark glass pill with a luminous gradient rim — light lives at the
     edge, not splashed across the fill (the flat gradient fill was the
     single loudest "AI template" tell on the old design) */
  color: #fff;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0) 46%),
    linear-gradient(180deg, #12141d, #0a0c13) padding-box,
    linear-gradient(135deg, rgba(245, 158, 76, 0.95), rgba(247, 178, 103, 0.85) 55%, rgba(232, 181, 115, 0.55)) border-box;
  border: 1px solid transparent;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.16) inset,
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 10px 34px -10px rgba(247, 178, 103, 0.38),
    0 18px 44px -18px rgba(232, 114, 42, 0.5);
}
.btn-primary:hover {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.02) 46%),
    linear-gradient(180deg, #171a26, #0d0f18) padding-box,
    linear-gradient(135deg, rgba(245, 158, 76, 1), rgba(247, 178, 103, 1) 55%, rgba(232, 181, 115, 0.75)) border-box;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.22) inset,
    0 0 0 1px rgba(0, 0, 0, 0.4),
    0 12px 44px -10px rgba(247, 178, 103, 0.55),
    0 22px 54px -18px rgba(232, 114, 42, 0.65);
}
.btn-glass {
  color: var(--ink);
  background: var(--glass);
  border-color: var(--line);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn-glass:hover {
  background: var(--glass-2);
  border-color: rgba(255, 255, 255, 0.16);
  transform: translateY(-2px);
}
.btn-sm {
  padding: 0.6rem 1.15rem;
  font-size: 0.92rem;
}
.btn .ic {
  width: 17px;
  height: 17px;
}
/* trailing arrow rides in its own little orb — nudges on hover */
.btn-primary > .ic:last-child {
  width: 26px;
  height: 26px;
  padding: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
  margin-right: -0.55rem;
  transition: transform 0.35s var(--ease), background 0.3s ease;
}
.btn-primary:hover > .ic:last-child {
  transform: translate(2px, -1px) scale(1.07);
  background: rgba(255, 255, 255, 0.26);
}

/* ---------- small labels ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--grad);
}
.eyebrow.bare::before {
  display: none;
}
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.34rem 0.85rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--mint);
  background: rgba(247, 178, 103, 0.08);
  border: 1px solid rgba(247, 178, 103, 0.22);
}
.pill.dim {
  color: var(--muted);
  background: var(--glass);
  border-color: var(--line);
}
.pill .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
}
.grad-text {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* split words inside a gradient span need their own clipped background —
   background-clip:text does not reach transformed inline-block children */
.grad-text .w {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- generic section rhythm ---------- */
section {
  position: relative;
  padding: clamp(4.5rem, 9vw, 8rem) 0;
}
.section-head {
  max-width: 720px;
  margin-bottom: clamp(2.4rem, 5vw, 4rem);
  display: grid;
  gap: 1rem;
  justify-items: start;
}
.section-head.center {
  margin-inline: auto;
  text-align: center;
  justify-items: center;
}
.section-head p {
  font-size: 1.1rem;
}

/* ============================================================
   PINNED SECTIONS — sticky stage + JS-driven --p (0 → 1)
   ============================================================ */
.pin {
  padding: 0;
}
html.js .pin {
  height: calc(var(--pin-len, 220) * 1vh);
}
html.js .pin-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pin-stage {
  padding: calc(var(--nav-h) + 2rem) 0 2rem;
  width: 100%;
}

/* ---------- HERO (pinned) ---------- */
.hero {
  --pin-len: 195;
}
.hero-stage-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}
/* interactive particle ribbon behind the hero copy (particles.js).
   width/height 100% is REQUIRED: inset alone never stretches a canvas
   (replaced elements keep their intrinsic buffer size), so on any
   devicePixelRatio > 1 everything rendered — and every pointer hit —
   was scaled up by that ratio. */
.hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.hero-particles,
.splash-cursor,
.starfield,
.grain {
  transition: opacity 0.9s ease; /* perf mode changes must never snap */
}
html.lite .hero-particles {
  opacity: 0;
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10, 12, 17, 0.85) 0%, rgba(10, 12, 17, 0.45) 40%, rgba(10, 12, 17, 0.96) 100%),
    radial-gradient(90% 70% at 50% 42%, transparent 30%, rgba(10, 12, 17, 0.72) 100%);
}
.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(calc((1.14 - var(--p, 0) * 0.1) * var(--vcrop, 1)));
  opacity: 0.62;
  will-change: transform;
}
/* clips generated from a 4:3 still carry baked side bars inside their 16:9
   frame. Portrait/narrow windows crop them out for free (object-fit: cover);
   wider windows zoom the video — never the still — until the bars fall
   outside the viewport. Steps approximate z = clamp(1, AR / (4/3), 4/3). */
@media (min-aspect-ratio: 4/3) {
  .hero-media.vcrop-43 video { --vcrop: 1.18; }
}
@media (min-aspect-ratio: 3/2) {
  .hero-media.vcrop-43 video { --vcrop: 1.28; }
}
@media (min-aspect-ratio: 8/5) {
  .hero-media.vcrop-43 video { --vcrop: 1.37; }
}

/* desktop: the hero leans gently toward the cursor (JS writes --pmx/--pmy),
   and every translucent surface becomes true liquid glass — the fluid smoke
   behind frosts through instead of just showing through */
@media (min-width: 768px) and (pointer: fine) {
  .hero-media img,
  .hero-media video {
    transform: translate3d(calc(var(--pmx, 0) * -12px), calc(var(--pmy, 0) * -8px), 0)
      scale(calc((1.14 - var(--p, 0) * 0.1) * var(--vcrop, 1)));
  }
  .hero-copy {
    transform: translateY(calc(var(--p, 0) * -9vh))
      translate3d(calc(var(--pmx, 0) * 7px), calc(var(--pmy, 0) * 5px), 0);
  }
  html:not(.lite) .band,
  html:not(.lite) .card,
  html:not(.lite) .step,
  html:not(.lite) .hcard,
  html:not(.lite) .stat,
  html:not(.lite) .show-row,
  html:not(.lite) .try-demo,
  html:not(.lite) .chat-demo,
  html:not(.lite) .feature-item,
  html:not(.lite) .chapter-visual,
  html:not(.lite) .final-cta .wrap,
  html:not(.lite) .faq details {
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
  }
  /* the chat is dense reading — its glass gets a deeper tint so the smoke
     behind stays a mood, not a distraction */
  html:not(.lite) .chat-demo {
    background: linear-gradient(180deg, rgba(13, 16, 25, 0.78), rgba(13, 16, 25, 0.6));
    backdrop-filter: blur(22px) saturate(1.25);
    -webkit-backdrop-filter: blur(22px) saturate(1.25);
  }
  /* the small chips too — but ONLY real pill/rounded shapes; bare text
     labels (eyebrows, hero meta, hints) must never get a blur rectangle */
  html:not(.lite) .pill,
  html:not(.lite) .btn-glass,
  html:not(.lite) .try-chip {
    backdrop-filter: blur(10px) saturate(1.25);
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
  }
  /* double glass in the showcase rows: the checklist tiles frost again on
     top of the row's own pane, so each box reads as a separate surface */
  html:not(.lite) .show-list li {
    background: rgba(9, 11, 18, 0.45);
    backdrop-filter: blur(10px) saturate(1.25);
    -webkit-backdrop-filter: blur(10px) saturate(1.25);
  }
  /* liquid glass INSIDE the wordmark letters only — no pane, no rectangle.
     The real frost comes from the .glass-mark canvas (site.js) which blurs
     the smoke and clips it to the glyphs; this fill is the base + fallback. */
  html:not(.lite) .foot-mark {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.08));
    -webkit-background-clip: text;
    background-clip: text;
    mix-blend-mode: overlay;
  }
}

/* primary buttons: a light streak sweeps across on hover */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.38), transparent);
  transform: skewX(-18deg);
  opacity: 0;
  pointer-events: none;
}
@media (hover: hover) {
  .btn-primary:hover::after {
    animation: btn-shine 0.65s ease;
  }
}
@keyframes btn-shine {
  0% {
    opacity: 0;
    left: -60%;
  }
  25% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    left: 115%;
  }
}

/* gradient headlines shimmer toward cyan on hover (subpage h1s + h2s —
   the split-word hero headline keeps its own per-word gradients) */
@media (pointer: fine) {
  .page-hero h1 .grad-text,
  h2 .grad-text {
    background-size: 200% 100%;
    background-position: 0% 0;
    transition: background-position 0.7s var(--ease);
  }
  .page-hero h1:hover .grad-text,
  h2:hover .grad-text {
    background-position: 90% 0;
  }
}
/* the video overlays the still and the two cross-dissolve very slowly —
   under the dark overlays the handover is invisible, no jolt */
.hero-media img {
  transition: opacity 2.4s ease;
}
.hero-media.video-live img {
  opacity: 0;
}
.hero-media video {
  position: absolute;
  inset: 0;
  transition: opacity 1.6s ease;
}
.hero-copy {
  position: relative;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  transform: translateY(calc(var(--p, 0) * -9vh));
  opacity: calc(1 - var(--p, 0) * 1.15);
  will-change: transform, opacity;
}
.hero-copy h1 {
  max-width: 15ch;
}
.hero-copy .sub {
  max-width: 56ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--muted);
}
/* once the pinned hero copy has faded out it must not eat taps/clicks
   (JS toggles hero-done when the fade is essentially complete) */
.hero.hero-done .hero-copy {
  pointer-events: none;
}
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
}
/* staggered word intro */
html.js .hero-copy .w {
  display: inline-block;
  transform: translateY(112%) rotate(2deg);
  opacity: 0;
  transition: transform 0.9s var(--ease), opacity 0.7s ease;
  transition-delay: calc(var(--wi) * 70ms + 120ms);
  will-change: transform;
}
html.js .words-in .hero-copy .w {
  transform: none;
  opacity: 1;
}
.w-clip {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
/* intro fade for non-headline hero bits */
html.js .hero-copy > *:not(h1) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.8s ease, transform 0.8s var(--ease);
}
html.js .words-in .hero-copy > *:not(h1) {
  opacity: 1;
  transform: none;
}
html.js .words-in .hero-copy > .eyebrow { transition-delay: 0.1s; }
html.js .words-in .hero-copy > .sub { transition-delay: 0.5s; }
html.js .words-in .hero-copy > .cta-row { transition-delay: 0.64s; }
html.js .words-in .hero-copy > .hero-meta { transition-delay: 0.8s; }

.hero-meta {
  display: flex;
  gap: 0.7rem 2.2rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.6rem;
}
.hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.88rem;
  font-weight: 550;
  color: var(--muted);
  letter-spacing: 0.02em;
}
.hero-meta .ic {
  width: 15px;
  height: 15px;
  color: var(--mint);
}
.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 2.1rem;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  color: var(--faint);
  font-size: 0.72rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: calc(1 - var(--p, 0) * 3);
}
.scroll-hint::after {
  content: "";
  width: 1px;
  height: 46px;
  background: linear-gradient(var(--mint), transparent);
  animation: hint-drip 2.2s ease-in-out infinite;
}
@keyframes hint-drip {
  0% { transform: scaleY(0); transform-origin: top; }
  55% { transform: scaleY(1); transform-origin: top; }
  56% { transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
/* floating depth chips over the hero */
.hero-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.62rem 1.05rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 570;
  color: var(--ink);
  background: rgba(16, 19, 28, 0.55);
  border: 1px solid var(--line);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 40px -18px rgba(0, 0, 0, 0.7);
  will-change: transform;
}
.hero-chip .ic {
  width: 16px;
  height: 16px;
  color: var(--mint);
}
.hero-chip.c1 { left: 6%; top: 26%; transform: translateY(calc(var(--p, 0) * -18vh)); }
.hero-chip.c2 { right: 7%; top: 18%; transform: translateY(calc(var(--p, 0) * -26vh)); }
.hero-chip.c3 { left: 11%; bottom: 24%; transform: translateY(calc(var(--p, 0) * -34vh)); }
.hero-chip.c4 { right: 10%; bottom: 19%; transform: translateY(calc(var(--p, 0) * -22vh)); }
html.js .hero-chip {
  opacity: 0;
  transition: opacity 1s ease 1.1s;
}
html.js .words-in .hero-chip {
  opacity: calc(1 - var(--p, 0) * 2.2);
}

/* ---------- marquee ---------- */
.marquee {
  padding: clamp(2rem, 4vw, 3.4rem) 0;
  border-block: 1px solid var(--line-soft);
  overflow: hidden;
}
.marquee-row {
  display: flex;
  gap: 3rem;
  white-space: nowrap;
  will-change: transform;
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 5rem);
  font-weight: 640;
  letter-spacing: -0.02em;
  line-height: 1.16;
  will-change: transform;
}
.marquee-row + .marquee-row {
  margin-top: 0.5rem;
}
.marquee-row span {
  display: inline-flex;
  align-items: center;
  gap: 3rem;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.22);
}
.marquee-row span b {
  font-weight: 640;
  color: var(--ink);
  -webkit-text-stroke: 0;
}
.marquee-row span i {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 0;
}
.marquee-row .sep {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grad);
  flex: 0 0 auto;
}

/* ---------- CHAPTERS (pinned story) ---------- */
.chapters-pin {
  --pin-len: 340;
}
.chapters-stage-inner {
  position: relative;
  display: grid;
  gap: clamp(1.4rem, 4vh, 2.6rem);
}
.chapter-track {
  position: relative;
  min-height: min(60vh, 560px);
}
.chapter {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.chapter.is-on {
  pointer-events: auto;
}
html:not(.js) .chapter {
  position: static;
  opacity: 1;
  pointer-events: auto;
}
html:not(.js) .chapter-track {
  display: grid;
  gap: 3rem;
  min-height: 0;
}
.chapter-num {
  /* watermark behind the chapter COPY — tucked to the text column's top-left
     so it never collides with the visual card */
  position: absolute;
  left: -1.5rem;
  top: -0.18em;
  z-index: -1;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(8rem, 15vw, 13rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.055);
  user-select: none;
}
.chapter-copy {
  display: grid;
  gap: 1.15rem;
  justify-items: start;
}
.chapter-copy h3 {
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  letter-spacing: -0.025em;
}
.chapter-copy p {
  max-width: 46ch;
  font-size: 1.08rem;
}
.chapter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chapter-visual {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-2);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 40px 80px -30px rgba(0, 0, 0, 0.8);
  aspect-ratio: 4 / 3;
  max-height: 58vh;
}
.chapter-visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chapter-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, transparent 55%, rgba(10, 12, 17, 0.55));
  pointer-events: none;
}
.chapter-progress {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.chapter-progress .seg {
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.chapter-progress .seg i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--grad);
  transform: scaleX(var(--seg, 0));
  transform-origin: left;
}

/* ---------- HORIZONTAL GALLERY (pinned) ---------- */
.hscroll {
  --pin-len: 300;
}
.hscroll-inner {
  width: 100%;
  display: block;
}
.hscroll-head {
  width: min(var(--wrap), calc(100% - 3rem));
  margin-inline: auto;
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
}
.hscroll-head h2 {
  max-width: 16ch;
}
.hscroll-head .hint {
  color: var(--faint);
  font-size: 0.85rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  padding-bottom: 0.6rem;
}
.htrack {
  display: flex;
  gap: clamp(1.1rem, 2vw, 1.8rem);
  padding-left: max(calc((100vw - var(--wrap)) / 2), 1.5rem);
  padding-right: 1.5rem;
  will-change: transform;
  width: max-content;
}
html.js .htrack {
  transform: translate3d(calc(var(--p, 0) * var(--hx, 0px) * -1), 0, 0);
}
.hcard {
  position: relative;
  flex: 0 0 auto;
  width: clamp(300px, 34vw, 440px);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass-2), rgba(255, 255, 255, 0.015));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.7);
  transition: transform 0.4s var(--ease), border-color 0.3s ease;
}
.hcard:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 255, 255, 0.16);
}
.hcard-media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-bottom: 1px solid var(--line-soft);
  background: var(--bg-2);
  position: relative;
}
.hcard-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.hcard:hover .hcard-media img {
  transform: scale(1.05);
}
.hcard-media .pill {
  position: absolute;
  top: 1rem;
  left: 1rem;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(10, 12, 17, 0.55);
}
.hcard-body {
  padding: 1.5rem 1.6rem 1.7rem;
  display: grid;
  gap: 0.65rem;
  justify-items: start;
}
.hcard-body .idx {
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  color: var(--faint);
}
.hcard-body p {
  font-size: 0.98rem;
}
.hprogress {
  width: min(var(--wrap), calc(100% - 3rem));
  margin-inline: auto;
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  height: 2px;
  background: rgba(255, 255, 255, 0.09);
  border-radius: 2px;
  overflow: hidden;
}
.hprogress i {
  display: block;
  height: 100%;
  background: var(--grad);
  transform: scaleX(var(--p, 0));
  transform-origin: left;
}

/* ---------- stats band ----------
   glass cards like the rest of the site — rounded, bordered, tinted.
   (butted-together bare cells made the backdrop blur read as dirty
   rectangles instead of intentional panels) */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.7rem, 1.4vw, 1.1rem);
}
.stat {
  padding: clamp(1.8rem, 4vw, 3.2rem) 1.4rem;
  text-align: center;
  display: grid;
  gap: 0.45rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.012));
}
.stat strong {
  font-family: var(--display);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 640;
  letter-spacing: -0.03em;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.stat > span {
  font-size: 0.92rem;
  color: var(--muted);
}

/* ---------- intro statement (short company intro on home) ---------- */
.intro-strip {
  max-width: 920px;
  margin-inline: auto;
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding-block: clamp(1rem, 3vw, 2rem);
}
.intro-strip .statement {
  font-family: var(--display);
  font-weight: 520;
  font-size: clamp(1.35rem, 2.6vw, 2.1rem);
  line-height: 1.42;
  letter-spacing: -0.015em;
  color: var(--muted);
  text-wrap: balance;
}
.intro-strip .statement em {
  font-style: normal;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- showcase rows: living visuals + floating chips ---------- */
.show-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(1.2rem, 3vw, 2.6rem);
  align-items: center;
  padding: clamp(1.3rem, 2.6vw, 2.2rem);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.008));
  overflow: hidden;
}
.show-row + .show-row {
  margin-top: clamp(0.9rem, 1.6vw, 1.3rem);
}
.show-row.flip .show-visual {
  order: -1;
}
.show-num {
  display: block;
  font-family: var(--display);
  font-size: 0.92rem;
  letter-spacing: 0.14em;
  color: var(--faint);
  margin-bottom: 0.5rem;
}
.show-copy h3 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  margin-bottom: 0.55rem;
}
.show-copy > p em {
  font-style: normal;
  color: var(--ink);
}
.show-list {
  list-style: none;
  display: grid;
  gap: 0.55rem;
  margin-top: 1.1rem;
}
.show-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(7, 8, 13, 0.35);
  color: var(--muted);
  font-size: 0.95rem;
}
.show-list .ic {
  color: var(--mint);
  flex: 0 0 auto;
}
.show-visual {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  overflow: hidden;
  background: #07080d;
}
.show-visual img,
.show-visual video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.show-visual video {
  opacity: 0;
  transition: opacity 1.2s ease;
}
.show-visual video.loop-live {
  opacity: 1;
}
.show-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(9, 11, 18, 0.55);
  backdrop-filter: blur(10px) saturate(1.25);
  -webkit-backdrop-filter: blur(10px) saturate(1.25);
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  animation: chip-float 5.4s ease-in-out infinite;
}
.show-chip .ic {
  color: var(--mint);
}
.sc1 { top: 12%; right: 7%; }
.sc2 { top: 48%; left: 6%; animation-delay: 1.6s; }
.sc3 { bottom: 10%; right: 13%; animation-delay: 3s; }
@keyframes chip-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
html.lite .show-chip {
  animation: none;
}
@media (prefers-reduced-motion: reduce) {
  .show-chip { animation: none; }
}
@media (max-width: 767px) {
  .show-row {
    grid-template-columns: 1fr;
  }
  .show-row.flip .show-visual {
    order: 0; /* copy first, visual under it — same rhythm on every row */
  }
  .show-chip {
    font-size: 0.78rem;
    padding: 0.42rem 0.7rem;
  }
}

/* ---------- signature art cards (generated brand art) ---------- */
.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(0.9rem, 1.6vw, 1.3rem);
}
.art-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 10 / 7;
  margin: 0;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  overflow: hidden;
  background: #07080d;
}
.art-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.92;
  transition: transform 0.9s var(--ease);
  will-change: transform;
}
.art-card:hover > img {
  transform: scale(1.045);
}
.art-card figcaption {
  position: relative;
  margin: 1.1rem;
  padding: 1.05rem 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: var(--r-md);
  background: rgba(7, 8, 13, 0.52);
}
html:not(.lite) .art-card figcaption {
  backdrop-filter: blur(12px) saturate(1.25);
  -webkit-backdrop-filter: blur(12px) saturate(1.25);
}
.art-card figcaption h3 {
  margin-bottom: 0.3rem;
}
.art-card figcaption p {
  font-size: 0.95rem;
  line-height: 1.5;
}
@media (max-width: 767px) {
  .duo-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------- cards / grids ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.card {
  position: relative;
  padding: 1.8rem 1.7rem;
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.012));
  border: 1px solid var(--line);
  display: grid;
  gap: 0.7rem;
  align-content: start;
  justify-items: start;
  transition: transform 0.35s var(--ease), border-color 0.3s ease, background 0.3s ease;
  transform-style: preserve-3d;
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(232, 114, 42, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.card:hover::before {
  opacity: 1;
}
.card:hover {
  border-color: rgba(255, 255, 255, 0.15);
}
.card.tilt {
  transform: perspective(800px) rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg)) translateY(-3px);
}
.card .icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  color: var(--mint);
  background: var(--grad-soft);
  border: 1px solid rgba(232, 114, 42, 0.25);
  box-shadow: 0 8px 22px -10px rgba(232, 114, 42, 0.55);
  margin-bottom: 0.35rem;
}
.card p {
  font-size: 0.98rem;
}
.glass {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* touch feedback: things press down under the thumb */
@media (hover: none) {
  .btn:active {
    transform: scale(0.965);
    transition-duration: 0.12s;
  }
  .btn-glass:active {
    border-color: rgba(247, 178, 103, 0.45);
  }
  .card:active,
  .step:active,
  .hcard:active {
    transform: scale(0.985);
  }
}

/* ---------- feature sticky scroller (wsend) ---------- */
.feature-flow {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(2rem, 6vw, 6rem);
  align-items: start;
}
.feature-sticky {
  position: sticky;
  top: calc(var(--nav-h) + 3.4rem);
}
.feature-sticky .device {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 50px 100px -40px rgba(0, 0, 0, 0.85),
    0 0 80px -30px rgba(232, 114, 42, 0.45);
  background: var(--bg-2);
}
.feature-sticky .device img {
  width: 100%;
}
.feature-list {
  display: grid;
  gap: clamp(1.4rem, 3vh, 2.2rem);
}
.feature-item {
  position: relative;
  padding: 1.7rem 1.8rem 1.8rem 2.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line-soft);
  background: linear-gradient(180deg, var(--glass), transparent);
  display: grid;
  gap: 0.6rem;
  justify-items: start;
  transition: border-color 0.35s ease, background 0.35s ease, opacity 0.35s ease;
}
.feature-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.4rem;
  bottom: 1.4rem;
  width: 2px;
  border-radius: 2px;
  background: var(--grad);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.45s var(--ease);
}
html.js .feature-item {
  opacity: 0.38;
}
html.js .feature-item.is-focus {
  opacity: 1;
  border-color: var(--line);
  background: linear-gradient(180deg, var(--glass-2), transparent);
}
html.js .feature-item.is-focus::before {
  transform: scaleY(1);
}
.feature-item .icon {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  color: var(--mint);
  background: var(--grad-soft);
  border: 1px solid rgba(232, 114, 42, 0.25);
}
.feature-item h3 {
  font-size: 1.35rem;
}
.feature-item p {
  font-size: 1rem;
  max-width: 52ch;
}

/* ---------- steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.step {
  position: relative;
  padding: 2rem 1.6rem 1.8rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.012));
  display: grid;
  gap: 0.6rem;
  align-content: start;
  justify-items: start;
  transition: transform 0.35s var(--ease), border-color 0.3s ease;
  transform-style: preserve-3d;
}
.step.tilt {
  transform: perspective(800px) rotateY(var(--rx, 0deg)) rotateX(var(--ry, 0deg)) translateY(-3px);
}
.step .num {
  font-family: var(--display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0.9;
}
.step h3 {
  font-size: 1.18rem;
}
.step p {
  font-size: 0.95rem;
}

/* ---------- band (split image + copy) ---------- */
.band {
  position: relative;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  padding: clamp(2.2rem, 5vw, 3.8rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(232, 114, 42, 0.12), transparent 55%),
    linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.01));
  overflow: hidden;
}
.band > div:not(.art) {
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}
.band .art {
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--line);
  box-shadow: 0 40px 80px -35px rgba(0, 0, 0, 0.8);
}
.band .art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.band h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.7rem);
}

/* parallax depth on scroll (JS writes --dy) */
html.js [data-depth] {
  will-change: transform;
  transform: translate3d(0, calc(var(--dy, 0) * 1px), 0);
  will-change: transform;
}

/* ---------- prose (about) ---------- */
.prose {
  max-width: 880px;
}
.prose p {
  font-family: var(--display);
  font-size: clamp(1.45rem, 2.7vw, 2.2rem);
  line-height: 1.42;
  letter-spacing: -0.015em;
  font-weight: 500;
  color: var(--ink);
}
.prose p + p {
  margin-top: 2.4rem;
}
html.js .prose.scrub-words .wd {
  opacity: 0.55;
  transition: opacity 0.25s linear;
}
html.js .prose.scrub-words .wd.lit {
  opacity: 1;
}

/* ---------- page hero (subpages) ---------- */
.page-hero {
  position: relative;
  padding-top: calc(var(--nav-h) + clamp(5rem, 12vh, 8rem));
  padding-bottom: clamp(2.5rem, 6vh, 4rem);
  /* fine silk light-lines drifting behind every subpage opening */
  background: linear-gradient(180deg, rgba(5, 6, 11, 0.72) 0%, rgba(5, 6, 11, 0.35) 55%, var(--bg) 100%);
}
.page-hero h1 {
  font-size: clamp(2.7rem, 6.4vw, 5.4rem);
  max-width: 17ch;
}
.page-hero .sub {
  margin-top: 1.4rem;
  max-width: 58ch;
  font-size: clamp(1.05rem, 1.5vw, 1.22rem);
}
.page-hero .eyebrow {
  margin-bottom: 1.2rem;
}

/* ---------- chat demo (wsend) ---------- */
.chat-demo {
  max-width: 430px;
  margin-inline: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass-2), rgba(255, 255, 255, 0.015));
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 40px 80px -35px rgba(0, 0, 0, 0.8);
}
.chat-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
}
.chat-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
  flex: 0 0 auto;
}
.chat-head strong {
  display: block;
  font-family: var(--display);
  font-size: 1.02rem;
  letter-spacing: -0.01em;
}
.chat-head .status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.chat-head .status::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #f59e4c;
  box-shadow: 0 0 8px #f59e4c;
}
.chat-body {
  padding: 1.2rem 1rem 1.3rem;
}
.chat-scroll {
  display: grid;
  gap: 0.55rem;
}
.msg {
  max-width: 84%;
  padding: 0.62rem 0.85rem;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}
.msg p {
  color: inherit;
  margin: 0;
  font-size: inherit;
}
.msg.in {
  justify-self: start;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line);
  border-bottom-left-radius: 6px;
}
.msg.out {
  justify-self: end;
  background: linear-gradient(135deg, rgba(232, 114, 42, 0.3), rgba(247, 178, 103, 0.18));
  border: 1px solid rgba(247, 178, 103, 0.24);
  border-bottom-right-radius: 6px;
}
.msg img {
  border-radius: 10px;
  margin-bottom: 0.5rem;
  border: 1px solid var(--line-soft);
  /* keep the photo bubble modest so the thread stays compact */
  width: min(100%, 180px);
  height: auto;
}
.msg .time {
  display: block;
  font-size: 0.66rem;
  color: var(--faint);
  margin-top: 0.35rem;
  text-align: right;
  letter-spacing: 0.04em;
}
.chat-chip {
  justify-self: center;
  margin-top: 0.3rem;
}
.chat-note {
  text-align: center;
  margin-top: 1.4rem;
  font-size: 0.92rem;
  color: var(--faint);
}
/* composer bar — decorative footer that anchors the frame */
.chat-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  border-top: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.03);
}
.chat-input {
  flex: 1;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  border: 1px solid var(--line-soft);
  background: rgba(255, 255, 255, 0.04);
  font-size: 0.88rem;
  color: var(--faint);
  user-select: none;
}
.chat-send {
  width: 38px;
  height: 38px;
  flex: 0 0 auto;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--grad);
  color: #fff;
}
.chat-send .ic {
  width: 17px;
  height: 17px;
}

/* ---- pinned chat scene: the frame (header + composer) holds still while
   the scroll plays the conversation. JS writes --p (0..1) on the section
   and --chatox (thread overflow in px); everything below derives from
   those two. When the stage cannot pin (no JS, reduced motion, short
   viewports) .chat-live is absent and the full thread renders statically. */
.chat-pin {
  --pin-len: 240;
  /* thread follow: glides the stack up as messages land */
  --cg: clamp(0, calc((var(--p, 1) - 0.12) / 0.74), 1);
}
.chat-pin .section-head {
  margin-bottom: 1.4rem;
}
/* the whole scene (head + frame + note) must fit one pinned viewport —
   keep the heading a single quiet line, not the full display size */
.chat-pin .section-head h2 {
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
}
.chat-pin .chat-note {
  margin-top: 1.2rem;
}
html.js .chat-pin.chat-live .chat-body {
  height: 420px; /* fallback for browsers without svh */
  height: min(46svh, 420px);
  overflow: hidden;
}
html.js .chat-pin.chat-live .chat-scroll {
  transform: translateY(calc(var(--chatox, 0px) * var(--cg, 1) * -1));
  will-change: transform;
}
html.js .chat-pin.chat-live .chat-scroll > * {
  --mi: clamp(0, calc(var(--p, 1) * 11.5 - var(--i, 0) * 1.05 - 0.45), 1);
  opacity: var(--mi);
  transform: translateY(calc((1 - var(--mi)) * 16px)) scale(calc(0.94 + var(--mi) * 0.06));
}
html.js .chat-pin.chat-live .chat-scroll > .msg.in {
  transform-origin: left bottom;
}
html.js .chat-pin.chat-live .chat-scroll > .msg.out {
  transform-origin: right bottom;
}

/* ---------- faq ---------- */
.faq {
  max-width: 780px;
  margin-inline: auto;
  display: grid;
  gap: 0.8rem;
}
.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.012));
  padding: 0 1.25rem;
  transition: border-color 0.3s ease;
}
.faq details[open] {
  border-color: rgba(255, 255, 255, 0.16);
}
/* answers unfold instead of popping open (browsers that can animate to auto) */
@supports (interpolate-size: allow-keywords) {
  .faq {
    interpolate-size: allow-keywords;
  }
  .faq details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.4s var(--ease), content-visibility 0.4s allow-discrete;
  }
  .faq details[open]::details-content {
    block-size: auto;
  }
}
.faq summary {
  cursor: pointer;
  padding: 1.05rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  flex: 0 0 auto;
  color: var(--mint);
  font-size: 1.35rem;
  font-weight: 400;
  transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(45deg);
}
.faq details p {
  padding: 0 0 1.15rem;
  font-size: 0.98rem;
  max-width: 62ch;
}

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}
.contact-grid .card {
  padding: 2.1rem 1.8rem;
}

/* ---------- final CTA ---------- */
.final-cta {
  text-align: center;
  overflow: hidden;
}
.final-cta .wrap {
  position: relative;
  padding: clamp(3.5rem, 8vw, 6.5rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background:
    radial-gradient(70% 120% at 50% 0%, rgba(232, 114, 42, 0.2), transparent 60%),
    radial-gradient(60% 100% at 50% 100%, rgba(247, 178, 103, 0.1), transparent 60%),
    linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.01));
  display: grid;
  justify-items: center;
  gap: 1.4rem;
}
.final-cta .wrap::before {
  content: "";
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(232, 114, 42, 0.7), rgba(247, 178, 103, 0.7), transparent);
}
.final-cta h2 {
  font-size: clamp(2.1rem, 4.6vw, 3.6rem);
  max-width: 18ch;
}
.final-cta p {
  font-size: 1.1rem;
  max-width: 50ch;
}

/* ---------- footer ---------- */
footer {
  position: relative;
  margin-top: clamp(2rem, 6vw, 4rem);
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
  /* aurora horizon rising behind the giant wordmark — the page's finale */
  background: linear-gradient(180deg, var(--bg) 0%, rgba(5, 6, 11, 0.55) 45%, rgba(5, 6, 11, 0.1) 100%);
}
.foot-grid {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  padding: 2.4rem 0 1.8rem;
}
.foot-links {
  display: flex;
  /* 7 links are wider than a phone — without wrap, Privacy/Terms (the
     Meta-registered pages) were clipped clean off a 390px viewport */
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.6rem;
}
.foot-links a {
  color: var(--muted);
  font-size: 0.95rem;
  transition: color 0.25s ease;
  /* pad the hit area up to ~44px for touch without changing the layout */
  padding: 0.6rem 0.5rem;
  margin: -0.6rem -0.5rem;
}
.foot-links a:hover {
  color: var(--ink);
}
.foot-grid > span {
  color: var(--faint);
  font-size: 0.88rem;
}
.foot-mark {
  display: block;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 12.5vw, 12.5rem);
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin-bottom: -0.24em;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.015));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  user-select: none;
  white-space: nowrap;
}
/* frosted-glass letters: JS paints blurred smoke clipped to the wordmark
   glyphs onto this canvas (desktop only — see site.js) */
.glass-mark {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}
html.lite .glass-mark {
  display: none;
}

/* lazy images: decode mid-scroll would pop — fade them in instead
   (JS adds .img-wait until the file has actually loaded) */
.chapter-visual img,
.art img,
.msg img,
.device img,
.hcard img {
  transition: opacity 0.55s ease;
}
html.js img.img-wait {
  opacity: 0;
}

/* ---------- reveal system ---------- */
html.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(9px);
  transition: opacity 0.7s ease, transform 0.7s var(--ease), filter 0.7s ease;
}
html.js .reveal.in {
  opacity: 1;
  transform: none;
  filter: none;
}
html.js .reveal.d1 { transition-delay: 0.08s; }
html.js .reveal.d2 { transition-delay: 0.16s; }
html.js .reveal.d3 { transition-delay: 0.24s; }

/* ---------- interactive layer ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  background: var(--grad);
  z-index: 90;
  box-shadow: 0 0 12px rgba(247, 178, 103, 0.7);
}
/* liquid splash cursor — lives on the BACKDROP layer: behind every card,
   image and line of text, visible in the open space and through glass */
.splash-cursor {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}
html.lite .splash-cursor {
  opacity: 0;
}
/* twinkling starfield behind every page (site.js paints it) */
.starfield {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  opacity: 0; /* site.js raises it once past the hero (or right away on subpages) */
}
html.lite .starfield {
  opacity: 0 !important;
}
.cursor-glow {
  position: fixed;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(232, 114, 42, 0.07), transparent 60%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* ---------- brand intro (home, once per session) ---------- */
.intro {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: transform 0.75s cubic-bezier(0.76, 0, 0.24, 1);
}
html.intro-skip .intro {
  display: none;
}
.intro-mark {
  --im-size: clamp(140px, 24vw, 210px);
  position: relative;
  display: grid;
  place-items: center;
  width: var(--im-size);
}
.intro-mark > * {
  grid-area: 1 / 1;
}
.intro-mark::before {
  content: "";
  position: absolute;
  inset: -70%;
  background: radial-gradient(circle, rgba(232, 114, 42, 0.3), rgba(247, 178, 103, 0.08) 45%, transparent 65%);
  opacity: 0;
  animation: intro-glow 1.4s ease forwards;
}
.intro-mark svg {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
}
/* the REAL mark paints itself in: a soft wipe sweeps along the ligature
   direction (d up into R), exact logo pixels the whole time */
.intro-logo {
  position: relative;
  width: 100%;
  height: auto;
  transform: scale(0.94);
  -webkit-mask-image: linear-gradient(60deg, #000 42%, rgba(0, 0, 0, 0) 58%);
  mask-image: linear-gradient(60deg, #000 42%, rgba(0, 0, 0, 0) 58%);
  -webkit-mask-size: 320% 320%;
  mask-size: 320% 320%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 130% 130%;
  mask-position: 130% 130%;
  animation: logo-wipe 1.15s var(--ease) 0.15s forwards;
}
@keyframes logo-wipe {
  to {
    transform: none;
    -webkit-mask-position: 0% 0%;
    mask-position: 0% 0%;
  }
}
.intro.intro-out {
  transform: translateY(-101%);
}
.intro.intro-out .intro-mark {
  opacity: 0;
  transition: opacity 0.3s ease;
}
@keyframes intro-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes intro-leg {
  to { opacity: 1; transform: none; }
}
@keyframes intro-glow {
  30% { opacity: 1; }
  100% { opacity: 0.5; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .chapter-num { font-size: clamp(7rem, 14vw, 10rem); left: -0.5rem; }
}

/* floating hero chips overlap the headline on narrow/tablet widths */
@media (max-width: 1099px) {
  .hero-chip { display: none; }
  /* with the chips gone the tail of the desktop hero pin is empty art —
     shorten the traversal (767px and below re-tunes it again) */
  .hero { --pin-len: 150; }
}

@media (max-width: 860px) {
  .grid-3 { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .band { grid-template-columns: 1fr; }
  .band .art { order: -1; }
  .feature-flow { grid-template-columns: 1fr; }
  .feature-sticky { position: static; max-width: 480px; margin-inline: auto; }
  html.js .feature-item { opacity: 1; }
  html.js .feature-item::before { transform: scaleY(1); }
}

@media (max-width: 767px) {
  :root { --nav-h: 62px; }
  body { font-size: 1rem; }
  h1 { font-size: clamp(2.25rem, 9.6vw, 3.2rem); }
  h2 { font-size: clamp(1.7rem, 7.4vw, 2.4rem); }
  .page-hero h1 { font-size: clamp(2.1rem, 8.8vw, 3rem); }
  .nav-inner { padding: 0 0.6rem 0 0.9rem; }
  /* lighter glass on phones — what's behind the pill must stay visible */
  .nav.scrolled .nav-inner {
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.01) 55%, rgba(255, 255, 255, 0.025)),
      rgba(13, 16, 25, 0.26);
    backdrop-filter: blur(12px) saturate(1.8) brightness(1.06);
    -webkit-backdrop-filter: blur(12px) saturate(1.8) brightness(1.06);
  }
  .nav-burger { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: calc(var(--nav-h) + 20px);
    left: 1rem;
    right: 1rem;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
    padding: 0.8rem;
    border-radius: 22px;
    /* near-opaque base: Android compositors sometimes drop backdrop-filter
       on fixed panels mid-scroll — the menu must stay readable even when
       the blur bails (the hero headline was bleeding straight through it) */
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)),
      rgba(11, 13, 21, 0.94);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(18px) saturate(1.7);
    -webkit-backdrop-filter: blur(18px) saturate(1.7);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.16),
      0 30px 60px -20px rgba(0, 0, 0, 0.8);
    display: none;
  }
  .nav-links.open { display: flex; }
  /* chromatic lens rim on the dropped-down glass panel */
  .nav-links::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    padding: 1.5px;
    background: linear-gradient(
      165deg,
      rgba(255, 255, 255, 0.4),
      rgba(247, 178, 103, 0.18) 30%,
      rgba(255, 255, 255, 0.06) 52%,
      rgba(245, 158, 76, 0.2) 78%,
      rgba(255, 255, 255, 0.26)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  .nav-links > a:not(.btn) { padding: 0.8rem 1rem; }
  .nav-cta { margin: 0.35rem 0 0; }

  /* ---- MOBILE MOTION (tuned, not disabled) ----
     hero keeps a SHORT pin; chapters + gallery un-pin and get
     lightweight scroll-linked motion instead (JS writes --cp / --hp). */

  /* chapters: no pinning — normal flow (a full crossfade scene cannot fit
     a phone viewport; they scrub in while stacked instead) */
  html.js .chapters-pin { height: auto; }
  html.js .chapters-pin .pin-stage { position: static; height: auto; overflow: visible; }

  /* hero: pinned "cover" transition — copy fades/zooms out over the first
     ~40svh of scroll, then the next content slides up OVER the pinned
     stage (negative bottom margin) — every frame has motion, zero dead
     black scroll. Total hero traversal: 140svh. */
  .hero { --pin-len: 220; }
  html.js .hero {
    height: calc(var(--pin-len) * 1svh);
    margin-bottom: -100svh;
  }
  .marquee { position: relative; } /* paints above the pinned hero stage */
  .hero-copy {
    transform: translateY(calc(var(--p, 0) * -26vh));
    opacity: calc(1 - var(--p, 0) * 2.9);
  }
  /* art holds through the fade, then dims away as content covers it —
     incoming sections land on clean background, not leftover artwork */
  .hero-media { opacity: clamp(0, (1 - var(--p, 0)) * 1.8, 1); }
  .hero-media img,
  .hero-media video {
    transform: translateY(calc(var(--p, 0) * -7vh))
      scale(calc((1.1 - var(--p, 0) * 0.08) * var(--vcrop, 1)));
  }
  .scroll-hint { bottom: 1.5rem; }
  .hero-meta { gap: 0.7rem 1.1rem; }

  /* chapters: stacked, each one scrubs in as it enters (JS writes --cp) */
  .chapter-track { min-height: 0; display: grid; gap: 3.6rem; }
  .chapter {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }
  .chapter-visual { order: -1; max-height: none; }
  html.js .chapter-visual {
    opacity: calc(0.35 + var(--cp, 1) * 0.65);
    transform: translateY(calc((1 - var(--cp, 1)) * 28px)) scale(calc(0.96 + var(--cp, 1) * 0.04));
    will-change: transform, opacity;
  }
  html.js .chapter-copy {
    opacity: calc(0.25 + var(--cp, 1) * 0.75);
    transform: translateY(calc((1 - var(--cp, 1)) * 18px));
    will-change: transform, opacity;
  }
  /* the giant outline numbers overlap the tag pills on phones — drop them */
  .chapter-num { display: none; }
  .chapter-progress { display: none; }

  /* gallery: pinned scroll-scrub on phones too — vertical scroll drives the
     track sideways exactly like desktop. Cards are compacted so the pinned
     stage fits a phone viewport; short viewports (max-height 620px below)
     fall back to native swipe. */
  .hscroll { --pin-len: 260; }
  .hcard { width: min(72vw, 300px); }
  .hcard-body { padding: 1.1rem 1.2rem 1.3rem; }
  .hcard-body p { font-size: 0.92rem; }
  .hprogress { height: 3px; margin-top: 1.1rem; }
  .hscroll-head { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .hscroll-head .hint { padding-bottom: 0; }

  .steps { grid-template-columns: 1fr; }
  .cursor-glow { display: none; }
  .prose p { font-size: 1.3rem; }
  .marquee-row { font-size: 2.1rem; gap: 1.6rem; }
  .marquee-row span { gap: 1.6rem; }

  /* reveals ride the thumb: scroll-linked and reversible (JS writes --sp)
     instead of a one-shot fade — every scroll frame has motion.
     No blur here: per-frame filters jank on phones.
     The .in variant MUST be listed too: the IntersectionObserver still
     tags elements (lite mode needs it), and its base rule outranks this
     one — without the variant every element SNAPS to full opacity the
     moment .in lands, which reads as a hard jerk mid-scroll. */
  html.js .reveal,
  html.js .reveal.in {
    transition: none;
    opacity: calc(0.1 + var(--sp, 1) * 0.9);
    transform: translateY(calc((1 - var(--sp, 1)) * 18px));
    filter: none;
    will-change: transform, opacity;
  }

  /* menu links waterfall in when the panel opens */
  .nav-links.open > * {
    animation: menu-in 0.45s var(--ease) backwards;
  }
  .nav-links.open > *:nth-child(1) { animation-delay: 0.03s; }
  .nav-links.open > *:nth-child(2) { animation-delay: 0.09s; }
  .nav-links.open > *:nth-child(3) { animation-delay: 0.15s; }
  .nav-links.open > *:nth-child(4) { animation-delay: 0.21s; }
  .nav-links.open > *:nth-child(5) { animation-delay: 0.27s; }
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

/* shorter phones (e.g. 375x667): compact the pinned gallery so the whole
   scene — head, card, progress — fits inside one viewport */
@media (max-width: 767px) and (max-height: 719px) {
  .hscroll .pin-stage {
    padding-top: calc(var(--nav-h) + 1.2rem);
    padding-bottom: 1.2rem;
  }
  .hscroll-head { margin-bottom: 0.9rem; gap: 0.6rem; }
  .hcard { width: min(60vw, 260px); }
  .hprogress { margin-top: 0.9rem; }
}

@media (max-width: 640px) {
  .grid-4 { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr 1fr; }
  .stat { padding-inline: 0.6rem; min-width: 0; }
  .stat strong { font-size: clamp(1.45rem, 7vw, 2rem); }
}

/* very narrow phones: tighten the hero so the pinned stage can hold it */
@media (max-width: 380px) {
  h1 { font-size: clamp(2rem, 9.6vw, 3rem); }
  .hero-copy { gap: 1.1rem; }
  .hero-copy .sub { font-size: 0.98rem; line-height: 1.55; }
  .cta-row { gap: 0.6rem; }
  .hero-meta { gap: 0.5rem 0.9rem; margin-top: 0.2rem; }
  .hero-meta span { font-size: 0.82rem; }
  .btn { padding: 0.85rem 1.45rem; }
}

/* the scroll hint needs vertical room — on short viewports it lands on the
   hero CTAs / subtitle */
@media (max-height: 700px) {
  .scroll-hint { display: none; }
}

/* ============================================================
   SHORT VIEWPORTS (landscape phones, very small screens):
   a 100svh pinned stage cannot hold the hero/scenes — unpin and
   let everything flow. Placed after the width breakpoints so it
   wins over both desktop and mobile pin tuning.
   ============================================================ */
@media (max-height: 620px) {
  html.js .hero { height: auto; margin-bottom: 0; }
  html.js .hero .pin-stage {
    position: static;
    height: auto;
    overflow: visible;
  }
  /* JS parks unpinned scenes at --p:1 — neutralize the scrub styling */
  .hero-media { opacity: 1; }
  .hero-media img,
  .hero-media video { transform: scale(var(--vcrop, 1)); }
  .hero-copy { transform: none; opacity: 1; }
  html.js .hero-chip { opacity: 1; transform: none; }
  /* chat scene: header + thread + composer cannot fit a short stage —
     unpin, full thread renders statically (JS drops .chat-live) */
  html.js .chat-pin { height: auto; }
  html.js .chat-pin .pin-stage { position: static; height: auto; overflow: visible; }
  /* gallery: the pinned scrub cannot fit — native swipe instead */
  html.js .hscroll { height: auto; }
  html.js .hscroll .pin-stage { position: static; height: auto; overflow: visible; }
  html.js .htrack { transform: none; }
  .htrack {
    width: auto;
    overflow-x: auto;
    padding-bottom: 1rem;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .htrack::-webkit-scrollbar { display: none; }
  .hcard { scroll-snap-align: start; }
  .hprogress { display: none; }
}
/* widths <=767px already unpin chapters + gallery; do the same for
   short desktop-layout viewports (landscape phones, small tablets) */
@media (max-height: 620px) and (min-width: 768px) {
  /* short screens fill slowly — long reveal fades read as broken.
     Desktop widths only: on <=767px the scrub owns the reveals */
  html.js .reveal { transform: translateY(18px); transition-duration: 0.45s; }
  html.js .chapters-pin { height: auto; }
  html.js .chapters-pin .pin-stage { position: static; height: auto; overflow: visible; }
  .chapter {
    position: static;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto;
  }
  .chapter-track { min-height: 0; display: grid; gap: 3rem; }
  .chapter-num { top: auto; bottom: 0; }
  .chapter-progress { display: none; }
}

/* ============================================================
   LITE MODE — JS flips html.lite on budget devices that cannot
   hold 60fps: drop the heaviest layers, keep the design language
   ============================================================ */
html.lite .grain {
  opacity: 0;
}
html.lite .backdrop .orb {
  filter: blur(55px) hue-rotate(calc(var(--hue, 0) * 1deg));
  opacity: 0.38;
}
html.lite .backdrop .orb-c {
  display: none;
}
html.lite .cursor-glow {
  display: none;
}
/* reveals: one-shot fade via IntersectionObserver instead of per-frame scrub —
   longer and shallower than the desktop fade so it never reads as a pop */
html.lite .reveal {
  transition: opacity 0.65s ease, transform 0.65s var(--ease);
  opacity: 0;
  transform: translateY(14px);
  filter: none;
}
html.lite .reveal.in {
  opacity: 1;
  transform: none;
}

/* no backdrop-filter support (old/low-end devices): glass must fall back
   to near-solid so nav text never fights the content behind it */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  .nav.scrolled .nav-inner {
    background: rgba(13, 16, 25, 0.94);
  }
  @media (max-width: 767px) {
    .nav-links {
      background: rgba(13, 16, 25, 0.97);
    }
  }
}

/* ============================================================
   REDUCED MOTION — everything static, everything visible
   ============================================================ */
@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;
  }
  html.js .pin { height: auto; }
  html.js .hero { height: auto; margin-bottom: 0; }
  html.js .pin-stage { position: static; height: auto; overflow: visible; }
  html.js .chapter-visual,
  html.js .chapter-copy,
  html.js .chapter-num { opacity: 1; transform: none; }
  .hero-media { position: absolute !important; }
  .hero-media img,
  .hero-media video { transform: scale(var(--vcrop, 1)); }
  .hero-copy { transform: none; opacity: 1; }
  html.js .hero-copy .w { transform: none; opacity: 1; }
  html.js .hero-copy > *:not(h1) { opacity: 1; transform: none; }
  html.js .hero-chip { opacity: 1; transform: none; }
  .scroll-hint { display: none; }
  .chapter { position: static; opacity: 1 !important; transform: none !important; pointer-events: auto; }
  .chapter-track { min-height: 0; display: grid; gap: 3rem; }
  .chapter-progress { display: none; }
  html.js .htrack { transform: none; }
  .htrack { width: auto; overflow-x: auto; }
  .hprogress { display: none; }
  html.js .reveal { opacity: 1; transform: none; filter: none; }
  .intro { display: none; }
  html.js .feature-item { opacity: 1; }
  html.js .feature-item::before { transform: scaleY(1); }
  html.js .prose.scrub-words .wd { opacity: 1; }
  html.js [data-depth] { transform: none; }
  .marquee-row { transform: none !important; }
  .cursor-glow { display: none; }
}

/* ============================================================
   MOBILE PERFORMANCE + WOW LAYER
   ============================================================ */

/* scroll-driven reveals on the compositor: where the browser supports
   animation-timeline, the mobile reveal scrub runs entirely off the main
   thread — site.js skips its per-frame writes for these entirely */
@supports (animation-timeline: view()) {
  @media (max-width: 767px) {
    html.js:not(.lite) .reveal,
    html.js:not(.lite) .reveal.in {
      transition: none;
      opacity: 1;
      transform: none;
      filter: none;
      animation: sr-in linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 75%;
      will-change: transform, opacity;
    }
  }
}
@keyframes sr-in {
  from {
    opacity: 0.1;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 767px) {
  /* skip layout+paint of far-below-fold sections until they approach.
     ONLY sections BELOW every pinned scene: estimated placeholder heights
     above a pin would shift its measured anchors (the gallery stopped at
     73% because of exactly that). */
  #edge,
  #about-teaser,
  #capabilities,
  .final-cta {
    content-visibility: auto;
    contain-intrinsic-size: auto 760px;
  }

  /* baked panels: backdrop blur is the single biggest mobile GPU cost —
     the same frosted look comes from a pre-mixed tint on phones */
  .nav.scrolled .nav-inner {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: linear-gradient(180deg, rgba(24, 28, 42, 0.94), rgba(13, 16, 25, 0.94));
  }
  .show-chip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(9, 11, 18, 0.88);
  }
  html:not(.lite) .art-card figcaption {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(7, 8, 13, 0.88);
  }

  /* gyroscope parallax: the phone's tilt is its mouse (site.js writes
     --gx/--gy). Only composited transforms — zero paint cost. */
  .hero-particles {
    transform: translate3d(calc(var(--gx, 0) * -12px), calc(var(--gy, 0) * -8px), 0);
  }
  .art-card > img,
  .show-visual img,
  .show-visual video {
    /* slight overscale — the tilt shift must never expose the media's edge */
    transform: translate3d(calc(var(--gx, 0) * 8px), calc(var(--gy, 0) * 5px), 0) scale(1.05);
  }
}

/* ---------- try-it demo chat (wsend) ---------- */
.try-demo {
  max-width: 560px;
  margin-inline: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(13, 16, 25, 0.72), rgba(7, 8, 13, 0.85));
  overflow: hidden;
}
.try-thread {
  min-height: 240px;
  max-height: 320px;
  overflow-y: auto;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  scroll-behavior: smooth;
}
.try-msg {
  max-width: 82%;
  padding: 0.62rem 0.9rem;
  border-radius: 16px;
  font-size: 0.95rem;
  line-height: 1.45;
  animation: try-pop 0.35s var(--ease) backwards;
}
.try-msg.in {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--line-soft);
  border-bottom-left-radius: 6px;
}
.try-msg.out {
  align-self: flex-end;
  background: linear-gradient(135deg, rgba(232, 114, 42, 0.32), rgba(247, 178, 103, 0.22));
  border: 1px solid rgba(245, 158, 76, 0.35);
  border-bottom-right-radius: 6px;
}
@keyframes try-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.96);
  }
}
.try-typing {
  display: inline-flex;
  gap: 4px;
  padding: 0.75rem 0.95rem;
}
.try-typing i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
  animation: try-dot 1s ease-in-out infinite;
}
.try-typing i:nth-child(2) { animation-delay: 0.15s; }
.try-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes try-dot {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-3px); }
}
.try-quick {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.4rem 1.1rem 0.8rem;
}
.try-chip {
  font-family: var(--body);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.try-chip:hover {
  color: var(--ink);
  border-color: rgba(247, 178, 103, 0.4);
  background: rgba(247, 178, 103, 0.08);
}
.try-input {
  display: flex;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem 1.1rem;
  border-top: 1px solid var(--line-soft);
}
.try-input input {
  flex: 1;
  min-width: 0;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.95rem;
  padding: 0.6rem 1rem;
  outline: none;
}
.try-input input:focus {
  border-color: rgba(247, 178, 103, 0.45);
}
.try-foot {
  text-align: center;
  padding: 0 1.1rem 1.1rem;
  font-size: 0.88rem;
  color: var(--faint);
}
.try-foot a {
  color: var(--mint);
  font-weight: 600;
}

/* ============================================================
   MOBILE GLASS (3 layers, GPU-cheap) + ACCENT JOURNEY + DETAILS
   ============================================================ */

/* footer aurora: the horizon breathes (lazy video over the still) */
.foot-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  z-index: 0;
  opacity: 0;
  transition: opacity 1.4s ease;
}
.foot-sky.loop-live {
  opacity: 0.85;
}
footer > .wrap,
footer .foot-mark {
  position: relative;
  z-index: 1;
}

/* section accent journey: each act of the page carries its own faint
   colour — indigo opening, cyan power, violet craft, gold finale */
#who {
  background: radial-gradient(60% 50% at 50% 20%, rgba(232, 114, 42, 0.07), transparent 70%);
}
#showcase {
  background: radial-gradient(70% 45% at 50% 30%, rgba(247, 178, 103, 0.055), transparent 72%);
}
#edge {
  background: radial-gradient(70% 45% at 50% 35%, rgba(251, 201, 138, 0.06), transparent 72%);
}
.final-cta {
  background: radial-gradient(60% 55% at 50% 65%, rgba(232, 181, 115, 0.06), transparent 72%);
}

/* buttons feel pressed, not just clicked */
.btn:active {
  transform: translateY(1px) scale(0.98);
}

/* FAQ opens like velvet where the browser can animate it */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 0.45s var(--ease), content-visibility 0.45s allow-discrete;
  }
  .faq details[open]::details-content {
    block-size: auto;
  }
}

/* footer links: a drawn underline instead of a bare hover */
.foot-links a {
  /* the hit-area padding means "bottom" is below the text — draw the line
     just under the glyphs instead */
  background: linear-gradient(currentColor, currentColor) no-repeat left 0.5rem bottom 0.45rem;
  background-size: 0 1px;
  transition: color 0.25s ease, background-size 0.3s var(--ease);
}
.foot-links a:hover {
  background-size: calc(100% - 1rem) 1px;
}

@media (max-width: 767px) {
  /* deeper gyro on the hero — the tilt should be FELT */
  .hero-particles {
    transform: translate3d(calc(var(--gx, 0) * -22px), calc(var(--gy, 0) * -14px), 0);
  }

  /* mobile glass, layer 1+2: a lit rim + inner top highlight on every
     panel — the shape of glass without any backdrop blur */
  .show-row,
  .stat,
  .card,
  .step,
  .band,
  .show-list li,
  .try-demo,
  .final-cta .wrap,
  .faq details {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.13) inset,
      0 12px 26px -18px rgba(0, 0, 0, 0.8),
      0 -10px 22px -18px rgba(232, 114, 42, 0.35) inset;
  }
  .art-card figcaption {
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.16) inset,
      0 -8px 18px -14px rgba(247, 178, 103, 0.3) inset;
  }

  /* layer 3: REAL blur back on the small surfaces only — cost scales with
     area, and these are tiny */
  .nav.scrolled .nav-inner {
    backdrop-filter: blur(14px) saturate(1.4);
    -webkit-backdrop-filter: blur(14px) saturate(1.4);
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)),
      rgba(13, 16, 25, 0.55);
  }
  .show-chip {
    backdrop-filter: blur(8px) saturate(1.25);
    -webkit-backdrop-filter: blur(8px) saturate(1.25);
    background: rgba(9, 11, 18, 0.6);
  }
}

/* =========================================================================
   PRICING — plans, the meter, and the feature blocks.
   The page's job is to answer "what do I get" before "what does it cost",
   so the feature blocks are the bulk of it and the cards are deliberately
   plain: three numbers, no checklists competing with the real list below.
   ========================================================================= */

/* ---- the meter panel in the explainer band ---- */
.pricing-meter {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.4rem 0.2rem;
  font-size: 0.92rem;
}
.meter-row,
.meter-total {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 0.4rem 1.2rem;
  padding: 0.62rem 1.05rem;
}
.meter-row b, .meter-total b { text-align: right; }
.meter-row + .meter-row { border-top: 1px solid var(--line-soft); }
.meter-row span { color: var(--muted); }
.meter-row b { font-weight: 600; color: var(--ink); white-space: nowrap; }
.meter-row b.free { color: var(--faint); font-weight: 500; }
.meter-total {
  margin-top: 0.2rem;
  border-top: 1px solid var(--line);
  background: var(--grad-soft);
  border-radius: 0 0 calc(var(--r-md) - 4px) calc(var(--r-md) - 4px);
}
.meter-total span { color: var(--ink); font-weight: 600; }
.meter-total b { color: var(--mint); white-space: nowrap; }

/* ---- plan cards ----
   Built ON the site's own .card material rather than beside it: same glass
   gradient, same hairline, same pointer sheen. A plan card that invents its
   own surface is the thing that makes a page look bolted on. */
.plan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.8rem 1.6rem 1.5rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.012));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.35s var(--ease), border-color 0.3s ease;
}
/* the same pointer-tracked sheen the cards elsewhere have */
.plan::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(232, 114, 42, 0.12), transparent 60%);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.plan:hover::before { opacity: 1; }
.plan:hover { border-color: rgba(255, 255, 255, 0.15); }
.plan > * { position: relative; z-index: 1; }

/* the chosen plan is marked by light, not by a louder border */
.plan.pop {
  border-color: rgba(232, 114, 42, 0.42);
  background: linear-gradient(180deg, rgba(232, 114, 42, 0.1), var(--glass) 46%);
  box-shadow: 0 24px 60px -30px rgba(232, 114, 42, 0.55);
}
.plan-tag {
  position: absolute;
  top: -0.7rem;
  left: 1.6rem;
  padding: 0.3em 0.75em;
  border-radius: 999px;
  background: var(--gold);
  color: #05060b;
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
.plan-name {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 640;
  color: var(--ink);
}
.plan-note { color: var(--muted); font-size: 0.9rem; line-height: 1.5; min-height: 2.7em; }
.plan-price {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-top: 0.5rem;
}
.plan-price b {
  font-family: var(--display);
  font-size: 2.7rem;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.plan-price span { color: var(--faint); font-size: 0.88rem; }
.plan-meter {
  margin-top: 0.55rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.1rem 0.45rem;
}
.plan-meter b {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 640;
  color: var(--mint);
  font-variant-numeric: tabular-nums;
}
.plan-meter span { color: var(--muted); font-size: 0.86rem; }
.plan-est { color: var(--faint); font-size: 0.84rem; }
.plan .btn { margin-top: auto; justify-content: center; width: 100%; }
.plan-foot {
  margin-top: 1.5rem;
  color: var(--muted);
  font-size: 0.92rem;
  text-align: center;
  max-width: 62ch;
  margin-inline: auto;
  line-height: 1.65;
}
.plan-foot b { color: var(--ink); font-weight: 600; }

/* ---- feature blocks: the real answer to "what do I get" ---- */
.feat-block {
  border-top: 1px solid var(--line);
  padding: 1.6rem 0 0.4rem;
}
.feat-block:first-of-type { border-top: 0; }
.feat-block h3 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--display);
  font-size: 1.18rem;
  font-weight: 640;
  color: var(--ink);
  margin-bottom: 1rem;
}
.feat-block h3 .ic { width: 20px; height: 20px; color: var(--mint); flex: none; }
.feat-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 0.9rem 2.2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.feat-list li {
  position: relative;
  padding-left: 1.35rem;
  color: var(--muted);
  font-size: 0.94rem;
  line-height: 1.6;
}
/* a hairline tick rather than a bullet — a list this long reads calmer */
.feat-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.7rem;
  height: 0.36rem;
  border-left: 1.5px solid var(--mint);
  border-bottom: 1.5px solid var(--mint);
  transform: rotate(-45deg);
  opacity: 0.85;
}
.feat-list b { color: var(--ink); font-weight: 600; }

@media (max-width: 720px) {
  .plan-note { min-height: 0; }
  .pricing-meter { font-size: 0.88rem; }
  .meter-row, .meter-total { padding: 0.55rem 0.85rem; }
}

/* =========================================================================
   MAINTENANCE — the founder's one switch, honoured by the public site.
   platform_settings.maintenance already drives the panel; assets/live.js
   reads the same row here. It covers the page rather than replacing it, so
   nothing has to be pre-rendered and nothing is lost if the check fails.
   ========================================================================= */
html.maint-on,
html.maint-on body { overflow: hidden; }
.maint {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: var(--gutter, 1.4rem);
  background: rgba(5, 6, 11, 0.92);
  backdrop-filter: blur(18px) saturate(120%);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
}
.maint-card {
  width: min(100%, 34rem);
  text-align: center;
  padding: clamp(2rem, 6vw, 3.4rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--glass), rgba(255, 255, 255, 0.012));
}
.maint-card h1 {
  font-family: var(--display);
  font-size: clamp(1.7rem, 1rem + 2.6vw, 2.6rem);
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 0.7rem;
}
.maint-card p { color: var(--muted); font-size: 1.02rem; line-height: 1.6; margin: 0; }

/* The pricing grid renders from the live catalog; while it is empty the
   hand-written cards hold the space, so the page never flashes blank.

   A live card only carries .plan-note when the plan actually has a tagline, so
   the 2.7em floor that keeps the hand-written prices on one line would reserve
   an empty band under a plan whose tagline is blank. Drop the floor here and
   let each card be as tall as its own copy. */
#plan-grid[data-live] .plan-note { min-height: 0; }


/* ============================================================
   36+. Browser font-size Large / Extra-Large (root >= 19px).
   site.js stamps html.font-xl. Floating decoration is positioned
   in % of the viewport while text grows in rem, so at these
   settings chips collide with the headline and the scroll cue
   collides with the trust row. Decoration yields to text.
   ============================================================ */
html.font-xl .hero-chip,
html.font-xl .show-chip,
html.font-xl .scroll-hint {
  display: none;
}


/* ============================================================
   37. Post-retheme sweep (2 Aug 2026).
   a) The raster art library (assets/art/*, Cloudfront media) was
      generated in the old indigo/cyan brand. Until it is
      regenerated, render it as an ember duotone so no frame of
      the site reads blue/purple. grayscale->sepia gives a warm
      base (~40deg); sepia's amber base minus 12deg lands in the ember band.
   b) The white-then-green split headline is reserved for the two
      product heroes; subpages set it in solid ink (green "Policy"
      on a legal page was tonally wrong).
   c) Anchored sections must clear the fixed nav.
   ============================================================ */
img[src*="assets/art/"],
img[src*="/art/"],
img[src*="cloudfront"],
video[src*="cloudfront"],
.hero-media img,
.hero-media video,
.foot-sky img,
.foot-sky video,
.hcard-media img,
.chapter-visual img,
.art img {
  filter: grayscale(1) sepia(1) hue-rotate(-14deg) saturate(1.65) brightness(0.9) contrast(1.06);
}
/* CSS-background art can't take filter on the element (it would hit the
   text children) and background-blend-mode barely bites at overlay alphas —
   so the image moves to a ::before layer that CAN be filtered. */
.page-hero {
  isolation: isolate;
  background: linear-gradient(180deg, rgba(5, 6, 11, 0.72) 0%, rgba(5, 6, 11, 0.35) 55%, var(--bg) 100%);
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: url("art/hero-b.webp") center 32% / cover no-repeat;
  filter: grayscale(1) sepia(1) hue-rotate(-14deg) saturate(1.6) brightness(0.78);
}
footer {
  background: linear-gradient(180deg, var(--bg) 0%, rgba(5, 6, 11, 0.55) 45%, rgba(5, 6, 11, 0.1) 100%);
}
footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("art/horizon-b.webp") center bottom / cover no-repeat;
  filter: grayscale(1) sepia(1) hue-rotate(-14deg) saturate(1.6) brightness(0.86);
}
footer > * {
  position: relative;
  z-index: 1;
}
.page-hero .grad-text {
  background: none;
  -webkit-text-fill-color: var(--ink);
  color: var(--ink);
}
section {
  scroll-margin-top: 96px;
}

/* Legal documents read as documents, not manifestos: the display-scale
   .prose voice (about page) was shouting 34px semibold at contract text.
   Frozen TEXT untouched — this is presentation only. */
.legal .prose p {
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.75;
  letter-spacing: 0;
  font-weight: 420;
  color: var(--muted);
  max-width: 68ch;
}
.legal .prose p strong,
.legal .prose p b {
  color: var(--ink);
}
.legal .prose p + p {
  margin-top: 1.15rem;
}
.legal h2 {
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  margin-top: 2.6rem;
}

/* ============ custom plan builder (pricing, ported 3 Aug) ============ */
#builder .eyebrow { display:block; margin-bottom: 1rem; }
.builder { margin-top: 2rem; border-top: 1px solid var(--line); max-width: 760px; }
.b-row { display:grid; grid-template-columns: minmax(0,1fr) auto; align-items:center;
  gap:.4rem 1.2rem; padding:1.05rem 0; border-bottom:1px solid var(--line-soft); }
.b-row label b { font-weight:600; color:var(--ink); }
.b-help { display:block; color:var(--faint); font-size:.86rem; margin-top:.15rem; }
.b-vol output { font-family:var(--display); font-size:1.9rem; font-variant-numeric:tabular-nums; }
.b-vol input[type="range"] { grid-column:1/-1; width:100%; accent-color:#e8722a; height:28px; }
.b-row input[type="checkbox"] { width:1.35rem; height:1.35rem; accent-color:#e8722a; }
.b-row select { background:var(--bg-2); color:var(--ink); border:1px solid var(--line);
  border-radius:10px; padding:.45rem .7rem; font:inherit; }
.b-total { display:flex; align-items:center; gap:1.4rem; flex-wrap:wrap; padding-top:1.6rem; }
.b-price { font-family:var(--display); font-weight:600; font-size:clamp(2.4rem,5vw,3.4rem);
  font-variant-numeric:tabular-nums; color:var(--gold); }
.b-per { color:var(--faint); margin-left:.35rem; }
.b-note { color:var(--muted); font-size:.95rem; flex:1; min-width:12ch; }

/* Large/XL browser fonts reflow layouts, which strands scroll-linked reveals
   below full opacity mid-viewport. At font-xl content simply shows. */
html.font-xl .reveal,
html.font-xl .reveal.d1,
html.font-xl .reveal.d2,
html.font-xl .reveal.d3 {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}