/* ============================================================
   MacDisplay — Design System
   Palette derived from the app icon:
     navy  #0A2540  (primary ink / brand)
     orange #FF6B35 (accent)
   ============================================================ */

:root {
  /* Brand */
  --navy: #0A2540;
  --navy-2: #143258;
  --navy-3: #1E4373;
  --orange: #FF6B35;
  --orange-soft: #FF8755;
  --orange-tint: #FFEDE3;

  /* Surface */
  --bg: #FFFFFF;
  --bg-warm: #FAFAF7;
  --bg-cream: #F5F2EB;
  --bg-ink: #0A2540;

  /* Type */
  --ink: #1D1D1F;
  --ink-2: #424246;
  --muted: #6E6E73;
  --muted-2: #86868B;
  --line: #E8E8E5;
  --line-2: #D2D2CF;

  /* State */
  --ok: #16A34A;
  --no: #DC2626;

  /* Type stack */
  --font-display: "Geist", "Geist Variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Geist", "Geist Variable", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Variable", "SF Mono", "Menlo", monospace;

  /* Rhythm */
  --radius: 14px;
  --radius-lg: 22px;
  --radius-xl: 28px;
  --shadow-card: 0 1px 2px rgba(10, 37, 64, 0.04), 0 8px 24px rgba(10, 37, 64, 0.06);
  --shadow-pop: 0 24px 60px rgba(10, 37, 64, 0.14);

  --pad-section: 120px;
  --pad-section-mobile: 72px;
  --max-w: 1200px;
  --max-w-narrow: 920px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-body);
  font-feature-settings: "ss01", "cv11";
  color: var(--ink);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: var(--max-w); margin: 0 auto; padding: 0 28px; }
.wrap-narrow { max-width: var(--max-w-narrow); }
.section { padding: var(--pad-section) 0; }
.section--tight { padding: 80px 0; }
.section--warm { background: var(--bg-warm); }
.section--ink { background: var(--bg-ink); color: #F4F5F7; }
.section--ink .muted { color: #A7B1BD; }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }

/* ---------- Typography ---------- */
.h-display {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(44px, 6.6vw, 92px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  text-wrap: balance;
}
.h-1 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(36px, 4.6vw, 64px);
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
.h-2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
.h-3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.012em;
  line-height: 1.25;
  margin: 0;
}
.lead {
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--ink-2);
  margin: 0;
  text-wrap: pretty;
  max-width: 64ch;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 1px;
}
.muted { color: var(--muted); }
.mono { font-family: var(--font-mono); font-feature-settings: "ss02"; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  transition: transform 120ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  white-space: nowrap;
  will-change: transform;
}
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--navy);
  color: #fff;
}
.btn--primary:hover { background: var(--navy-2); }
.btn--accent {
  background: var(--orange);
  color: #fff;
}
.btn--accent:hover { background: var(--orange-soft); }
.btn--ghost {
  color: var(--ink);
  border: 1px solid var(--line-2);
  background: rgba(255,255,255,0.6);
  backdrop-filter: saturate(180%) blur(6px);
}
.btn--ghost:hover { border-color: var(--ink); }
.btn--link {
  padding: 6px 0;
  color: var(--navy);
  font-weight: 500;
}
.btn--link .arr { transition: transform 220ms ease; }
.btn--link:hover .arr { transform: translateX(4px); }
.btn--lg {
  padding: 16px 26px;
  font-size: 16px;
}

/* ---------- Top nav ---------- */
.nav {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: 50;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid transparent;
  transition: border-color 220ms ease, background 220ms ease;
}
.nav.is-scrolled {
  border-bottom-color: var(--line);
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 56px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  font-size: 15px;
}
.brand__mark {
  width: 26px; height: 26px;
  border-radius: 6px;
  flex: 0 0 26px;
  display: block;
  object-fit: contain;
}
.nav__links {
  display: flex; gap: 26px;
  font-size: 13.5px;
  color: var(--ink-2);
}
.nav__links a { transition: color 160ms ease; }
.nav__links a:hover { color: var(--navy); }
.nav__right { display: flex; align-items: center; gap: 14px; }
.lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  padding: 4px;
  background: rgba(255,255,255,0.7);
}
.lang button {
  padding: 4px 9px;
  border-radius: 999px;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-weight: 500;
}
.lang button.is-active {
  background: var(--navy);
  color: #fff;
}

@media (max-width: 820px) {
  .nav__links { display: none; }
}

/* ---------- Hero ---------- */
.hero {
  padding: 156px 0 96px;
  position: relative;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 64px;
  align-items: center;
}
.hero__copy { display: flex; flex-direction: column; gap: 28px; }
.hero__title { color: var(--ink); }
.hero__title em {
  font-style: normal;
  color: var(--orange);
  font-weight: 600;
}
.hero__sub { max-width: 52ch; }
.hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; }

/* Hero visual: layered macs */
.hero__visual {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 80% at 20% 20%, #FFFDFB 0%, #F5F1E9 60%, #ECE5D6 100%);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
}
.hero__visual::before {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(transparent 31px, rgba(10,37,64,0.04) 32px),
    linear-gradient(90deg, transparent 31px, rgba(10,37,64,0.04) 32px);
  background-size: 32px 32px;
  mask-image: radial-gradient(80% 80% at 50% 60%, black 30%, transparent 80%);
}

@media (max-width: 900px) {
  .hero { padding: 120px 0 56px; }
  .hero__grid { grid-template-columns: 1fr; gap: 40px; }
}

