/* ─────────────────────────────────────────────────────────────
   Ciniel — ciniel.app

   Two decisions worth knowing before changing anything here.

   1. TYPE IS THE APP'S OWN. `-apple-system`, `ui-serif` and
      `ui-monospace` resolve to SF Pro, New York and SF Mono on every
      Apple device — which is most of the audience for an iPhone app.
      So the site renders in the product's literal typefaces with no
      webfont request at all. Do not "upgrade" these to a hosted face.

   2. THE PAGE IS POLYCHROME, LIKE THE APP. Ciniel tints its interface
      from each film's artwork, so the site tints per section rather
      than holding one brand red. Red is an action colour here, used
      four or five times in the whole page, and nowhere else.

   Serif appears on cream ticket stock and nowhere else. That is the
   same rule the app follows (see Ciniel/Configuration/DesignSystem.swift).
   ───────────────────────────────────────────────────────────── */

:root {
  --ink:        #FFFFFF;
  --ink-2:      rgba(255,255,255,.62);
  --ink-3:      rgba(255,255,255,.44);
  --ink-4:      rgba(255,255,255,.28);
  --ground:     #000000;
  --hair:       rgba(255,255,255,.13);
  --fill:       rgba(255,255,255,.07);

  --red:        #E7222E;
  --stock:      #EBE7DA;
  --stock-ink:  #171512;

  --sf:   -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --ny:   ui-serif, "New York", "Iowan Old Style", Charter, Georgia, serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;

  --wrap: 1280px;
  --gut:  clamp(20px, 4vw, 56px);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sf);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gut); }
.num { font-variant-numeric: tabular-nums; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: var(--ink); color: #000; padding: 12px 18px; border-radius: 8px;
}
.skip:focus { left: 12px; top: 12px; }

:where(a, button):focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── type scale ─────────────────────────────────────────── */

.display {
  font-size: clamp(40px, 5.4vw, 78px);
  line-height: .99;
  font-weight: 700;
  letter-spacing: -.042em;
  text-wrap: balance;
}
.display--sm { font-size: clamp(34px, 4.4vw, 58px); }

.h2 {
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.06;
  font-weight: 700;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.h4 { font-size: 17px; font-weight: 650; letter-spacing: -.015em; }

.lede { font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: var(--ink-2); max-width: 30em; }
.body { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--ink-2); max-width: 34em; }
.body--sm { font-size: 15px; color: rgba(255,255,255,.55); }
.aside  { font-size: 15px; line-height: 1.6; color: var(--ink-3); max-width: 20em; }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.eyebrow--red { color: var(--red); font-weight: 600; }

.linkarrow { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.7); font-size: 15px; }
.linkarrow::after {
  content: ""; width: 15px; height: 15px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
  transition: transform .25s ease;
}
.linkarrow:hover { color: #fff; }
.linkarrow:hover::after { transform: translateX(4px); }

/* ── buttons ────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 13px 24px;
  border-radius: 999px;
  font-size: 15px; font-weight: 650; letter-spacing: -.01em;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease;
}
.btn--lg { min-height: 56px; padding: 17px 32px; font-size: 16px; font-weight: 700; }
/* Black on red, as in the app — an unusual pairing there, kept here. */
.btn--red { background: var(--red); color: #000; }
.btn--red:hover { background: #F5333F; transform: translateY(-1px); }
.btn--ghost { border: 1px solid rgba(255,255,255,.24); color: rgba(255,255,255,.9); }
.btn--ghost:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.05); }
@media (prefers-reduced-motion: reduce) { .btn:hover { transform: none; } }
/* Stands in for an App Store button until there is a listing to link to. It
   keeps the button's shape, so nothing around it moves, and takes the chips'
   type, so it reads as a status and not an action. It is a span: nothing to
   click, focus or hover. Doubled class so it outranks .btn--lg and .nav__cta. */
.btn.btn--soon {
  gap: 10px;
  border: 1px solid rgba(255,255,255,.18);
  background: var(--fill);
  color: rgba(255,255,255,.75);
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  cursor: default;
}
.btn.btn--soon::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex: 0 0 auto;
  background: var(--red);
}
.btn.btn--soon.btn--lg { font-size: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 64px; }
.chips li {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: 9px 16px; color: rgba(255,255,255,.65);
}

