/* ============================================================
   Videmory — styles.css

   Colour tokens are lifted from the product's own design system
   (justlikethat_app/lib/design_system.dart) and the renderer's
   title cards (src/render/titleCard.ts), so the site and the film
   read as the same product.
   ============================================================ */

:root {
  /* Lifted from justlikethat_app/lib/design_system.dart after the app moved
     off the inherited violet-to-pink palette. Its note is worth repeating:
     #7C3AED to #EC4899 is Tailwind violet-600 to pink-500, the default
     gradient of every AI product of the last few years, and a saturated
     ground fought every photograph put on top of it.

     The token names are unchanged on purpose, exactly as the app kept its
     Dart names — redefining the values here re-skins every call site at once.

     Ground and glass */
  --bg-deep:      #0B0D10;                    /* kBgBase — neutral, faintly cool */
  --surface:      rgba(255, 255, 255, 0.14);  /* kSurface — translucent */
  --surface-solid:#1C1F24;                    /* kSurfaceSolid — floats above  */
  --film-card:    #14171B;                    /* the renderer's title cards     */

  /* Warm neutrals. Held under their old names because the stylesheet refers
     to them in a hundred places; they are no longer violet or pink. */
  --purple:       #E7E2D9;   /* kPurple — warm off-white, hairlines and edges */
  --pink:         #D8C9B4;   /* kPink   — a half-step warmer, the one accent  */
  --pink-deep:    #D8C9B4;
  --pink-ink:     #6B6255;   /* the same family, dark enough to read as text  */

  --on-light:     #14171B;   /* kOnLight — ink on a white fill                */

  /* Reading sections. The app has no light surface at all now, so these are
     lifted steps off the ground rather than paper. */
  --paper:       #101317;
  --paper-deep:  #171A1F;
  --ink:         #ffffff;
  --ink-soft:    rgba(255, 255, 255, 0.66);
  --ink-line:    rgba(231, 226, 217, 0.12);

  /* On dark */
  --on-dark:        #ffffff;
  --on-dark-82:     rgba(255, 255, 255, 0.82);
  --on-dark-70:     rgba(255, 255, 255, 0.70);
  --on-dark-60:     rgba(255, 255, 255, 0.60);
  --on-dark-55:     rgba(255, 255, 255, 0.55);
  --on-dark-50:     rgba(255, 255, 255, 0.50);
  --hairline:       rgba(231, 226, 217, 0.16);
  --hairline-soft:  rgba(231, 226, 217, 0.08);

  /* One family throughout, as the app now does: "Bricolage Grotesque carries
     an optical-size axis, so it holds up at body sizes as well as on the
     wordmark." The serif pairing is gone with the old palette. */
  --serif: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --sans:  "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;

  --radius:    24px;
  --radius-sm: 999px;   /* the app's buttons are pills now */
  --shadow:    0 8px 22px rgba(0, 0, 0, 0.24);

  /* The scrim over a backdrop photograph. Copied stop for stop from kScrim:
     heavy at top and bottom where text sits, lightest across the middle
     where the photograph is allowed to be a photograph. */
  --scrim: linear-gradient(180deg,
             rgba(11,13,16,0.90) 0%,
             rgba(11,13,16,0.50) 26%,
             rgba(11,13,16,0.62) 62%,
             rgba(11,13,16,0.95) 100%);

  --wrap: 1160px;
}

/* ---------- Reset & base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 500;
  margin: 0;
  text-wrap: pretty;
  letter-spacing: -0.3px;
}

p  { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
img, video { max-width: 100%; display: block; }

a { color: var(--pink); text-decoration: none; }
a:hover { color: #fff; }

/* Purple reads at only 3.1:1 on the deep indigo, so links inside dark
   blocks take the pink instead — and carry an underline, since colour
   alone should never be the only thing marking a link. */
