/* Muybrix marketing site.
 *
 * Deep aubergine for the ground, midnight navy for the surfaces, one warm
 * gold for the single thing to press — 60 / 30 / 10. Playfair Display says
 * it once; Inter does the work. Tabular figures wherever a number has to
 * line up in a column.
 *
 * There are no inline style attributes anywhere in index.html. That is not
 * tidiness — it is what lets the Content-Security-Policy ship without
 * 'unsafe-inline' on style-src (see _headers). Token adoption therefore
 * stays in this stylesheet, where it belongs anyway.
 */

/* ---------------------------------------------------------------- tokens */
/* The variable names are the ones the 800 rules below already speak, and
 * they are kept on purpose: re-pointing them repaints the whole page without
 * rewriting every rule. What actually changed is the polarity. This was a
 * light paper design and the brand is dark-native, so the handful of rules
 * whose light/dark roles invert — white card grounds, ink on a gold fill,
 * the full-bleed footer — are corrected individually further down rather
 * than bent into an alias that would be wrong half the time. */
:root {
  color-scheme: dark;

  /* Surfaces. Aubergine is the canvas, navy is every card on it, and navy
     never goes full-bleed: a page whose background is navy has lost the
     60/30/10 split and, with it, the elevation system. */
  --paper: #341539;        /* surface-canvas — the 60%, the page ground */
  --paper-dim: #240e28;    /* surface-canvas-deep — the trust strip, the footer */
  --surface: #152a4e;      /* surface-raised — the 30%, every card on the page */
  --surface-high: #1c3763; /* surface-raised-high — a plate on a card */
  --navy-950: #152a4e;     /* the ROI panel and final CTA: rounded cards, not bleeds */
  --navy-900: #1c3763;     /* small navy fills — the skip link, the stat glyph */
  --navy-700: #c9d2e4;     /* was ink on paper; now reads as secondary ink on aubergine */
  --navy-500: #6d7ea6;     /* border-strong — the edge of an interactive thing, 3.5:1 */

  /* Accent — the 10%. Gold is a fill or it is text, never both in one
     component, and on any given screen the number of gold fills is one. */
  --accent: #f4c987;       /* surface-accent */
  --accent-dark: #f4c987;  /* was darkened to clear 4.5:1 on paper; against
                              aubergine the bright gold is the legible one,
                              at 9.2:1, so both names resolve to it here */
  --accent-ink: #241028;   /* text-on-accent, 11.5:1. Never white on gold. */
  --accent-soft: rgba(244, 201, 135, .16); /* the tint ground behind a gold glyph */

  /* Ink */
  --ink: #ffffff;          /* text-primary — 16.0:1 on canvas */
  --ink-strong: #ffffff;   /* headings */
  --mute: #8e9bb8;         /* text-muted, 5.1:1 — the lowest allowed to carry meaning */
  --faint: #8e9bb8;
  --on-navy: #ffffff;
  --on-navy-mute: #c9d2e4; /* text-secondary, 9.4:1 on navy */

  --line: #2e3f66;         /* border-hairline — deliberately quiet */
  --good: #5fd39a;         /* status-success, 7.7:1 on navy */

  /* On a dark ground a shadow barely reads, so elevation is carried by the
     surface colour first and the shadow only deepens what it already said. */
  --shadow: 0 24px 64px -24px rgba(6, 2, 9, .9);
  --radius-lg: 24px;       /* radius-xl — marketing surfaces */
  --radius-md: 16px;       /* radius-lg — cards */
  --maxw: 1180px;
  /* Gold, 2px, with a gap in the surface colour behind it, so focus stays
     visible on any ground. Removing an outline without replacing it is a
     defect, not a style choice. */
  --focus: 0 0 0 2px #341539, 0 0 0 4px #f4c987;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Playfair is never letter-spaced — its default spacing is what keeps a word
   like "brix" from closing up — so the -0.01em the previous face wanted is
   gone. Line height stays tight so a headline keeps its solid shape. */
h1, h2, h3 {
  font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
  font-weight: 600;
  line-height: 1.14;
  text-wrap: balance;
  margin: 0;
  color: var(--ink-strong);
}
p { margin: 0; }
a { color: inherit; }
button { font-family: inherit; }
img, svg { display: block; max-width: 100%; }
.tabular { font-variant-numeric: tabular-nums; }

/* WCAG 2.2 AA — a visible focus indicator on every interactive control. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus);
  border-radius: 6px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 200;
  background: var(--navy-900);
  color: #fff;
  padding: 10px 16px;
  border-radius: 0 0 10px 10px;
  text-decoration: none;
  font-weight: 600;
  transition: top .18s ease;
}
.skip-link:focus { top: 0; }

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

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
@media (max-width: 640px) { .wrap { padding: 0 20px; } }

section { padding: 88px 0; }
@media (max-width: 760px) { section { padding: 60px 0; } }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--accent-dark);
}
.eyebrow::before { content: ""; width: 16px; height: 2px; background: var(--accent); border-radius: 2px; }
.eyebrow-on-dark { color: var(--accent); }

/* ---------------------------------------------------------------- header */
header.site {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(52, 21, 57, .9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner { position: relative; }
.nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
  transition: padding .2s ease;
}
/* PRD §8.1 — the bar condenses after 80px of scroll. */
header.site.condensed .nav-row { padding: 7px 0; }

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 700;
  font-size: 1.28rem;
  color: var(--accent);
  text-decoration: none;
  white-space: nowrap;
}
.brand-mark {
  width: 26px; height: 26px;
  border-radius: 8px;
  /* The mark carries its own aubergine plate in the book, but the header
     and footer are already aubergine, so the plate would only hide it.
     Drawn as the bare gold glyph instead — and gold here is a glyph, not a
     second fill competing with the one CTA in the bar. */
  background: transparent;
  display: grid;
  place-items: center;
  flex: none;
}
.brand-mark svg { width: 26px; height: 26px; color: var(--accent); }
.brand-footer { color: #fff; }

nav.anchors { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
nav.anchors a {
  text-decoration: none;
  font-size: .92rem;
  font-weight: 500;
  color: var(--navy-700);
  padding: 6px 2px;
  position: relative;
}
nav.anchors a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}
nav.anchors a[aria-current="true"]::after { transform: scaleX(1); }
nav.anchors a[aria-current="true"] { color: var(--ink-strong); }

.header-right { display: flex; align-items: center; gap: 12px; }

.lang-select {
  font-size: .82rem;
  color: var(--on-navy-mute);
  border: 1px solid var(--navy-500);
  background: transparent;
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
}

.menu-toggle {
  display: none;
  border: 1px solid var(--navy-500);
  background: transparent;
  color: var(--ink-strong);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
}
.mobile-anchors { display: none; }
@media (max-width: 900px) {
  nav.anchors { display: none; }
  .menu-toggle { display: inline-flex; }
  .lang-select { display: none; }
  .mobile-anchors {
    display: none;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    left: 0; right: 0; top: 100%;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 10px 20px 16px;
  }
  .mobile-anchors.open { display: flex; }
  .mobile-anchors a {
    padding: 12px 4px;
    text-decoration: none;
    color: var(--navy-700);
    border-bottom: 1px solid var(--line);
    font-size: .95rem;
  }
}
/* PRD §8.1 acceptance — both CTAs stay reachable and legible down to 360px,
 * and the row must not push the document wider than the viewport. Measured:
 * brand + two buttons + menu at the default sizes overflow 375px by ~20px,
 * so everything in the row tightens together rather than one thing shrinking. */
@media (max-width: 460px) {
  .nav-row { gap: 8px; }
  .header-right { gap: 6px; }
  .brand { font-size: 1rem; gap: 7px; }
  .brand-mark { width: 22px; height: 22px; border-radius: 7px; }
  .brand-mark svg { width: 22px; height: 22px; }
  .btn-sm { padding: 7px 11px; font-size: .78rem; }
  .menu-toggle { padding: 7px 8px; }
}
/* 320px is the narrowest viewport the PRD asks us to survive (§8.7). At that
 * width the same row needs another ~20px, and taking it from type is cheaper
 * than dropping either CTA — both must stay visible (§8.1). */
@media (max-width: 380px) {
  .brand { font-size: .92rem; }
  .btn-sm { padding: 6px 9px; font-size: .74rem; }
  .menu-toggle { padding: 6px 7px; }
  .header-right { gap: 5px; }
  .wrap { padding: 0 16px; }
}

/* --------------------------------------------------------------- buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-weight: 600;
  font-size: .92rem;
  border-radius: 999px;
  cursor: pointer;
  padding: 11px 20px;
  border: 1.5px solid transparent;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: 0 10px 24px -12px rgba(244, 201, 135, .45); }
.btn-primary:hover { background: #f7d9a4; }
.btn-ghost { background: transparent; color: var(--ink-strong); border-color: var(--navy-500); }
.btn-ghost:hover { border-color: var(--accent); background: rgba(255, 255, 255, .06); }
.btn-on-dark { background: transparent; color: var(--on-navy); border-color: rgba(234, 239, 250, .35); }
.btn-on-dark:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.btn-sm { padding: 8px 14px; font-size: .82rem; }
.btn-block { width: 100%; }

/* ------------------------------------------------------------------ hero */
.hero { padding-top: 64px; overflow: hidden; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } }

.hero h1 { font-size: clamp(2.3rem, 4.6vw, 3.4rem); line-height: 1.06; margin: 14px 0 18px; }
.hero h1 em { color: var(--accent-dark); font-style: italic; }
.hero-sub { font-size: 1.08rem; color: var(--mute); max-width: 46ch; margin-bottom: 28px; }
.hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.hero-micro { font-size: .82rem; color: var(--mute); }
.hero-micro b { color: var(--good); }

.play-pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-strong);
  font-weight: 600;
  font-size: .92rem;
  padding: 4px;
}
.play-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--navy-500);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
  flex: none;
}
.play-circle svg { width: 12px; height: 12px; margin-left: 2px; color: var(--accent); }