/* ---------- Mac mocks (geometric, derived from icon DNA) ---------- */
.mac { position: absolute; }
/* iMac */
.mac--imac { width: 60%; left: 8%; top: 14%; }
.mac--imac .screen {
  background: var(--navy);
  border-radius: 10px 10px 4px 4px;
  aspect-ratio: 16 / 10;
  padding: 6px;
  position: relative;
  box-shadow: 0 18px 40px rgba(10, 37, 64, 0.22);
}
.mac--imac .stand {
  width: 22%;
  height: 14px;
  background: linear-gradient(180deg, #C9C6BE, #A8A59B);
  margin: -2px auto 0;
  border-radius: 0 0 6px 6px;
}
.mac--imac .base {
  width: 38%;
  height: 4px;
  background: #95928A;
  margin: 0 auto;
  border-radius: 2px;
}
/* MacBook */
.mac--mbp { width: 44%; right: 4%; bottom: 8%; }
.mac--mbp .screen {
  background: var(--navy);
  border-radius: 7px 7px 3px 3px;
  aspect-ratio: 16 / 10;
  padding: 5px;
  position: relative;
  box-shadow: 0 18px 30px rgba(10, 37, 64, 0.22);
}
.mac--mbp .hinge {
  height: 6px;
  background: linear-gradient(180deg, #CAC7BE, #9C9990);
  border-radius: 0 0 14px 14px;
  width: 108%;
  margin: -1px -4%;
  position: relative;
}
.mac--mbp .hinge::after {
  content: "";
  position: absolute; left: 50%; top: 1px;
  transform: translateX(-50%);
  width: 26%; height: 2px; background: rgba(0,0,0,0.18);
  border-radius: 2px;
}
/* Screen content placeholder */
.screen__inner {
  width: 100%; height: 100%;
  border-radius: 4px;
  background:
    linear-gradient(135deg, #112C4E 0%, #0A2540 100%);
  position: relative;
  overflow: hidden;
}
.screen__inner .menu {
  position: absolute; top: 0; left: 0; right: 0; height: 8%;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.screen__inner .menu::before {
  content: "";
  position: absolute; left: 6px; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
}
.screen__inner .win {
  position: absolute;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 4px;
}
.screen__inner .win--a { top: 18%; left: 8%; width: 44%; height: 56%; }
.screen__inner .win--b { top: 26%; right: 8%; width: 36%; height: 48%; background: rgba(255,107,53,0.16); border-color: rgba(255,107,53,0.4); }
.screen__inner .stripe {
  position: absolute; left: 0; right: 0;
  height: 6%;
  background: linear-gradient(90deg, var(--orange) 0 14%, transparent 14%);
  bottom: 0;
}

/* Cursors (SVG-wrapping spans, used in hero and Act 3) */
.cursor {
  position: absolute;
  width: 14px; height: 18px;
  pointer-events: none;
  z-index: 3;
}
.cursor svg { width: 100%; height: 100%; display: block; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3)); }

/* Animated extension link line (hero) */
.hero__visual .link {
  position: absolute;
  width: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  left: 38%; top: 56%;
  filter: drop-shadow(0 0 8px rgba(255,107,53,0.35));
}
.cursor--hero {
  left: 46%; top: 55%;
  animation: cursorPath 6s ease-in-out infinite;
}
@keyframes cursorPath {
  0%, 8% { left: 30%; top: 50%; opacity: 0; }
  18% { opacity: 1; }
  52% { left: 56%; top: 70%; opacity: 1; }
  82% { left: 62%; top: 65%; opacity: 1; }
  100% { left: 62%; top: 65%; opacity: 0; }
}

/* ---------- Scroll story (three-act sticky scene) ---------- */
.story {
  background: var(--bg-ink);
  color: #F4F5F7;
  position: relative;
}
.story__track {
  position: relative;
  /* 3 acts * 100vh + intro/outro padding */
  height: 360vh;
}
.story__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 0;
  overflow: hidden;
}
.story__copy {
  padding: 0 56px 0 64px;
  position: relative;
  z-index: 2;
}
.story__copy .step {
  position: absolute;
  inset: auto 56px auto 64px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  opacity: 0;
  transition: opacity 320ms ease;
  pointer-events: none;
}
.story__copy .step.is-active { opacity: 1; pointer-events: auto; }
.story__copy .step .num {
  font-family: var(--font-mono);
  color: var(--orange);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.story__copy .step h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(32px, 3.4vw, 48px);
  letter-spacing: -0.028em;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
.story__copy .step p {
  color: #B7C0CC;
  font-size: 17px;
  line-height: 1.55;
  max-width: 36ch;
}

.story__viz {
  position: relative;
  height: 100%;
  width: 100%;
}
.story__scene {
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 380ms ease;
}
.story__scene.is-active { opacity: 1; }

/* Progress rail */
.story__rail {
  position: absolute;
  left: 64px; bottom: 56px;
  display: flex; gap: 8px;
  z-index: 3;
}
.story__rail b {
  display: block;
  width: 36px; height: 3px;
  background: rgba(255,255,255,0.18);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.story__rail b::after {
  content: "";
  position: absolute; inset: 0;
  width: var(--p, 0%);
  background: var(--orange);
  transition: width 100ms linear;
}

/* Act 1: USB-C plug + Thunderbolt bolt descending into port */
.act-port {
  position: relative;
  width: 64%;
  aspect-ratio: 4 / 3;
}
.act-port .chassis {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 38%;
  background: linear-gradient(180deg, #1B345A 0%, #0F2645 100%);
  border-radius: 18px 18px 4px 4px;
}
.act-port .chassis-edge {
  position: absolute; left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 15%, rgba(255,255,255,0.2) 50%, transparent 85%);
}
.act-port .port {
  position: absolute;
  left: 50%; top: 20%;
  transform: translateX(-50%);
  width: 22%; height: 24%;
  background: #050B14;
  border-radius: 5px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.7), inset 0 -1px 0 rgba(255,255,255,0.04);
}
.act-port .port-glow {
  position: absolute;
  left: 50%; top: 20%;
  transform: translateX(-50%);
  width: 22%; height: 24%;
  border-radius: 5px;
  opacity: var(--glow, 0);
  box-shadow: 0 0 28px 6px rgba(255,107,53,0.7);
  transition: opacity 240ms ease;
  pointer-events: none;
}
.act-port .pulse {
  position: absolute; left: 12%; right: 12%; top: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  opacity: var(--glow, 0);
}
.act-port .plug {
  position: absolute;
  left: 50%;
  top: var(--plug-top, -60%);
  width: 26%;
  transform: translateX(-50%);
  transition: top 60ms linear;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,0.45));
}