.block-dark p a,
.block-dark li a {
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.block-dark p a:hover,
.block-dark li a:hover { color: #fff; }
.block-warm p a,
.block-warm li a { color: var(--pink); text-decoration: underline; text-underline-offset: 3px; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 20px;
  background: var(--bg-deep);
  border: 2px solid var(--pink);
  border-radius: 8px;
  color: #fff;
  font-weight: 700;
}
.skip-link:focus { left: 12px; top: 12px; color: #fff; }

/* Icons take the colour of the text around them, as the app does. */
.feature svg, .tick-list svg, .trust-card svg, .demo-head svg { color: var(--pink); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding-left: 32px;
  padding-right: 32px;
}

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

/* ---------- Blocks ---------- */

.block-dark  { background: var(--bg-deep); color: var(--on-dark); }
.block-warm  { background: var(--paper); color: var(--ink); }

.block-dark h1,
.block-dark h2,
.block-dark h3 { color: var(--on-dark); }

/* The app's signature: a photograph behind everything, under a fixed scrim.
   The scrim is deliberately not adapted per image — the app's note explains
   why, and the same reasoning holds here. */
.block-glow {
  position: relative;
  isolation: isolate;
  background-image: var(--scrim), url("assets/images/demo-poster.jpg");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.section { padding-top: 120px; }
.section-tight { padding-top: 80px; }
.section-end { padding-bottom: 130px; }

/* ---------- Nav ---------- */

.site-nav {
  background: var(--bg-deep);
  position: relative;
  z-index: 20;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 88px;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--on-dark);
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: 0.2px;
}
.nav-brand:hover { color: var(--on-dark); }
.nav-brand svg { flex-shrink: 0; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.nav-toggle span {
  display: block;
  width: 22px; height: 1.6px;
  margin: 4px 0;
  background: var(--on-dark-70);
  border-radius: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  color: var(--on-dark-70);
  font-size: 15px;
}
.nav-links a:hover,
.nav-links a[aria-current="page"] { color: var(--on-dark); }

/* The CTA is a button that happens to live in the nav, so it must not inherit
   the nav's muted link colour. It used to be forced to white to survive the
   old gradient fill; the pill is white itself now, so that would paint white
   on white — it takes the button's own ink instead. */
.nav-links a.btn,
.nav-links a.btn:hover { color: var(--on-light); }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 56px;
  padding: 0 32px;
  border-radius: var(--radius-sm);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
}

/* A single flat white pill, straight from PrimaryGradientButton. The app's
   reasoning: "Gradients on buttons were a 2021 signature and they date an app
   faster than its colours do... White because the ground is a photograph, and
   nothing else is guaranteed to stand off an arbitrary image." */
.btn-primary {
  background: #fff;
  border: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.30);
  color: var(--on-light);
  font-weight: 600;
  letter-spacing: 0.1px;
}
.btn-primary:hover { color: var(--on-light); background: #f2efe9; }

.btn-secondary {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(18px);
  border: 1px solid var(--hairline);
  color: var(--on-dark);
  font-weight: 500;
}
.btn-secondary:hover { color: var(--on-dark); background: rgba(255, 255, 255, 0.1); }

.btn-nav {
  height: 44px;
  padding: 0 22px;
  font-size: 15px;
}

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

.hero { padding-top: 92px; padding-bottom: 0; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 26px;
  color: var(--on-dark-50);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--pink);
  flex-shrink: 0;
}

.hero h1 {
  max-width: 940px;
  font-size: clamp(38px, 4.6vw, 66px);
  line-height: 1.1;
  letter-spacing: -0.8px;
}
.hero h1 .accent { color: var(--pink); }

.hero-sub {
  max-width: 640px;
  margin-top: 30px;
  font-size: clamp(17px, 1.4vw, 19px);
  line-height: 1.65;
  color: var(--on-dark-70);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
}

.hero-note {
  margin-top: 26px;
  font-size: 15px;
  color: var(--on-dark-50);
}

/* ---------- Page header (inner pages) ---------- */

.page-head { padding-top: 76px; padding-bottom: 96px; }
.page-head h1 {
  max-width: 860px;
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.12;
  letter-spacing: -0.6px;
}
.page-head .hero-sub { margin-top: 24px; }

/* ---------- Demo film ---------- */

.demo { padding-top: 96px; padding-bottom: 128px; }

.demo-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.demo-head h2 { font-size: clamp(28px, 2.6vw, 34px); line-height: 1.2; }
.demo-head p  { font-size: 15px; color: var(--on-dark-50); }

.demo-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 380px;
  border-radius: var(--radius);
  background: var(--film-card);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.demo-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Shown until permission-cleared demo media exists. */
.demo-pending {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 32px 28px;
  text-align: center;
}
.demo-pending-disc {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
}
.demo-pending-title {
  font-family: var(--serif);
  font-size: clamp(22px, 2vw, 26px);
  color: var(--on-dark-82);
}
.demo-pending-body {
  max-width: 420px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--on-dark-50);
}

/* ---------- Owner blanks ---------- */

.owner-chip {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px dashed rgba(216, 201, 180, 0.55);
  color: var(--pink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.block-warm .owner-chip {
  color: var(--pink);
  border-color: rgba(216, 201, 180, 0.45);
}

/* ---------- Steps ---------- */

.section-title {
  max-width: 700px;
  font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.4px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  margin-top: 56px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 44px 64px;
  margin-top: 54px;
}

.step-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 34px 30px 38px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-line);
}
.step-num {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--pink);
}
.step-card h3 { font-size: clamp(22px, 2vw, 26px); line-height: 1.25; }
.step-card p  { color: var(--ink-soft); }

