/* ============================================================
   ScreenBrief landing v3 — light-first, editorial, readable.
   Tokens mirror the product's globals.css (oklch).

   v3 direction: one warm paper surface for the whole page, a
   heavy tight grotesk for display, real reading sizes for body
   copy, and exactly one dark band (the closing CTA) so nothing
   in the middle of the page flips contrast on the reader.
   ============================================================ */

:root {
  --paper: oklch(98.5% 0.004 85);
  --paper-2: oklch(97% 0.005 85);
  --paper-3: oklch(94.5% 0.006 85);

  --ink: oklch(18% 0.005 260);
  --ink-surface: oklch(23% 0.006 260);
  --ink-2: oklch(32% 0.006 260);
  --ink-3: oklch(40% 0.007 260);
  --ink-4: oklch(48% 0.008 260);
  --ink-5: oklch(62% 0.008 260);
  --ink-6: oklch(74% 0.006 260);

  --rule: oklch(90% 0.006 85);
  --rule-strong: oklch(82% 0.008 85);

  --signal: oklch(68% 0.14 55);
  --signal-bright: oklch(74% 0.15 55);
  --signal-ink: oklch(46% 0.13 55);       /* darkened: readable on paper */
  --signal-soft: oklch(93% 0.04 75);
  --paper-dim: oklch(86% 0.004 85);       /* body text on the dark band */

  --font-sans: "Inter Tight", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
  --font-serif: "Source Serif 4", Georgia, serif;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;

  --shadow-1: 0 1px 2px oklch(20% 0.01 260 / 0.05);
  --shadow-2: 0 1px 2px oklch(20% 0.01 260 / 0.05), 0 10px 30px oklch(20% 0.01 260 / 0.07);
  --shadow-lift: 0 2px 4px oklch(20% 0.01 260 / 0.06), 0 28px 70px oklch(20% 0.01 260 / 0.14);

  --nav-h: 68px;

  /* the sticky tour stage: the shot height drives the progress bar width
     so the rule under the app window lines up with its edges */
  --tour-shot-h: max(220px, min(calc(100vh - 430px), 720px));
}

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

html { scroll-behavior: smooth; }

[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }

a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--signal);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--signal-soft); color: var(--ink); }

a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
.container.narrow { max-width: 780px; }
.center { text-align: center; }
.mono { font-family: var(--font-mono); }

/* ---------- typography ---------- */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--signal-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

/* Display: heavy, tightly tracked grotesk. Optical tracking scales with
   size, so the hero gets more negative tracking than section heads. */
.display {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(3rem, 7.4vw, 6.2rem);
  line-height: 0.94;
  letter-spacing: -0.045em;
  text-wrap: balance;
}

.display em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--signal-ink);
}

.display-sm {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.lede {
  font-size: clamp(1.12rem, 1.5vw, 1.3rem);
  line-height: 1.6;
  color: var(--ink-3);
  max-width: 58ch;
  text-wrap: pretty;
}

.lede strong { color: var(--ink); font-weight: 600; }
.band-dark .lede strong { color: var(--paper); }
.center-lede { margin-left: auto; margin-right: auto; }

.fineprint {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-4);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: var(--font-sans);
  font-size: 15.5px;
  font-weight: 600;
  padding: 14px 26px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.btn-sm { padding: 9px 17px; font-size: 14px; }

/* Primary is ink, not orange: highest contrast, lowest noise.
   Orange stays a wayfinding accent (eyebrows, rules, active states). */
.btn-primary {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-1);
}
.btn-primary:hover { background: var(--ink-surface); transform: translateY(-1px); box-shadow: var(--shadow-2); }

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

