@layer reset, base, components, responsive;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 62px); }
  body, h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
  img { display: block; max-width: 100%; }
  button, input { font: inherit; }
  button, a { -webkit-tap-highlight-color: transparent; }
}

@layer base {
  :root {
    /* The sticky buy bar offsets from this. It has to exist here, not only in the mobile
       breakpoint: an undefined custom property inside `inset` invalidates the whole
       declaration, and the bar silently sized to its content on every desktop width. */
    --header-h: 70px;
    --cream: #faf3e9;
    --paper: #fffbf4;
    --paper-deep: #f3eee4;
    --canvas: #faf8f4;
    --sunken: #f2efe9;
    --surface: #ffffff;
    --ink: #1f1d1a;
    --ink-2: #2c2621;
    --copy: #6b6560;
    --dark: #1f1d1a;
    --accent: #b54c2f;
    --body-size: 17px;
    --muted: #8a8078;
    --coral: #e8623c;
    --green: #1b9e6b;
    --mint: #8cd9b4;
    --line: rgba(31, 29, 26, .1);
    --shadow: 0 24px 70px rgba(65, 48, 32, .12);
    --font-body: Archivo, Helvetica, Arial, sans-serif;
    --font-script: Caveat, cursive;
    --font-mono: "JetBrains Mono", monospace;
  }

  body { min-width: 320px; overflow-x: clip; overflow-y: visible; background: var(--canvas); color: var(--ink); font-size: var(--body-size); line-height: 1.5; font-family: var(--font-body); -webkit-font-smoothing: antialiased; }
  a { color: inherit; text-decoration: none; }
  button { color: inherit; }
  ::selection { background: var(--accent); color: #fff; }
  :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
  .section-shell { width: min(1240px, calc(100% - 40px)); margin-inline: auto; }
  .surface-section { background: var(--sunken); border-block: 1px solid var(--line); }
  .section-dark { background: var(--dark); color: #f2efe9; }
  .eyebrow { font-family: var(--font-mono); font-size: .72rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
  h1, h2, h3 { text-wrap: balance; }
  h2 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.02; letter-spacing: -.045em; }
  .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  /* The newsletter honeypot: hidden from people by clipping, and from assistive
     technology by aria-hidden on its wrapper. Not display: none, because a bot that
     skips hidden fields would skip this one and learn nothing about itself. It is not
     .sr-only - that class means the opposite, and naming it that would mislead whoever
     reads this next. */
  .honeypot { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
  .skip-link { position: fixed; top: 8px; left: 8px; z-index: 999; transform: translateY(-150%); background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 10px; }
  .skip-link:focus { transform: none; }
  .storefront { position: relative; z-index: 2; background: transparent; }
}

@layer components {
  /* Chrome, not content. Double-clicking it selected the text and the browser painted its
     own highlight over the accent ground, which reads as the bar changing colour. */
  /* Shown by the watchdog in index.html when the scripts never started. The page can
     look perfect while doing nothing at all - that shipped once - so this says so. */
  .boot-warning {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 12px 16px;
    background: var(--ink);
    color: #fff;
    font-size: .86rem;
    text-align: center;
  }
  .boot-warning button {
    padding: 7px 14px;
    border: 1px solid rgb(255 255 255 / 35%);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
  }
  .boot-warning button:focus-visible { outline-color: #fff; }

  .announce {
    user-select: none;
    -webkit-user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 12px 9px 0;
    background: var(--accent);
    color: #fff;
    font-size: .82rem;
    letter-spacing: .01em;
  }
  /* The rail is clipped by its own wrapper rather than by the strip, so the pause control
     sits beside the moving text instead of on top of it. A headline used to slide under
     the button and collide with it. The mask softens both cut edges. */
  .announce__viewport {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
  }
  /* One rail of three identical sets, sliding by exactly one set. calc(-100% / 3) divides
     the rail's own width, so the loop closes on the same pixel every time; a rounded
     -33.33% drifts and the seam eventually shows. */
  /* No will-change here: a transform animation that never stops is promoted by the
     browser on its own, and this project already caps who may reserve a layer. */
  .announce__rail { display: flex; width: max-content; animation: announce-run 38s linear infinite; }
  .announce:hover .announce__rail,
  .announce[data-paused] .announce__rail { animation-play-state: paused; }
  @keyframes announce-run { to { transform: translate3d(calc(-100% / 3), 0, 0); } }

  .announce__set { display: flex; align-items: baseline; gap: 44px; margin: 0; padding: 0 44px 0 0; list-style: none; }
  .announce__set li { display: flex; align-items: baseline; gap: 9px; white-space: nowrap; }
  /* Pure white throughout: white on the accent is 5.20:1, but at .82 opacity the detail
     text composites to 4.03:1 and fails. The two ranks are told apart by weight instead. */
  .announce__set strong { font-weight: 700; }
  .announce__set span { font-weight: 500; }
  /* A drawn dot rather than a bullet glyph: it stays round at any weight, and it keeps
     a stray numeral out of a strip whose figures are checked. */
  .announce__set li::before { content: ""; flex: 0 0 auto; align-self: center; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .75; }

  /* WCAG 2.2.2 wants a way to stop content that moves on its own for more than five
     seconds. Hovering pauses it, but a pointer is not something everyone has, so the strip
     carries a real control. It is added by script, so the strip is static without it. */
  .announce__pause {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(255 255 255 / 20%);
    color: #fff;
    cursor: pointer;
    transition: background-color .2s;
  }
  .announce__pause:hover { background: rgb(255 255 255 / 34%); }
  .announce__pause svg { width: 10px; height: 10px; fill: currentColor; }
  /* The page-wide focus ring is the accent, which is this element's own background. */
  .announce__pause:focus-visible { outline-color: #fff; outline-offset: 2px; }


  .site-header { position: sticky; top: 0; z-index: 80; background: rgb(250 248 244 / 85%); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
  .nav-wrap { width: min(1240px, calc(100% - 40px)); min-height: 70px; margin: auto; display: flex; align-items: center; gap: 20px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: -.025em; }
  .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--ink); color: #fff; font-size: .86rem; font-weight: 800; }
  .desktop-nav { display: flex; gap: 27px; margin-left: auto; font-size: .91rem; color: var(--copy); }
  .desktop-nav a, .mobile-menu a { transition: color .2s; }
  .desktop-nav a:hover, .mobile-menu a:hover { color: var(--accent); }
  .nav-actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
  .cart-trigger { display: flex; align-items: center; gap: 8px; padding: 8px 10px 8px 14px; border: 1px solid var(--line); border-radius: 999px; background: #fff; cursor: pointer; font-size: .86rem; font-weight: 600; }
  .cart-trigger span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .7rem; }
  .menu-trigger { display: none; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 12px; background: #fff; cursor: pointer; }
  .mobile-menu { padding: 8px 20px 20px; border-top: 1px solid var(--line); }
  .mobile-menu a { display: block; padding: 13px 4px; border-bottom: 1px solid rgba(23,19,15,.06); font-weight: 600; }

  .button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 13px 21px; border: 1px solid transparent; border-radius: 999px; cursor: pointer; font-weight: 700; transition: transform .2s, background-color .2s, color .2s, border-color .2s; }
  .button:hover { transform: translateY(-2px); }
  .button--ink { background: var(--ink); color: #fff; }
  .button--buy { background: var(--accent); color: #fff; font-weight: 700; }
  .button--buy:hover { background: var(--ink); }
  .button--ink:hover { background: var(--accent); }
  .button--ghost { border-color: rgba(23,19,15,.18); background: transparent; }
  .button--ghost:hover { border-color: var(--ink); background: var(--sunken); }
  .button--cream { background: var(--surface); color: var(--ink); }
  .button--cream:hover { background: var(--accent); color: #fff; }
  .button--dark-ghost { border-color: rgba(250,243,233,.25); color: var(--cream); }
  .button--dark-ghost:hover { border-color: var(--cream); background: rgba(255,255,255,.07); }
  .button--arrow { padding: 9px 10px 9px 24px; }
  .button--arrow span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: #fff; color: var(--ink); }

  .hero { padding-block: clamp(28px, 5vw, 64px) clamp(24px, 4vw, 42px); }
  .hero-card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: clamp(30px, 5vw, 76px); align-items: center; min-height: 630px; padding: clamp(28px, 5vw, 70px); border: 1px solid rgba(23,19,15,.07); border-radius: clamp(22px, 3vw, 38px); background: var(--surface); }
  .status-pill { width: fit-content; display: flex; align-items: center; gap: 9px; margin-bottom: 24px; padding: 7px 13px; border-radius: 999px; background: var(--sunken); color: var(--copy); font-size: .78rem; font-weight: 600; }
  .status-pill span { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
  .hero h1 { max-width: 760px; font-size: clamp(3rem, 6.5vw, 5.25rem); line-height: 1.02; letter-spacing: -.03em; font-weight: 700; }
  .scribble { position: relative; display: inline-block; padding-inline: .06em; color: var(--coral); font-family: var(--font-script); font-size: 1.14em; font-weight: 700; letter-spacing: 0; }
  .scribble::after { content: ""; position: absolute; inset: 4% -3% -4%; border: 2.5px solid currentColor; border-radius: 50%; transform: rotate(-3deg); opacity: .78; }
  .hero-lede { max-width: 49ch; margin-top: 24px; color: var(--copy); font-size: clamp(1rem, 1.45vw, 1.17rem); line-height: 1.62; }
  .hero-price { margin-top: 28px; font-size: 1.02rem; color: var(--copy); }
  .hero-price strong { color: var(--accent); font-weight: 700; }
  .button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
  .rating { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 30px 0 0; padding: 0; list-style: none; font-size: .83rem; }
  .rating li { display: flex; flex-direction: column; gap: 2px; padding-left: 12px; border-left: 2px solid var(--green); }
  .rating li strong { font-weight: 700; }
  .rating li span { color: #6b615a; font-size: .78rem; }
  .hero-visual { position: relative; min-height: 460px; display: grid; place-items: center; }
  .hero-visual::before { content: ""; position: absolute; width: 86%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(232,98,60,.12), transparent 68%); filter: blur(12px); }
  .hero-dashboard-device { position: relative; z-index: 1; width: min(112%, 760px); animation: hero-float 9s ease-in-out infinite; }
  .hero-dashboard-shell { padding: clamp(7px, 1vw, 12px); border: 1px solid rgba(250,243,233,.2); border-radius: clamp(22px, 3vw, 36px); background: #17130f; box-shadow: 0 38px 58px rgba(23,19,15,.25), 0 8px 18px rgba(23,19,15,.16); transform: perspective(1200px) rotateX(2deg) rotateY(-6deg); transform-style: preserve-3d; }
  .hero-dashboard-screen { position: relative; overflow: hidden; aspect-ratio: 8 / 5; border-radius: clamp(15px, 2.2vw, 25px); background: #f8f3e9; isolation: isolate; }
  .hero-dashboard-poster { display: block; width: 100%; height: 100%; object-fit: cover; }
  .hero-dashboard-video { position: absolute; z-index: 1; top: 9.2778%; left: 19.3056%; width: 78.6111%; height: 25.5556%; border-radius: 0 0 12px 12px; object-fit: cover; pointer-events: none; }
  .hand-note { position: absolute; z-index: 2; padding: 9px 13px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 12px 30px rgba(23,19,15,.09); color: var(--accent); font-family: var(--font-script); font-size: 1.2rem; }
  .hand-note--top { top: 8%; left: 1%; transform: rotate(-4deg); }
  .hand-note--bottom { right: 0; bottom: 8%; color: var(--ink); transform: rotate(2deg); }
  @keyframes hero-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-14px)} }


  .product-price {
    margin: 0 auto 0 0;
    font-size: 1.15rem;
    font-weight: 700;
    display: flex;
    align-items: baseline;
    gap: 6px;
  }
  .product-price span { font-size: .78rem; font-weight: 500; opacity: .62; }
  .product-try { align-self: center; font-size: .88rem; text-decoration: underline; text-underline-offset: 3px; opacity: .82; }
  .product-try:hover { opacity: 1; }

  .reviews-empty {
    margin-top: clamp(32px, 5vw, 56px);
    padding: clamp(24px, 4vw, 38px);
    border: 1px dashed var(--line);
    border-radius: 18px;
    background: var(--surface);
    max-width: 60ch;
  }
  .reviews-empty h3 { margin: 0 0 8px; font-size: 1.05rem; font-weight: 600; }
  .reviews-empty p { margin: 0; color: var(--copy); font-size: .95rem; line-height: 1.6; }

  .products { padding-block: clamp(58px, 8vw, 106px); }
  .section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: clamp(28px, 4vw, 48px); }
  .section-heading .eyebrow { margin-bottom: 14px; }
  .section-heading--light .eyebrow { color: #a39a90; }
  .product-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(16px, 2.2vw, 28px); }
  .product-card { position: relative; display: flex; flex-direction: column; padding: 18px; border: 1px solid rgba(250,243,233,.1); border-radius: 23px; background: #221d18; transition: border-color .25s, transform .25s; }
  .product-card:hover { border-color: rgba(250,243,233,.34); transform: translateY(-3px); }
  .product-image { position: relative; overflow: hidden; aspect-ratio: 16/10; margin-bottom: 20px; border-radius: 15px; background: var(--ink-2); }
  .product-image img { width: 100%; height: 100%; object-fit: cover; }
  .product-image span { position: absolute; top: 12px; left: 12px; padding: 6px 11px; border-radius: 999px; background: var(--surface); color: var(--ink); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
  .product-card h3 { font-size: 1.4rem; letter-spacing: -.03em; }
  .product-card .product-price { margin: 6px 0 0; }
  /* The whole card opens the dialog, but the buy button on it must still buy. The hit
     area is this control stretched over the card; the actions sit on a higher layer so a
     tap on "Add to cart" is not swallowed by it. */
  .product-card__open {
    margin-top: 14px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mint);
    font: inherit;
    font-weight: 700;
    font-size: .88rem;
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
  }
  .product-card__open::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 23px; }
  .product-card .product-actions { position: relative; z-index: 2; margin-top: 20px; }
  .product-detail > p { margin-top: 10px; color: #a39a90; line-height: 1.55; }
  .check-list { display: grid; gap: 9px; margin: 18px 0 24px; padding: 0; list-style: none; }
  .check-list li { position: relative; padding-left: 24px; color: #d6cfc7; font-size: .9rem; line-height: 1.45; }
  .check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--mint); }
  .product-actions { display: flex; gap: 10px; margin-top: auto; }
  .product-actions .button:first-child { flex: 1; }


  .compare { padding-block: clamp(64px, 8vw, 112px); }
  .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
  table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: .91rem; }
  th, td { padding: 16px 20px; border-bottom: 1px solid rgba(23,19,15,.065); text-align: left; }
  thead th { font-size: .8rem; letter-spacing: .05em; }
  thead th:first-child { color: var(--muted); text-transform: uppercase; }
  thead small { display: block; margin-top: 3px; color: var(--green); font-size: .7rem; }
  thead th:last-child small { color: #2f49d9; }
  tbody th { color: var(--copy); font-weight: 500; }
  tbody tr:last-child > * { border-bottom: 0; }

  /* Three steps, and every one of them is checkable: the price, the browsers, and where
     the writing is kept. Nothing here is a claim the product cannot back. */
  .how-steps {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
  }
  .how-steps li {
    padding: 28px 26px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: var(--surface);
  }
  .how-step__n {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
  }
  .how-steps h3 { margin-top: 18px; font-size: 1.06rem; letter-spacing: -.01em; }
  .how-steps p { margin-top: 9px; color: var(--copy); line-height: 1.55; }

  .inside { padding-block: clamp(58px, 7vw, 96px); }
  .gallery { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
  .gallery figure { aspect-ratio: 4 / 3; overflow: hidden; border: 1px solid var(--line); border-radius: 16px; background: #fff; box-shadow: 0 12px 28px rgba(23,19,15,.06); }
  .gallery img { width: 100%; height: 100%; object-fit: cover; }

  .goal-demo { padding-block: clamp(72px, 9vw, 120px); }
  .goal-layout { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 7vw, 96px); align-items: center; }
  .goal-copy h2 { max-width: 14ch; margin-top: 15px; }
  .goal-copy > p:not(.eyebrow) { max-width: 56ch; margin-top: 17px; color: var(--copy); line-height: 1.58; }
  .goal-form { display: grid; gap: 11px; margin-top: 26px; }
  .goal-form label, .goal-form legend { font-size: .79rem; font-weight: 700; }
  .goal-form input { width: 100%; margin-top: 7px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); }
  .goal-fields { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
  .goal-form fieldset { margin: 4px 0 0; padding: 0; border: 0; }
  .preset-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 9px; }
  .preset-row button, .roadmap-grid button { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); cursor: pointer; font-size: .74rem; }
  .goal-preview { padding: clamp(24px, 4vw, 40px); border-radius: 24px; background: var(--ink); color: var(--cream); box-shadow: var(--shadow); }
  .preview-kicker { display: flex; justify-content: space-between; color: #b2aaa2; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; }
  .preview-kicker strong { color: var(--mint); }
  .goal-preview h3 { margin-top: 32px; font-size: clamp(1.7rem, 3vw, 2.5rem); }
  .preview-progress { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; }
  .preview-progress strong { color: var(--mint); font-size: 2.8rem; }
  .preview-progress span { color: #b2aaa2; font-size: .8rem; }
  .progress-track { height: 7px; margin-top: 12px; overflow: hidden; border-radius: 999px; background: #3a342f; }
  .progress-track i { display: block; height: 100%; border-radius: inherit; background: var(--mint); transition: width .3s; }
  .goal-preview dl { display: grid; gap: 13px; margin: 30px 0; }
  .goal-preview dl div { display: flex; justify-content: space-between; gap: 20px; }
  .goal-preview dt { color: #a39a90; }
  .goal-preview dd { text-align: right; font-weight: 700; }
  .goal-preview > p { color: #d6cfc7; line-height: 1.55; }
  .goal-preview .button { width: 100%; margin-top: 26px; }
  .goal-preview > small { display: block; margin-top: 10px; color: #8d857d; text-align: center; }

  .roadmap { padding-block: clamp(62px, 8vw, 106px); }
  .roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .roadmap-grid article { min-height: 210px; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--cream); }
  .roadmap-grid article > div { display: flex; justify-content: space-between; gap: 10px; font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase; }
  .roadmap-grid article > div span { color: var(--muted); }
  .roadmap-grid article > div b { color: var(--accent); }
  .roadmap-grid h3 { margin-top: 28px; font-size: 1.25rem; }
  .roadmap-grid p { min-height: 46px; margin-top: 8px; color: var(--copy); font-size: .88rem; line-height: 1.5; }
  .roadmap-grid button { margin-top: 18px; background: #fff; font-weight: 600; }
  .form-status { min-height: 1.4em; margin-top: 12px; color: var(--green); font-size: .82rem; }

  .reviews { padding-block: clamp(72px, 9vw, 124px); }
  .script-heading h2 { font-family: var(--font-script); font-size: clamp(2.8rem, 5.5vw, 4.5rem); font-weight: 700; letter-spacing: -.02em; }
  .review-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
  .review-grid blockquote { padding-top: 22px; border-top: 1.5px solid var(--ink); }
  .review-grid blockquote > div { color: var(--green); letter-spacing: .12em; }
  .review-grid blockquote p { margin-top: 20px; line-height: 1.62; }
  .review-grid footer { margin-top: 22px; color: var(--muted); font-size: .78rem; }
  .review-grid footer strong { color: var(--ink); }

  .faq { padding-block: clamp(64px, 8vw, 112px); }
  .faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; gap: clamp(36px, 8vw, 104px); align-items: start; }
  .faq .section-heading { margin: 0; }
  .faq .section-heading h2 { font-size: clamp(2.4rem, 5vw, 4rem); }
  .faq .section-heading p { max-width: 34ch; margin-top: 18px; color: var(--copy); line-height: 1.55; }
  .faq .section-heading a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  .faq-item { border-top: 1px solid var(--line); }
  .faq-item:last-child { border-bottom: 1px solid var(--line); }
  .faq-item button { width: 100%; display: flex; justify-content: space-between; gap: 20px; padding: 19px 4px; border: 0; background: transparent; cursor: pointer; text-align: left; font-weight: 700; }
  .faq-item button i { width: 22px; height: 22px; display: grid; place-items: center; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; color: var(--accent); font-style: normal; }
  .faq-item [role="region"] { padding: 0 42px 20px 4px; color: var(--copy); line-height: 1.58; }

  .newsletter { padding-block: 50px; background: var(--ink); color: var(--cream); }
  .newsletter-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 50px; align-items: center; }
  .newsletter h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); }
  .newsletter p { margin-top: 7px; color: #a39a90; }
  .newsletter form { display: grid; grid-template-columns: 1fr auto; padding: 5px; border: 1px solid rgba(250,243,233,.14); border-radius: 999px; background: #221d18; }
  .newsletter input { min-width: 0; padding: 10px 15px; border: 0; outline: 0; background: transparent; color: #fff; }
  .newsletter button { padding: 10px 20px; border: 0; border-radius: 999px; background: var(--cream); color: var(--ink); cursor: pointer; font-weight: 700; }
  .newsletter .form-status { grid-column: 2; margin: 0 10px; }

  .footer-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: .82rem;
  }
  /* Bare marks, no plate behind them. These are the official brand paths, and each one
     carries its own silhouette; the bordered circle they used to sit in competed with that
     silhouette and made three different logos read as three identical buttons. --ink on the
     footer ground measures 15.5:1. */
  .social-icons { display: flex; align-items: center; gap: 18px; margin: 0; padding: 0; list-style: none; }
  .social-icons a,
  .social-icons__pending {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    color: var(--ink);
    transition: color .2s, transform .2s;
  }
  /* The box is the target and it is exactly the 24px minimum, so the mark inside it
     fills it rather than leaving the target smaller than it looks. */
  .social-icons svg { width: 24px; height: 24px; display: block; fill: currentColor; }
  .social-icons a:hover,
  .social-icons a:focus-visible { color: var(--accent); transform: translateY(-2px); }
  /* A url that has not been supplied looks exactly like one that has. Two visible signals
     were tried here - a fade, then a dashed rule - and both read as damage rather than as
     "not linked yet". The state is carried by the title and the accessible name only. */
  .social-icons__pending { cursor: default; }

  @media (prefers-reduced-motion: reduce) {
    .social-icons a:hover { transform: none; }
  }

  /* The content pages: about, terms, privacy, contact. One measured column, no depth
     system, so they read like documents rather than like the shop. */
  .page { background: var(--canvas); }
  .page-shell { width: min(1240px, calc(100% - 40px)); margin: 0 auto; padding-block: clamp(48px, 8vw, 96px) clamp(64px, 9vw, 120px); }
  .prose { max-width: 68ch; }
  /* The page a buyer lands on after checkout. One action, given room. */
  .prose[data-after-checkout] .button { margin-top: 22px; }
  .after-checkout__open { display: block; margin-top: 12px; color: var(--copy); font-size: .85rem; }
  .after-checkout__note { margin-top: 18px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; color: var(--copy); line-height: 1.55; }

  .prose h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.05; letter-spacing: -.03em; font-weight: 700; margin-top: 10px; }
  .prose h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); line-height: 1.25; letter-spacing: -.015em; font-weight: 600; margin-top: clamp(34px, 5vw, 52px); }
  .prose p { margin-top: 16px; color: var(--copy); line-height: 1.7; }
  .prose .lede { margin-top: 22px; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink); }
  .prose-meta { font-family: var(--font-mono); font-size: .76rem; color: var(--muted); }
  .contact-email { font-size: 1.15rem; font-weight: 700; }
  /* :not(.button) is doing real work. This rule beats .button--buy on specificity and
     comes later, so a button placed in prose was painted accent on accent - the download
     button on the after-checkout page had its text at 1:1 against its own background and
     was invisible until hover changed the fill behind it. Scoping the rule to actual
     links fixes that for every button put in prose, now and later. */
  .prose a:not(.button) { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
  /* The social row is a set of brand marks rather than prose links, and was painted
     accent for the same reason: black in the footer, orange in the body of one page. */
  .prose .social-icons a { color: var(--ink); text-decoration: none; }
  .prose .social-icons a:hover,
  .prose .social-icons a:focus-visible { color: var(--accent); }
  .prose-cta { margin-top: clamp(36px, 5vw, 56px); padding-top: 22px; border-top: 1px solid var(--line); }

  .contact-pending strong { color: var(--ink); font-weight: 600; }
  .contact-pending span { color: var(--copy); font-size: .92rem; line-height: 1.6; }

  .social { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; max-width: 42ch; }
  .social li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .social b { color: var(--accent); font-size: .6rem; }
  .social span { font-weight: 600; }
  .social small, .social a { font-size: .86rem; }
  .social small { color: var(--muted); font-style: italic; }
  .social a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

  .site-footer { padding-block: 56px 28px; background: var(--paper); }
  .footer-grid { display: grid; grid-template-columns: 2fr repeat(3,1fr); gap: 48px; }
  .footer-grid > div p { max-width: 28ch; margin-top: 14px; color: var(--muted); font-size: .84rem; line-height: 1.55; }
  .footer-grid nav { display: grid; align-content: start; gap: 9px; color: var(--copy); font-size: .82rem; }
  .footer-grid nav strong { margin-bottom: 4px; color: var(--muted); font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; }
  .copyright { margin-top: 50px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: .74rem; }

  body[data-cart-open] { overflow: hidden; overscroll-behavior: none; }
  /* A buy action reachable from anywhere below the hero. The hero carries its own, so
     this stays away until the hero has gone. */
  .sticky-buy {
    position: fixed;
    /* Below the sticky site header, not on top of it. The offset is measured and written
       by src/ui/sticky-buy.js, because the header's height changes with the viewport; this
       is the no-JavaScript fallback. */
    inset: var(--header-h) 0 auto 0;
    z-index: 70;
    background: rgb(250 248 244 / 85%);
    backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--line);
    transform: translate3d(0, -100%, 0);
    visibility: hidden;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .sticky-buy[data-visible] {
    transform: none;
    visibility: visible;
    transition: transform .3s ease;
  }
  .sticky-buy__inner {
    width: min(1240px, calc(100% - 40px));
    min-height: 52px;
    margin-inline: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
  }
  .sticky-buy p { margin: 0; font-size: .95rem; }
  .sticky-buy p span { color: var(--copy); }
  .sticky-buy__actions { display: flex; align-items: center; gap: 18px; }
  .sticky-buy__actions a { color: var(--accent); font-size: .92rem; }
  .sticky-buy .button--buy { min-height: 36px; padding: 8px 18px; }

  .cart-backdrop { position: fixed; inset: 0; z-index: 108; background: rgba(23,19,15,.42); backdrop-filter: blur(3px); }
  .cart-backdrop[hidden] { display: none; }

  /* One dialog, refilled per product. Native <dialog> so Escape, the backdrop and the
     focus trap are the browser's job rather than a hand-rolled one. */
  /* [open] matters. A bare .product-dialog rule with a display on it beats the browser's
     own dialog:not([open]) { display: none }, and the closed dialog then renders as a
     full-height panel after the footer on every page, with seven focusable controls in
     the tab order and a broken image in it. */
  .product-dialog[open] {
    width: min(1040px, calc(100vw - 28px));
    max-height: min(88vh, 940px);
    /* A flex column with min-height: 0 on the child is what makes the inner column
       actually scroll. With the grid sizing itself to its content instead, the reviews
       and the review form sat below the dialog's own edge and were unreachable: 1184px
       of content inside a 704px dialog, with overflow-y: auto never engaging. */
    display: flex;
    flex-direction: column;
    padding: 0;
    border: 0;
    border-radius: 22px;
    background: var(--surface);
    color: var(--ink);
    overflow: hidden;
  }
  .product-dialog::backdrop { background: rgb(23 19 15 / 52%); }
  .product-dialog__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 0; overflow: hidden; }
  .product-dialog__media { min-width: 0; padding: 22px; background: var(--sunken); }
  .product-dialog__media > img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; background: var(--paper-deep); }
  .product-dialog__thumbs { display: flex; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; flex-wrap: wrap; }
  .product-dialog__thumbs button { width: 72px; height: 52px; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); cursor: pointer; }
  .product-dialog__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .product-dialog__thumbs button[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
  .product-dialog__info { min-width: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 30px 30px calc(30px + env(safe-area-inset-bottom)); }
  .product-dialog__media { align-content: start; overflow-y: auto; }
  .product-dialog__info h2 { margin-top: 4px; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.03em; }
  .product-dialog__info .product-price { margin: 10px 0 0; font-size: 1.35rem; }
  .product-dialog__actions { display: flex; align-items: center; gap: 14px; margin-top: 22px; flex-wrap: wrap; }
  .product-dialog__actions .button { flex: 1 1 200px; }
  .product-dialog__dismiss { position: absolute; top: 14px; right: 14px; z-index: 3; margin: 0; }
  .product-dialog__dismiss button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--ink); font-size: .9rem; cursor: pointer; }
  /* The feature list is written for the dark product card. In here the ground is white. */
  .product-dialog .check-list li { color: var(--copy); }
  .product-dialog .check-list li::before { color: var(--accent); }
  .product-dialog__detail > p, .product-dialog [data-dialog-detail] > p { color: var(--copy); line-height: 1.55; }

  .product-reviews { margin-top: 30px; padding-top: 24px; border-top: 1px solid var(--line); }
  .product-reviews h3 { font-size: 1.1rem; }
  .product-reviews__summary { margin-top: 6px; color: var(--copy); font-size: .88rem; }
  .product-reviews__list { display: grid; gap: 16px; margin: 18px 0 0; padding: 0; list-style: none; }
  .product-reviews__list li { padding: 16px 18px; border: 1px solid var(--line); border-radius: 14px; }
  .product-reviews__list strong { display: block; margin-top: 6px; }
  .product-reviews__list time { display: block; margin-top: 2px; color: var(--muted); font-size: .78rem; }
  .product-reviews__list p { margin-top: 8px; color: var(--copy); line-height: 1.55; }
  .product-reviews__stars { color: var(--accent); letter-spacing: .12em; }
  .product-reviews__empty { margin-top: 16px; color: var(--copy); line-height: 1.55; }

  .review-form { margin-top: 26px; padding-top: 22px; border-top: 1px dashed var(--line); }
  .review-form h4 { font-size: .98rem; }
  .review-form__row { display: grid; gap: 6px; margin-top: 14px; }
  .review-form label { color: var(--copy); font-size: .82rem; font-weight: 600; }
  .review-form input, .review-form select, .review-form textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: 11px;
    background: var(--canvas);
    color: var(--ink);
    font: inherit;
    font-size: .92rem;
  }
  .review-form textarea { resize: vertical; }
  .review-form [aria-invalid="true"] { border-color: var(--accent); }
  .review-form .button { margin-top: 16px; }

  .cart-drawer { position: fixed; top: 0; right: 0; z-index: 110; width: min(430px, 100vw); height: 100dvh; max-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; visibility: hidden; pointer-events: none; transform: translate3d(102%, 0, 0); border-left: 1px solid var(--line); background: var(--paper); box-shadow: -24px 0 60px rgba(23,19,15,.18); transition: transform .28s ease, visibility 0s linear .28s; }
  .cart-drawer.is-open { visibility: visible; pointer-events: auto; transform: translate3d(0, 0, 0); transition-delay: 0s; }
  .cart-drawer > header { display: flex; align-items: center; justify-content: space-between; padding: 22px 24px; border-bottom: 1px solid var(--line); }
  .cart-drawer > header strong { font-size: 1.25rem; }
  .cart-drawer > header button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: #fff; cursor: pointer; }
  .cart-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 24px; }
  .cart-body > p { color: var(--muted); line-height: 1.55; }
  .cart-line { display: grid; grid-template-columns: 58px 1fr auto; gap: 14px; align-items: center; padding-block: 15px; border-bottom: 1px solid var(--line); }
  .cart-line__thumb { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 12px; background: var(--paper-deep); font-family: var(--font-script); color: var(--accent); }
  .cart-line small { display: block; margin-top: 4px; color: var(--muted); }
  .cart-line button { border: 0; background: transparent; color: var(--accent); cursor: pointer; font-size: .8rem; }
  .cart-drawer > footer { position: relative; z-index: 1; padding: 22px 24px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--paper); }
  /* The subtotal row only. This used to match any div in the footer, so the delivery
     panel added later became a flex row and stacked its heading, button and link
     side by side on top of each other. */
  .cart-drawer > footer > div:first-child { display: flex; justify-content: space-between; }
  .cart-drawer > footer > p { margin-top: 9px; color: var(--muted); font-size: .78rem; }
  .cart-drawer > footer .button { width: 100%; margin-top: 18px; }
  .cart-drawer .cart-message { color: var(--accent); line-height: 1.4; }
  /* Shown only when more than one payment platform is configured. */
  .checkout-options { margin-top: 14px; display: grid; gap: 8px; }
  .checkout-options__lead { color: var(--copy); font-size: .8rem; font-weight: 600; }
  .cart-drawer > footer .checkout-options .button { margin-top: 0; }
  /* Appears only once there is something to hand over: after checkout on a free cart, or
     on the way back from the payment provider. */
  .cart-delivery { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .cart-delivery h3 { font-size: .95rem; font-weight: 700; }
  .cart-delivery__pending { margin-top: 10px; color: var(--copy); font-size: .8rem; line-height: 1.45; }
  .noscript { padding: 14px 20px; background: #fff1b8; text-align: center; }
  .noscript a { text-decoration: underline; }
}

/* Unlayered on purpose: scroll-world injects its own late cascade layer. */
:root { --sw-bg: var(--canvas); --sw-ink: var(--ink); }
html { overflow-x: clip; }
body { overflow-x: clip; overflow-y: visible; }
body[data-cart-open] { overflow: hidden; overscroll-behavior: none; }

.scroll-scrub-bridge {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.scroll-scrub-bridge > * { display: none !important; }

[data-depth-act] {
  --depth-z: 0px;
  --depth-y: 0px;
  --depth-rotate-x: 0deg;
  --depth-opacity: 1;
  /* Both planes sit level with the section surface, and the section's own travel carries
     all the depth. Neither offset is available: in front, a plane renders wider than its
     layout box and spills past the gutter, which overflow-x: clip cuts (the comparison
     table lost its first column at 1100px). Behind, a plane is occluded by any painted
     ancestor, and the hero copy disappeared entirely behind the white hero card. */
  --plane-copy: 0px;
  --plane-object: 0px;
  position: relative;
  z-index: 2;
  isolation: isolate;
  transform-style: preserve-3d;
  /* Two separate jobs. The perspective PROPERTY projects this section's inner planes; the
     perspective() FUNCTION projects the section's own translateZ, which the property cannot
     do because a perspective property never applies to the element carrying it. */
  perspective: 820px;
  transform:
    perspective(820px)
    translate3d(0, var(--depth-y), var(--depth-z))
    rotateX(var(--depth-rotate-x));
  transform-origin: center center;
  opacity: var(--depth-opacity);
  backface-visibility: hidden;
  will-change: transform, opacity;
}

/* Occlusion carries most of the perceived depth: the section leaving passes behind the
   section arriving beneath it. */
[data-depth-act][data-depth-state="depart"] { z-index: 1; }
[data-depth-act][data-depth-state="approach"] { z-index: 2; }
[data-depth-act][data-depth-state="read"] { z-index: 3; }

/* These three wrappers sit between a section and its planes. Each defaults to
   transform-style: flat, which collapses the 3D context and discards the plane depth
   before it is ever projected. */
[data-depth-act] .section-shell,
.hero-card,
.goal-layout {
  transform-style: preserve-3d;
}

/* Two planes per section, separated once and never animated. All the movement is the
   section's own transform, so the page animates eleven elements instead of about fifty. */
.hero-copy,
.products .section-heading,
.compare .section-heading,
.inside .section-heading,
.goal-copy,
.roadmap .section-heading,
.reviews .section-heading,
.faq .section-heading,
.newsletter-layout > div,
.footer-grid > div {
  transform: translate3d(0, 0, var(--plane-copy));
  transform-style: preserve-3d;
}

.hero-visual,
.product-grid,
.table-wrap,
.gallery,
#goal-demo .goal-preview,
.roadmap-grid,
.review-grid,
.accordion,
#newsletter-form,
.footer-grid > nav {
  transform: translate3d(0, 0, var(--plane-object));
  transform-style: preserve-3d;
}

@media (max-width: 720px) {
  [data-depth-act] {
    perspective: 640px;
    --plane-copy: 0px;
    --plane-object: 0px;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-depth-act],
  [data-depth-act] * {
    transform: none !important;
    transition: none !important;
    animation: none !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .hero-dashboard-video {
    display: none;
  }

  .sticky-buy { transition: none; }
}

@layer responsive {
  @media (max-width: 980px) {
    .hero-card { grid-template-columns: 1fr; }
    .hero-visual { min-height: 320px; }
    .hero-dashboard-device { width: min(680px, 100%); }
    .goal-layout, .faq-layout { grid-template-columns: 1fr; }
    .faq .section-heading { margin-bottom: 10px; }
  }

  /* The bar carried five links and swapped to the menu button at 720px. With About and
     Contact it carries seven, and they run into the wordmark from about 950px down: the
     nav is nowrap, so it overflows leftwards rather than wrapping. Measured at 721, 800
     and 900px, the links sat on top of the brand. The swap happens earlier now. */
  @media (max-width: 960px) {
    .desktop-nav, .nav-free { display: none; }
    .menu-trigger { display: inline-grid; place-items: center; }
  }

  @media (max-width: 720px) {
    .section-shell, .nav-wrap { width: min(100% - 28px, 1240px); }

    :root { --header-h: 62px; }
    .nav-wrap { min-height: 62px; }
    .site-header .brand { font-size: .9rem; }
    .site-header .brand-mark { width: 27px; height: 27px; }
    .cart-trigger { padding: 7px 9px 7px 11px; font-size: .78rem; }
    .hero { padding-top: 14px; }
    .hero-card { min-height: 0; padding: 25px 20px 18px; border-radius: 22px; gap: 20px; }
    .status-pill { margin-bottom: 18px; font-size: .7rem; }
    .hero h1 { font-size: clamp(2.65rem, 14vw, 4rem); }
    .hero-lede { margin-top: 18px; font-size: .94rem; }
    .button-row { margin-top: 24px; }
    .button-row .button { width: 100%; }
    .rating { margin-top: 22px; gap: 8px 18px; font-size: .74rem; }
    .rating li span { font-size: .7rem; }
    .hero-visual { min-height: 225px; }
    .hero-dashboard-device { width: 100%; }
    .hero-dashboard-shell { transform: perspective(1000px) rotateX(1.5deg) rotateY(-3deg); }
    .hand-note { font-size: 1rem; }
    /* It stays one table on a phone. The 680px floor is what forced the sideways
       scroller, so that goes, and the columns are sized as fractions of whatever width
       there is: the feature a third, the two planners the rest. Everything shrinks
       together instead of anything sliding out of view. */
    .table-wrap { overflow-x: visible; }
    .compare table { min-width: 0; table-layout: fixed; font-size: .78rem; }
    .compare th, .compare td { padding: 11px 9px; overflow-wrap: break-word; }
    .compare thead th:first-child { width: 34%; }
    .compare thead small { margin-top: 2px; font-size: .64rem; }
    /* Which column a value belongs to is stated once, at the top of a table ten rows
       long. Keeping that in view is what makes the middle of it readable. */
    .compare thead th {
      position: sticky;
      top: var(--header-h);
      z-index: 1;
      background: var(--paper);
      font-size: .67rem;
      letter-spacing: .02em;
      vertical-align: bottom;
      box-shadow: inset 0 -1px 0 var(--line);
    }

    .product-grid, .roadmap-grid, .review-grid { grid-template-columns: 1fr; }
    .product-dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; }
    .product-dialog__grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
    .product-dialog__media { padding: 16px; }
    .product-dialog__info { padding: 22px 18px calc(24px + env(safe-area-inset-bottom)); }
    .product-card { padding: 14px; }
    .product-actions { flex-wrap: wrap; }
    .product-actions .button { flex: 1 1 130px; }
    .gallery { grid-template-columns: 1fr; }
    .gallery figure { aspect-ratio: 4 / 3; }
    .goal-fields { grid-template-columns: repeat(2, 1fr); }
    .goal-fields label:last-child { grid-column: 1 / -1; }
    .goal-preview { border-radius: 18px; }
    .roadmap-grid article { min-height: 0; }
    .newsletter-layout { grid-template-columns: 1fr; }
    .newsletter form { margin-top: 16px; }
    .newsletter .form-status { grid-column: 1; }
    .announce { font-size: .74rem; padding: 8px 10px 8px 0; }
    .announce__set { gap: 30px; padding-right: 30px; }
    .product-actions { row-gap: 10px; }
    .how-steps { grid-template-columns: 1fr; gap: 14px; }
    .footer-grid { grid-template-columns: repeat(2,1fr); gap: 36px 24px; }
    .footer-grid > div { grid-column: 1 / -1; }
    .footer-grid nav:last-child { grid-column: 1 / -1; }
    .cart-drawer { width: 100vw; border-left: 0; }
    .sticky-buy__inner { width: min(100% - 28px, 1240px); gap: 12px; }
    .sticky-buy__actions a { display: none; }
    .sticky-buy p strong { display: block; }
    .sticky-buy p { font-size: .85rem; line-height: 1.25; }
    button, .button, a { touch-action: manipulation; }
  }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    /* The rail is stopped by the rule above; these stop it in a readable place. Three
       identical sets printed side by side would say the same four things three times. */
    .announce { padding-inline: 20px; }
    .announce__viewport { mask-image: none; -webkit-mask-image: none; }
    .announce__rail { width: 100%; animation: none; justify-content: center; }
    .announce__set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
    .announce__set:not(:first-child) { display: none; }
    .announce__pause { display: none; }
  }
}