/* ============================================================
   Soliloquy, landing page soliloquy.pl
   Tokens from soliloquy-marketing/soliloquy-pl/brand.json
   Type: Ubuntu 400 / 500 / 700 only. Never weight 300.
   Contrast: body text >= 4.5:1. Muted #97A0BC is decoration on
   light and small text on dark only, never text on light.
   ============================================================ */

:root {
  --bg: #F7F9FF;
  --surface: #FFFFFF;
  --surface-2: #EEF2FC;
  --line: #DDE4F5;
  --ink: #131A2E;
  --ink-soft: #2B3450;
  --muted-ink: #5A6178;   /* small text on light, 5.9:1 */
  --dark: #131A2E;
  --dark-ink: #F2F5FF;
  --dark-soft: #C9D2EC;
  --accent: #7295F7;       /* fills and text on dark, never body text on light */
  --accent-display: #5B7BE8; /* accent text at display sizes on light */
  --accent-ink: #3D5BD9;    /* accent text at body sizes on light, 5.4:1 */
  --muted: #97A0BC;         /* decoration on light, small text on dark */
  --accent-wash: #E7EDFE;
  --radius: 16px;
  --radius-lg: 24px;
  --r-pill: 999px;
  --shadow-card: 0 1px 2px rgba(19, 26, 46, .05), 0 10px 30px rgba(19, 26, 46, .06);
  --shadow-pop: 0 4px 12px rgba(19, 26, 46, .08), 0 24px 60px rgba(19, 26, 46, .14);
  --shadow-phone: 0 30px 70px rgba(19, 26, 46, .22);
  --maxw: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  padding: 0;
  font-family: 'Ubuntu', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-weight: 400;
  font-size: 17px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
img, svg, video { max-width: 100%; display: block; }
strong { font-weight: 700; }

:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 6px;
}

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--dark); color: var(--dark-ink);
  padding: 12px 20px; border-radius: 0 0 var(--radius) 0; font-weight: 700; z-index: 100;
}
.skip-link:focus { left: 0; }

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

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 249, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; height: 70px;
}
.brand { display: flex; align-items: center; gap: 11px; font-weight: 700; font-size: 20px; letter-spacing: -.01em; }
.brand img { width: 30px; height: 30px; }
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 9px 14px; border-radius: var(--r-pill);
  font-size: 15px; font-weight: 500; color: var(--muted-ink);
  transition: background-color .15s, color .15s;
}
.nav-links a:hover { color: var(--accent-ink); background: var(--accent-wash); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-handle { font-size: 14px; font-weight: 500; color: var(--muted-ink); }
.nav-handle:hover { color: var(--accent-ink); }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 24px; border-radius: var(--r-pill);
  font-size: 16px; font-weight: 700; letter-spacing: -.01em;
  transition: transform .15s, box-shadow .15s, background-color .15s, color .15s;
}
.btn-primary { background: var(--dark); color: var(--dark-ink); box-shadow: var(--shadow-card); }
.btn-primary:hover { background: #0B1120; transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.btn-ghost { border: 1px solid var(--line); background: var(--surface); color: var(--ink); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-ink); transform: translateY(-2px); }
.btn-on-dark { background: var(--accent); color: #0B1120; }
.btn-on-dark:hover { background: #8AA8FA; transform: translateY(-2px); }
.btn-sm { padding: 10px 18px; font-size: 15px; }

.store-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
/* The badge art is a 135x40 SVG that already draws its own rounded corners
   (radius 4.726 on a 40 unit tall canvas) and its own grey hairline. The clip
   has to match that radius, otherwise it cuts the corners off the artwork and
   the hairline breaks at every corner. 4.726 / 40 * 54 = 6.4px. */
.store-badge {
  display: inline-flex; align-items: center;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(19, 26, 46, .16);
  transition: transform .15s, box-shadow .15s;
}
.store-badge img { height: 54px; width: auto; display: block; }
.store-badge:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(19, 26, 46, .22); }

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

.hero { position: relative; overflow: hidden; padding: 92px 0 96px; }
.glow { position: absolute; border-radius: var(--r-pill); filter: blur(90px); pointer-events: none; }
.glow.g1 { width: 540px; height: 540px; background: #D8E2FD; top: -200px; right: -140px; opacity: .8; }
.glow.g2 { width: 460px; height: 460px; background: #E4EAFD; bottom: -220px; left: -160px; opacity: .7; }

.hero-grid {
  position: relative;
  display: grid; grid-template-columns: 1.02fr .98fr;
  gap: 60px; align-items: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 700; color: var(--accent-ink);
  background: var(--accent-wash);
  padding: 8px 16px; border-radius: var(--r-pill);
  margin-bottom: 22px;
}
.eyebrow .pulse {
  width: 8px; height: 8px; border-radius: var(--r-pill);
  background: var(--accent); flex: 0 0 8px;
}

.hero h1 {
  font-size: clamp(36px, 5.2vw, 58px);
  line-height: 1.06; font-weight: 700; letter-spacing: -.025em;
  margin: 0 0 20px; max-width: 15ch;
}
.hero h1 .accent { color: var(--accent-display); }
.hero .lead {
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--muted-ink); max-width: 540px; margin: 0 0 32px;
}
.hero .store-row { margin-bottom: 26px; }

.trust-row { display: flex; flex-wrap: wrap; gap: 10px 20px; font-size: 14.5px; color: var(--muted-ink); font-weight: 500; }
.trust-row span { display: inline-flex; align-items: center; gap: 8px; }
.trust-row svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 17px; }

/* ---------------- Phone + screenshot frames ---------------- */

.phone-stage { position: relative; display: flex; justify-content: center; }
.phone {
  width: 300px; height: 616px;
  background: var(--dark); border-radius: 44px; padding: 11px;
  box-shadow: var(--shadow-phone);
  position: relative;
}
.phone .screen {
  width: 100%; height: 100%; border-radius: 34px; overflow: hidden;
  background: var(--surface); position: relative;
}
.shot { position: absolute; inset: 0; margin: 0; }
.shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.shot__ph {
  position: absolute; inset: 0;
  display: none;
  flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 26px; text-align: center;
  background:
    repeating-linear-gradient(135deg, var(--surface-2) 0 12px, #E6ECFA 12px 24px);
  color: var(--muted-ink);
}
.shot__ph .ph-tag {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-ink); background: var(--accent-wash);
  padding: 5px 11px; border-radius: var(--r-pill);
}
.shot__ph .ph-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.shot__ph .ph-file { font-size: 12.5px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--muted-ink); }
.shot.is-missing img { display: none; }
.shot.is-missing .shot__ph { display: flex; }
.shot__frame { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease; }
.shot__frame.is-on { opacity: 1; }
.shot.has-frames .shot__ph { display: none; }

/* floating correction card */
.correction-card {
  position: absolute; right: -50px; bottom: -10px; z-index: 4;
  width: 264px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-pop); padding: 18px 20px;
}
.correction-card .cc-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 12px;
}
.correction-card .cc-title {
  font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: var(--accent-ink);
}
.correction-card .cc-score {
  font-size: 12px; font-weight: 700; color: var(--muted-ink);
  background: var(--surface-2); border-radius: var(--r-pill); padding: 4px 10px;
}
.cc-line { font-size: 14.5px; line-height: 1.5; }
.cc-line + .cc-line { margin-top: 9px; }
.cc-said { color: var(--muted-ink); }
.cc-said s { text-decoration-color: var(--accent); text-decoration-thickness: 2px; }
.cc-fixed { color: var(--ink); font-weight: 500; }
.cc-why {
  margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line);
  font-size: 13.5px; line-height: 1.5; color: var(--muted-ink);
}
.cc-note {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 11.5px; line-height: 1.4; color: var(--muted-ink);
}

