/* ══════════════════════════════════════════════════════════════════
   CYBERCOLT PHOTOBOOTH — landing system
   Shared by index.html, rental.html, software.html and faq.html.
   ══════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════
   CYBERCOLT PHOTOBOOTH — "VIEWFINDER"
   ------------------------------------------------------------------
   The house brand (cybercolt.com) is electric lime on graphite with
   JetBrains Mono — nightlife, event tech, systems. This product also
   sells to weddings, which wants a serif and champagne. So the page
   runs BOTH accents on purpose and never mixes their jobs:

     LIME  = the system. Live state, telemetry, anything running.
     GOLD  = the event. The moment, the keepsake, the invitation.

   The connective tissue is camera chrome: reticle corners, mono
   readouts, film sprockets, and a hero that actually takes a picture.
   ══════════════════════════════════════════════════════════════════ */

:root {
  /* ── the system (CyberColt house) ── */
  --lime:        #ACCA32;
  --lime-bright: #C4E64A;
  --lime-deep:   #8AA525;
  --lime-soft:   rgba(172,202,50,0.10);
  --lime-glow:   rgba(172,202,50,0.32);

  /* ── the event ── */
  --gold:        #E5C353;
  --gold-bright: #F0D673;
  --gold-deep:   #C9A23C;
  --gold-soft:   rgba(229,195,83,0.10);
  --gold-glow:   rgba(229,195,83,0.30);

  /* ── ground ── */
  --ink-900: #181B21;
  --ink-800: #1D2027;
  --ink-700: #22262E;
  --ink-600: #282C35;
  --ink-500: #2F343E;
  --ink-400: #3A404B;

  --cream:      #E7E9E2;
  --cream-mid:  rgba(231,233,226,0.76);
  --cream-dim:  rgba(231,233,226,0.58);
  --cream-faint:rgba(231,233,226,0.40);

  --line:        rgba(231,233,226,0.09);
  --line-strong: rgba(231,233,226,0.17);

  --font-sans:  'Inter', system-ui, -apple-system, sans-serif;
  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-mono:  'JetBrains Mono', ui-monospace, monospace;

  /* Surfaces, bucketed by brightness so the light theme is a swap. */
  --sf-hi:    rgba(255,255,255,0.045);
  --sf-mid:   rgba(255,255,255,0.030);
  --sf-lo:    rgba(255,255,255,0.022);
  --sf-faint: rgba(255,255,255,0.014);
  --well:     rgba(0,0,0,0.28);
  --on-accent:#14161B;              /* text on gold/lime — dark in both themes */
  --chrome:   rgba(24,27,33,0.82);  /* nav, footer, floating chrome */
  --chrome-solid: rgba(24,27,33,0.95);
  --shade:    0.78;                 /* shadow strength multiplier */

  --ease:   cubic-bezier(0.16,1,0.3,1);
  --ease-io:cubic-bezier(0.65,0,0.35,1);
  --maxw:   1200px;
  --gutter: clamp(20px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; min-height: 100%;
  background: var(--ink-900);
  color: var(--cream);
  font-family: var(--font-sans);
  font-feature-settings: "ss01","cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scrollbar-width: none;
  overflow-x: hidden;
  scroll-behavior: smooth;
}
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; }
body {
  position: relative;
  background:
    radial-gradient(70% 44% at 8% -4%,  rgba(172,202,50,0.075) 0%, transparent 62%),
    radial-gradient(64% 40% at 96% 2%,  rgba(229,195,83,0.085) 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(172,202,50,0.05) 0%, transparent 64%),
    linear-gradient(180deg, var(--ink-800) 0%, var(--ink-900) 58%, #14161B 100%);
  background-attachment: fixed;
}
img { max-width: 100%; }
::selection { background: var(--lime); color: var(--ink-900); }

/* ── Film grain. Two layers: static noise + a slow drifting scanline.
     Both barely visible on their own; together they stop the flats
     from reading as flat. ── */
.grain, .scan {
  position: fixed; inset: -50%; z-index: 1; pointer-events: none;
}
.grain {
  opacity: 0.045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grainShift 8s steps(6) infinite;
}
@keyframes grainShift {
  0%   { transform: translate(0,0); }
  20%  { transform: translate(-6px,4px); }
  40%  { transform: translate(4px,-7px); }
  60%  { transform: translate(-3px,-4px); }
  80%  { transform: translate(6px,3px); }
  100% { transform: translate(0,0); }
}
.scan {
  inset: 0; opacity: 0.34;
  background: repeating-linear-gradient(180deg, var(--sf-faint) 0 1px, transparent 1px 3px);
}
/* Vignette — the page is seen through a lens. */
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 clamp(140px, 20vw, 300px) rgba(0,0,0,0.34);
}

/* ══ Reticle: the signature. Four corner brackets drawn with one
     pseudo-element so any panel can become "framed". ══ */
.vf { position: relative; }
.vf::after {
  content: ''; position: absolute; inset: -1px; pointer-events: none; z-index: 4;
  --c: var(--rc, rgba(172,202,50,0.55));
  --s: var(--rs, 16px);
  background:
    linear-gradient(var(--c),var(--c)) 0    0    / 1px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 0    0    / var(--s) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0    / 1px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0    / var(--s) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 0    100% / 1px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 0    100% / var(--s) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100% / 1px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100% / var(--s) 1px no-repeat;
}
.vf.gold::after { --rc: rgba(229,195,83,0.55); }

/* ── Scroll progress: lime hands off to gold as you go. ── */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0%;
  z-index: 60;
  background: linear-gradient(90deg, var(--lime) 0%, var(--lime-bright) 45%, var(--gold) 100%);
  box-shadow: 0 0 12px rgba(172,202,50,0.55);
  transition: width 0.08s linear;
}

/* ══════════ NAV ══════════ */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 13px var(--gutter);
  background: rgba(24,27,33,0.72);
  backdrop-filter: blur(16px) saturate(1.3); -webkit-backdrop-filter: blur(16px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, border-color 0.3s ease, padding 0.3s var(--ease);
}
.nav.scrolled { background: rgba(24,27,33,0.93); border-bottom-color: var(--line); padding-top: 10px; padding-bottom: 10px; }
.nav-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; flex-shrink: 0; }
.nav-brand img { width: 34px; height: 34px; filter: drop-shadow(0 0 14px var(--lime-glow)); }
.wordmark {
  font-weight: 900; font-size: 0.98rem; letter-spacing: -0.03em;
  color: var(--cream); display: flex; align-items: center; gap: 6px;
}
.wordmark .dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--lime); box-shadow: 0 0 9px var(--lime-glow);
}
.wordmark .product { font-weight: 500; color: var(--cream-dim); letter-spacing: -0.01em; }

.nav-links { flex: 1; display: flex; justify-content: center; align-items: center; gap: clamp(14px, 2vw, 28px); }
.nav-link {
  font-family: var(--font-mono);
  font-size: 0.69rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-dim); text-decoration: none;
  position: relative; padding: 5px 0;
  transition: color 0.18s ease;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: var(--lime); transform: scaleX(0); transform-origin: center;
  box-shadow: 0 0 8px var(--lime-glow);
  transition: transform 0.26s var(--ease);
}
.nav-link:hover { color: var(--cream); }
.nav-link.active { color: var(--lime); }
.nav-link.active::after { transform: scaleX(1); }

.nav-actions { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.nav-signin {
  font-family: var(--font-mono);
  font-size: 0.69rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--cream-mid); text-decoration: none;
  transition: color 0.18s ease;
}
.nav-signin:hover { color: var(--lime); }
.nav-cta {
  position: relative; overflow: hidden;
  padding: 9px 22px; border-radius: 999px;
  background: var(--gold); color: var(--on-accent);
  font-weight: 800; font-size: 0.82rem; letter-spacing: -0.01em;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.18s ease;
}
.nav-cta:hover { transform: translateY(-1px); background: var(--gold-bright); box-shadow: 0 10px 30px rgba(229,195,83,0.36); }

/* Burger + drawer — the old page simply hid its nav on phones. */
.nav-burger {
  display: none; width: 40px; height: 40px; padding: 0;
  border: 1px solid var(--line-strong); border-radius: 11px;
  background: var(--sf-mid); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-burger span { display: block; width: 16px; height: 1.5px; background: var(--cream); border-radius: 2px; transition: transform 0.3s var(--ease), opacity 0.2s ease; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.25px) rotate(-45deg); }