/* ---------- Feature rows ---------- */

.feature {
  display: flex;
  gap: 20px;
}
.feature svg { flex-shrink: 0; margin-top: 3px; }
.feature-text {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.feature h3 { font-size: clamp(20px, 1.8vw, 23px); }
.feature p  { color: var(--ink-soft); }

/* ---------- Honesty ---------- */

.honesty {
  padding: 68px 72px;
  border-radius: var(--radius);
  background: var(--paper-deep);
  border: 1px solid rgba(20, 18, 31, 0.08);
}
.honesty h2 { max-width: 640px; font-size: clamp(28px, 3vw, 42px); line-height: 1.18; }
.honesty .grid-3 { margin-top: 48px; gap: 40px; }
.honesty-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.honesty-item h3 { font-size: clamp(19px, 1.7vw, 21px); line-height: 1.3; }
.honesty-item p  { color: var(--ink-soft); }
.honesty-item strong { font-weight: 400; color: var(--ink); }

/* ---------- Trust ---------- */

/* Frosted, not filled — the blur is what makes a translucent panel read as
   glass rather than a washed-out box. Copied from SurfaceCard. */
.trust-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(231, 226, 217, 0.16);
  box-shadow: var(--shadow);
}
.trust-card h3 { font-size: 20px; }
.trust-card p  { font-size: 15px; color: var(--on-dark-60); }
.trust-grid { margin-top: 0; }

/* ---------- Price ---------- */

.price-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 80px;
  align-items: center;
}
.price-lede {
  display: flex;
  flex-direction: column;
  gap: 22px;
  align-items: flex-start;
}
.price-lede h2 { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.14; }
.price-lede > p { font-size: clamp(17px, 1.4vw, 18px); color: var(--on-dark-70); }

.price-figure {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.price-amount {
  font-family: var(--serif);
  font-size: clamp(56px, 5.6vw, 76px);
  line-height: 1;
}
.price-unit { font-size: 17px; color: var(--on-dark-50); }
/* The launch-offer note under the figure: present, quiet, no countdown. */
.price-note { font-size: 14px; line-height: 1.55; color: var(--on-dark-50); }

.price-card {
  padding: 40px 40px 44px;
  border-radius: var(--radius);
  background: var(--surface);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(231, 226, 217, 0.16);
  box-shadow: var(--shadow);
}
.card-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--on-dark-55);
}
.tick-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 24px;
}
.tick-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--on-dark-82);
  line-height: 1.55;
}
.tick-list svg { flex-shrink: 0; margin-top: 3px; }

.card-rule {
  height: 1px;
  background: var(--hairline);
  margin: 28px 0 22px;
  border: 0;
}
.card-note { font-size: 15px; color: var(--on-dark-55); }

/* ---------- Final CTA ---------- */

.cta-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  padding: 76px 60px;
  border-radius: var(--radius);
  background: var(--film-card);
  background-image: radial-gradient(620px 340px at 50% 0%, rgba(216, 201, 180, 0.10), rgba(11, 13, 16, 0) 72%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-align: center;
}
.cta-panel h2 {
  max-width: 720px;
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.14;
}
.cta-panel p {
  max-width: 520px;
  font-size: clamp(16px, 1.4vw, 18px);
  color: var(--on-dark-70);
}

