/* marketing/css/site.css — snpz marketing page. One stylesheet, no build.
   Shared by index.html and the generated /vs/*.html pages, so every URL in here
   and in the markup is absolute (/css/…, /img/…) — a relative path breaks the
   moment the page is served from /vs/.
   System: flat colour, 2px black outlines, hard black offset shadows, black text.
   Contrast floor: every text node is black or #4a4744 on white / cream / yellow /
   cyan / green / orange. Worst case is #4a4744 on #FFC629 = 5.6:1 (AA). No white
   text on any colour ground anywhere, and no white artwork: every competitor
   wordmark is a single-colour black rendition on a white card. */

:root {
  --yellow: #ffc629;
  --cyan: #5bc8e8;
  --green: #2ecc71;
  --orange: #f26b3a;
  --cream: #fbf4ea;
  --ink: #111111;
  --ink-soft: #4a4744;
  --line: #111111;
  /* The matrix ticks and crosses. Both clear 3:1 on white and on the yellow column,
     which is what WCAG 1.4.11 asks of a graphic that carries meaning. --tick-ink is
     the text weight of the same green, for the "Soon" chip. */
  --tick: #12793c;
  --tick-ink: #0d5b2d;
  --cross: #c4271a;
  --r: 14px;
  --sh: 6px 7px 0 var(--ink);
  --sh-lg: 8px 9px 0 var(--ink);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: #fff; color: var(--ink);
  font: 400 16px/1.55 Outfit, "Segoe UI", -apple-system, system-ui, sans-serif;
}
/* height:auto is load-bearing — the <img> width/height attributes are presentational
   hints, so without it max-width squashes every screenshot to its attribute height. */
img { max-width: 100%; height: auto; display: block; }
a { color: var(--ink); }
h1, h2, h3 { line-height: 1.06; letter-spacing: -.035em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(31px, 5.2vw, 58px); font-weight: 800; }
h2 { font-size: clamp(26px, 3.8vw, 42px); font-weight: 800; }
h3 { font-size: 19px; font-weight: 700; letter-spacing: -.02em; }
p { margin: 0; }
.wrap { max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.num { font-variant-numeric: tabular-nums; }
.i { width: 16px; height: 16px; flex: 0 0 16px; stroke-width: 2.6; }
.mut { color: var(--ink-soft); }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 4px; }
.vh {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 9; background: #fff; padding: 10px 14px; border: 2px solid var(--ink); }
/* onerror fallbacks flip .hidden on elements that also carry a display rule —
   the UA's display:none for [hidden] loses to those, so restate it here. */
[hidden] { display: none !important; }

/* ---------------- the tile: one shape, used everywhere ---------------- */
.tileish {
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--sh);
}
.eyebrow {
  display: inline-block; margin-bottom: 16px; padding: 5px 12px;
  background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 4px 0 var(--ink);
  font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}

/* ---------------- buttons ---------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 22px; border: 2px solid var(--ink); border-radius: 999px;
  font: 700 16px/1 Outfit, "Segoe UI", sans-serif; color: var(--ink);
  text-decoration: none; white-space: nowrap; cursor: pointer;
  box-shadow: 3px 4px 0 var(--ink); transition: translate .1s, box-shadow .1s;
}
.btn:hover { translate: 1px 2px; box-shadow: 2px 2px 0 var(--ink); }
.btn-y { background: var(--yellow); }
.btn-c { background: var(--cyan); }

/* ---------------- top bar ----------------
   The mark up here is the wordmark itself, black on white and big: img/snpz-logo.png,
   60px tall on desktop and 40px on a phone. The artwork carries the p's descender, so
   the letters read about two thirds of that. The yellow tile is a footer thing now,
   and nothing sits to the right of the wordmark — the demo number is in the cyan strip
   and the sign-in is in the footer. */