.nav-drawer {
  position: fixed; inset: 0 0 auto; top: 0; z-index: 49;
  padding: 84px var(--gutter) 32px;
  background: rgba(22,25,30,0.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 2px;
  transform: translateY(-101%); transition: transform 0.42s var(--ease);
}
.nav-drawer.open { transform: translateY(0); }
.nav-drawer a {
  padding: 15px 4px; text-decoration: none; color: var(--cream);
  font-family: var(--font-serif); font-size: 1.5rem; font-weight: 600;
  border-bottom: 1px solid var(--line);
  display: flex; align-items: baseline; gap: 12px;
}
.nav-drawer a .ix { font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; color: var(--lime); }
.nav-drawer .drawer-cta { margin-top: 20px; border: 0; }

@media (max-width: 940px) {
  .nav-links { display: none; }
  .nav { justify-content: space-between; }
  .nav-burger { display: flex; }
}
@media (min-width: 941px) { .nav-drawer { display: none; } }
@media (max-width: 420px) { .nav-signin { display: none; } }

/* ══════════ SHARED SCAFFOLDING ══════════ */
.section { padding: clamp(76px, 11vh, 136px) var(--gutter); position: relative; z-index: 2; }
.section.alt { background: var(--sf-faint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.inner { max-width: var(--maxw); margin: 0 auto; }

/* Film sprocket rail — the divider between chapters. */
.sprocket {
  position: relative; z-index: 2; height: 20px;
  background-image: radial-gradient(circle at 10px 50%, rgba(242,244,238,0.11) 0 3px, transparent 3.4px);
  background-size: 28px 100%;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-mono);
  font-size: 0.66rem; font-weight: 600;
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--lime); margin-bottom: 18px;
}
.eyebrow::before { content: ''; width: 20px; height: 1px; background: var(--lime); opacity: 0.7; }
.eyebrow .ix { color: var(--cream-faint); font-weight: 400; letter-spacing: 0.18em; }

.display {
  font-family: var(--font-serif); font-weight: 600;
  letter-spacing: -0.012em; color: var(--cream); margin: 0;
  line-height: 1.04;
}
.display em { font-style: italic; color: var(--gold); }
.section-head { max-width: 680px; margin: 0 auto clamp(48px, 6vw, 72px); text-align: center; }
.section-head .display { font-size: clamp(2.1rem, 4.4vw, 3.2rem); }
.section-head p { margin: 18px 0 0; color: var(--cream-mid); font-size: clamp(0.98rem,1.4vw,1.08rem); line-height: 1.68; }
.lede { color: var(--cream-mid); line-height: 1.72; font-size: clamp(1rem,1.5vw,1.14rem); }

/* ══════════ BUTTONS ══════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 27px; border-radius: 999px;
  font-family: var(--font-sans); font-weight: 700; font-size: 0.91rem; letter-spacing: -0.008em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  position: relative; overflow: hidden;
  transition: transform 0.16s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn .arw { transition: transform 0.24s var(--ease); }
.btn:hover .arw { transform: translateX(3px); }
.btn.primary { background: var(--gold); color: var(--on-accent); box-shadow: 0 12px 32px rgba(229,195,83,0.22); }
.btn.primary:hover { transform: translateY(-2px); background: var(--gold-bright); box-shadow: 0 18px 44px rgba(229,195,83,0.34); }
/* Shutter sweep — a light wipes across on hover, like a curtain firing. */
.btn.primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,0.55) 50%, transparent 62%);
  transform: translateX(-120%); transition: transform 0.55s var(--ease);
}
.btn.primary:hover::before { transform: translateX(120%); }
.btn.ghost { color: var(--cream); border-color: var(--line-strong); background: var(--sf-lo); }
.btn.ghost:hover { border-color: var(--lime); color: var(--lime); background: var(--lime-soft); transform: translateY(-2px); }
.btn.lime { background: var(--lime); color: var(--on-accent); box-shadow: 0 12px 32px rgba(172,202,50,0.22); }
.btn.lime:hover { transform: translateY(-2px); background: var(--lime-bright); box-shadow: 0 18px 44px rgba(172,202,50,0.34); }

/* ══════════ HERO ══════════ */
.hero { padding: clamp(44px, 7vh, 86px) var(--gutter) clamp(56px, 9vh, 104px); position: relative; z-index: 2; }
.hero-inner {
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(36px, 5vw, 76px); align-items: center;
}
.hero-copy { min-width: 0; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 7px 8px 7px 14px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--sf-lo);
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 600;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--cream-mid);
  margin-bottom: 26px;
}
.hero-eyebrow .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 11px var(--lime); }
.hero-eyebrow .tag { padding: 3px 10px; border-radius: 999px; background: var(--lime-soft); border: 1px solid rgba(172,202,50,0.3); color: var(--lime); letter-spacing: 0.15em; }

.hero h1 {
  font-family: var(--font-serif); font-weight: 600;
  font-size: clamp(2.9rem, 6.4vw, 5.3rem); line-height: 0.98; letter-spacing: -0.022em;
  margin: 0 0 24px;
}
.hero h1 .l1 { display: block; color: var(--cream); }
.hero h1 .l2 { display: block; font-style: italic; color: var(--gold); position: relative; }
/* Hairline under the italic line, drawn on load like an exposure bar. */
.hero h1 .l2::after {
  content: ''; position: absolute; left: 0.06em; bottom: 0.04em; height: 2px; width: 0;
  background: linear-gradient(90deg, var(--gold), transparent);
  animation: expose 1.5s 0.5s var(--ease) forwards;
}
@keyframes expose { to { width: 3.4em; } }

.hero-sub { max-width: 520px; margin: 0 0 32px; color: var(--cream-mid); line-height: 1.68; font-size: clamp(1rem,1.5vw,1.12rem); }
.hero-sub strong { color: var(--cream); font-weight: 600; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-meta { margin-top: 18px; font-family: var(--font-mono); font-size: 0.65rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream-faint); }
.hero-meta .accent { color: var(--lime); margin-right: 7px; }

.trust-strip { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 8px; }
.trust-strip span {
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: var(--sf-lo);
  font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.15em;
  text-transform: uppercase; color: var(--cream-dim);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.trust-strip span::before { content: '◆'; color: var(--gold); margin-right: 8px; font-size: 0.76em; opacity: 0.9; }
.trust-strip span:hover { border-color: rgba(172,202,50,0.4); color: var(--cream); }

@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; gap: 52px; text-align: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: center; }
  .hero-ctas, .trust-strip { justify-content: center; }
  .hero h1 .l2::after { left: 50%; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--gold), transparent); }
}

/* ══════════ THE CAPTURE MODULE ══════════
   The hero doesn't illustrate the product — it runs it. A real
   countdown, a real flash, three frames that develop, then the QR
   hand-off. The whole loop is what a guest actually experiences. */
.capture { position: relative; display: flex; justify-content: center; padding: 8px 0; }
.capture::before {
  content: ''; position: absolute; inset: -10% -6%;
  background: radial-gradient(58% 58% at 50% 42%, rgba(229,195,83,0.13), transparent 72%);
  filter: blur(10px);
}
.cap-shell {
  --rs: 20px;
  position: relative; width: min(100%, 440px);
  border-radius: 20px; padding: 12px;
  background: linear-gradient(165deg, rgba(44,48,59,0.9), rgba(24,27,33,0.94));
  border: 1px solid var(--line-strong);
  box-shadow: 0 50px 100px -34px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.06);
}

.cap-hud {
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cream-faint); padding: 3px 4px 11px;
}
.cap-hud .hud-l { display: inline-flex; align-items: center; gap: 7px; color: var(--lime); }
.cap-hud .rec { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 9px var(--lime); }

.cap-body { display: grid; grid-template-columns: 1fr 92px; gap: 12px; }

/* The lens: what the camera currently sees. */
.cap-lens {
  position: relative; border-radius: 12px; overflow: hidden;
  aspect-ratio: 4 / 3; background: var(--ink-900);
  border: 1px solid rgba(255,255,255,0.06);
}
.cap-scene {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  transform: scale(1.06);
  filter: brightness(0.66) contrast(1.1) saturate(1.06);
  transition: opacity 0.5s ease, transform 6s linear;
}
.cap-lens::after {
  /* lens falloff + a warm key light where the subject would stand */
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(42% 48% at 50% 44%, rgba(255,240,205,0.22), transparent 68%),
    radial-gradient(112% 94% at 50% 48%, transparent 28%, rgba(0,0,0,0.5) 72%, rgba(0,0,0,0.6) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.16), transparent 34%, var(--well));
}
/* Focus reticle drawn over the lens. */
.cap-ret {
  position: absolute; inset: 26% 30%; z-index: 3; pointer-events: none;
  --c: rgba(242,244,238,0.72); --s: 11px;
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
  background:
    linear-gradient(var(--c),var(--c)) 0    0    / 1px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 0    0    / var(--s) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0    / 1px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0    / var(--s) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 0    100% / 1px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 0    100% / var(--s) 1px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100% / 1px var(--s) no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100% / var(--s) 1px no-repeat;
  transition: inset 0.5s var(--ease), opacity 0.3s ease;
}
.cap-lens.locked .cap-ret { inset: 30% 34%; --c: rgba(172,202,50,0.9); }

.cap-count {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-serif); font-weight: 600; font-style: italic;
  font-size: 4.4rem; line-height: 1; color: var(--cream);
  text-shadow: 0 4px 30px rgba(0,0,0,0.58);
  opacity: 0; transform: scale(1.5);
}
.cap-count.tick { animation: tick 0.62s var(--ease); }
@keyframes tick {
  0%   { opacity: 0; transform: scale(1.55); }
  22%  { opacity: 1; transform: scale(1); }
  72%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(0.86); }
}
.cap-flash {
  position: absolute; inset: 0; z-index: 5; background: #fff;
  opacity: 0; pointer-events: none;
}
.cap-flash.fire { animation: flash 0.5s ease-out; }
@keyframes flash {
  0%   { opacity: 0; }
  6%   { opacity: 0.95; }
  100% { opacity: 0; }
}

/* The strip filling up, one frame per shot. */
.cap-strip {
  background: #fffdf6; border-radius: 5px; padding: 7px 7px 17px;
  display: flex; flex-direction: column; gap: 5px; position: relative;
  box-shadow: 0 18px 38px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.6);
}
.cap-strip::after {
  content: '♡ cybercolt'; position: absolute; left: 0; right: 0; bottom: 5px;
  text-align: center; font-family: var(--font-mono); font-size: 0.4rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep);
}
.cap-strip i {
  display: block; flex: 1; border-radius: 2px; background: #3a3630 no-repeat center / cover;
  position: relative; overflow: hidden;
  filter: blur(6px) saturate(0.2) brightness(0.7); opacity: 0.85;
  transition: filter 1.05s var(--ease), opacity 0.6s ease, box-shadow 0.6s ease;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.16);
}
.cap-strip i.dev { filter: brightness(0.86) contrast(1.06) saturate(1.04); opacity: 1; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1); }
.cap-strip i::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(48% 54% at 50% 44%, rgba(255,238,200,0.24), transparent 72%);
}

.cap-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 4px 3px;
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
}
.cap-state { color: var(--lime); min-width: 96px; }
.cap-state.sent { color: var(--gold); }
.cap-bar { flex: 1; height: 2px; border-radius: 2px; background: rgba(242,244,238,0.1); overflow: hidden; }
.cap-bar b { display: block; height: 100%; width: 0%; background: var(--lime); box-shadow: 0 0 8px var(--lime-glow); transition: width 0.4s linear; }
.cap-bar b.done { background: var(--gold); box-shadow: 0 0 8px var(--gold-glow); }
.cap-frames { color: var(--cream-faint); }
.cap-frames b { color: var(--cream); font-weight: 700; }