/* ---------- Prose (inner pages) ---------- */

.prose { max-width: 720px; }
.prose h2 {
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.2;
  margin-top: 64px;
}
.prose h2:first-child { margin-top: 0; }
.prose h3 {
  font-size: clamp(20px, 1.9vw, 24px);
  margin-top: 36px;
}
.prose p { margin-top: 16px; }
.prose ul.bullets { margin-top: 16px; }
.prose ul.bullets li {
  position: relative;
  padding-left: 22px;
  margin-top: 10px;
}
.prose ul.bullets li::before {
  content: "";
  position: absolute;
  left: 2px; top: 11px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--purple);
}
.block-dark .prose p,
.block-dark .prose li { color: var(--on-dark-70); }
.block-warm .prose p,
.block-warm .prose li { color: var(--ink-soft); }

.role-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
  margin-top: 48px;
}
.role-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 36px 34px 40px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-line);
}
.role-card h3 { font-size: clamp(22px, 2vw, 26px); }
.role-card p  { color: var(--ink-soft); }
.role-tag {
  align-self: flex-start;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(231, 226, 217, 0.12);
  color: var(--purple);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

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

.faq-list { max-width: 780px; margin-top: 48px; }

.faq-item {
  border-top: 1px solid var(--ink-line);
  padding: 4px 0;
}
.faq-item:last-child { border-bottom: 1px solid var(--ink-line); }

.faq-item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(19px, 1.8vw, 23px);
  line-height: 1.35;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
  content: "";
  flex-shrink: 0;
  width: 13px; height: 13px;
  margin-top: 8px;
  border-right: 1.6px solid var(--pink);
  border-bottom: 1.6px solid var(--pink);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(-135deg); }

.faq-answer { padding-bottom: 28px; }
.faq-answer p { color: var(--ink-soft); max-width: 660px; }
.faq-answer p + p { margin-top: 14px; }

/* ---------- Forms ---------- */

.form-panel {
  max-width: 620px;
  margin-top: 44px;
  padding: 40px 40px 44px;
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-line);
}

.form-row { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; }
.form-row label { font-size: 15px; font-weight: 500; color: var(--ink); }
.form-row .hint { font-size: 14px; color: var(--ink-soft); }

.form-row input,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(231, 226, 217, 0.22);
  background: rgba(255, 255, 255, 0.06);
  font-family: var(--sans);
  font-size: 16px;
  color: var(--ink);
}
.form-row input:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(231, 226, 217, 0.18);
}
.form-row textarea { min-height: 160px; resize: vertical; }

.form-hp { position: absolute; left: -9999px; }

/* The credit look-up on /credits/: the form, then each credit as the old
   list wrote it, with the whole line to paste in a box of its own. */
.credit-lookup { margin: 28px 0 40px; }
.credit-form { max-width: 560px; }
.credit-form .form-row { margin-bottom: 16px; }
.credit-results { margin-top: 26px; }
.credit-hit { padding: 18px 0; border-top: 1px solid var(--hairline); }
.credit-hit p { margin: 0 0 8px; }
.credit-track { font-weight: 600; }
.credit-paste { display: flex; flex-direction: column; gap: 6px; }
.credit-paste code { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px; line-height: 1.5; padding: 10px 12px; border-radius: 6px; background: rgba(0, 0, 0, 0.06);
  overflow-wrap: anywhere; user-select: all; }
.credit-note { font-size: 15px; color: var(--ink-soft); }

.form-submit .btn { width: 100%; }

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

