/* StyleLift website: the page layout and the few pieces design/components.css doesn't have yet.
   Load after design/tokens.css and design/components.css. Built only on the tokens, like components.css:
   the only literals are geometry (percentages, fr, counters, em/ch widths). Class prefix: site-.
   The options page shares sl-page, sl-hero, sl-section, sl-h2, sl-card, fs-display and shadow-card, so nothing here
   changes those classes: the site uses site-* classes and the site-only tokens (size-wide, size-gutter, fs-hero,
   fs-section, band, shadow-sheet).
   Sections: Accessibility helpers · Page grid · Header · Hero · Stage band · Live demo · Tour · Steps · Section rhythm ·
   Features · Comparison table · Heading rail · Pricing · Closing band · Footer · Doc pages · 404 · Motion ·
   Responsive. */

/* ---------- Accessibility helpers ---------- */
/* Skip link: a primary Button parked above the viewport until it gets keyboard focus. */
.site-skip {
  position: absolute; top: var(--space-16); left: var(--space-16); z-index: var(--z-top);
  transform: translateY(calc(-100% - var(--space-24)));
}
.site-skip:focus { transform: none; }
/* The skip link moves focus here; main is a target, not a control, so it draws no ring. */
main:focus { outline: none; }

.site-sr {
  position: absolute; width: var(--space-1); height: var(--space-1); margin: calc(var(--space-1) * -1);
  padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.site-nowrap { white-space: nowrap; }

/* ---------- Page grid: full | wide | full ---------- */
/* Sections sit on the wide track (size-wide, 1152px); bands run full-bleed with the same tracks inside, so their
   content lines up with everything else. No 100vw anywhere, so a scrollbar can't cause sideways scrolling. */
.site-main, .site-band {
  --site-grid:
    [full-start] minmax(var(--size-gutter), 1fr)
    [wide-start] minmax(0, var(--size-wide))
    [wide-end] minmax(var(--size-gutter), 1fr) [full-end];
  display: grid; grid-template-columns: var(--site-grid);
}
.site-main > *, .site-band > * { grid-column: wide; min-width: 0; }
.site-main > .site-band { grid-column: full; }
.site-shell { padding-bottom: var(--space-48); }

/* ---------- Header: sticky on the wide track, with the one call to action ---------- */
.site-header {
  padding: var(--space-12) max(var(--size-gutter), (100% - var(--size-wide)) / 2);
  border-bottom: var(--border-hair) solid var(--line);
}
/* 44px hit areas for the nav links (the phone's main row of controls). */
.sl-nav a:not(.sl-button) { padding-block: var(--space-11); }
.sl-nav .site-nav__cta { height: auto; margin-left: var(--space-4); padding: var(--space-8) var(--space-14); }

/* ---------- Hero: one-line headline, lede and buy block side by side ---------- */
.site-hero { padding: var(--space-56) 0 var(--space-40); }
.site-hero .sl-display { font-size: var(--fs-hero); }
.site-hero__row { margin-top: var(--space-36); }
.site-hero__row .sl-lede { margin: 0; }
.site-hero__buy { margin-top: var(--space-28); }
/* The price only ever appears inside the full pricing sentence; the highlight marks it in place. */
.site-priceline { max-width: var(--size-measure-card); margin: 0 0 var(--space-22); color: var(--ink); }
.site-price {
  padding: var(--space-1) var(--space-8); border-radius: var(--radius-pill); white-space: nowrap;
  background: var(--accent); color: var(--on-accent); font-weight: var(--fw-600);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.site-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-18); }
.site-hero__soon { font-size: var(--fs-12); color: var(--soft); }

/* ---------- Stage band: the store artwork's always-dark Stage, used on the page ---------- */
/* The semantic tokens are remapped inside it, like a third theme. Only colour is set as an inherited property:
   anything else (line-height, letter-spacing …) would leak into the sample site and show up in the engine's output.
   Text sits on the solid background-color, so contrast checks see the real ground. */
