/* ============================================================
   Passport landing — passport.audio
   "Production paperwork" design system (2026-07-23 rework).
   Cream paper ground, Courier Prime document type, amber as
   rubber-stamp ink. Sections read like a continuity sheet, not
   a SaaS page. Legacy token names are aliased so download.html
   restyles without edits.
   ============================================================ */

:root {
  /* Paper */
  --paper: #F2EDE1;          /* the sheet */
  --paper-raised: #FAF6EC;   /* cards, callouts */
  --paper-shade: #EAE3D3;    /* wells (demo frame) */
  --rule: #C9BFA4;           /* printed form rules */
  --rule-strong: #A99C7B;

  /* Ink */
  --ink: #26221A;
  --ink-2: #55503F;
  --ink-3: #6E6750;

  /* Stamp (brand amber, two duties) */
  --stamp: #C67C0E;          /* stamp graphics, large marks */
  --accent-ink: #8A5806;     /* amber for running text — AA on paper */
  --accent-fill: #EF9F27;    /* solid button fills (app brand amber) */
  --on-accent: #2A2007;

  /* Visa stamp-pad inks */
  --ink-visa-navy: #2F4C78;
  --ink-visa-red: #A63D2F;
  --ink-visa-teal: #1F6E5E;

  --mono: "Courier Prime", "Courier New", Courier, monospace;
  --sans: "Courier Prime", "Courier New", Courier, monospace;
  --radius: 3px;

  /* Legacy aliases (download.html + any stragglers) */
  --bg: var(--paper);
  --bg-raised: var(--paper-raised);
  --card: var(--paper-raised);
  --border: var(--rule);
  --border-strong: var(--rule-strong);
  --text: var(--ink);
  --text-2: var(--ink-2);
  --text-3: var(--ink-3);
  --accent: var(--accent-fill);
  --accent-dim: var(--accent-ink);
  --accent-faint: #F3E4C4;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--mono);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: var(--accent-ink); text-decoration: none; }

.accent { color: var(--accent-ink); font-weight: 700; }

/* Highlighter pen over the load-bearing phrases */
.hl {
  color: var(--ink);
  font-weight: 700;
  background: linear-gradient(180deg, transparent 42%, rgba(239, 159, 39, 0.32) 42%, rgba(239, 159, 39, 0.32) 92%, transparent 92%);
  padding: 0 2px;
}

/* Rubber-stamp mark — reused wherever something is "stamped" */
.stampmark {
  display: inline-block;
  border: 3px double var(--stamp);
  border-radius: 6px;
  color: var(--stamp);
  font-weight: 700;
  text-transform: uppercase;
  transform: rotate(-3deg);
}

/* ============================================================
   Hero — the title page of the paperwork packet
   ============================================================ */

.hero {
  min-height: 92svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 48px 24px 64px;
  border-bottom: 1px solid var(--rule);
}

/* Faint oversized stamp behind the title block */
.hero::before {
  content: "PASSPORT";
  position: absolute;
  top: 10%;
  right: 4%;
  border: 4px solid var(--stamp);
  border-radius: 10px;
  padding: 6px 22px;
  font-size: clamp(20px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--stamp);
  opacity: 0.24;
  transform: rotate(8deg);
  pointer-events: none;
}

.hero__center {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 64px;
}

.hero__wordmark {
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: clamp(42px, 7.5vw, 72px);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.hero__dot {
  width: 0.28em;
  height: 0.28em;
  border-radius: 50%;
  background: var(--accent-fill);
  flex: 0 0 auto;
  align-self: center;
}

.hero__tagline {
  color: var(--ink-2);
  font-style: italic;
  font-size: clamp(15px, 2.2vw, 19px);
  text-align: center;
  text-wrap: balance; /* narrow phones wrap to two even lines, not "…in your / cut." */
}

/* The typed rule under the tagline — a form line, not a glow */
.hero__line {
  width: 220px;
  height: 0;
  border-bottom: 1px solid var(--rule-strong);
  margin-top: 10px;
}

/* Hero menu — sits between the divider and the scene strip */
.hero__menu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 18px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.hero__menu a {
  color: var(--ink-2);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.hero__menu a:hover {
  color: var(--accent-ink);
  border-bottom-color: var(--accent-ink);
}
.hero__menu-dot {
  color: var(--rule-strong);
}

/* Back-to-top arrow — one per menu-target section, bottom-right of the content */
.section__top {
  position: absolute;
  bottom: -40px; /* into the section's bottom padding, clear of content */
  right: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  color: var(--ink-3);
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.section__top:hover {
  color: var(--accent-ink);
  border-color: var(--accent-ink);
  transform: translateY(-2px);
}

/* The scene strip — a slow ticker of the episode's scenes, running left
   to right like a client list. Hover pauses it; edges fade to show it
   continues. Two copies of the scene set ride the animated track (the
   second is cloned in main.js) so the loop lands on an identical frame. */
.strip {
  max-width: min(920px, 92vw);
  overflow: hidden;
  position: relative;
  z-index: 1;
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%);
}

.strip__track {
  display: flex;
  width: max-content;
  animation: stripRun 90s linear infinite;
  will-change: transform; /* keep the ticker on its own compositor layer */
}

.strip:hover .strip__track { animation-play-state: paused; }

.strip__set {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding-right: 6px; /* trailing gap so the two copies join seamlessly */
}

@keyframes stripRun {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* The three-lane row: PT-style track names on the left, the masked
   ticker viewport beside them. */
.strip-row {
  display: flex;
  align-items: stretch;
  gap: 12px;
  position: relative;
  z-index: 1;
  max-width: min(980px, 94vw);
}

.strip-row .strip { flex: 1 1 auto; min-width: 0; }

.strip-labels {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.strip-labels span {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.strip-labels span { height: 46px; }
.strip-labels span:nth-child(3) { height: 22px; }

/* One scene = one duration-proportional column; its three cells are the
   scene clip, the description clip, and the shot ticks. Same column,
   same track — the lanes cannot drift out of sync. */
.scol {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Desc and shot lanes match the scenes lane: same height, same amber
   clip treatment — three tracks of the same session. */
.dclip {
  height: 46px;
  display: flex;
  align-items: center;
  padding: 8px 11px;
  font-size: 10.5px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  color: var(--ink-2);
  background: #F6EAD0;
  border: 1px solid var(--stamp);
  border-left: 3px solid var(--stamp);
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* The shots lane is a thin rail — same ink, lower profile, so the
   dense cut rhythm reads as texture instead of clutter. */
.shots {
  display: flex;
  gap: 3px;
  height: 22px;
}

.tick {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  padding-left: 6px;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  color: var(--stamp);
  background: #F6EAD0;
  border: 1px solid var(--stamp);
  border-left: 3px solid var(--stamp);
  border-radius: 0 3px 3px 0;
}

/* The strip renders finished and simply fades in as one piece */
.strip { animation: stripFade 1.8s ease 0.5s both; }

@keyframes stripFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Scene detail popover — the app's own dark card, floating over the paper.
   Opened by double-clicking a clip on the strip. */
.scene-pop-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(14, 18, 23, 0.35);
  z-index: 60;
}

.scene-pop {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -52%);
  z-index: 61;
  width: min(480px, 92vw);
  background: #171B22;
  border: 1px solid #2a333e;
  border-radius: 16px;
  padding: 30px 32px 28px;
  color: #E6EDF3;
  text-align: left;
  animation: popIn 0.22s ease-out both;
  box-shadow: 0 24px 60px rgba(10, 12, 16, 0.45);
}

@keyframes popIn {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -52%) scale(1); }
}

.scene-pop__close {
  position: absolute;
  top: 14px;
  right: 18px;
  background: none;
  border: none;
  font-family: var(--mono);
  font-size: 20px;
  color: #5f6a76;
  cursor: pointer;
  padding: 4px 8px;
}

.scene-pop__close:hover { color: #E6EDF3; }

.scene-pop__sc {
  font-size: 24px;
  font-weight: 700;
  color: #EF9F27;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}

.scene-pop__slug {
  font-size: 16.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 20px;
}

.scene-pop__desc {
  font-size: 14.5px;
  line-height: 1.75;
  color: #a9b2bd;
  border-left: 3px solid #EF9F27;
  padding-left: 16px;
  margin-bottom: 24px;
}

.scene-pop__meta {
  display: grid;
  grid-template-columns: 96px 1fr;
  row-gap: 9px;
  border-top: 1px solid #262d37;
  padding-top: 20px;
  font-size: 13.5px;
}

.scene-pop__meta span { color: #5f6a76; }
.scene-pop__meta span.v { color: #c6cdd6; }

/* Typed drag hint — retires after the first scroll */
.strip-hint {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  color: var(--ink-3);
  margin-top: 14px;
  opacity: 0.8;
  transition: opacity 0.6s ease;
}

.strip-hint.gone { opacity: 0; }

.clip {
  flex: 0 0 auto;
  width: 100%;
  height: 46px;
  background: #F6EAD0;
  border: 1px solid var(--stamp);
  border-left: 3px solid var(--stamp);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 8px 11px;
  white-space: nowrap;
  overflow: hidden;
}

.clip .num {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--stamp);
}

.clip .loc {
  display: block;
  font-size: 10.5px;
  color: var(--ink-2);
}

/* Faded visa stamps scattered behind sections, like old entries
   in a well-traveled passport. Decorative only. */
.scatter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero__center { position: relative; z-index: 1; }

.section__inner { position: relative; z-index: 1; }

.sstamp {
  --visa: var(--stamp);
  --rot: -4deg;
  --op: 0.44; /* faded, like ink that went through the laundry */
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 13px 22px;
  border: 2.5px solid var(--visa);
  border-radius: 10px;
  color: var(--visa);
  opacity: 0;
  transform: rotate(var(--rot));
  text-align: center;
  white-space: nowrap;
}

/* Stamps arrive one by one once their section is on screen —
   a slow drift-and-settle so the passport visibly fills up */
.scatter.in .sstamp { animation: stampFade 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) both; }

.scatter.in .sstamp:nth-child(1) { animation-delay: 0.3s; }
.scatter.in .sstamp:nth-child(2) { animation-delay: 0.9s; }
.scatter.in .sstamp:nth-child(3) { animation-delay: 1.5s; }
.scatter.in .sstamp:nth-child(4) { animation-delay: 2.1s; }
.scatter.in .sstamp:nth-child(5) { animation-delay: 2.7s; }
.scatter.in .sstamp:nth-child(6) { animation-delay: 3.3s; }

/* No two stamps hit the page with the same pressure */
.scatter .sstamp:nth-child(2n) { --op: 0.34; }
.scatter .sstamp:nth-child(3n) { --op: 0.52; }

@keyframes stampFade {
  from {
    opacity: 0;
    transform: rotate(var(--rot)) translateY(18px) scale(1.05);
  }
  to {
    opacity: var(--op);
    transform: rotate(var(--rot)) translateY(0) scale(1);
  }
}

.sstamp::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--visa);
  border-radius: inherit;
  opacity: 0.6;
  pointer-events: none;
}

.sstamp .s-top {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  text-transform: uppercase;
}

.sstamp .s-loc {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-top: 1px solid var(--visa);
  border-bottom: 1px solid var(--visa);
  padding: 3px 8px;
  margin: 2px 0;
}

.sstamp .s-date {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}

.sstamp--oval { border-radius: 50%; padding: 20px 32px; }
.sstamp--sq { border-radius: 5px; }
.sstamp--ticket { border-radius: 18px; }

/* Description stamps — the action line off the continuity, longer text */
.sstamp--desc .s-loc {
  font-size: 11px;
  letter-spacing: 0.04em;
}

/* The date line prints in red ink, like a real border stamp's dater —
   the frame and the date come off two different mechanisms */
.sstamp .s-date { color: var(--ink-visa-red); }

/* Schengen-style border stamp: country letter in a dotted ring, a
   vehicle pictogram, red date, entry/exit arrow, port + booth code */
.sstamp--entry {
  align-items: stretch;
  gap: 7px;
  padding: 10px 13px 9px;
  border-radius: 14px;
}

.sstamp--entry::after { content: none; }

.s-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.s-cc {
  width: 24px;
  height: 24px;
  border: 2px dotted var(--visa);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  font-weight: 700;
}

.s-veh {
  border: 1.5px solid var(--visa);
  border-radius: 3px;
  padding: 1px 12px;
  font-size: 11px;
  line-height: 1.6;
}

.s-edate {
  color: var(--ink-visa-red);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  text-align: center;
  padding: 2px 0 1px;
}

.s-ft {
  display: flex;
  align-items: center;
  gap: 10px;
}

.s-arw {
  border: 1.5px solid var(--visa);
  border-radius: 4px;
  padding: 0 7px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.s-lc {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.5;
  text-align: center;
  text-transform: uppercase;
  flex: 1;
}

/* Grainy ink — stamps never print perfectly */
.sstamp,
.buy__now,
.how__num,
.hero::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='8'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.5' intercept='0.68'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='r'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='8'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.5' intercept='0.68'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23r)'/%3E%3C/svg%3E");
}

/* Stamps get a heavier, two-scale wear mask than the UI marks: fine
   grain multiplied by coarse blotches, so whole patches of ink go
   missing the way a tired rubber stamp misses the page */
.sstamp {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='8' result='f'/%3E%3CfeComponentTransfer in='f' result='fa'%3E%3CfeFuncA type='linear' slope='0.5' intercept='0.66'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='2' seed='23' result='b'/%3E%3CfeComponentTransfer in='b' result='ba'%3E%3CfeFuncA type='linear' slope='2' intercept='-0.1'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='fa' in2='ba' operator='arithmetic' k1='1' k2='0' k3='0' k4='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23w)'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='8' result='f'/%3E%3CfeComponentTransfer in='f' result='fa'%3E%3CfeFuncA type='linear' slope='0.5' intercept='0.66'/%3E%3C/feComponentTransfer%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='2' seed='23' result='b'/%3E%3CfeComponentTransfer in='b' result='ba'%3E%3CfeFuncA type='linear' slope='2' intercept='-0.1'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='fa' in2='ba' operator='arithmetic' k1='1' k2='0' k3='0' k4='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23w)'/%3E%3C/svg%3E");
}

/* Shift the wear tile per stamp so no two wear the same way */
.scatter .sstamp:nth-child(2n) { -webkit-mask-position: 73px 41px; mask-position: 73px 41px; }
.scatter .sstamp:nth-child(3n) { -webkit-mask-position: 152px 118px; mask-position: 152px 118px; }
.scatter .sstamp:nth-child(4n) { -webkit-mask-position: 37px 187px; mask-position: 37px 187px; }

/* Static ink chevron — no animation */
.hero__cue {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.55;
  color: var(--ink-3);
  font-size: 14px;
}

.hero__cue-line {
  display: block;
  width: 9px;
  height: 9px;
  border-right: 1px solid var(--ink-3);
  border-bottom: 1px solid var(--ink-3);
  transform: rotate(45deg);
}

/* ============================================================
   Sections — each one a form section with a typed slugline
   ============================================================ */

.section {
  padding: clamp(72px, 11vh, 120px) 24px;
  position: relative;
}

.section + .section .section__inner,
main .section .section__inner {
  border-top: 0;
}

.section__inner {
  max-width: 720px;
  margin: 0 auto;
}

/* Tighten the seams around the demo video (halved section padding) */
.how { padding-bottom: clamp(36px, 5.5vh, 60px); }
.demo { padding-top: clamp(36px, 5.5vh, 60px); padding-bottom: clamp(36px, 5.5vh, 60px); }
.vouch { padding-top: clamp(36px, 5.5vh, 60px); }

/* Slugline: left-aligned, typed, underlined — like a script header */
.section-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 auto 26px;
  text-align: center;
  width: fit-content;
  border-bottom: 1px solid var(--ink-2);
  padding-bottom: 4px;
}

/* Kill the old flanking hairlines — sluglines don't decorate */
.section-label--lined { display: block; }
.section-label--lined::before,
.section-label--lined::after { content: none; }

.section__h {
  font-size: clamp(24px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  margin-bottom: 28px;
}

/* Scroll reveal retired — paperwork doesn't fade in */
.reveal { opacity: 1; transform: none; }

.demo .section__h { text-align: center; }

/* ============================================================
   Pitch
   ============================================================ */

.pitch { text-align: left; }

.pitch__h {
  text-align: left;
  text-wrap: balance;
  font-size: clamp(24px, 4vw, 34px);
  font-weight: 700;
  line-height: 1.28;
  margin-bottom: 24px;
}

.pitch__sub {
  color: var(--ink-2);
  font-size: clamp(15px, 2.2vw, 17px);
  margin-bottom: 38px;
}

.pitch__ctas {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.cta .pitch__ctas { justify-content: center; }

/* Buttons — inked, square, typed. The solid one is the stamp pad. */
.btn {
  display: inline-block;
  padding: 13px 28px;
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  transition: transform 0.12s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.btn--solid {
  background: var(--accent-fill);
  color: var(--on-accent);
  border: 1px solid var(--stamp);
}

.btn--solid:hover { background: #f7ab39; transform: translateY(-1px); }
.btn--solid:active { transform: translateY(1px) scale(0.99); }

.btn--ghost {
  border: 1px solid var(--rule-strong);
  color: var(--ink-2);
  background: transparent;
}

.btn--ghost:hover { border-color: var(--ink-2); color: var(--ink); }

.btn--big { padding: 16px 40px; font-size: 16px; }

/* ============================================================
   Story / prose sections
   ============================================================ */

.story__body p {
  color: var(--ink-2);
  font-size: clamp(15px, 2.1vw, 16.5px);
  margin-bottom: 22px;
  max-width: 62ch;
}

.story__body p:last-child { margin-bottom: 0; }

.vs__punch {
  font-size: clamp(17px, 2.4vw, 20px) !important;
  color: var(--ink) !important;
  font-weight: 700;
}

/* ============================================================
   How it works
   ============================================================ */

.how__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 34px;
  margin-bottom: 52px;
}

.how__step {
  display: grid;
  grid-template-columns: 52px 1fr;
  grid-template-rows: auto auto;
  column-gap: 22px;
}

/* Step numbers as visa stamps — one ink and shape per step */
.how__num {
  --visa: var(--ink-visa-navy);
  grid-row: 1 / 3;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  border: 2px solid var(--visa);
  color: var(--visa);
  font-size: 19px;
  font-weight: 700;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  transform: rotate(-4deg);
  position: relative;
}

.how__num::before {
  content: "STEP";
  font-size: 7px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-indent: 0.22em;
  opacity: 0.8;
}

.how__num::after {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid var(--visa);
  border-radius: inherit;
  opacity: 0.55;
  pointer-events: none;
}

.how__step:nth-child(2) .how__num {
  --visa: var(--ink-visa-red);
  border-radius: 8px;
  transform: rotate(3deg);
}

.how__step:nth-child(3) .how__num {
  --visa: var(--ink-visa-teal);
  border-radius: 16px;
  transform: rotate(-2deg);
}

.how__step h3 {
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 8px;
  align-self: center;
}

.how__step p {
  grid-column: 2;
  color: var(--ink-2);
  font-size: 15px;
}
.how__step p + p { margin-top: 10px; }
.how__step p a { font-weight: 700; }

/* Callouts — paper slips clipped to the page */
.how__relabel {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent-fill);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 22px 26px;
}

.how__relabel-label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 8px;
}

.how__files { margin-bottom: 14px; }

.fileflow {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}

.fileflow__col {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.fileflow__col--in { flex-direction: row; }
.fileflow__col--in .fileflow__file { flex: 1; min-width: 0; }

.fileflow__file {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 9px 13px;
  font-size: 13.5px;
  color: var(--ink-2);
}

.fileflow__file--out { color: var(--ink); }
.fileflow__file--out .fileflow__icon { color: var(--accent-ink); }

.fileflow__icon { flex: none; color: var(--ink-3); }

.fileflow__name { overflow-wrap: anywhere; }

.fileflow__size {
  margin-left: auto;
  flex: none;
  color: var(--ink-3);
  font-size: 12px;
}

.fileflow__via {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 2px 0;
  color: var(--accent-ink);
}

.fileflow__stamp {
  border: 2px solid currentColor;
  border-radius: 3px;
  padding: 2px 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  transform: rotate(-4deg);
}

.fileflow__arrow { font-size: 19px; line-height: 1; }

@media (max-width: 560px) {
  .fileflow__col--in { flex-direction: column; }
  .fileflow__size { display: none; }
}

.how__relabel p:last-child {
  color: var(--ink-2);
  font-size: 15.5px;
}

/* ============================================================
   Demo video
   ============================================================ */

.demo__frame {
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: var(--paper-shade);
  display: flex;
  align-items: center;
  justify-content: center;
}

.demo__frame video { width: 100%; height: 100%; display: block; }

.demo__placeholder {
  text-align: center;
  color: var(--ink-3);
  font-size: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.demo__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid var(--rule-strong);
  position: relative;
}

.demo__play::after {
  content: "";
  position: absolute;
  left: 55%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-left: 16px solid var(--ink-3);
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

/* ============================================================
   Buy — the receipt
   ============================================================ */

.buy { text-align: center; }

.buy .section-label,
.faq .section-label {
  margin-left: auto;
  margin-right: auto;
}

.buy .section-label { text-align: center; }

.buy__card {
  max-width: 440px;
  margin: 0 auto;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 40px 40px 36px;
  position: relative;
}

/* Perforation across the top of the receipt */
.buy__card::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 22px;
  right: 22px;
  border-top: 1px dashed var(--rule-strong);
}

.buy__price {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 14px 0 16px;
}

.buy__was {
  font-size: 26px;
  color: var(--ink-3);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  font-weight: 400;
}

/* $49 lands as a rubber stamp */
.buy__now {
  font-size: 54px;
  font-weight: 700;
  color: var(--stamp);
  border: 4px double var(--stamp);
  border-radius: 8px;
  padding: 0 20px;
  transform: rotate(-4deg);
  line-height: 1.25;
}

.buy__offer {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 26px;
}

.buy__math {
  font-size: 13.5px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: -12px;
  margin-bottom: 26px;
}

.buy__list {
  list-style: none;
  text-align: left;
  margin: 0 auto 32px;
  max-width: 330px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.buy__list li {
  color: var(--ink-2);
  font-size: 14px;
  padding-left: 26px;
  position: relative;
}

/* Checkbox ticks, like a completed form */
.buy__list li::before {
  content: "☑";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--accent-ink);
  font-size: 15px;
}

.buy__note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-3);
  min-height: 20px;
}

.buy__try {
  margin-top: 18px;
  font-size: 14px;
  color: var(--ink-3);
}
.buy__try a {
  color: var(--accent-ink);
  border-bottom: 1px solid var(--rule-strong);
}
.buy__try a:hover { border-color: var(--accent-ink); }


/* ============================================================
   System requirements — the passport data page
   ============================================================ */

.reqs {
  max-width: 560px;
  margin: 40px auto 0;
  padding: 26px 30px 24px;
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-align: left;
}

.reqs__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding-bottom: 12px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}

.reqs__grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.reqs__row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 4px 16px;
  align-items: baseline;
}