/* ---------------- Sections ---------------- */

section { padding: 88px 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-tint { background: var(--surface-2); }

.sec-head { max-width: 720px; margin: 0 auto 54px; text-align: center; }
.sec-head.left { margin-left: 0; text-align: left; }
.kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 14px;
}
.sec-head h2 {
  font-size: clamp(27px, 3.4vw, 40px); line-height: 1.13; font-weight: 700;
  letter-spacing: -.02em; margin: 0 0 16px;
}
.sec-head .lead { font-size: 17.5px; color: var(--muted-ink); margin: 0; }

h3 { font-size: 20px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 8px; }
p { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* ---------------- Recognition vs production ---------------- */

.split-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 36px; }
.split-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px;
}
.split-card.is-key { border-color: #C3D2FA; box-shadow: var(--shadow-card); }
.split-card .tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted-ink);
  background: var(--surface-2); border-radius: var(--r-pill); padding: 5px 12px; margin-bottom: 14px;
}
.split-card.is-key .tag { color: var(--accent-ink); background: var(--accent-wash); }
.split-card p { font-size: 16.5px; color: var(--muted-ink); margin: 0; }

.punchline {
  margin-top: 34px; padding: 24px 28px;
  background: var(--accent-wash); border-radius: var(--radius);
  font-size: 18px; line-height: 1.6; color: var(--ink); font-weight: 500;
}
.punchline strong { color: var(--accent-ink); }