/* Microsoft-Store-style button: glyph + two-line label */
.btn-store {
  background: var(--ink);
  color: var(--paper);
  box-shadow: var(--shadow-1);
  text-align: left;
  flex: none;
}
.btn-store svg { width: 20px; height: 20px; flex: none; color: var(--signal-bright); }
.btn-store b { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.btn-store i { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; opacity: 0.7; }
.btn-store:hover { background: var(--ink-surface); transform: translateY(-1px); box-shadow: var(--shadow-2); }

/* The dark band inverts the whole button system */
.band-dark .btn-store,
.band-dark .btn-primary { background: var(--paper); color: var(--ink); }
.band-dark .btn-store svg { color: var(--signal-ink); }
.band-dark .btn-store:hover,
.band-dark .btn-primary:hover { background: #fff; }
.band-dark .btn-ghost { border-color: oklch(98.5% 0.004 85 / 0.3); color: var(--paper); }
.band-dark .btn-ghost:hover { border-color: oklch(98.5% 0.004 85 / 0.65); color: var(--paper); }

.cta-row { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; align-items: center; }
.center-row { justify-content: center; }

/* ---------- nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: oklch(98.5% 0.004 85 / 0.82);
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--rule);
}

.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: var(--nav-h); }

.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); }
.brand-mark { flex: none; display: block; border-radius: 7px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-text span { font-weight: 700; font-size: 16px; letter-spacing: -0.02em; }
.brand-text small { font-size: 10.5px; font-weight: 500; color: var(--ink-5); margin-top: 2px; letter-spacing: 0.01em; }

.nav-links { display: flex; gap: 28px; }
.nav-links a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-3);
  transition: color 0.15s ease;
}
.nav-links a:hover { color: var(--ink); }

.nav-actions { display: flex; align-items: center; gap: 12px; }

.lang-toggle {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-sm);
  padding: 7px 11px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.lang-toggle:hover { color: var(--ink); border-color: var(--rule-strong); background: var(--paper-3); }

/* The footer brand sits on ink */
.footer .brand { color: var(--paper); }
.footer .brand-text small { color: var(--ink-6); }

/* ---------- shot frames (screenshots) ---------- */

.shot-frame {
  background: var(--paper);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  transform: translateZ(0);
}
.shot-frame img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* exact app-window proportions: the full screenshot stays visible and grows
   with the viewport; the reserve keeps nav + heading + rail + caption on
   screen so the sticky stage never touches either edge */
.shot-tour {
  position: relative;
  height: var(--tour-shot-h);
  aspect-ratio: 1500 / 950;
  width: auto;
  margin: 0 auto;
}
.shot-split { aspect-ratio: 1500 / 950; }

/* ---------- hero ---------- */

.hero {
  background: var(--paper);
  color: var(--ink);
  position: relative;
  overflow: hidden;
  padding: 92px 0 96px;
  border-bottom: 1px solid var(--rule);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1000px 620px at 78% -14%, oklch(68% 0.14 55 / 0.1), transparent 64%),
    radial-gradient(760px 520px at -6% 108%, oklch(68% 0.14 55 / 0.05), transparent 62%);
  pointer-events: none;
}

/* Copy left, product art right: the mock earns its keep next to the
   headline instead of pushing the fold down by a full screen. */
.hero .container {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  gap: 56px;
  align-items: center;
}

.hero .display { font-size: clamp(2.6rem, 4.6vw, 4.2rem); max-width: 13ch; }
.hero .lede { color: var(--ink-3); margin-top: 22px; max-width: 44ch; font-size: clamp(1.05rem, 1.25vw, 1.16rem); }
.hero .cta-row { margin-top: 30px; }
.hero .fineprint { margin-top: 22px; }

.hero-shot { will-change: transform; min-width: 0; }

.hero-art {
  filter: drop-shadow(0 2px 4px oklch(20% 0.01 260 / 0.06)) drop-shadow(0 30px 70px oklch(20% 0.01 260 / 0.16));
}
.hero-art svg { display: block; width: 100%; height: auto; }

/* living waveform: bars breathe like a real level meter */
.wave rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: wave-breathe 2.2s ease-in-out infinite;
}
.wave rect:nth-child(3n)   { animation-delay: -0.5s; animation-duration: 2.7s; }
.wave rect:nth-child(3n+1) { animation-delay: -1.2s; }
.wave rect:nth-child(4n)   { animation-delay: -1.8s; animation-duration: 1.9s; }
.wave rect:nth-child(5n)   { animation-delay: -0.8s; animation-duration: 2.4s; }