.reqs__row dt {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  line-height: 1.5;
  /* Dotted leader, like a filled-in form */
  border-bottom: 1px dotted var(--rule);
  padding-bottom: 3px;
}

.reqs__row dd {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
}

.reqs__note {
  display: block;
  font-size: 12.5px;
  color: var(--ink-3);
  font-style: italic;
  margin-top: 2px;
}

.reqs__win {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.6;
}

/* Rubber-stamped over the platform line */
.reqs__stamp {
  display: inline-block;
  margin-right: 9px;
  padding: 1px 9px;
  border: 2px solid var(--stamp);
  border-radius: 3px;
  color: var(--stamp);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  transform: rotate(-3deg);
}

/* ============================================================
   FAQ
   ============================================================ */

.faq__list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.faq__item dt {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
}

.faq__item dt::before {
  content: "Q: ";
  color: var(--accent-ink);
}

.faq__item dd {
  color: var(--ink-2);
  font-size: 15px;
  max-width: 62ch;
}

/* ============================================================
   Final CTA + footer
   ============================================================ */

.cta { text-align: center; }

.cta__h { margin-bottom: 40px; }

.footer {
  border-top: 3px double var(--rule-strong);
  padding: 52px 24px 44px;
}

.footer__inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: center;
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 17px;
  font-weight: 700;
}