/* The delivery card that flies in when the strip is sent. */
.cap-deliver {
  position: absolute; left: -26px; bottom: 58px; z-index: 6;
  width: 150px; padding: 12px;
  border-radius: 14px;
  background: rgba(26,29,35,0.94); border: 1px solid rgba(172,202,50,0.34);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 26px 54px rgba(0,0,0,0.6);
  opacity: 0; transform: translateY(14px) scale(0.94);
  transition: opacity 0.4s ease, transform 0.5s var(--ease);
}
.cap-deliver.show { opacity: 1; transform: translateY(0) scale(1); }
.cap-deliver .dl-ttl {
  display: flex; align-items: center; gap: 7px; margin-bottom: 9px;
  font-family: var(--font-mono); font-size: 0.53rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime);
}
.cap-deliver .dl-ttl .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 7px var(--lime); }
.cap-deliver .dl-qr { width: 100%; aspect-ratio: 1; border-radius: 8px; background: #fff; padding: 7px; }
.cap-deliver .dl-qr svg { width: 100%; height: 100%; display: block; }
.cap-deliver .dl-cap { margin-top: 8px; font-family: var(--font-mono); font-size: 0.5rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cream-faint); text-align: center; }

@media (max-width: 520px) {
  .cap-body { grid-template-columns: 1fr 72px; }
  .cap-count { font-size: 3.3rem; }
  .cap-deliver { width: 104px; left: -14px; bottom: 4px; }
  .cap-state { min-width: 80px; letter-spacing: 0.1em; }
}

/* ══════════ MARQUEE ══════════ */
.marquee-band { position: relative; z-index: 2; padding: 20px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); overflow: hidden; background: rgba(0,0,0,0.18); }
.marquee-band::before, .marquee-band::after { content: ''; position: absolute; top: 0; bottom: 0; width: 110px; pointer-events: none; z-index: 2; }
.marquee-band::before { left: 0;  background: linear-gradient(90deg,  var(--ink-900), transparent); }
.marquee-band::after  { right: 0; background: linear-gradient(270deg, var(--ink-900), transparent); }
.marquee-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: marquee 46s linear infinite; }
.marquee-track .item { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream-faint); white-space: nowrap; display: inline-flex; align-items: center; gap: 16px; transition: color 0.3s ease; }
.marquee-track .item:hover { color: var(--cream); }
.marquee-track .item .sep { color: var(--lime); opacity: 0.6; font-size: 0.8em; }
.marquee-band:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ══════════ SPLIT SECTIONS ══════════ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(38px, 6vw, 84px); align-items: center; }
.split.reverse .split-visual { order: -1; }
@media (max-width: 880px) { .split { grid-template-columns: 1fr; gap: 44px; } .split.reverse .split-visual { order: 0; } }
.split-copy .display { font-size: clamp(2rem, 3.8vw, 2.9rem); margin-bottom: 18px; }
.split-copy .lede { margin-bottom: 26px; }
.split-list { list-style: none; padding: 0; margin: 0 0 30px; display: flex; flex-direction: column; gap: 16px; }
.split-list li { display: flex; gap: 13px; align-items: flex-start; color: var(--cream-mid); font-size: 0.98rem; line-height: 1.6; }
.split-list .ck { flex-shrink: 0; width: 23px; height: 23px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: var(--lime-soft); border: 1px solid rgba(172,202,50,0.32); color: var(--lime); margin-top: 1px; }
.split-list .ck svg { width: 12px; height: 12px; }
.split-list b { color: var(--cream); font-weight: 600; }

/* Showcase cluster — strip + QR + gallery, framed like a contact sheet */
.showcase { position: relative; min-height: 430px; display: flex; align-items: center; justify-content: center; }
.showcase .frame {
  --rs: 22px;
  position: relative; width: min(100%, 450px); aspect-ratio: 4 / 3;
  border-radius: 20px;
  background:
    radial-gradient(120% 120% at 18% 8%, rgba(172,202,50,0.10), transparent 52%),
    radial-gradient(110% 110% at 92% 96%, rgba(229,195,83,0.10), transparent 55%),
    linear-gradient(160deg, var(--ink-400), var(--ink-900));
  border: 1px solid var(--line-strong);
  box-shadow: 0 44px 96px -32px rgba(0,0,0,0.56);
}
.showcase .frame > .mesh {
  position: absolute; inset: 0; border-radius: 20px; overflow: hidden;
  background-image: radial-gradient(circle, rgba(242,244,238,0.05) 1px, transparent 1.4px);
  background-size: 26px 26px; opacity: 0.55;
}
.showcase .strip {
  position: absolute; top: 50%; left: 36px; transform: translateY(-50%) rotate(-5deg);
  width: 106px; aspect-ratio: 2 / 6; background: #fffdf6; border-radius: 5px;
  padding: 8px 8px 20px; display: flex; flex-direction: column; gap: 5px;
  box-shadow: 0 24px 46px rgba(0,0,0,0.55); z-index: 2;
  transition: transform 0.5s var(--ease);
}
.showcase:hover .strip { transform: translateY(-50%) rotate(-2deg) scale(1.03); }
.showcase .strip .p { flex: 1; border-radius: 2px; background: #cbc4b8 no-repeat center / cover; position: relative; }
.showcase .strip .p::after { content: ''; position: absolute; inset: 0; background: radial-gradient(48% 54% at 50% 44%, rgba(255,240,206,0.2), transparent 70%); }
.showcase .strip::after { content: '♡ cybercolt'; position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-family: var(--font-mono); font-size: 0.4rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.showcase .card {
  position: absolute; border-radius: 14px; padding: 13px;
  background: rgba(26,29,35,0.92); border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 22px 46px rgba(0,0,0,0.5); z-index: 3;
  transition: transform 0.5s var(--ease), border-color 0.3s ease;
}
.showcase .card .ttl { font-family: var(--font-mono); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-dim); margin-bottom: 9px; display: flex; align-items: center; gap: 7px; }
.showcase .card .ttl .dot { width: 5px; height: 5px; border-radius: 50%; }
.showcase .qr-card { top: 26px; right: 26px; width: 118px; }
.showcase .qr-card .ttl .dot { background: var(--gold); box-shadow: 0 0 7px var(--gold); }
.showcase:hover .qr-card { transform: translateY(-4px); border-color: rgba(229,195,83,0.42); }
.showcase .qr { width: 92px; height: 92px; border-radius: 8px; background: #fff; padding: 7px; }
.showcase .qr svg { width: 100%; height: 100%; display: block; }
.showcase .gal-card { bottom: 26px; right: 20px; width: 156px; }
.showcase .gal-card .ttl .dot { background: var(--lime); box-shadow: 0 0 7px var(--lime); }
.showcase:hover .gal-card { transform: translateY(4px); border-color: rgba(172,202,50,0.42); }
.showcase .gal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; }
.showcase .gal-grid i { display: block; aspect-ratio: 1; border-radius: 4px; background: #b9b2a6 no-repeat center / cover; }
@media (max-width: 470px) {
  .showcase .qr-card { width: 98px; } .showcase .qr { width: 74px; height: 74px; }
  .showcase .gal-card { width: 126px; }
}

/* ══════════ BOOTH ══════════ */
.booth-visual { position: relative; display: flex; justify-content: center; }
.booth-visual::before {
  content: ''; position: absolute; inset: -8% -5%; z-index: 0;
  background: radial-gradient(58% 58% at 50% 40%, rgba(229,195,83,0.16), transparent 72%);
  filter: blur(10px);
}
.booth-frame {
  --rs: 22px;
  position: relative; z-index: 1;
  width: min(100%, 470px); border-radius: 20px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 54px 104px -34px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.05);
  animation: boothFloat 9s ease-in-out infinite;
}
@keyframes boothFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-13px); } }
.booth-frame > .clip { border-radius: 20px; overflow: hidden; position: relative; display: block; }
.booth-frame img { display: block; width: 100%; height: auto; }
.booth-frame .clip::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 58%, rgba(13,15,18,0.34));
}
.booth-badge {
  position: absolute; z-index: 5; bottom: 15px; left: 15px;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(24,27,33,0.88); border: 1px solid rgba(172,202,50,0.42);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime);
}
.booth-badge .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 10px var(--lime); }
/* Dimension callout — reads as a spec drawing, not a sticker. */
.booth-dim {
  position: absolute; z-index: 5; top: 16px; right: 16px;
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-mid);
  padding: 6px 11px; border-radius: 8px;
  background: rgba(24,27,33,0.84); border: 1px solid var(--line-strong);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.booth-dim b { color: var(--gold); font-weight: 700; }

.spec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 30px; }
.spec-row .spec-label { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.17em; text-transform: uppercase; color: var(--cream-faint); margin-right: 2px; }
.spec-chip { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--cream); padding: 7px 14px; border-radius: 10px; border: 1px solid var(--line-strong); background: var(--sf-mid); transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
.spec-chip:hover { border-color: rgba(172,202,50,0.5); color: var(--lime); transform: translateY(-2px); }
.spec-chip .u { color: var(--gold); margin-left: 1px; }