.site-band--stage {
  --ink: var(--stage-text); --soft: var(--stage-sub); --line: var(--panel-line);
  --card: var(--panel-ink-2); --focus: var(--accent); --mark-ink: var(--accent); --mark-band: transparent;
  padding-block: var(--space-56) var(--space-96);
  border-block: var(--border-hair) solid var(--panel-line);
  background-color: var(--band); color: var(--ink);
  background-image:
    linear-gradient(var(--stage-grid) var(--border-hair), transparent var(--border-hair)),
    linear-gradient(90deg, var(--stage-grid) var(--border-hair), transparent var(--border-hair));
  background-size: var(--size-grid-stage) var(--size-grid-stage);
}
.site-band--stage .sl-eyebrow { color: var(--stage-eyebrow); }
.site-band--stage .site-steps > li::before { color: var(--accent); }

/* ---------- Live demo: BrowserFrame (the sample site) + a static InspectorPanel ---------- */
.site-demo__caption {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-8) var(--space-18); margin: 0 0 var(--space-24);
}
.site-demo__caption .sl-h2 { font-size: var(--fs-26); }
.site-demo__caption p { flex: 1 1 var(--size-caption); margin: 0; font-size: var(--fs-13); color: var(--soft); }
.site-demo {
  display: grid; grid-template-columns: minmax(0, 1fr) var(--size-panel); gap: var(--space-28); align-items: start;
}
.site-demo .sl-frame { width: auto; }
.site-demo .sl-frame, .site-demo .sl-panel { box-shadow: var(--shadow-window); }
.site-demo__frame { border-radius: var(--radius-14); }
.site-demo__frame:has(.site-demo__page:focus-visible) {
  outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset);
}
.site-demo__url {
  margin-left: var(--space-12); padding: var(--space-1) var(--space-10); border-radius: var(--radius-pill);
  background: var(--panel-ink-3); color: var(--panel-muted); font-size: var(--fs-11);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* No cursor or font here: anything set on the page would be inherited by the sample and show up in its CSS. */
.site-demo__page { overflow: hidden; background: var(--frame-page); }
.site-demo__page:focus { outline: none; }
/* Overlay layer: hidden until something is selected. */
.site-demo__overlay { position: absolute; inset: 0; pointer-events: none; }
.site-demo__overlay[hidden] { display: none; }
.site-demo .sl-panel { width: auto; animation: none; }
.site-demo .sl-code { flex: none; height: calc(var(--size-code-min) * 5); }
/* Fixed room for the size and for two lines of font and colours, so a new selection (the visitor's or the tour's)
   never moves the code below it: the panel is in the first screen, where that would count as a layout shift. */
.site-demo .sl-panel__dim { min-width: 10ch; text-align: right; font-variant-numeric: tabular-nums; }
.site-demo .sl-panel__meta {
  align-content: flex-start;
  min-height: calc(var(--fs-12) * var(--lh-panel) * 2 + var(--space-4) + var(--space-9) * 2 + var(--border-hair));
}
.site-demo__help { max-width: none; margin: var(--space-16) 0 0; font-size: var(--fs-12); color: var(--soft); }
.site-demo__help .sl-kbd { margin: 0; }
/* The engine's hidden "browser defaults" iframe lives here. */
.site-demo__engine { position: relative; height: 0; overflow: hidden; }

/* ---------- Tour: the demo plays itself until the visitor takes over (assets/demo.mjs) ---------- */
/* A fixed width, so "Pause tour" ⇄ "Play tour" never moves anything; hidden (but holding its place) until the
   script is ready to drive it. */
.site-tour-toggle {
  flex: none; inline-size: 10em; margin-left: auto; padding: var(--space-6) 0; text-align: center;
  border: var(--border-hair) solid var(--panel-line); border-radius: var(--radius-pill);
  background: var(--panel-ink-3); color: var(--panel-text);
  font: var(--fw-600) var(--fs-12)/var(--lh-panel) var(--font-mono); cursor: pointer;
}
.site-tour-toggle:not(.is-ready) { visibility: hidden; }
.site-tour-toggle:hover { background: var(--panel-line); }
.site-tour-toggle:focus-visible { outline: var(--outline-focus-panel) solid var(--accent); outline-offset: var(--outline-offset); }
/* The tour's pointer: an arrow drawn with clip-path, positioned through the CSSOM. */
.site-cursor {
  position: absolute; top: 0; left: 0; width: var(--space-20); height: var(--space-20); pointer-events: none;
  background: var(--panel-ink);
  clip-path: polygon(0 0, 0 85%, 25% 65%, 42% 100%, 58% 93%, 42% 60%, 75% 60%);
  filter: drop-shadow(0 0 var(--space-1) var(--frame-page)) drop-shadow(0 var(--space-1) var(--space-2) var(--panel-ink));
  transition: transform var(--duration-700) var(--ease-out);
}
.site-cursor[hidden] { display: none; }
/* Only the three small overlay boxes and the tag glide, and only during the tour. */
.is-touring .site-demo__overlay .sl-hl, .is-touring .site-demo__overlay .sl-tag {
  transition:
    transform var(--duration-250) var(--ease-out),
    width var(--duration-250) var(--ease-out),
    height var(--duration-250) var(--ease-out);
}
.site-demo .sl-panel-btn--primary.is-flash { background: var(--accent-hover); transform: translateY(var(--space-1)); }

/* ---------- Steps: How it works ---------- */
.site-how { margin-top: var(--space-88); }
.site-steps { counter-reset: site-step; gap: var(--space-28) var(--space-40); }
.site-steps > li { counter-increment: site-step; }
.site-steps > li::before {
  content: counter(site-step); display: block; margin-bottom: var(--space-12);
  font: italic var(--fw-400) var(--fs-58)/var(--lh-none) var(--font-serif); color: var(--mark-ink);
}
.site-steps .sl-kbd { margin: 0; }

/* ---------- Section rhythm: four movements (see it · what it does · trust · buy) ---------- */
.site-main > .site-section { margin-top: var(--space-120); }
.site-main > .site-section--near { margin-top: var(--space-88); }
.site-section__head .sl-h2, .site-rail__head .sl-h2 { font-size: var(--fs-section); text-wrap: balance; }
.site-section .sl-lede { margin-top: var(--space-22); }

/* ---------- Features: sheets on the drafting table ---------- */
.site-features { gap: var(--space-24); margin-top: var(--space-36); }
.site-features > .sl-feature {
  padding: var(--space-22) var(--space-24) var(--space-26);
  border: var(--border-hair) solid var(--line); border-radius: var(--radius-14);
  background: var(--card); box-shadow: var(--shadow-sheet);
}
.sl-feature p { text-wrap: pretty; }
.sl-feature .sl-code-inline, .site-doc .sl-code-inline { -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- Comparison table (category vs category) ---------- */
.site-compare { margin-top: var(--space-36); }
.site-compare table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.site-compare th, .site-compare td {
  padding: var(--space-14) var(--space-16); text-align: left; vertical-align: top;
  border-bottom: var(--border-hair) solid var(--line);
}
.site-compare thead th {
  font-size: var(--fs-12); font-weight: var(--fw-400); letter-spacing: var(--ls-caps); text-transform: uppercase;
  color: var(--soft); border-bottom-color: var(--ink);
}
.site-compare tbody th { width: 18%; font-weight: var(--fw-600); }
.site-compare td { color: var(--soft); }
.site-compare tbody td { width: 26%; }
.site-compare tbody td.site-compare__us { width: 30%; }
/* The StyleLift column reads as selected, like the Pro card: ink edges (lime would vanish on light paper). */
.site-compare .site-compare__us {
  background: var(--card); color: var(--ink);
  box-shadow: inset var(--border-strong) 0 0 var(--ink), inset calc(var(--border-strong) * -1) 0 0 var(--ink);
}
.site-compare thead .site-compare__us {
  color: var(--ink); font-weight: var(--fw-600); border-radius: var(--radius-10) var(--radius-10) 0 0;
  box-shadow:
    inset var(--border-strong) 0 0 var(--ink), inset calc(var(--border-strong) * -1) 0 0 var(--ink),
    inset 0 var(--border-strong) 0 var(--ink);
}
.site-compare tbody tr:last-child .site-compare__us {
  border-radius: 0 0 var(--radius-10) var(--radius-10);
  box-shadow:
    inset var(--border-strong) 0 0 var(--ink), inset calc(var(--border-strong) * -1) 0 0 var(--ink),
    inset 0 calc(var(--border-strong) * -1) 0 var(--ink);
}
.site-compare thead .site-compare__us span {
  padding: var(--space-1) var(--space-8); border-radius: var(--radius-pill);
  background: var(--accent); color: var(--on-accent);
}

/* ---------- Heading rail: privacy and FAQ (heading left, content right on wide screens) ---------- */
.site-rail .sl-keys, .site-rail .sl-faq { margin-top: var(--space-26); }

/* ---------- Pricing: one card across the wide track ---------- */
.site-pricing { padding: var(--space-40); box-shadow: var(--shadow-sheet); }
/* No price figure on its own: the price is highlighted inside the pricing sentence, set larger here. */
.site-pricing .site-pricing__line {
  max-width: var(--size-measure); margin: var(--space-22) 0 0; color: var(--ink); font-size: var(--fs-17); line-height: var(--lh-body);
}
.site-pricing__line .site-price { padding: var(--space-2) var(--space-10); }
.site-pricing .sl-card__actions .sl-fine { margin: 0; }
.site-pricing__final { margin: var(--space-22) 0 0; }

/* A link that isn't live yet ("Coming soon"): a disabled Button/BrowserBadge, not a busy one. */
.sl-button[aria-disabled="true"], .sl-badge[aria-disabled="true"] { cursor: default; }

/* ---------- Closing band ---------- */
.site-band--close { margin-top: var(--space-120); padding-block: var(--space-88); }
.site-close__title { font-size: var(--fs-section); }
.site-band--close .site-priceline { margin: var(--space-26) 0 var(--space-26); }

/* ---------- Footer on the wide track ---------- */
.site-footer {
  width: min(var(--size-wide), 100% - var(--size-gutter) * 2); margin: var(--space-72) auto 0;
  padding-top: var(--space-28); border-top: var(--border-hair) solid var(--line);
}
.site-footer nav a { padding-block: var(--space-4); }

/* ---------- Doc pages: privacy, terms, changelog, help, activation, Safari, guides ---------- */
.site-doc { max-width: var(--size-doc); padding-top: var(--space-56); }
.site-doc .doc-title { margin: 0 0 var(--space-12); }
.site-doc .doc-meta { margin: 0; color: var(--soft); }
.site-doc .doc-heading .sl-pill { margin-left: var(--space-8); font-family: var(--font-mono); vertical-align: middle; }
.site-doc .doc-heading {
  margin: var(--space-44) 0 var(--space-8); padding-top: var(--space-24); border-top: var(--border-hair) solid var(--line);
}
/* Version numbers in the mono face: the serif's 1 reads as l ("l.l.0"). */
.site-version { font: var(--fw-400) var(--fs-26)/var(--lh-title) var(--font-mono); letter-spacing: 0; }
.site-doc p, .site-doc li { color: var(--soft); }
.site-doc strong { color: var(--ink); font-weight: var(--fw-600); }
.site-doc ul { padding-left: var(--space-22); }
.site-doc li + li { margin-top: var(--space-6); }
.site-doc .sl-banner { margin: var(--space-28) 0 0; }
.site-doc .sl-banner p, .site-doc .sl-banner strong { color: var(--on-accent); margin: 0; }
.site-doc .sl-keys dd { color: var(--soft); }
/* Guides, help, activation and the Safari page: steps, sub-headings, code, pictures and one table. */
.site-doc ol { padding-left: var(--space-22); }
.site-doc .doc-subheading {
  margin: var(--space-36) 0 var(--space-8); color: var(--ink);
  font: var(--fw-600) var(--fs-16)/var(--lh-heading) var(--font-mono);
}
.site-doc .sl-eyebrow { margin-bottom: var(--space-12); }
.site-doc .sl-lede { margin-top: var(--space-16); }
.site-doc__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-12) var(--space-16); margin: var(--space-24) 0; }
.site-doc .site-priceline { margin: var(--space-24) 0 0; }
.site-doc .site-price { color: var(--on-accent); }
/* Long inline code (a Console expression) breaks rather than widening a phone screen. */
.site-doc .sl-code-inline { overflow-wrap: anywhere; }
/* Code blocks are the panel's code view (sl-code) as a block; they scroll sideways rather than wrap. */
.site-code {
  min-height: 0; margin: var(--space-16) 0 0; padding: var(--space-16) var(--space-18);
  border-radius: var(--radius-10); font-size: var(--fs-13); white-space: pre; tab-size: 2;
}
.site-code + .site-code { margin-top: var(--space-10); }
.site-code code { font: inherit; }
.site-code:focus-visible { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset); }
.site-figure { margin: var(--space-20) 0 var(--space-8); }
.site-figure img {
  display: block; width: 100%; height: auto; border-radius: var(--radius-14);
  border: var(--border-hair) solid var(--line); box-shadow: var(--shadow-card);
}
.site-figure figcaption { margin-top: var(--space-10); font-size: var(--fs-13); color: var(--soft); }
.site-doc__table {
  margin-top: var(--space-16); padding: var(--space-8) var(--space-18) var(--space-4); overflow-x: auto;
  background: var(--card); border: var(--border-hair) solid var(--line); border-radius: var(--radius-14);
}
.site-doc__table:focus-visible { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset); }
.site-doc table { width: 100%; border-collapse: collapse; font-size: var(--fs-13); }
.site-doc caption { padding: var(--space-8) 0; text-align: left; color: var(--soft); }
.site-doc th, .site-doc td {
  padding: var(--space-10) var(--space-12) var(--space-10) 0; border-bottom: var(--border-hair) solid var(--line);
  text-align: left; vertical-align: top;
}
.site-doc tbody tr:last-child > * { border-bottom: 0; }
.site-doc thead th { color: var(--soft); font-weight: var(--fw-400); }
.site-doc tbody th { color: var(--ink); font-weight: var(--fw-600); }
.site-doc td { color: var(--soft); }
/* The guides: on /guides/, and as "More guides" under each one. */
.site-doc .site-guides { margin: var(--space-28) 0 0; padding: 0; list-style: none; }
.site-doc .site-guide + .site-guide { margin-top: 0; }
.site-guide { padding: var(--space-20) 0; border-top: var(--border-hair) solid var(--line); }
.site-guide:last-child { border-bottom: var(--border-hair) solid var(--line); }
.site-guide__link {
  font: var(--fw-400) var(--fs-26)/var(--lh-title) var(--font-serif); color: var(--ink);
  text-decoration: none; text-underline-offset: var(--underline-offset);
}
.site-guide__link:hover { text-decoration: underline; }
.site-guide__link:focus-visible { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset); }
.site-guide__desc { margin: var(--space-6) 0 0; }
/* "On this page": only where there's room beside the 680px text (see Responsive). */
.site-toc { display: none; }
.site-toc__title {
  margin: 0 0 var(--space-12); font-size: var(--fs-12); letter-spacing: var(--ls-caps); text-transform: uppercase; color: var(--soft);
}
.site-toc ol { margin: 0; padding: 0 0 0 var(--space-16); list-style: none; border-left: var(--border-hair) solid var(--line); }
.site-toc li + li { margin-top: var(--space-2); }
.site-toc__link {
  display: block; padding-block: var(--space-4); font-size: var(--fs-13); color: var(--soft);
  text-decoration: none; text-underline-offset: var(--underline-offset);
}
.site-toc__link:hover { color: var(--ink); text-decoration: underline; }
.site-toc__link:focus-visible { outline: var(--outline-focus) solid var(--focus); outline-offset: var(--outline-offset); }