.wordmark__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-fill);
}

.footer__line { color: var(--ink-2); font-size: 14px; }

.footer__contact a { font-size: 13px; color: var(--ink-3); }

.footer__contact a:hover { color: var(--accent-ink); }

.footer__year { color: var(--ink-3); font-size: 12.5px; }

/* ============================================================
   Newsletter — the inline closing card and the pop-up, sharing
   one set of inner styles (.news__h / __sub / __form / __note)
   ============================================================ */

.cta .news__card {
  max-width: 560px;
  margin: 0 auto;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 34px 34px 28px;
  text-align: center;
}

.news-modal {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.news-modal[hidden] { display: none; }

.news-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(28, 24, 16, 0.55);
  animation: news-scrim-in 0.5s ease-out;
}

@keyframes news-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.news-modal__card {
  position: relative;
  max-width: 560px;
  width: 100%;
  background: var(--paper-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 34px 34px 28px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(28, 24, 16, 0.35);
  animation: news-in 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes news-in {
  from { opacity: 0; transform: translateY(22px) scale(0.985); }
  60% { opacity: 1; }
  to { opacity: 1; transform: none; }
}

.news-modal__card .section-label { margin-bottom: 6px; }

.news-modal__x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: none;
  background: none;
  color: var(--ink-3);
  font-family: var(--mono);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius);
}