/* ---------------- Quotes ---------------- */

.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px;
  display: flex; flex-direction: column; gap: 16px;
}
.quote-card blockquote {
  margin: 0; font-size: 18px; line-height: 1.55; color: var(--ink); font-weight: 500;
  letter-spacing: -.01em;
}
.quote-card blockquote::before { content: '\201E'; color: var(--accent); font-weight: 700; }
.quote-card blockquote::after { content: '\201D'; color: var(--accent); font-weight: 700; }
.quote-card figcaption {
  margin-top: auto; font-size: 13.5px; color: var(--muted-ink);
  padding-top: 14px; border-top: 1px solid var(--line);
}

/* ---------------- Method cards ---------------- */

.method-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.method-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px;
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.method-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); border-color: #C3D2FA; }
.method-num {
  width: 40px; height: 40px; border-radius: 12px;
  background: var(--accent); color: #0B1120;
  display: grid; place-items: center;
  font-size: 17px; font-weight: 700; margin-bottom: 18px;
}
.method-card p { font-size: 16.5px; color: var(--muted-ink); margin: 0; }

/* ---------------- Product tour ---------------- */

.tour-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px;
  align-items: center; margin-bottom: 76px;
}
.tour-row:last-child { margin-bottom: 0; }
.tour-row.flip .tour-text { order: 2; }
.tour-text .tour-tag {
  display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-ink);
  background: var(--accent-wash); border-radius: var(--r-pill);
  padding: 6px 13px; margin-bottom: 16px;
}
.tour-text h3 { font-size: clamp(21px, 2.2vw, 26px); line-height: 1.22; margin-bottom: 12px; }
.tour-text p { font-size: 16.5px; color: var(--muted-ink); }
.tour-facts { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 10px; }
.tour-facts li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; color: var(--muted-ink); }
.tour-facts svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 18px; margin-top: 4px; }

.tour-shot { display: flex; justify-content: center; }
.tour-shot .phone { width: 268px; height: 552px; }