/* ---------- 404 ---------- */
.site-404 { padding: var(--space-76) 0 var(--space-44); }
.site-404 .sl-includes { max-width: var(--size-measure); }

/* ---------- Motion ---------- */
/* The hero rises without fading: its headline and lede are visible from the first paint (an opacity fade would
   delay the largest paint). The global reduced-motion rule in components.css switches it off. */
.site-hero > * { animation-name: site-rise; }
@keyframes site-rise { from { transform: translateY(var(--space-10)); } }

@media (prefers-reduced-motion: no-preference) {
  /* Section heads, feature sheets and steps rise into place as they scroll in. Pure CSS: without scroll-driven
     animations (or with reduced motion) they are simply there. Never on prices, the comparison table, policy text
     or FAQ answers. */
  @supports (animation-timeline: view()) {
    .site-reveal {
      animation: site-reveal linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes site-reveal { from { opacity: 0.01; transform: translateY(var(--space-12)); } }
@keyframes site-hairline { from { border-bottom-color: transparent; } }

/* ---------- Responsive ---------- */
/* Wide screens: the header stays at the top; on the home page its hairline appears once the page moves under it. */
@media (min-width: 601px) {
  html { scroll-padding-top: var(--space-88); }
  .site-header {
    position: sticky; top: 0; z-index: 10;
    background-color: var(--paper);
    background-color: color-mix(in srgb, var(--paper) 88%, transparent);
    -webkit-backdrop-filter: blur(var(--space-10)); backdrop-filter: blur(var(--space-10));
  }
  /* Home page only: the doc pages don't move at all. */
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .site-home .site-header { animation: site-hairline linear both; animation-timeline: scroll(); animation-range: 0 var(--space-80); }
    }
  }
}

@media (min-width: 1001px) {
  .site-hero__row {
    display: grid; grid-template-columns: minmax(0, var(--size-measure)) minmax(0, 1fr);
    gap: var(--space-28) var(--space-56); align-items: start;
  }
  .site-hero__row .sl-lede { font-size: var(--fs-16); }
  .site-hero__buy { margin: 0; }

  /* Side by side, the panel is exactly as tall as the frame: contain: size keeps the code from growing the row. */
  .site-demo { align-items: stretch; }
  .site-demo > .sl-instrument { display: flex; contain: size; }
  .site-demo .sl-panel { flex: 1; min-width: 0; }
  .site-demo .sl-code { flex: 1 1 0; height: auto; min-height: var(--size-code-min); }

  .site-rail {
    display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 0 var(--space-56); align-items: start;
  }
  .site-rail__head { position: sticky; top: var(--space-120); }
  .site-rail .sl-keys, .site-rail .sl-faq { margin-top: 0; }

  .site-pricing {
    display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-28) var(--space-56); align-items: start;
  }
  .site-pricing > .sl-includes { margin-top: 0; }
}