/* ══════════ BENTO ══════════ */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 14px; }
@media (max-width: 880px) { .bento { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .bento { grid-template-columns: 1fr; } }
.tile {
  position: relative; padding: 28px 26px; border-radius: 16px;
  background: linear-gradient(180deg, var(--sf-hi), var(--sf-faint));
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}
/* A lime glow tracks the cursor across the tile. */
.tile::before {
  content: ''; position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(172,202,50,0.13), transparent 70%);
  transition: opacity 0.3s ease;
}
.tile:hover::before { opacity: 1; }
.tile:hover { transform: translateY(-4px); border-color: rgba(172,202,50,0.36); box-shadow: 0 28px 56px -30px rgba(0,0,0,0.58); }
.tile > * { position: relative; z-index: 1; }
.tile.wide { grid-column: span 2; }
@media (max-width: 580px) { .tile.wide { grid-column: span 1; } }
.tile.feature { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
/* Mono index in the corner — the contact-sheet numbering. */
.tile .ix {
  position: absolute; top: 18px; right: 20px; z-index: 1;
  font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600;
  letter-spacing: 0.14em; color: var(--cream-faint);
}
.tile .ico { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--lime-soft); border: 1px solid rgba(172,202,50,0.3); color: var(--lime); margin-bottom: 18px; transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s var(--ease); }
.tile:hover .ico { transform: translateY(-2px) scale(1.05); border-color: rgba(172,202,50,0.55); }
.tile .ico svg { width: 21px; height: 21px; }
.tile h3 { font-family: var(--font-sans); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.018em; margin: 0 0 9px; color: var(--cream); display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.tile p { margin: 0; font-size: 0.91rem; line-height: 1.65; color: var(--cream-dim); }
.addon-tag { font-family: var(--font-mono); font-size: 0.52rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold); padding: 3px 8px; border-radius: 999px; background: var(--gold-soft); border: 1px solid rgba(229,195,83,0.3); }
.tile.hero-tile { background: linear-gradient(150deg, rgba(229,195,83,0.13), var(--sf-faint)); border-color: rgba(229,195,83,0.24); }
.tile.hero-tile::before { background: radial-gradient(240px circle at var(--mx,50%) var(--my,50%), rgba(229,195,83,0.16), transparent 70%); }
.tile.hero-tile:hover { border-color: rgba(229,195,83,0.5); }
.tile.hero-tile .big { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: clamp(1.75rem, 3vw, 2.4rem); color: var(--cream); line-height: 1.1; margin: 0 0 12px; }
.tile.hero-tile .big em { color: var(--gold); font-style: normal; }
/* Pipeline readout in the highlight tile — the software talking. */
.pipe { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.pipe span { font-family: var(--font-mono); font-size: 0.55rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cream-dim); padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--well); }
.pipe span b { color: var(--lime); font-weight: 700; }

/* ══════════ BACKDROPS ══════════ */
.drops { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
@media (max-width: 900px) { .drops { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .drops { grid-template-columns: repeat(3, 1fr); } }
.drop {
  position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 4;
  border: 1px solid var(--line); background: var(--ink-700);
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.drop img { display: block; width: 100%; height: 100%; object-fit: cover; }
.drop figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 9px 8px;
  background: linear-gradient(180deg, transparent, rgba(10,12,15,0.9));
  font-family: var(--font-mono); font-size: 0.53rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--cream-mid);
  text-align: center;
}
.drop:hover { transform: translateY(-5px); border-color: rgba(229,195,83,0.45); box-shadow: 0 22px 44px -20px rgba(0,0,0,0.58); }
.drop:hover figcaption { color: var(--gold); }
.drop.own {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(160deg, rgba(172,202,50,0.1), var(--sf-faint));
  border-color: rgba(172,202,50,0.3); border-style: dashed;
  text-align: center; padding: 12px;
}
.drop.own .plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(172,202,50,0.5); color: var(--lime); display: flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; }
.drop.own span { font-family: var(--font-mono); font-size: 0.53rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--lime); }
.drops-note { margin-top: 20px; text-align: center; font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream-faint); }

/* ══════════ HOW IT WORKS ══════════ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; position: relative; }
@media (max-width: 780px) { .steps { grid-template-columns: 1fr; gap: 14px; } }
.step {
  position: relative; padding: 32px 28px; border-radius: 16px;
  background: var(--sf-lo); border: 1px solid var(--line);
  transition: border-color 0.3s ease, transform 0.3s var(--ease), background 0.3s ease;
  overflow: hidden;
}
.step:hover { border-color: rgba(172,202,50,0.32); transform: translateY(-3px); background: var(--sf-mid); }
/* A lime rail fills down the left edge on hover. */
.step::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--lime), transparent);
  transform: scaleY(0); transform-origin: top;
  transition: transform 0.45s var(--ease);
}
.step:hover::before { transform: scaleY(1); }
.step .num { font-family: var(--font-serif); font-style: italic; font-weight: 600; font-size: 2.9rem; line-height: 1; color: var(--gold); margin-bottom: 16px; }
.step .num small { font-family: var(--font-mono); font-style: normal; font-size: 0.22em; font-weight: 600; letter-spacing: 0.2em; color: var(--cream-faint); vertical-align: super; margin-left: 6px; }
.step h3 { font-weight: 700; font-size: 1.06rem; letter-spacing: -0.018em; margin: 0 0 9px; color: var(--cream); }
.step p { margin: 0; color: var(--cream-dim); font-size: 0.92rem; line-height: 1.65; }

/* ══════════ PACKAGES ══════════ */
.packages { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; }
@media (max-width: 740px) { .packages { grid-template-columns: 1fr; } }
.pkg { position: relative; padding: 36px 32px; border-radius: 18px; background: linear-gradient(180deg, var(--sf-hi), var(--sf-faint)); border: 1px solid var(--line); display: flex; flex-direction: column; transition: transform 0.3s var(--ease), border-color 0.3s ease; }
.pkg:hover { transform: translateY(-4px); border-color: var(--line-strong); }
.pkg.featured { --rs: 20px; border-color: rgba(229,195,83,0.38); background: linear-gradient(180deg, rgba(229,195,83,0.11), var(--sf-faint)); box-shadow: 0 34px 76px -34px rgba(0,0,0,0.55); }
.pkg.featured:hover { border-color: rgba(229,195,83,0.6); }
.pkg .badge { position: absolute; top: -11px; left: 32px; z-index: 5; font-family: var(--font-mono); font-size: 0.56rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-accent); background: var(--gold); padding: 5px 12px; border-radius: 999px; box-shadow: 0 6px 18px rgba(229,195,83,0.3); }
.pkg .pkg-kicker { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--lime); margin-bottom: 12px; }
.pkg .pkg-name { font-family: var(--font-serif); font-weight: 600; font-size: 1.85rem; color: var(--cream); margin-bottom: 5px; line-height: 1.1; }
.pkg .pkg-sub { font-size: 0.87rem; color: var(--cream-dim); margin-bottom: 24px; }
.pkg ul { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 13px; flex: 1; }
.pkg li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.93rem; color: var(--cream-mid); line-height: 1.55; }
.pkg li .ck { flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; background: var(--lime-soft); border: 1px solid rgba(172,202,50,0.32); color: var(--lime); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.pkg.featured li .ck { background: var(--gold-soft); border-color: rgba(229,195,83,0.34); color: var(--gold); }
.pkg li .ck svg { width: 11px; height: 11px; }
.pkg .btn { width: 100%; }

/* ══════════ TELEMETRY / STATS ══════════ */
.readout {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  max-width: 1000px; margin: 0 auto;
  background: var(--line); border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
}
@media (max-width: 640px) { .readout { grid-template-columns: repeat(2, 1fr); } }
.rd { position: relative; text-align: center; padding: 36px 20px; background: var(--ink-800); transition: background 0.3s ease; }
.rd:hover { background: var(--ink-700); }
.rd .v { font-family: var(--font-serif); font-weight: 600; font-size: clamp(2.3rem, 4.2vw, 3.1rem); color: var(--cream); line-height: 1; }
.rd .v .u { color: var(--gold); font-size: 0.4em; margin-left: 3px; vertical-align: super; font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.02em; }
.rd .lbl { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-dim); margin-top: 14px; }
.rd::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; width: 0; height: 1px; background: var(--lime); box-shadow: 0 0 8px var(--lime-glow); transition: width 0.5s var(--ease); }
.rd:hover::after { width: 46px; }

/* ══════════ CTA ══════════ */
.cta-band { position: relative; z-index: 2; text-align: center; padding: clamp(88px, 14vh, 148px) var(--gutter); overflow: hidden; }
.cta-band::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(50% 62% at 34% 50%, rgba(172,202,50,0.10), transparent 66%),
    radial-gradient(50% 62% at 66% 50%, rgba(229,195,83,0.13), transparent 66%);
}
.cta-band .inner { position: relative; }
.cta-band .display { font-size: clamp(2.4rem, 5.4vw, 3.6rem); margin-bottom: 18px; }
.cta-band p { max-width: 580px; margin: 0 auto 32px; color: var(--cream-mid); font-size: clamp(0.98rem,1.5vw,1.09rem); line-height: 1.68; }
.cta-band .actions { display: inline-flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cta-band .fineprint { margin-top: 26px; font-family: var(--font-mono); font-size: 0.63rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream-faint); }
.cta-band .fineprint .accent { color: var(--lime); }

/* ══════════ FOOTER ══════════ */
.footer { position: relative; z-index: 2; padding: clamp(60px, 8vw, 92px) var(--gutter) 34px; border-top: 1px solid var(--line); background: rgba(20,23,28,0.7); }
.footer-inner { max-width: var(--maxw); margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr; gap: clamp(30px, 4vw, 60px); }
@media (max-width: 840px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 38px 28px; } }
@media (max-width: 500px) { .footer-top { grid-template-columns: 1fr; gap: 32px; } }
.footer-brand { display: flex; align-items: center; gap: 13px; }
.footer-brand img { width: 52px; height: 52px; opacity: 0.95; filter: drop-shadow(0 0 20px var(--lime-glow)); }
.footer-tag { margin: 18px 0; color: var(--cream-dim); font-size: 0.9rem; line-height: 1.7; max-width: 370px; }
.footer-email { display: inline-block; color: var(--gold); text-decoration: none; font-weight: 600; font-size: 0.93rem; border-bottom: 1px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; }
.footer-email:hover { color: var(--gold-bright); border-bottom-color: currentColor; }
.footer-social { margin-top: 18px; display: flex; gap: 9px; }
.footer-social a { width: 35px; height: 35px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line-strong); color: var(--cream-dim); transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease, background 0.2s ease; }
.footer-social a:hover { color: var(--lime); border-color: rgba(172,202,50,0.5); background: var(--lime-soft); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; }
.footer-col h4 { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-faint); margin: 0 0 18px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.footer-col a { color: var(--cream-dim); text-decoration: none; font-size: 0.89rem; transition: color 0.18s ease, padding-left 0.22s var(--ease); }
.footer-col a:hover { color: var(--lime); padding-left: 4px; }
.footer-bottom { margin-top: clamp(44px, 5vw, 60px); padding-top: 24px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; justify-content: space-between; }
.footer-bottom .meta, .footer-bottom .legal a { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream-faint); }
.footer-bottom .legal { display: flex; gap: 18px; }
.footer-bottom .legal a { text-decoration: none; transition: color 0.18s ease; }
.footer-bottom .legal a:hover { color: var(--lime); }

