/* ============================================================
   CoveredOps — Marketing Site v3 "Fable"
   Design system: near-black, metallic gold, Satoshi.
   Product-preview (app mock) styles live in app-preview.css.
   ============================================================ */

@font-face {
  font-family: "Satoshi";
  src: url("./assets/fonts/Satoshi-Variable.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #050506;
  --ink: #0a0a0b;
  --near-black: #0c0c0d;
  --charcoal: #151516;
  --panel: #1f2020;
  --panel-2: #272828;
  --line: rgba(255, 255, 255, 0.12);
  --line-soft: rgba(255, 255, 255, 0.08);
  --white: #f6f4ef;
  --muted: #b8b3aa;
  --quiet: #817a70;
  --gold: #c49a5a;
  --gold-2: #d8b16d;
  --gold-3: #f1d28d;
  --blue: #55c0d7;
  --green: #79d58e;
  --red: #ef7c74;
  --orange: #ed9b42;
  --max: 1440px;
  --content: 1240px;
  --radius: 8px;
  --radius-lg: 18px;
  --font: "Satoshi", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.22, 0.7, 0.2, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 100px;
}

body {
  margin: 0;
  color: var(--white);
  background: var(--ink);
  font-family: var(--font);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Ambient light + fine grid, fixed behind everything */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(1100px 520px at 78% -6%, rgba(196, 154, 90, 0.14), transparent 70%),
    radial-gradient(900px 600px at -10% 30%, rgba(196, 154, 90, 0.05), transparent 65%),
    linear-gradient(180deg, #09090a 0%, var(--ink) 40%, #060607 100%);
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px);
  background-size: 84px 84px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 60%, rgba(0, 0, 0, 0.7));
}

h1, h2, h3 {
  margin: 0;
  font-weight: 840;
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
}

p {
  margin: 0;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.skip-link {
  position: absolute;
  top: -48px;
  left: 16px;
  z-index: 200;
  padding: 10px 16px;
  border-radius: 8px;
  background: var(--gold);
  color: #141210;
  font-weight: 800;
  transition: top 0.2s var(--ease);
}

.skip-link:focus {
  top: 12px;
}

::selection {
  background: rgba(196, 154, 90, 0.35);
  color: var(--white);
}

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

/* Wired "Covered" + white "Ops" in the site lockup — the curtain's outline
   identity, miniaturized. (App-preview sidebar brand stays solid gold,
   matching the app.) */
.brand-copy strong .wire,
.mini-brand strong .wire {
  color: transparent;
  -webkit-text-stroke: 1px rgba(216, 177, 109, 0.82);
}

.brand-copy strong span:not(.wire),
.mini-brand strong span:not(.wire) {
  color: var(--white);
}

/* Single-line nav lockup — no badge line, so the wordmark can breathe. */
.site-header .brand-copy strong {
  font-size: 27px;
}

/* ------------------------------------------------------------
   Shared section scaffolding
   ------------------------------------------------------------ */

section {
  position: relative;
  padding: 108px 32px;
}

.sec-inner {
  max-width: var(--content);
  margin: 0 auto;
}

.kicker {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  color: var(--gold-2);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.34em;
  text-transform: uppercase;
}

.kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.kicker.center {
  justify-content: center;
}

.kicker.center::after {
  content: "";
  width: 28px;
  height: 1px;
  background: linear-gradient(270deg, var(--gold), transparent);
}

.sec-title {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
}

.sec-title .gold {
  color: var(--gold-2);
}

.sec-lede {
  max-width: 58ch;
  margin-top: 20px;
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.65;
}

.sec-head.center {
  text-align: center;
}

.sec-head.center .sec-lede {
  margin-inline: auto;
}

/* ------------------------------------------------------------
   Buttons
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 0 28px;
  border: 1px solid transparent;
  border-radius: 10px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 820;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease), background 0.25s var(--ease);
}

.btn.primary {
  border-color: rgba(241, 210, 141, 0.75);
  background: linear-gradient(180deg, var(--gold-3), var(--gold));
  color: #141210;
  box-shadow: 0 10px 30px -12px rgba(196, 154, 90, 0.55);
}

.btn.primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px -14px rgba(196, 154, 90, 0.7);
}

.btn.ghost {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.02);
  color: var(--white);
}

.btn.ghost:hover {
  border-color: rgba(196, 154, 90, 0.6);
  color: var(--gold-3);
  transform: translateY(-2px);
}

/* ------------------------------------------------------------
   Masthead
   ------------------------------------------------------------ */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 84px;
  padding: 0 32px;
  border-bottom: 1px solid transparent;
  transition: background 0.35s var(--ease), border-color 0.35s var(--ease), min-height 0.35s var(--ease);
}

.site-header.is-scrolled {
  min-height: 70px;
  border-bottom-color: var(--line-soft);
  background: rgba(9, 9, 10, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}

.site-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  gap: 34px;
}

.site-nav a {
  position: relative;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
  transition: color 0.2s var(--ease);
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 1px;
  background: var(--gold-2);
  transition: right 0.3s var(--ease);
}

.site-nav a:hover {
  color: var(--white);
}

.site-nav a:hover::after {
  right: 0;
}