/* Act 2: keyboard with chip labels for the two shortcuts */
.act-keyboard {
  width: 78%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.kb-chips {
  position: relative;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kb-chip {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px 7px 12px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 999px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  color: #F4F5F7;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 320ms ease, transform 320ms ease;
  white-space: nowrap;
}
.kb-chip.is-active { opacity: 1; transform: translateY(0); }
.kb-chip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--orange);
  box-shadow: 0 0 8px rgba(255,107,53,0.6);
}
.kb-chip__keys {
  color: #B7C0CC;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding-left: 8px;
  border-left: 1px solid rgba(255,255,255,0.12);
}
.kb-frame {
  width: 100%;
  padding: 18px;
  background: linear-gradient(180deg, #15304F 0%, #0B2244 100%);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.4);
}
.kb-row { display: flex; gap: 6px; }
.kb-row .key {
  flex: 1;
  height: 38px;
  border-radius: 6px;
  background: #050B14;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-mono);
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.04), inset 0 1px 0 rgba(255,255,255,0.02);
  transition: background 220ms ease, color 220ms ease, box-shadow 220ms ease, transform 140ms ease;
  user-select: none;
}
.kb-row .key.is-highlight {
  background: var(--orange);
  color: #fff;
  box-shadow: 0 0 0 2px rgba(255,107,53,0.28), 0 10px 18px rgba(255,107,53,0.45);
  transform: translateY(-1px);
}

