/* ============================================================
   CinemaShot — shared design system · "The Screening Room"
   Loaded by index.html, shop.html, success.html.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  --noir:        #1F0A10;  /* oxblood near-black — the darkened theater */
  --noir-deep:   #170709;  /* footer of gradients */
  --noir-2:      #2A0F16;  /* raised surface */
  --noir-3:      #33121B;  /* cards, upper stop */
  --velvet:      #4E1622;  /* curtain red — recommended ticket fill */
  --ink:         #46202A;  /* hairlines / borders */
  --ink-soft:    rgba(255,90,60,0.14);

  --verm:        #FF5A3C;  /* projector vermilion — CTAs, accents */
  --verm-deep:   #E8432A;
  --verm-glow:   rgba(255,90,60,0.32);

  --aqua:        #7FD8C8;  /* pool-water flash — timecode, runtimes */

  --ivory:       #F7EDE2;  /* primary text */
  --rosy:        #D3B4A8;  /* secondary text */
  --muted:       #A98D85;  /* tertiary / labels */

  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Schibsted Grotesk', system-ui, sans-serif;
  --font-mono:    'Fragment Mono', 'Courier New', monospace;

  --maxw:        1180px;
  --nav-h:       76px;
  --letterbox-h: clamp(30px, 5.5vh, 46px);
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);

  color-scheme: dark;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Fixed-nav offset for anchor jumps is handled once here via scroll-padding-top.
   Do NOT also add scroll-margin-top on sections — the two compound to 2x. */
html { scroll-behavior: smooth; scroll-padding-top: var(--nav-h); -webkit-text-size-adjust: 100%; }

body {
  background: var(--noir);
  color: var(--ivory);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }

::selection { background: var(--verm); color: var(--noir); }

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

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link */
.skip {
  position: absolute; left: 50%; top: -60px; transform: translateX(-50%);
  background: var(--verm); color: var(--noir); padding: 10px 18px;
  font-weight: 600; z-index: 200; border-radius: 0 0 10px 10px; transition: top .2s var(--ease);
}
.skip:focus { top: 0; }

/* ============================================================
   ATMOSPHERE: film grain + vignette (fixed, page-wide)
   ============================================================ */
.grain, .vignette { position: fixed; inset: 0; pointer-events: none; }
.grain {
  z-index: 3;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain-pulse 6s steps(1) infinite;
}
.vignette {
  z-index: 2;
  background:
    radial-gradient(120% 80% at 50% 8%, rgba(255,120,90,0.045), transparent 42%),
    radial-gradient(140% 120% at 50% 45%, transparent 55%, rgba(12,3,6,0.6) 100%);
}
@keyframes grain-pulse {
  0%   { opacity: 0.045; transform: translate(0,0); }
  25%  { opacity: 0.04;  transform: translate(-1%, 1%); }
  50%  { opacity: 0.05;  transform: translate(1%, -1%); }
  75%  { opacity: 0.04;  transform: translate(-1%, -1%); }
  100% { opacity: 0.045; transform: translate(1%, 1%); }
}

.site-nav, main, .site-footer { position: relative; z-index: 5; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.015em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem; letter-spacing: 0.26em; text-transform: uppercase;
  color: var(--verm); display: inline-flex; align-items: center; gap: 0.7em;
}
.eyebrow::before { content: ""; width: 26px; height: 1px; background: linear-gradient(90deg, var(--verm), transparent); }
.eyebrow.center { justify-content: center; }
.eyebrow.center::after { content: ""; width: 26px; height: 1px; background: linear-gradient(270deg, var(--verm), transparent); }

.section-title { font-size: clamp(2.15rem, 4.6vw, 3.5rem); margin: 0.6rem 0 0; max-width: 20ch; }
.section-title em { font-style: italic; color: var(--verm); font-weight: 500; }
.section-head { margin-bottom: clamp(2.75rem, 6vw, 4.5rem); }
.section-head.center { text-align: center; }
.section-head.center .section-title { margin-left: auto; margin-right: auto; }
.lede { color: var(--rosy); font-size: 1.075rem; max-width: 52ch; margin-top: 1.15rem; text-wrap: balance; }
.nowrap { white-space: nowrap; }
.lede.center { margin-left: auto; margin-right: auto; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.section { padding-block: clamp(5.5rem, 12vw, 9rem); position: relative; }
.section + .section { border-top: 1px solid var(--ink); }

/* ============================================================
   BUTTONS — pill, projector-lit
   ============================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em; justify-content: center;
  font-family: var(--font-body); font-weight: 600; font-size: 0.975rem; letter-spacing: 0.01em;
  padding: 1rem 2.1rem; border-radius: 999px; cursor: pointer; border: 1px solid transparent;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease);
  min-height: 48px;
}
.btn-primary {
  background: linear-gradient(180deg, var(--verm), var(--verm-deep));
  color: #200A0E;
  box-shadow: 0 0 0 rgba(255,90,60,0);
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 44px -12px var(--verm-glow);
}
.btn-primary .arrow { transition: transform .35s var(--ease); }
.btn-primary:hover .arrow { transform: translateX(4px); }

/* ============================================================
   NAV + timeline scrubber
   ============================================================ */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--nav-h);
  display: flex; align-items: center;
  transition: background .4s var(--ease), border-color .4s var(--ease),
              height .4s var(--ease), padding-top .4s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Homepage only: at the very top, the hero's letterbox slate occupies the first band,
   so the nav grows to sit below it, then collapses once you scroll. Pages with the hero
   letterbox add class `at-top-tall` to the nav; other pages stay compact. */
.site-nav.at-top-tall:not(.scrolled) {
  height: calc(var(--nav-h) + var(--letterbox-h));
  padding-top: var(--letterbox-h);
}
.site-nav.scrolled {
  height: var(--nav-h); padding-top: 0;
  background: rgba(26,8,13,0.84);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom-color: var(--ink);
}
/* The page is the film; this is the playhead. */
.scrubber {
  position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60;
  background: linear-gradient(90deg, var(--verm), var(--verm-deep));
  transform: scaleX(0); transform-origin: left; pointer-events: none;
}
/* Scene 08 — glowing playhead dot; JS eases both toward scroll position */
.scrubber-dot {
  position: fixed; top: -2px; left: 0; width: 7px; height: 7px; z-index: 61;
  border-radius: 50%; background: var(--verm); box-shadow: 0 0 10px rgba(255,90,60,0.85);
  transform: translateX(-50%); pointer-events: none;
}
.nav-inner { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; display: flex; align-items: center; justify-content: space-between; }
/* Right-hand cluster: links + cart + hamburger */
.nav-right { display: flex; align-items: center; gap: 1.6rem; }