.header-action {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid rgba(196, 154, 90, 0.55);
  border-radius: 9px;
  color: var(--gold-3);
  font-size: 14px;
  font-weight: 800;
  transition: background 0.25s var(--ease), color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.header-action:hover {
  background: linear-gradient(180deg, var(--gold-3), var(--gold));
  color: #141210;
  box-shadow: 0 10px 26px -12px rgba(196, 154, 90, 0.6);
}

/* ------------------------------------------------------------
   Hero
   ------------------------------------------------------------ */

.hero {
  padding-top: 116px;
  padding-bottom: 88px;
}

.hero-inner {
  display: grid;
  justify-items: center;
  row-gap: 44px;
  max-width: var(--content);
  margin: 0 auto;
  width: 100%;
  text-align: center;
}

.hero-head {
  display: grid;
  justify-items: center;
}

.hero-copy {
  display: grid;
  justify-items: center;
}

.hero h1 {
  display: grid;
  margin: 0;
  font-size: clamp(3.1rem, 6.6vw, 6rem);
  font-weight: 870;
  letter-spacing: -0.035em;
  line-height: 0.99;
}

.gold-shimmer {
  background: linear-gradient(100deg, var(--gold) 8%, var(--gold-3) 34%, #fff7e0 50%, var(--gold-3) 64%, var(--gold) 90%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: shimmer 7s var(--ease) infinite;
}

@keyframes shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.hero-lede {
  max-width: 54ch;
  color: var(--muted);
  font-size: clamp(1.05rem, 1.4vw, 1.24rem);
  line-height: 1.65;
}

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 38px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: var(--quiet);
  font-size: 14px;
  font-weight: 640;
}

.hero-proof li {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hero-proof li::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold);
  box-shadow: 0 0 12px rgba(196, 154, 90, 0.8);
}

/* Hero visual — the live job ticket. One-shot choreography: copy rises in,
   the ticket fades up, then a day's worth of job events tick themselves off
   with gold checks while the collected total counts up and settles at $950. */

.hero-glass {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  max-width: 530px;
  justify-self: center;
}

.hero-glass::before {
  content: "";
  position: absolute;
  inset: -14% -20%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(58% 52% at 52% 44%, rgba(196, 154, 90, 0.13), transparent 72%);
}

