/* ══════════════════════════════════════════════════════════════════════════
   Zen Clutter — page styles.

   Every rule here is a direct translation of the approved design's inline
   styles into named classes. Desktop rendering is intentionally identical:
   where the prototype used repeat(auto-fit, minmax(Npx, 1fr)) this file
   uses the explicit column count that auto-fit resolves to at the 1280px
   container, so the layout is the same but the collapse points are ours to
   control — which is what makes the directional rules and paddings behave
   when the grid stacks.

   Layer order: modernist.css (tokens + components) → this file.
   The only token redefinition is the ground override below, which the
   design carried in its own <helmet> block.
   ══════════════════════════════════════════════════════════════════════ */

/* ── ground override: the design moved to a white page ─────────────────── */
:root,
body {
  --color-bg: #ffffff;
  --color-surface: #f4f3f3;
  background: #ffffff;
}

/* ── ACCESSIBILITY: the one open contrast question ──────────────────────
   The brand red #ec3013 carries white text at 4.20:1. WCAG AA wants 4.5:1
   for text below 18.66px bold, so three things sit just under the line:
   the primary button labels, the red banner's paragraph, and the small
   accent marks (the 01/02/03 numerals, the × list marks, the FAQ +).
   The marks are all aria-hidden decoration, so they are not a real
   failure; the button labels and the banner copy are.

   Darkening the red by roughly 4% clears all of it. The shift is not
   perceptible side by side, but it is a brand decision, so it is left
   switched off. Uncomment the line below to apply it site-wide:

     #e22e12  gives 4.53:1 with white text, and 4.53:1 against the white
              page ground, where #ec3013 gives 4.20:1 for both.

   Nothing else needs to change — every red on the page reads this token. */

/* :root { --color-accent: #e22e12; } */

body {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }
a { color: var(--color-accent-700); text-decoration: none; }
a:hover { color: var(--color-accent); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

details summary::-webkit-details-marker { display: none; }

/* Anchored sections must clear the sticky header. */
:target,
section[id] { scroll-margin-top: 88px; }

/* ── skip link ─────────────────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--color-text);
  color: var(--color-bg);
  font-weight: 600;
  font-size: 14px;
}
.skip-link:focus {
  left: 0;
  color: var(--color-bg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   Layout primitives
   ══════════════════════════════════════════════════════════════════════ */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

.section { border-bottom: 2px solid var(--color-divider); }

/* Vertical rhythm. The design uses three section heights: the standard 80px
   block, a 72px block for the quieter interstitials, and a split pair where
   an intro and a grid share one section but carry the padding separately. */
.section-pad  { padding: 80px 32px; }
.section-pad7 { padding: 72px 32px; }
.section-head { padding: 80px 32px 0; }
.section-grid { padding: 0 32px 80px; }

/* Flush-left eyebrow above every section heading. */
.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}
.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 10px;
}
.eyebrow--rule::before {
  content: '';
  width: 28px;
  height: 2px;
  background: var(--color-accent);
}
.eyebrow--light { color: var(--color-accent-400); }
.eyebrow--muted { color: var(--color-neutral-700); }
.eyebrow--gap { margin-bottom: var(--space-4); }

/* Measure and rhythm utilities. These exist so no element needs a style=""
   attribute, which in turn lets the site ship a Content-Security-Policy
   without 'unsafe-inline' for styles. */
.mw-14 { max-width: 14ch; }
.mw-16 { max-width: 16ch; }
.mw-18 { max-width: 18ch; }
.mw-20 { max-width: 20ch; }
.mw-22 { max-width: 22ch; }
.mw-24 { max-width: 24ch; }
.mb-22 { margin-bottom: 22px; }
.mb-40 { margin-bottom: 40px; }
.mb-48 { margin-bottom: 48px; }
.mb-56 { margin-bottom: 56px; }
.mt-36 { margin-top: 36px; }

.h-display { font-size: clamp(40px, 5.2vw, 68px); }
.h-section { font-size: clamp(30px, 3.4vw, 44px); }
.h-tour    { font-size: clamp(24px, 2.4vw, 32px); }
.h-banner  { font-size: clamp(34px, 4.6vw, 60px); }
.h-close   { font-size: clamp(32px, 4vw, 52px); }