/* Act 3: dual-mac extension */
.act-dual {
  position: relative;
  width: 80%;
  aspect-ratio: 16 / 9;
}
.act-dual .imac {
  position: absolute;
  left: 4%; top: 12%;
  width: 56%;
  transform: perspective(1400px) rotateY(8deg) rotateX(2deg);
  transform-origin: right center;
}
.act-dual .mbp {
  position: absolute;
  right: 4%; bottom: 6%;
  width: 38%;
  transform: perspective(1400px) rotateY(-10deg) rotateX(3deg);
  transform-origin: left center;
}
.act-dual .imac .scr, .act-dual .mbp .scr {
  background: var(--navy);
  border-radius: 8px 8px 3px 3px;
  aspect-ratio: 16 / 10;
  padding: 5px;
  box-shadow: 0 30px 60px rgba(0,0,0,0.4);
  position: relative;
}
.act-dual .scr-inner {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #112C4E, #0A2540);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
}
.act-dual .stand {
  width: 24%; height: 12px;
  background: linear-gradient(180deg, #C9C6BE, #A8A59B);
  margin: -2px auto 0;
  border-radius: 0 0 5px 5px;
}
.act-dual .base {
  width: 44%; height: 4px;
  background: #A8A59B; margin: 0 auto;
  border-radius: 2px;
}
.act-dual .hinge {
  height: 5px;
  background: linear-gradient(180deg, #CAC7BE, #9C9990);
  border-radius: 0 0 12px 12px;
  width: 106%;
  margin: -1px -3%;
}
.act-dual .floor {
  position: absolute; left: 5%; right: 5%; bottom: -2%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
}
.act-dual .win {
  position: absolute;
  background: rgba(255,107,53,0.18);
  border: 1px solid rgba(255,107,53,0.55);
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(255,107,53,0.3);
  transition: none;
  width: 36%; height: 50%;
}
.act-dual .win .bar {
  position: absolute; top: 0; left: 0; right: 0; height: 14%;
  background: rgba(255,107,53,0.3);
  border-bottom: 1px solid rgba(255,107,53,0.5);
  border-radius: 3px 3px 0 0;
}
.act-dual .win .bar::before, .act-dual .win .bar::after {
  content: ""; position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,0.6);
}
.act-dual .win .bar::before { left: 6px; }
.act-dual .win .bar::after { left: 16px; background: rgba(255,255,255,0.4); }
.act-dual .cursor {
  width: 14px; height: 18px;
}
.act-dual .menu {
  position: absolute; top: 0; left: 0; right: 0; height: 8%;
  background: rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

@media (max-width: 900px) {
  .story { overflow: hidden; }
  .story__track { height: auto; }
  .story__stage {
    position: relative;
    display: flex;
    flex-direction: column;
    height: auto;
    padding: 64px 0 24px;
    gap: 0;
  }
  /* Dissolve the two columns so steps + scenes interleave vertically */
  .story__copy, .story__viz { display: contents; }

  .story__copy .step {
    position: relative;
    inset: auto;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    padding: 0 28px;
    margin: 0;
    gap: 12px;
  }
  .story__scene {
    position: relative;
    inset: auto;
    opacity: 1;
    width: 100%;
    height: auto;
    padding: 28px 28px 56px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  /* Pair each step with its own visual, in order */
  .story__copy .step[data-step="0"] { order: 1; padding-top: 8px; }
  .story__viz .story__scene[data-scene="0"] { order: 2; }
  .story__copy .step[data-step="1"] { order: 3; }
  .story__viz .story__scene[data-scene="1"] { order: 4; }
  .story__copy .step[data-step="2"] { order: 5; }
  .story__viz .story__scene[data-scene="2"] { order: 6; }

  .story__rail { display: none; }

  /* Size each act's visual for a phone */
  .act-port { width: 76%; max-width: 300px; }
  .act-keyboard { width: 100%; }
  .act-dual { width: 100%; }

  /* --- Static "resolved" states (JS doesn't animate on mobile) --- */
  /* Act 1: cable plugged in, port glowing */
  .act-port { --glow: 1; }
  .act-port .plug { top: 26%; }
  /* Act 2: receiver shortcut ⇧ ⌘ M lit */
  .story__scene[data-scene="1"] .key[data-key="shift-l"],
  .story__scene[data-scene="1"] .key[data-key="cmd-l"],
  .story__scene[data-scene="1"] .key[data-key="m"] {
    background: var(--orange);
    color: #fff;
    box-shadow: 0 0 0 2px rgba(255,107,53,0.28), 0 10px 18px rgba(255,107,53,0.45);
  }
  /* Act 3: window + cursor resting on the iMac (extended) */
  .act-dual .win { left: 14%; top: 22%; }
  .act-dual .cursor { left: 28%; top: 42%; }
}

@media (max-width: 540px) {
  .story__copy .step h3 { font-size: 28px; }
  .story__copy .step p { font-size: 15.5px; }
  .act-keyboard .key { height: 26px; font-size: 9px; }
}

/* ---------- Problem (emotional diptych) ---------- */
.problem__title { margin-top: 18px; max-width: 22ch; }

.problem__diptych {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  margin-top: 72px;
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, #FAFAF7 0%, #F2F0E8 100%);
  overflow: hidden;
  isolation: isolate;
}
.problem__seam {
  background: linear-gradient(180deg, transparent, var(--line-2), transparent);
}
.problem__panel {
  position: relative;
  padding: 56px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: 360px;
}
.problem__viz {
  width: 100%;
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.problem__caption {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--muted);
  text-transform: uppercase;
}

/* Sleeping iMac (dim, slowly pulsing breath) */
.prob-imac {
  width: 60%;
  max-width: 280px;
  display: flex; flex-direction: column; align-items: center;
}
.prob-imac__screen {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(180deg, #1D1D22 0%, #0E0E12 100%);
  border-radius: 10px 10px 4px 4px;
  border: 1px solid rgba(0,0,0,0.5);
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 40px rgba(10,37,64,0.16);
}
.prob-imac__pulse {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #FFFFFF;
  opacity: 0.55;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 18px 4px rgba(255,255,255,0.18);
  animation: probSleep 3.4s ease-in-out infinite;
}
@keyframes probSleep {
  0%, 100% { opacity: 0.15; transform: translate(-50%, -50%) scale(0.65); }
  50% { opacity: 0.55; transform: translate(-50%, -50%) scale(1); }
}
.prob-imac__stand {
  width: 26%; height: 14px;
  background: linear-gradient(180deg, #C9C6BE, #A8A59B);
  border-radius: 0 0 6px 6px;
  margin-top: -2px;
}
.prob-imac__base {
  width: 42%; height: 4px;
  background: #95928A;
  border-radius: 2px;
}

/* Cramped MacBook (lots of overlapping windows on a tiny display) */
.prob-mbp {
  width: 76%;
  max-width: 360px;
  display: flex; flex-direction: column; align-items: center;
}
.prob-mbp__screen {
  width: 100%;
  aspect-ratio: 16 / 10;
  background: linear-gradient(135deg, #133358 0%, #0A2540 100%);
  border-radius: 8px 8px 3px 3px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 24px 40px rgba(10,37,64,0.18);
}
.prob-win {
  position: absolute;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 3px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.prob-win::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 14%;
  background: rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.prob-win--1 { left: 6%;  top: 12%; width: 56%; height: 56%; }
.prob-win--2 { left: 18%; top: 24%; width: 52%; height: 56%; }
.prob-win--3 { left: 32%; top: 16%; width: 48%; height: 60%; background: rgba(255,107,53,0.08); border-color: rgba(255,107,53,0.32); }
.prob-win--4 { left: 46%; top: 36%; width: 46%; height: 50%; }
.prob-win--5 { left: 8%;  top: 50%; width: 60%; height: 42%; }
.prob-mbp__hinge {
  width: 108%;
  height: 5px;
  background: linear-gradient(180deg, #CAC7BE, #9C9990);
  border-radius: 0 0 12px 12px;
  margin-top: -1px;
  position: relative;
}
.prob-mbp__hinge::after {
  content: "";
  position: absolute; left: 50%; top: 1px;
  transform: translateX(-50%);
  width: 26%; height: 2px;
  background: rgba(0,0,0,0.18);
  border-radius: 2px;
}

/* Three statements row */
.problem__statements {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 64px;
}
.problem__stmt {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.problem__stmt-num {
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--orange);
}
.problem__stmt p {
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 36ch;
}

@media (max-width: 820px) {
  .problem__diptych { grid-template-columns: 1fr; }
  .problem__seam { display: none; }
  .problem__panel { padding: 40px 24px; min-height: 280px; }
  .problem__panel + .problem__panel { border-top: 1px solid var(--line); }
  .problem__statements { grid-template-columns: 1fr; gap: 24px; }
}

/* ---------- How it works (connected steps + dramatic payoff) ---------- */
.how__head { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; max-width: 720px; margin-bottom: 72px; }

.how__rail {
  display: none;
}

.how__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  position: relative;
}
/* Connector line behind step heads */
.how__steps::before {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  top: 22px;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--line-2) 0 6px,
    transparent 6px 12px
  );
  z-index: 0;
}

.how-step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 0 8px;
  z-index: 1;
}
.how-step__head {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  background: var(--bg-warm);
  padding-right: 12px;
  /* Sit on top of the dashed connector */
  align-self: flex-start;
  border-radius: 999px;
}
.how-step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: var(--navy);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  letter-spacing: 0.04em;
  flex: 0 0 44px;
  font-weight: 500;
}
.how-step__dot {
  width: 8px; height: 8px;
  background: var(--orange);
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255,107,53,0.12);
}
.how-step__icon {
  width: 56px; height: 56px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--navy);
  margin-top: 8px;
  transition: transform 240ms var(--ease, ease), border-color 240ms ease;
}
.how-step:hover .how-step__icon {
  transform: translateY(-2px);
  border-color: var(--ink);
}
.how-step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.how-step__body {
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 32ch;
}

.how__payoff-wrap {
  margin-top: 96px;
  padding-top: 64px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: center;
}
.how__payoff {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--navy);
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.35em;
  margin: 0;
  text-wrap: balance;
}
.how__payoff-word {
  display: inline-block;
  position: relative;
  /* Each word starts below + invisible, then slides into place driven by --p (0..1) */
  --p: 0;
  transform: translate3d(0, calc((1 - var(--p)) * 60px), 0);
  opacity: var(--p);
  transition: transform 80ms linear, opacity 80ms linear, color 320ms ease;
  will-change: transform, opacity;
}
.how__payoff-word--accent { color: var(--orange); }
@media (prefers-reduced-motion: reduce) {
  .how__payoff-word { --p: 1; transform: none; opacity: 1; }
}