.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1.3rem; letter-spacing: 0; color: var(--ivory);
  /* periodic sheen: a bright glint sweeps the wordmark once every 7s. The band is
     animated by moving the gradient's own stops (registered --shine property) because
     Chromium refuses to paint background-image with an explicit background-size when
     -webkit-background-clip:text is active on this element. Browsers without @property
     see an invalid gradient and fall back to the ivory background-color — static, safe. */
  background-image: linear-gradient(
    110deg,
    var(--ivory) calc(var(--shine) - 18%),
    #FFE9B0 calc(var(--shine) - 6%),
    #FFD98F var(--shine),
    #FFE9B0 calc(var(--shine) + 6%),
    var(--ivory) calc(var(--shine) + 18%)
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  background-color: var(--ivory); /* glyphs stay ivory outside the sweep */
  animation: brand-shimmer 7s linear infinite;
}
@property --shine {
  syntax: '<percentage>';
  inherits: false;
  initial-value: -30%;
}
@keyframes brand-shimmer {
  0%   { --shine: -30%; }
  26%  { --shine: 130%; }
  100% { --shine: 130%; }
}
.brand .mark { width: 25px; height: 25px; color: var(--verm); flex: none; }
.mark-dot { fill: var(--ivory); transition: fill .3s var(--ease); }
.brand:hover .mark-dot { fill: var(--aqua); }

.nav-links { display: flex; align-items: center; gap: 2.1rem; list-style: none; }
.nav-links a {
  font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; color: var(--rosy);
  position: relative; padding: 0.4rem 0; transition: color .25s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 100%;
  background: var(--verm); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.nav-links a:hover { color: var(--ivory); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }
.nav-links a.active { color: var(--verm); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 44px;
  align-items: center; justify-content: center; color: var(--ivory);
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 22px; height: 1.5px; background: currentColor; transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-toggle span { position: relative; }
.nav-toggle span::before { position: absolute; top: -7px; left: 0; }
.nav-toggle span::after  { position: absolute; top: 7px;  left: 0; }
.site-nav.menu-open .nav-toggle span { background: transparent; }
.site-nav.menu-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.site-nav.menu-open .nav-toggle span::after  { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Cart button + badge (header) ---------- */
.cart-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--ink);
  background: transparent; color: var(--ivory); cursor: pointer;
  transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.cart-btn:hover { border-color: var(--verm); color: var(--verm); }
.cart-btn svg { width: 20px; height: 20px; }
.cart-badge {
  position: absolute; top: -4px; right: -4px; min-width: 19px; height: 19px; padding: 0 5px;
  border-radius: 999px; background: var(--verm); color: #200A0E;
  font-family: var(--font-body); font-size: 0.66rem; font-weight: 700; line-height: 19px; text-align: center;
  box-shadow: 0 0 0 2px var(--noir);
}
.cart-badge[hidden] { display: none; }
.cart-btn.bump { animation: cart-bump .45s var(--ease); }
@keyframes cart-bump { 0%,100% { transform: scale(1); } 40% { transform: scale(1.18); } }

/* ============================================================
   HERO — the curtain rises
   ============================================================ */
.hero {
  min-height: 100svh; min-height: 100vh; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
  padding: calc(var(--nav-h) + 2rem) 1.5rem 2rem;
  background:
    radial-gradient(85% 58% at 50% 0%, rgba(255,170,130,0.10), transparent 58%),
    repeating-linear-gradient(90deg, rgba(140,32,52,0.16) 0px, rgba(31,10,16,0) 70px, rgba(140,32,52,0.16) 140px),
    linear-gradient(180deg, #2A0D14 0%, var(--noir) 58%, var(--noir-deep) 100%);
}
.hero::before {
  content: ""; position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background: radial-gradient(38% 38% at 32% 30%, rgba(255,120,90,0.09), transparent 70%);
  animation: drift 26s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translate(-6%, -4%) scale(1); }
  to   { transform: translate(8%, 6%) scale(1.15); }
}

.letterbox {
  position: absolute; left: 0; right: 0; height: var(--letterbox-h); z-index: 4;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1.1rem, 4vw, 2.4rem);
  font-family: var(--font-mono);
  font-size: 0.64rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted);
  background: rgba(18,5,8,0.72);
}
.letterbox.top { top: 0; border-bottom: 1px solid var(--ink-soft); }
.letterbox.bottom { bottom: 0; border-top: 1px solid var(--ink-soft); }
.letterbox .tc { color: var(--aqua); font-variant-numeric: tabular-nums; }
.letterbox .rec { color: var(--verm); animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

.hero-inner { position: relative; z-index: 4; max-width: 980px; }
.hero .eyebrow { margin-bottom: 1.7rem; }

.hero h1 {
  font-size: clamp(3rem, 9.2vw, 6.9rem);
  font-weight: 600; line-height: 1; letter-spacing: -0.02em;
}
.hero h1 .word { display: inline-block; }
.hero h1 .word.flick { font-style: italic; font-weight: 500; color: var(--verm); }
.hero-sub {
  margin: 2rem auto 0; max-width: 42ch; font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--rosy); font-weight: 400;
}
/* Two buttons side by side, wrapping to a stack on narrow screens */
.hero-cta { margin-top: 2.7rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem; }

.scroll-cue {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(var(--letterbox-h) + 1.3rem); z-index: 4;
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.6rem;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--muted);
}
.scroll-cue .scroll-word { padding-left: 0.3em; }
.scroll-cue .line { width: 1px; height: 34px; background: linear-gradient(var(--verm), transparent); position: relative; overflow: hidden; }
.scroll-cue .line::after {
  content: ""; position: absolute; left: 0; top: -60%; width: 100%; height: 60%; background: var(--verm);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue { 0% { top: -60%; } 60%,100% { top: 120%; } }

/* ============================================================
   MARQUEE TICKER
   ============================================================ */
.ticker {
  overflow: hidden; border-bottom: 1px solid var(--ink);
  background: #240C12; position: relative; z-index: 5;
}
.ticker-track { display: flex; width: max-content; animation: ticker 30s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-group {
  display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; padding-block: 0.9rem;
  font-family: var(--font-mono); font-size: 0.76rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--rosy); white-space: nowrap;
}
.ticker-sep { color: var(--aqua); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* ============================================================
   HOW IT WORKS — a storyboard on a film strip
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.75rem); }
.step {
  position: relative; padding: 3rem 2rem 2.9rem; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--ink);
  background-image:
    radial-gradient(circle, var(--noir) 3px, transparent 3.6px),
    radial-gradient(circle, var(--noir) 3px, transparent 3.6px),
    linear-gradient(180deg, var(--noir-3), var(--noir-2));
  background-size: 26px 10px, 26px 10px, 100% 100%;
  background-position: center 10px, center calc(100% - 10px), 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.step:hover {
  transform: translateY(-6px);
  border-color: rgba(255,90,60,0.4);
  box-shadow: 0 22px 54px -30px var(--verm-glow);
}
.step-scene {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--verm); display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1.6rem;
}
.step-scene b {
  font-family: var(--font-display); font-size: 2.5rem; line-height: 1; font-weight: 600;
  color: var(--ivory); letter-spacing: -0.01em;
}
.step-icon { width: 40px; height: 40px; color: var(--verm); margin-bottom: 1.3rem; }
.step h3 { font-size: 1.45rem; margin-bottom: 0.7rem; }
.step p { color: var(--rosy); font-size: 1rem; }