/* ── ambient glows ──────────────────────────────────────── */

.glow { position: absolute; border-radius: 50%; pointer-events: none; z-index: 0; }
.glow--red    { top: -300px; right: -140px; width: 1150px; height: 900px;
                background: radial-gradient(closest-side, rgba(132,40,50,.5), transparent); }
.glow--violet { top: 380px; left: -300px; width: 900px; height: 820px;
                background: radial-gradient(closest-side, rgba(56,44,104,.38), transparent); }
.glow--green  { top: 220px; left: -180px; width: 800px; height: 720px;
                background: radial-gradient(closest-side, rgba(34,116,72,.42), transparent); }
.glow--purple { top: 160px; left: 34%;  width: 820px; height: 820px;
                background: radial-gradient(closest-side, rgba(118,72,200,.46), transparent); }
.glow--amber  { top: 240px; right: -180px; width: 740px; height: 700px;
                background: radial-gradient(closest-side, rgba(168,116,44,.36), transparent); }
.glow--tour   { top: -180px; right: -120px; width: 1000px; height: 900px;
                background: radial-gradient(closest-side, rgba(104,66,182,.5), transparent); }
.glow--stock  { inset: -12% -10%; width: auto; height: auto;
                background: radial-gradient(closest-side, rgba(150,140,110,.22), transparent); }
.glow--close  { top: -40%; right: -10%; }

/* ── nav ────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  transition: background-color .3s ease, backdrop-filter .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: rgba(0,0,0,.72);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--hair);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 18px; }
.nav__mark { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.nav__links { display: flex; gap: 30px; }
.nav__links a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); transition: color .2s ease;
}
.nav__links a:hover { color: #fff; }
.nav__cta { min-height: 44px; padding: 10px 20px; font-size: 14px; }

/* ── hero ───────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; padding: clamp(48px, 7vw, 86px) 0 clamp(64px, 8vw, 110px); }
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 90px); align-items: center;
}
.hero__copy > * + * { margin-top: 28px; }
.hero__copy .display { margin-top: 26px; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; margin-top: 38px; }
.hero__meta { color: var(--ink-4); margin-top: 24px; }

/* ── device frame ───────────────────────────────────────── */

.device {
  border-radius: 44px;
  background: #0A0A0C;
  border: 1px solid rgba(255,255,255,.14);
  padding: 9px;
  box-shadow: 0 40px 90px rgba(0,0,0,.7), inset 0 0 0 1px rgba(255,255,255,.04);
  width: 338px; max-width: 100%;
}
.device img { border-radius: 36px; }
.device--lg { width: 400px; }
.device--lg img { border-radius: 38px; }

/* ── section furniture ──────────────────────────────────── */

.section { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 128px) 0; }
.section__head {
  position: relative; z-index: 2;
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(24px, 5vw, 60px); margin-bottom: clamp(36px, 5vw, 58px);
}
.section__head--narrow { display: block; }
.section__head .eyebrow { margin-bottom: 18px; }
.section__head .body { margin-top: 22px; }

/* ── colour triptych ────────────────────────────────────── */

.triptych {
  position: relative; z-index: 2;
  display: flex; justify-content: center; align-items: flex-end;
  gap: clamp(20px, 3vw, 44px); flex-wrap: wrap;
}
.triptych__item { display: flex; flex-direction: column; gap: 18px; }
.triptych__item--drop { padding-bottom: 58px; }
.triptych figcaption { color: var(--ink-3); padding-left: 4px; }

/* ── the film tour ──────────────────────────────────────── */