/* ══════════════════════════════════════════════════════════════════════════
   Buttons — modifiers on top of the design system's .btn
   ══════════════════════════════════════════════════════════════════════ */

.btn--nav {
  gap: 10px;
  padding: 12px 18px;
  justify-content: flex-start;
  color: var(--color-bg);
}
.btn--nav:hover { color: var(--color-bg); }

/* Two-line button: bold promise over a quiet qualifier. */
.btn--stack {
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}
.btn--stack.btn-primary { padding: 16px 24px; min-width: 236px; }
.btn--stack.btn-secondary {
  padding: 14px 22px;
  border-width: 2px;
  border-color: var(--color-text);
}
.btn--stack .btn-label { font-weight: 600; font-size: 17px; }
.btn--stack.btn-primary .btn-sub { font-size: 13px; opacity: 0.85; }
.btn--stack.btn-secondary .btn-sub { font-size: 13px; color: var(--color-neutral-700); }

.btn--outline2 { border-width: 2px; border-color: var(--color-text); }

.btn--wide { width: 100%; justify-content: flex-start; }
.btn--wide .btn-arrow { margin-left: auto; }

.btn--md { gap: 10px; padding: 12px 18px; font-size: 15px; }
.btn--lg { gap: var(--space-3); padding: 18px 26px; font-size: 17px; max-width: 340px; }
.btn--xl { gap: var(--space-3); padding: 20px 28px; font-size: 18px; max-width: 380px; }

/* Buy buttons render inert until a checkout URL is configured. */
.btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Secondary button sitting on the ink ground. */
.btn--on-ink {
  border-width: 2px;
  border-color: var(--color-neutral-700);
  color: var(--color-bg);
}
.btn--on-ink:hover {
  border-color: var(--color-bg);
  background: rgba(243, 242, 242, 0.08);
  color: var(--color-bg);
}

/* ══════════════════════════════════════════════════════════════════════════
   Header
   ══════════════════════════════════════════════════════════════════════ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
  padding: 0;
  height: auto;
  display: block;
}
.site-header__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  height: 72px;
  display: flex;
  align-items: center;
  gap: var(--space-8);
}
.site-header__brand { display: flex; align-items: center; margin-right: 0; }
.site-header__brand img { height: 34px; width: auto; display: block; }

.site-nav {
  display: flex;
  gap: 28px;
  margin-left: auto;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.site-nav a { color: var(--color-text); }
.site-nav a:hover { color: var(--color-accent); }

/* Menu button — hidden until the nav no longer fits. */
.nav-toggle {
  display: none;
  margin-left: auto;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: transparent;
  border: 2px solid var(--color-text);
  border-radius: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
  cursor: pointer;
}
.nav-toggle:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.nav-toggle__bars {
  display: block;
  position: relative;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
}
.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars { background: transparent; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded='true'] .nav-toggle__bars::after { top: 0; transform: rotate(-45deg); }

.mobile-nav {
  display: none;
  border-top: 2px solid var(--color-divider);
  background: var(--color-bg);
}
.mobile-nav.is-open { display: block; }

/* Direct children only — the CTA lives in .mobile-nav__cta and must keep
   its button colours rather than inherit the list-link ones. */
.mobile-nav > a {
  display: block;
  padding: 18px 32px;
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text);
  border-bottom: 2px solid var(--color-divider);
}
.mobile-nav > a:hover { background: var(--color-surface); color: var(--color-accent); }
.mobile-nav__cta { padding: 20px 32px; }
.mobile-nav .btn { width: 100%; justify-content: flex-start; }
.mobile-nav .btn-primary { color: var(--color-bg); }

/* ══════════════════════════════════════════════════════════════════════════
   Hero
   ══════════════════════════════════════════════════════════════════════ */

.hero__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.hero__copy {
  padding: 72px 48px 72px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 28px;
}
.hero__lede {
  font-size: 19px;
  line-height: 1.5;
  color: var(--color-neutral-800);
  max-width: 44ch;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: stretch;
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-neutral-700);
}
.hero__trust .sep { color: var(--color-neutral-400); }
.hero__media {
  border-left: 2px solid var(--color-divider);
  background: var(--color-surface);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8);
  min-height: 420px;
}
.hero__media img { width: 100%; height: auto; display: block; box-shadow: var(--shadow-lg); }