.site-footer {
  background: var(--bg-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.footer-inner { padding: 56px 0 64px; }
.footer-top {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
.footer-brand { display: flex; flex-direction: column; gap: 14px; }
.footer-brand p { max-width: 300px; font-size: 15px; color: var(--on-dark-55); }

.footer-cols { display: flex; gap: 72px; flex-wrap: wrap; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--on-dark-55);
}
.footer-col a { color: var(--on-dark-70); font-size: 15px; }
.footer-col a:hover { color: var(--on-dark); }
.footer-col a.pending { color: var(--on-dark-55); }

.footer-legal {
  display: flex;
  /* A column, so the seller line, the GST line and the legal-review line each
     get one of their own instead of running together across the width. */
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--hairline-soft);
}
.footer-legal span.note { font-size: 14px; color: var(--on-dark-55); }

/* ============================================================
   Journey — the shape of a trip, used as page structure
   ============================================================ */

.journey { padding-top: 104px; padding-bottom: 104px; }

.journey-rail {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 20px;
  margin-top: 56px;
  padding-top: 42px;
}

/* The route: one line through every stop, in the brand gradient. */
.journey-rail::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), var(--pink));
  opacity: 0.55;
  border-radius: 2px;
}

.journey-stop { position: relative; }

.journey-stop::before {
  content: "";
  position: absolute;
  top: -38px;
  left: 50%;
  width: 12px; height: 12px;
  margin-left: -6px;
  border-radius: 50%;
  background: var(--bg-deep);
  border: 2px solid var(--pink);
}
.journey-stop:last-child::before {
  background: var(--pink);
  box-shadow: 0 0 0 5px rgba(216, 201, 180, 0.18);
}

.journey-stop h3 {
  font-size: 19px;
  line-height: 1.3;
  text-align: center;
}
.journey-stop p {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--on-dark-60);
  text-align: center;
}

/* ============================================================
   Demo stage — the centrepiece
   ============================================================ */

.demo-stage { padding-top: 20px; padding-bottom: 120px; }

.demo-stage .demo-head { margin-bottom: 30px; }

.demo-frame-lg {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  background: var(--film-card);
  border: 1px solid var(--hairline);
  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(231, 226, 217, 0.14);
  overflow: hidden;
}
.demo-frame-lg video { width: 100%; height: 100%; object-fit: cover; }
/* The Mux player fills the frame. display:block kills the inline-element
   gap under an iframe, which would otherwise show as a hairline of card
   colour along the bottom edge. */
.demo-frame-lg iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* The 9:16 cut on a phone held upright: the frame turns tall and narrow
   enough that the whole film is on screen at once, and sits centred. */
.demo-frame-lg.is-tall { aspect-ratio: 9 / 16; max-width: min(400px, 78vw); margin-left: auto; margin-right: auto; }

/* mux-player is an unknown element until its script upgrades it, and an
   unknown element is inline with no size. Given the box up front, the
   card never resizes when the player arrives. */
.demo-frame-lg mux-player {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--film-card);
  /* The film and the frame are both 16:9, so contain and cover agree here.
     Contain is the one that stays honest if a future sample is not. */
  --media-object-fit: contain;
  --controls-backdrop-color: rgba(11, 13, 16, 0.32);
  --media-font-family: var(--sans);
}

.demo-frame-lg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 90% at 50% 0%, rgba(216, 201, 180, 0.09), rgba(11, 13, 16, 0) 62%);
}

/* A still from the trip, standing in until the demo film is cleared. */
.demo-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Scrim over the poster. Without it the caption sits on sky and sea and
   becomes unreadable, which is exactly the contrast failure this site
   has already been fixed for once. */
.demo-frame-lg .demo-pending::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(11, 13, 16, 0.34) 0%, rgba(11, 13, 16, 0.10) 34%, rgba(11, 13, 16, 0.86) 100%),
    radial-gradient(60% 55% at 50% 44%, rgba(11, 13, 16, 0.55), rgba(11, 13, 16, 0) 72%);
}
.demo-frame-lg .demo-pending > * { position: relative; }

/* No poster on disk yet: no scrim needed over a card that is already dark. */
.demo-frame-lg.no-poster .demo-pending::before { display: none; }