@keyframes wave-breathe {
  0%, 100% { transform: scaleY(1); }
  50%      { transform: scaleY(0.45); }
}

.rec-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--signal);
  display: inline-block;
  flex: none;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 oklch(68% 0.14 55 / 0.45); }
  55%      { box-shadow: 0 0 0 7px oklch(68% 0.14 55 / 0); }
}

/* ---------- value strip ---------- */

.strip { background: var(--paper-2); border-bottom: 1px solid var(--rule); }

.strip-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.strip-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 30px 28px;
  border-left: 1px solid var(--rule);
}
.strip-item:first-child { border-left: 0; padding-left: 0; }
.strip-item:last-child { padding-right: 0; }
.strip-item b { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; }
.strip-item span { font-size: 14.5px; line-height: 1.5; color: var(--ink-4); }

/* ---------- sticky tour ---------- */

.tour { height: calc(5 * 95vh); position: relative; background: var(--paper); }

.tour-sticky {
  position: sticky;
  top: var(--nav-h);
  height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  padding: 20px 0;
}

/* Reading order: heading -> step rail -> progress -> screenshot -> caption.
   The label has to arrive before the visual it labels, so the rail and the
   bar sit above the shot even though the markup keeps the shot first. */
.tour-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
}
.tour-steps   { order: 1; }
.steps-list   { order: 2; }
.tour-visual  { order: 3; }
.tour-desc    { order: 4; }

.tour-steps { text-align: center; }
.tour .eyebrow { margin-bottom: 8px; justify-content: center; }
.tour .display-sm { margin-bottom: 0; font-size: clamp(1.6rem, 2.8vw, 2.3rem); }

.tour-visual {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
}

.steps-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  margin: 0 auto;
  width: 100%;
}

.steps-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--ink-4);
  transition: color 0.3s ease, background 0.3s ease, border-color 0.3s ease;
}

.steps-list li.active {
  color: var(--ink);
  background: var(--signal-soft);
  border-color: oklch(68% 0.14 55 / 0.28);
}

.step-tag {
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-5);
  transition: color 0.3s ease;
}
.steps-list li.active .step-tag { color: var(--signal-ink); }

.steps-list h3 { font-size: 15.5px; font-weight: 600; letter-spacing: -0.015em; }

/* single shared description under the rail - never squeezed into columns */
.tour-desc {
  max-width: 68ch;
  margin: 4px auto 0;
  text-align: center;
}
.tour-desc p {
  display: none;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-3);
  text-wrap: pretty;
}
.tour-desc p.active { display: block; animation: desc-in 0.4s ease; }

@keyframes desc-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: none; }
}

.shot-tour img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
  will-change: transform, opacity;
}
.shot-tour img.active { opacity: 1; }

.tour-progress {
  height: 3px;
  background: var(--rule);
  border-radius: 2px;
  overflow: hidden;
  order: -1;                 /* the bar belongs to the rail above, not to the shot */
  margin: 0 auto 16px;
  width: min(100%, calc(var(--tour-shot-h) * 1500 / 950));
}
.tour-progress i {
  display: block;
  height: 100%;
  background: var(--signal);
  width: 20%;
  transition: width 0.25s ease;
}

@media (max-height: 800px) {
  :root { --tour-shot-h: max(200px, calc(100vh - 400px)); }
  .tour-desc { display: none; }
  .tour-grid { gap: 16px; }
  .tour-sticky { padding: 12px 0; }
}

/* ---------- generic sections ---------- */