@media (min-width: 1200px) {
  .site-docpage {
    display: grid; grid-template-columns: minmax(0, var(--size-doc)) minmax(0, 1fr); gap: 0 var(--space-72); align-items: start;
  }
  .site-toc { display: block; position: sticky; top: var(--space-120); max-width: var(--size-keys-col); margin-top: var(--space-120); }
}

@media (max-width: 1000px) {
  .site-demo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 600px) {
  .site-hero { padding-top: var(--space-40); }
  .site-header .sl-nav { gap: var(--space-4) var(--space-16); }
  .site-band--stage { padding-block: var(--space-40) var(--space-56); }
  .site-tour-toggle { margin-left: 0; }
  .site-how { margin-top: var(--space-56); }
  .site-main > .site-section { margin-top: var(--space-72); }
  .site-main > .site-section--near { margin-top: var(--space-56); }
  .site-demo .sl-code { height: calc(var(--size-code-min) * 4); }
  .site-demo .sl-panel-btn kbd { display: none; }
  /* Steps: the numeral beside the text, not above it. */
  .site-steps > li { display: grid; grid-template-columns: var(--space-36) minmax(0, 1fr); column-gap: var(--space-12); }
  .site-steps > li::before { grid-row: 1 / span 2; margin: 0; font-size: var(--fs-44); }
  .site-steps > li > * { grid-column: 2; }
  .site-pricing .site-pricing__line { font-size: var(--fs-15); }
  .site-pricing { padding: var(--space-22); }
  .site-band--close { margin-top: var(--space-72); padding-block: var(--space-56); }

  /* Features: a hairline list, not sheets, to keep the page short on a phone. */
  .site-features { gap: var(--space-22); }
  .site-features > .sl-feature {
    padding: var(--space-14) 0 0; border: 0; border-top: var(--border-hair) solid var(--line);
    border-radius: 0; background: none; box-shadow: none;
  }

  /* The comparison table becomes one card per row. Roles in the markup keep the table semantics. */
  .site-compare table, .site-compare tbody, .site-compare tr, .site-compare th, .site-compare td { display: block; }
  .site-compare thead {
    position: absolute; width: var(--space-1); height: var(--space-1); overflow: hidden; clip-path: inset(50%);
  }
  .site-compare tbody tr { padding: var(--space-14) 0; border-bottom: var(--border-hair) solid var(--line); }
  .site-compare tbody th, .site-compare td { width: auto; padding: var(--space-4) 0; border: 0; }
  .site-compare tbody td.site-compare__us { width: auto; }
  .site-compare tbody th { padding-bottom: var(--space-8); }
  .site-compare td::before {
    content: attr(data-label) ": "; color: var(--soft); font-size: var(--fs-12);
  }
  .site-compare td.site-compare__us, .site-compare tbody tr:last-child .site-compare__us {
    margin-top: var(--space-6); padding: var(--space-8) var(--space-10); border-radius: var(--radius-8);
    box-shadow: inset 0 0 0 var(--border-hair) var(--ink);
  }
}

/* Touch screens: full-size targets for the demo's Copy buttons. */
@media (pointer: coarse) {
  .site-demo .sl-panel-btn { min-height: var(--size-control); }
}