/* loop strip */
.loop {
  margin-top: 76px; padding: 28px;
  background: var(--dark); border-radius: var(--radius-lg);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px;
}.loop-item { display: inline-flex; align-items: center; gap: 12px; }
.loop-item:first-child .loop-plus { display: none; }
.loop-step {
  background: rgba(114, 149, 247, .14); border: 1px solid rgba(114, 149, 247, .35);
  color: var(--dark-ink); border-radius: var(--r-pill);
  padding: 11px 20px; font-size: 15.5px; font-weight: 500;
}
/* The doors in stay quieter than the deck they all pour into. */
.loop-step--src {
  background: rgba(242, 245, 255, .06); border-color: rgba(242, 245, 255, .18);
  color: var(--dark-soft); padding: 9px 16px; font-size: 14.5px;
}
.loop-step--deck { background: var(--accent); border-color: var(--accent); color: #0B1120; font-weight: 700; }
.loop-arrow { color: var(--accent); font-weight: 700; }
.loop-plus { color: var(--muted); font-weight: 700; }
.loop-caption {
  text-align: center; margin-top: 16px; font-size: 15px; color: var(--muted-ink);
}

/* ---------------- Comparison (dark) ---------------- */

.compare { background: var(--dark); color: var(--dark-ink); position: relative; overflow: hidden; }
.compare .glow.c1 { width: 560px; height: 560px; background: #26365F; top: -220px; right: -160px; opacity: .9; }
.compare .kicker { color: var(--accent); }
.compare .sec-head .lead { color: var(--dark-soft); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius-lg); }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
caption, .table-note { text-align: left; font-size: 14.5px; color: var(--dark-soft); }
.table-note { margin: 14px 0 0; }
th, td { text-align: left; padding: 16px 18px; border-bottom: 1px solid rgba(242, 245, 255, .1); }
thead th {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted); border-bottom: 1px solid rgba(242, 245, 255, .22);
}
tbody th { font-size: 16.5px; font-weight: 500; color: var(--dark-ink); }
td { font-size: 15.5px; color: var(--dark-soft); }
tr.is-us th, tr.is-us td { background: rgba(114, 149, 247, .14); }
tr.is-us th { color: #FFFFFF; font-weight: 700; }
.mark { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.mark svg { width: 16px; height: 16px; }
.mark-yes { color: var(--accent); }
.mark-no { color: var(--muted); }

.compare-note {
  margin-top: 34px; padding: 26px 28px;
  border: 1px solid rgba(242, 245, 255, .16); border-radius: var(--radius-lg);
  background: rgba(242, 245, 255, .04);
}
.compare-note h3 { color: var(--dark-ink); margin-bottom: 10px; font-size: 18px; }
.compare-note p { color: var(--dark-soft); font-size: 16px; }

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

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: step; }
.step {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px; position: relative;
}
.step .step-kicker {
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-ink); margin-bottom: 12px;
}
.step p { font-size: 16.5px; color: var(--muted-ink); margin: 0; }

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

.faq { max-width: 780px; margin: 0 auto; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); margin-bottom: 12px; overflow: hidden;
}
.faq details[open] { border-color: #C3D2FA; box-shadow: var(--shadow-card); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; font-size: 17.5px; font-weight: 700; letter-spacing: -.01em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { width: 20px; height: 20px; color: var(--accent); flex: 0 0 20px; transition: transform .2s; }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq .faq-body { padding: 0 24px 22px; }
.faq .faq-body p { font-size: 16.5px; color: var(--muted-ink); }
.faq .faq-body p + p { margin-top: 12px; }

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

.final { background: var(--dark); color: var(--dark-ink); text-align: center; position: relative; overflow: hidden; }
.final .glow.c1 { width: 620px; height: 620px; background: #26365F; bottom: -280px; left: 50%; transform: translateX(-50%); opacity: .9; }
.final-inner { position: relative; max-width: 720px; margin: 0 auto; }
.final h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.1; letter-spacing: -.025em; margin: 0 0 18px; }
.final .lead { font-size: 18px; color: var(--dark-soft); margin: 0 0 30px; }

.checks { display: grid; gap: 12px; text-align: left; max-width: 560px; margin: 0 auto 30px; }
.check {
  display: flex; gap: 14px; align-items: flex-start;
  background: rgba(242, 245, 255, .05); border: 1px solid rgba(242, 245, 255, .14);
  border-radius: var(--radius); padding: 16px 20px;
}
.check .n {
  width: 26px; height: 26px; flex: 0 0 26px; border-radius: 8px;
  background: var(--accent); color: #0B1120;
  display: grid; place-items: center; font-size: 14px; font-weight: 700; margin-top: 2px;
}
.check p { margin: 0; font-size: 16.5px; color: var(--dark-ink); }
.final .store-row { justify-content: center; margin: 32px 0 22px; }
.final .handle { font-size: 15px; font-weight: 500; color: var(--muted); }
.final .handle a { color: var(--accent); }

.small-step {
  position: relative; max-width: 620px; margin: 44px auto 0;
  padding: 22px 26px; border-radius: var(--radius);
  border: 1px dashed rgba(242, 245, 255, .28);
  font-size: 16.5px; color: var(--dark-soft);
}
.small-step strong { color: var(--dark-ink); }

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

footer.site {
  background: var(--surface); border-top: 1px solid var(--line);
  padding: 46px 0 40px;
}
.foot-top {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  justify-content: space-between; gap: 32px; padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.foot-brand { max-width: 320px; }
.foot-brand .brand { margin-bottom: 12px; }
.foot-brand p { font-size: 15px; color: var(--muted-ink); }
.foot-cols { display: flex; flex-wrap: wrap; gap: 48px; }
.foot-col h4 {
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted-ink); margin: 0 0 14px;
}
.foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot-col a { font-size: 15px; color: var(--ink); }
.foot-col a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; padding-top: 26px; font-size: 14px; color: var(--muted-ink);
}