/* The hero shows the deliverable — a finished reel — not the raw material.
 * PRD §11: video-first, not photo-first. These are CSS stand-ins; drop real
 * poster images / <video> elements in when the assets exist (see README). */
.reel-stack { position: relative; display: flex; justify-content: center; }
.reel {
  width: 230px;
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(16, 26, 48, .5);
  border: 6px solid var(--paper-dim);
}
.reel-a {
  background:
    radial-gradient(120% 90% at 20% 0%, rgba(255, 255, 255, .16), transparent 55%),
    linear-gradient(200deg, #D9A15C 0%, #B9613F 45%, #6E3A45 100%);
  transform: rotate(-6deg) translateY(10px);
}
.reel-b {
  position: absolute;
  top: -26px; right: -46px;
  width: 150px;
  background:
    radial-gradient(120% 90% at 80% 0%, rgba(255, 255, 255, .18), transparent 55%),
    linear-gradient(200deg, #8FB2A6 0%, #3D6E68 55%, #1E3B44 100%);
  transform: rotate(9deg);
  display: none;
}
@media (min-width: 640px) { .reel-b { display: block; } }

.reel-texture {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 7px);
  mix-blend-mode: overlay;
}
.reel-chrome {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 14px;
}
.reel-label {
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.reel-playbtn {
  align-self: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  border: 1.4px solid rgba(255, 255, 255, .7);
  display: grid;
  place-items: center;
  backdrop-filter: blur(2px);
}
.reel-playbtn svg { width: 14px; height: 14px; fill: #fff; margin-left: 2px; }
.reel-meta {
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}

/* ----------------------------------------------------------- trust strip */
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 34px 0;
  background: var(--paper-dim);
}
.trust .wrap { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; justify-content: space-between; }
.trust-stat { display: flex; align-items: baseline; gap: 10px; flex: 0 1 auto; min-width: 0; }
.trust-stat b { font-family: 'Playfair Display', Georgia, serif; font-size: 1.7rem; color: var(--ink-strong); }
.trust-stat span { color: var(--mute); font-size: .85rem; }
.trust-channels { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.trust-channels .label { font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; color: var(--mute); font-weight: 700; }
.trust-channels ul { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.trust-channels li {
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  color: var(--navy-700);
  font-size: .98rem;
}

/* -------------------------------------------------------- section header */
.sec-head { max-width: 640px; margin-bottom: 40px; }
.sec-head h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); margin-top: 10px; }
.sec-head p { color: var(--mute); margin-top: 12px; font-size: 1.02rem; }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------------------------------- how it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 24px;
}
.step-num {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--surface-high);
  color: var(--accent);
  display: grid;
  place-items: center;
  font-family: 'Playfair Display', Georgia, serif;
  font-weight: 600;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.12rem; margin-bottom: 8px; }