/* ══════════ FLOATING CHROME ══════════ */
.cc-watermark {
  position: fixed; right: 22px; bottom: 22px; z-index: 40;
  display: inline-flex; align-items: center; gap: 0.42em;
  padding: 8px 16px; background: rgba(24,27,33,0.85);
  border: 1px solid var(--line-strong); border-radius: 980px;
  font-size: 0.73rem; line-height: 1; white-space: nowrap; text-decoration: none;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: 0.66; transition: opacity 0.25s ease, transform 0.25s var(--ease), border-color 0.25s ease;
}
.cc-watermark:hover { opacity: 1; transform: translateY(-2px); border-color: rgba(172,202,50,0.55); }
.cc-watermark .ccwm-handle { color: var(--cream); font-weight: 900; letter-spacing: -0.02em; }
.cc-watermark .ccwm-product { color: var(--cream-dim); font-weight: 400; }
.cc-watermark .ccwm-by { color: var(--cream-dim); font-weight: 500; margin-right: 0.15em; }
.cc-watermark .ccwm-dot { width: 0.4em; height: 0.4em; border-radius: 50%; background: var(--lime); box-shadow: 0 0 7px var(--lime-glow); }
@media (max-width: 620px) { .cc-watermark { right: 14px; bottom: 14px; padding: 7px 12px; font-size: 0.65rem; } }

.to-top {
  position: fixed; right: 22px; bottom: 78px; z-index: 45;
  width: 42px; height: 42px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(24,27,33,0.87); border: 1px solid var(--line-strong); color: var(--cream);
  cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(8px);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  transition: opacity 0.25s ease, transform 0.25s var(--ease), border-color 0.2s, color 0.2s;
}
.to-top.show { opacity: 0.85; pointer-events: auto; transform: translateY(0); }
.to-top:hover { opacity: 1; border-color: rgba(172,202,50,0.6); color: var(--lime); }
.to-top svg { width: 18px; height: 18px; }
@media (max-width: 620px) { .to-top { right: 14px; bottom: 64px; } }

/* ══════════ WHAT SETS US APART — comparison ══════════ */
.cmp { border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--sf-faint); }
.cmp-row { display: grid; grid-template-columns: 1.25fr 1fr 1fr; align-items: stretch; border-bottom: 1px solid var(--line); }
.cmp-row:last-child { border-bottom: 0; }
.cmp-row > div { padding: 17px 18px; font-size: 0.89rem; line-height: 1.58; color: var(--cream-mid); }
.cmp-row .cmp-f { color: var(--cream); font-weight: 600; }
.cmp-row .cmp-f small { display: block; margin-top: 4px; font-weight: 400; font-size: 0.82rem; color: var(--cream-faint); line-height: 1.5; }
.cmp-us { background: rgba(172,202,50,0.055); border-left: 1px solid rgba(172,202,50,0.18); border-right: 1px solid rgba(172,202,50,0.18); color: var(--cream) !important; }
.cmp-us .mk { color: var(--lime); font-weight: 700; margin-right: 7px; }
.cmp-them { color: var(--cream-dim) !important; }
.cmp-them .mk { color: var(--cream-faint); margin-right: 7px; }
.cmp-head > div {
  font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.17em; text-transform: uppercase; padding: 15px 18px;
}
.cmp-head .cmp-f { color: var(--cream-faint); font-weight: 700; }
.cmp-head .cmp-us { color: var(--lime) !important; background: rgba(172,202,50,0.1); }
.cmp-head .cmp-them { color: var(--cream-faint) !important; }
@media (max-width: 780px) {
  .cmp { border: 0; background: none; display: flex; flex-direction: column; gap: 12px; }
  .cmp-head { display: none; }
  .cmp-row { grid-template-columns: 1fr; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
  .cmp-row > div { padding: 13px 16px; }
  .cmp-row .cmp-f { background: var(--sf-mid); }
  .cmp-us, .cmp-them { border: 0 !important; border-top: 1px solid var(--line) !important; }
  .cmp-us::before, .cmp-them::before {
    content: attr(data-l); display: block; margin-bottom: 5px;
    font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700;
    letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream-faint);
  }
  .cmp-us::before { color: var(--lime); }
}

/* ══════════ TWO WAYS TO WORK WITH US ══════════ */
.paths { display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 18px; align-items: stretch; }
@media (max-width: 860px) { .paths { grid-template-columns: 1fr; } }
.path {
  position: relative; display: flex; flex-direction: column;
  padding: clamp(28px, 3vw, 38px); border-radius: 20px;
  background: linear-gradient(175deg, var(--sf-hi), var(--sf-faint));
  border: 1px solid var(--line);
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.path:hover { transform: translateY(-4px); box-shadow: 0 32px 66px -34px rgba(0,0,0,0.58); }
.path.primary {
  --rs: 20px;
  background: linear-gradient(165deg, rgba(172,202,50,0.13), var(--sf-faint));
  border-color: rgba(172,202,50,0.34);
  box-shadow: 0 34px 76px -36px rgba(0,0,0,0.55);
}
.path.primary:hover { border-color: rgba(172,202,50,0.6); }
.path.alt:hover { border-color: rgba(229,195,83,0.42); }
.path .p-tag {
  position: absolute; top: -11px; left: clamp(28px, 3vw, 38px); z-index: 5;
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 12px; border-radius: 999px;
  background: var(--lime); color: var(--on-accent);
  box-shadow: 0 6px 18px rgba(172,202,50,0.3);
}
.path .p-kicker {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 700;
  letter-spacing: 0.19em; text-transform: uppercase; color: var(--lime); margin-bottom: 12px;
}
.path.alt .p-kicker { color: var(--gold); }
.path h3 {
  font-family: var(--font-serif); font-weight: 600; line-height: 1.1;
  font-size: clamp(1.7rem, 2.9vw, 2.15rem); color: var(--cream); margin: 0 0 10px;
}
.path h3 em { font-style: italic; color: var(--lime); }
.path.alt h3 em { color: var(--gold); }
.path > p { margin: 0 0 20px; color: var(--cream-mid); font-size: 0.96rem; line-height: 1.7; }
.path .p-for {
  font-family: var(--font-mono); font-size: 0.57rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-faint);
  padding: 9px 0 16px; border-top: 1px solid var(--line); margin-bottom: 4px;
}
.path .p-for b { color: var(--cream-mid); font-weight: 600; }
.path ul { list-style: none; padding: 0; margin: 0 0 26px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.path li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.92rem; color: var(--cream-mid); line-height: 1.58; }
.path li .ck {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 6px; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  background: var(--lime-soft); border: 1px solid rgba(172,202,50,0.32); color: var(--lime);
}
.path.alt li .ck { background: var(--gold-soft); border-color: rgba(229,195,83,0.32); color: var(--gold); }
.path li .ck svg { width: 11px; height: 11px; }
.path .p-price {
  margin-bottom: 16px; padding: 12px 14px; border-radius: 10px;
  background: var(--well); border: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-faint); line-height: 1.6;
}
.path .p-price b { color: var(--lime); font-weight: 700; }
.path.alt .p-price b { color: var(--gold); }
.path .p-cta { display: flex; flex-direction: column; gap: 9px; }
.path .p-cta .btn { width: 100%; }
.path .p-fine {
  text-align: center; font-family: var(--font-mono); font-size: 0.57rem;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--cream-faint);
}

/* ══════════ EVENT TYPES ══════════ */
.etypes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .etypes { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .etypes { grid-template-columns: 1fr; } }
.etype {
  position: relative; padding: 26px 24px 24px; border-radius: 16px;
  background: linear-gradient(180deg, var(--sf-hi), var(--sf-faint));
  border: 1px solid var(--line); overflow: hidden;
  transition: transform 0.3s var(--ease), border-color 0.3s ease, box-shadow 0.3s ease;
}
.etype:hover { transform: translateY(-4px); border-color: rgba(229,195,83,0.34); box-shadow: 0 26px 52px -30px rgba(0,0,0,0.58); }
.etype .ix { font-family: var(--font-mono); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--lime); }
.etype h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.5rem; line-height: 1.15; color: var(--cream); margin: 10px 0 10px; }
.etype p { margin: 0 0 15px; font-size: 0.9rem; line-height: 1.68; color: var(--cream-dim); }
.etype ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.etype li {
  font-family: var(--font-mono); font-size: 0.55rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-faint);
  padding: 4px 9px; border-radius: 6px; border: 1px solid var(--line); background: var(--well);
}

/* ══════════ SERVICE AREA ══════════ */
.area-band {
  margin-top: clamp(34px, 4vw, 48px); padding: 26px 26px; border-radius: 16px;
  border: 1px solid var(--line); background: var(--well);
  display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center;
}
@media (max-width: 760px) { .area-band { grid-template-columns: 1fr; gap: 14px; } }
.area-band .area-ttl { font-family: var(--font-mono); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase; color: var(--lime); }
.area-list { display: flex; flex-wrap: wrap; gap: 7px; }
.area-list span { font-size: 0.8rem; color: var(--cream-dim); padding: 5px 11px; border-radius: 999px; border: 1px solid var(--line); background: var(--sf-lo); transition: color 0.2s ease, border-color 0.2s ease; }
.area-list span:hover { color: var(--cream); border-color: var(--line-strong); }

/* ══════════ ADD-ONS ══════════ */
.addons { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 900px; margin: 22px auto 0; }
@media (max-width: 760px) { .addons { grid-template-columns: 1fr; } }
.addon {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 18px; border-radius: 13px;
  border: 1px solid var(--line); background: var(--sf-lo);
  transition: border-color 0.25s ease;
}
.addon:hover { border-color: rgba(229,195,83,0.32); }
.addon .ico { flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--gold-soft); border: 1px solid rgba(229,195,83,0.3); color: var(--gold); }
.addon .ico svg { width: 16px; height: 16px; }
.addon h4 { margin: 0 0 4px; font-size: 0.93rem; font-weight: 700; letter-spacing: -0.015em; color: var(--cream); }
.addon p { margin: 0; font-size: 0.84rem; line-height: 1.58; color: var(--cream-dim); }