/* On the poster the disc needs its own weight to read against the image. */
.demo-frame-lg .demo-pending-disc {
  background: rgba(11, 13, 16, 0.45);
  border-color: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
}
.demo-frame-lg .demo-pending-disc svg { fill: rgba(255, 255, 255, 0.92); }
.demo-frame-lg .demo-pending-title { color: #fff; }
.demo-frame-lg .demo-pending-body { color: rgba(255, 255, 255, 0.82); }

.demo-pending-disc-lg {
  width: 92px; height: 92px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   Contrast — every camera roll, against one finished film
   ============================================================ */

.contrast-split {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 40px;
  align-items: center;
  margin-top: 56px;
}

.contrast-col h3 {
  font-size: clamp(20px, 1.9vw, 24px);
  margin-bottom: 6px;
}
.contrast-col > p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-bottom: 24px;
}

.roll-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.roll-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--ink-line);
  box-shadow: 0 2px 8px rgba(20, 18, 31, 0.05);
}
/* Scattered, the way they actually are. */
.roll-tile:nth-child(1) { transform: rotate(-1.1deg) translateX(-6px); }
.roll-tile:nth-child(2) { transform: rotate(0.7deg)  translateX(8px);  }
.roll-tile:nth-child(3) { transform: rotate(-0.5deg) translateX(-2px); }
.roll-tile:nth-child(4) { transform: rotate(1.2deg)  translateX(5px);  }

.roll-who { font-size: 15px; font-weight: 500; color: var(--ink); }
.roll-count { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }

.contrast-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple), var(--pink-deep));
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
  flex-shrink: 0;
}

.film-result {
  padding: 26px 26px 28px;
  border-radius: 20px;
  background: var(--bg-deep);
  background-image: radial-gradient(300px 200px at 50% 0%, rgba(216, 201, 180, 0.12), rgba(11, 13, 16, 0) 70%);
  box-shadow: var(--shadow);
}
.film-result-frame {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background: var(--film-card);
  border: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
}
.film-result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--on-dark-70);
}
.film-result-meta span { display: flex; align-items: center; gap: 7px; }

/* ============================================================
   Choose your film
   ============================================================ */

.choose-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 52px;
}

.choose-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 36px 34px 38px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow);
}
.choose-badge {
  align-self: flex-start;
  padding: 6px 13px;
  border-radius: 999px;
  background: rgba(216, 201, 180, 0.14);
  border: 1px solid rgba(216, 201, 180, 0.34);
  color: #E7E2D9;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.7px;
  text-transform: uppercase;
}
.choose-card h3 { font-size: clamp(24px, 2.3vw, 30px); line-height: 1.2; }
.choose-card > p { color: var(--on-dark-70); line-height: 1.62; }

.choose-meta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
}
.choose-meta li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-dark-82);
}
.choose-meta svg { flex-shrink: 0; margin-top: 3px; }

.choose-note {
  margin-top: 28px;
  font-size: 16px;
  line-height: 1.62;
  color: var(--on-dark-70);
  max-width: 660px;
}

/* ---------- Motion ---------- */

/* Scoped to .js (set by an inline script in each <head>) so that with
   JavaScript disabled these elements are simply visible, rather than
   permanently transparent with nothing to reveal them. */
.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

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

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

@media (max-width: 1000px) {
  .grid-3, .honesty .grid-3 { grid-template-columns: 1fr; gap: 16px; }
  .grid-2 { grid-template-columns: 1fr; gap: 30px; }
  .price-split { grid-template-columns: 1fr; gap: 40px; }
  .role-split { grid-template-columns: 1fr; }
  .honesty { padding: 40px 32px 44px; }
  .cta-panel { padding: 56px 32px; }
  .section { padding-top: 84px; }
  .section-end { padding-bottom: 84px; }
  .demo { padding-top: 72px; padding-bottom: 84px; }

  .choose-grid { grid-template-columns: 1fr; gap: 16px; }
  .choose-card { padding: 30px 26px 32px; }

  /* The route turns vertical: it is still a journey, just read downwards. */
  .journey { padding-top: 76px; padding-bottom: 76px; }
  .journey-rail {
    grid-template-columns: 1fr;
    gap: 26px;
    margin-top: 40px;
    padding-top: 0;
    padding-left: 34px;
  }
  .journey-rail::before {
    top: 8px;
    bottom: 8px;
    left: 5px;
    right: auto;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, rgba(231,226,217,0.55), rgba(216,201,180,0.25));
  }
  .journey-stop::before { top: 4px; left: -34px; margin-left: 0; }
  .journey-stop h3, .journey-stop p { text-align: left; }

  .contrast-split { grid-template-columns: 1fr; gap: 28px; }
  .contrast-arrow { transform: rotate(90deg); margin: 0 auto; }
  .roll-tile { transform: none; }

  .demo-stage { padding-bottom: 84px; }
}