.tour { position: relative; }
.tour__track { height: 340vh; position: relative; }
.tour__pin {
  position: sticky; top: 0; height: 100vh; overflow: hidden;
  display: flex; align-items: center;
}
.tour__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 6vw, 100px); align-items: center; width: 100%;
}
.tour__caps { position: relative; min-height: 300px; margin-top: 26px; }
.tour__cap {
  position: absolute; inset: 0;
  opacity: 0; transform: translateY(14px);
  /* Staggered, never simultaneous: the outgoing line clears fast and the
     incoming one waits for it. Crossfading both at once leaves two
     headlines legible on top of each other, which reads as a fault. */
  transition: opacity .15s ease, transform .15s ease;
}
.tour__cap .body { margin-top: 20px; }
.tour__cap.is-on {
  opacity: 1; transform: none;
  transition: opacity .34s ease .15s, transform .34s ease .15s;
}

.rail { display: flex; flex-direction: column; gap: 14px; margin-top: 44px; }
.rail li {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-4); transition: color .3s ease;
}
.rail li.is-on { color: #fff; }
.rail__bar { width: 40px; height: 2px; background: rgba(255,255,255,.22); transition: background-color .3s ease; }
.rail li.is-on .rail__bar { background: var(--red); }

.scrollhint {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 40px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); transition: opacity .3s ease;
}

.device--tour { width: 382px; }
/* One screenful of an iPhone 17 Pro (1206 × 2622), which is the window the
   stitched full-page image travels behind. */
.screen {
  border-radius: 36px; overflow: hidden; background: #171129;
  position: relative; aspect-ratio: 900 / 1956;
}
.screen__inner { position: absolute; inset: 0 0 auto 0; will-change: transform; }
/* Height reserved from the intrinsic ratio, so the scroll distance is right
   before the image has decoded. Without it a fast scroll into the section
   finds a travel of zero and the phone sits frozen until the load fires. */
.screen__shot { width: 100%; aspect-ratio: 900 / 5684; }

/* ── import ─────────────────────────────────────────────── */

.import__grid {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 56px); align-items: start;
}
.import__left { display: flex; flex-direction: column; gap: 20px; }
.import__right { position: relative; }

.ticket {
  display: flex; overflow: hidden;
  background: var(--stock); color: var(--stock-ink);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.ticket__face { flex: 1 1 auto; padding: 26px 30px 28px; }
.ticket__kicker { color: rgba(23,21,18,.55); }
/* Serif lives on stock and nowhere else on this site. */
.ticket__name { font-family: var(--ny); font-size: clamp(28px, 3vw, 36px); font-weight: 700; letter-spacing: -.01em; margin-top: 4px; }
.ticket__sub { font-size: 16px; color: rgba(23,21,18,.62); margin-top: 6px; }
.ticket__perf { width: 2px; flex: 0 0 auto; background: repeating-linear-gradient(180deg, rgba(23,21,18,.4) 0 7px, transparent 7px 15px); }
.ticket__stub {
  width: 136px; flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  color: rgba(23,21,18,.8);
}
.ticket__stub svg { width: 26px; height: 20px; }
.ticket__stub .eyebrow { color: rgba(23,21,18,.7); }

.twoup {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px; margin-top: 22px; padding-top: 28px; border-top: 1px solid var(--hair);
}
.twoup .body { margin-top: 8px; }

/* ── pricing ────────────────────────────────────────────── */

.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px; position: relative; z-index: 2;
}
.plan {
  display: flex; flex-direction: column; gap: 16px;
  padding: 36px 32px 34px;
  border: 1px solid var(--hair); border-radius: 20px; background: var(--fill);
}
/*  The emphasis is deliberately on Free, not on Pro. A pricing table that
    spotlights the paid column reads as the SaaS pattern everyone has been
    trained to flinch at — and here the action we actually want from almost
    every reader is the same one either way: download the app. So Free is the
    lit card and carries the red button; Pro sits beside it, quieter, for the
    people who already know they need sync.                                */
.plan--free { border-color: rgba(255,255,255,.30); background: rgba(255,255,255,.045); }
.plan--pro  { border-color: rgba(231,34,46,.28); }
.plan__price { font-size: 38px; font-weight: 700; letter-spacing: -.03em; }
.plan__price span { font-size: 17px; font-weight: 500; color: var(--ink-3); }
.plan__note { font-size: 14px; color: var(--ink-3); margin-top: -8px; }
.plan .btn { margin-top: auto; }