@keyframes glass-in {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes rise-in {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes drop-in {
  from { opacity: 0; transform: translateY(-26px); }
  to { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   Brand curtain — the site opens on the giant outlined wordmark.
   Scrolling fills it with gold ink, then it scales up and hands
   off to the hero. Driven by --p (0..1) set from scroll position.
   ------------------------------------------------------------ */

.curtain {
  position: relative;
  height: 100svh;
  padding: 0;
}

html.js .curtain {
  height: 145svh;
}

.curtain-sticky {
  position: sticky;
  top: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 30px;
  height: 100svh;
  overflow: hidden;
}

.curtain-sticky::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(92vw, 1150px);
  height: min(56vh, 520px);
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(196, 154, 90, 0.11), transparent 70%);
  pointer-events: none;
}

.curtain-inner {
  display: grid;
  justify-items: center;
  gap: 24px;
  opacity: clamp(0, calc((0.96 - var(--p, 0)) / 0.38), 1);
  transform: scale(calc(1 + var(--p, 0) * 0.4)) translateY(calc(var(--p, 0) * -6svh));
}

.curtain-mark {
  position: relative;
  font-size: min(16.5vw, 34svh);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.9;
  white-space: nowrap;
  user-select: none;
  animation: rise-in 1.1s var(--ease) 0.1s both;
}

.curtain-tag {
  animation: rise-in 0.9s var(--ease) 0.4s both;
}

.curtain-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(196, 154, 90, 0.42);
}

/* Recurring light sweep across the resting outline — a tease of the ink
   the scroll delivers. Same background-position technique as the hero's
   gold shimmer (proven to paint through clipped text). */
.curtain-sheen {
  position: absolute;
  /* Extends below the 0.9-line-height box so descender paint isn't cropped */
  inset: 0 0 -0.2em 0;
  color: transparent;
  background: linear-gradient(100deg, transparent 34%, rgba(216, 177, 109, 0.75) 47%, rgba(241, 210, 141, 0.9) 50%, rgba(216, 177, 109, 0.75) 53%, transparent 66%);
  background-size: 220% 100%;
  background-repeat: no-repeat;
  -webkit-background-clip: text;
  background-clip: text;
  animation: sheen-pass 6s ease-in-out 1.4s infinite;
}

@keyframes sheen-pass {
  0% { background-position: -160% 0; }
  55%, 100% { background-position: 160% 0; }
}

.curtain-fill {
  position: absolute;
  /* Extends below the 0.9-line-height box so descender paint isn't cropped */
  inset: 0 0 -0.2em 0;
  color: transparent;
  background: linear-gradient(100deg, var(--gold) 10%, var(--gold-3) 45%, #fff3da 55%, var(--gold-2) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  /* --fill-right is a plain "NN%" precomputed in script.js. iOS Safari
     fails to parse clamp() nested inside inset() (clip-path becomes none
     and the fill painted fully gold at rest) — never reintroduce calc or
     clamp inside this clip-path. */
  clip-path: inset(-6% var(--fill-right, 100%) -6% 0);
  /* Own compositor layer — keeps WebKit repainting the clipped text as --p moves */
  transform: translateZ(0);
}

/* The category line rides a wrapper that drops away with scroll — it exits
   downward and "arrives" as the hero kicker (a relay match-cut). It lives
   OUTSIDE .curtain-inner so it outlives the wordmark's fade: the name
   dissolves behind it while the line keeps traveling, vanishing only at
   release. The wrapper carries the scroll transform because the tag's
   entrance animation pins its own transform via fill-mode. */
.curtain-drop {
  /* The line drops while the hero kicker rises to meet it; script.js sets
     --handoff (0..1) from their live proximity, and they swap where they
     physically cross — correct on every screen by construction. */
  transform: translateY(calc(var(--p, 0) * 30svh));
  /* Plain JS-computed value — iOS drops clamp() nested inside calc()
     (the double-line bug); never reintroduce nested clamp here. */
  opacity: var(--drop-alpha, 1);
}

.curtain-tag {
  color: var(--gold-2);
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  text-align: center;
}

.curtain-cue {
  width: 14px;
  height: 14px;
  margin-top: 6px;
  border-right: 2px solid rgba(216, 177, 109, 0.6);
  border-bottom: 2px solid rgba(216, 177, 109, 0.6);
  transform: rotate(45deg);
  /* Retires as soon as scrolling starts, before the dropping category
     line passes through its position. Bob animates transform only so
     this opacity stays scroll-driven. */
  opacity: clamp(0, calc(0.9 - var(--p, 0) * 4), 0.9);
  animation: curtain-cue-bob 2.4s var(--ease) infinite;
}

@keyframes curtain-cue-bob {
  0%, 100% { transform: rotate(45deg) translate(0, 0); }
  50% { transform: rotate(45deg) translate(4px, 4px); }
}

/* ------------------------------------------------------------
   Hero + ticket choreography, gated on the hero entering view
   (it sits below the curtain now). No-JS and reduced-motion
   visitors get the finished state with no animation.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  /* Pull the hero up under the curtain's released (fully faded) tail so it
     rises into frame while the category line makes its final fade — kills
     the dead viewport between release and arrival. */
  html.js .hero {
    margin-top: -60svh;
  }

  html.js .hero:not(.in) .hero-head h1,
  html.js .hero:not(.in) .hero-lede,
  html.js .hero:not(.in) .hero-cta,
  html.js .hero:not(.in) .hero-proof,
  html.js .hero-glass:not(.in),
  html.js .hero-glass:not(.in) .ticket-feed li,
  html.js .hero-glass:not(.in) .ticket-feed li b,
  html.js .hero-glass:not(.in) .ticket-total {
    opacity: 0;
  }

  /* The hero kicker has no entrance of its own — it takes over from the
     dropping curtain line at the moment they physically meet (--handoff
     is proximity-driven). Its appearance IS the landing. */
  html.js .hero-head .kicker {
    opacity: var(--handoff, 1);
  }

  .hero.in .hero-head h1,
  .hero.in .hero-lede,
  .hero.in .hero-cta,
  .hero.in .hero-proof {
    animation: rise-in 0.9s var(--ease) both;
  }

  .hero.in .hero-head h1 { animation-delay: 0.16s; }
  .hero.in .hero-lede { animation-delay: 0.3s; }
  .hero.in .hero-cta { animation-delay: 0.44s; }
  .hero.in .hero-proof { animation-delay: 0.58s; }

  .hero-glass.in {
    animation: glass-in 0.9s var(--ease) both;
  }

  .hero-glass.in .ticket-feed li {
    animation: row-in 0.55s var(--ease) both;
    animation-delay: calc(var(--lead) + var(--n) * 0.42s);
  }

  .hero-glass.in .ticket-feed li b {
    animation: check-pop 0.45s var(--ease) both;
    animation-delay: calc(var(--lead) + var(--n) * 0.42s + 0.22s);
  }

  .hero-glass.in .ticket-total {
    animation: row-in 0.6s var(--ease) both;
    animation-delay: calc(var(--lead) + 2.35s);
  }
}

.ops-ticket {
  --lead: 0.65s;
  position: relative;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(23, 23, 24, 0.95), rgba(14, 14, 15, 0.97));
  box-shadow:
    0 50px 100px -40px rgba(0, 0, 0, 0.85),
    0 -18px 60px -40px rgba(196, 154, 90, 0.35);
  overflow: hidden;
  cursor: pointer;
}

.ops-ticket::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 177, 109, 0.8), transparent);
}

.ticket-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line-soft);
}

.live-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--green);
  box-shadow: 0 0 10px rgba(121, 213, 142, 0.8);
  animation: live-pulse 2.4s ease-in-out infinite;
}