/* ══════════════════════════════════════════════════════════════════════════
   Value strip (ink ground)
   ══════════════════════════════════════════════════════════════════════ */

.strip {
  border-bottom: 2px solid var(--color-divider);
  background: var(--color-text);
  color: var(--color-bg);
}
.strip__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip__cell { padding: 28px 24px; border-left: 2px solid var(--color-neutral-700); }
.strip__cell:first-child { padding-left: 0; border-left: 0; }
.strip__cell:last-child { padding-right: 0; }
.strip__label { margin-bottom: 6px; }
.strip__text { font-size: 15px; color: var(--color-neutral-300); }

/* ══════════════════════════════════════════════════════════════════════════
   Problem
   ══════════════════════════════════════════════════════════════════════ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: start;
}
.problem__list { display: flex; flex-direction: column; gap: var(--space-6); }
.problem__item {
  display: flex;
  gap: 20px;
  border-top: 2px solid var(--color-divider);
  padding-top: 20px;
}
.problem__num {
  font-weight: 800;
  font-size: 15px;
  color: var(--color-accent);
  min-width: 28px;
}
.problem__item h3 { font-size: 19px; margin-bottom: 6px; }
.problem__item p { color: var(--color-neutral-700); font-size: 15px; }

/* ══════════════════════════════════════════════════════════════════════════
   Modules grid
   ══════════════════════════════════════════════════════════════════════ */

.modules__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}
.modules__note { color: var(--color-neutral-700); max-width: 38ch; font-size: 16px; }

.modules__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 2px solid var(--color-divider);
  border-left: 2px solid var(--color-divider);
}
.module {
  padding: 28px;
  border-right: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}
.module__num {
  font-weight: 800;
  font-size: 13px;
  color: var(--color-accent);
  margin-bottom: 14px;
}
.module h3 { font-size: 20px; margin-bottom: var(--space-2); }
.module p { color: var(--color-neutral-700); font-size: 15px; }
.module--invert { background: var(--color-text); color: var(--color-bg); }
.module--invert .module__num { color: var(--color-accent-400); }
.module--invert p { color: var(--color-neutral-300); }

/* ══════════════════════════════════════════════════════════════════════════
   Tour rows
   ══════════════════════════════════════════════════════════════════════ */

.tour__rows { padding: 0 32px 72px; max-width: 1280px; margin: 0 auto; }
.tour-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 2px solid var(--color-divider);
}
.tour-row:last-child { border-bottom: 2px solid var(--color-divider); }
.tour-row__copy {
  padding: 40px 48px 40px 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-4);
}
.tour-row__copy p {
  color: var(--color-neutral-700);
  font-size: 16px;
  max-width: 46ch;
}
.tour-row__media {
  border-left: 2px solid var(--color-divider);
  background: var(--color-surface);
  padding: 28px;
  display: flex;
  align-items: center;
}
.tour-row__media img { width: 100%; height: auto; display: block; box-shadow: var(--shadow-md); }

/* Reversed row: image left, copy right. */
.tour-row--reverse .tour-row__media {
  order: 0;
  border-left: 0;
}
.tour-row--reverse .tour-row__copy {
  order: 1;
  border-left: 2px solid var(--color-divider);
  padding: 40px 0 40px 48px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Video
   ══════════════════════════════════════════════════════════════════════ */

.video { border-bottom: 2px solid var(--color-divider); background: var(--color-surface); }
.video__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  align-items: start;
}
.video__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}
.video__copy p { color: var(--color-neutral-700); font-size: 16px; max-width: 38ch; }
.video__media { grid-column: span 2; min-width: 0; }
.video__media img,
.video__media video { width: 100%; height: auto; display: block; box-shadow: var(--shadow-md); }
.video__media video { background: var(--color-text); }
.video__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  box-shadow: var(--shadow-md);
  background: var(--color-text);
}
.video__frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   Red poster banner
   ══════════════════════════════════════════════════════════════════════ */