@media (max-width: 720px) {
  .wrap { padding-left: 24px; padding-right: 24px; }

  .nav-toggle { display: flex; }
  .nav-inner { min-height: 68px; flex-wrap: wrap; }
  .nav-links {
    display: none;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-bottom: 12px;
  }
  .nav-links.open { display: flex; }
  .nav-links li { border-top: 1px solid var(--hairline-soft); }
  .nav-links a {
    display: flex;
    align-items: center;
    min-height: 52px;
    font-size: 16px;
  }
  .nav-links .btn-nav { margin-top: 14px; width: 100%; height: 50px; }
  .nav-links li:has(.btn-nav) { border-top: 0; }

  /* Tightened so the primary CTA clears the fold on a 375x667 phone, not
     just on the taller ones. */
  .hero { padding-top: 30px; }
  .hero h1 { font-size: clamp(33px, 8.6vw, 38px); }
  .hero .eyebrow { margin-bottom: 18px; }
  .hero-sub { margin-top: 20px; font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: stretch; margin-top: 26px; gap: 12px; }
  .hero-actions .btn { width: 100%; height: 54px; }
  .hero-note { margin-top: 18px; }

  .demo-frame { aspect-ratio: auto; min-height: 0; height: 420px; }
  /* The film keeps its 16:9 on a phone too. The 440px height here was for
     the placeholder panel, which needed room for a paragraph; a real film
     put in a portrait box just letterboxes itself inside it. */
  .demo-pending-disc-lg { width: 72px; height: 72px; }

  .film-result { padding: 20px 20px 22px; }

  .price-card, .form-panel { padding: 30px 24px 34px; }

  /* Footer links are standalone targets, not words inside a sentence, so
     they get a real touch height. Inline links in body copy are left alone. */
  .footer-cols { gap: 32px; }
  .footer-col { gap: 0; }
  .footer-col a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .footer-col-title { margin-bottom: 4px; }

  .cta-panel .btn { width: 100%; }
}

/* The contact form's result line. Hidden until there is something to say. */
.form-status {
  margin: 4px 0 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--on-dark-70);
}
.form-status.is-error {
  color: #FFD9D9;
  border-left: 2px solid #E4736F;
  padding-left: 12px;
}

/* ---------- Product switcher ----------
   Videmory sells two things from one site. The switcher sits beside the brand
   mark on every page so the other product is always one click away, and it is
   a pair of pills rather than two more items in .nav-links: dropped in there
   they read as page links, and on a Travel page "Birthday" beside "Pricing"
   suggests Birthday pricing. */

.nav-switch {
  display: flex;
  margin-right: auto;
  margin-left: 20px;
  padding: 3px;
  border: 1px solid var(--hairline-soft);
  border-radius: 999px;
}
.nav-switch a {
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  line-height: 1.2;
  color: var(--on-dark-60);
  white-space: nowrap;
}
.nav-switch a:hover { color: var(--on-dark); }
.nav-switch a[aria-current="page"] {
  background: var(--pink);
  color: var(--on-light);
}

/* Four columns now that Birthday has its own. */
.footer-cols { gap: 56px; }

/* The switcher has to share the bar with the brand mark and the menu button,
   and on a phone the three of them are within a few pixels of not fitting.
   They give way in order: the switcher's padding first, then its type and the
   wordmark's, and only under 340px does the word "Videmory" go and leave the
   mark on its own. Measured at every width from 320 to 430. */
@media (max-width: 900px) {
  .nav-switch { margin-left: 12px; padding: 2px; }
  .nav-switch a { padding: 6px 10px; font-size: 12px; }
}
@media (max-width: 430px) {
  .nav-brand { font-size: 19px; gap: 8px; }
  .nav-switch { margin-left: 10px; }
  .nav-switch a { padding: 5px 8px; font-size: 11px; }
}
@media (max-width: 340px) {
  .nav-brand span { display: none; }
}