@keyframes live-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.ticket-head strong {
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.ticket-head strong em {
  color: var(--quiet);
  font-style: normal;
  font-weight: 650;
}

.ticket-ref {
  margin-left: auto;
  color: var(--quiet);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.ticket-feed {
  list-style: none;
  margin: 0;
  padding: 6px 20px 4px;
}

.ticket-feed li {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  padding: 11.5px 0;
  border-bottom: 1px dashed var(--line-soft);
}

.ticket-feed li:last-child {
  border-bottom: 0;
}

.ticket-feed li > span {
  color: var(--quiet);
  font-size: 12px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
}

.ticket-feed li p {
  color: var(--white);
  font-size: 14.5px;
  font-weight: 780;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.ticket-feed li p em {
  display: block;
  margin-top: 1px;
  color: var(--muted);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 620;
}

.ticket-feed li b {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(196, 154, 90, 0.65);
  border-radius: 999px;
  background: rgba(196, 154, 90, 0.12);
  color: var(--gold-3);
  font-size: 10.5px;
  font-weight: 800;
}

@keyframes row-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes check-pop {
  0% { opacity: 0; transform: scale(0.3); }
  70% { opacity: 1; transform: scale(1.18); }
  100% { opacity: 1; transform: scale(1); }
}

.ticket-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 20px 17px;
  border-top: 1px solid rgba(196, 154, 90, 0.32);
  background: rgba(196, 154, 90, 0.055);
}

.ticket-total span {
  display: block;
  color: var(--quiet);
  font-size: 10.5px;
  font-weight: 820;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.ticket-stamp {
  display: block;
  margin-top: 3px;
  color: var(--green);
  font-size: 13px;
  font-weight: 760;
  font-style: normal;
}

.ticket-total strong {
  color: var(--gold-3);
  font-size: clamp(26px, 2.4vw, 32px);
  font-weight: 870;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.glass-caption {
  justify-self: center;
  color: var(--quiet);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.glass-caption b {
  color: var(--gold-2);
  font-weight: 800;
}

/* Scroll cue — a gold chevron, unmistakably intentional */

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 36px;
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(216, 177, 109, 0.6);
  border-bottom: 2px solid rgba(216, 177, 109, 0.6);
  transform: translateX(-50%) rotate(45deg);
  animation: cue-bob 2.4s var(--ease) infinite;
}

@keyframes cue-bob {
  0%, 100% { transform: translateX(-50%) rotate(45deg) translate(0, 0); opacity: 0.4; }
  50% { transform: translateX(-50%) rotate(45deg) translate(4px, 4px); opacity: 0.95; }
}

/* ------------------------------------------------------------
   Workflow ticker
   ------------------------------------------------------------ */

.ticker {
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  white-space: nowrap;
}

.ticker-track {
  display: inline-flex;
  align-items: center;
  gap: 52px;
  padding-right: 52px;
  width: max-content;
  animation: ticker-scroll 44s linear infinite;
}

.ticker span {
  font-size: clamp(26px, 3.6vw, 46px);
  font-weight: 860;
  letter-spacing: 0.04em;
  color: transparent;
  /* The brand wire's gold, at whisper strength — full gold is reserved
     for the name itself (curtain, nav, watermark); the ticker echoes it. */
  -webkit-text-stroke: 1px rgba(216, 177, 109, 0.34);
}

.ticker i {
  font-style: normal;
  color: var(--gold);
  font-size: clamp(16px, 2vw, 24px);
}

@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ------------------------------------------------------------
   Product stage
   ------------------------------------------------------------ */

.product {
  padding-top: 96px;
}

.product .sec-head {
  margin-bottom: 54px;
}

.product-stage {
  perspective: 1700px;
  max-width: var(--content);
  margin: 0 auto;
}

.product-stage .app-showcase {
  position: relative;
  border-radius: 14px;
  box-shadow:
    0 60px 140px -50px rgba(0, 0, 0, 0.9),
    0 0 0 1px var(--line-soft),
    0 -24px 80px -50px rgba(196, 154, 90, 0.35);
}

/* Product apex — on desktop the section pins for a beat while the app rises
   from small-and-tilted to filling the frame straight-on. Driven by --p. */
@media (min-width: 921px) and (prefers-reduced-motion: no-preference) {
  html.js .product {
    height: 235svh;
    padding: 0;
  }

  html.js .product .product-sticky {
    position: sticky;
    top: 0;
    display: grid;
    align-content: center;
    height: 100svh;
    padding: 100px 32px 28px;
    overflow: hidden;
  }

  /* --rise and --lift are plain JS-computed numbers (script.js) — WebKit
     drops clamp()/max() nested inside calc(), so no nesting lives here. */
  html.js .product .product-sticky .sec-head {
    margin-bottom: 34px;
    opacity: clamp(0, calc(1 - var(--lift, 0) * 3.2), 1);
    transform: translateY(calc(var(--lift, 0) * -44px));
  }

  html.js .product .app-showcase {
    /* --fit (JS-computed) shrinks the app so head + app always fit the
       viewport; the stage's layout height is synced to it, so the centered
       sticky never overflows and the heading can never clip out the top. */
    transform-origin: top center;
    transform:
      rotateX(calc((1 - var(--rise, 1)) * 12deg))
      scale(calc((0.86 + var(--rise, 1) * 0.14) * var(--fit, 1)))
      translateY(calc((1 - var(--rise, 1)) * 4svh))
      translateY(calc(var(--lift, 0) * -56px));
  }

  html.js .product .product-sticky .stage-hint {
    opacity: clamp(0, calc((var(--p, 1) - 0.72) * 4), 1);
    transform: translateY(calc(var(--lift, 0) * -60px));
  }
}

/* Short laptop screens: tighter top padding gives the fitted app more room. */
@media (min-width: 921px) and (prefers-reduced-motion: no-preference) and (max-height: 860px) {
  html.js .product .product-sticky {
    padding-top: 82px;
  }
}

.product-stage .app-showcase::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 177, 109, 0.75), transparent);
  z-index: 5;
}

.stage-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
  color: var(--quiet);
  font-size: 14px;
  font-weight: 640;
}

.stage-hint::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--gold-2);
  animation: hint-pulse 2.2s ease-in-out infinite;
}

@keyframes hint-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(216, 177, 109, 0.5); }
  50% { box-shadow: 0 0 0 7px rgba(216, 177, 109, 0); }
}

/* ------------------------------------------------------------
   Chaos → Covered
   ------------------------------------------------------------ */

.chaos .sec-lede {
  margin-bottom: 60px;
}

.chaos-flow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px minmax(0, 1.05fr);
  gap: 28px;
  align-items: center;
  max-width: var(--content);
  margin: 0 auto;
}