.ticks { display: flex; flex-direction: column; gap: 11px; margin-block: 6px 22px; }
.ticks li { display: flex; gap: 11px; font-size: 16px; color: rgba(255,255,255,.78); }
.ticks li::before {
  content: ""; width: 17px; height: 17px; margin-top: 4px; flex: 0 0 auto; background: var(--red);
  -webkit-mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
  mask: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 6'/%3E%3C/svg%3E");
}
.keep {
  max-width: 44em; margin: 0 0 28px; padding-left: 20px;
  border-left: 2px solid var(--red);
  font-size: 18px; line-height: 1.6; color: var(--ink-2);
}
.keep strong { color: var(--ink); font-weight: 600; }

/* ── close ──────────────────────────────────────────────── */

.close { position: relative; overflow: hidden; padding: clamp(72px, 9vw, 128px) 0 clamp(80px, 10vw, 140px); }
.close__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(32px, 5vw, 80px); align-items: center;
}
.close__copy > * + * { margin-top: 24px; }
.close__copy .btn { margin-top: 34px; }

/* ── footer ─────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--hair); padding: 40px 0 56px; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; }
.foot__mark { font-size: 15px; font-weight: 600; }
.foot__links { display: flex; gap: 26px; flex: 1 1 auto; }
.foot__links a { font-size: 14px; color: var(--ink-3); }
.foot__links a:hover { color: #fff; }
.foot__legal { flex: 1 1 100%; font-size: 12px; line-height: 1.6; color: var(--ink-4); max-width: 52em; }

/* ── legal pages ────────────────────────────────────────────
   Impressum, privacy and terms share this. One measure, no glows, no
   devices: these pages are read, not scrolled past, and the polychrome
   treatment the marketing page earns would only get in the way here. */

.legal { padding: clamp(104px, 12vw, 168px) 0 clamp(72px, 9vw, 112px); }
/* No smooth scroll on legal pages. A contents link here crosses thousands
   of pixels, which animates as a lurch rather than a glide — and on a deep
   link the browser starts that animation towards where the section sat
   before main.js folded the other language away, then lands there late,
   long after the script has put the reader in the right place. */
html:has(.legal) { scroll-behavior: auto; }
/* Clear the sticky nav when a link lands on a language (/terms#de). */
[data-lang-panel] { scroll-margin-top: 100px; }
.legal__wrap { max-width: 720px; }
.langswitch { display: flex; gap: 24px; margin-top: 10px; }
.langswitch__opt {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid transparent;
}
.langswitch__opt:hover { color: var(--ink); }
.langswitch__opt.is-on { color: var(--ink); border-bottom-color: var(--red); }
.legal__group { margin-top: 40px; }
.legal__group .h4 { margin-bottom: 10px; }
.legal__group .body { font-size: 16px; max-width: none; }
.legal__group + .legal__group { padding-top: 4px; }
.legal__group .body + .body { margin-top: 10px; }
.legal address { font-style: normal; font-size: 16px; line-height: 1.7; color: var(--ink-2); }
.legal__rule { margin: clamp(60px, 8vw, 96px) 0 0; border: 0; border-top: 1px solid var(--hair); }
.legal__link { color: var(--ink); border-bottom: 1px solid var(--ink-4); word-break: break-word; }
.legal__link:hover { border-bottom-color: var(--ink); }

/* The Impressum is a handful of labelled facts and uses .legal__group.
   Privacy and terms are documents — running prose, lists, numbered
   sections — so they get element styles under .legal__doc instead of a
   class on every paragraph. */
.legal__meta { margin-top: 18px; color: var(--ink-3); }
.legal__summary {
  margin-top: 36px; padding: 24px 26px;
  border: 1px solid var(--hair); border-radius: 16px; background: var(--fill);
}
.legal__summary .h4 { margin-bottom: 12px; }
.legal__toc {
  margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--hair);
  columns: 2 16em; column-gap: 32px;
}
.legal__toc li { break-inside: avoid; padding: 3px 0; }
.legal__toc a { font-size: 15px; color: var(--ink-3); transition: color .2s ease; }
.legal__toc a:hover { color: var(--ink); }