.banner {
  background: var(--color-accent);
  color: var(--color-bg);
  border-bottom: 2px solid var(--color-divider);
}
.banner__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 72px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: end;
}
.banner h2 { max-width: 22ch; }
.banner p {
  font-size: 18px;
  line-height: 1.5;
  max-width: 40ch;
  /* The design specified --color-accent-200 here, which reads at only
     3.38:1 on the red field — below AA for body copy. Plain white on the
     same red is 4.20:1: the brightest this paragraph can be without
     changing the brand red itself. See the note in ACCESSIBILITY below. */
  color: #ffffff;
}

/* ══════════════════════════════════════════════════════════════════════════
   Pricing
   ══════════════════════════════════════════════════════════════════════ */

.pricing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 2px solid var(--color-divider);
  border-bottom: 2px solid var(--color-divider);
}
.pricing__offer {
  background: var(--color-text);
  color: var(--color-bg);
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-6);
}
.pricing__figure { display: flex; align-items: flex-end; gap: var(--space-3); }
.pricing__price {
  font-family: 'Archivo', system-ui, sans-serif;
  font-weight: 800;
  font-size: clamp(56px, 7vw, 84px);
  line-height: 0.9;
  letter-spacing: -0.03em;
}
.pricing__unit { font-size: 15px; color: var(--color-neutral-400); padding-bottom: 10px; }
.pricing__offer p { color: var(--color-neutral-300); font-size: 16px; max-width: 38ch; }
.pricing__fineprint { font-size: 13px; color: var(--color-neutral-500); }

.pricing__against { border-left: 2px solid var(--color-divider); padding: 44px 40px; }
.pricing__against h3 { font-size: 20px; margin-bottom: var(--space-6); }
.notpaying { display: flex; flex-direction: column; gap: 0; }
.notpaying__row {
  display: flex;
  gap: var(--space-4);
  padding: 14px 0;
  border-bottom: 2px solid rgba(32, 30, 29, 0.15);
}
.notpaying__row:last-child { border-bottom: 0; }
.notpaying__x { color: var(--color-accent); font-weight: 800; }
.notpaying__row span:last-child { font-size: 15px; color: var(--color-neutral-800); }

.pricing__trial {
  margin-top: var(--space-8);
  border-top: 2px solid var(--color-divider);
  padding-top: 20px;
}
.pricing__trial-title { font-weight: 600; font-size: 16px; margin-bottom: 6px; }
.pricing__trial p { color: var(--color-neutral-700); font-size: 15px; margin-bottom: 14px; }

/* ══════════════════════════════════════════════════════════════════════════
   Testimonials
   ══════════════════════════════════════════════════════════════════════ */

.quotes { border-bottom: 2px solid var(--color-divider); background: var(--color-surface); }
.quotes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}
.quote {
  margin: 0;
  border-top: 2px solid var(--color-divider);
  padding-top: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.quote p { font-size: 19px; line-height: 1.4; font-weight: 600; }
.quote footer { font-size: 14px; color: var(--color-neutral-700); }

/* ══════════════════════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════════════════ */

.faq__aside p {
  color: var(--color-neutral-700);
  font-size: 16px;
  margin-top: 20px;
  max-width: 34ch;
}
.faq__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  font-weight: 600;
  font-size: 15px;
  color: var(--color-accent-700);
}
.faq__list { display: flex; flex-direction: column; }
.faq__item { border-top: 2px solid var(--color-divider); padding: 20px 0; }
.faq__item:last-child { border-bottom: 2px solid var(--color-divider); }
.faq__item summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 17px;
  list-style: none;
  display: flex;
  gap: var(--space-4);
  align-items: baseline;
}
.faq__item summary:hover { color: var(--color-accent-700); }
.faq__mark { color: var(--color-accent); font-weight: 800; width: 12px; flex: none; }
.faq__mark::before { content: '+'; }
.faq__item[open] .faq__mark::before { content: '\2013'; }
.faq__item p {
  color: var(--color-neutral-700);
  font-size: 15px;
  padding: 12px 0 0 32px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Contact form
   ══════════════════════════════════════════════════════════════════════ */

.contact__aside p {
  color: var(--color-neutral-700);
  font-size: 16px;
  margin-top: 20px;
  max-width: 36ch;
}
.contact__direct {
  margin-top: 24px;
  font-size: 15px;
  color: var(--color-neutral-700);
}
.contact__direct a { font-weight: 600; }

.form { display: flex; flex-direction: column; gap: 22px; }
.form__field { display: flex; flex-direction: column; gap: 8px; }
.form__field label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
}
.form__field .input {
  min-height: 52px;
  padding: 14px 16px;
  font-size: 16px;
  background: var(--color-bg);
  border: 2px solid var(--color-divider);
}
.form__field textarea.input { min-height: 150px; }
.form__field .input:focus-visible {
  border-color: var(--color-accent);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}
