/* SmallModern components — design system v2.1.
   Components read brand tokens (--rs-*), sub-style settings (--rs-x-*) and surface roles
   (--rs-surface, --rs-fg, --rs-fg-2, --rs-fg-3, --rs-rule, --rs-fg-accent, --rs-cta-*,
   --rs-focus) from tokens.css. Nothing here names a colour, a font or a brand.

   Surfaces: anything that paints a dark, brand or highlight ground (.sm-band--night,
   .sm-footer, .sm-on-dark, .sm-band--brand, .sm-band--hi…) re-declares the surface roles,
   so text, links, labels, pills and the primary button adapt on their own. Anything that
   paints its own light ground (cards, dialogs, notices, tables…) re-establishes the page
   roles, so a card inside a dark band stays readable.

   Layers: sm.tokens < sm.base < sm.components < sm.page. Page files (/css/pages/*.css) put
   one-page layout in sm.page; anything a second page needs belongs here instead. */

@layer sm.tokens, sm.base, sm.components, sm.page;

@layer sm.base {
  .sm-root, .sm-root *, .sm-root *::before, .sm-root *::after { box-sizing: border-box; }

  /* [hidden] always wins: journey pages hide protected controls with it. */
  .sm-root [hidden]:not([hidden="until-found"]) { display: none !important; }

  .sm-root {
    position: relative;
    margin: 0;
    color-scheme: light;
    font-family: var(--rs-font-sans);
    font-size: var(--rs-step-0);
    line-height: var(--rs-leading-body);
    color: var(--rs-fg);
    background: var(--rs-texture-layer), var(--rs-bg);   /* the paper tooth (Notebook) sits on grounds, never on cards */
    font-optical-sizing: auto;
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  /* A nested brand scope (compare columns) re-dresses its own base styles. */
  .sm-root [data-brand] { font-family: var(--rs-font-sans); font-size: var(--rs-step-0); color: var(--rs-fg); background: var(--rs-texture-layer), var(--rs-bg); }

  .sm-root :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd, pre) { margin: 0; }

  .sm-root :where(h1, h2, h3, h4, .sm-h) {
    font-family: var(--rs-x-heading-font);
    font-weight: var(--rs-x-heading-weight);
    letter-spacing: var(--rs-x-heading-tracking);
    line-height: var(--rs-x-heading-lh, var(--rs-leading-tight));
    font-variation-settings: var(--rs-x-heading-vf, normal);
    text-wrap: balance;
  }
  /* Bare headings keep a hierarchy even when a reset sets font-size: inherit. */
  .sm-root :where(h1) { font-size: var(--rs-step-5); }
  .sm-root :where(h2) { font-size: var(--rs-step-3); }
  .sm-root :where(h3) { font-size: var(--rs-step-2); }
  .sm-root :where(h4) { font-size: var(--rs-step-1); }
  .sm-root :where(p, li) { text-wrap: pretty; }

  .sm-root :where(a) {
    color: inherit;
    text-decoration-thickness: max(1px, 0.08em);
    text-underline-offset: 0.2em;
    text-decoration-color: color-mix(in oklch, currentColor 70%, transparent);   /* ≥3:1 against the page */
    transition: text-decoration-color var(--rs-duration) var(--rs-ease);
  }
  .sm-root :where(a):hover { text-decoration-color: currentColor; }
  .sm-root :where(button) { font: inherit; color: inherit; }
  .sm-root :where(code, kbd, samp, pre) { font-family: var(--rs-font-mono); font-size: 0.9em; }

  /* Two-ring focus: a halo in the surface colour, then the ring, so it survives on CTAs and dark fields. */
  .sm-root :focus-visible {
    outline: 3px solid var(--rs-focus);
    outline-offset: 2px;
    box-shadow: 0 0 0 2px var(--rs-focus-halo);
  }
  .sm-root ::selection { background: var(--rs-marker); color: var(--rs-ink); }
  .sm-root img { max-width: 100%; height: auto; display: block; }

  /* Extra-large screens: everything is sized in rem, so raising the root size scales type,
     spacing and the content column together (1920px ≈ a 1440 layout at 112.5%; 2560px and up,
     including ultrawide and 50–67% zoom, at 125%). Media queries in em use the browser's default
     16px, so these thresholds don't move when the root size does. */
  @media (min-width: 120em) { :root:has(> body.sm-root) { font-size: 112.5%; } }
  @media (min-width: 160em) { :root:has(> body.sm-root) { font-size: 125%; } }

  /* Scroll reveal: /js/scripts.js adds .is-visible. Only when scripts run and motion is welcome,
     so nothing stays hidden without JavaScript. */
  @media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
    .sm-root [data-reveal] { transition: opacity 600ms var(--rs-ease) var(--rs-reveal-delay, 0ms), translate 600ms var(--rs-ease) var(--rs-reveal-delay, 0ms); }
    .sm-root [data-reveal]:not(.is-visible) { opacity: 0; translate: 0 0.75rem; }
  }

  @media (prefers-reduced-motion: reduce) {
    .sm-root *, .sm-root *::before, .sm-root *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  }
}