.news-modal__x:hover { color: var(--ink); }

.news__h {
  font-size: clamp(22px, 3vw, 27px);
  margin-bottom: 10px;
}

.news__sub {
  color: var(--ink-2);
  font-size: 15px;
  max-width: 46ch;
  margin: 0 auto 24px;
}

.news__form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

.news__input {
  font-family: var(--mono);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  min-width: 220px;
  flex: 1 1 220px;
}

.news__input:focus {
  outline: none;
  border-color: var(--accent-fill);
}

.news__btn {
  border: none;
  cursor: pointer;
}

.news__btn[disabled] {
  opacity: 0.6;
  cursor: default;
  transform: none;
}

.news__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.news__note {
  margin-top: 14px;
  font-size: 13px;
  color: var(--ink-3);
  min-height: 20px;
}

/* ============================================================
   Vouch — field reports from working editors, stamped approved.
   A crossfading carousel; main.js drives it and adds .is-ready.
   Until then the quotes stack in normal flow, so the section
   still reads with JS off.
   ============================================================ */

.vouch__slider {
  position: relative;
  max-width: 620px; /* the card's own width — arrows hang outside it */
  margin: 0 auto;
}

.vouch__slide + .vouch__slide { margin-top: 26px; }

/* Live carousel: every quote stacks in the same box, one visible.
   The box is locked by JS to the tallest quote so the page never
   jumps mid-rotation; shorter quotes centre in it rather than
   sitting stranded at the top. */