.step p { color: var(--mute); font-size: .94rem; }

/* -------------------------------------------------------- ROI calculator */
.roi {
  background: var(--navy-950);
  border-radius: 28px;
  padding: 48px 44px;
  color: var(--on-navy);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 46px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.roi::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 420px; height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(244, 201, 135, .16), transparent 70%);
}
@media (max-width: 860px) { .roi { grid-template-columns: 1fr; padding: 34px 24px; } }
/* .roi clips its own decorative glow with overflow:hidden, which means a grid
 * child wider than its column gets silently cut off rather than scrolling.
 * min-width:0 lets the columns actually shrink instead. */
.roi > * { min-width: 0; }
.roi-left { position: relative; }
.roi-left h2 { color: #fff; font-size: clamp(1.5rem, 2.6vw, 2rem); margin-top: 10px; }
.roi-left p { color: var(--on-navy-mute); margin-top: 12px; font-size: .98rem; }

.roi-controls { margin-top: 26px; }
.roi-control-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.roi-control-head label { font-size: .85rem; color: var(--on-navy-mute); }
.roi-number {
  width: 76px;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.1rem;
  color: #fff;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 8px;
  padding: 5px 8px;
  text-align: right;
}
input[type=range] {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 5px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .18);
  outline: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--navy-950);
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(244, 201, 135, .22);
}
input[type=range]::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--accent);
  border: 3px solid var(--navy-950);
  cursor: pointer;
}