/* ══════════ FAQ ══════════ */
.faq { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 840px) { .faq { grid-template-columns: 1fr; } }
.faq details {
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
  background: var(--sf-lo); transition: border-color 0.25s ease, background 0.25s ease;
}
.faq details[open] { border-color: rgba(172,202,50,0.3); background: rgba(172,202,50,0.045); }
.faq summary {
  list-style: none; cursor: pointer; padding: 17px 46px 17px 20px; position: relative;
  font-weight: 600; font-size: 0.94rem; letter-spacing: -0.012em; color: var(--cream); line-height: 1.45;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ''; position: absolute; right: 21px; top: 50%; width: 9px; height: 9px;
  border-right: 1.6px solid var(--lime); border-bottom: 1.6px solid var(--lime);
  transform: translateY(-70%) rotate(45deg); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq summary:hover { color: var(--lime); }
.faq .ans { padding: 0 20px 18px; font-size: 0.9rem; line-height: 1.72; color: var(--cream-dim); }
.faq .ans a { color: var(--gold); text-decoration: none; border-bottom: 1px solid rgba(229,195,83,0.4); }
.faq .ans a:hover { color: var(--gold-bright); }
.faq .ans p { margin: 0 0 10px; }
.faq .ans p:last-child { margin-bottom: 0; }

/* ══════════ BOOKING ══════════ */
.book-grid { display: grid; grid-template-columns: 0.88fr 1.12fr; gap: clamp(32px, 5vw, 64px); align-items: start; }
@media (max-width: 920px) { .book-grid { grid-template-columns: 1fr; gap: 40px; } }

.book-aside .display { font-size: clamp(2.1rem, 4.2vw, 3rem); margin-bottom: 16px; }
.book-aside .lede { margin-bottom: 28px; }
.next-steps { list-style: none; padding: 0; margin: 0 0 28px; }
.next-steps li { position: relative; padding: 0 0 22px 40px; }
.next-steps li:last-child { padding-bottom: 0; }
.next-steps li::before {
  content: attr(data-n); position: absolute; left: 0; top: 0;
  width: 25px; height: 25px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; color: var(--lime);
  background: var(--lime-soft); border: 1px solid rgba(172,202,50,0.4);
}
.next-steps li::after {
  content: ''; position: absolute; left: 12px; top: 28px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, rgba(172,202,50,0.4), transparent);
}
.next-steps li:last-child::after { display: none; }
.next-steps b { display: block; color: var(--cream); font-size: 0.95rem; font-weight: 700; margin-bottom: 4px; letter-spacing: -0.012em; }
.next-steps span { color: var(--cream-dim); font-size: 0.88rem; line-height: 1.62; }
.book-assure { display: flex; flex-wrap: wrap; gap: 8px; }
.book-assure span {
  font-family: var(--font-mono); font-size: 0.58rem; font-weight: 600;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--cream-dim);
  padding: 6px 11px; border-radius: 7px; border: 1px solid var(--line); background: var(--well);
}
.book-assure span::before { content: '✓'; color: var(--lime); margin-right: 7px; font-weight: 700; }

.book-card {
  --rs: 20px;
  position: relative; padding: clamp(26px, 3vw, 36px); border-radius: 20px;
  background: linear-gradient(170deg, var(--sf-hi), var(--sf-faint));
  border: 1px solid var(--line-strong);
  box-shadow: 0 40px 90px -38px rgba(0,0,0,0.58);
}
.book-card .bk-ttl { font-family: var(--font-mono); font-size: 0.6rem; font-weight: 700; letter-spacing: 0.19em; text-transform: uppercase; color: var(--lime); margin-bottom: 7px; }
.book-card .bk-sub { font-size: 0.88rem; color: var(--cream-dim); margin-bottom: 24px; line-height: 1.62; }
.bk-form { display: flex; flex-direction: column; gap: 14px; }
.bk-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .bk-row { grid-template-columns: 1fr; } }
.bk-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.bk-field label {
  font-family: var(--font-mono); font-size: 0.57rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: var(--cream-faint);
}
.bk-field label .req { color: var(--lime); margin-left: 3px; }
.bk-field input, .bk-field select, .bk-field textarea {
  width: 100%; padding: 12px 14px; border-radius: 11px;
  border: 1px solid var(--line-strong); background: var(--well);
  color: var(--cream); font-family: inherit; font-size: 0.93rem; outline: none;
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none; appearance: none;
}
.bk-field textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.bk-field input::placeholder, .bk-field textarea::placeholder { color: rgba(242,244,238,0.3); }
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus {
  border-color: var(--lime); background: rgba(0,0,0,0.44);
  box-shadow: 0 0 0 3px rgba(172,202,50,0.14);
}
.bk-field select {
  background-repeat: no-repeat; background-position: right 13px center; background-size: 15px;
  padding-right: 38px; cursor: pointer;
}
.bk-field select option { background: #16181E; color: #F2F4EE; }
.bk-field input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(1); opacity: 0.55; cursor: pointer; }
.bk-submit { margin-top: 6px; width: 100%; }
.bk-note { min-height: 1.2em; font-size: 0.86rem; line-height: 1.5; text-align: center; color: var(--cream-dim); }
.bk-note.ok { color: var(--lime); }
.bk-note.err { color: #E88F86; }
.bk-alt { text-align: center; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--cream-faint); line-height: 1.7; }
.bk-alt a { color: var(--cream-dim); text-decoration: none; border-bottom: 1px solid transparent; }
.bk-alt a:hover { color: var(--gold); border-bottom-color: currentColor; }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.bk-done { display: none; text-align: center; padding: 14px 4px 6px; }
.book-card.sent .bk-form { display: none; }
.book-card.sent .bk-done { display: block; }
.bk-done .tick {
  width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--lime-soft); border: 1px solid rgba(172,202,50,0.45); color: var(--lime);
}
.bk-done .tick svg { width: 24px; height: 24px; }
.bk-done h3 { font-family: var(--font-serif); font-weight: 600; font-size: 1.75rem; color: var(--cream); margin: 0 0 10px; }
.bk-done p { margin: 0 0 8px; color: var(--cream-mid); font-size: 0.93rem; line-height: 1.68; }
.bk-done .ref { margin-top: 14px; font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream-faint); }

/* ══════════ STICKY MOBILE BOOKING BAR ══════════ */
.sticky-book {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 44;
  display: none; align-items: center; gap: 12px;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: rgba(22,25,30,0.96);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--line-strong);
  transform: translateY(102%); transition: transform 0.4s var(--ease);
}
.sticky-book.show { transform: translateY(0); }
.sticky-book .sb-copy { flex: 1; min-width: 0; }
.sticky-book .sb-l1 { font-weight: 700; font-size: 0.86rem; color: var(--cream); letter-spacing: -0.015em; }
.sticky-book .sb-l2 { font-family: var(--font-mono); font-size: 0.55rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream-faint); margin-top: 2px; }
.sticky-book .btn { padding: 11px 20px; font-size: 0.85rem; flex-shrink: 0; }
@media (max-width: 800px) {
  .sticky-book { display: flex; }
  .cc-watermark { display: none; }
  .to-top { bottom: 86px; }
}

/* ══════════ PROSE (long-form explainer) ══════════ */
.prose { max-width: 760px; margin: 0 auto; }
.prose h3 {
  font-family: var(--font-serif); font-weight: 600; font-size: clamp(1.5rem, 2.6vw, 1.9rem);
  color: var(--cream); margin: 38px 0 12px; line-height: 1.2;
}
.prose h3:first-child { margin-top: 0; }
.prose h3 em { font-style: italic; color: var(--gold); }
.prose p { margin: 0 0 15px; color: var(--cream-mid); font-size: 1rem; line-height: 1.78; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--cream); font-weight: 600; }
.prose .pull {
  margin: 30px 0; padding: 20px 24px; border-left: 2px solid var(--lime);
  background: rgba(172,202,50,0.05); border-radius: 0 12px 12px 0;
  font-family: var(--font-serif); font-style: italic; font-size: 1.25rem;
  line-height: 1.45; color: var(--cream);
}


/* ══════════════════════════════════════════════════════════════
   LIGHT THEME
   Dark is the brand — it's an events company, and photos read
   better on it. But plenty of people plan a wedding on a phone in
   daylight, so this is a real second theme rather than an inverted
   filter: the accents darken enough to hold contrast on paper, and
   the booth module deliberately stays dark because it's a device.
   ══════════════════════════════════════════════════════════════ */