.vouch__slider.is-ready .vouch__deck { position: relative; }

/* visibility rides along with the opacity, one step behind it, so the
   quote that just faded out is genuinely gone — not merely transparent.
   That keeps it out of find-in-page and out of a text selection dragged
   across the card, which matters when the two quotes sit in the same
   box. The 0s delay lets the fade finish before it vanishes. */
.vouch__slider.is-ready .vouch__slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 320ms linear, visibility 0s linear 320ms;
}

.vouch__slider.is-ready .vouch__slide.is-current {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 320ms linear, visibility 0s linear 0s;
}

/* The card fills the locked box, so the printed frame never changes
   size as quotes swap — only what's inside it does. Quote and name
   centre in it as one block: a shorter quote then reads as a card with
   margin, not a card with a hole in the middle of it. */
.vouch__slider.is-ready .vouch__card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Chevrons, in printed-rule ink rather than the amber — they're
   navigation furniture, not part of the document. */
.vouch__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: 0;
  /* Sits on the page ground, not the lighter card, so it needs the
     tertiary ink to clear 3:1 as a control — the printed-rule colour
     only manages 2.33:1 out here and reads as decoration. */
  color: var(--ink-3);
  cursor: pointer;
  transition: color 160ms ease;
}

.vouch__arrow:hover,
.vouch__arrow:focus-visible { color: var(--ink); }