.form__field .input[aria-invalid='true'] { border-color: var(--color-accent); }
.form__error { font-size: 13px; font-weight: 600; color: var(--color-accent-700); }

/* Honeypot: off-screen, never announced, never tabbable. */
.form__pot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__note { font-size: 13px; color: var(--color-neutral-700); }

.notice {
  border: 2px solid var(--color-text);
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.notice__title { font-family: var(--font-heading); font-weight: 800; font-size: 18px; }
.notice p { font-size: 15px; color: var(--color-neutral-800); }
.notice--ok { border-color: var(--color-text); background: var(--color-surface); }
.notice--bad { border-color: var(--color-accent); }

/* ══════════════════════════════════════════════════════════════════════════
   Long-form copy (privacy notice)
   ══════════════════════════════════════════════════════════════════════ */

.prose { max-width: 68ch; }
.prose h2 {
  font-size: 22px;
  margin: 44px 0 var(--space-4);
  padding-top: 20px;
  border-top: 2px solid var(--color-divider);
}
.prose h2:first-of-type { margin-top: 32px; }
.prose p { font-size: 16px; color: var(--color-neutral-800); margin-bottom: var(--space-4); }
.prose ul { margin: 0 0 var(--space-4); padding-left: 20px; }
.prose li { font-size: 16px; color: var(--color-neutral-800); margin-bottom: var(--space-2); }
.prose a { font-weight: 600; }
.prose__meta { font-size: 13px; color: var(--color-neutral-700); margin-top: 8px; }
.prose__todo {
  border: 2px solid var(--color-accent);
  padding: 16px 20px;
  margin: 0 0 var(--space-6);
  font-size: 15px;
  color: var(--color-accent-800);
  background: var(--color-accent-100);
}

/* ══════════════════════════════════════════════════════════════════════════
   Closing CTA + footer
   ══════════════════════════════════════════════════════════════════════ */

.close-cta { background: var(--color-text); color: var(--color-bg); }
.close-cta__grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.close-cta__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}
.close-cta__copy p { color: var(--color-neutral-400); font-size: 17px; max-width: 40ch; }
.close-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
}
.close-cta__note { font-size: 13px; color: var(--color-neutral-500); }