/* ---------------- Reveal on scroll ---------------- */

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

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

/* The loop strip is five pills and four glyphs wide. It only clears the 1120 column
   at full size, so from 1167 down it tightens, and below 1041 it stands up instead of
   wrapping. Wrapping strands a + or an arrow at the edge of a line, standing it up
   keeps every glyph in the middle of one. */
@media (max-width: 1167px) {
  .loop { gap: 9px; }
  .loop-step { font-size: 14px; padding: 9px 15px; }
  .loop-step--src { font-size: 13px; padding: 8px 13px; }
  .loop-item { gap: 9px; }
}

@media (max-width: 1040px) {
  .loop { flex-direction: column; align-items: center; gap: 10px; }
  .loop-item { flex-direction: column; gap: 10px; }
  .loop-arrow { transform: rotate(90deg); }
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero { padding: 56px 0 72px; }
  .hero h1 { max-width: 20ch; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-copy { text-align: center; }
  .eyebrow { margin-bottom: 18px; }
  .trust-row, .hero .store-row { justify-content: center; }
  .phone-stage { order: 2; flex-direction: column; align-items: center; }
  .correction-card { position: static; transform: none; width: min(340px, 100%); margin-top: 22px; }
  .tour-row, .tour-row.flip .tour-text { grid-template-columns: 1fr; gap: 34px; order: 0; }
  .tour-row { margin-bottom: 56px; }
  /* the links stay reachable on small screens, as a strip you swipe sideways */
  .nav-inner { flex-wrap: wrap; height: auto; padding-top: 13px; padding-bottom: 12px; row-gap: 2px; }
  .nav-links {
    order: 3; flex: 1 0 100%;
    margin: 0 -24px; padding: 0 24px 2px;
    overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 30px), transparent);
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { white-space: nowrap; }
}

@media (max-width: 760px) {
  section { padding: 64px 0; }
  .quote-grid, .method-grid, .steps, .split-grid { grid-template-columns: 1fr; }
  .loop { gap: 8px; padding: 22px; }
  .loop-step { font-size: 14px; padding: 9px 15px; }
  .loop-step--src { font-size: 13px; padding: 8px 13px; }
  .loop-item { gap: 8px; }
  .foot-top { flex-direction: column; }
}

@media (max-width: 520px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 18px; }
  .nav-handle { display: none; }
  /* the swipe strip reaches to the screen edge, so its negative margin has to
     track the wrap padding, which drops from 24px to 18px right here */
  .nav-links { margin: 0 -18px; padding: 0 18px 2px; }
  .store-badge img { height: 48px; }
  .phone { width: 262px; height: 540px; }
  .correction-card { width: 92%; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .nav, .glow, .phone .notch { display: none; }
  body { background: #FFFFFF; }
}