.section { padding: 120px 0; }
.section-head { margin-bottom: 60px; max-width: 44ch; }

/* Tinted band: separates a section without flipping contrast on the reader. */
.band-tint {
  background: var(--paper-2);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

/* ---------- features ---------- */

.feat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.feat { background: var(--paper); padding: 32px 30px 34px; transition: background 0.2s ease; }
.feat:hover { background: var(--paper-2); }
.feat h3 { font-size: 17.5px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.02em; line-height: 1.3; }
.feat p { font-size: 15.5px; color: var(--ink-3); line-height: 1.65; text-wrap: pretty; }
.feat h3::before {
  content: "";
  display: block;
  width: 24px; height: 3px;
  background: var(--signal);
  border-radius: 2px;
  margin-bottom: 18px;
}

/* ---------- split sections (chat / search) ---------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
  align-items: center;
}
.split.flip { grid-template-columns: 1.15fr 1fr; }

.split .lede { margin-top: 18px; }

.checklist { margin-top: 30px; display: flex; flex-direction: column; gap: 15px; }
.checklist li {
  position: relative;
  padding-left: 32px;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 48ch;
  text-wrap: pretty;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 5px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--signal-soft);
}
.checklist li::after {
  content: "";
  position: absolute;
  left: 5.5px; top: 11px;
  width: 7px; height: 4px;
  border-left: 2px solid var(--signal-ink);
  border-bottom: 2px solid var(--signal-ink);
  transform: rotate(-45deg) translate(0.5px, -0.5px);
}

/* ---------- dark band (closing CTA + footer only) ---------- */

.band-dark {
  background: var(--ink);
  color: var(--paper);
  position: relative;
  overflow: hidden;
}

.band-dark::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(800px 460px at 50% -10%, oklch(68% 0.14 55 / 0.18), transparent 62%);
  pointer-events: none;
}

.band-dark .eyebrow { color: var(--signal-bright); }
.band-dark .container { position: relative; z-index: 1; }
.band-dark .lede { color: var(--paper-dim); }
.band-dark .checklist li { color: var(--paper-dim); }
.band-dark .fineprint { color: oklch(72% 0.006 85); }

/* ---------- privacy ---------- */

.privacy { padding: 120px 0; }
.privacy .eyebrow { justify-content: center; }
.privacy .display-sm { text-align: center; }
.privacy .lede { margin: 24px auto 0; text-align: center; }

.priv-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 52px;
}

.priv-item {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  box-shadow: var(--shadow-1);
}
.priv-item b { font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.priv-item span { font-size: 15px; line-height: 1.6; color: var(--ink-3); text-wrap: pretty; }

/* ---------- pricing ---------- */

.pricing { padding: 120px 0; }
.pricing .lede { margin-top: 22px; }
.pricing .eyebrow { justify-content: center; }

.price-card {
  margin: 48px auto 0;
  max-width: 580px;
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-lg);
  padding: 32px;
  box-shadow: var(--shadow-2);
  position: relative;
  overflow: hidden;
}
.price-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--signal);
}

.price-tag {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin-bottom: 4px;
}
.price-amount {
  font-size: clamp(2.4rem, 4.2vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}
.price-note {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-4);
}

/* Indicative conversion for visitors outside Poland. Deliberately quieter
   than the price itself: the card is charged in PLN and 299 zł is the
   number that has to stay authoritative. */
.price-fx {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--ink-5);
}
.price-fx[hidden] { display: none; }

.price-perks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
}
.price-perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.price-perks li::before {
  content: "✓";
  color: var(--signal-ink);
  font-weight: 600;
}

.price-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.price-row .mono { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); }
.price-rule { height: 1px; background: var(--rule); margin: 24px 0; }

.pricing .fineprint { margin-top: 28px; }

/* ---------- faq ---------- */

.faq { border-bottom: 1px solid var(--rule); padding: 4px 0; }
.faq:first-of-type { border-top: 1px solid var(--rule); }