/* ============================================================
   PRICING — cinema tickets (also reused by the shop)
   ============================================================ */
.pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); max-width: 920px; margin-inline: auto; }
.price-card {
  --tpad: clamp(1.6rem, 3vw, 2.4rem);
  position: relative; padding: 2.6rem var(--tpad); border: 1px solid var(--ink); border-radius: 14px;
  background: linear-gradient(180deg, var(--noir-3), var(--noir-2));
  display: flex; flex-direction: column; overflow: hidden;
  transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
}
.price-card:hover { transform: translateY(-6px); border-color: rgba(255,90,60,0.35); }
.price-card.recommended {
  border-color: rgba(255,90,60,0.55);
  background: linear-gradient(180deg, var(--velvet), #38101A 70%);
  box-shadow: 0 26px 70px -32px var(--verm-glow);
}
.price-card.recommended:hover { box-shadow: 0 32px 84px -28px var(--verm-glow); }
.rec-badge {
  position: absolute; top: 1.15rem; right: 1.15rem;
  background: linear-gradient(180deg, var(--verm), var(--verm-deep)); color: #200A0E;
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 0.45rem 0.95rem; border-radius: 999px;
}
.price-tier { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--verm); }
.price-name { font-size: 1.8rem; margin: 0.55rem 0 1.35rem; }
.price-amount { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.35rem; }
.price-amount .cur { font-family: var(--font-display); font-size: 1.5rem; color: var(--rosy); }
.price-amount .num { font-family: var(--font-display); font-size: 3.9rem; font-weight: 600; line-height: 1; color: var(--ivory); }
.price-amount .was {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--muted);
  text-decoration: line-through; text-decoration-color: var(--verm); text-decoration-thickness: 2px;
  margin-left: 0.55rem;
}
.price-card.recommended .price-amount .was { color: var(--rosy); }
.price-note { font-family: var(--font-mono); color: var(--muted); font-size: 0.76rem; letter-spacing: 0.06em; margin-bottom: 1.8rem; text-wrap: balance; }
.price-card.recommended .price-note { color: var(--rosy); }
.perf { position: relative; height: 0; border-top: 2px dashed rgba(247,237,226,0.18); margin: 0 calc(var(--tpad) * -1) 1.7rem; }
.notch { position: absolute; top: -12px; width: 24px; height: 24px; border-radius: 50%; background: var(--noir); }
.notch.l { left: -12px; }
.notch.r { right: -12px; }
.price-feats { list-style: none; display: flex; flex-direction: column; gap: 0.95rem; }
.price-feats li { display: flex; align-items: flex-start; gap: 0.75rem; color: var(--rosy); font-size: 1rem; }
.price-feats svg { width: 19px; height: 19px; color: var(--verm); flex: none; margin-top: 0.15rem; }
.price-feats b { color: var(--ivory); font-weight: 600; }
.price-card.recommended .price-feats li { color: #E3C4B8; }

/* Tier groups */
.tier + .tier { border-top: 1px solid var(--ink); margin-top: clamp(3.25rem, 7vw, 5rem); padding-top: clamp(3.25rem, 7vw, 5rem); }
.tier-head { text-align: center; margin-bottom: clamp(2.2rem, 4.5vw, 3.25rem); }
.tier-label {
  display: inline-block; font-family: var(--font-mono);
  font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.28rem);
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--verm); line-height: 1.4;
}
.tier-label b { color: var(--ivory); font-weight: 400; }
.tier-desc { color: var(--rosy); max-width: 54ch; margin: 0.95rem auto 0; font-size: clamp(1.08rem, 1.02rem + 0.25vw, 1.2rem); }

.btn-ghost { background: transparent; color: var(--ivory); border-color: var(--ink); }
.btn-ghost:hover { border-color: var(--verm); color: var(--verm); transform: translateY(-2px); }
.btn-sm { padding: 0.78rem 1.5rem; font-size: 0.9rem; min-height: 44px; }

/* "Visit Shop" CTA under a tier */
.tier-shop-cta { text-align: center; margin-top: clamp(2rem, 4vw, 2.75rem); }

/* Add-on strip (Tier 1) */
.addon-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem 1.1rem;
  max-width: 920px; margin: 1.8rem auto 0; padding: 1.05rem 1.5rem;
  border: 1px dashed rgba(255,90,60,0.4); border-radius: 12px; background: #240C12;
}
.addon-chip {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--verm); border: 1px solid rgba(255,90,60,0.4); border-radius: 4px; padding: 0.3rem 0.6rem;
}
.addon-name { font-weight: 600; color: var(--ivory); }
.addon-price { font-family: var(--font-display); font-weight: 600; color: var(--verm); font-size: 1.3rem; }
.addon-desc { color: var(--rosy); font-size: 0.95rem; }

