/* ============================================================
   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); }

/* ---------------- 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); }

.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 {
  /* a <figure> brings a default 1em 40px margin, which would pull every quote
     40px in from the column at every width. It is a card, it fills the column. */
  margin: 0;
  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);
}

/* ---------------- Languages ---------------- */

.lang-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  list-style: none; margin: 0 auto; padding: 0; max-width: 820px;
}
.lang-chip {
  padding: 10px 17px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface);
  font-size: 15px; font-weight: 500; color: var(--ink-soft);
}
.lang-note { text-align: center; margin: 22px 0 0; font-size: 15px; color: var(--muted-ink); }

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

.compare { background: var(--dark); color: var(--dark-ink); position: relative; overflow: hidden; }
/* the glow is a positioned box, so without this the content column would paint
   underneath it and the header text would pick up the tint on narrow screens */
.compare > .wrap { position: relative; z-index: 1; }
.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); }
/* the note sits under the table, outside the scroll frame, and lines up with the
   first cell rather than the frame edge so a rounded corner never bites it */
.table-note { margin: 14px 0 0; padding: 0 18px; }
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) {
  /* the nav stands up into two rows here, brand on top and the swipe strip below,
     so the anchor offset has to grow with it. 112 clears that nav, so an anchor
     never lands under the bar. */
  html { scroll-padding-top: 112px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding: 48px 0 64px; }
  .hero h1 { max-width: 20ch; line-height: 1.1; }
  .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: 18px; }
  .tour-row, .tour-row.flip .tour-text { grid-template-columns: 1fr; gap: 28px; order: 0; }
  .tour-row { margin-bottom: 48px; }
  /* 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; }
}

/* A four column table does not shrink into a phone. Below 640 the row label
   becomes the card title and every cell carries its own column header, so the
   comparison reads down the page instead of sideways behind a scrollbar. Wider
   than that the 720px table still fits the column or scrolls inside its frame. */
@media (max-width: 640px) {
  .table-scroll { overflow: visible; border-radius: 0; }
  .compare table { display: block; min-width: 0; }
  /* the header row stays in the markup for screen readers, just not on screen */
  .compare thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .compare tbody { display: grid; gap: 12px; }
  .compare tbody tr {
    display: block; padding: 16px 18px;
    border: 1px solid rgba(242, 245, 255, .16); border-radius: var(--radius);
    background: rgba(242, 245, 255, .03);
  }
  .compare tbody tr.is-us { background: rgba(114, 149, 247, .14); border-color: rgba(114, 149, 247, .4); }
  /* the desktop row highlight paints each cell on its own. Inside a card that
     leaves a square patch floating in a rounded box, so the card holds the tint
     and the cells go clear. */
  .compare tbody tr.is-us th, .compare tbody tr.is-us td { background: transparent; }
  .compare tbody th {
    display: block; font-size: 17px; font-weight: 700; line-height: 1.3;
    padding: 0 0 12px; margin-bottom: 8px;
    border-bottom: 1px solid rgba(242, 245, 255, .14);
  }
  .compare tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 14px; padding: 7px 0; border-bottom: 0;
  }
  .compare tbody td::before {
    content: attr(data-label); flex: 0 0 auto;
    font-size: 14px; color: var(--muted);
  }
  .compare .table-note { margin-top: 16px; }
}

@media (max-width: 760px) {
  section { padding: 56px 0; }
  .sec-head { margin-bottom: 40px; }
  .quote-grid, .method-grid, .steps, .split-grid { grid-template-columns: 1fr; }
  .loop { gap: 8px; padding: 20px; margin-top: 56px; }
  .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; gap: 28px; }
}

@media (max-width: 520px) {
  body { font-size: 16.5px; }
  .wrap { padding: 0 18px; }
  /* the nav is two rows, brand then swipe strip, so anchors need to clear both */
  html { scroll-padding-top: 112px; }
  .nav-inner { padding-top: 6px; padding-bottom: 6px; }
  .nav-links a { padding: 8px 12px; font-size: 14.5px; }
  /* 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; }

  .hero { padding: 36px 0 52px; }
  .hero-grid { gap: 36px; }
  .eyebrow { font-size: 13px; padding: 7px 13px; margin-bottom: 16px; }
  .hero .lead { font-size: 16.5px; line-height: 1.6; margin-bottom: 26px; }
  .hero .store-row { gap: 10px; margin-bottom: 22px; }
  .store-badge img { height: 48px; }
  .trust-row { gap: 8px 16px; font-size: 14px; }
  .phone { width: 262px; height: 540px; }
  .correction-card { width: min(340px, 100%); margin-top: 16px; }

  .sec-head { margin-bottom: 32px; }
  .sec-head h2 { line-height: 1.16; margin-bottom: 14px; }
  .sec-head .lead { font-size: 16.5px; }
  .split-grid { margin-top: 28px; gap: 14px; }
  .split-card, .method-card, .step { padding: 24px 22px; }
  .quote-grid, .method-grid, .steps { gap: 14px; }
  .quote-card { padding: 24px 22px; gap: 14px; }
  .punchline { padding: 20px 22px; margin-top: 28px; font-size: 17px; }

  .tour-row { gap: 24px; margin-bottom: 40px; }
  .tour-text p { font-size: 16px; }
  .loop { margin-top: 44px; padding: 18px; }
  .loop-caption { margin-top: 14px; font-size: 14.5px; }

  .compare-note { margin-top: 24px; padding: 20px 22px; }
  .compare tbody tr { padding: 14px 16px; }

  .faq details { margin-bottom: 10px; }
  .faq summary { padding: 18px 20px; font-size: 17px; }
  .faq .faq-body { padding: 0 20px 20px; }

  .checks { margin-bottom: 26px; gap: 10px; }
  .check { padding: 14px 16px; gap: 12px; }
  .final .lead { font-size: 17px; }
  .small-step { margin-top: 32px; padding: 18px 20px; font-size: 16px; }

  footer.site { padding: 38px 0 32px; }
  .foot-top { gap: 24px; padding-bottom: 24px; }
  .foot-cols { gap: 24px 32px; }
  .foot-bottom { padding-top: 22px; }
}

@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; }
}