.chaos-cluster {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.loop-card {
  position: relative;
  padding: 24px 22px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  transition: transform 0.4s var(--ease), border-color 0.4s var(--ease);
}

.loop-card:nth-child(1) { transform: rotate(-2.2deg); }
.loop-card:nth-child(2) { transform: rotate(1.6deg) translateY(10px); }
.loop-card:nth-child(3) { transform: rotate(1.2deg) translateY(-4px); }
.loop-card:nth-child(4) { transform: rotate(-1.8deg) translateY(8px); }

.loop-card:hover {
  transform: rotate(0deg) translateY(0);
  border-color: var(--line);
}

.loop-card small {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 12px;
  color: var(--red);
  font-size: 10.5px;
  font-weight: 820;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.loop-card small::before {
  content: "";
  width: 6px;
  height: 6px;
  border: 1.5px solid var(--red);
  border-radius: 999px;
}

.loop-card h3 {
  margin-bottom: 8px;
  font-size: 19px;
  letter-spacing: -0.015em;
}

.loop-card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.55;
}

.chaos-arrow {
  position: relative;
  height: 2px;
  background-image: linear-gradient(90deg, var(--gold) 55%, transparent 55%);
  background-size: 14px 2px;
  animation: dash-flow 1.4s linear infinite;
}

.chaos-arrow::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: translateY(-50%) rotate(45deg);
}

@keyframes dash-flow {
  from { background-position: 0 0; }
  to { background-position: 14px 0; }
}

.covered-panel {
  position: relative;
  padding: 34px 32px;
  border: 1px solid rgba(196, 154, 90, 0.5);
  border-radius: 14px;
  background:
    radial-gradient(120% 130% at 50% -20%, rgba(196, 154, 90, 0.12), transparent 60%),
    linear-gradient(180deg, #141414, #101011);
  box-shadow: 0 40px 90px -50px rgba(196, 154, 90, 0.35);
}

.covered-panel .mini-brand {
  margin-bottom: 18px;
}

.covered-panel h3 {
  margin-bottom: 12px;
  font-size: 24px;
}

.covered-panel > p {
  margin-bottom: 24px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6;
}

.closure-list {
  display: grid;
  gap: 12px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.closure-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--white);
  font-size: 14.5px;
  font-weight: 700;
}

.closure-list li::before {
  content: "✓";
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(196, 154, 90, 0.65);
  background: rgba(196, 154, 90, 0.12);
  color: var(--gold-3);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
}

.covered-line {
  display: block;
  padding-top: 20px;
  border-top: 1px solid var(--line-soft);
  color: var(--gold-3);
  font-size: 15px;
  font-weight: 800;
}

/* ------------------------------------------------------------
   Workflow timeline
   ------------------------------------------------------------ */

.flow .sec-head {
  margin-bottom: 64px;
}

.flow-rail {
  position: relative;
  display: grid;
  gap: 0;
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.flow-step {
  position: relative;
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr) 280px;
  gap: 30px;
  padding: 34px 0 42px;
}

.flow-step::before {
  content: "";
  position: absolute;
  left: 149px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(196, 154, 90, 0.45), rgba(196, 154, 90, 0.12));
}

.flow-step:last-child::before {
  background: linear-gradient(180deg, rgba(196, 154, 90, 0.45), transparent 85%);
}

.flow-step::after {
  content: "";
  position: absolute;
  left: 144.5px;
  top: 46px;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--gold-2);
  box-shadow: 0 0 0 5px rgba(196, 154, 90, 0.14), 0 0 18px rgba(196, 154, 90, 0.6);
}

.flow-num {
  align-self: start;
  padding-right: 34px;
  font-size: clamp(44px, 5vw, 64px);
  font-weight: 880;
  letter-spacing: -0.03em;
  line-height: 1;
  text-align: right;
  color: transparent;
  -webkit-text-stroke: 1px rgba(196, 154, 90, 0.55);
}

.flow-body h3 {
  margin-bottom: 6px;
  font-size: clamp(22px, 2.4vw, 28px);
}

.flow-tag {
  margin-bottom: 16px;
  color: var(--gold-2);
  font-size: 15px;
  font-weight: 720;
}

.flow-body ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--muted);
  font-size: 15px;
}

.flow-body li {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.flow-body li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 1.5px;
  transform: translateY(-3.5px);
  background: rgba(196, 154, 90, 0.65);
}

/* Rail ignition — as each step enters, its ghost number fills with gold
   and its node pulses once. */

.flow-num {
  transition: color 0.9s var(--ease) 0.25s;
}

.flow-step.in .flow-num {
  color: rgba(216, 177, 109, 0.9);
}

.flow-step.in::after {
  animation: node-pop 0.7s var(--ease) 0.3s both;
}

@keyframes node-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.65); box-shadow: 0 0 0 8px rgba(196, 154, 90, 0.18), 0 0 26px rgba(196, 154, 90, 0.9); }
  100% { transform: scale(1); }
}

/* Step artifacts — a small fragment of the product beside each stage,
   speaking the same visual language as the hero job ticket. */

.flow-art {
  align-self: center;
}

.art-card {
  display: grid;
  gap: 7px;
  padding: 16px 18px;
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012));
  text-align: left;
}