/* Tier 2 — trio of portfolio cards */
.pricing-grid.trio { grid-template-columns: repeat(3, 1fr); max-width: none; }
.price-amount .per { font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted); letter-spacing: 0.06em; }
.price-duo { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 0.85rem; }
.duo-row { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.duo-label { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--rosy); }
.duo-price { font-family: var(--font-display); font-weight: 600; font-size: 1.9rem; color: var(--ivory); line-height: 1; }
.lets-talk { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 2.4rem; line-height: 1.15; color: var(--verm); }
.card-cta { margin-top: auto; padding-top: 1.6rem; }
.price-card.action { align-items: center; text-align: center; justify-content: center; background: linear-gradient(180deg, var(--velvet), #38101A 70%); border-color: rgba(255,90,60,0.45); }
.price-card.action h3 { font-size: 1.7rem; max-width: 16ch; }
.price-card.action p { color: #E3C4B8; font-size: 0.98rem; max-width: 30ch; margin-top: 0.5rem; }
.price-card.action .card-cta { margin-top: 1.5rem; padding-top: 0; }

/* Tier 3 — partner panel */
.partner-card {
  display: flex; align-items: center; justify-content: space-between; gap: 2.2rem;
  max-width: 920px; margin-inline: auto; padding: clamp(1.9rem, 4vw, 2.6rem);
  border: 1px solid rgba(127,216,200,0.32); border-radius: 14px;
  background: linear-gradient(180deg, var(--noir-3), var(--noir-2));
}
.partner-chip {
  display: inline-block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--aqua); border: 1px solid rgba(127,216,200,0.4);
  border-radius: 4px; padding: 0.3rem 0.6rem; margin-bottom: 1rem;
}
.partner-info h3 { font-size: 1.6rem; max-width: 26ch; }
.partner-info p { color: var(--rosy); margin-top: 0.8rem; max-width: 46ch; }
.partner-cta { flex: none; }

/* ============================================================
   EXAMPLES
   ============================================================ */
.examples-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); }
.video-card { display: flex; flex-direction: column; gap: 1.1rem; }
.video-frame {
  position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  border: 1px solid var(--ink); cursor: default;
  background: radial-gradient(90% 120% at 50% 30%, #3A141E, #1A080C 75%);
}
.video-frame::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(70% 70% at 50% 45%, transparent 55%, rgba(12,3,6,0.62));
}
.play {
  position: absolute; inset: 0; margin: auto; width: 78px; height: 78px; border-radius: 50%;
  border: 1px solid rgba(255,90,60,0.55); display: grid; place-items: center; color: var(--verm);
  background: rgba(24,6,10,0.42); z-index: 2;
  transition: transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.play::before {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 1px solid var(--verm);
  opacity: 0; animation: ring 3s var(--ease) infinite;
}
@keyframes ring { 0% { transform: scale(1); opacity: 0.5; } 100% { transform: scale(1.6); opacity: 0; } }
.play svg { width: 26px; height: 26px; margin-left: 4px; }
.video-frame:hover .play { transform: scale(1.06); background: var(--verm); color: #200A0E; }
.video-tag {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2;
  font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--verm); border: 1px solid rgba(255,90,60,0.4);
  padding: 0.32rem 0.62rem; border-radius: 4px; background: rgba(18,5,8,0.5);
}
.video-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.video-meta h3 { font-size: 1.22rem; }
.video-meta .runtime { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--aqua); font-variant-numeric: tabular-nums; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
.contact-aside .section-title { max-width: 14ch; }
.contact-aside .lede { margin-bottom: 2.2rem; }
.email-link {
  display: inline-flex; align-items: center; gap: 0.7rem; font-size: 1.12rem; color: var(--verm);
  padding-bottom: 4px; border-bottom: 1px solid rgba(255,90,60,0.45);
  transition: gap .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  font-weight: 500; word-break: break-all;
}
.email-link:hover { gap: 1.1rem; border-bottom-color: var(--verm); }
.email-link svg { width: 18px; height: 18px; flex: none; }
.contact-detail { margin-top: 1.6rem; font-family: var(--font-mono); color: var(--muted); font-size: 0.78rem; letter-spacing: 0.08em; }

/* Email row: mailto link + copy-to-clipboard button + "Copied" note */
.email-row { display: flex; align-items: center; flex-wrap: wrap; gap: 0.7rem; }
.copy-btn {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  background: transparent; border: 1px solid var(--ink); border-radius: 999px;
  color: var(--rosy); cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.copy-btn:hover { color: var(--verm); border-color: rgba(255,90,60,0.5); background: rgba(255,90,60,0.08); }
.copy-btn svg { width: 16px; height: 16px; }
.copy-btn .ic-check { display: none; }
.copy-btn.copied { color: var(--aqua); border-color: rgba(127,216,200,0.5); background: rgba(127,216,200,0.08); }
.copy-btn.copied .ic-copy { display: none; }
.copy-btn.copied .ic-check { display: block; }
.copy-note {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--aqua); opacity: 0; transform: translateX(-4px);
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.copy-note.show { opacity: 1; transform: none; }

.form-card {
  background: linear-gradient(180deg, var(--noir-3), var(--noir-2));
  border: 1px solid var(--ink); border-radius: 16px; padding: clamp(1.8rem, 4vw, 2.6rem);
}
.field { margin-bottom: 1.4rem; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
label {
  display: block; font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 0.6rem;
}
.field input, .field textarea {
  width: 100%; background: #260D13; border: 1px solid var(--ink); border-radius: 8px;
  color: var(--ivory); font-family: var(--font-body); font-size: 1rem; padding: 0.85rem 1rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.field input::placeholder, .field textarea::placeholder { color: #9E7A74; }
.field input:focus, .field textarea:focus {
  outline: none; border-color: var(--verm); box-shadow: 0 0 0 3px rgba(255,90,60,0.14);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-card .btn-primary { width: 100%; margin-top: 0.3rem; }
.form-error { color: #FFB3A0; font-size: 0.9rem; margin-top: 1rem; display: none; }
.form-error.show { display: block; }

.form-success { display: none; text-align: center; padding: 1.5rem 0.5rem; }
.form-success.show { display: block; animation: fade-up .6s var(--ease) both; }
.form-success .tick { width: 60px; height: 60px; margin: 0 auto 1.4rem; color: var(--aqua); }
.form-success h3 { font-size: 1.6rem; margin-bottom: 0.6rem; }
.form-success p { color: var(--rosy); max-width: 34ch; margin-inline: auto; }

/* ============================================================
   FOOTER — Fin.
   ============================================================ */
.site-footer { border-top: 1px solid var(--ink); padding-block: clamp(3rem, 6vw, 4.5rem); text-align: center; background: #1A0A0F; }
.fin { font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 2rem; color: var(--verm); margin-bottom: 1.8rem; }
.footer-brand { display: inline-flex; align-items: center; gap: 0.65rem; font-family: var(--font-display); font-size: 1.6rem; font-weight: 600; color: var(--ivory); }
.footer-brand .mark { width: 27px; height: 27px; color: var(--verm); }
.footer-slogan { font-family: var(--font-display); font-style: italic; color: var(--rosy); margin-top: 0.7rem; font-size: 1.08rem; }
.footer-meta { margin-top: 1.6rem; font-family: var(--font-mono); color: var(--muted); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; }
.footer-meta a { color: var(--rosy); }
.footer-meta a:hover { color: var(--verm); }
.footer-dot { color: var(--aqua); margin: 0 0.6rem; }

/* ============================================================
   SHARED QTY STEPPER (shop + cart)
   ============================================================ */
.qty { display: inline-flex; align-items: center; border: 1px solid var(--ink); border-radius: 999px; }
.qty-btn { width: 34px; height: 34px; background: none; border: 0; color: var(--ivory); font-size: 1.15rem; line-height: 1; cursor: pointer; display: grid; place-items: center; transition: color .2s var(--ease); }
.qty-btn:hover { color: var(--verm); }
.qty-val { min-width: 28px; text-align: center; font-variant-numeric: tabular-nums; font-size: 0.95rem; }

/* ============================================================
   SHOP PAGE
   ============================================================ */
.shop-intro { padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem)); }
/* Generic sub-page header spacing (partner page etc.) */
.page-intro { padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem)); }

/* Aqua eyebrow variant — the partner program's identity color */
.eyebrow.aqua { color: var(--aqua); }
.eyebrow.aqua::before { background: linear-gradient(90deg, var(--aqua), transparent); }
.eyebrow.aqua::after { background: linear-gradient(270deg, var(--aqua), transparent); }

/* Small mono text link (e.g. "Learn more" on the Tier 3 card) */
.text-link {
  display: inline-block; font-family: var(--font-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--aqua);
  border-bottom: 1px solid rgba(127,216,200,0.35); padding-bottom: 3px;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.text-link:hover { color: var(--ivory); border-color: var(--ivory); }

/* ============================================================
   PARTNER PAGE
   ============================================================ */
.benefit-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 920px; margin-inline: auto;
}
.benefit {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1.5rem 1.6rem; border: 1px solid rgba(127,216,200,0.28); border-radius: 12px;
  background: linear-gradient(180deg, var(--noir-3), var(--noir-2));
}
.benefit svg { width: 22px; height: 22px; color: var(--aqua); flex: none; margin-top: 0.2rem; }
.benefit h3 { font-size: 1.15rem; margin-bottom: 0.35rem; }
.benefit p { color: var(--rosy); font-size: 0.95rem; }

@media (max-width: 720px) {
  .benefit-grid { grid-template-columns: 1fr; max-width: 440px; }
}
.shop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.5rem, 3vw, 2.25rem); max-width: 920px; margin-inline: auto; }
.shop-card .price-blurb { color: var(--rosy); font-size: 1rem; margin: 0.1rem 0 1.4rem; }
.shop-card .price-feats { margin-bottom: 1.7rem; }
.shop-controls { margin-top: auto; display: flex; flex-direction: column; gap: 1.1rem; }
.addon-toggle {
  display: flex; align-items: center; gap: 0.8rem; cursor: pointer; user-select: none;
  padding: 0.8rem 0.95rem; border: 1px dashed rgba(255,90,60,0.4); border-radius: 10px;
  background: rgba(255,90,60,0.05); transition: border-color .2s var(--ease), background .2s var(--ease);
}
.addon-toggle:hover { border-color: var(--verm); }
.addon-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.addon-switch { flex: none; width: 38px; height: 22px; border-radius: 999px; background: var(--ink); position: relative; transition: background .25s var(--ease); }
.addon-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--ivory); transition: transform .25s var(--ease); }
.addon-toggle input:checked + .addon-switch { background: var(--verm); }
.addon-toggle input:checked + .addon-switch::after { transform: translateX(16px); }
.addon-toggle input:focus-visible + .addon-switch { outline: 2px solid var(--verm); outline-offset: 2px; }
.addon-label { font-size: 0.95rem; color: var(--rosy); line-height: 1.35; }
.addon-label b { color: var(--ivory); }
.addon-label .addon-plus { font-family: var(--font-display); color: var(--verm); font-weight: 600; margin-left: 0.15rem; }
.shop-actions { display: flex; align-items: center; gap: 1rem; }
.shop-actions .btn { flex: 1; }
.shop-note { text-align: center; color: var(--muted); font-size: 0.95rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0; max-width: 62ch; }
.shop-note a { color: var(--verm); border-bottom: 1px solid rgba(255,90,60,0.4); }