@media (max-width: 820px) {
  .how__steps { grid-template-columns: 1fr; gap: 40px; }
  .how__steps::before { display: none; }
  .how-step__body { max-width: none; }
  .how__payoff-wrap { margin-top: 64px; padding-top: 40px; }
}

/* ---------- QuickMonitor: badge + intro line ---------- */
.qm__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.qm__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #B7C0CC;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  padding: 4px 10px;
  border-radius: 999px;
}
.qm__intro {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(18px, 1.6vw, 22px);
  line-height: 1.4;
  color: #DDE3EC !important;
  letter-spacing: -0.012em;
  max-width: 46ch;
  text-wrap: balance;
}
.qm__sub { font-size: 15px; }

/* ---------- Hero meta (cleaner pill row) ---------- */
.hero__meta {
  margin: 0;
  padding: 0;
  list-style: none;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  letter-spacing: 0.01em;
}
.hero__meta li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.hero__meta li + li::before {
  content: "";
  width: 3px; height: 3px;
  border-radius: 50%;
  background: var(--line-2);
  margin-right: 8px;
}
.hero__meta-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(22,163,74,0.12);
}

/* ---------- Features grid (6 cards) ---------- */
.feat__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; }
.feat__head .h-1 { max-width: 16ch; }
.feat__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.feat-card {
  padding: 32px;
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: 14px;
  min-height: 240px;
  position: relative;
  overflow: hidden;
  transition: background 280ms ease;
}
.feat-card:hover { background: var(--bg-cream); }
.feat-card__icon {
  width: 40px; height: 40px;
  background: var(--navy);
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  position: relative;
}
.feat-card__icon::after {
  content: "";
  position: absolute;
  right: -6px; bottom: -4px;
  width: 14px; height: 10px;
  background: var(--orange);
  border-radius: 3px;
}
.feat-card .h-3 { margin-top: 8px; }
.feat-card p { color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
.feat-card .tag {
  position: absolute; right: 18px; top: 18px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.05em;
}
@media (max-width: 980px) { .feat__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feat__grid { grid-template-columns: 1fr; } }

/* ---------- QuickMonitor showcase ---------- */
.qm {
  background: var(--bg-ink);
  color: #F4F5F7;
  overflow: hidden;
}
.qm__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 64px;
  align-items: center;
}
.qm__copy { display: flex; flex-direction: column; gap: 22px; }
.qm__copy .h-1 { color: #fff; }
.qm__copy p { color: #B7C0CC; max-width: 48ch; font-size: 17px; line-height: 1.55; }
.qm__bullets { display: flex; flex-direction: column; gap: 10px; font-size: 14.5px; color: #D6DBE2; }
.qm__bullets li { display: flex; gap: 10px; align-items: flex-start; }
.qm__bullets .dot { width: 6px; height: 6px; border-radius: 1px; background: var(--orange); margin-top: 9px; flex: 0 0 6px; }
.qm__visual {
  position: relative;
  aspect-ratio: 5/4;
  background: radial-gradient(120% 80% at 30% 30%, #173254 0%, #0A2540 70%, #061829 100%);
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.qm__visual::after {
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(transparent 39px, rgba(255,255,255,0.04) 40px),
    linear-gradient(90deg, transparent 39px, rgba(255,255,255,0.04) 40px);
  background-size: 40px 40px;
  mask-image: radial-gradient(70% 70% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
}
.usb {
  position: absolute;
  left: 24%; top: 50%;
  transform: translateY(-50%) rotate(-6deg);
  width: 30%;
  z-index: 2;
}
.usb__body {
  background: linear-gradient(180deg, #E8E5DC, #C2BFB5);
  border-radius: 6px 14px 14px 6px;
  height: 56px;
  position: relative;
  box-shadow: 0 24px 50px rgba(0,0,0,0.45);
}
.usb__metal {
  position: absolute; left: -34%; top: 18%;
  width: 36%; height: 64%;
  background: linear-gradient(180deg, #D2D1CC, #9C9B96);
  border-radius: 2px;
}
.usb__metal::after {
  content: "";
  position: absolute; left: 14%; top: 24%;
  width: 30%; height: 52%;
  background: #050B14;
  border-radius: 1px;
}
.usb__label {
  position: absolute; right: 12px; top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  color: #6E6E73;
  letter-spacing: 0.08em;
}
.qm__visual .mac--mbp { right: 0; bottom: 12%; width: 56%; }
.qm__visual .mac--mbp .screen { background: #061829; border-color: rgba(255,255,255,0.08); }

@media (max-width: 900px) {
  .qm__grid { grid-template-columns: 1fr; }
  .qm__visual { aspect-ratio: 4/3; }
}

/* ---------- Comparison table ---------- */
.compare__head { display: flex; flex-direction: column; gap: 14px; max-width: 720px; margin-bottom: 56px; }
.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  border-top: 1px solid var(--line);
}
.compare th, .compare td {
  padding: 16px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
  white-space: nowrap;
}
.compare thead th {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--muted);
  letter-spacing: -0.005em;
  padding-bottom: 14px;
  padding-top: 22px;
}
.compare thead th.is-us {
  color: var(--navy);
  position: relative;
}
.compare thead th.is-us::after {
  content: "MacDisplay";
  display: none;
}
.compare th.row-head, .compare td.row-head {
  color: var(--ink);
  font-weight: 500;
  width: 32%;
  white-space: nowrap;
}
.compare td { color: var(--ink-2); font-family: var(--font-mono); font-size: 13px; }
.compare td .st-text { display: inline-block; vertical-align: middle; }
.compare td.is-us { background: rgba(10, 37, 64, 0.025); }
.compare td.is-us .st-text { color: var(--ink); font-weight: 500; }
.compare tbody tr:hover td:not(.is-us):not(.row-head) { background: rgba(10,37,64,0.015); }

/* Status dots — qualitative cell indicator */
.st {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 9px;
  vertical-align: middle;
  flex: 0 0 9px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08);
}
.st--good { background: #16A34A; box-shadow: inset 0 0 0 1px rgba(22,163,74,0.5), 0 0 0 3px rgba(22,163,74,0.08); }
.st--warn { background: #D97706; box-shadow: inset 0 0 0 1px rgba(217,119,6,0.5), 0 0 0 3px rgba(217,119,6,0.10); }
.st--bad  { background: #DC2626; box-shadow: inset 0 0 0 1px rgba(220,38,38,0.5), 0 0 0 3px rgba(220,38,38,0.08); }
.compare__disclaimer {
  margin-top: 28px;
  padding: 24px 28px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  line-height: 1.65;
  width: 100%;
  max-width: none;
  text-wrap: pretty;
}
@media (min-width: 980px) {
  .compare__disclaimer {
    column-count: 2;
    column-gap: 36px;
    column-rule: 1px solid var(--line);
  }
}
.compare-wrap { overflow-x: auto; }
@media (max-width: 760px) {
  .compare th, .compare td { padding: 14px 12px; font-size: 13px; }
}

/* ---------- Use cases ---------- */
.cases__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 760px;
  margin-bottom: 8px;
}
.cases__title { margin-top: 4px; max-width: 22ch; }
.cases__lead { margin-top: 4px; }
.cases__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 56px;
}
.case-card {
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px;
  min-height: 280px;
  position: relative;
  overflow: hidden;
}
.case-card__viz {
  height: 120px;
  border-radius: 10px;
  background: linear-gradient(135deg, #112C4E, #0A2540);
  position: relative;
  overflow: hidden;
}
.case-card__viz .tag {
  position: absolute; top: 10px; left: 12px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.08em;
}
.case-card__viz .a, .case-card__viz .b {
  position: absolute;
  background: var(--orange);
  border-radius: 3px;
}
.case-card__viz .a { left: 16%; top: 38%; width: 38%; height: 36%; background: rgba(255,255,255,0.85); }
.case-card__viz .b { right: 18%; bottom: 24%; width: 22%; height: 22%; }
.case-card h4 { font-family: var(--font-display); font-weight: 600; font-size: 16px; margin: 0; letter-spacing: -0.012em; }
.case-card p { color: var(--ink-2); font-size: 14px; line-height: 1.5; }
@media (max-width: 1080px) { .cases__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .cases__grid { grid-template-columns: 1fr; } }

/* ---------- Privacy & Compat ---------- */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.split__cell {
  background: var(--bg-warm);
  border-radius: var(--radius-lg);
  padding: 48px 40px;
  display: flex; flex-direction: column; gap: 28px;
}
.split__cell.is-dark {
  background: var(--bg-ink);
  color: #F4F5F7;
}
.split__cell.is-dark p, .split__cell.is-dark li { color: #B7C0CC; }
.split__cell .eyebrow { color: var(--orange); }
.split__cell h3 { color: inherit; }
.split__list { display: flex; flex-direction: column; gap: 18px; margin-top: 14px; }
.split__list li {
  display: flex; gap: 14px; align-items: flex-start;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}
.split__cell.is-dark .split__list li { border-color: rgba(255,255,255,0.08); }
.split__list li:last-child { border-bottom: 0; }
.split__list b { font-weight: 500; }
.split__icon {
  flex: 0 0 28px;
  width: 28px; height: 28px;
  background: var(--orange);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.spec-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-family: var(--font-mono);
  font-size: 13px;
}
.spec-row:last-child { border-bottom: 0; }
.spec-row b { font-weight: 500; color: #F4F5F7; }
.spec-row span { color: #B7C0CC; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }

/* ---------- Free version (sits before pricing) ---------- */
.free {
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-warm) 100%);
}
.free__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 780px;
  margin: 0 auto 64px;
  text-align: center;
  align-items: center;
}
.free__title { max-width: 18ch; }
.free__lead { max-width: 64ch; }
.free__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 56px;
}
.free-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  transition: border-color 240ms ease, transform 240ms ease;
}
.free-card:hover {
  border-color: var(--line-2);
  transform: translateY(-2px);
}
.free-card__viz {
  position: relative;
  width: 80px; height: 80px;
  margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
}
.free-card__viz svg { width: 100%; height: 100%; display: block; }
.free-card__unit {
  position: absolute;
  right: -8px; top: 50%;
  transform: translate(100%, -50%);
  background: var(--bg-warm);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.free-card__eyebrow {
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--orange);
  text-transform: uppercase;
}
.free-card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.free-card__body {
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.55;
}

/* ---------- Unlock panel (closing dark block on the free section) ---------- */
.unlock {
  margin-top: 64px;
  padding: 56px 56px 48px;
  background: var(--bg-ink);
  color: #F4F5F7;
  border-radius: var(--radius-xl);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.unlock::before {
  /* Subtle grid texture, same DNA as the hero visual */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(transparent 31px, rgba(255,255,255,0.04) 32px),
    linear-gradient(90deg, transparent 31px, rgba(255,255,255,0.04) 32px);
  background-size: 32px 32px;
  mask-image: radial-gradient(50% 60% at 85% 0%, black 0%, transparent 70%);
  -webkit-mask-image: radial-gradient(50% 60% at 85% 0%, black 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}
.unlock > * { position: relative; z-index: 1; }

.unlock__head {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 44px;
  max-width: 56ch;
}
.unlock__eye { color: var(--orange); }
.unlock__title { color: #FFFFFF; margin: 0; text-wrap: balance; }
.unlock__lead {
  color: #B7C0CC;
  font-size: 17px;
  line-height: 1.55;
  margin: 0;
  max-width: 50ch;
  text-wrap: pretty;
}

.unlock__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: rgba(255,255,255,0.08);
  border-radius: 14px;
  overflow: hidden;
  margin: 0;
  padding: 0;
  list-style: none;
}
.unlock-item {
  background: var(--bg-ink);
  padding: 28px 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 200px;
}
.unlock-item__pair {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  align-self: flex-start;
  padding: 8px 14px 8px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
}
.unlock-item__before {
  color: rgba(255,255,255,0.4);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-decoration: line-through;
  text-decoration-color: rgba(255,107,53,0.4);
  text-decoration-thickness: 1px;
}
.unlock-item__arrow {
  color: rgba(255,255,255,0.5);
  flex: 0 0 22px;
}
.unlock-item__after {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--orange);
  line-height: 1;
}
.unlock-item__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0;
  text-wrap: balance;
}
.unlock-item__body {
  color: #B7C0CC;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0;
  text-wrap: pretty;
}

.unlock__cta {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 36px;
  padding-top: 32px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.unlock__note {
  color: #8B95A4;
  font-size: 12px;
  letter-spacing: 0.04em;
}

@media (max-width: 980px) {
  .free__grid { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 820px) {
  .unlock { padding: 36px 28px 32px; margin-top: 48px; }
  .unlock__grid { grid-template-columns: 1fr; }
  .unlock-item { min-height: 0; padding: 24px; }
  .unlock__cta { flex-direction: column; align-items: flex-start; }
}

/* ---------- Pricing: VAT note + refreshed sub ---------- */
.pricing__vat {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.01em;
  max-width: 52ch;
  margin: -8px auto 0;
  text-align: center;
  text-wrap: balance;
}
.pricing {
  text-align: center;
}
.pricing__inner { display: flex; flex-direction: column; gap: 18px; align-items: center; max-width: 700px; margin: 0 auto; }
.pricing__price {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(64px, 9vw, 128px);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--navy);
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
}
.pricing__price sup {
  font-size: 0.32em;
  vertical-align: top;
  margin-top: 0.6em;
  color: var(--orange);
  font-weight: 500;
}
.pricing__price small {
  font-size: 0.15em;
  font-weight: 500;
  color: var(--orange);
  align-self: flex-end;
  margin-bottom: 1.4em;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.pricing__includes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--muted);
}
.pricing__includes li::before {
  content: "✓";
  color: var(--ok);
  margin-right: 6px;
  font-weight: 600;
}
.pricing__ctas { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
.pricing__note {
  font-size: 12.5px;
  color: var(--muted);
  font-family: var(--font-mono);
  max-width: 60ch;
  margin: 8px auto 0;
}

/* ---------- FAQ accordion ---------- */
.faq__head { margin-bottom: 40px; max-width: 720px; }
.faq__list { display: flex; flex-direction: column; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink);
  letter-spacing: -0.01em;
  transition: color 160ms ease;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--navy); }
.faq-item summary .toggle {
  flex: 0 0 22px;
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  position: relative;
  transition: transform 240ms ease, border-color 240ms ease, background 240ms ease;
}
.faq-item summary .toggle::before,
.faq-item summary .toggle::after {
  content: "";
  position: absolute;
  background: var(--ink);
  border-radius: 1px;
}
.faq-item summary .toggle::before { left: 50%; top: 50%; width: 10px; height: 1.5px; transform: translate(-50%, -50%); }
.faq-item summary .toggle::after { left: 50%; top: 50%; width: 1.5px; height: 10px; transform: translate(-50%, -50%); transition: opacity 200ms ease; }
.faq-item[open] summary .toggle { background: var(--navy); border-color: var(--navy); transform: rotate(45deg); }
.faq-item[open] summary .toggle::before { background: #fff; }
.faq-item[open] summary .toggle::after { background: #fff; }
.faq-item .answer {
  padding: 0 8px 24px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.6;
  max-width: 72ch;
}

/* ---------- Footer ---------- */
.foot {
  background: var(--bg-warm);
  padding: 80px 0 32px;
  color: var(--ink-2);
  border-top: 1px solid var(--line);
}
.foot__top {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  padding-bottom: 48px;
  border-bottom: 1px solid var(--line);
}
.foot__brand p { margin-top: 16px; font-size: 14px; max-width: 32ch; line-height: 1.55; }
.foot__col h5 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.foot__col ul { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.foot__col a:hover { color: var(--navy); }
.foot__bottom {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding-top: 32px;
  font-size: 12.5px;
  font-family: var(--font-mono);
  color: var(--muted);
  flex-wrap: wrap;
}
.foot__bottom .made {
  display: inline-flex; align-items: center; gap: 8px;
}
.foot__bottom .made::before {
  content: "";
  width: 14px; height: 10px;
  background: linear-gradient(90deg, #008C45 33%, #ffffff 33% 66%, #CD212A 66%);
  display: inline-block;
  border-radius: 1px;
}
@media (max-width: 820px) { .foot__top { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .foot__top { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Pro coming-soon modal ---------- */
.promodal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.promodal[hidden] { display: none; }
.promodal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 37, 64, 0.42);
  backdrop-filter: saturate(160%) blur(6px);
  -webkit-backdrop-filter: saturate(160%) blur(6px);
  animation: promodalFade 240ms ease;
}
.promodal__card {
  position: relative;
  width: 100%;
  max-width: 520px;
  background: #fff;
  border-radius: var(--radius-xl);
  padding: 40px 40px 36px;
  box-shadow: var(--shadow-pop);
  animation: promodalRise 320ms cubic-bezier(.2,.7,.2,1);
}
.promodal__close {
  position: absolute;
  top: 16px; right: 18px;
  width: 30px; height: 30px;
  border-radius: 50%;
  font-size: 20px;
  line-height: 1;
  color: var(--muted);
  transition: background 160ms ease, color 160ms ease;
}
.promodal__close:hover { background: var(--bg-warm); color: var(--ink); }
.promodal__badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-tint);
  padding: 5px 11px;
  border-radius: 999px;
  margin-bottom: 18px;
}
.promodal__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 3vw, 30px);
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ink);
  margin: 0 0 14px;
  text-wrap: balance;
}
.promodal__body {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.promodal__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}
.promodal__list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.promodal__num {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.promodal__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
@keyframes promodalFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes promodalRise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 540px) {
  .promodal__card { padding: 32px 24px 28px; }
  .promodal__actions { flex-direction: column; }
  .promodal__actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .promodal__backdrop, .promodal__card { animation: none; }
}

/* ---------- Cookie notice ---------- */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 95;
  padding: 16px;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transform: translateY(120%);
  transition: transform 360ms cubic-bezier(.2,.7,.2,1);
}
.cookie-bar.is-in { transform: translateY(0); }
.cookie-bar__inner {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 20px;
  max-width: 760px;
  width: 100%;
  background: var(--bg-ink);
  color: #EDF0F4;
  border-radius: 16px;
  padding: 16px 18px 16px 22px;
  box-shadow: 0 18px 50px rgba(10,37,64,0.28);
}
.cookie-bar__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: #B7C0CC;
  margin: 0;
  flex: 1;
}
.cookie-bar__link {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-color: rgba(255,255,255,0.35);
  white-space: nowrap;
}
.cookie-bar__link:hover { text-decoration-color: #fff; }
.cookie-bar__ok {
  flex: 0 0 auto;
  background: var(--orange);
  color: #fff;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  padding: 10px 22px;
  border-radius: 999px;
  transition: background 180ms ease, transform 120ms ease;
}
.cookie-bar__ok:hover { background: var(--orange-soft); }
.cookie-bar__ok:active { transform: translateY(1px); }
@media (max-width: 560px) {
  .cookie-bar__inner { flex-direction: column; align-items: stretch; gap: 14px; text-align: left; }
  .cookie-bar__ok { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition: none; }
}

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .cursor { animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Tweaks panel hook (initial hidden state, panel itself is built by tweaks_panel.jsx) ---------- */

/* ---------- Accessibility ---------- */
:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
  border-radius: 4px;
}