.topbar { background: #fff; border-bottom: 2px solid var(--ink); }
.bar { display: flex; align-items: center; gap: 14px; padding-block: 12px; }
.brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.brand .wm { height: 60px; width: auto; }
.brand .logo { height: 44px; width: auto; }
.wordmark {
  font-size: 34px; font-weight: 700; letter-spacing: -.055em;
  text-transform: lowercase; line-height: 1;
}

/* ---------------- hero ---------------- */
.hero {
  position: relative; overflow: hidden; background: var(--yellow);
  border-bottom: 2px solid var(--ink);
  padding: 50px 0 60px; text-align: center;
}
.hero-in { position: relative; z-index: 1; max-width: 720px; }
.kicker { font-size: 15.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 16px; }
.hero h1 { margin-bottom: 20px; display: grid; gap: 10px; justify-items: center; }
.hl { display: block; }
.sub {
  font-size: clamp(17px, 2vw, 20px); color: var(--ink-soft); font-weight: 500;
  max-width: 33ch; margin: 0 auto;
}

/* The middle headline line: real parentheses holding five logo cards.
   Every mark is the company's own artwork with its geometry untouched, set in one
   colour — black — on a white card, so the row reads as one row instead of five
   brands shouting. One --lg knob scales the whole row: five cards on the home page,
   one big one on a /vs/ page, smaller again on a phone. */
.hlogos {
  --lg: 1;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 7px; line-height: 1;
}
.hlogos.solo { --lg: 1.9; }
.paren { font-weight: 800; font-size: 1.16em; line-height: .78; }
.hlogos .clogo {
  height: calc(38px * var(--lg)); padding: 0 calc(11px * var(--lg));
  border-radius: 10px; box-shadow: 3px 4px 0 var(--ink);
}
.hlogos .cl-booksy img { height: calc(13px * var(--lg)); }
.hlogos .cl-vagaro img { height: calc(15px * var(--lg)); }
.hlogos .cl-square img { height: calc(16px * var(--lg)); }
.hlogos .cl-squire img { height: calc(12px * var(--lg)); }
.hlogos .cl-thecut img { height: calc(18px * var(--lg)); }

/* the search box: one black-outlined slab, cyan button living inside it */
.shopform {
  display: flex; gap: 8px; margin: 30px auto 0; padding: 8px;
  background: #fff; border: 2px solid var(--ink); border-radius: 14px;
  box-shadow: var(--sh-lg);
}
.shopform input {
  flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
  padding: 12px 14px; font: 400 17px/1.2 Outfit, "Segoe UI", sans-serif; color: var(--ink);
}
.shopform input::placeholder { color: #6b6862; }
.shopform input:focus-visible { outline: 3px solid var(--ink); outline-offset: -1px; border-radius: 8px; }
.shopform .btn { border-radius: 9px; box-shadow: none; padding: 13px 24px; }
.shopform .btn:hover { translate: 0; background: #7fd6ef; }
.fine-note { margin-top: 14px; font-size: 13.5px; color: var(--ink-soft); }
.fine-note a { color: var(--ink-soft); }

/* tiles: a wrapped row by default (mobile / tablet), scattered at >=1160px */
.tiles {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  list-style: none; margin: 40px auto 0; padding: 0 20px; max-width: 760px;
}
.tile {
  padding: 9px 15px; background: #fff; border: 2px solid var(--ink);
  border-radius: 11px; box-shadow: 4px 5px 0 var(--ink);
  font-size: 14.5px; font-weight: 700; white-space: nowrap;
}
.c-y { background: var(--yellow); }
.c-c { background: var(--cyan); }
.c-g { background: var(--green); }
.c-o { background: var(--orange); }
.sparks { display: none; }

@media (min-width: 1160px) {
  .hero { padding: 84px 0 96px; }
  /* Anchored off the centre column (50% + 350px), never off the viewport, so a
     tile can't slide over the headline at any width above this breakpoint. */
  .tiles { position: absolute; inset: 0; display: block; margin: 0; padding: 0; max-width: none; }
  .tile {
    position: absolute; padding: 11px 17px; font-size: 15.5px;
    border-radius: 13px; box-shadow: var(--sh);
    animation: bob 7s ease-in-out infinite;
  }
  .t1 { right: calc(50% + 388px); top: 10%; rotate: -7deg; animation-delay: -.4s; }
  .t3 { right: calc(50% + 430px); top: 38%; rotate: 5deg; animation-delay: -2.1s; }
  .t5 { right: calc(50% + 396px); bottom: 20%; rotate: -5deg; animation-delay: -3.6s; }
  .t8 { right: calc(50% + 424px); bottom: 4%; rotate: 6deg; animation-delay: -1.7s; }
  .t2 { left: calc(50% + 392px); top: 8%; rotate: 6deg; animation-delay: -1.2s; }
  .t4 { left: calc(50% + 426px); top: 36%; rotate: -6deg; animation-delay: -2.9s; }
  .t6 { left: calc(50% + 386px); bottom: 22%; rotate: 7deg; animation-delay: -5s; }
  .t7 { left: calc(50% + 424px); bottom: 7%; rotate: -4deg; animation-delay: -4.2s; }
  .sparks { display: block; position: absolute; inset: 0; pointer-events: none; }
  .sparks svg { position: absolute; fill: var(--ink); animation: bob 6s ease-in-out infinite; }
  .sp1 { right: calc(50% + 372px); top: 26%; width: 22px; }
  .sp2 { left: calc(50% + 380px); top: 24%; width: 28px; animation-delay: -2s; }
  .sp3 { right: calc(50% + 420px); bottom: 34%; width: 17px; animation-delay: -3s; }
  .sp4 { left: calc(50% + 376px); bottom: 2%; width: 24px; animation-delay: -1s; }
}
@keyframes bob { 50% { translate: 0 -11px; } }

/* ---------------- cyan call strip ---------------- */
.strip {
  background: var(--cyan); border-bottom: 2px solid var(--ink); padding: 22px 0;
  text-align: center;
}
.strip p { font-size: clamp(18px, 2.6vw, 27px); font-weight: 700; letter-spacing: -.02em; }
.strip a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px; }

/* ---------------- section shells ---------------- */
.compare-sec { padding: 34px 0 72px; background: var(--cream); border-bottom: 2px solid var(--ink); }
.price-sec { padding: 76px 0 84px; border-bottom: 2px solid var(--ink); }
.video-sec { padding: 76px 0 84px; background: var(--cream); border-bottom: 2px solid var(--ink); }
.band { padding: 76px 0; border-bottom: 2px solid var(--ink); }
.steps-sec { padding: 76px 0; background: var(--cream); border-bottom: 2px solid var(--ink); }
.faq-sec { padding: 76px 0 84px; }
.head { max-width: 820px; margin-bottom: 34px; }
.head p { margin-top: 16px; font-size: 17px; }

/* ---------------- the comparison matrix ----------------
   One table, 22 feature rows against six brands, and a slider that recomputes every
   headline price. It has to fit 1440 with no sideways page scroll, so it is a fixed
   layout: one wide feature column and six equal brand columns inside the 1180 wrap.
   Nothing is an overflow container at that width, which is what lets the header row
   stick to the top of the PAGE while you read down the rows. On a phone the table
   scrolls sideways inside .mxwrap with the feature column and ours pinned to the left. */
.tag { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }

/* the white cards the competitor wordmarks sit on, in the hero and on the vs pages */
.clogo {
  display: inline-flex; align-items: center; justify-content: center;
  height: 46px; padding: 0 15px; background: #fff;
  border: 2px solid var(--ink); border-radius: 12px; box-shadow: 4px 5px 0 var(--ink);
}
.clogo img { width: auto; }

.compare-line {
  font-size: 28px; font-weight: 700; line-height: 1.1; letter-spacing: -.025em;
  color: var(--ink); margin-bottom: 18px;
}

/* the chairs slider */
.mxtop { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; }
.mxq { font-size: 16px; font-weight: 700; }
.mxrange {
  flex: 0 1 320px; min-width: 180px; height: 30px; margin: 0;
  accent-color: var(--ink); cursor: pointer;
}
.mxn {
  min-width: 54px; padding: 1px 15px 3px; background: var(--yellow);
  border: 2px solid var(--ink); border-radius: 999px; box-shadow: 3px 4px 0 var(--ink);
  font: 800 26px/1.28 Outfit, "Segoe UI", sans-serif; text-align: center;
}

.mx {
  width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--sh);
}
.mx thead th {
  position: sticky; top: 0; z-index: 2; background: #fff; vertical-align: bottom;
  padding: 15px 7px 12px; text-align: center; border-bottom: 2px solid var(--ink);
}
.mx thead th.f { width: 292px; text-align: left; padding: 15px 16px 12px; font-size: 13px; }
.mx thead th.us { background: var(--yellow); }
.mx thead th:first-child { border-top-left-radius: 12px; }
.mx thead th:last-child { border-top-right-radius: 12px; }
.mxlogo { display: flex; align-items: flex-end; justify-content: center; height: 27px; margin-bottom: 10px; }
.mxlogo img { width: auto; }
/* Set per brand so every wordmark lands on the same optical size — the files' own
   padding and cap heights differ. Ours is the wordmark, and it carries a descender. */
.mx .us .mxlogo img { height: 27px; }
.mx .b-booksy .mxlogo img { height: 15px; }
.mx .b-vagaro .mxlogo img { height: 16px; }
.mx .b-square .mxlogo img { height: 18px; }
.mx .b-squire .mxlogo img { height: 14px; }
.mx .b-thecut .mxlogo img { height: 20px; }
/* The price and its "/mo" are one unbreakable unit. The chair count is a separate
   span so it can drop away on a narrow column instead of breaking the price. */
.mxp { display: block; font-size: 12.5px; line-height: 1.3; }
.mxv { font-weight: 800; letter-spacing: -.02em; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* the two spans are adjacent with no whitespace in the markup, so the gap is a margin */
.mxc { margin-left: .32em; font-weight: 600; white-space: nowrap; }
.mxs { display: block; margin-top: 5px; font-size: 10.5px; font-weight: 600; line-height: 1.25; }

.mx tbody th {
  text-align: left; font-size: 13.5px; font-weight: 600; line-height: 1.3;
  padding: 9px 16px; background: #fff; border-top: 1px solid rgba(17, 17, 17, .14);
}
.mx tbody td {
  text-align: center; padding: 9px 6px; line-height: 1;
  border-top: 1px solid rgba(17, 17, 17, .14);
}
.mx tbody tr:nth-child(even) > * { background: #faf7f1; }
.mx tbody td:nth-child(2), .mx tbody tr:nth-child(even) td:nth-child(2) { background: var(--yellow); }
.mx tbody tr:last-child th { border-bottom-left-radius: 12px; }
.mx tbody tr:last-child td:last-child { border-bottom-right-radius: 12px; }

.mxi { width: 21px; height: 21px; vertical-align: middle; stroke-width: 3.2; }
.mx td.y .mxi { color: var(--tick); }
/* The cross is deliberately bigger and heavier than the tick — it is the number a
   barber is trying to find. */
.mx td.n .mxi { width: 24px; height: 24px; stroke-width: 3.6; color: var(--cross); }
.soon {
  display: inline-block; padding: 2px 9px; background: #fff;
  border: 2px solid var(--tick); border-radius: 999px; color: var(--tick-ink);
  font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}

/* where every price came from */
.srcs { margin: 16px 0 0; display: grid; gap: 9px; max-width: 900px; }
.srcs div { display: grid; grid-template-columns: 86px 1fr; gap: 14px; align-items: baseline; }
.srcs dt { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.srcs dd { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); }
.srcs dd b { color: var(--ink); }
.chip {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: #fff; border: 1.5px solid var(--ink); color: var(--ink);
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: 1.5px;
}
.note { margin-top: 22px; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); max-width: 900px; }

/* ---------------- our price ---------------- */
.pricing { display: grid; gap: 24px; }
.plan {
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--sh); padding: 24px 22px;
}
.plan.base { background: var(--yellow); }
.plan .tag { display: block; }
.big { display: flex; align-items: baseline; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.big b { font-size: 46px; font-weight: 800; letter-spacing: -.045em; }
.big span { font-size: 14px; color: var(--ink-soft); }
.plan.base .big span, .plan.pick .big span { color: var(--ink); }
.plan .lede { margin-top: 10px; font-size: 15px; }
.ticks { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.ticks li { display: flex; gap: 9px; font-size: 14.5px; line-height: 1.45; align-items: start; }
.ticks svg { margin-top: 3px; color: var(--ink); }
.ticks .taste { margin-top: 6px; padding-top: 14px; border-top: 2px solid var(--ink); }
.addons-head { font-size: 17px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 14px; }
.addon-grid { display: grid; gap: 16px; }
.plan.addon { padding: 20px 18px; box-shadow: 4px 5px 0 var(--ink); }
.plan.addon.pick { background: var(--cyan); }
.plan.addon .big b { font-size: 38px; }
.mins { margin-top: 4px; font-size: 15px; font-weight: 700; }
.terms { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 11px; font-size: 14.5px; }
.terms li { position: relative; padding-left: 17px; color: var(--ink-soft); line-height: 1.5; }
.terms li b { color: var(--ink); }
.terms li::before {
  content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px;
  background: var(--ink); border-radius: 2px;
}
.allin { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.allin span {
  padding: 10px 18px; background: var(--yellow); border: 2px solid var(--ink);
  border-radius: 999px; box-shadow: 3px 4px 0 var(--ink); font-size: 16px; font-weight: 600;
}

/* ---------------- barber band ---------------- */
.band .grid { display: grid; gap: 34px; align-items: center; }
.band p { margin-top: 16px; font-size: 17px; }
.band figure {
  margin: 0; border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--sh-lg); overflow: hidden; background: #fff;
}
.band figure img { width: 100%; }

/* ---------------- steps (switching, and the video flow) ---------------- */
.steps { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 20px; counter-reset: s; }
.steps li {
  counter-increment: s; background: #fff; border: 2px solid var(--ink);
  border-radius: var(--r); padding: 22px 20px; box-shadow: var(--sh);
}
.steps li::before {
  content: counter(s); display: grid; place-items: center; width: 34px; height: 34px;
  border: 2px solid var(--ink); border-radius: 10px; background: var(--cyan);
  font-size: 16px; font-weight: 800; margin-bottom: 14px;
}
.steps li:nth-child(2)::before { background: var(--green); }
.steps li:nth-child(3)::before { background: var(--orange); }
.steps li:nth-child(4)::before { background: var(--yellow); }
.steps p { margin-top: 8px; font-size: 14.5px; color: var(--ink-soft); }

/* ---------------- vs pages: the one-on-one table and the pain points ---------------- */
.duelwrap { overflow-x: auto; margin: 28px -20px 0; padding: 4px 20px 10px; }
.duel {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r);
  box-shadow: var(--sh); overflow: hidden;
}
.duel th, .duel td { padding: 13px 15px; text-align: left; font-size: 14.5px; border-top: 2px solid var(--ink); }
.duel thead th {
  border-top: 0; background: var(--cyan); font-size: 11.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
}
.duel .n, .duel td.n { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.duel tbody tr.us { background: var(--yellow); }
.duel tbody tr.us td { font-weight: 700; }
.duel .why { display: block; margin-top: 4px; font-size: 12.5px; font-weight: 400; color: var(--ink-soft); }
.duel tr.us .why { color: var(--ink); }

.pains { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 20px; }
.pains li {
  background: #fff; border: 2px solid var(--ink); border-radius: var(--r);
  padding: 22px 20px; box-shadow: var(--sh);
}
.pains h3 { margin-bottom: 10px; }
.pains p { font-size: 14.5px; color: var(--ink-soft); }
.credit {
  margin-top: 24px; padding: 18px 20px; background: var(--cream);
  border: 2px solid var(--ink); border-radius: var(--r); font-size: 14.5px; line-height: 1.55;
}
.credit b { display: block; margin-bottom: 6px; }

.cta-sec { padding: 68px 0 76px; background: var(--cyan); border-bottom: 2px solid var(--ink); text-align: center; }
.cta-in { max-width: 640px; margin: 0 auto; }
.cta-in p.mut { margin-top: 16px; font-size: 17px; }
.cta-in .shopform { margin-top: 26px; }

/* ---------------- faq ---------------- */
.faq {
  margin-top: 28px; max-width: 840px; background: #fff;
  border: 2px solid var(--ink); border-radius: var(--r); box-shadow: var(--sh-lg);
}
.faq details { border-top: 2px solid var(--ink); }
.faq details:first-child { border-top: 0; }
.faq summary {
  cursor: pointer; padding: 18px 46px 18px 20px; font-size: 17px; font-weight: 700;
  letter-spacing: -.015em; list-style: none; position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 18px; top: 12px; font-size: 26px;
  font-weight: 400; line-height: 1;
}
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding: 0 20px 20px; font-size: 15px; color: var(--ink-soft); max-width: 68ch; }

/* ---------------- footer ---------------- */
footer { background: var(--yellow); border-top: 2px solid var(--ink); padding: 54px 0 60px; font-size: 14.5px; }
footer .eyebrow { background: #fff; }
.foot { display: grid; gap: 28px; }
.foot ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.foot .brand { margin-right: 0; }
.fine { margin-top: 36px; padding-top: 22px; border-top: 2px solid var(--ink); font-size: 12.5px; color: var(--ink-soft); }

/* ---------------- desktop ---------------- */
@media (min-width: 900px) {
  .pricing { grid-template-columns: .92fr 1.08fr; align-items: start; }
  .addon-grid { grid-template-columns: repeat(3, 1fr); }
  .band .grid { grid-template-columns: 1.05fr .95fr; gap: 56px; }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .pains { grid-template-columns: repeat(3, 1fr); }
  .foot { grid-template-columns: 1.7fr 1fr 1.15fr .95fr; }
}
/* ---------------- phone: the matrix scrolls sideways ----------------
   Under 900 the table is wider than the screen, so .mxwrap becomes the scroll
   container and two columns pin to its left wall: the feature name, and ours. Sticky
   cells need their own opaque background or the scrolled columns show through them.
   The header row stops sticking to the page here — inside a scroll container it would
   fight the sideways pin for no gain on a screen this short. */
@media (max-width: 899px) {
  /* contain:paint is load-bearing, not decoration. Without it the 812px table still
     counts toward documentElement.scrollWidth even though overflow-x:auto stops the
     page scrolling — 787px of phantom width that some mobile browsers will let you
     pan. Containment ends it: the page measures 375 at 375. It must NOT be on the
     desktop rule, where it would become a containing block and kill the sticky
     header row. */
  .mxwrap {
    overflow-x: auto; contain: paint; padding-bottom: 10px; scrollbar-width: thin;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  }
  /* 134 + 6 x 104. Sized so that at 375 the feature column, ours, and very nearly a
     whole rival column are on screen at once — a comparison you have to guess at is
     not a comparison. */
  .mx { min-width: 758px; box-shadow: 4px 5px 0 var(--ink); }
  .mx thead th { position: static; padding: 13px 5px 11px; }
  .mx thead th.f { width: 134px; padding: 13px 11px 11px; font-size: 12px; }
  .mx tbody th { width: 134px; padding: 9px 11px; font-size: 12.5px; }
  .mx thead th.f, .mx tbody th { position: sticky; left: 0; z-index: 3; }
  .mx thead th.us, .mx tbody td:nth-child(2) { position: sticky; left: 134px; z-index: 2; }
  .mx thead th.f, .mx thead th.us { z-index: 4; }
  /* the label takes its own line so the slider and the big number share the next one */
  .mxtop { gap: 9px 12px; }
  .mxq { flex: 1 0 100%; }
  .mxrange { flex: 1 1 auto; min-width: 120px; }
  .mxc { display: none; }
  .mxs { font-size: 9.5px; }
  .compare-line { font-size: 24px; }
}
@media (max-width: 560px) {
  .shopform { flex-direction: column; gap: 6px; }
  .shopform .btn { padding: 15px 24px; }
  .hlogos { --lg: .84; gap: 6px; }
  .hlogos.solo { --lg: 1.3; }
  .hlogos .clogo { box-shadow: 2px 3px 0 var(--ink); }
  .big b { font-size: 40px; }
  /* Both chair counts have to be on screen at once — that IS the comparison. */
  .duel th, .duel td { padding: 11px 8px; font-size: 13.5px; }
  .duel thead th { font-size: 10.5px; letter-spacing: .06em; }
  .duel .why { font-size: 11.5px; }
  .brand .wm { height: 40px; }
  .mxn { font-size: 23px; min-width: 48px; }
  .srcs div { grid-template-columns: 1fr; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .tile, .sparks svg { animation: none; }
  .btn { transition: none; }
}

/* ---------- /privacy and /terms: one column of plain text, no cards, no shadows ---------- */
.legal { max-width: 800px; padding: 56px 20px 72px; }
.legal h1 { margin-bottom: 14px; }
.legal .lead { font-size: 18px; color: var(--ink); max-width: 62ch; }
.legal h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 40px 0 10px; }
.legal h3 { font-size: 17px; margin: 22px 0 6px; }
.legal p, .legal li { color: var(--ink-soft); max-width: 70ch; }
.legal p b, .legal li b { color: var(--ink); }
.legal ul { padding-left: 20px; margin: 0; }
.legal li { margin: 6px 0; }
.legal mark { background: var(--yellow); padding: 0 4px; }