/* Note under the shop intro: link/photos are collected at checkout */
.shop-submit-note {
  text-align: center; font-family: var(--font-mono); font-size: 0.74rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--aqua);
  margin-top: 1.1rem;
}

/* ---------- Bundle cards (Small / Medium Portfolio) ---------- */
.tour-seg { display: flex; gap: 0.6rem; margin-bottom: 0.9rem; }
.tour-seg label { flex: 1; cursor: pointer; position: relative; }
.tour-seg input { position: absolute; opacity: 0; pointer-events: none; }
.tour-seg .seg-face {
  display: block; text-align: center; padding: 0.6rem 0.4rem;
  border: 1px solid var(--ink); border-radius: 8px;
  font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--rosy); transition: border-color .25s var(--ease), color .25s var(--ease), background .25s var(--ease);
}
.tour-seg input:checked + .seg-face { border-color: var(--verm); color: var(--ivory); background: rgba(255,90,60,0.08); }
.tour-seg input:focus-visible + .seg-face { outline: 2px solid var(--verm); outline-offset: 2px; }

.bundle-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 0.9rem; }
.bundle-row label {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--muted);
}
.bundle-select {
  background: #260D13; border: 1px solid var(--ink); border-radius: 8px;
  color: var(--ivory); font-family: var(--font-body); font-size: 0.95rem;
  padding: 0.55rem 0.8rem; min-width: 9.5rem; cursor: pointer;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.bundle-select:focus { outline: none; border-color: var(--verm); box-shadow: 0 0 0 3px rgba(255,90,60,0.14); }
.bundle-select.error { border-color: var(--verm); box-shadow: 0 0 0 3px rgba(255,90,60,0.2); }

.bundle-total {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--aqua); min-height: 1.2em; margin-bottom: 0.9rem;
}
.bundle-error { color: #FFB3A0; font-size: 0.88rem; margin: -0.3rem 0 0.7rem; }
.bundle-error[hidden] { display: none; }

/* Order summary: submitted link line */
.order-link {
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--rosy);
  margin-top: 1rem; word-break: break-all;
}
.order-link b { color: var(--muted); font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.68rem; }

/* ============================================================
   CART DRAWER (injected by site.js)
   ============================================================ */