.vouch__arrow svg { width: 17px; height: 25px; }

.vouch__arrow--prev { left: -54px; }
.vouch__arrow--next { right: -54px; }

/* One quote left standing (or JS off) — nothing to page through. */
.vouch__arrow[hidden] { display: none; }

.vouch__card {
  position: relative;
  max-width: 620px;
  margin: 0 auto;
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 34px 38px 30px;
}

/* The quote itself is set bold — it's the voice of the page here, and
   at this size on cream paper it wants the weight. The role and the
   film credits underneath stay at normal weight so the attribution
   reads as the quiet footnote it is. */
.vouch__quote p {
  color: var(--ink-2);
  font-size: clamp(15.5px, 2.2vw, 17px);
  line-height: 1.75;
  font-weight: 700;
}

/* A quote the editor wrote as separate lines stays that way —
   it reads like a note off a session, not a press blurb. */
.vouch__quote--lines p + p { margin-top: 11px; }

.vouch__who {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.vouch__name { font-weight: 700; }

.vouch__role {
  color: var(--ink-3);
  font-size: 13px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Credits print like a filmography line on a call sheet — italic,
   a step up in ink from the role above so they don't disappear. */
.vouch__credits {
  margin-top: 3px;
  color: var(--ink-2);
  font-size: 13.5px;
  font-style: italic;
}

/* The approval stamp prints over the card's top-right corner.
   Not inside a .scatter (those hide under 900px) — this one is
   content and stays on phones. */
.vouch__stamp {
  --visa: var(--stamp);
  --rot: -8deg;
  --op: 0.58;
  top: -34px;
  right: -26px;
}

/* Lands with the shared drift-and-settle once the section scrolls in */
.vouch .reveal.in .vouch__stamp {
  animation: stampFade 1.6s cubic-bezier(0.2, 0.6, 0.3, 1) 0.5s both;
}

/* Someone who asked the OS for less movement gets the quotes and the
   arrows, and nothing that moves on its own (main.js also skips the
   auto-advance entirely — see the carousel block there). */
@media (prefers-reduced-motion: reduce) {
  .vouch__slider.is-ready .vouch__slide,
  .vouch__slider.is-ready .vouch__slide.is-current { transition: none; }
}

/* Under ~900px there isn't room for chevrons beside a 620px card
   without clipping them, so they drop into a row underneath —
   which is the better tap target on a phone anyway. */
@media (max-width: 900px) {
  .vouch__slider { padding-bottom: 56px; }
  .vouch__arrow {
    top: auto;
    bottom: 8px;
    transform: none;
    width: 40px;
    height: 40px;
  }
  .vouch__arrow--prev { left: calc(50% - 50px); right: auto; }
  .vouch__arrow--next { left: calc(50% + 10px); right: auto; }
}

@media (max-width: 700px) {
  .vouch__card { padding: 28px 22px 26px; }
  /* Shrink via type/padding, not transform — stampFade's keyframes
     own the transform and would snap it back to scale(1) */
  .vouch__stamp { right: -8px; top: -28px; padding: 15px 24px; gap: 2px; }
  .vouch__stamp .s-top { font-size: 7.5px; }
  .vouch__stamp .s-loc { font-size: 11px; }
  .vouch__stamp .s-date { font-size: 8px; }
}

/* ============================================================
   Small screens
   ============================================================ */

@media (max-width: 560px) {
  .hero::before { display: none; }
  .how__step { grid-template-columns: 40px 1fr; column-gap: 14px; }
  .how__num { width: 34px; height: 34px; font-size: 14px; }
  .buy__card { padding: 34px 22px 30px; }
  .reqs { padding: 22px 20px 20px; }
  /* Stack label over value — 150px of leader plus a value never fits a phone */
  .reqs__row { grid-template-columns: 1fr; gap: 3px; }
  .reqs__row dt { border-bottom: none; padding-bottom: 0; }
  .buy__now { font-size: 42px; }
  .how__num { width: 42px; height: 42px; font-size: 15px; }
  .how__num::before { font-size: 6px; }
}

/* The scatter needs room — tuck it away on narrow windows */
@media (max-width: 900px) {
  .scatter { display: none; }
}

/* Description stamps are wide, and the side-margin stamps need real
   room beside the text column before they stop sliding under it */
@media (max-width: 1350px) {
  .pitch .scatter,
  .scatter--side { display: none; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sstamp { opacity: var(--op); }
  .scatter.in .sstamp { animation: none; }
  .vouch .reveal.in .vouch__stamp { animation: none; }
  .strip { animation: none; overflow-x: auto; }
  .strip__track { animation: none; }
}