.art-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.art-card strong {
  color: var(--white);
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.art-card b {
  color: var(--white);
  font-size: 13.5px;
  font-weight: 800;
}

.art-card b.gold {
  color: var(--gold-3);
  font-size: 16px;
}

.art-card span {
  color: var(--muted);
  font-size: 12.5px;
}

.art-card em {
  color: var(--quiet);
  font-style: normal;
  font-size: 11.5px;
  font-weight: 720;
}

.art-card em.green {
  color: var(--green);
}

.art-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.art-steps span {
  padding: 5px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  color: var(--quiet);
  font-size: 10.5px;
  font-weight: 780;
}

.art-steps span.done {
  border-color: rgba(196, 154, 90, 0.45);
  color: var(--gold-2);
  background: rgba(196, 154, 90, 0.08);
}

.art-steps span.now {
  border-color: transparent;
  color: #141210;
  background: linear-gradient(180deg, var(--gold-3), var(--gold));
}

.art-sig {
  width: 128px;
  height: 39px;
}

.art-sig path {
  stroke: var(--gold-2);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

html.js .art-sig path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.2s var(--ease) 0.45s;
}

html.js .flow-step.in .art-sig path {
  stroke-dashoffset: 0;
}

/* ------------------------------------------------------------
   Money moments — bento
   ------------------------------------------------------------ */

.moments .sec-head {
  margin-bottom: 54px;
}

.bento {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: var(--content);
  margin: 0 auto;
}

.bento-card {
  position: relative;
  padding: 30px 28px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.01));
  overflow: hidden;
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease), box-shadow 0.35s var(--ease);
}

.bento-card:hover {
  transform: translateY(-5px);
  border-color: rgba(196, 154, 90, 0.4);
  box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.9);
}

.bento-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--accent, var(--gold)), transparent 70%);
  opacity: 0.85;
}

.bento-card.wide {
  grid-column: span 2;
}

.bento-card span {
  display: block;
  margin-bottom: 12px;
  color: var(--accent, var(--gold-2));
  font-size: 12px;
  font-weight: 820;
  letter-spacing: 0.26em;
  text-transform: uppercase;
}

.bento-card strong {
  display: block;
  max-width: 40ch;
  color: var(--white);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 760;
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.bento-card.accent-blue { --accent: var(--blue); }
.bento-card.accent-green { --accent: var(--green); }
.bento-card.accent-orange { --accent: var(--orange); }
.bento-card.accent-red { --accent: var(--red); }
.bento-card.accent-white { --accent: rgba(246, 244, 239, 0.75); }

.bento-card.cta {
  display: block;
  border-color: rgba(196, 154, 90, 0.5);
  background:
    radial-gradient(120% 140% at 50% -30%, rgba(196, 154, 90, 0.14), transparent 60%),
    linear-gradient(180deg, #161513, #100f0e);
}

.bento-card.cta strong {
  color: var(--gold-3);
}

.bento-card.cta:hover {
  border-color: var(--gold-2);
  box-shadow: 0 30px 60px -40px rgba(196, 154, 90, 0.5);
}

/* ------------------------------------------------------------
   Founder
   ------------------------------------------------------------ */

.founder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.85fr);
  gap: clamp(40px, 6vw, 90px);
  align-items: center;
  max-width: var(--content);
  margin: 0 auto;
}

.founder-copy p:not(.kicker) {
  max-width: 60ch;
  margin-top: 18px;
  color: var(--muted);
  font-size: 1.06rem;
  line-height: 1.7;
}

.founder-copy h2 {
  margin-top: 4px;
}

.founder-copy blockquote {
  position: relative;
  margin: 40px 0 0;
  padding: 8px 0 0 34px;
  color: var(--gold-3);
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 820;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.founder-copy blockquote::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 4px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--gold-3), rgba(196, 154, 90, 0.25));
}

.founder-visual {
  position: relative;
  min-height: 460px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(75% 60% at 50% 18%, rgba(196, 154, 90, 0.16), transparent 68%),
    linear-gradient(180deg, #121213, #0b0b0c);
  overflow: hidden;
}

.founder-visual::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(216, 177, 109, 0.5), transparent);
}

.founder-visual .cmark-art {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(280px, 62%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 30px 50px rgba(0, 0, 0, 0.6));
  animation: art-float 9s ease-in-out infinite;
}

@keyframes art-float {
  0%, 100% { transform: translate(-50%, -52%); }
  50% { transform: translate(-50%, -47%); }
}

/* ------------------------------------------------------------
   Statement band
   ------------------------------------------------------------ */

.band {
  padding: 84px 32px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}

.band-line {
  font-size: clamp(1.9rem, 4.6vw, 3.6rem);
  font-weight: 860;
  letter-spacing: -0.03em;
  line-height: 1.12;
}

.band-line .gold {
  color: var(--gold-2);
}

/* ------------------------------------------------------------
   Fit
   ------------------------------------------------------------ */

.fit-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 24px;
  max-width: var(--content);
  margin: 0 auto 48px;
}

.fit-head a {
  color: var(--gold-3);
  font-weight: 800;
  font-size: 15px;
  border-bottom: 1px solid rgba(196, 154, 90, 0.4);
  padding-bottom: 3px;
  transition: border-color 0.25s var(--ease);
}

.fit-head a:hover {
  border-color: var(--gold-3);
}

.fit-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  max-width: var(--content);
  margin: 0 auto;
}

.fit-grid article {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 28px 24px;
  border: 1px solid var(--line-soft);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  transition: transform 0.35s var(--ease), border-color 0.35s var(--ease);
}

.fit-grid article:hover {
  transform: translateY(-5px);
  border-color: rgba(196, 154, 90, 0.4);
}

.fit-grid h3 {
  font-size: 19px;
  letter-spacing: -0.015em;
}

.fit-grid p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
}

.fit-grid strong {
  margin-top: 6px;
  color: var(--gold-2);
  font-size: 14px;
  font-weight: 800;
}

.truth-box {
  display: grid;
  gap: 6px;
  max-width: var(--content);
  margin: 26px auto 0;
  padding: 22px 26px;
  border: 1px solid rgba(196, 154, 90, 0.35);
  border-left: 3px solid var(--gold);
  border-radius: 12px;
  background: rgba(196, 154, 90, 0.05);
}