.cart-overlay {
  position: fixed; inset: 0; z-index: 90; background: rgba(8,2,4,0.6);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.cart-overlay.open { opacity: 1; visibility: visible; }
.cart-drawer {
  position: fixed; top: 0; right: 0; z-index: 100; height: 100%;
  width: min(420px, 100%); display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--noir-2), var(--noir));
  border-left: 1px solid var(--ink); box-shadow: -30px 0 80px -30px rgba(0,0,0,0.7);
  transform: translateX(100%); transition: transform .3s ease-in; /* exit faster than entrance */
}
.cart-drawer.open { transform: none; transition: transform .65s cubic-bezier(0.28, 1.18, 0.5, 1); }
/* Scene 06 — line items cascade in only on open (not on every re-render) */
.cart-drawer.just-opened .cart-item { animation: cart-item-in .5s var(--ease) both; }
.cart-drawer.just-opened .cart-item:nth-child(2) { animation-delay: .08s; }
.cart-drawer.just-opened .cart-item:nth-child(3) { animation-delay: .16s; }
.cart-drawer.just-opened .cart-item:nth-child(4) { animation-delay: .24s; }
.cart-drawer.just-opened .cart-item:nth-child(n+5) { animation-delay: .3s; }
@keyframes cart-item-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
.cart-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem clamp(1.25rem, 4vw, 1.8rem); border-bottom: 1px solid var(--ink);
}
.cart-close { background: none; border: 0; color: var(--rosy); cursor: pointer; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; transition: color .25s var(--ease), background .25s var(--ease); }
.cart-close:hover { color: var(--verm); background: rgba(255,90,60,0.1); }
.cart-close svg { width: 20px; height: 20px; }
.cart-body { flex: 1; overflow-y: auto; padding: clamp(1rem, 3vw, 1.5rem); display: flex; flex-direction: column; gap: 1rem; }
.cart-empty { text-align: center; color: var(--muted); margin: auto; padding: 2rem 1rem; }
.cart-empty svg { width: 46px; height: 46px; margin: 0 auto 1rem; color: var(--ink); }
.cart-empty .btn { margin-top: 1.4rem; }

.cart-item { display: grid; grid-template-columns: 1fr auto; gap: 0.15rem 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--ink); }
.cart-item:last-child { border-bottom: 0; padding-bottom: 0; }
.cart-item-name { font-family: var(--font-display); font-size: 1.12rem; font-weight: 600; color: var(--ivory); }
.cart-item-addon { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua); margin-top: 0.3rem; }
.cart-item-price { font-family: var(--font-display); font-size: 1.12rem; color: var(--ivory); text-align: right; white-space: nowrap; }
.cart-item-controls { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; margin-top: 0.7rem; }

/* Savings line on discounted listings (e.g. −$50 on The Feature Presentation) */
.cart-item-discount {
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--verm); margin-top: 0.3rem;
}

/* Per-property link inputs on bundle line items — collapsible <details> group */
.cart-item-links { grid-column: 1 / -1; margin-top: 0.8rem; }
.cart-links-label {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.8rem;
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted);
  cursor: pointer; list-style: none; user-select: none;
  padding: 0.3rem 0; border-radius: 4px;
  transition: color .25s var(--ease);
}
.cart-links-label::-webkit-details-marker { display: none; }
.cart-links-label:hover { color: var(--rosy); }
.cart-links-label .cl-left { display: inline-flex; align-items: center; gap: 0.6rem; }
/* circled chevron reads as a real disclosure button: down = expand, up = collapse */
.cart-links-label .chev {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none;
  border: 1px solid rgba(255,90,60,0.55); border-radius: 50%; color: var(--verm);
  background: rgba(255,90,60,0.08);
  transition: transform .3s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.cart-links-label .chev svg { width: 11px; height: 11px; }
.cart-links-label:hover .chev { background: rgba(255,90,60,0.18); border-color: var(--verm); }
.cart-item-links[open] .cart-links-label .chev { transform: rotate(180deg); }
.cart-links-label .req { color: var(--aqua); }
.cart-item-links .cart-prop-link { margin-top: 0.5rem; }
.cart-prop-link {
  width: 100%; background: #260D13; border: 1px solid var(--ink); border-radius: 8px;
  color: var(--ivory); font-family: var(--font-body); font-size: 0.88rem; padding: 0.55rem 0.8rem;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.cart-prop-link::placeholder { color: #9E7A74; }
.cart-prop-link:focus { outline: none; border-color: var(--verm); box-shadow: 0 0 0 3px rgba(255,90,60,0.14); }
.cart-prop-link.error { border-color: var(--verm); box-shadow: 0 0 0 3px rgba(255,90,60,0.2); }
.cart-links-error { color: #FFB3A0; font-size: 0.85rem; margin: 0.1rem 0 0; }
.cart-links-error[hidden] { display: none; }
.cart-remove { background: none; border: 0; color: var(--muted); font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: color .2s var(--ease); }
.cart-remove:hover { color: var(--verm); }

.cart-foot { border-top: 1px solid var(--ink); padding: clamp(1.1rem, 3vw, 1.5rem); }
.cart-subtotal { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 0.6rem; }
.cart-subtotal .lbl { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.cart-subtotal .val { font-family: var(--font-display); font-size: 1.9rem; font-weight: 600; color: var(--ivory); }
.cart-secure { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.05em; color: var(--muted); margin-bottom: 1.1rem; }
.cart-secure svg { width: 14px; height: 14px; color: var(--aqua); flex: none; }
.cart-foot .btn { width: 100%; }
.cart-foot .btn[disabled] { opacity: 0.45; pointer-events: none; }

/* ---------- Toast ---------- */
.toast-wrap { position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%); z-index: 120; display: flex; flex-direction: column; gap: 0.6rem; align-items: center; pointer-events: none; }
.toast {
  display: flex; align-items: center; gap: 0.7rem; pointer-events: auto;
  background: var(--noir-3); border: 1px solid var(--verm); border-radius: 999px;
  padding: 0.7rem 1.2rem; color: var(--ivory); font-size: 0.9rem;
  box-shadow: 0 14px 40px -14px rgba(0,0,0,0.7);
  opacity: 0; transform: translateY(14px) scale(0.92);
  transition: opacity .3s ease-in, transform .3s ease-in;
}
.toast.show { opacity: 1; transform: none; transition: opacity .5s cubic-bezier(0.34, 1.56, 0.64, 1), transform .5s cubic-bezier(0.34, 1.56, 0.64, 1); }
.toast svg { width: 18px; height: 18px; color: var(--verm); flex: none; }
.toast a { color: var(--aqua); border-bottom: 1px solid rgba(127,216,200,0.4); cursor: pointer; }

/* ============================================================
   SUCCESS / ORDER PAGE
   ============================================================ */
.order-wrap { padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 5.5rem)); padding-bottom: clamp(4rem, 8vw, 7rem); }
.demo-banner { max-width: 620px; margin: 0 auto 1.5rem; text-align: center; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua); border: 1px solid rgba(127,216,200,0.35); border-radius: 999px; padding: 0.65rem 1rem; }
.order-card { max-width: 620px; margin-inline: auto; background: linear-gradient(180deg, var(--noir-3), var(--noir-2)); border: 1px solid var(--ink); border-radius: 16px; padding: clamp(1.8rem, 4vw, 2.8rem); }
.order-tick { width: 66px; height: 66px; margin: 0 auto 1.5rem; color: var(--aqua); }
.order-card h1 { text-align: center; font-size: clamp(1.9rem, 4vw, 2.6rem); }
.order-lede { text-align: center; color: var(--rosy); margin: 0.9rem auto 1.9rem; max-width: 46ch; }
.order-lines { border-top: 1px solid var(--ink); }
.order-line { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--ink); }
.order-line-name { color: var(--ivory); }
.order-line-name small { display: block; font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--aqua); margin-top: 0.25rem; }
.order-line-price { font-family: var(--font-display); color: var(--ivory); white-space: nowrap; }
.order-total { display: flex; align-items: baseline; justify-content: space-between; margin-top: 1.3rem; }
.order-total .lbl { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.order-total .val { font-family: var(--font-display); font-size: 2rem; font-weight: 600; color: var(--ivory); }
.order-next { margin-top: 1.9rem; padding-top: 1.6rem; border-top: 1px solid var(--ink); color: var(--rosy); font-size: 0.98rem; }
.order-next b { color: var(--ivory); }
.order-actions { text-align: center; margin-top: 1.9rem; }

/* ============================================================
   SCROLL-REVEAL (only active when JS present)
   ============================================================ */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }

/* Scene 02 — rack focus: section titles arrive soft and snap sharp (scroll-triggered
   by the same IntersectionObserver as every reveal; titles only, body copy never blurs) */
.js .section-title.reveal {
  transform: scale(1.02); filter: blur(10px);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .9s var(--ease);
}
.js .section-title.reveal.is-visible { filter: blur(0); }

/* Scene 04 — deal & stamp: cards deal in with overshoot (scroll-triggered),
   then the price stamps down with a slight twist */
.js .price-card.reveal {
  transform: translateY(18px) scale(0.96);
  transition: opacity .65s cubic-bezier(0.34, 1.3, 0.5, 1), transform .65s cubic-bezier(0.34, 1.3, 0.5, 1);
}
.js .price-card.reveal .price-amount .num,
.js .price-card.reveal .duo-price {
  display: inline-block; opacity: 0; transform: scale(1.35) rotate(-3deg);
  transition: opacity .55s cubic-bezier(0.34, 1.56, 0.64, 1) .35s, transform .55s cubic-bezier(0.34, 1.56, 0.64, 1) .35s;
}
.js .price-card.reveal.is-visible .price-amount .num,
.js .price-card.reveal.is-visible .duo-price { opacity: 1; transform: none; }
/* the transition shorthands above reset delays — restore the data-delay staggers */
.js .section-title.reveal[data-delay="1"], .js .price-card.reveal[data-delay="1"] { transition-delay: .08s; }
.js .section-title.reveal[data-delay="2"], .js .price-card.reveal[data-delay="2"] { transition-delay: .16s; }

/* Scene 03 — film transport: sprocket strips advance with scroll (JS drives --film-x) */
.step {
  background-position: calc(50% + var(--film-x, 0px)) 10px, calc(50% - var(--film-x, 0px)) calc(100% - 10px), 0 0;
}

/* Scene 05 — projector glow: a beam follows the cursor (JS sets --mx/--my).
   Primary CTAs get a white beam; ghost buttons a warm one; the example play
   buttons use ::after because ::before already carries their pulse ring. */
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120px 120px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.32), transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.btn-primary:hover::before { opacity: 1; }

.btn-ghost { position: relative; overflow: hidden; }
.btn-ghost::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(110px 110px at var(--mx, 50%) var(--my, 50%), rgba(255,220,180,0.18), transparent 70%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.btn-ghost:hover::before { opacity: 1; }

.play::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(70px 70px at var(--mx, 50%) var(--my, 50%), rgba(255,220,180,0.35), transparent 72%);
  opacity: 0; transition: opacity .3s var(--ease);
}
.play:hover::after { opacity: 1; }

/* Scene 09 — projector light on example frames: slow push-in + flickering beam */
.video-frame::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(90% 120% at 50% 30%, #3A141E, #1A080C 75%);
  transform: scale(1); transition: transform 6s linear;
}
.video-frame:hover::before { transform: scale(1.05); }
.frame-light {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 42%, rgba(255,190,150,0.12), transparent 70%);
  opacity: 0;
}
.video-frame:hover .frame-light { animation: proj-flicker 2.4s steps(6) infinite; }
@keyframes proj-flicker { 0% {opacity:.35} 18% {opacity:.15} 34% {opacity:.4} 51% {opacity:.2} 70% {opacity:.45} 100% {opacity:.3} }
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .08s; }
.js .reveal[data-delay="2"] { transition-delay: .16s; }
.js .reveal[data-delay="3"] { transition-delay: .24s; }

@keyframes fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Hero load choreography (JS adds .loaded to <body>) */
.js .hero .eyebrow,
.js .hero h1 .word,
.js .hero-sub,
.js .hero-cta,
.js .letterbox,
.js .scroll-cue { opacity: 0; }
.js body.loaded .letterbox { animation: lb-in .9s var(--ease) both; }
.js body.loaded .hero .eyebrow { animation: fade-up .8s var(--ease) .5s both; }
.js body.loaded .hero h1 .word { animation: word-in .9s var(--ease) both; }
.js body.loaded .hero h1 .word:nth-child(1) { animation-delay: .62s; }
.js body.loaded .hero h1 .word:nth-child(2) { animation-delay: .72s; }
.js body.loaded .hero h1 .word:nth-child(3) { animation-delay: .82s; }
.js body.loaded .hero h1 .word:nth-child(4) { animation-delay: .92s; }
.js body.loaded .hero-sub { animation: fade-up .8s var(--ease) 1.15s both; }
.js body.loaded .hero-cta { animation: fade-up .8s var(--ease) 1.32s both; }
/* The scroll cue is centered with translateX(-50%), so it needs its own keyframes.
   Reusing fade-up here would end on `transform: none` and wipe out that centering. */