html[data-theme="light"] {
  --ink-900: #F6F6F2;
  --ink-800: #FFFFFF;
  --ink-700: #F1F1EC;
  --ink-600: #EAEAE3;
  --ink-500: #E1E1D9;
  --ink-400: #D4D4CB;

  --cream:      #14161A;
  --cream-mid:  rgba(20,22,26,0.78);
  --cream-dim:  rgba(20,22,26,0.62);
  --cream-faint:rgba(20,22,26,0.46);

  --line:        rgba(20,22,26,0.11);
  --line-strong: rgba(20,22,26,0.2);

  /* Accents pulled down until they hold up against a light ground. */
  --lime:        #6E8A14;
  --lime-bright: #5C7410;
  --lime-deep:   #4E6310;
  --lime-soft:   rgba(110,138,20,0.10);
  --lime-glow:   rgba(110,138,20,0.26);

  --gold:        #B08A28;
  --gold-bright: #9A7720;
  --gold-deep:   #7E621A;
  --gold-soft:   rgba(176,138,40,0.10);
  --gold-glow:   rgba(176,138,40,0.24);

  --sf-hi:    rgba(20,22,26,0.045);
  --sf-mid:   rgba(20,22,26,0.030);
  --sf-lo:    rgba(20,22,26,0.022);
  --sf-faint: rgba(20,22,26,0.014);
  --well:     rgba(20,22,26,0.045);
  --chrome:       rgba(255,255,255,0.82);
  --chrome-solid: rgba(255,255,255,0.95);
  --shade: 0.16;
}
html[data-theme="light"] body {
  background:
    radial-gradient(70% 44% at 8% -4%,  rgba(110,138,20,0.07) 0%, transparent 62%),
    radial-gradient(64% 40% at 96% 2%,  rgba(176,138,40,0.09) 0%, transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, var(--ink-900) 55%, #EFEFE9 100%);
}
html[data-theme="light"] .grain { opacity: 0.03; mix-blend-mode: multiply; }
html[data-theme="light"] .scan { display: none; }
html[data-theme="light"] .vignette { box-shadow: inset 0 0 clamp(120px,18vw,260px) rgba(20,22,26,0.07); }
html[data-theme="light"] ::selection { background: var(--lime); color: #fff; }

/* Chrome that was hardcoded to near-black. */
html[data-theme="light"] .nav { background: rgba(255,255,255,0.72); }
html[data-theme="light"] .nav.scrolled { background: rgba(255,255,255,0.94); }
html[data-theme="light"] .nav-drawer { background: rgba(255,255,255,0.98); }
html[data-theme="light"] .footer { background: rgba(255,255,255,0.6); }
html[data-theme="light"] .marquee-band { background: rgba(20,22,26,0.03); }
html[data-theme="light"] .marquee-band::before { background: linear-gradient(90deg, var(--ink-900), transparent); }
html[data-theme="light"] .marquee-band::after  { background: linear-gradient(270deg, var(--ink-900), transparent); }
html[data-theme="light"] .to-top,
html[data-theme="light"] .cc-watermark { background: rgba(255,255,255,0.88); }
html[data-theme="light"] .sticky-book { background: rgba(255,255,255,0.96); }
html[data-theme="light"] .rd { background: rgba(255,255,255,0.72); }
html[data-theme="light"] .rd:hover { background: #fff; }
html[data-theme="light"] .readout { background: var(--line); }
html[data-theme="light"] .section.alt { background: rgba(20,22,26,0.022); }

/* Cards lose their "lit from above" gradient on paper — they get a
   real shadow instead, which is how depth reads in a light UI. */
html[data-theme="light"] .tile,
html[data-theme="light"] .pkg,
html[data-theme="light"] .etype,
html[data-theme="light"] .path,
html[data-theme="light"] .step,
html[data-theme="light"] .book-card,
html[data-theme="light"] .faq details,
html[data-theme="light"] .addon {
  background: #fff;
  box-shadow: 0 1px 2px rgba(20,22,26,0.05), 0 8px 24px -14px rgba(20,22,26,0.18);
}
html[data-theme="light"] .tile:hover,
html[data-theme="light"] .etype:hover,
html[data-theme="light"] .path:hover,
html[data-theme="light"] .pkg:hover {
  box-shadow: 0 2px 4px rgba(20,22,26,0.06), 0 22px 46px -22px rgba(20,22,26,0.26);
}
html[data-theme="light"] .tile.hero-tile { background: linear-gradient(150deg, rgba(176,138,40,0.1), #fff); }
html[data-theme="light"] .path.primary   { background: linear-gradient(165deg, rgba(110,138,20,0.1), #fff); }
html[data-theme="light"] .pkg.featured   { background: linear-gradient(180deg, rgba(176,138,40,0.1), #fff); }
html[data-theme="light"] .faq details[open] { background: rgba(110,138,20,0.05); }
html[data-theme="light"] .cmp-us { background: rgba(110,138,20,0.07); }
html[data-theme="light"] .cmp { background: #fff; }
html[data-theme="light"] .cmp-head .cmp-us { background: rgba(110,138,20,0.12); }

/* Form fields: a well on paper is lighter than the page, not darker. */
html[data-theme="light"] .bk-field input,
html[data-theme="light"] .bk-field select,
html[data-theme="light"] .bk-field textarea {
  background: #fff; border-color: rgba(20,22,26,0.18); color: var(--cream);
}
html[data-theme="light"] .bk-field input:focus,
html[data-theme="light"] .bk-field select:focus,
html[data-theme="light"] .bk-field textarea:focus {
  background: #fff; box-shadow: 0 0 0 3px rgba(110,138,20,0.16);
}
html[data-theme="light"] .bk-field input::placeholder,
html[data-theme="light"] .bk-field textarea::placeholder { color: rgba(20,22,26,0.36); }
html[data-theme="light"] .bk-field select option { background: #fff; color: #14161A; }
html[data-theme="light"] .bk-field input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }

/* The capture module is a device. Devices are dark in both themes. */
html[data-theme="light"] .cap-shell {
  background: linear-gradient(165deg, #2B2F39, #14161A);
  border-color: rgba(20,22,26,0.2);
  box-shadow: 0 30px 70px -30px rgba(20,22,26,0.42);
}
html[data-theme="light"] .cap-hud .hud-r,
html[data-theme="light"] .cap-frames { color: rgba(242,244,238,0.42); }
html[data-theme="light"] .cap-hud .hud-l,
html[data-theme="light"] .cap-state { color: #C4E64A; }
html[data-theme="light"] .cap-state.sent { color: #E5C353; }
html[data-theme="light"] .cap-bar b { background: #C4E64A; }
html[data-theme="light"] .cap-bar b.done { background: #E5C353; }
html[data-theme="light"] .cap-frames b,
html[data-theme="light"] .cap-count { color: #F2F4EE; }
html[data-theme="light"] .cap-deliver { background: rgba(20,22,26,0.94); }
html[data-theme="light"] .cap-deliver .dl-ttl { color: #C4E64A; }
html[data-theme="light"] .cap-shell.vf::after { --rc: rgba(110,138,20,0.75); }
html[data-theme="light"] .showcase .card { background: rgba(20,22,26,0.9); }
html[data-theme="light"] .showcase .card .ttl { color: rgba(242,244,238,0.6); }
html[data-theme="light"] .booth-badge,
html[data-theme="light"] .booth-dim { background: rgba(20,22,26,0.84); color: #F2F4EE; }
html[data-theme="light"] .booth-badge { color: #C4E64A; }
html[data-theme="light"] .booth-dim b { color: #E5C353; }
html[data-theme="light"] .pipe span { background: rgba(20,22,26,0.05); }
html[data-theme="light"] .drop figcaption { background: linear-gradient(180deg, transparent, rgba(20,22,26,0.82)); color: rgba(242,244,238,0.85); }

/* ── Theme toggle ── */
.theme-btn {
  width: 36px; height: 36px; flex-shrink: 0; padding: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--sf-mid); color: var(--cream-dim);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-btn:hover { color: var(--lime); border-color: rgba(172,202,50,0.5); }
.theme-btn svg { width: 16px; height: 16px; }
.theme-btn .i-sun { display: none; }
html[data-theme="light"] .theme-btn .i-sun  { display: block; }
html[data-theme="light"] .theme-btn .i-moon { display: none; }

/* ══════════ REVEAL ══════════ */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html, body { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .booth-frame, .marquee-track, .grain, .hero h1 .l2::after { animation: none !important; }
  .hero h1 .l2::after { width: 3.4em; }
  .cap-count, .cap-flash { animation: none !important; }
  .cap-strip i { filter: none; opacity: 1; }
}
@media (prefers-reduced-transparency: reduce) {
  .grain, .scan, .vignette { display: none; }
}

/* ══════════ SUBPAGE HEADER ══════════ */
.pagehead { padding-top: clamp(48px, 7vh, 84px); padding-bottom: clamp(20px, 3vh, 36px); }
.pagehead + .section, .pagehead + .sprocket + .section { padding-top: clamp(40px, 5vh, 64px); }
.pagehead .display { font-size: clamp(2.3rem, 4.8vw, 3.5rem); max-width: 22ch; margin-bottom: 18px; }
.pagehead .lede { max-width: 62ch; margin: 0 0 30px; }
.pagehead .hero-ctas { gap: 12px; }
.pagehead .eyebrow .ix {
  color: var(--lime); font-weight: 700; letter-spacing: 0.2em;
  padding-right: 9px; margin-right: 2px; border-right: 1px solid var(--line-strong);
}

/* ══════════════════════════════════════════════════════════════════
   PHONES
   The nav ran past 390px once the theme toggle joined it, and the
   comparison table becomes ten stacked cards down there. The sticky
   bottom bar already carries the CTA, so the nav gives it up.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
  .nav { gap: 12px; padding-left: 16px; padding-right: 16px; }
  .nav-actions { gap: 10px; }
  .nav-cta { display: none; }
  .nav-brand img { width: 28px; height: 28px; }
  .wordmark { font-size: 0.9rem; gap: 5px; }
  .theme-btn { width: 34px; height: 34px; }
  .nav-burger { width: 36px; height: 36px; }

  /* Sub-labels are helpful on a wide table and just height on a phone. */
  .cmp-row .cmp-f small { display: none; }
  .cmp-row > div { padding: 11px 14px; font-size: 0.86rem; line-height: 1.5; }
  .cmp { gap: 10px; }

  /* The sticky bar owns the bottom of the screen; keep clear of it. */
  body { padding-bottom: 0; }
  .footer { padding-bottom: 88px; }
}

/* Long single-column pages get a little more air between blocks
   removed, so a phone scroll isn't mostly padding. */
@media (max-width: 700px) {
  .section { padding-top: clamp(52px, 7vh, 76px); padding-bottom: clamp(52px, 7vh, 76px); }
  .prose p { font-size: 0.96rem; line-height: 1.72; }
  .section-head { margin-bottom: clamp(30px, 5vw, 44px); }
}

/* ══════════════════════════════════════════════════════════════════
   LEFT RAIL NAVIGATION (desktop)
   Same markup as the top bar — the flex direction just turns. Every
   competitor in this space runs a centred top nav; a fixed rail reads
   like camera controls down the side of the frame, which is the whole
   visual idea, and it gives the CTA a permanent home on screen.
   ══════════════════════════════════════════════════════════════════ */
@media (min-width: 1080px) {
  body { padding-left: 244px; }

  .nav {
    position: fixed; inset: 0 auto 0 0; width: 244px;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 26px 22px 24px;
    background: var(--chrome-solid);
    border-bottom: 0; border-right: 1px solid var(--line);
    overflow-y: auto; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav.scrolled { padding-top: 26px; padding-bottom: 24px; border-bottom: 0; }

  .nav-brand { margin-bottom: 34px; gap: 10px; }
  .nav-brand img { width: 34px; height: 34px; }

  .nav-links {
    flex: 1 1 auto; flex-direction: column; align-items: stretch;
    justify-content: flex-start; gap: 1px;
  }
  .nav-link {
    padding: 10px 0 10px 14px; font-size: 0.7rem;
    border-left: 1px solid var(--line);
    transition: color 0.18s ease, border-color 0.22s ease, padding-left 0.22s var(--ease);
  }
  .nav-link:hover { padding-left: 18px; border-left-color: var(--line-strong); }
  /* The underline becomes a lit edge on the rail. */
  .nav-link::after {
    left: -1px; right: auto; top: 0; bottom: 0; height: auto; width: 1px;
    transform: scaleY(0); transform-origin: center;
    transition: transform 0.26s var(--ease);
  }
  .nav-link.active { border-left-color: transparent; }
  .nav-link.active::after { transform: scaleY(1); }

  .nav-actions {
    flex-direction: column; align-items: stretch; gap: 12px;
    margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line);
  }
  .nav-cta { text-align: center; padding: 12px 18px; order: 1; }
  .nav-signin { order: 2; text-align: center; font-size: 0.66rem; }
  .theme-btn { order: 3; width: 100%; height: 34px; }
  .theme-btn::after {
    content: 'Theme'; margin-left: 9px;
    font-family: var(--font-mono); font-size: 0.6rem;
    letter-spacing: 0.16em; text-transform: uppercase;
  }

  /* Chrome that assumed a full-width viewport. */
  .scroll-progress { left: 244px; }
  .marquee-band::before { background: linear-gradient(90deg, var(--ink-900), transparent); }
}

/* The rail is tall; on short screens let it scroll rather than clip. */
@media (min-width: 1080px) and (max-height: 700px) {
  .nav { padding-top: 18px; }
  .nav-brand { margin-bottom: 20px; }
  .nav-link { padding-top: 7px; padding-bottom: 7px; }
  .nav-actions { margin-top: 16px; padding-top: 14px; }
}

/* ══════════════════════════════════════════════════════════════════
   THE FILM RAIL
   The navigation isn't beside the design — it is the design. On desktop
   it becomes a strip of 35mm film running down the left of the page:
   sprocket perforations on both edges, one exposed frame per
   destination, edge codes where a film stock prints its markings, and a
   frame counter that fills as you scroll. The page you're on is the
   frame that's been exposed; the rest are still latent.
   ══════════════════════════════════════════════════════════════════ */
.nav-group, .nav-link .n, .nav-status { display: none; }

@media (min-width: 1080px) {
  body { padding-left: 252px; }

  /* ── The film base ── */
  .nav {
    position: fixed; inset: 0 auto 0 0; width: 252px;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0; padding: 22px 26px 20px;
    border-bottom: 0; border-right: 1px solid var(--line);
    background:
      /* sprocket perforations, punched in the page colour, both edges */
      radial-gradient(closest-side, var(--ink-900) 0 68%, transparent 70%) left 5px top 0 / 12px 25px repeat-y,
      radial-gradient(closest-side, var(--ink-900) 0 68%, transparent 70%) right 5px top 0 / 12px 25px repeat-y,
      /* the film base, lifted enough that the holes actually read */
      linear-gradient(90deg, var(--sf-hi), var(--sf-lo) 22%, var(--sf-lo) 78%, var(--sf-hi)),
      var(--ink-800);
    box-shadow: 1px 0 0 var(--line), 8px 0 40px -20px rgba(0,0,0,0.7);
    overflow-y: auto; scrollbar-width: none;
  }
  .nav::-webkit-scrollbar { display: none; }
  .nav.scrolled { padding-top: 22px; padding-bottom: 20px; border-bottom: 0; }

  /* Frame lines: the hairlines between exposures. */
  .nav::before {
    content: ''; position: absolute; inset: 0 19px; pointer-events: none;
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
  }
  /* Film advance: how far through the reel you are. */
  .nav::after {
    content: ''; position: absolute; right: -1px; top: 0; width: 2px;
    height: var(--sp, 0%);
    background: linear-gradient(180deg, var(--lime), var(--gold));
    box-shadow: 0 0 12px var(--lime-glow);
    transition: height 0.12s linear; pointer-events: none; z-index: 2;
  }

  /* ── Leader frame: the brand ──
     Inline logo + wordmark was clipping in a 252px rail, so the mark
     gets its own line and the wordmark stacks under it. It reads as the
     head of the reel, which is where a brand belongs. */
  .nav-brand {
    position: relative; margin: 0 0 16px; padding: 20px 14px 17px;
    border: 1px solid var(--line-strong); border-radius: 3px;
    background:
      radial-gradient(80% 70% at 50% 0%, var(--gold-soft), transparent 70%),
      var(--well);
    flex-direction: column; align-items: stretch; gap: 13px;
  }
  .nav-brand img {
    width: 88px; height: 88px; align-self: center;
    filter: drop-shadow(0 0 26px var(--lime-glow));
  }
  .nav-brand .wordmark {
    flex-wrap: wrap; justify-content: center; gap: 0 6px;
    font-size: 1.06rem; line-height: 1.15; text-align: center;
  }
  /* "cybercolt" takes its own line; the dot stays with "photobooth". */
  .nav-brand .wordmark > span:first-child { flex-basis: 100%; text-align: center; }
  .nav-brand .wordmark .product { font-size: 0.86em; }
  .nav-brand::after {
    content: 'CC-01'; position: absolute; right: 8px; top: 7px;
    font-family: var(--font-mono); font-size: 0.42rem; letter-spacing: 0.16em;
    color: var(--gold-deep); opacity: 0.85;
  }

  /* ── Edge codes ── */
  .nav-links { flex: 1 1 auto; flex-direction: column; align-items: stretch; gap: 4px; }
  .nav-group {
    display: flex; align-items: center; gap: 7px;
    margin: 10px 0 4px; padding: 0 2px;
    font-family: var(--font-mono); font-size: 0.46rem; font-weight: 700;
    letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream-faint);
  }
  .nav-group::before { content: '▸'; color: var(--gold); letter-spacing: 0; font-size: 1.1em; }
  .nav-group::after { content: ''; flex: 1; height: 1px; background: var(--line); }
  .nav-links > .nav-group ~ .nav-group { margin-top: 16px; }

  /* ── One frame per destination ── */
  .nav-link {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 11px; border: 1px solid var(--line); border-radius: 3px;
    background: var(--sf-faint);
    color: var(--cream-dim); font-size: 0.68rem; letter-spacing: 0.11em;
    overflow: hidden;
    transition: color 0.2s ease, border-color 0.24s ease, background 0.24s ease, transform 0.24s var(--ease);
  }
  /* A latent frame carries a faint image; hovering develops it. */
  .nav-link::before {
    content: ''; position: absolute; inset: 0; opacity: 0;
    background: linear-gradient(100deg, transparent, var(--gold-soft) 55%, transparent);
    transition: opacity 0.3s ease;
  }
  .nav-link:hover::before { opacity: 1; }
  .nav-link:hover {
    color: var(--cream); border-color: var(--line-strong);
    background: var(--sf-mid); transform: translateX(3px);
  }
  .nav-link .n {
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; width: 20px; height: 16px; font-style: normal;
    border-radius: 2px; background: var(--well);
    border: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 0.5rem; font-weight: 700;
    letter-spacing: 0; color: var(--cream-faint);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  }
  .nav-link:hover .n { color: var(--gold); border-color: rgba(229,195,83,0.4); }
  .nav-link .t { position: relative; }

  /* The exposed frame. */
  .nav-link.active {
    color: var(--lime); border-color: rgba(172,202,50,0.5);
    background: linear-gradient(100deg, var(--lime-soft), transparent 85%);
    box-shadow: inset 0 0 0 1px rgba(172,202,50,0.12), 0 0 22px -10px var(--lime-glow);
  }
  .nav-link.active .n {
    color: var(--on-accent); background: var(--lime);
    border-color: var(--lime);
  }
  .nav-link.active::after {
    left: 0; right: auto; top: 0; bottom: 0; height: auto; width: 2px;
    transform: none; background: var(--lime); box-shadow: 0 0 10px var(--lime-glow);
  }

  /* ── Tail of the reel: the actions ── */
  .nav-actions {
    flex-direction: column; align-items: stretch; gap: 8px;
    margin-top: 16px; padding-top: 14px;
    border-top: 1px dashed var(--line-strong);
  }
  .nav-cta {
    order: 1; text-align: center; padding: 13px 18px; border-radius: 3px;
    box-shadow: 0 10px 26px -10px rgba(229,195,83,0.5);
  }
  .nav-signin { order: 2; text-align: center; font-size: 0.6rem; padding: 3px 0; }
  .theme-btn { order: 3; width: 100%; height: 32px; border-radius: 3px; background: var(--well); }
  .theme-btn::after {
    content: 'Theme'; margin-left: 8px;
    font-family: var(--font-mono); font-size: 0.55rem;
    letter-spacing: 0.18em; text-transform: uppercase;
  }

  /* Edge markings, printed along the film like a stock code. */
  .nav-status {
    order: 4; display: flex; align-items: center; justify-content: space-between;
    gap: 8px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--line);
    font-family: var(--font-mono); font-size: 0.46rem; font-weight: 700;
    letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-faint);
  }
  .nav-status i { font-style: normal; color: var(--gold); margin: 0 4px; }
  .nav-status-x { color: var(--cream-faint); }

  .scroll-progress { display: none; }
}

/* Short viewports: tighten the reel so the tail stays reachable. */
@media (min-width: 1080px) and (max-height: 760px) {
  .nav { padding-top: 14px; }
  .nav-brand { padding: 10px 12px; margin-bottom: 10px; }
  .nav-link { padding: 8px 11px; }
  .nav-group { margin: 7px 0 3px; }
  .nav-actions { margin-top: 12px; padding-top: 10px; }
}

/* ── Marquee edges: a mask fades reliably whatever is behind it, which
      the old gradient overlays could not once the rail shifted the
      band's left edge off the page background. ── */
.marquee-band {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}
.marquee-band::before, .marquee-band::after { display: none; }

/* ── The delivery card was covering most of the live view. ── */
.cap-deliver { width: 124px; left: -34px; bottom: 4px; padding: 10px; }
.cap-deliver .dl-cap { font-size: 0.46rem; }
@media (max-width: 520px) { .cap-deliver { width: 100px; left: -16px; bottom: 2px; } }