.truth-box strong {
  color: var(--gold-3);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.truth-box span {
  color: var(--muted);
  font-size: 15px;
}

/* ------------------------------------------------------------
   FAQ
   ------------------------------------------------------------ */

.faq .sec-head {
  margin-bottom: 44px;
}

.faq-list {
  display: grid;
  gap: 12px;
  max-width: 860px;
  margin: 0 auto;
}

.faq-list details {
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  overflow: hidden;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}

.faq-list details[open] {
  border-color: rgba(196, 154, 90, 0.45);
  background: rgba(196, 154, 90, 0.045);
}

.faq-list summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 19px 22px;
  color: var(--white);
  font-size: 16.5px;
  font-weight: 760;
  letter-spacing: -0.01em;
  cursor: pointer;
  list-style: none;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--gold-2);
  font-weight: 500;
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}

.faq-list details[open] summary::after {
  content: "–";
  transform: rotate(180deg);
  border-color: rgba(196, 154, 90, 0.5);
}

.faq-list details p {
  max-width: 64ch;
  padding: 0 22px 22px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ------------------------------------------------------------
   Early access
   ------------------------------------------------------------ */

.access-card {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  max-width: var(--content);
  margin: 0 auto;
  padding: clamp(36px, 5vw, 64px);
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(196, 154, 90, 0.1), transparent 55%),
    linear-gradient(180deg, #131314, #0d0d0e);
  box-shadow: 0 60px 120px -60px rgba(0, 0, 0, 0.9);
}

.access-copy p:not(.kicker) {
  max-width: 46ch;
  margin-top: 18px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.access-points {
  display: grid;
  gap: 13px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
}

.access-points li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.access-points li::before {
  content: "✓";
  flex: none;
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(196, 154, 90, 0.65);
  border-radius: 5px;
  background: rgba(196, 154, 90, 0.12);
  color: var(--gold-3);
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
}

.access-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.field {
  display: grid;
  gap: 7px;
}

.field.full {
  grid-column: 1 / -1;
}

.field > span {
  color: var(--quiet);
  font-size: 11.5px;
  font-weight: 820;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0 14px;
  border: 1px solid var(--line-soft);
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.028);
  color: var(--white);
  font-family: var(--font);
  font-size: 15px;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease);
}

.field input,
.field select {
  min-height: 48px;
}

.field textarea {
  padding: 12px 14px;
  resize: vertical;
  min-height: 120px;
}

.field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 49%, var(--quiet) 49%, var(--quiet) 60%, transparent 60%), linear-gradient(135deg, transparent 49%, var(--quiet) 49%, var(--quiet) 60%, transparent 60%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size: 6px 6px;
  background-repeat: no-repeat;
}

.field input::placeholder,
.field textarea::placeholder {
  color: var(--quiet);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: rgba(216, 177, 109, 0.8);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 0 0 3px rgba(196, 154, 90, 0.16);
}

.access-form .btn {
  grid-column: 1 / -1;
  margin-top: 6px;
}

.form-note {
  grid-column: 1 / -1;
  color: var(--quiet);
  font-size: 13px;
  line-height: 1.6;
}

/* ------------------------------------------------------------
   Footer
   ------------------------------------------------------------ */

.site-footer {
  position: relative;
  padding: 72px 32px 0;
  border-top: 1px solid var(--line-soft);
  overflow: hidden;
}

.foot-top {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap: 40px;
  align-items: start;
  max-width: var(--content);
  margin: 0 auto;
}

.footer-brand {
  margin-bottom: 16px;
}

.foot-line {
  color: var(--gold-3);
  font-weight: 720;
}

.site-footer nav {
  display: flex;
  gap: 26px;
  color: var(--muted);
  font-size: 14.5px;
  font-weight: 700;
}

.site-footer nav a {
  transition: color 0.2s var(--ease);
}

.site-footer nav a:hover {
  color: var(--gold-3);
}

.foot-legal {
  display: block;
  max-width: var(--content);
  margin: 28px auto 0;
  color: var(--quiet);
  font-size: 13px;
}

.foot-mark {
  margin-top: 34px;
  font-size: clamp(52px, 15.5vw, 224px);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 0.76;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px rgba(196, 154, 90, 0.16);
  user-select: none;
  transform: translateY(0.08em);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 92%);
}

/* ------------------------------------------------------------
   Legal pages (terms.html / privacy.html)
   ------------------------------------------------------------ */

.legal {
  max-width: 760px;
  margin: 0 auto;
  padding: 150px 24px 88px;
  color: var(--muted);
  line-height: 1.72;
}

.legal h1 { color: var(--white); font-size: 32px; margin: 0 0 6px; letter-spacing: -0.01em; }
.legal .legal-updated { color: var(--quiet); font-size: 13px; margin: 0 0 36px; }
.legal section { margin: 0 0 22px; padding: 0; }
.legal h2 { color: var(--white); font-size: 16px; font-weight: 720; margin: 0 0 7px; }
.legal p { margin: 0; font-size: 15px; }
.legal a { color: var(--gold-3); }
.legal strong { color: var(--white); font-weight: 680; }

/* ------------------------------------------------------------
   Scroll reveals (JS-gated so no-JS visitors see everything)
   ------------------------------------------------------------ */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.85s var(--ease), transform 0.85s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms);
}