.js body.loaded .scroll-cue { animation: cue-in 1s var(--ease) 1.7s both; }
@keyframes cue-in {
  from { opacity: 0; transform: translate(-50%, 16px); }
  to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes word-in { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }

/* ============================================================
   Scene 01 — THE CURTAIN CLOSE (homepage, once per session)
   Two velvet panels sweep in from the edges and draw closed over the
   dark stage, the letterbox bars slide in, the title rises on the
   curtain — then the panels crossfade into the identical baked-in
   backdrop so the hero ends exactly as it always was.
   JS adds body.curtain when the sequence should play.
   ============================================================ */
.curtain-panel { display: none; }
body.curtain .curtain-panel {
  display: block; position: absolute; top: 0; bottom: 0; width: 51%; z-index: 2; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(140,32,52,0.16) 0px, rgba(31,10,16,0) 70px, rgba(140,32,52,0.16) 140px),
    linear-gradient(180deg, #2A0D14 0%, var(--noir) 58%, var(--noir-deep) 100%);
}
body.curtain .curtain-panel.left  { left: 0;  transform: translateX(-101%); }
body.curtain .curtain-panel.right { right: 0; transform: translateX(101%); }
body.curtain.loaded .curtain-panel.left  { animation: cur-close-l 1.3s cubic-bezier(0.7, 0, 0.3, 1) 0.15s both, cur-fade 0.8s var(--ease) 1.8s both; }
body.curtain.loaded .curtain-panel.right { animation: cur-close-r 1.3s cubic-bezier(0.7, 0, 0.3, 1) 0.15s both, cur-fade 0.8s var(--ease) 1.8s both; }
@keyframes cur-close-l { from { transform: translateX(-101%); } to { transform: translateX(0); } }
@keyframes cur-close-r { from { transform: translateX(101%); }  to { transform: translateX(0); } }
@keyframes cur-fade { from { opacity: 1; } to { opacity: 0; } }

/* While the curtain plays, everything else waits for it: bars slide in as the
   panels meet, then the title rises. (Delays only — same animations.) */
body.curtain.loaded .letterbox.top { animation: lb-slide-t 0.8s var(--ease) 1.05s both; }
body.curtain.loaded .letterbox.bottom { animation: lb-slide-b 0.8s var(--ease) 1.05s both; }
@keyframes lb-slide-t { from { opacity: 1; transform: translateY(-101%); } to { opacity: 1; transform: none; } }
@keyframes lb-slide-b { from { opacity: 1; transform: translateY(101%); } to { opacity: 1; transform: none; } }
body.curtain.loaded .hero .eyebrow { animation-delay: 1.05s; }
body.curtain.loaded .hero h1 .word:nth-child(1) { animation-delay: 1.2s; }
body.curtain.loaded .hero h1 .word:nth-child(2) { animation-delay: 1.3s; }
body.curtain.loaded .hero h1 .word:nth-child(3) { animation-delay: 1.4s; }
body.curtain.loaded .hero h1 .word:nth-child(4) { animation-delay: 1.5s; }
body.curtain.loaded .hero-sub { animation-delay: 1.72s; }
body.curtain.loaded .hero-cta { animation-delay: 1.88s; }
body.curtain.loaded .scroll-cue { animation-delay: 2.2s; }

/* ============================================================
   Scene 07 — rack-focus page transitions (View Transitions API,
   Chromium; everyone else keeps the instant cut)
   ============================================================ */
@media not (prefers-reduced-motion: reduce) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: vt-out 0.25s ease-in both; }
  ::view-transition-new(root) { animation: vt-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
}
@keyframes vt-out { to { opacity: 0; filter: blur(8px); } }
@keyframes vt-in { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: blur(0); } }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Six links + "Partner Program" run out of room below ~1020px — tighten before the
   hamburger takes over at 720px. */
@media (max-width: 1020px) {
  .nav-links { gap: 1rem; }
  .nav-links a { font-size: 0.8rem; }
  .nav-right { gap: 1rem; }
  .brand { font-size: 1.15rem; }
}

@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .contact-grid { grid-template-columns: 1fr; }
  .pricing-grid { max-width: 440px; }
  .pricing-grid, .examples-grid { grid-template-columns: 1fr; }
  .pricing-grid { gap: 2rem; }
  .pricing-grid.trio { grid-template-columns: 1fr; max-width: 440px; }
  .examples-grid { max-width: 560px; margin-inline: auto; }
  .partner-card { flex-direction: column; text-align: center; }
  .partner-info h3, .partner-info p { margin-inline: auto; }
  .shop-grid { grid-template-columns: 1fr; max-width: 440px; }
}

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .nav-right { gap: 0.85rem; }
  .nav-links {
    /* anchored to the nav's own bottom edge so it follows the collapsing header height */
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0;
    background: rgba(26,8,13,0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    padding: 0.5rem 1.25rem 1.5rem; border-bottom: 1px solid var(--ink);
    transform: translateY(-12px); opacity: 0; pointer-events: none; visibility: hidden;
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
  }
  .site-nav.menu-open .nav-links { opacity: 1; transform: none; pointer-events: auto; visibility: visible; }
  .nav-links li { width: 100%; }
  .nav-links a { display: block; width: 100%; padding: 1rem 0; font-size: 1rem; border-bottom: 1px solid var(--ink); }
  .nav-links a::after { display: none; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .ticker-group { font-size: 0.68rem; gap: 1.8rem; padding-right: 1.8rem; }
}

@media (max-width: 420px) {
  .letterbox { font-size: 0.54rem; letter-spacing: 0.14em; padding-inline: 1rem; }
  .price-card, .step { padding-inline: 1.4rem; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; filter: none !important; }
  .js .price-card.reveal .price-amount .num,
  .js .price-card.reveal .duo-price { opacity: 1 !important; transform: none !important; }
  .js .hero .eyebrow,
  .js .hero h1 .word,
  .js .hero-sub,
  .js .hero-cta,
  .js .letterbox,
  .js .scroll-cue { opacity: 1 !important; }
  .grain, .hero::before, .ticker-track, .letterbox .rec { animation: none !important; }
  body.curtain .curtain-panel { display: none !important; }
  .scrubber-dot { display: none; }
  .video-frame::before { transition: none; }
  .btn-primary::before, .btn-ghost::before, .play::after { display: none; }
}