.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 4px;
  font-size: 18.5px;
  font-weight: 600;
  letter-spacing: -0.02em;
  transition: color 0.15s ease;
}
.faq summary:hover { color: var(--signal-ink); }
.faq summary::-webkit-details-marker { display: none; }

.faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--signal-ink);
  transition: transform 0.25s ease;
  flex: none;
}
.faq[open] summary::after { transform: rotate(45deg); }

.faq p { padding: 0 4px 26px; font-size: 16.5px; line-height: 1.65; color: var(--ink-3); max-width: 68ch; text-wrap: pretty; }

/* ---------- final cta / footer ---------- */

.cta-final {
  padding: 150px 0 130px;
  background: linear-gradient(180deg, oklch(13.5% 0.008 260), var(--ink));
}
.cta-final .display-sm { font-size: clamp(2.4rem, 5.2vw, 4rem); letter-spacing: -0.04em; }
.cta-final .cta-row { margin-top: 44px; }
.cta-final .fineprint { margin-top: 36px; }

.footer {
  background: var(--ink);
  border-top: 1px solid oklch(98.5% 0.004 85 / 0.08);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 28px;
  padding-bottom: 28px;
  flex-wrap: wrap;
}

.ul { text-decoration: underline; text-underline-offset: 3px; }
.footer .fineprint { color: var(--ink-5); }

/* ---------- reveal on scroll ---------- */

.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.65s ease, transform 0.65s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- responsive ---------- */

@media (max-width: 1100px) {
  .feat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1020px) {
  .hero { padding: 76px 0 80px; }
  .hero .container { grid-template-columns: 1fr; gap: 48px; }
  .hero .display { max-width: 16ch; }
  .hero-shot { max-width: 760px; margin: 0 auto; }
  .steps-list li { padding: 9px 13px; }
  .split, .split.flip { grid-template-columns: 1fr; gap: 40px; }
  .strip-grid { grid-template-columns: repeat(2, 1fr); }
  .strip-item:nth-child(3) { border-left: 0; padding-left: 0; }
  .strip-item:nth-child(2) { padding-right: 0; }
  .strip-item:nth-child(3), .strip-item:nth-child(4) { border-top: 1px solid var(--rule); }
}

@media (max-width: 940px) {
  .nav-links { display: none; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .container { padding: 0 20px; }
  /* the nav has to stay one line tall: drop the tagline, tighten the CTA */
  .nav-inner { gap: 10px; }
  .brand-text small { display: none; }
  .nav-actions .btn-sm { padding: 9px 13px; font-size: 13px; white-space: nowrap; }
  .section, .privacy, .pricing { padding: 76px 0; }
  .cta-final { padding: 96px 0 84px; }
  .hero { padding: 56px 0 64px; }
  .display { font-size: clamp(2.5rem, 11vw, 3.4rem); letter-spacing: -0.035em; }
  .hero .display { font-size: clamp(2.5rem, 11vw, 3.4rem); max-width: none; }
  .hero .container { gap: 36px; }
  .section-head { margin-bottom: 40px; }
  .feat-grid { grid-template-columns: 1fr; }
  .feat { padding: 26px 22px 28px; }
  .priv-grid { grid-template-columns: 1fr; }
  .strip-grid { grid-template-columns: 1fr; }
  .strip-item { border-left: 0; padding: 18px 0; border-top: 1px solid var(--rule); }
  .strip-item:first-child { border-top: 0; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .center-row { align-items: stretch; }
  .price-card { padding: 24px 20px; }
  .price-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .price-row .btn { width: 100%; }
  .faq summary { font-size: 17px; padding: 20px 2px; }
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .shot-tour img { transition: none; }
  .rec-dot { animation: none; }
  .wave rect { animation: none; }
  .btn { transition: none; }
  .tour-desc p.active { animation: none; }
}