html.js [data-reveal].in {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------------------------------------------------
   Reduced motion
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .gold-shimmer,
  .ticket-feed li,
  .ticket-feed li b,
  .ticket-total,
  .live-dot,
  .hero-glass,
  .hero-head .kicker,
  .hero-head h1,
  .hero-lede,
  .hero-cta,
  .hero-proof,
  .scroll-cue,
  .curtain-cue,
  .ticker-track,
  .chaos-arrow,
  .stage-hint::before,
  .founder-visual .cmark-art {
    animation: none;
  }

  html.js .curtain {
    height: 100svh;
  }

  .curtain-mark,
  .curtain-tag {
    animation: none;
  }

  .curtain-sheen {
    animation: none;
    opacity: 0;
  }

  .flow-num {
    transition: none;
  }

  .flow-step.in::after {
    animation: none;
  }

  html.js .art-sig path {
    stroke-dashoffset: 0;
    transition: none;
  }

  .curtain-inner {
    opacity: 1;
    transform: none;
  }

  .curtain-drop {
    transform: none;
    opacity: 1;
  }

  .curtain-fill {
    /* Static end-state is the OUTLINE (the gold slab read as a bug) */
    opacity: 0;
  }

  html.js [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html.js .product-stage .app-showcase {
    transform: none;
    transition: none;
  }
}

/* No JavaScript: the same finished, motionless end-states as reduced
   motion — gold name filled, cascades settled, loops stopped. (The
   html.js-prefixed choreography above never applies without JS, so only
   the load-time animations and the JS-driven curtain fill need covering.) */
html:not(.js) .gold-shimmer,
html:not(.js) .ticket-feed li,
html:not(.js) .ticket-feed li b,
html:not(.js) .ticket-total,
html:not(.js) .live-dot,
html:not(.js) .hero-glass,
html:not(.js) .hero-head .kicker,
html:not(.js) .hero-head h1,
html:not(.js) .hero-lede,
html:not(.js) .hero-cta,
html:not(.js) .hero-proof,
html:not(.js) .scroll-cue,
html:not(.js) .curtain-cue,
html:not(.js) .ticker-track,
html:not(.js) .chaos-arrow,
html:not(.js) .stage-hint::before,
html:not(.js) .founder-visual .cmark-art,
html:not(.js) .curtain-mark,
html:not(.js) .curtain-tag {
  animation: none;
}

html:not(.js) .curtain-sheen {
  animation: none;
  opacity: 0;
}

html:not(.js) .curtain-inner {
  opacity: 1;
  transform: none;
}

html:not(.js) .curtain-drop {
  transform: none;
  opacity: 1;
}

html:not(.js) .curtain-fill {
  opacity: 0;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */

@media (max-width: 1180px) {
  .site-nav {
    display: none;
  }

  .hero {
    min-height: auto;
    padding-top: 130px;
  }

  .hero-inner {
    grid-template-columns: 1fr;
  }

  .hero-glass {
    max-width: 520px;
  }

  .scroll-cue {
    display: none;
  }

  .chaos-flow {
    grid-template-columns: 1fr;
    gap: 36px;
  }

  .chaos-arrow {
    width: 2px;
    height: 64px;
    justify-self: center;
    background-image: linear-gradient(180deg, var(--gold) 55%, transparent 55%);
    background-size: 2px 14px;
  }

  .chaos-arrow::after {
    right: auto;
    left: 50%;
    top: auto;
    bottom: -2px;
    transform: translateX(-50%) rotate(135deg);
  }

  .bento {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bento-card.wide,
  .bento-card.cta {
    grid-column: span 2;
  }

  .flow-art {
    display: none;
  }

  .flow-step {
    grid-template-columns: 150px minmax(0, 1fr);
  }

  .founder-grid {
    grid-template-columns: 1fr;
  }

  .founder-visual {
    min-height: 380px;
  }

  .fit-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .access-card {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 920px) {
  section {
    padding: 76px 20px;
  }

  .site-header {
    min-height: 74px;
    padding: 0 20px;
  }

  .header-action {
    min-height: 40px;
    padding: 0 14px;
    font-size: 13px;
  }

  .site-header .brand-copy strong {
    font-size: 23px;
  }

  .stage-hint {
    display: none;
  }

  .flow-step {
    grid-template-columns: 64px minmax(0, 1fr);
    gap: 22px;
  }

  .flow-step::before {
    left: 63px;
  }

  .flow-step::after {
    left: 58.5px;
  }

  .flow-num {
    padding-right: 18px;
    font-size: 34px;
  }

  .band {
    padding: 64px 20px;
  }
}

@media (max-width: 540px) {
  section {
    padding-inline: 16px;
  }

  .site-header {
    gap: 10px;
    min-height: 70px;
    padding: 10px 16px;
  }

  .hero {
    padding-top: 112px;
  }

  .hero h1 {
    font-size: clamp(42px, 11.5vw, 54px);
  }

  .hero-cta {
    width: 100%;
    flex-direction: column;
    gap: 12px;
  }

  .btn {
    width: 100%;
  }

  .ops-ticket {
    max-width: 100%;
  }

  .ticket-feed li {
    grid-template-columns: 54px minmax(0, 1fr) 20px;
    gap: 10px;
  }

  .ticket-feed li > span {
    font-size: 11px;
    white-space: nowrap;
  }

  .ticket-ref {
    display: none;
  }

  .chaos-cluster {
    grid-template-columns: 1fr;
  }

  .loop-card:nth-child(n) {
    transform: none;
  }

  .bento {
    grid-template-columns: 1fr;
  }

  .bento-card.wide,
  .bento-card.cta {
    grid-column: auto;
  }

  .fit-grid {
    grid-template-columns: 1fr;
  }

  .fit-head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  .access-card {
    padding: 26px 18px;
  }

  .access-form {
    grid-template-columns: 1fr;
  }

  .foot-top {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    flex-wrap: wrap;
  }
}