.roi-card {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 26px;
  backdrop-filter: blur(6px);
  position: relative;
}
.roi-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.roi-box { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 14px; }
.roi-box .lbl { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--on-navy-mute); }
.roi-box .val { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; margin-top: 6px; color: #fff; }
.roi-box.product .val { color: var(--accent); }
.roi-savings {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(120deg, rgba(244, 201, 135, .18), rgba(244, 201, 135, .05));
  border: 1px solid rgba(244, 201, 135, .35);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.roi-savings .lbl { font-size: .78rem; color: var(--on-navy-mute); }
.roi-savings .val { font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; color: #fff; }
.roi-channels { font-size: .74rem; color: var(--mute); margin-top: 14px; line-height: 1.6; }
/* Two cost boxes side by side stop fitting somewhere under 400px — their
 * min-content width is set by the figures, which must not be shrunk. */
@media (max-width: 400px) {
  .roi { padding: 26px 16px; }
  .roi-card { padding: 18px; }
  .roi-compare { grid-template-columns: 1fr; }
  .roi-savings { flex-wrap: wrap; }
}
.roi-disclaimer { font-size: .72rem; color: var(--mute); margin-top: 16px; position: relative; }

/* -------------------------------------------------------------- showcase */
.showcase-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.rail-controls { display: flex; gap: 8px; margin-bottom: 40px; }
.rail-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  border: 1px solid var(--navy-500);
  background: var(--surface);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--ink-strong);
}
.rail-btn:hover { border-color: var(--accent); }
.rail-btn svg { width: 16px; height: 16px; }
@media (max-width: 760px) { .rail-controls { display: none; } }

.showcase-rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  padding: 6px 2px 20px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
.showcase-rail::-webkit-scrollbar { height: 6px; }
.showcase-rail::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }

.scard {
  flex: none;
  width: 172px;
  aspect-ratio: 9 / 16;
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: 0 14px 30px -16px rgba(16, 26, 48, .4);
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  color: inherit;
}
.scard .reel-chrome { padding: 11px; }
.scard .reel-label { font-size: .68rem; }
.scard .reel-playbtn { width: 36px; height: 36px; }
.scard .reel-meta { font-size: .64rem; }
.scard[hidden] { display: none; }

.g1 { background: linear-gradient(200deg, #E3B27A, #A55B3C 55%, #5C3140); }
.g2 { background: linear-gradient(200deg, #9FC2B6, #3E6E64 55%, #1F3A42); }
.g3 { background: linear-gradient(200deg, #C9A6D8, #7A4F92 55%, #3A2452); }
.g4 { background: linear-gradient(200deg, #E7C77E, #C08A3E 55%, #5A3A1E); }
.g5 { background: linear-gradient(200deg, #A9C4E0, #4E71A6 55%, #22314F); }
.g6 { background: linear-gradient(200deg, #E3A6A0, #B14F49 55%, #4A1F1F); }

.showcase-more { text-align: center; margin-top: 8px; }

/* ---------------------------------------------------------- feature grid */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; } }
.feature { padding: 24px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.feature .ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.feature .ico svg { width: 18px; height: 18px; }
.feature h3 { font-size: 1.02rem; margin-bottom: 6px; }
.feature p { font-size: .89rem; color: var(--mute); }
.feature.stat .ico { background: var(--surface-high); color: var(--accent); }
.feature.stat h3 { color: var(--accent-dark); font-family: 'Playfair Display', Georgia, serif; font-size: 1.5rem; }
.feature-footnote { margin-top: 22px; font-size: .82rem; color: var(--mute); text-align: center; }

/* --------------------------------------------------------------- pricing */
.billing-row { text-align: center; }
.billing-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px;
  margin-bottom: 10px;
}
/* Sits directly under the toggle rather than only in the footnote below the
 * grid: "excluding tax" is part of reading the price, not an afterthought. */
.billing-caption { font-size: .8rem; color: var(--mute); margin-bottom: 30px; }
.billing-toggle button {
  border: none;
  background: transparent;
  padding: 9px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-size: .86rem;
  font-weight: 600;
  color: var(--mute);
}
.billing-toggle button[aria-pressed="true"] { background: var(--surface-high); color: var(--ink-strong); }
.billing-toggle .save-tag {
  font-size: .68rem;
  background: var(--accent-soft);
  color: var(--accent-dark);
  padding: 2px 7px;
  border-radius: 6px;
  margin-left: 6px;
}
.billing-toggle button[aria-pressed="true"] .save-tag { background: var(--accent-soft); color: var(--accent); }

.price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: stretch; }
@media (max-width: 980px) { .price-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .price-grid { grid-template-columns: 1fr; } }

.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 22px;
  background: var(--surface);
  display: flex;
  flex-direction: column;
  position: relative;
}
.plan.feat { border-color: var(--accent); box-shadow: 0 22px 45px -24px rgba(244, 201, 135, .4); }
@media (min-width: 981px) { .plan.feat { transform: translateY(-8px); } }
.plan-badge {
  position: absolute;
  top: -13px; left: 22px;
  /* A chip, not a fill: the one gold fill in this view is the featured
     plan's button. The badge carries the same colour at tint strength so
     the two do not compete for "press me". */
  background: #341539;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: .68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .03em;
}
.plan .tier { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mute); }
.plan .price { font-family: 'Playfair Display', Georgia, serif; font-size: 2rem; color: var(--ink-strong); margin: 10px 0 2px; }
.plan .per { font-size: .78rem; color: var(--mute); }
.plan ul { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.plan li { font-size: .83rem; color: var(--ink); display: flex; gap: 8px; align-items: flex-start; }
.plan li svg { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--good); }
.plan .spacer { flex: 1; }

.payg-note {
  margin-top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  background: var(--paper-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 16px 20px;
}
.payg-note p { font-size: .88rem; color: var(--mute); }
.payg-note b { color: var(--ink-strong); }
.vat-note { margin-top: 14px; font-size: .78rem; color: var(--mute); text-align: center; }

/* ------------------------------------------------------------------- FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 2px; }
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 600;
  font-size: .98rem;
  color: var(--ink-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .plus {
  width: 22px; height: 22px;
  border-radius: 50%;
  border: 1.5px solid var(--navy-500);
  flex: none;
  display: grid;
  place-items: center;
  font-size: 1rem;
  color: var(--accent);
  transition: transform .2s ease;
}
.faq details[open] summary .plus { transform: rotate(45deg); }
.faq .a { font-size: .9rem; color: var(--mute); margin-top: 12px; max-width: 64ch; }

/* ------------------------------------------------------------- final CTA */
.final-cta {
  background: var(--navy-950);
  color: #fff;
  text-align: center;
  border-radius: 28px;
  padding: 64px 30px;
  position: relative;
  overflow: hidden;
}
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 90% at 50% 0%, rgba(244, 201, 135, .16), transparent 70%);
}
.final-cta > * { position: relative; }
.final-cta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.2rem); margin-top: 12px; }
.final-cta p { color: var(--on-navy-mute); margin: 14px 0 26px; }
.final-cta .hero-ctas { justify-content: center; margin-bottom: 0; }

/* ---------------------------------------------------------------- footer */
footer { background: var(--paper-dim); color: var(--mute); padding: 60px 0 26px; font-size: .86rem; }
.foot-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: 28px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
@media (max-width: 820px) { .foot-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .foot-grid { grid-template-columns: 1fr; } }
.foot-grid h2 {
  color: #fff;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: 14px;
  font-weight: 700;
  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.foot-grid a { text-decoration: none; color: var(--mute); }
.foot-grid a:hover { color: #fff; }
.foot-brand p { color: var(--mute); font-size: .85rem; max-width: 32ch; margin-top: 10px; }
.foot-lang { margin-top: 16px; }
.foot-lang select {
  font-size: .8rem;
  color: var(--on-navy-mute);
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.foot-bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 22px;
  font-size: .78rem;
  color: var(--mute);
}
.foot-legal { display: flex; gap: 16px; flex-wrap: wrap; }

/* -------------------------------------------------------------- lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(21, 8, 25, .88);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 24px;
}
.lightbox.open { display: flex; }
.lb-panel {
  width: min(420px, 100%);
  aspect-ratio: 9 / 16;
  border-radius: 22px;
  background: linear-gradient(200deg, #D9A15C, #B9613F 45%, #6E3A45 100%);
  position: relative;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(0, 0, 0, .6);
}
.lb-close {
  position: absolute;
  top: 16px; right: 16px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .45);
  border: 1px solid rgba(255, 255, 255, .4);
  color: #fff;
  cursor: pointer;
  z-index: 2;
}
.lb-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 20px;
  color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, .65), transparent);
  font-size: .85rem;
}
.lb-play { position: absolute; inset: 0; display: grid; place-items: center; }
.lb-play .reel-playbtn { width: 64px; height: 64px; }
.lb-play svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------- motion */
/* PRD §11 and §12: motion is purposeful, and it is all optional. */
/* Scoped to .js (set by config.js from <head>) so that a blocked, failed or
 * disabled script leaves every section visible rather than blank. Nothing on
 * this page may depend on JavaScript to become readable. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
}

@media print {
  header.site, .lightbox, .rail-controls, .showcase-more { display: none; }
  /* The screen theme is dark; paper is not. */
  body { background: #fff; color: #241028; }
  h1, h2, h3, .plan .price, .trust-stat b, .faq summary { color: #241028; }
}