@layer sm.components {
  /* ── Surfaces ─────────────────────────────────────────────── */
  /* Light islands re-establish the page roles on their own ground. */
  :where(.sm-card, .sm-price-card, .sm-next-step, .sm-notice, .sm-testimonial, .sm-table-wrap, .sm-dialog, .sm-compare__item, .sm-prompt, .sm-media, .sm-choice--consent, .sm-prose blockquote) {
    --rs-fg: var(--rs-ink); --rs-fg-2: var(--rs-ink-2); --rs-fg-3: var(--rs-ink-3); --rs-fg-bad: var(--rs-bad);
    --rs-rule: var(--rs-line); --rs-rule-strong: var(--rs-line-strong);
    --rs-fg-accent: var(--rs-x-accent);
    --rs-cta-bg: var(--rs-x-cta-bg); --rs-cta-fg: var(--rs-x-cta-fg); --rs-cta-hover: var(--rs-x-cta-hover); --rs-cta-border: var(--rs-x-cta-border); --rs-cta-press: var(--rs-x-cta-press);
    --rs-focus: var(--rs-focus-ring); --rs-focus-halo: var(--rs-surface);
    color: var(--rs-fg);
  }
  /* Dark grounds: bands, the footer, toasts and anything marked .sm-on-dark. */
  /* A nested sub-style scope inside a band keeps the band's roles (it paints no ground of its own). */
  .sm-on-dark, .sm-band--night, .sm-footer, .sm-toast, :is(.sm-on-dark, .sm-band--night, .sm-footer) [data-expression]:not([data-brand], :where(.sm-card, .sm-price-card, .sm-next-step, .sm-notice, .sm-testimonial, .sm-table-wrap, .sm-dialog, .sm-compare__item, .sm-prompt, .sm-media, .sm-choice--consent, .sm-prose blockquote), :where(.sm-card, .sm-price-card, .sm-next-step, .sm-notice, .sm-testimonial, .sm-table-wrap, .sm-dialog, .sm-compare__item, .sm-prompt, .sm-media, .sm-choice--consent, .sm-prose blockquote) *) {
    --rs-surface: var(--rs-dark);
    --rs-fg: var(--rs-dark-fg); --rs-fg-2: var(--rs-dark-fg-2); --rs-fg-3: var(--rs-dark-fg-2); --rs-fg-bad: var(--rs-dark-bad);
    --rs-rule: color-mix(in oklch, var(--rs-dark-fg) 18%, transparent); --rs-rule-strong: color-mix(in oklch, var(--rs-dark-fg) 40%, transparent);
    --rs-fg-accent: var(--rs-dark-accent);
    --rs-cta-bg: var(--rs-dark-cta-bg); --rs-cta-fg: var(--rs-dark-cta-fg); --rs-cta-hover: var(--rs-dark-cta-hover); --rs-cta-border: transparent; --rs-cta-press: var(--rs-dark-cta-press);
    --rs-focus: var(--rs-focus-on-dark); --rs-focus-halo: var(--rs-dark);
    color: var(--rs-fg);
  }
  /* The brand colour as a ground. */
  .sm-band--brand, .sm-on-brand, :is(.sm-band--brand, .sm-on-brand) [data-expression]:not([data-brand], :where(.sm-card, .sm-price-card, .sm-next-step, .sm-notice, .sm-testimonial, .sm-table-wrap, .sm-dialog, .sm-compare__item, .sm-prompt, .sm-media, .sm-choice--consent, .sm-prose blockquote), :where(.sm-card, .sm-price-card, .sm-next-step, .sm-notice, .sm-testimonial, .sm-table-wrap, .sm-dialog, .sm-compare__item, .sm-prompt, .sm-media, .sm-choice--consent, .sm-prose blockquote) *) {
    --rs-surface: var(--rs-brand);
    --rs-fg-bad: var(--rs-bg);
    --rs-fg: var(--rs-bg); --rs-fg-2: color-mix(in oklch, var(--rs-bg) 84%, var(--rs-brand)); --rs-fg-3: color-mix(in oklch, var(--rs-bg) 84%, var(--rs-brand));
    --rs-rule: color-mix(in oklch, var(--rs-bg) 22%, transparent); --rs-rule-strong: color-mix(in oklch, var(--rs-bg) 45%, transparent);
    --rs-fg-accent: var(--rs-on-brand-accent);
    --rs-cta-bg: var(--rs-bg); --rs-cta-fg: var(--rs-brand-deep); --rs-cta-hover: var(--rs-bg-2); --rs-cta-border: transparent; --rs-cta-press: var(--rs-brand-deep);
    --rs-focus: var(--rs-focus-on-dark); --rs-focus-halo: var(--rs-brand);
    color: var(--rs-fg);
  }
  /* The highlight colour as a ground: the loud button turns to ink so it never matches the band. */
  .sm-band--hi, .sm-band--hi [data-expression]:not([data-brand], :where(.sm-card, .sm-price-card, .sm-next-step, .sm-notice, .sm-testimonial, .sm-table-wrap, .sm-dialog, .sm-compare__item, .sm-prompt, .sm-media, .sm-choice--consent, .sm-prose blockquote), :where(.sm-card, .sm-price-card, .sm-next-step, .sm-notice, .sm-testimonial, .sm-table-wrap, .sm-dialog, .sm-compare__item, .sm-prompt, .sm-media, .sm-choice--consent, .sm-prose blockquote) *) {
    --rs-surface: var(--rs-hi);
    --rs-fg: var(--rs-hi-fg); --rs-fg-2: var(--rs-ink-2); --rs-fg-3: var(--rs-ink-2); --rs-fg-bad: var(--rs-ink);
    --rs-fg-accent: var(--rs-brand-deep);
    --rs-cta-bg: var(--rs-ink); --rs-cta-fg: var(--rs-hi); --rs-cta-hover: var(--rs-brand-deep); --rs-cta-border: transparent; --rs-cta-press: var(--rs-hi-press);
    --rs-focus-halo: var(--rs-hi);
    color: var(--rs-fg);
  }
  .sm-band--tint { --rs-surface: var(--rs-x-surface-2); --rs-focus-halo: var(--rs-x-surface-2); }

  /* ── Layout ───────────────────────────────────────────────── */
  .sm-container { inline-size: 100%; max-inline-size: var(--rs-width-content); margin-inline: auto; }
  .sm-container--wide { max-inline-size: var(--rs-width-wide); }
  .sm-container--reading { max-inline-size: var(--rs-width-reading); }
  .sm-stack { display: grid; gap: var(--rs-stack-gap, var(--rs-space-4)); align-content: start; }
  .sm-stack--tight { --rs-stack-gap: var(--rs-space-2); }
  .sm-stack--loose { --rs-stack-gap: var(--rs-space-6); }
  .sm-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-cluster-gap, var(--rs-space-3)); }
  .sm-grid { display: grid; gap: var(--rs-grid-gap, var(--rs-space-5)); grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rs-grid-min, 16rem)), 1fr)); align-items: start; }
  .sm-split { display: grid; gap: var(--rs-space-6) var(--rs-space-7); align-items: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
  .sm-split--reverse > :first-child { order: 2; }

  /* ── Utilities ────────────────────────────────────────────── */
  .sm-visually-hidden { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sm-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }   /* the page's inline icon symbols (scripts/inline-icons.mjs) */
  .sm-skip-link {
    position: absolute; inset-block-start: var(--rs-space-2); inset-inline-start: var(--rs-space-2); z-index: 30;   /* above .sm-header--sticky */
    padding: max(var(--rs-space-2), (var(--rs-target) - 1lh) / 2) var(--rs-space-4); border-radius: var(--rs-radius-s);
    background: var(--rs-ink); color: var(--rs-bg); font-weight: var(--rs-ui-weight); text-decoration: none;
    transform: translateY(calc(-100% - var(--rs-space-4)));
  }
  .sm-skip-link:focus-visible { transform: none; }
  .sm-pattern { background: var(--rs-pattern), var(--rs-surface); }   /* --rs-pattern is a list of background layers with their own sizes */
  .sm-texture { background-image: var(--rs-texture); background-size: var(--rs-texture-size); }

  /* ── Text roles ───────────────────────────────────────────── */
  .sm-display { font-size: var(--rs-step-6); }
  .sm-title { font-size: var(--rs-step-5); }
  .sm-heading { font-size: var(--rs-step-3); }
  .sm-subheading { font-size: var(--rs-step-2); }
  .sm-lead { font-size: var(--rs-step-1); color: var(--rs-fg-2); max-inline-size: var(--rs-measure-narrow); }
  .sm-small { font-size: var(--rs-step--1); }
  .sm-muted { color: var(--rs-fg-2); }
  .sm-body { font-size: var(--rs-x-body-size); }

  .sm-label {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
    font-family: var(--rs-label-font);
    font-size: var(--rs-step--2);
    font-weight: var(--rs-label-weight);
    letter-spacing: var(--rs-label-tracking);
    text-transform: var(--rs-label-transform);
    color: var(--rs-fg-accent);
  }
  .sm-label::before {
    content: "";
    display: var(--rs-label-before-display);
    inline-size: var(--rs-label-before-w);
    block-size: var(--rs-label-before-h);
    border-radius: var(--rs-label-before-radius);
    background: var(--rs-label-before-bg);
    flex: none;
    align-self: flex-start;
    margin-block-start: calc((1lh - var(--rs-label-before-h)) / 2);   /* stays on the first line when a label wraps */
  }
  :where(.sm-card, .sm-price-card, .sm-next-step) .sm-label::before { display: var(--rs-card-label-before-display); }
  :is(.sm-band--tint, .sm-card--tint, .sm-testimonial) .sm-label::before { background: var(--rs-label-before-bg-tint); }
  :is(.sm-band--brand, .sm-on-brand) .sm-label::before { background: currentColor; }   /* never a red dot on the brand colour */
  .sm-label--plain::before { display: none; }
  .sm-label__idx { display: var(--rs-label-idx-display); font-variant-numeric: tabular-nums; }
  .sm-label__idx::after { content: "\2002"; }

  /* Section rule: a hairline with the label sitting on it. */
  .sm-rule { display: flex; align-items: center; gap: var(--rs-space-3); }
  .sm-rule::after { content: ""; flex: 1; border-block-start: var(--rs-border) solid var(--rs-rule-strong); }

  /* Section head: label + h2 + lead. Renders each option's device on its own:
     Notebook's label runs into a hairline, The Plan numbers itself (01, 02…) and rules
     the heading, Main Street underlines it. Numbering restarts per page (.sm-root, .sm-page). */
  :where(.sm-root, .sm-page) { counter-reset: rs-section; }
  .sm-section-head { display: grid; gap: var(--rs-space-3); counter-increment: rs-section; }
  .sm-section-head > .sm-label { display: flex; }
  .sm-section-head > .sm-label::after { content: ""; display: var(--rs-section-rule-display); flex: 1; min-inline-size: 2rem; align-self: flex-start; margin-block-start: calc((1lh - var(--rs-border)) / 2); border-block-start: var(--rs-border) solid var(--rs-rule-strong); }
  .sm-section-head .sm-label__idx:empty::before { content: counter(rs-section, decimal-leading-zero); }
  .sm-section-head > .sm-lead { max-inline-size: var(--rs-measure); }

  .sm-h2, .sm-prose > h2 { position: relative; padding-block-start: var(--rs-h2-pad, 0); border-block-start: var(--rs-h2-rule); }
  :is(.sm-h2, .sm-prose > h2)::after {
    content: "";
    display: var(--rs-h2-underline-display);
    inline-size: 2.5em;
    block-size: 3px;
    margin-block-start: 0.35em;
    border-radius: 999px;
    background: var(--rs-fg-accent);
  }

  /* The option's highlight device: Notebook's marker, The Plan's signal underline, Main Street's forest underline. */
  :is(.sm-band--tint, .sm-card--tint, .sm-testimonial) { --rs-marker-bg: var(--rs-highlight-bg-tint); }
  :where(.sm-card:not(.sm-card--tint), .sm-price-card, .sm-dialog, .sm-notice) { --rs-marker-bg: initial; }
  .sm-marker, .sm-root :where(mark) {
    color: inherit;
    background: var(--rs-marker-bg, var(--rs-highlight-bg));
    padding-inline: var(--rs-highlight-pad);
    margin-inline: calc(var(--rs-highlight-pad) * -1);
    border-radius: var(--rs-highlight-radius);
    text-decoration: var(--rs-highlight-decoration);
    text-decoration-thickness: var(--rs-highlight-thickness);
    text-underline-offset: var(--rs-highlight-offset);
    text-decoration-color: var(--rs-highlight-color);
    text-decoration-skip-ink: var(--rs-highlight-skip-ink);
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
  }
  /* On dark, brand and highlight grounds every option switches to an underline in the surface accent. */
  :is(.sm-on-dark, .sm-band--night, .sm-footer, .sm-band--brand, .sm-on-brand, .sm-band--hi) :is(.sm-marker, mark):not(:where(.sm-card, .sm-price-card, .sm-next-step, .sm-notice, .sm-testimonial, .sm-table-wrap, .sm-dialog, .sm-compare__item, .sm-prompt) *) {
    background: none; padding-inline: 0; margin-inline: 0;
    text-decoration: underline; text-decoration-thickness: max(3px, 0.12em); text-underline-offset: 0.16em; text-decoration-color: var(--rs-fg-accent);
  }

  .sm-numeral {
    display: inline-block;
    font-family: var(--rs-numeral-font);
    font-size: var(--rs-step-numeral);
    font-weight: var(--rs-numeral-weight);
    line-height: var(--rs-numeral-lh);
    letter-spacing: var(--rs-numeral-tracking);
    color: var(--rs-x-numeral-color);
    font-variation-settings: var(--rs-numeral-vf);
    font-variant-numeric: lining-nums;
    border: var(--rs-numeral-border);
    border-block-end: var(--rs-numeral-rule);
    padding: var(--rs-numeral-pad);
    text-box: var(--rs-numeral-trim);   /* Notebook: the numeral sits on its hairline */
    position: relative;
  }
  .sm-numeral[data-caption]::before {
    content: attr(data-caption);
    display: var(--rs-numeral-caption-display);
    margin-block-end: 0.35rem;
    font: 700 var(--rs-step--2) / 1 var(--rs-numeral-caption-font);
    letter-spacing: 0.1em;
    color: var(--rs-fg-2);
    text-transform: uppercase;
    white-space: nowrap;   /* in flow, so the box grows to fit it on phones instead of wrapping over the glyph */
  }

  .sm-wordmark {
    display: inline-block;   /* not flex: "Small" and <b>Modern</b> stay one word for screen readers and copy-paste */
    font-family: var(--rs-wordmark-font);
    font-weight: var(--rs-wordmark-weight);
    letter-spacing: var(--rs-wordmark-tracking);
    text-transform: var(--rs-wordmark-transform);
    color: var(--rs-fg);
    text-decoration: none;
  }
  .sm-wordmark b { margin-inline-start: 0.05em; color: var(--rs-wordmark-accent); font-weight: inherit; }
  .sm-wordmark > [aria-hidden="true"] { color: var(--rs-wordmark-accent); }   /* the arrow in "smallmodern ↗" */
  :is(.sm-on-dark, .sm-band--night, .sm-footer, .sm-band--brand, .sm-on-brand) .sm-wordmark :is(b, [aria-hidden="true"]) { color: var(--rs-fg-accent); }
  .sm-mark { color: var(--rs-logo-body); }   /* the symbol reads --rs-logo-radius and --rs-logo-dot directly */

  .sm-icon { inline-size: 1.1em; block-size: 1.1em; flex: none; vertical-align: -0.15em; }
  .sm-icon--lg { inline-size: 1.6rem; block-size: 1.6rem; }

  /* ── Buttons ──────────────────────────────────────────────── */
  .sm-btn {
    --rs-btn-bg: var(--rs-cta-bg);
    --rs-btn-fg: var(--rs-cta-fg);
    --rs-btn-hover: var(--rs-cta-hover);
    --rs-btn-border: var(--rs-cta-border);
    --rs-btn-radius: var(--rs-x-cta-radius);
    --rs-btn-press-color: var(--rs-cta-press);   /* the press / hard shadow takes its colour from the surface */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rs-space-2);
    min-block-size: var(--rs-btn-min-h);
    padding: 0.7em 1.35em;
    border: 1.5px solid var(--rs-btn-border);
    border-radius: var(--rs-btn-radius);
    background: var(--rs-btn-bg);
    color: var(--rs-btn-fg);
    font: var(--rs-btn-weight) var(--rs-step-0) / 1.2 var(--rs-font-sans);
    letter-spacing: var(--rs-btn-tracking);
    text-transform: var(--rs-btn-transform);
    text-align: center;
    text-wrap: balance;
    text-decoration: none;
    /* Every state draws the same two-shadow list (a glow slot, then the press), so the browser
       only ever moves one shadow's values and never cross-fades one list into another: that
       swap is what made the pills wobble like jelly on hover. In Main Street the glow slot stays
       clear and the press doesn't move on hover, so hover changes the fill colour and nothing
       else; the press itself (:active) keeps its own easing. */
    box-shadow: 0 0 0 transparent, var(--rs-x-press-x) var(--rs-x-press-y) 0 var(--rs-btn-press-color);
    cursor: pointer;
    transition: background-color var(--rs-duration-quick) ease-out, transform var(--rs-duration) var(--rs-ease), box-shadow var(--rs-duration) var(--rs-ease);
  }
  .sm-btn:where(:not(:disabled, [aria-disabled="true"])):hover { background: var(--rs-btn-hover); box-shadow: var(--rs-x-btn-hover-shadow), var(--rs-x-press-x-hover) var(--rs-x-press-y-hover) 0 var(--rs-btn-press-color); }
  @media (hover: hover) {
    .sm-btn:where(:not(:disabled, [aria-disabled="true"])):hover { transform: var(--rs-x-btn-hover-transform); }
  }
  .sm-btn:where(:not(:disabled, [aria-disabled="true"])):active { transform: var(--rs-x-btn-active-transform); box-shadow: 0 0 0 transparent, calc(var(--rs-x-press-x) / 2) calc(var(--rs-x-press-y) / 2) 0 var(--rs-btn-press-color); }
  .sm-btn:focus-visible { box-shadow: 0 0 0 2px var(--rs-focus-halo), var(--rs-x-press-x) var(--rs-x-press-y) 0 var(--rs-btn-press-color); }
  .sm-btn:is(:disabled, [aria-disabled="true"]) { --rs-btn-bg: var(--rs-bg-2); --rs-btn-fg: var(--rs-ink-3); --rs-btn-border: var(--rs-line-strong); cursor: not-allowed; transform: none; box-shadow: 0 0 0 transparent, 0 0 0 transparent; }
  /* Quiet variants never carry a press or shadow. The offer's hard shadow (The Plan) and sun
     press (Notebook) belong to the primary button; secondary actions keep only the brand's
     resting press (Main Street's pill press, which is part of the button's shape). */
  .sm-btn--hi, :is(.sm-dialog, .sm-next-step) .sm-btn { --rs-x-press-x: 0px; --rs-x-press-y: var(--rs-btn-rest-press); --rs-x-press-x-hover: 0px; --rs-x-press-y-hover: var(--rs-btn-rest-press-hover); }
  .sm-btn.sm-btn--sm { --rs-x-press-x: 0px; --rs-x-press-y: var(--rs-btn-rest-press); --rs-x-press-x-hover: 0px; --rs-x-press-y-hover: var(--rs-btn-rest-press); --rs-x-btn-hover-shadow: 0 0 0 transparent; --rs-x-btn-hover-transform: none; --rs-x-btn-active-transform: translateY(calc(var(--rs-btn-rest-press) / 2)); }   /* pressed, the fill drops by exactly the ledge it loses */
  .sm-btn:is(.sm-btn--secondary, .sm-btn--ghost, .sm-btn--on-dark) { --rs-x-press-x: 0px; --rs-x-press-y: 0px; --rs-x-press-x-hover: 0px; --rs-x-press-y-hover: 0px; --rs-x-btn-hover-shadow: 0 0 0 transparent; --rs-x-btn-hover-transform: none; --rs-x-btn-active-transform: none; }
  .sm-btn--secondary { --rs-btn-bg: transparent; --rs-btn-fg: var(--rs-fg); --rs-btn-hover: color-mix(in oklch, var(--rs-fg) 8%, transparent); --rs-btn-border: var(--rs-fg); }
  .sm-btn--ghost { --rs-btn-bg: transparent; --rs-btn-fg: var(--rs-fg); --rs-btn-hover: color-mix(in oklch, var(--rs-fg) 8%, transparent); --rs-btn-border: transparent; }
  .sm-btn--hi { --rs-btn-bg: var(--rs-btn-hi-bg); --rs-btn-fg: var(--rs-btn-hi-fg); --rs-btn-hover: var(--rs-btn-hi-hover); --rs-btn-border: var(--rs-btn-hi-border); --rs-btn-press-color: var(--rs-hi-deep); }   /* for dark bands; on offer pages the primary already is the loud button */
  .sm-band--hi .sm-btn--hi { --rs-btn-bg: var(--rs-ink); --rs-btn-fg: var(--rs-hi); --rs-btn-hover: var(--rs-brand-deep); --rs-btn-border: transparent; }
  .sm-btn--on-dark { --rs-btn-bg: var(--rs-bg); --rs-btn-fg: var(--rs-ink); --rs-btn-hover: var(--rs-bg-2); --rs-btn-border: transparent; }
  .sm-btn--lg { font-size: var(--rs-step-1); padding: 0.8em 1.6em; }
  @media (max-width: 24rem) { .sm-btn--lg { padding-inline: 1em; } }
  .sm-btn--sm { font-size: var(--rs-step--1); padding: 0.45em 1em; }
  .sm-btn--block { inline-size: 100%; }
  .sm-btn .sm-icon { transition: transform var(--rs-duration) var(--rs-ease); }
  .sm-btn:where(:not(:disabled, [aria-disabled="true"])):hover .sm-icon--go { transform: translateX(3px); }

  .sm-link-action {
    display: inline-flex;
    align-items: center;
    gap: var(--rs-space-1);
    min-block-size: var(--rs-target);   /* a standalone text action is a full touch target */
    padding: 0;
    border: 0;
    background: none;
    font-weight: var(--rs-ui-weight);
    color: var(--rs-fg-accent);
    text-decoration: none;
    cursor: pointer;
  }
  .sm-link-action:hover { text-decoration: underline; }
  :is(.sm-stack, .sm-hero) > .sm-link-action { justify-self: start; }   /* sized to its words, not the whole row */
  :is(.sm-cluster, .sm-card__foot, .sm-next-step, .sm-hero__actions) > .sm-link-action { margin-block: calc((1lh - var(--rs-target)) / 2); }   /* the 44px box overhangs; rows keep their rhythm */

  /* ── Pills, badges, stickers, facts ───────────────────────── */
  .sm-facts { display: flex; flex-wrap: wrap; gap: var(--rs-space-2); padding: 0; list-style: none; }
  .sm-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rs-space-1);
    padding: 0.3em 0.8em;
    border: var(--rs-pill-border-w) solid var(--rs-rule-strong);
    border-radius: var(--rs-pill-radius);
    font-size: var(--rs-step--1);
    font-weight: 600;
    white-space: nowrap;
  }
  .sm-badge {
    display: inline-block;
    padding: 0.25em 0.7em;
    border-radius: var(--rs-badge-radius);
    background: var(--rs-badge-bg);
    color: var(--rs-ink);
    font-size: var(--rs-step--2);
    font-weight: var(--rs-badge-weight);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: var(--rs-badge-ring), var(--rs-badge-shadow);
    transition: transform var(--rs-duration) var(--rs-ease);
  }
  .sm-badge--hi { background: var(--rs-sticker-bg); color: var(--rs-sticker-fg); box-shadow: var(--rs-sticker-ring), var(--rs-badge-shadow); transform: rotate(var(--rs-x-badge-rotate)); }   /* the sticker: tilts in Main Street offer; status badges never tilt */
  .sm-badge--ok { background: var(--rs-ok-tint); color: var(--rs-ok); }
  .sm-badge--warn { background: var(--rs-warn-tint); color: var(--rs-warn-text); }
  .sm-badge--accent { background: var(--rs-accent); color: var(--rs-accent-fg); }
  .sm-badge--brand { background: var(--rs-brand); color: var(--rs-bg); }
  .sm-badge--still { transform: none; }
  .sm-band--hi .sm-badge--hi { background: var(--rs-card); }   /* a sticker never disappears into its own band */

  .sm-canada { display: inline-flex; align-items: center; gap: var(--rs-space-2); font-size: var(--rs-step--1); font-weight: 600; color: var(--rs-fg-2); }
  .sm-canada svg { color: var(--rs-fg-accent); }

  /* ── Awning (Main Street only; display: none elsewhere) ──── */
  /* One drawing, two places: the strip under the header on every hero (.sm-awning) and the top
     of the price card (.sm-price-card::before, below). */
  .sm-awning { display: var(--rs-awning-display); }
  .sm-awning, .sm-price-card::before {
    block-size: 12px;
    background: repeating-linear-gradient(90deg, transparent 0 4px, var(--rs-x-awning-stripe) 4px 28px, transparent 28px 32px) 50% 0 / 32px 100%;   /* the gaps show the ground it hangs over; stripe centred in its cell so both ends match */
  }
  @supports (mask-image: radial-gradient(circle, #000 1px, transparent 1px)) {
    .sm-awning--scallop, .sm-price-card::before {           /* one rounded tongue under each stripe */
      block-size: 18px;
      mask-image: linear-gradient(#000 0 10px, transparent 10px), radial-gradient(12px 8px at 16px 10px, #000 97%, transparent);
      mask-size: 100% 100%, 32px 18px;
      mask-position: 0 0, 50% 0;
      mask-repeat: no-repeat, repeat-x;
    }
  }

  /* ── Cards ────────────────────────────────────────────────── */
  .sm-card {
    --rs-surface: var(--rs-card);
    --rs-card-rule: transparent;
    position: relative;
    display: grid;
    align-content: start;
    gap: var(--rs-space-3);
    padding: calc(var(--rs-space-5) * var(--rs-x-density));
    border: var(--rs-card-border);
    border-radius: var(--rs-x-radius);
    background: var(--rs-surface);
    box-shadow: var(--rs-card-shadow);
  }
  .sm-card--tint { --rs-surface: var(--rs-x-surface-2); border-color: transparent; }
  .sm-card::after { content: ""; position: absolute; inset: -1px -1px auto; z-index: 2; block-size: 2px; border-radius: inherit; background: var(--rs-card-rule); pointer-events: none; }   /* The Plan's cobalt rule, drawn above any media */
  .sm-card--raised { --rs-card-rule: var(--rs-card-raised-rule); box-shadow: var(--rs-card-raised-shadow); }
  /* A whole-card link. Main Street draws its hover ledge at rest in a clear colour
     (--rs-card-link-shadow, the same geometry), so hover only colours the ledge and the edge,
     quickly: nothing grows or moves. */
  /* The last two entries repeat the scroll reveal's fade (sm.base), which this list would
     otherwise replace: a revealed link card fades in on its stagger, and hover starts at once. */
  .sm-card--link { text-decoration: none; box-shadow: var(--rs-card-link-shadow, var(--rs-card-shadow)); transition: box-shadow var(--rs-duration-quick) ease-out, border-color var(--rs-duration-quick) ease-out, transform var(--rs-duration) var(--rs-ease), opacity 600ms var(--rs-ease) var(--rs-reveal-delay, 0ms), translate 600ms var(--rs-ease) var(--rs-reveal-delay, 0ms); }
  .sm-card--link:hover { --rs-card-rule: var(--rs-card-hover-rule); transform: var(--rs-card-hover-transform); box-shadow: var(--rs-card-hover-shadow); border-color: var(--rs-card-hover-border); }
  .sm-card--raised.sm-card--link { box-shadow: var(--rs-card-raised-shadow), var(--rs-card-link-shadow, 0 0 0 transparent); }
  .sm-card--raised.sm-card--link:hover { box-shadow: var(--rs-card-raised-shadow), var(--rs-card-hover-shadow); }
  .sm-card--link:focus-visible { box-shadow: 0 0 0 2px var(--rs-focus-halo), var(--rs-card-hover-shadow); }
  .sm-card__title { font-size: var(--rs-step-2); }
  .sm-card__meta { font-size: var(--rs-step--1); color: var(--rs-fg-2); }
  .sm-card__foot { margin-block-start: var(--rs-space-2); display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-space-3); }
  .sm-card__icon { display: grid; place-items: center; justify-self: start; color: var(--rs-fg-accent); }
  .sm-card__icon > svg { inline-size: 1.5rem; block-size: 1.5rem; }
  .sm-card__media {
    position: relative;
    margin: calc(var(--rs-space-5) * var(--rs-x-density) * -1) calc(var(--rs-space-5) * var(--rs-x-density) * -1) var(--rs-space-2);
    aspect-ratio: 16 / 10;
    border-radius: var(--rs-x-radius) var(--rs-x-radius) 0 0;
    overflow: hidden;
  }
  .sm-card__media > :is(img, picture, video) { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }

  /* Feature cards: the hub's "three ways we help". Notebook: paper boxes. The Plan: ruled,
     numbered rows. Main Street: white shop-window cards with a butter icon disc. */
  .sm-features { display: grid; gap: var(--rs-space-4) var(--rs-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); counter-reset: rs-feature; }
  :is(ol, ul).sm-features { margin: 0; padding: 0; list-style: none; }
  .sm-card--feature {
    --rs-surface: var(--rs-feature-bg);
    counter-increment: rs-feature;
    padding: var(--rs-feature-pad);
    background: var(--rs-feature-bg);
    border: var(--rs-feature-border);
    border-block-start: var(--rs-feature-rule);
    border-radius: var(--rs-feature-radius);
  }
  .sm-card--feature::before {
    content: counter(rs-feature, decimal-leading-zero);
    display: var(--rs-feature-index-display);
    font: var(--rs-numeral-weight) var(--rs-step-3) / 1 var(--rs-numeral-font);
    font-variation-settings: var(--rs-numeral-vf);
    letter-spacing: -0.02em;
    color: var(--rs-x-numeral-color);
    font-variant-numeric: tabular-nums;
  }
  :is(.sm-on-dark, .sm-band--night, .sm-footer, .sm-band--brand, .sm-on-brand) .sm-card--feature { --rs-feature-bg: var(--rs-card); --rs-feature-pad: var(--rs-space-5); }   /* ruled rows become panels on dark grounds */
  .sm-card--feature .sm-card__icon {
    display: var(--rs-feature-icon-display);
    inline-size: var(--rs-feature-icon-size);
    block-size: var(--rs-feature-icon-size);
    border-radius: var(--rs-feature-icon-radius);
    background: var(--rs-feature-icon-bg);
    color: var(--rs-feature-icon-fg);
  }

  /* Price card: receipt (Notebook) / spec sheet (Plan) / awning (Main Street) */
  .sm-price-card {
    --rs-surface: var(--rs-price-bg);
    position: relative;
    display: grid;
    gap: var(--rs-space-4);
    padding: var(--rs-space-6);
    border-radius: var(--rs-price-radius);
    background: var(--rs-surface);
    border: var(--rs-price-border);
    box-shadow: var(--rs-price-shadow);
  }
  /* Main Street: the card hangs under its own awning, the hero's scalloped strip (drawn with
     .sm-awning above), across the top inside the card's edge. The first item steps down by the
     awning's height, so the card keeps its own top padding below the scallops whatever padding
     a page gives it. */
  .sm-price-card::before {
    content: "";
    display: var(--rs-price-awning-display, none);
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    border-start-start-radius: inherit;
    border-start-end-radius: inherit;
    pointer-events: none;
  }
  .sm-price-card > :where(:first-child:not(.sm-price-card__band), .sm-price-card__band + *) { margin-block-start: var(--rs-price-awning-h, 0px); }
  .sm-price-card__band {                                    /* spec-sheet top band: decorative, hidden outside The Plan */
    display: var(--rs-price-band-display);
    margin: calc(var(--rs-space-6) * -1) calc(var(--rs-space-6) * -1) 0;
    padding: var(--rs-space-2) var(--rs-space-6);
    border-block-end: 2px solid var(--rs-brand);
    font: var(--rs-label-weight) var(--rs-step--2) / 1.4 var(--rs-label-font);
    letter-spacing: var(--rs-label-tracking);
    text-transform: uppercase;
    color: var(--rs-brand);
  }
  .sm-price-card__flag {                                    /* always visible: "Most owners start here" */
    justify-self: start;
    padding: 0.3em 0.75em;
    border-radius: var(--rs-price-flag-radius);
    background: var(--rs-price-flag-bg);
    color: var(--rs-price-flag-fg);
    font: var(--rs-label-weight) var(--rs-step--2) / 1.3 var(--rs-label-font);
    letter-spacing: var(--rs-price-flag-tracking);
    text-transform: var(--rs-price-flag-transform);
  }
  .sm-price-card > .sm-label { display: var(--rs-price-label-display); }
  .sm-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--rs-space-2); }
  .sm-price__amount { font: var(--rs-price-amount-weight) var(--rs-step-5) / 1 var(--rs-price-amount-font); letter-spacing: var(--rs-price-amount-tracking); font-variant-numeric: tabular-nums lining-nums; }
  .sm-price__unit { font: var(--rs-label-weight) var(--rs-step--2) / 1 var(--rs-font-sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--rs-brand); }
  .sm-price__cadence { font-size: var(--rs-step--1); color: var(--rs-fg-2); }   /* "one-time", "per month": sentence case */
  .sm-price__was { color: var(--rs-fg-3); text-decoration: line-through; }
  .sm-price__note { flex-basis: 100%; font-size: var(--rs-step--1); color: var(--rs-accent-text); font-weight: 700; }
  .sm-price-card .sm-checklist li { padding-block-end: var(--rs-space-2); border-block-end: var(--rs-price-leaders); }
  .sm-price-card .sm-checklist li:last-child { border-block-end: 0; }

  .sm-next-step {
    --rs-surface: var(--rs-card);
    display: grid;
    gap: var(--rs-space-3);
    padding: var(--rs-space-5);
    border-radius: var(--rs-x-radius);
    border: var(--rs-card-border);
    border-inline-start: 0.4rem solid var(--rs-x-accent);
    background: var(--rs-surface);
    box-shadow: var(--rs-shadow-2);
    justify-items: start;
  }
  .sm-next-step--quiet { box-shadow: none; border-inline-start-width: 0.25rem; }   /* under a primary action (thank-you pages): one next step, not two */

  /* ── Prompt card (signature component) ────────────────────── */
  .sm-prompt {
    --rs-surface: var(--rs-prompt-bg);
    position: relative;
    border-radius: var(--rs-prompt-radius);
    background: var(--rs-surface);
    border: var(--rs-prompt-border);
    border-block-start: var(--rs-prompt-rule);
    box-shadow: var(--rs-prompt-shadow);
    outline: var(--rs-x-prompt-cutline);
    outline-offset: 8px;
    overflow: hidden;
  }
  .sm-prompt__bar {
    --rs-focus: var(--rs-prompt-bar-focus);
    --rs-focus-halo: var(--rs-prompt-bar-bg);
    display: flex;
    flex-wrap: wrap;   /* a long Copy label drops under the bar's label on small phones rather than breaking */
    align-items: center;
    justify-content: space-between;
    gap: var(--rs-space-1) var(--rs-space-3);
    padding: 0.375rem 0.375rem 0.375rem var(--rs-space-4);   /* room for the Copy button's focus ring */
    background: var(--rs-prompt-bar-bg);
    color: var(--rs-prompt-bar-fg);
    font: 700 var(--rs-step--1) / 1.3 var(--rs-prompt-bar-font);
    letter-spacing: var(--rs-prompt-bar-tracking);
    text-transform: var(--rs-prompt-bar-transform);
  }
  .sm-prompt__copy {
    display: inline-flex;
    align-items: center;
    gap: var(--rs-space-2);
    white-space: nowrap;
    min-block-size: var(--rs-target);
    padding: 0.35em 1em;
    border: 0;
    border-radius: var(--rs-prompt-copy-radius);
    background: var(--rs-prompt-copy-bg);
    color: var(--rs-prompt-copy-fg);
    font: 700 var(--rs-step--1) / 1.2 var(--rs-font-sans);
    letter-spacing: 0;
    text-transform: none;
    cursor: pointer;
    transition: background-color var(--rs-duration) var(--rs-ease);
  }
  .sm-prompt__copy[data-copied] { background: var(--rs-prompt-copy-done-bg); color: var(--rs-prompt-copy-done-fg); }
  @media (hover: hover) { .sm-prompt__copy:hover { background: var(--rs-prompt-copy-done-bg); color: var(--rs-prompt-copy-done-fg); } }   /* a tap leaves :hover stuck on phones: a failed copy must never turn "Copied" green */
  .sm-prompt__text {
    padding: var(--rs-space-4) var(--rs-space-5) var(--rs-space-5);
    background: var(--rs-prompt-text-bg);
    font-family: var(--rs-font-mono);
    font-size: var(--rs-step--1);
    line-height: 1.7;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    color: var(--rs-ink);
  }
  :is(.sm-prompt__text, .sm-compare) mark {
    background: var(--rs-prompt-mark-bg);
    color: inherit;
    padding-inline: 0.15em;
    margin-inline: 0;
    border-radius: 2px;
    text-decoration: var(--rs-prompt-mark-decoration);
    text-decoration-thickness: var(--rs-prompt-mark-thickness);
    text-underline-offset: 0.18em;
    text-decoration-color: var(--rs-prompt-mark-color);
  }

  /* Weak vs strong */
  .sm-compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--rs-space-4); }
  .sm-compare__item { display: block; padding: var(--rs-space-4); border-radius: var(--rs-x-radius); font-family: var(--rs-font-mono); font-size: var(--rs-step--1); line-height: 1.65; }
  .sm-compare__item--weak { --rs-surface: var(--rs-weak-bg); background: var(--rs-surface); color: var(--rs-weak-fg); border: var(--rs-weak-border); }
  .sm-compare__item--strong { --rs-surface: var(--rs-strong-bg); background: var(--rs-surface); border: var(--rs-strong-border); box-shadow: var(--rs-strong-shadow); }
  .sm-compare__tag { display: block; margin-block-end: var(--rs-space-2); font-family: var(--rs-label-font); font-size: var(--rs-step--2); font-weight: var(--rs-label-weight); letter-spacing: var(--rs-label-tracking); text-transform: uppercase; }
  .sm-compare__item--weak .sm-compare__tag { color: var(--rs-ink-3); }
  .sm-compare__item--strong .sm-compare__tag { color: var(--rs-brand); }

  /* ── Teaching blocks ──────────────────────────────────────── */
  .sm-tip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--rs-space-3) var(--rs-space-5); }
  .sm-tip > .sm-numeral { flex: none; }
  .sm-tip__body { flex: 1 1 18rem; display: grid; gap: var(--rs-space-2); }

  .sm-check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(max(11rem, 40%), 1fr)); gap: 2px; background: var(--rs-ink); border: 2px solid var(--rs-ink); border-radius: var(--rs-x-radius); overflow: hidden; }
  .sm-check-grid > div { --rs-surface: var(--rs-card); display: grid; align-content: start; gap: var(--rs-space-1); padding: var(--rs-space-4); background: var(--rs-surface); color: var(--rs-ink); }
  .sm-check-grid strong { font: var(--rs-x-heading-weight) var(--rs-step-2) / 1.1 var(--rs-x-heading-font); letter-spacing: -0.02em; font-variation-settings: var(--rs-x-heading-vf, normal); color: var(--rs-x-numeral-color); }

  .sm-checklist { display: grid; gap: var(--rs-space-2); padding: 0; list-style: none; }
  .sm-checklist li { position: relative; display: block; padding-inline-start: calc(1.1em + var(--rs-space-2)); }   /* block, so inline code and links stay in the sentence */
  .sm-checklist li::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.25em;
    inline-size: 1.1em;
    block-size: 1.1em;
    border-radius: var(--rs-check-radius);
    background: var(--rs-fg-accent);
  }
  .sm-checklist li::after {                                 /* the tick, cut out in the surface colour */
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.25em;
    inline-size: 1.1em;
    block-size: 1.1em;
    background: var(--rs-surface);
    mask: var(--rs-asset-tick) center / 80% no-repeat;
  }
  .sm-checklist--boxes li::before { border-radius: 3px; background: none; border: 2px solid var(--rs-fg-2); }
  .sm-checklist--boxes li::after { display: none; }

  .sm-steps { display: grid; gap: var(--rs-space-4); padding: 0; list-style: none; counter-reset: step; }
  .sm-steps > li { counter-increment: step; display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--rs-space-1) var(--rs-space-4); }
  .sm-steps > li::before {
    content: counter(step);
    grid-row: span 2;
    display: grid;
    place-items: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    border-radius: var(--rs-step-radius);
    background: var(--rs-fg);
    color: var(--rs-surface);
    font-weight: var(--rs-ui-weight);
    font-variant-numeric: tabular-nums;
  }
  .sm-steps :is(strong, .sm-steps__title) { font-size: var(--rs-step-1); }

  /* Journey progress: state is shown by the bar, a tick and the text (never colour alone). */
  .sm-progress { display: flex; flex-wrap: wrap; gap: var(--rs-space-2) var(--rs-space-1); padding: 0; list-style: none; }
  .sm-progress li { flex: 1 1 0; min-inline-size: 0; display: grid; gap: var(--rs-space-2); align-content: start; font-size: var(--rs-step--1); font-weight: 600; color: var(--rs-fg-3); }
  .sm-progress li::before { content: ""; block-size: 0.35rem; border-radius: var(--rs-pill-radius); background: var(--rs-rule-strong); }
  .sm-progress li:not([data-state])::before { background: transparent; box-shadow: inset 0 0 0 1px var(--rs-fg-3); }   /* upcoming: an outlined track */
  .sm-progress li[data-state="done"]::before { background: var(--rs-fg-accent); }
  .sm-progress li[data-state="current"] { color: var(--rs-fg); font-weight: 700; }
  .sm-progress li[data-state="current"]::before { background: linear-gradient(90deg, var(--rs-fg-accent) 50%, var(--rs-rule-strong) 50%); }
  .sm-progress li[data-state="done"] { color: var(--rs-fg-2); }
  .sm-progress__label { display: inline-flex; align-items: center; gap: 0.3em; padding-inline-end: var(--rs-space-2); }

  /* Journey tasks: numbered rows, each with its action. A revealed .sm-tasks__check
     ([data-capability-check]) covers the number with a tick; .sm-tasks__note is an unnumbered row. */
  .sm-tasks { display: grid; gap: var(--rs-space-3); padding: 0; list-style: none; counter-reset: rs-task; }
  .sm-tasks > li {
    --rs-surface: var(--rs-card);
    display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: var(--rs-space-2) var(--rs-space-4);
    padding: var(--rs-space-4) calc(var(--rs-space-5) * var(--rs-x-density));
    border: var(--rs-card-border); border-radius: var(--rs-x-radius); background: var(--rs-surface); color: var(--rs-ink);
  }
  .sm-tasks > li:not(.sm-tasks__note) { counter-increment: rs-task; }
  .sm-tasks > li:not(.sm-tasks__note)::before {
    content: counter(rs-task); grid-area: 1 / 1; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem;
    border-radius: var(--rs-step-radius); background: var(--rs-ink); color: var(--rs-card); font-weight: var(--rs-ui-weight); font-variant-numeric: tabular-nums;
  }
  .sm-tasks > li > :not(.sm-tasks__check) { grid-column: 2; justify-self: start; }
  .sm-tasks__check { grid-area: 1 / 1; z-index: 1; display: grid; place-items: center; inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--rs-step-radius); background: var(--rs-ok); color: var(--rs-card); font-weight: 800; }
  .sm-tasks > li[data-capability-state="submitted"] { border-color: color-mix(in oklch, var(--rs-ok) 50%, transparent); }
  .sm-tasks > li.sm-tasks__note { grid-template-columns: minmax(0, 1fr); padding-block: var(--rs-space-3); border-style: dashed; background: transparent; color: var(--rs-fg-2); font-size: var(--rs-step--1); }
  .sm-tasks > li.sm-tasks__note > * { grid-column: 1; }
  @media (min-width: 40rem) {
    .sm-tasks > li:has(> :is(.sm-btn, button)) { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
    .sm-tasks > li > :is(.sm-btn, button) { grid-column: 3; grid-row: 1; }
  }

  .sm-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--rs-space-5); }
  .sm-stat { display: grid; align-content: start; gap: var(--rs-space-1); padding-block-start: var(--rs-space-3); border-block-start: 3px solid var(--rs-fg); }
  .sm-stat :is(strong, .sm-stat__value) { font: var(--rs-numeral-weight) var(--rs-step-5) / 1 var(--rs-numeral-font); letter-spacing: -0.03em; color: var(--rs-fg-accent); font-variation-settings: var(--rs-numeral-vf); }
  .sm-stat :is(span, .sm-stat__label) { color: var(--rs-fg-2); font-size: var(--rs-step--1); }

  /* ── Notices ──────────────────────────────────────────────── */
  .sm-notice {
    --rs-notice-color: var(--rs-info); --rs-notice-tint: var(--rs-info-tint);
    --rs-surface: var(--rs-notice-tint);
    display: grid; grid-template-columns: auto 1fr; gap: var(--rs-space-3);
    padding: var(--rs-space-4); border-radius: var(--rs-x-radius);
    background: var(--rs-surface); border-inline-start: 0.3rem solid var(--rs-notice-color);
  }
  .sm-notice:not(:has(> svg)) { grid-template-columns: 1fr; }   /* text-only notices (live status regions) */
  .sm-notice > svg { color: var(--rs-notice-color); margin-block-start: 0.2em; }
  .sm-notice strong { display: block; }
  .sm-notice :is(h2, h3) { font-size: var(--rs-step-1); }
  .sm-notice--ok { --rs-notice-color: var(--rs-ok); --rs-notice-tint: var(--rs-ok-tint); }
  .sm-notice--warn { --rs-notice-color: var(--rs-warn-text); --rs-notice-tint: var(--rs-warn-tint); }
  .sm-notice--bad { --rs-notice-color: var(--rs-bad); --rs-notice-tint: var(--rs-bad-tint); }

  .sm-toast {
    display: inline-flex; align-items: center; gap: var(--rs-space-3);
    padding: var(--rs-space-3) var(--rs-space-4); border-radius: var(--rs-x-radius);
    background: var(--rs-dark); box-shadow: var(--rs-shadow-3); font-weight: 600;
  }
  .sm-toast svg { color: var(--rs-fg-accent); }

  /* ── Forms ────────────────────────────────────────────────── */
  .sm-form { display: grid; gap: var(--rs-space-4); }
  .sm-form__row { display: grid; gap: var(--rs-space-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
  .sm-field { display: grid; gap: var(--rs-space-1); }
  .sm-field > label, .sm-field__label, .sm-fieldset legend { font-weight: var(--rs-ui-weight); }   /* .sm-field__label: the text span when the label wraps its input */
  .sm-field:has(.sm-input:disabled) > :is(label, .sm-field__label) { color: var(--rs-fg-2); }
  .sm-field__opt { font-weight: 400; color: var(--rs-fg-2); }
  .sm-field__help { font-size: var(--rs-step--1); color: var(--rs-fg-2); }
  .sm-field__error { display: flex; gap: var(--rs-space-1); font-size: var(--rs-step--1); font-weight: 700; color: var(--rs-fg-bad); }
  .sm-input {
    inline-size: 100%; min-block-size: var(--rs-target); padding: 0.6em 0.85em;
    border: var(--rs-input-border-w) solid var(--rs-control-border);
    border-radius: var(--rs-input-radius);
    background: var(--rs-input-bg); color: var(--rs-ink); font: inherit;
    transition: border-color var(--rs-duration) var(--rs-ease), box-shadow var(--rs-duration) var(--rs-ease);
  }
  .sm-input::placeholder { color: var(--rs-ink-3); }
  .sm-input:where(:not(:disabled, [readonly])):hover { border-color: var(--rs-ink); }
  .sm-input:focus-visible { outline: 3px solid var(--rs-focus); outline-offset: 2px; border-color: var(--rs-focus); box-shadow: 0 0 0 2px var(--rs-focus-halo); }
  .sm-input[aria-invalid="true"] { border-color: var(--rs-bad); background-color: var(--rs-bad-tint); }
  .sm-input:is(:disabled, [aria-disabled="true"]) { background-color: var(--rs-bg-2); color: var(--rs-ink-2); border-style: dashed; border-color: var(--rs-line-strong); cursor: not-allowed; }
  .sm-input[readonly] { background-color: var(--rs-bg-2); border-color: var(--rs-control-border); }   /* reference numbers: still focusable and copyable */
  textarea.sm-input { min-block-size: 7rem; resize: vertical; }
  select.sm-input { appearance: none; padding-inline-end: 2.5em; background-image: var(--rs-select-icon); background-repeat: no-repeat; background-position: right 0.8em center; background-size: 1em; }
  .sm-fieldset { display: grid; gap: var(--rs-space-2); margin: 0; padding: 0; border: 0; }
  .sm-fieldset > legend { padding: 0; margin-block-end: var(--rs-space-2); }   /* a rendered legend sits outside the grid, so the gap never reaches it */
  .sm-choice { display: grid; grid-template-columns: 1.25rem 1fr; gap: var(--rs-space-3); align-items: start; cursor: pointer; }
  .sm-choice input { inline-size: 1.25rem; block-size: 1.25rem; margin: 0.15em 0 0; accent-color: var(--rs-brand); }
  .sm-choice small { display: block; color: var(--rs-fg-2); font-size: var(--rs-step--1); }
  .sm-choice--consent { --rs-surface: var(--rs-x-surface-2); padding: var(--rs-space-3); border-radius: var(--rs-input-radius); background: var(--rs-surface); font-size: var(--rs-step--1); }
  :is(.sm-on-dark, .sm-band--night, .sm-footer, .sm-band--brand, .sm-on-brand) .sm-choice:not(.sm-choice--consent) input { accent-color: var(--rs-fg-accent); }
  .sm-inline-form { display: flex; flex-wrap: wrap; gap: var(--rs-space-2); }
  .sm-inline-form .sm-input { flex: 1 1 14rem; inline-size: auto; }
  .sm-inline-form > :not(.sm-input, .sm-btn) { flex-basis: 100%; }

  /* Live status slot ([data-form-status], [data-checkout-status]…): empty and hidden until a
     script writes to it. data-state (busy, editing, error, success) sets the tone; the text
     always carries the meaning. */
  .sm-status { font-size: var(--rs-step--1); font-weight: 600; }
  .sm-status a { overflow-wrap: anywhere; }   /* a support address or link in a status never widens its form on a phone */
  .sm-status:empty { display: none; }
  .sm-status:not(:empty) {
    --rs-status-color: var(--rs-info); --rs-status-tint: var(--rs-info-tint);
    display: block; padding: var(--rs-space-2) var(--rs-space-3); border-radius: var(--rs-input-radius);
    border-inline-start: 0.25rem solid var(--rs-status-color); background: var(--rs-status-tint); color: var(--rs-ink);
  }
  .sm-status:not(:empty):not([data-state]), .sm-status[data-state=""] { --rs-status-color: var(--rs-line-strong); --rs-status-tint: var(--rs-bg-2); }   /* no state: a neutral note, never a green confirmation */
  .sm-status[data-state="success"] { --rs-status-color: var(--rs-ok); --rs-status-tint: var(--rs-ok-tint); }
  .sm-status[data-state="error"] { --rs-status-color: var(--rs-bad); --rs-status-tint: var(--rs-bad-tint); }
  .sm-status:is([data-state="editing"], [data-state="warn"]) { --rs-status-color: var(--rs-warn-text); --rs-status-tint: var(--rs-warn-tint); }
  .sm-status[data-state="busy"]::before { content: ""; display: inline-block; inline-size: 0.8em; block-size: 0.8em; margin-inline-end: 0.5em; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; vertical-align: -0.1em; animation: rs-spin 0.8s linear infinite; }
  @keyframes rs-spin { to { rotate: 1turn; } }

  /* Rating scale: 1–5, native radios, 44px targets, anchors under the ends. */
  .sm-scale { display: grid; gap: var(--rs-space-2); margin: 0; padding: 0; border: 0; min-inline-size: 0; }
  .sm-scale > legend { padding: 0; margin-block-end: var(--rs-space-2); font-weight: var(--rs-ui-weight); }
  .sm-scale__opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--rs-target), 1fr)); gap: var(--rs-space-1); }
  .sm-scale__opts label {
    position: relative; display: grid; place-items: center; min-block-size: var(--rs-target);
    border: var(--rs-input-border-w) solid var(--rs-control-border); border-radius: var(--rs-input-radius);
    background: var(--rs-input-bg); color: var(--rs-ink); font-weight: var(--rs-ui-weight); font-variant-numeric: tabular-nums;
    cursor: pointer; transition: background-color var(--rs-duration) var(--rs-ease);
  }
  .sm-scale__opts input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
  .sm-scale__opts label:hover { border-color: var(--rs-ink); }
  .sm-scale__opts label:has(:checked) { background: var(--rs-brand); border-color: var(--rs-brand); color: var(--rs-bg); }
  :is(.sm-on-dark, .sm-band--night, .sm-footer, .sm-band--brand, .sm-on-brand) .sm-scale__opts label:has(:checked) { background: var(--rs-fg-accent); border-color: var(--rs-fg-accent); color: var(--rs-ink); }
  .sm-scale__opts label:has(:focus-visible) { outline: 3px solid var(--rs-focus); outline-offset: 2px; }
  .sm-scale__ends { display: flex; justify-content: space-between; gap: var(--rs-space-3); font-size: var(--rs-step--1); color: var(--rs-fg-2); }

  /* ── FAQ ──────────────────────────────────────────────────── */
  .sm-faq { border-block-start: var(--rs-border) solid var(--rs-rule-strong); }
  .sm-faq details { border-block-end: var(--rs-border) solid var(--rs-rule-strong); }
  .sm-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--rs-space-4); padding-block: var(--rs-space-4); font-weight: 700; font-size: var(--rs-step-1); cursor: pointer; list-style: none; }
  .sm-faq summary::-webkit-details-marker { display: none; }
  .sm-faq summary::after { content: var(--rs-faq-marker); flex: none; display: grid; place-items: center; inline-size: 1em; block-size: 1em; font-weight: 400; font-size: 1.3em; line-height: 1; color: var(--rs-fg-accent); background: var(--rs-faq-mask-fill); mask: var(--rs-faq-mask) center / 0.7em no-repeat; transition: transform var(--rs-duration) var(--rs-ease); }
  .sm-faq details[open] summary::after { transform: var(--rs-faq-marker-open); }
  .sm-faq details > div { padding-block-end: var(--rs-space-4); max-inline-size: var(--rs-measure); color: var(--rs-fg-2); }

  /* ── Dialog ───────────────────────────────────────────────── */
  .sm-dialog {
    --rs-surface: var(--rs-card);
    inline-size: min(34rem, calc(100vw - 2rem));
    max-block-size: min(85dvh, 46rem);
    padding: 0;
    border: var(--rs-card-border);
    border-radius: var(--rs-radius-l);
    background: var(--rs-surface);
    box-shadow: var(--rs-shadow-3);
  }
  .sm-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
  .sm-dialog::backdrop { background: color-mix(in oklch, var(--rs-ink) 60%, transparent); backdrop-filter: blur(3px); }
  .sm-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--rs-space-4); padding: var(--rs-space-5) var(--rs-space-5) var(--rs-space-3); }
  .sm-dialog__head > div { display: grid; gap: var(--rs-space-2); }
  .sm-dialog__close {
    flex: none; display: grid; place-items: center; inline-size: var(--rs-target); block-size: var(--rs-target);
    margin: calc(var(--rs-space-2) * -1) calc(var(--rs-space-2) * -1) 0 0;
    border: 0; border-radius: var(--rs-radius-s); background: transparent; color: var(--rs-fg-2); cursor: pointer;
  }
  .sm-dialog__close:hover { background: var(--rs-bg-2); color: var(--rs-fg); }
  .sm-dialog__body { display: grid; gap: var(--rs-space-4); align-content: start; padding: 0 var(--rs-space-5) var(--rs-space-4); overflow-y: auto; overscroll-behavior: contain; }
  .sm-dialog__body > :is(h3, h4):not(:first-child) { margin-block-start: var(--rs-space-3); }
  .sm-dialog__body:focus-visible { outline-offset: -3px; box-shadow: none; }
  .sm-dialog__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-space-3); padding: var(--rs-space-4) var(--rs-space-5) var(--rs-space-5); border-block-start: var(--rs-border) solid var(--rs-rule); }
  .sm-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--rs-space-3); }
  /* A dialog holding a longer form scrolls as a whole. When __body is the scroll container,
     showModal focuses that unnamed container instead of the first field, and the form's own
     submit button hides below a footer that only offers Close. */
  .sm-dialog--form[open] { display: block; overflow-y: auto; overscroll-behavior: contain; }
  .sm-dialog--form .sm-dialog__body { overflow: visible; }
  .sm-dialog textarea.sm-input { min-block-size: 5rem; }

  /* ── Table ────────────────────────────────────────────────── */
  .sm-table-wrap { --rs-surface: var(--rs-card); overflow-x: auto; border: var(--rs-card-border); border-radius: var(--rs-x-radius); background: var(--rs-surface); }
  .sm-table { inline-size: 100%; min-inline-size: 32rem; border-collapse: collapse; font-size: var(--rs-step--1); }
  .sm-table caption { padding: var(--rs-space-3) var(--rs-space-4) 0; text-align: start; font-size: var(--rs-step--1); color: var(--rs-fg-2); }
  .sm-table th, .sm-table td { padding: var(--rs-space-3) var(--rs-space-4); text-align: start; vertical-align: top; border-block-end: var(--rs-border) solid var(--rs-rule); }
  .sm-table thead th { background: var(--rs-x-surface-2); font-family: var(--rs-label-font); font-size: var(--rs-step--2); letter-spacing: var(--rs-label-tracking); text-transform: uppercase; }
  .sm-table tbody th { font-weight: 700; }
  .sm-table tr:last-child > * { border-block-end: 0; }
  .sm-table :is(.is-featured, [data-featured]) { background: var(--rs-table-featured-bg); box-shadow: var(--rs-table-featured-rule); }
  .sm-table thead :is(.is-featured, [data-featured]) { background: var(--rs-table-featured-head); }

  /* ── Quotes & people ──────────────────────────────────────── */
  .sm-pullquote { padding-inline-start: var(--rs-space-5); border-inline-start: 0.3rem solid var(--rs-fg-accent); font: var(--rs-quote-style) var(--rs-quote-weight) var(--rs-step-3) / 1.25 var(--rs-font-quote); letter-spacing: -0.01em; }
  .sm-pullquote :is(cite, figcaption) { display: block; margin-block-start: var(--rs-space-3); font: normal 700 var(--rs-step--1) / 1.4 var(--rs-font-sans); letter-spacing: 0; color: var(--rs-fg-2); }
  .sm-testimonial { --rs-surface: var(--rs-x-surface-2); display: grid; gap: var(--rs-space-4); padding: var(--rs-space-5); border-radius: var(--rs-x-radius); background: var(--rs-surface); }
  .sm-testimonial blockquote { font: var(--rs-quote-style) 400 var(--rs-step-1) / 1.5 var(--rs-font-quote); }
  .sm-testimonial blockquote::before { content: "\201C" / ""; display: block; font-size: 3em; line-height: 0.6; color: var(--rs-fg-accent); font-style: normal; }
  .sm-person { display: flex; align-items: center; gap: var(--rs-space-3); }
  .sm-avatar { inline-size: var(--rs-avatar-size, 3rem); block-size: var(--rs-avatar-size, 3rem); flex: none; display: grid; place-items: center; border-radius: var(--rs-media-radius); background: var(--rs-brand); color: var(--rs-bg); font-weight: var(--rs-ui-weight); overflow: hidden; }
  .sm-avatar--sm { --rs-avatar-size: 2rem; }
  .sm-avatar--lg { --rs-avatar-size: 6rem; font-size: var(--rs-step-3); }
  .sm-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .sm-person strong { display: block; }
  .sm-person > span:not(.sm-avatar), .sm-person > span > span { font-size: var(--rs-step--1); color: var(--rs-fg-2); }
  .sm-person .sm-avatar { color: var(--rs-bg); font-size: inherit; }
  .sm-bio { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--rs-space-5); }
  .sm-bio > div { flex: 1 1 16rem; display: grid; gap: var(--rs-space-3); }

  /* ── Media ────────────────────────────────────────────────── */
  .sm-media {
    position: relative; display: grid; place-items: center;
    aspect-ratio: var(--rs-media-ratio, 16 / 9);
    border-radius: var(--rs-media-radius); border: var(--rs-media-border); box-shadow: var(--rs-media-shadow);
    --rs-surface: var(--rs-x-surface-2);
    overflow: hidden; background: var(--rs-x-surface-2) var(--rs-media-photo, none) var(--rs-media-focus, 50% 50%) / cover no-repeat;
    color: var(--rs-fg-2); font-size: var(--rs-step--1); font-weight: 700; filter: var(--rs-photo-filter);
  }
  /* Real content: <img alt>, <picture>, <video> or an <iframe> fill the frame. --rs-media-photo is for decorative tiles only. */
  .sm-media > :is(img, picture, video, iframe), .sm-media > picture > img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; object-position: var(--rs-media-focus, 50% 50%); border: 0; }
  .sm-media--contain > :is(img, picture > img) { object-fit: contain; }
  .sm-media:has(> iframe) { background-color: var(--rs-night); }   /* a player-dark frame while the embed loads */
  .sm-media--hero { --rs-media-photo: var(--rs-photo-hero); --rs-media-focus: 50% 25%; }   /* keep faces in frame when the hero stacks */
  .sm-media--2 { --rs-media-photo: var(--rs-photo-2); }
  .sm-media--3 { --rs-media-photo: var(--rs-photo-3); }
  .sm-media--portrait { --rs-media-ratio: 4 / 5; }
  .sm-media--square { --rs-media-ratio: 1; }
  .sm-media__marks { display: var(--rs-media-marks-display); position: absolute; inset: 10px; z-index: 1; pointer-events: none; }
  .sm-media__marks::before, .sm-media__marks::after { content: ""; position: absolute; inline-size: var(--rs-media-marks-size); block-size: var(--rs-media-marks-size); border: 0 solid var(--rs-brand); }
  .sm-media__marks::before { inset-block-start: 0; inset-inline-start: 0; border-block-start-width: var(--rs-media-marks-w); border-inline-start-width: var(--rs-media-marks-w); }
  .sm-media__marks::after { inset-block-end: 0; inset-inline-end: 0; border-block-end-width: var(--rs-media-marks-w); border-inline-end-width: var(--rs-media-marks-w); }
  .sm-media__play { position: relative; z-index: 1; display: grid; place-items: center; inline-size: 4.5rem; block-size: 4.5rem; border: 0; border-radius: var(--rs-play-radius); background: var(--rs-bg); color: var(--rs-accent-text); box-shadow: var(--rs-shadow-3); cursor: pointer; transition: transform var(--rs-duration) var(--rs-ease); }
  .sm-media__play:hover { transform: scale(1.06); }
  .sm-media__play:focus-visible { box-shadow: 0 0 0 2px var(--rs-focus-halo), var(--rs-shadow-3); }
  .sm-media__caption { position: absolute; z-index: 1; inset-inline: var(--rs-space-3) calc(var(--rs-space-3) + var(--rs-media-marks-size)); inset-block-end: var(--rs-space-3); display: flex; justify-content: space-between; gap: var(--rs-space-2); }
  .sm-media__caption span { padding: 0.2em 0.6em; border-radius: var(--rs-radius-s); background: color-mix(in oklch, var(--rs-bg) 92%, transparent); color: var(--rs-ink); font-family: var(--rs-label-font); font-size: var(--rs-step--2); font-weight: 700; letter-spacing: 0.04em; }

  /* ── Site chrome ──────────────────────────────────────────── */
  .sm-header {
    --rs-surface: var(--rs-header-bg, var(--rs-bg)); --rs-focus-halo: var(--rs-surface);
    display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--rs-space-5); padding: var(--rs-space-2) var(--rs-gutter);
    background: var(--rs-surface); border-block-end: var(--rs-header-rule, var(--rs-border) solid var(--rs-rule));   /* opaque, with a firm edge: it stays distinct over any band as the page scrolls */
  }
  .sm-header .sm-wordmark { font-size: var(--rs-step-1); margin-inline-end: auto; }
  .sm-header > nav { order: 2; }
  .sm-header__cta { order: 3; }
  .sm-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--rs-space-4); padding: 0; margin: 0; list-style: none; font-family: var(--rs-nav-font); font-weight: var(--rs-nav-weight); font-size: var(--rs-nav-size); letter-spacing: var(--rs-nav-tracking); text-transform: var(--rs-nav-transform); }
  .sm-nav :where(a:not(.sm-btn)) { display: inline-flex; align-items: center; min-block-size: var(--rs-target); text-decoration: none; border-block-end: 2px solid transparent; }
  .sm-nav :where(a:not(.sm-btn)):hover, .sm-nav :where(a:not(.sm-btn))[aria-current="page"] { border-block-end-color: var(--rs-fg-accent); }
  @media (max-width: 40rem) {                               /* phones: wordmark + CTA on one row, the links below (2 rows, not 3) */
    .sm-header > nav { order: 4; flex-basis: 100%; }
    .sm-header .sm-nav { column-gap: var(--rs-space-3); }
  }
  @media (max-width: 22.5rem) { .sm-header .sm-nav { column-gap: var(--rs-space-2); letter-spacing: 0; } }
  .sm-header--sticky { position: sticky; inset-block-start: 0; z-index: 20; }
  /* In-page jumps land below the sticky header; a jump-target heading keeps its label in view. */
  html:has(.sm-header--sticky) { scroll-padding-block-start: calc(var(--rs-target) + var(--rs-space-6)); }
  .sm-section-head > h2[id] { scroll-margin-block-start: calc(var(--rs-space-6) + var(--rs-space-4)); }
  /* The header lockup: the wordmark (and an optional note underneath), as one link. */
  .sm-header__brand { display: grid; justify-items: start; align-content: center; inline-size: fit-content; min-block-size: var(--rs-target); margin-inline-end: auto; padding-block: var(--rs-space-1); color: inherit; line-height: var(--rs-leading-tight); text-decoration: none; }   /* a 44px target sized to the wordmark */
  .sm-header__brand .sm-wordmark { margin-inline-end: 0; }
  @media (max-width: 30em) { .sm-header { column-gap: var(--rs-space-3); } }
  .sm-wordmark__note { font: 600 var(--rs-step--2) / 1.2 var(--rs-font-sans); letter-spacing: 0; color: var(--rs-fg-2); }
  /* The phone menu, enhanced by /js/site-navigation.js ([data-site-nav] on the header,
     [data-site-nav-toggle] on the button, [data-site-nav-menu] on the nav). The button says
     "Menu" with an icon (bars, or a cross when open); the call to action lives inside the menu
     (.sm-nav__cta). Without JavaScript the links stay visible on a second row. Breakpoint
     matches the script (48em). */
  .sm-header__toggle {
    order: 4; display: none; align-items: center; gap: var(--rs-space-2); min-block-size: var(--rs-target); padding: 0 var(--rs-space-4);
    border: 1.5px solid var(--rs-fg); border-radius: var(--rs-pill-radius); background: transparent; color: var(--rs-fg);
    font: var(--rs-nav-weight) var(--rs-nav-size) / 1 var(--rs-nav-font); cursor: pointer;
  }
  @media (hover: hover) { .sm-header__toggle:hover { background: color-mix(in oklch, var(--rs-fg) 8%, transparent); } }   /* no sticky tint after a tap on touch screens */
  .sm-header__toggle .sm-icon { inline-size: 1.25em; block-size: 1.25em; }
  .sm-header__toggle-close, .sm-header__toggle[aria-expanded="true"] .sm-header__toggle-open { display: none; }
  .sm-header__toggle[aria-expanded="true"] .sm-header__toggle-close { display: block; }
  .sm-nav__cta { margin-inline-start: var(--rs-space-2); }
  /* Open, the menu's top rule is the closed header's bottom edge, on the same line and the full
     width of the screen, so nothing jumps when it opens or closes: the menu steps down by the
     header's bottom padding and out to the screen's edges (the header's side padding is the
     gutter below 48em), and its links keep the gutter. */
  @media (max-width: 48em) {
    [data-enhanced] > .sm-header__toggle { display: inline-flex; }
    [data-enhanced] > .sm-header__menu { order: 5; flex-basis: calc(100% + var(--rs-gutter) * 2); margin: var(--rs-space-2) calc(var(--rs-gutter) * -1) 0; }
    [data-enhanced]:has(> .sm-header__toggle[aria-expanded="false"]) > .sm-header__menu { display: none; }
    [data-enhanced] > .sm-header__menu .sm-nav { flex-direction: column; align-items: stretch; padding: var(--rs-space-2) var(--rs-gutter) var(--rs-space-4); border-block-start: var(--rs-header-rule, var(--rs-border) solid var(--rs-rule)); }
    [data-enhanced] > .sm-header__menu .sm-nav__cta { margin: var(--rs-space-3) 0 0; }
    [data-enhanced] > .sm-header__menu .sm-nav__cta .sm-btn { inline-size: 100%; }
  }
  .sm-masthead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--rs-space-2); padding: var(--rs-space-3) var(--rs-gutter); font-size: var(--rs-step--1); color: var(--rs-fg-2); }
  .sm-masthead .sm-wordmark { color: var(--rs-fg); font-size: var(--rs-step-0); }
  .sm-masthead--foot { border-block-start: var(--rs-border) solid var(--rs-rule); }   /* the offer footer: slim, light, no navigation */
  .sm-masthead--foot :is(a, .sm-link-action) { display: inline-flex; align-items: center; min-block-size: var(--rs-target); margin-block: calc((1lh - var(--rs-target)) / 2); }   /* full target, slim footer */
  .sm-masthead a { color: inherit; }
  .sm-footer { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rs-space-6); padding: var(--rs-space-7) var(--rs-gutter) var(--rs-space-5); background: var(--rs-surface); font-size: var(--rs-step--1); }
  .sm-footer:not(:has(.sm-footer__base)) { padding-block-end: var(--rs-space-7); }   /* without a base row, it closes with the air it opens with */
  .sm-footer address { font-style: normal; color: var(--rs-fg-2); }
  .sm-footer .sm-wordmark { font-size: var(--rs-step-2); }
  /* The brand line under the wordmark ends well short of the next column at any width. The
     second selector covers a footer whose line has no class yet. */
  :is(.sm-footer__blurb, .sm-footer__cols > :first-child > p:not([class])) { max-inline-size: 17em; text-wrap: pretty; }
  .sm-footer__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: var(--rs-space-5); }
  .sm-footer :is(.sm-footer__title, h4) { font: 700 var(--rs-step--2) / 1.4 var(--rs-label-font); letter-spacing: var(--rs-label-tracking); text-transform: uppercase; color: var(--rs-fg-accent); margin-block-end: var(--rs-space-2); }
  .sm-footer ul { display: grid; gap: 0; padding: 0; list-style: none; }
  .sm-footer ul a { display: inline-flex; align-items: center; min-block-size: 2rem; text-decoration: none; }
  @media (max-width: 36em) { .sm-footer__cols > :first-child { grid-column: 1 / -1; } }   /* the brand block takes its own row: never 2 + 1 columns */
  @media (pointer: coarse), (max-width: 48em) {
    .sm-footer ul a { min-block-size: var(--rs-target); }
    .sm-footer ul { margin-block: calc((1lh - var(--rs-target)) / 2); }   /* the taller boxes overhang; the text keeps its place under the title */
  }
  .sm-footer a:hover { text-decoration: underline; }
  .sm-footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--rs-space-3); padding-block-start: var(--rs-space-4); border-block-start: var(--rs-border) solid var(--rs-rule); color: var(--rs-fg-2); }
  .sm-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--rs-space-2); padding: 0; list-style: none; font-size: var(--rs-step--1); color: var(--rs-fg-2); }
  .sm-breadcrumb li + li::before { content: "/" / ""; margin-inline-end: var(--rs-space-2); color: var(--rs-fg-3); }
  .sm-breadcrumb a { text-decoration: none; }
  .sm-breadcrumb a:hover { text-decoration: underline; }
  .sm-breadcrumb [aria-current] { color: var(--rs-fg); font-weight: 700; }
  .sm-pagination { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-space-2); padding: 0; list-style: none; }
  .sm-pagination > li > :is(a, span) { display: inline-flex; align-items: center; justify-content: center; gap: 0.35em; min-inline-size: var(--rs-target); min-block-size: var(--rs-target); padding-inline: var(--rs-space-3); border-radius: var(--rs-pill-radius); text-decoration: none; font-weight: 700; white-space: nowrap; }
  .sm-pagination > li > a:hover { background: color-mix(in oklch, var(--rs-fg) 8%, transparent); }
  .sm-pagination > li > [aria-current] { background: var(--rs-fg); color: var(--rs-surface); }

  /* ── Bands & heroes ───────────────────────────────────────── */
  .sm-band { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rs-space-6); align-content: start; padding: var(--rs-space-8) var(--rs-gutter); }   /* a pinned track: an auto-fit child with a max width can't widen it */
  .sm-band--tint { background: var(--rs-texture-layer), var(--rs-surface); }
  .sm-band--brand, .sm-band--night, .sm-band--hi { background: var(--rs-surface); }
  :is(.sm-on-dark, .sm-band--night, .sm-footer, .sm-band--brand, .sm-on-brand) :is(.sm-price__unit, .sm-price__note, .sm-numeral):not(:where(.sm-card, .sm-price-card, .sm-next-step, .sm-notice, .sm-testimonial, .sm-table-wrap, .sm-dialog, .sm-compare__item, .sm-prompt) *) { color: var(--rs-fg-accent); }
  .sm-cta-band { gap: var(--rs-space-4); justify-items: center; text-align: center; }
  .sm-cta-band .sm-lead { margin-inline: auto; }

  /* One hero for every sub-style (.sm-hero-offer is the same component, kept for the live offer pages).
     The sub-style sets its ground, top rule, title size and the pattern behind the photo. */
  .sm-hero, .sm-hero-offer {
    --rs-surface: var(--rs-x-hero-bg); --rs-focus-halo: var(--rs-x-hero-bg);
    position: relative; display: grid; gap: var(--rs-space-6) var(--rs-space-7); align-items: center;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--rs-hero-col-min, 26rem)), 1fr));   /* stack before the headline column gets too narrow */
    padding: var(--rs-space-8) var(--rs-gutter);
    background: var(--rs-texture-layer), var(--rs-x-hero-bg); color: var(--rs-x-hero-fg);
    border-block-start: var(--rs-x-hero-rule);
    overflow-x: clip;
  }
  :is(.sm-hero, .sm-hero-offer) > .sm-awning { position: absolute; inset-inline: 0; inset-block-start: 0; }
  /* Full-bleed chrome lines its content up with .sm-container on wide screens. */
  :is(.sm-header, .sm-masthead, .sm-hero, .sm-hero-offer) { padding-inline: max(var(--rs-gutter), (100% - var(--rs-width-content)) / 2); }
  /* A short page keeps its footer at the bottom of the window. */
  .sm-root:has(> .sm-masthead--foot, > .sm-footer) { display: flex; flex-direction: column; min-block-size: 100svh; }
  .sm-root:has(> .sm-masthead--foot, > .sm-footer) > main { flex: 1 0 auto; }
  .sm-hero__body { display: grid; gap: var(--rs-space-4); justify-items: start; align-content: center; }
  :is(.sm-hero, .sm-hero-offer) :is(h1, .sm-hero__title) { font-size: var(--rs-x-hero-title); max-inline-size: var(--rs-hero-measure); margin-block-end: calc(var(--rs-highlight-offset) + var(--rs-highlight-thickness)); }   /* room for an underline highlight on the last line */
  :is(.sm-hero, .sm-hero-offer) .sm-lead { color: var(--rs-fg-2); }
  .sm-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-space-3) var(--rs-space-4); }
  :is(.sm-hero__media, .sm-hero-offer__photo) { position: relative; }
  :is(.sm-hero__media, .sm-hero-offer__photo)::before { content: ""; position: absolute; inset: calc(var(--rs-space-5) * -1) calc(var(--rs-gutter) * -1) calc(var(--rs-space-5) * -1) 25%; background: var(--rs-x-hero-pattern); background-repeat: round; box-shadow: var(--rs-x-hero-plate); pointer-events: none; }   /* The Plan's drafting plate: whole cells, inside the row gap, with an edge */
  :is(.sm-hero__media, .sm-hero-offer__photo) > * { position: relative; }
  :is(.sm-hero__media, .sm-hero-offer__photo) .sm-media { inline-size: 100%; max-block-size: min(34rem, 80svh); }
  .sm-hero--center { justify-items: center; text-align: center; grid-template-columns: 1fr; }
  .sm-hero--center .sm-hero__body { justify-items: center; }

  /* ── Article / prose (editorial) ──────────────────────────── */
  .sm-prose { max-inline-size: var(--rs-measure); font-size: var(--rs-x-body-size); }
  .sm-prose > * + * { margin-block-start: 1.1em; }
  .sm-prose > :is(h2, h3, h4) { margin-block-start: 1.8em; }
  .sm-prose h2 { font-size: var(--rs-step-3); }
  .sm-prose h3 { font-size: var(--rs-step-2); }
  .sm-prose h4 { font-size: var(--rs-step-1); }
  .sm-prose ul, .sm-prose ol { padding-inline-start: 1.25em; }
  .sm-prose li + li { margin-block-start: 0.4em; }
  .sm-prose li::marker { color: var(--rs-fg-accent); }
  .sm-prose blockquote { --rs-surface: var(--rs-x-surface-2); padding: var(--rs-space-4) var(--rs-space-5); border-inline-start: 0.3rem solid var(--rs-fg-accent); border-radius: 0 var(--rs-x-radius) var(--rs-x-radius) 0; background: var(--rs-surface); font-family: var(--rs-font-quote); font-style: var(--rs-quote-style); color: var(--rs-fg-2); }   /* the editorial reading panel */
  .sm-prose hr { border: 0; border-block-start: var(--rs-border) solid var(--rs-rule-strong); margin-block: 2em; }
  .sm-prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--rs-step--1); }
  .sm-prose :is(th, td) { padding: 0.6em 0.8em; text-align: start; vertical-align: top; border-block-end: var(--rs-border) solid var(--rs-rule); }
  .sm-prose thead th { font-family: var(--rs-label-font); font-size: var(--rs-step--2); letter-spacing: var(--rs-label-tracking); text-transform: uppercase; border-block-end-color: var(--rs-rule-strong); }
  .sm-prose figcaption { margin-block-start: var(--rs-space-2); font-size: var(--rs-step--1); color: var(--rs-fg-2); }
  .sm-prose img { border-radius: var(--rs-media-radius); }
  .sm-prose dt { font-weight: var(--rs-ui-weight); }
  .sm-prose dd { margin-block-end: 0.6em; }
  .sm-prose :not(pre) > code, .sm-prose kbd { padding: 0.1em 0.35em; border-radius: var(--rs-radius-s); background: color-mix(in oklch, var(--rs-fg) 10%, transparent); }
  .sm-prose pre { padding: var(--rs-space-4); border-radius: var(--rs-radius-s); background: color-mix(in oklch, var(--rs-fg) 8%, transparent); overflow-x: auto; font-size: var(--rs-step--1); }
  .sm-prose--dropcap > p:first-of-type::first-letter { float: left; margin: 0.05em 0.12em 0 0; font: var(--rs-numeral-weight) 3.6em / 0.8 var(--rs-numeral-font); color: var(--rs-fg-accent); }
  .sm-prose sup a { text-decoration: none; font-weight: 700; color: var(--rs-fg-accent); }
  .sm-sources { display: grid; gap: var(--rs-space-2); padding-block-start: var(--rs-space-4); border-block-start: var(--rs-border) solid var(--rs-rule-strong); font-size: var(--rs-step--1); color: var(--rs-fg-2); }
  .sm-sources ol { display: grid; gap: var(--rs-space-2); padding-inline-start: 1.25em; }
  .sm-article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--rs-space-2) var(--rs-space-4); font-size: var(--rs-step--1); color: var(--rs-fg-2); }
  .sm-edition { font: var(--rs-quote-style) 400 var(--rs-step--1) / 1.4 var(--rs-font-quote); color: var(--rs-fg-2); }

  /* ── Forced colours: keep ticks, state and highlights meaningful ─ */
  @media (forced-colors: active) {
    .sm-checklist li::before { forced-color-adjust: none; background: CanvasText; }
    .sm-checklist li::after { forced-color-adjust: none; background: Canvas; }
    .sm-checklist--boxes li::before { background: none; border-color: CanvasText; }
    .sm-progress li::before { forced-color-adjust: none; background: GrayText; }
    .sm-progress li:is([data-state="done"], [data-state="current"])::before { background: Highlight; }
    .sm-badge, .sm-price-card__flag, .sm-check-grid > div, .sm-steps > li::before { border: 1px solid CanvasText; }
    .sm-nav :where(a:not(.sm-btn)) { border-block-end-color: Canvas; }
    .sm-nav :where(a:not(.sm-btn))[aria-current="page"] { border-block-end-color: LinkText; }
    select.sm-input { appearance: auto; background-image: none; padding-inline-end: 0.85em; }
    .sm-marker, .sm-root mark { background: none; text-decoration: underline; text-decoration-thickness: 0.12em; }
    .sm-scale .sm-scale__opts label:has(:checked) { forced-color-adjust: none; background: Highlight; color: HighlightText; border-color: Highlight; }
    .sm-scale__opts label:has(:focus-visible) { outline-color: CanvasText; }
    .sm-pagination > li > [aria-current] { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  }

  /* ── Print (the PDF guide is built from these same components) ─ */
  @page { size: letter; margin: 0.6in; }
  @page cover { margin: 0; }
  .sm-pdf-cover { page: cover; padding-inline-start: max(0.6in, var(--rs-cover-inset)); }   /* Notebook: text starts right of the margin rule */
  @media print {
    .sm-root { background: var(--rs-bg); print-color-adjust: exact; -webkit-print-color-adjust: exact; }
    :is(.sm-hero, .sm-hero-offer, .sm-band--tint, .sm-root [data-brand]) { background-image: none; }   /* the paper tooth stays on screen; in print only the cover carries it */
    .sm-root .sm-pdf-cover { background: var(--rs-cover-pattern), var(--rs-texture-layer), var(--rs-x-surface-2); }
    :is(.sm-prompt, .sm-compare, .sm-check-grid, .sm-tip, .sm-price-card, .sm-next-step, .sm-stats, figure, table) { break-inside: avoid; }
    .sm-root :is(h1, h2, h3, h4) { break-after: avoid; }
    :is(.sm-prompt__copy, .sm-media__play, .sm-skip-link, .sm-header > nav, .sm-header__toggle) { display: none; }
    .sm-root [data-reveal] { opacity: 1; translate: none; }
  }
}