.legal__doc h2 {
  margin-top: 56px; scroll-margin-top: 100px;
  font-size: 21px; line-height: 1.3; font-weight: 650; letter-spacing: -.02em;
}
.legal__doc h3 { margin-top: 30px; font-size: 17px; font-weight: 650; letter-spacing: -.015em; }
.legal__doc p,
.legal__doc li { font-size: 16px; line-height: 1.65; color: var(--ink-2); }
.legal__doc :is(h2, h3) + :is(p, ul, address) { margin-top: 12px; }
.legal__doc :is(p, ul, address) + :is(p, ul, address) { margin-top: 14px; }
.legal__doc ul { padding-left: 1.2em; list-style: disc; }
.legal__doc ul li + li { margin-top: 8px; }
.legal__doc li::marker { color: var(--ink-4); }
.legal__doc strong { color: var(--ink); font-weight: 600; }
.legal__doc a { color: var(--ink); border-bottom: 1px solid var(--ink-4); word-break: break-word; }
.legal__doc a:hover { border-bottom-color: var(--ink); }
.legal__doc code { font-family: var(--mono); font-size: .88em; }
/* The objection right has to stand apart from the rest (Art. 21(4) GDPR),
   so it gets a rule of its own. Not red: red is the action colour. */
.legal__doc .legal__callout {
  margin-top: 22px; padding: 4px 0 4px 20px;
  border-left: 2px solid rgba(255,255,255,.45);
}
.legal__callout p { color: var(--ink); }

/* ── narrower ───────────────────────────────────────────── */

@media (max-width: 1080px) {
  .hero__inner, .close__inner, .import__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__device, .close__device, .import__right { justify-self: center; }
  .section__head { display: block; }
  .aside { margin-top: 22px; max-width: 34em; }
  .triptych__item--drop { padding-bottom: 0; }
}

@media (max-width: 860px) {
  .nav__links { display: none; }
  .chips { margin-top: 40px; }
  .device--lg { width: 320px; }
  .triptych { gap: 28px; }
  .triptych__item { flex: 1 1 260px; max-width: 320px; }
}

@media (max-width: 620px) {
  /* The stub is a proportion of a ticket, not a fixed slab: at 136px it
     was eating 40% of a phone-width card. */
  .ticket__face { padding: 22px 20px 24px; }
  .ticket__stub { width: 92px; }
  .ticket__stub svg { width: 22px; height: 17px; }
  .twoup { gap: 26px; }
  .plan { padding: 30px 24px 28px; }
  .foot__links { gap: 18px 22px; flex-wrap: wrap; }
}

/*  The pinned tour is a desktop affordance. Below this width — and for
    anyone who has asked for reduced motion — it unpins into a plain
    stack: the same screen, the same four claims, no scroll coupling.
    A sticky frame on a short phone viewport leaves no room for the copy
    and fights the browser's own address-bar collapse.                */
@media (max-width: 900px), (prefers-reduced-motion: reduce) {
  .tour__track { height: auto; }
  .tour__pin { position: static; height: auto; padding: clamp(72px, 9vw, 120px) 0; }
  .tour__inner { grid-template-columns: minmax(0, 1fr); }
  .tour__caps { min-height: 0; display: flex; flex-direction: column; gap: 40px; }
  .tour__cap { position: static; opacity: 1; transform: none; transition: none; }
  .tour__cap .h2 { font-size: clamp(26px, 4vw, 34px); }
  .rail, .scrollhint { display: none; }
  /* Show first, explain after: unpinned, four claims ahead of the screen
     is a wall of text before any evidence. */
  .tour__device { justify-self: center; order: -1; margin-bottom: 48px; }
  .tour__copy { order: 0; }
  /* The device keeps its real proportions and simply shows the top of the
     page. Letting the full 5,684px image run at phone width would make a
     handset six screens tall, which looks like a bug, not a showcase. */
  .screen__inner { transform: none !important; }
}