.site-footer {
  background: var(--color-text);
  color: var(--color-neutral-500);
  border-top: 2px solid var(--color-neutral-700);
}
.site-footer__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 36px 32px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6);
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
}
.site-footer__brand img { height: 30px; width: auto; display: block; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.site-footer a { color: var(--color-neutral-500); }
.site-footer a:hover { color: var(--color-bg); }

/* ══════════════════════════════════════════════════════════════════════════
   Responsive
   ══════════════════════════════════════════════════════════════════════ */

/* — 1080px: image-heavy two-ups stack — */
@media (max-width: 1080px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__copy { padding: 56px 0 40px; }
  .hero__media {
    border-left: 0;
    border-top: 2px solid var(--color-divider);
    min-height: 0;
    padding: var(--space-6) var(--space-8);
    margin: 0 -32px;
  }

  .tour-row,
  .tour-row--reverse { grid-template-columns: 1fr; }
  .tour-row__copy { padding: 36px 0 28px; }
  .tour-row__media {
    border-left: 0;
    padding: 24px 0 36px;
    background: transparent;
  }
  .tour-row--reverse .tour-row__copy {
    order: 0;
    border-left: 0;
    padding: 36px 0 28px;
  }
  .tour-row--reverse .tour-row__media { order: 1; }

  .modules__grid { grid-template-columns: repeat(3, 1fr); }
}

/* — 940px: the nav no longer fits beside the logo and CTA — */
@media (max-width: 940px) {
  .site-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header__cta { display: none; }
  .site-header__inner { gap: var(--space-4); }
}

/* — 860px: everything two-up becomes one column — */
@media (max-width: 860px) {
  .container { padding: 0 24px; }
  .section-pad  { padding: 56px 24px; }
  .section-pad7 { padding: 52px 24px; }
  .section-head { padding: 56px 24px 0; }
  .section-grid { padding: 0 24px 56px; }
  .tour__rows { padding: 0 24px 48px; }
  .banner__grid { padding: 56px 24px; grid-template-columns: 1fr; gap: 24px; }
  .close-cta__grid { padding: 56px 24px; grid-template-columns: 1fr; gap: 32px; }
  .site-footer__inner { padding: 28px 24px; gap: 20px; }
  .hero__copy { padding: 44px 0 32px; }
  .hero__media { margin: 0 -24px; padding: var(--space-6) var(--space-6); }

  .split { grid-template-columns: 1fr; gap: 32px; }
  .video__grid { grid-template-columns: 1fr; gap: 28px; }
  .video__media { grid-column: auto; }

  .strip__grid { grid-template-columns: repeat(2, 1fr); }
  .strip__cell { padding: 24px 20px; }
  .strip__cell:first-child,
  .strip__cell:nth-child(3) { padding-left: 0; border-left: 0; }
  .strip__cell:nth-child(3),
  .strip__cell:nth-child(4) { border-top: 2px solid var(--color-neutral-700); }
  .strip__cell:nth-child(2),
  .strip__cell:last-child { padding-right: 0; }

  .modules__grid { grid-template-columns: repeat(2, 1fr); }
  .modules__head { margin-bottom: 32px; }

  .quotes__grid { grid-template-columns: 1fr; gap: var(--space-6); }

  .pricing__grid { grid-template-columns: 1fr; }
  .pricing__offer { padding: 36px 28px; }
  .pricing__against {
    border-left: 0;
    border-top: 2px solid var(--color-divider);
    padding: 36px 28px;
  }

  .mobile-nav > a,
  .mobile-nav__cta { padding-left: 24px; padding-right: 24px; }

  :target, section[id] { scroll-margin-top: 76px; }
}

/* — 640px: single-column everywhere, tighter rhythm — */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .section-pad  { padding: 44px 24px; }
  .section-pad7 { padding: 44px 24px; }
  .section-head { padding: 44px 24px 0; }
  .section-grid { padding: 0 24px 44px; }

  .strip__grid { grid-template-columns: 1fr; }
  .strip__cell {
    padding: 22px 0;
    border-left: 0;
    border-top: 2px solid var(--color-neutral-700);
  }
  .strip__cell:first-child { border-top: 0; }

  .modules__grid { grid-template-columns: 1fr; }
  .module { padding: 24px; }

  .hero__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .hero__actions .btn { width: 100%; min-width: 0; }

  .btn--lg, .btn--xl { max-width: none; }
  .close-cta__actions .btn { max-width: none; }
  .pricing__offer .btn { max-width: none; }

  .faq__item p { padding-left: 28px; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* — 480px: smallest phones — */
@media (max-width: 480px) {
  .container { padding: 0 20px; }
  .section-pad  { padding: 40px 20px; }
  .section-pad7 { padding: 40px 20px; }
  .section-head { padding: 40px 20px 0; }
  .section-grid { padding: 0 20px 40px; }
  .tour__rows { padding: 0 20px 40px; }
  .banner__grid,
  .close-cta__grid { padding: 44px 20px; }
  .site-header__inner { padding: 0 20px; height: 64px; }
  .site-header__brand img { height: 28px; }
  .hero__media { margin: 0 -20px; padding: var(--space-4) var(--space-4); }
  .pricing__offer, .pricing__against { padding: 28px 20px; }
  .mobile-nav > a, .mobile-nav__cta { padding-left: 20px; padding-right: 20px; }
  .site-footer__inner { padding: 24px 20px; }
  :target, section[id] { scroll-margin-top: 68px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Print — the pricing and FAQ are what people actually print
   ══════════════════════════════════════════════════════════════════════ */

@media print {
  .site-header, .mobile-nav, .nav-toggle, .video, .banner { display: none !important; }
  .faq__item p { display: block !important; }
  a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 11px; }
  .close-cta, .site-footer, .strip, .pricing__offer, .module--invert {
    background: #fff !important;
    color: #000 !important;
  }
}