/*
 * The store's design system, extracted from the Claude Design mockups
 * (Simrig webshop expansion — Checkout, Configurator, Order Status, Shop).
 *
 * A plain static file on purpose: served by Apache with no build step, versioned
 * by the ?v= stamp the layout appends. Tokens first — every page works from
 * these, so a retune here restyles the whole store.
 */

:root {
    /* Ink */
    --ink: #141414;
    --ink-soft: #4a4a4a;
    --ink-body: #5d5d5d;
    --ink-quiet: #6e6e6e;
    --ink-mute: #5d5d5d;
    --ink-faint: #9a9a9a;

    /* Surfaces */
    --paper: #fff;
    --paper-dim: #fafafa;
    --paper-head: #f8f8f8;

    /* Lines */
    --line: #e6e6e6;
    --line-soft: #f2f2f2;
    --line-card: #ededed;
    --line-strong: #cfcfcf;
    --frame: #dcd9d5;

    /* Amber — attention, money, "action needed" */
    --accent: #f5a623;
    --accent-ink: #b8770c;
    --accent-deep: #7a4f05;

    /* Quiet informational notes. */
    --note-bg: #fafafa;

    /* Radio and checkbox controls: black dots, whatever the card around them
       highlights with. */
    --radio-accent: #000000;
    --accent-bg: #fffaf0;
    --accent-line: #f0e2c4;

    /* The deeper amber tint of the standing banners and inline notes. */
    --note-bg: #fff8ea;
    --note-line: #f0dcae;
    --accent-tag: #fdf3e2;

    /* Green — good news */
    --ok: #157f3c;
    --ok-deep: #136433;
    --ok-bg: #e9f6ec;

    /* Brand slash */
    --brand-a: #e6007e;
    --brand-b: #e30613;

    --font: "Segoe UI", system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, Menlo, Consolas, monospace;

    --shadow-sheet: 0 18px 40px -28px rgba(0, 0, 0, .35);

    /* The content width every band holds to. Same as the documentation's. */
    --sheet-w: 1180px;
}

/* ---- Base ---------------------------------------------------------------- */

* { box-sizing: border-box; }

/* A <picture> only chooses the file (AVIF, WebP, then the original); it
   draws no box, so every rule that lays out the <img> inside still does. */
picture { display: contents; }

/* Always reserve the scrollbar: short pages and long pages keep the same
   width, so navigating between them never shifts the layout sideways. */
html { overflow-y: scroll; }

/* An open modal owns the screen — the page behind it must not scroll. Covers
   the configurator overlay and the Stripe payment dialog alike. The gutter
   stays reserved, so freezing does not shift the layout either. */
html:has(dialog[open]) { overflow: hidden; scrollbar-gutter: stable; }

body {
    margin: 0;
    background: var(--paper);
    font-family: var(--font);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:hover { color: var(--accent-ink); }

/* Obfuscated contact links (ContactGuard): --cg-w holds the decoded width so
   the label-to-address reveal doesn't reflow the line around it. */
a.cg { display: inline-block; min-width: var(--cg-w, auto); }

h1, h2, h3, p { margin: 0; }

/* ---- The bands ----------------------------------------------------------- */

/* The page is a stack of bands edge to edge — VAT bar, header, main, footer,
   plus the no-shipping notice when it shows — each painting its own background across the full viewport, with the
   content held to the sheet width inside it. Nothing floats on a canvas: the
   main band takes whatever height the footer leaves, so a short page still
   ends in the footer at the bottom of the window. Same construction as the
   documentation's .docs-band. */
.store-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.store-band > * {
    max-width: var(--sheet-w);
    margin: 0 auto;
}

/* Positioned: the phone drawer's panel hangs from this band's bottom edge. */
.store-band-header {
    position: relative;
    background: var(--paper-head);
    border-bottom: 1px solid var(--line);
}

/* Cart and checkout: the pages paint themselves #fbfbfb, and the band wears
   the same tone so it reaches the viewport edge. */
.store-band-main.is-dim { background: #fbfbfb; }

.store-band-main {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.store-band-main > main {
    flex: 1;
    width: 100%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .1);
}

.store-band-footer {
    background: var(--paper-dim);
    border-top: 1px solid var(--line);
}

/* ---- Header -------------------------------------------------------------- */

/* A grid rather than a row of boxes: the three parts are placed explicitly, so
   the menu can be sent to a second row when the first gets tight without the
   others rearranging themselves around it. */
.store-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 24px;
    row-gap: 12px;
    /* Same horizontal inset as the page sections below, so the logo and the
       content left-align. */
    padding: 16px 40px;
}

.store-header > .brand { grid-column: 1; grid-row: 1; }
.store-header > .store-nav { grid-column: 2; grid-row: 1; justify-self: start; }
.store-header > .store-head-right { grid-column: 3; grid-row: 1; justify-self: end; }

/* The real logo, not a redrawing of it. */
.brand { display: flex; text-decoration: none; }

/* Matches the documentation theme's own .brand-logo, so the logo is the same
   size either side of the boundary. max-width defeats any inherited img rule. */
.brand-logo {
    flex: none;
    display: block;
    height: 36px;
    width: auto;
    max-width: none;
}

/* The three doors of the top row. One level of weight per row: the door we
   are behind is the bold one wearing the accent underline. */
.store-nav {
    display: flex;
    align-items: center;
    gap: 22px;
}

.store-nav a {
    padding-bottom: 4px;
    border-bottom: 2px solid transparent;
    font: 600 16px/1 var(--font);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.store-nav a:hover { border-bottom-color: var(--line-strong); }

/* Where we are: bold, and the accent underline. */
.store-nav a[aria-current="page"] {
    font-weight: 700;
    border-bottom-color: var(--accent);
}

/* The burger drawer — the phone's alternative to the second row. A
   <details>: the summary is the burger, the panel drops below the header
   band, and the places inside are rows, the same list one under the other.
   Everything here is display:none until the 720px block turns it on. */
.store-drawer { display: none; position: static; }

.store-drawer > summary {
    display: flex;
    align-items: center;
    list-style: none;
    padding: 6px 6px 6px 0;
    cursor: pointer;
}

.store-drawer > summary::-webkit-details-marker { display: none; }

.drawer-burger { position: relative; display: block; width: 24px; height: 24px; }

.drawer-burger i {
    position: absolute;
    left: 0;
    width: 24px;
    height: 2px;
    background: var(--ink);
}

.drawer-burger i:nth-child(1) { top: 5px; }
.drawer-burger i:nth-child(2) { top: 11px; }
.drawer-burger i:nth-child(3) { top: 17px; }

/* Open, the burger is the ×. */
.store-drawer[open] .drawer-burger i:nth-child(1) { top: 11px; transform: rotate(45deg); }
.store-drawer[open] .drawer-burger i:nth-child(2) { opacity: 0; }
.store-drawer[open] .drawer-burger i:nth-child(3) { top: 11px; transform: rotate(-45deg); }

/* The panel hangs from the header band, full width, over the page. */
.store-drawer-panel {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 30;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 24px 40px -24px rgba(0, 0, 0, .35);
}

/* One row per place, tall enough for a thumb; the page we are on is the
   bold one wearing the accent edge. */
.store-drawer-panel a {
    display: flex;
    align-items: center;
    min-height: 52px;
    padding: 0 18px;
    border-bottom: 1px solid var(--line-card);
    font: 600 16px/1 var(--font);
    color: var(--ink);
    text-decoration: none;
}

.store-drawer-panel a:last-child { border-bottom: 0; }

.store-drawer-panel a[aria-current="page"] {
    font-weight: 700;
    border-left: 3px solid var(--accent);
    padding-left: 15px;
}

/* The second row — every place, on every page: the site's map under the
   three doors, plain text on white, the page we are on weighted. A phone
   folds it into the drawer. */
.store-band-subnav { background: var(--paper); border-bottom: 1px solid var(--line-card); }

.store-subnav {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 12px 40px;
}

.store-subnav a {
    font: 400 14px/1 var(--font);
    color: var(--ink-body);
    text-decoration: none;
    white-space: nowrap;
}

.store-subnav a:hover { color: var(--ink); }

.store-subnav a[aria-current="page"] { font-weight: 600; color: var(--ink); }

/* Stretch, not center: the tallest control sets the row and the others adopt
   it — see .btn-cart, which drops its vertical padding so the count badge can
   never inflate it past the row, and carries the chip's height as a min-height
   instead, because checkout and the region panel render it without the chip. */
.store-head-right {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

/* ---- Footer -------------------------------------------------------------- */

.store-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 24px;
    justify-content: space-between;
    padding: 22px 36px;
    font: 400 12px/1.6 var(--font);
    color: var(--ink-mute);
}

/* ---- Buttons ------------------------------------------------------------- */

.btn {
    display: inline-block;
    padding: 13px 20px;
    font: 600 14px/1 var(--font);
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: 1px solid transparent;
    background: none;
}

/* The text input, formalized from the configurator's field: quiet gray at
   rest, the amber ring marking the active field on focus — never a yellow
   border at rest. .cfg-field and .co-field spell the same look with their
   own sizes; new fields wear this class instead of a new spelling. */
.input {
    padding: 13px 14px;
    background: var(--paper);
    border: 1px solid var(--line-strong);
    font: 400 15px/1.4 var(--font);
    color: var(--ink);
}

.input:focus { outline: none; border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.input.is-invalid { border-color: #c0392b; }

.btn-primary {
    background: var(--ink);
    color: #fff;
}

.btn-primary:hover { color: var(--accent); background: #000; }
/* A door held shut — the cart's checkout while a line cannot be ordered. */
.btn[disabled] { opacity: .55; cursor: default; pointer-events: none; }
.rail-note { margin: 10px 0 0; font: 400 13px/1.45 var(--font); color: var(--ink-quiet); }

.btn-secondary { border-color: var(--ink); color: var(--ink); }
.btn-secondary:hover { color: var(--accent-ink); }

.btn-ghost { border-color: var(--line-strong); color: #333; }
.btn-ghost:hover { color: var(--accent-ink); }

/* ---- Badges -------------------------------------------------------------- */

.badge {
    display: inline-block;
    padding: 4px 10px;
    font: 700 11px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.badge-warn { background: var(--accent-tag); color: var(--accent-deep); }

.badge-ok { background: var(--ok-bg); color: var(--ok-deep); }

/* ---- Building blocks ----------------------------------------------------- */

.card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--paper);
}

/* The amber "action needed" panel — How to pay, and its relatives. */
.panel-accent {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px;
    border: 2px solid var(--accent);
    background: var(--accent-bg);
}

/* Label-over-value cell, monospace value — payment details, references. */
.kv {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0; /* it is a <dl>, which browsers otherwise indent */
    padding: 14px 16px;
    background: var(--paper);
    border: 1px solid var(--accent-line);
}

.kv dt {
    font: 600 11px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin: 0;
}

.kv dd {
    font: 600 15px/1.4 var(--mono);
    color: var(--ink);
    margin: 0;
}

.eyebrow {
    font: 600 12px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

/* ---- Region chip ----------------------------------------------------------- */

/* Country, language and VAT display in one control, stating the answer the
   region panel exists to change. It replaced a black bar carrying a select of
   every country on earth — the panel owns that list now. */

.region-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    font: 400 15px/1 var(--font);
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
}

.region-chip:hover { border-color: var(--ink); }

.region-chip-code {
    font: 700 12px/1 var(--mono);
    letter-spacing: .06em;
}

.region-chip-rule {
    width: 1px;
    height: 13px;
    background: var(--line-strong);
}

.region-chip-vat { color: var(--ink-body); }

.region-chip-caret { color: var(--accent); font-size: 11px; }

/* ---- Standing banners ------------------------------------------------------ */

/* A standing condition about the visitor — we cannot ship where they are, or
   prices are business prices — worn above the chrome, not among the page's
   own messages: it was true before the page said anything. Mockup 1b's strip:
   cream band, amber label, and the one action that ends the condition on the
   right. */
.store-band-standing { background: var(--note-bg); border-bottom: 1px solid var(--note-line); }

.standing-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 40px;
}

.standing-banner-lead {
    display: flex;
    gap: 12px;
    margin: 0;
    font: 400 14px/1.5 var(--font);
    color: #3a3a3a;
}

.standing-banner-label {
    font: 700 13px/1.5 var(--font);
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--accent-ink);
    white-space: nowrap;
}

/* One class for both shapes the action takes, so a link and a button in this
   strip read identically. */
.standing-banner-action {
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    font: 600 14px/1.5 var(--font);
    color: var(--accent-ink);
    white-space: nowrap;
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Checkout's step rail as a band: the band owns the white and the rule edge
   to edge; the rail inside is a normal band child held to the sheet, so it
   sheds the border .cfg-tabs carries for its in-card life. */
.store-band-rail { background: var(--paper); border-bottom: 1px solid var(--line-card); }

.store-band-rail .cfg-tabs { border-bottom: 0; }

/* The notice bands @yield('notices') mounts under the header: the band owns
   the color and the rule so both run edge to edge; the strip inside is a
   normal band child, held to the sheet. */
.store-band-ok { background: var(--ok-bg); border-bottom: 1px solid #cfe6d5; }

.store-band-warn { background: var(--accent-bg); border-bottom: 1px solid var(--accent-line); }

.store-band-problem { background: #fdecea; border-bottom: 1px solid #efc7c3; }

/* ---- Header cart badge ---------------------------------------------------- */

/* Sized to sit level with the region chip. No vertical padding — the 18px
   count badge must fit inside without inflating the row — so the chip's height
   (9px padding ×2 + 15px line + 1px border ×2) rides along as a min-height,
   which is what holds the row up on the pages that omit the chip. */
.btn-cart {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0 16px;
    font-size: 15px;
    min-height: 35px;
}

.cart-count {
    min-width: 18px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--accent);
    color: var(--ink);
    font: 700 12px/18px var(--font);
    text-align: center;
}

/* ---- Catalog --------------------------------------------------------------- */

/* Top padding matches .site-page and .home-section — crossing between the
   shop and the site must not make the first thing on screen jump. */
.catalog {
    display: flex;
    flex-direction: column;
    gap: 34px;
    padding: 48px 40px;
}

.catalog-intro { display: flex; flex-direction: column; gap: 10px; }

.catalog-intro h1 { font: 700 34px/1.1 var(--font); }

/* A second section under the rigs (the belt tensioners) opens on the rule
   and heading the accessories use. */
.catalog-intro.is-next { padding-top: 14px; border-top: 1px solid var(--line); }

.catalog-intro h2 { font: 700 28px/1.1 var(--font); }

.catalog-intro p {
    max-width: 640px;
    font: 400 15px/1.55 var(--font);
    color: var(--ink-body);
}

.motion-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.motion-card, .accessory-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    background: var(--paper);
}

.card-media {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    display: block;
}

.card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.media-placeholder {
    width: 100%;
    height: 100%;
    background: repeating-linear-gradient(135deg, #f1f1f1 0 10px, #e7e7e7 10px 20px);
}

/* The main gallery image invites the zoom once the lightbox is wired. */
.gallery-main img.is-zoomable { cursor: zoom-in; }

/* A picture down the page that opens in the lightbox (product-zoom.js). */
.zoom-link { display: block; cursor: zoom-in; }

.stock-flag {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 9px;
    border-radius: 2px;
    background: var(--ok);
    color: #fff;
    font: 600 12px/1 var(--font);
}

.stock-flag.is-backorder { background: var(--accent-ink); }
.stock-flag.is-off { background: var(--ink-mute); }

.card-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 18px 20px 20px;
    flex: 1;
}

.card-grow { flex: 1; }

.card-body h3 { font: 700 19px/1.2 var(--font); }

.accessory-card .card-body h3 { font-size: 15px; line-height: 1.3; }

.card-sub {
    font: italic 400 14px/1.45 var(--font);
    color: var(--ink-quiet);
    margin-top: 4px;
}

.accessory-card .card-sub { font-size: 13px; }

.card-price { display: flex; flex-direction: column; gap: 2px; }

.card-price strong { font: 700 20px/1 var(--font); }

.card-price span { font: 400 12px/1.3 var(--font); color: var(--ink-mute); }

.card-bullets {
    margin: 0;
    padding: 4px 0 0;
    border-top: 1px solid #eee;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.card-bullets li {
    display: flex;
    gap: 8px;
    font: 400 13px/1.4 var(--font);
    color: var(--ink-soft);
}

.card-bullets li::before { content: "—"; color: var(--accent); }

.card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.card-meta strong { font: 700 16px/1 var(--font); }

.stock-note { font: 600 11px/1 var(--font); color: var(--ok); }

.stock-note.is-backorder { color: #9a3a3a; }
.stock-note.is-off { color: var(--ink-mute); }

.card-actions { display: flex; gap: 8px; margin-top: 6px; }

.card-actions form { flex: 1; display: flex; }

/* Flexed and centered: when a translated label wraps the row taller, the
   shorter sibling's text stays vertically centered rather than top-hung. */
.card-actions .btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.card-actions .btn-ghost { flex: none; }

.accessories {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
}

.accessories-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

/* Alone on a category page the section is the page: no divider against a
   motion grid that is not there. */
.accessories.is-page { border-top: 0; padding-top: 0; }

.accessories-head h1,
.accessories-head h2 { font: 700 28px/1.1 var(--font); }

.accessories-head p {
    font: 400 15px/1.5 var(--font);
    color: var(--ink-body);
    margin-top: 6px;
}

.chip-row { display: flex; gap: 8px; flex-wrap: wrap; }

.chip {
    padding: 8px 14px;
    border: 1px solid var(--line-strong);
    font: 400 13px/1 var(--font);
    color: #333;
    text-decoration: none;
}

.chip.is-active {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 600;
}

.accessory-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

/* ---- Product page ---------------------------------------------------------- */

/* Same first-element height as the catalog and the site pages: the crumb
   stands where their kickers do. The side gutter is not the page's: each
   block below carries it, the way the home page's sections carry theirs, so
   a section that paints a background (is-dim, is-dark) paints it to the
   sheet edge while its words keep to the column. */
.product-page {
    --gutter: 40px;
    display: flex;
    flex-direction: column;
    gap: 30px;
    padding: 48px 0;
}

.product-grid,
.product-body > * { padding-inline: var(--gutter); }

.product-grid {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 40px;
    align-items: start;
}

.gallery { display: flex; flex-direction: column; gap: 12px; }

.gallery-main {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid #e0e0e0;
}

.gallery-main img, .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-main .media-placeholder { height: 100%; }

.thumb-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.thumb {
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border: 1px solid #e0e0e0;
    display: block;
}

.thumb.is-selected { border: 2px solid var(--ink); }

.buybox {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 26px;
    border: 1px solid #e0e0e0;
    background: var(--paper);
}

.buybox-head { display: flex; flex-direction: column; gap: 8px; }

.buybox-head h1 { font: 700 32px/1.1 var(--font); }

.buy-flags { display: flex; align-items: center; gap: 10px; }

.stock-chip {
    padding: 4px 9px;
    border-radius: 2px;
    background: var(--ok);
    color: #fff;
    font: 600 12px/1 var(--font);
}

.stock-chip.is-backorder { background: var(--accent-ink); }

.stock-chip.is-off { background: var(--ink-mute); }

.buy-lead { font: 400 13px/1 var(--font); color: var(--ink-quiet); }

.buy-price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 18px;
    border-bottom: 1px solid #ececec;
}

.buy-price strong { font: 700 30px/1 var(--font); }

.buy-price span { font: 400 13px/1 var(--font); color: var(--ink-quiet); }

.buy-form { display: flex; gap: 12px; align-items: stretch; }

.qty-field {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line-strong);
    padding: 0 12px;
    font: 400 13px/1 var(--font);
    color: var(--ink-quiet);
}

.qty-field input {
    width: 52px;
    border: 0;
    font: 600 15px/1 var(--font);
    text-align: center;
    outline: none;
}

.btn-buy { flex: 1; font-size: 16px; padding: 15px 10px; }

/* The save button is wrapped in a form, so the form takes the place the
   checkout link would hold and hands the full width down to its button. */
.cart-save { display: flex; }

.buy-note { font: 400 13px/1.5 var(--font); color: var(--ink-quiet); margin-top: -8px; }

/* Under the hero's sentence: what ships with the system and what does not. */
.buy-included { font: 400 13px/1.5 var(--font); color: var(--ink-quiet); }

.trust-list {
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid #ececec;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font: 400 13px/1.4 var(--font);
    color: var(--ink-soft);
}

.prose {
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.prose p { font: 400 16px/1.65 var(--font); color: #3f3f3f; text-align: justify; }

.prose h2 { font: 700 22px/1.2 var(--font); margin-top: 12px; }

.prose h3 { font: 700 18px/1.25 var(--font); margin-top: 10px; }

.box-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.box-list li {
    display: flex;
    gap: 10px;
    font: 400 14px/1.5 var(--font);
    color: #3f3f3f;
    padding-bottom: 7px;
    border-bottom: 1px solid var(--line-soft);
}

.box-list strong { min-width: 32px; }

/* Mockup 1b: the in_the_box-tagged image beside the list. Without a shot the
   split is just the list, unchanged. */
.box-split.has-shot {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 20px;
    align-items: start;
}

.box-shot { width: 100%; display: block; border: 1px solid #e0e0e0; }

/* The portrait assembly film, sized by its own height so the split's first
   column takes exactly the width it needs. */
.product-video { height: 380px; width: auto; display: block; border-radius: 10px; }

/* The two flags under the words: a small mark, not a picture. The hairline
   keeps the Swedish flag's blue off the dim panel's grey. */
.tested-flags {
    display: block;
    width: 93px;
    height: auto;
    margin-top: 2px;
    border: 1px solid var(--line-card);
}

/* ---- Product page: reviews (1b) -------------------------------------------- */

.reviews { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; }

.reviews-head { display: flex; flex-direction: column; gap: 14px; }

.reviews-head h2 { font: 700 22px/1.2 var(--font); }

.review-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* ---- Product page: composed sections and the aside ------------------------ */

/* The lower half is a column of sections, with an aside beside it when the
   template supplies one. One class for the whole lower half: the sections
   run down it in a single column, under a rule that separates them from the
   buy box above. */
.product-body {
    display: flex;
    flex-direction: column;
    gap: 50px;
    min-width: 0;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}

/* The mounting cards share the column's width, two to a row, spaced like
   .split-even so they stand square under a pair of columns above them. */
.product-body .home-mount-cards { grid-template-columns: repeat(2, 1fr); gap: 20px; }

.product-section { display: flex; flex-direction: column; gap: 14px; }

.product-section h2 { font: 700 22px/1.2 var(--font); }

.product-section h2.is-lead { font-size: 24px; }

/* A section's tagline under its title (the prose partial's lede), set as
   display type, and the points inside a body (#### in the copy). */
.section-lede { max-width: 760px; font: 800 clamp(30px, 3.4vw, 50px)/.98 var(--font); text-transform: uppercase; text-wrap: balance; }

.prose h4 { font: 700 15px/1.3 var(--font); letter-spacing: .06em; text-transform: uppercase; margin-top: 10px; }

/* A section on a band of its own, edge to edge of the sheet the way
   .home-section.is-dim reads on the marketing pages: the gutter already
   holds its words to the column, so a band is a background and room above
   and below. is-dark is the home hero's ink, for a section that should
   stand out the way the hero does. */
.product-section.is-dim,
.product-section.is-dark { padding-block: 44px; }

.product-section.is-dim { background: var(--paper-dim); }

.product-section.is-dark { background: var(--ink); color: #fff; }

.product-section.is-dark .prose p,
.product-section.is-dark .prose li { color: #e4e1dd; }

.product-section.is-dark .prose a,
.product-section.is-dark .prose a:hover { color: #fff; }

.product-section.is-dark .prose-shot figcaption { color: #b9b4ae; }

.product-section.is-dark .prose-shot img { border-color: #2b2b2b; }

.product-section.is-dark .section-lede,
.product-section.is-dark .prose strong { color: #fff; }

/* The buttons under the words take the hero's outline, not ink on ink. */
.product-section.is-dark .btn-secondary { border-color: rgba(255, 255, 255, .5); color: #fff; }

.product-section.is-dark .btn-secondary:hover { border-color: #fff; color: #fff; }

/* Two columns where the left takes the width it needs and the right takes
   what is left: a media column beside its words. Declared after
   .product-section on purpose — a section is a stack by default and these
   two carry the same weight, so the one further down decides. The second
   column keeps the stack the section would have given it. */
.split-auto {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 32px;
    align-items: center;
}

.split-auto > :last-child { display: flex; flex-direction: column; gap: 14px; }

/* Its even twin: two columns of the same width, for a pair of things that
   rank equally. Same reason it is declared here — a section is a stack
   until something further down the file says otherwise. */
.split-even { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

/* A picture beside a section's prose: the text keeps its measure and the
   picture takes the width the measure leaves, top-aligned with the first
   paragraph. */
.prose-beside {
    display: grid;
    grid-template-columns: minmax(0, 720px) minmax(260px, 1fr);
    gap: 32px;
    align-items: start;
}

.prose-shot { margin: 0; display: flex; flex-direction: column; gap: 10px; }

/* The media block: the picture first, the words centred beside it. The
   markup keeps the words first, so a reader without styles gets them first;
   stacked on a phone the picture still leads. */
.is-media-left { align-items: center; }

.is-media-left > .prose-shot { order: -1; }

.prose-shot img { width: 100%; height: auto; display: block; border: 1px solid #e0e0e0; }

.prose-shot figcaption { font: italic 400 13px/1.5 var(--font); color: var(--ink-mute); }

/* 2a: the three numbers that matter, under the opening prose. */
.stat-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 4px; }

.stat-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px; background: var(--paper-dim); }

.stat-tile strong { font: 700 26px/1 var(--font); }

.stat-tile span { font: 400 13px/1.35 var(--font); color: var(--ink-quiet); }

/* 2a: the specification, a Markdown table in the copy slot, with its
   footnotes as the list after it. */
.prose table { width: 100%; border: 1px solid var(--line); border-collapse: collapse; }

.prose thead { display: none; }

.prose tbody tr:nth-child(even) { background: var(--paper-dim); }

.prose td { padding: 11px 16px; border-bottom: 1px solid var(--line-soft); font: 400 14px/1.45 var(--font); vertical-align: top; text-wrap: pretty; }

.prose td:first-child { width: 190px; font-weight: 600; color: #3f3f3f; }

.prose ol, .prose ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }

.prose li { font: 400 14px/1.55 var(--font); color: var(--ink-body); }

.prose table + ol li { font-size: 12.5px; color: var(--ink-mute); }

/* The shared bands (supported simulators) sit in the column at the
   sections' scale, not the home page's. */
.product-section .home-section-head h2 { font-size: 22px; }

.product-section .home-section-head p { font-size: 14px; }

.product-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.aside-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 22px;
    border: 1px solid #e0e0e0;
    background: var(--paper);
}

.aside-card.is-dim { background: var(--paper-dim); border-color: var(--line-card); }

.aside-card h3 { font: 700 17px/1.2 var(--font); }

.aside-card h4 { margin: 0; font: 700 14px/1.3 var(--font); }

.aside-card p, .aside-card li { font: 400 13.5px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.aside-figure { display: block; width: 100%; height: auto; }

/* A titled paragraph inside a card; ruled ones stack like a list. */
.aside-block { display: flex; flex-direction: column; gap: 5px; }

.aside-block.is-ruled { padding-bottom: 12px; border-bottom: 1px solid var(--line-soft); }

.aside-card .btn { align-self: flex-start; }

.aside-links { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 4px; }

.aside-link { font: 600 13.5px/1.3 var(--font); }

/* The guide rows, this page's own system on the accent bar. */
.guide-rows { display: flex; flex-direction: column; gap: 8px; }

.guide-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    background: var(--paper);
    border-left: 2px solid var(--line-strong);
}

.guide-row.is-this { border-left-color: var(--accent); }

.guide-row strong { font: 700 13px/1 var(--font); }

.guide-row span { font: 400 13px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

/* The FAQ: native disclosure, no script, the answers Markdown. */
.faq { display: flex; flex-direction: column; gap: 14px; padding-top: 26px; border-top: 1px solid var(--line); }

.faq h2 { font: 700 22px/1.2 var(--font); }

.faq-list { display: flex; flex-direction: column; max-width: 760px; border-top: 1px solid var(--line); }

.faq-item { border-bottom: 1px solid var(--line); }

.faq-item summary {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    cursor: pointer;
    list-style: none;
    font: 600 15px/1.4 var(--font);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after { content: '+'; flex: 0 0 auto; color: var(--ink-mute); font-weight: 400; }

.faq-item[open] summary::after { content: '−'; }

.faq-answer { display: flex; flex-direction: column; gap: 10px; padding: 0 0 16px; }

.faq-answer p, .faq-answer li { font: 400 14.5px/1.6 var(--font); color: var(--ink-body); }

.faq-more { font: 400 14px/1.5 var(--font); color: var(--ink-body); }

/* The card wears the news video card's manners: ink border on hover, and
   the shared .news-play plate (defined with the news article styles) that
   turns accent when the card is hovered. */
.review-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    background: var(--paper);
    text-decoration: none;
    color: inherit;
}

.review-card:hover { border-color: var(--ink); }

.review-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--ink);
    overflow: hidden;
}

.review-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.review-lang {
    position: absolute;
    left: 8px;
    top: 8px;
    padding: 3px 7px;
    background: var(--accent);
    color: var(--ink);
    font: 700 11px/1 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.review-body { display: flex; flex-direction: column; gap: 5px; padding: 13px 14px; }

.review-channel { font: 700 14px/1.3 var(--font); }

.review-blurb { font: 400 13px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

/* ---- Product page told as a story (designs "SBM Product Page v4", "SR3
   Product Page v2"): the page class is-story, the blocks story-*. -------- */

/* The page is its hero and its bands, edge to edge of the sheet: no gutter
   or gap of the page's, no rule under a buy box, the closing band running
   to the footer. Every section holds its words to the gutter itself. */
.product-page.is-story { --gutter: 48px; gap: 0; padding: 0; }

.product-page.is-story .product-body { gap: 0; padding-top: 0; border-top: 0; }

/* What runs edge to edge holds its words to the gutter inside itself. */
.product-page.is-story .product-body > .story-offer { padding: 18px var(--gutter); }

.product-page.is-story .product-body > .story-facts,
.product-page.is-story .product-body > .story-band,
.product-page.is-story .product-body > .story-parts,
.product-page.is-story .product-body > .story-final { padding-inline: 0; }

.product-page.is-story .product-body > .product-section { padding: 64px var(--gutter); gap: 24px; }

/* The reviews keep a story section's rhythm: the section's own padding
   above, and the cards as far under the headline as any section's body. */
.product-page.is-story .reviews { gap: 34px; padding-top: 0; }

/* The small capital over every headline: accent ink on paper, the accent
   itself on ink. */
.story-kicker { font: 700 12.5px/1 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--accent-ink); }

.story-section h2,
.story-band h2,
.product-page.is-story .product-body > .product-section h2 { font: 700 34px/1.1 var(--font); letter-spacing: -.01em; max-width: 16ch; text-wrap: balance; }

.story-section h2.is-small { font-size: 30px; line-height: 1.15; max-width: 17ch; }

/* The hero: the module from behind fills it, its black half under the
   words; the buy card sits on the photograph. */
.story-hero { position: relative; overflow: hidden; background: #000; color: #fff; }

.story-hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; }

.story-hero-inner { position: relative; display: flex; flex-direction: column; gap: 32px; max-width: 640px; min-height: 600px; padding: 34px var(--gutter) 48px; }

.story-hero-head { flex: 1; display: flex; flex-direction: column; justify-content: space-between; gap: 22px; }

.story-hero .breadcrumb,
.story-hero .breadcrumb a { color: #bdb8b1; text-decoration: none; }

.story-hero .breadcrumb a:hover { color: #fff; }

.story-hero-words { display: flex; flex-direction: column; gap: 14px; }

.story-hero .story-kicker { color: var(--accent); }

.story-hero h1 { margin: 0; font: 700 56px/1 var(--font); letter-spacing: -.02em; max-width: 14ch; text-wrap: balance; }

.story-hero-words > p:last-child { font: 400 17px/1.55 var(--font); color: #e2ded8; max-width: 46ch; text-wrap: pretty; }

.story-buy { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 16px; }

.story-buy-flags { display: flex; align-items: center; gap: 10px; font: 400 13px/1 var(--font); color: #bdb8b1; }

.story-buy-label { margin-bottom: 6px; font: 700 12.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #a5a09a; }

.story-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 9px; }

.story-price strong { font: 700 34px/1 var(--font); }

.story-price span { font: 400 14px/1 var(--font); color: #bdb8b1; }

.story-buy-form { display: flex; gap: 9px; margin: 0; }

.story-qty { display: flex; align-items: center; border: 1px solid rgba(255, 255, 255, .4); }

.story-qty button { align-self: stretch; width: 36px; border: 0; background: none; color: #fff; font: 400 17px/1 var(--font); cursor: pointer; }

.story-qty input { width: 30px; padding: 0; border: 0; background: none; color: #fff; text-align: center; font: 600 15px/1 var(--font); appearance: textfield; -moz-appearance: textfield; }

.story-qty input::-webkit-outer-spin-button,
.story-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.story-btn-accent { flex: 1; padding: 15px; border: 0; background: var(--accent); color: var(--ink); font: 700 16px/1 var(--font); }

.story-btn-accent:hover { background: #e59b16; color: var(--ink); }

.story-btn-accent:disabled,
.story-btn-accent:disabled:hover { background: #3a3a3a; color: #a5a09a; cursor: not-allowed; }

.story-reassurance { font: 400 13px/1.5 var(--font); color: #bdb8b1; }

/* The introductory price, for those who came in on the unlock link. */
.story-offer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; background: var(--accent); color: var(--ink); }

.story-offer strong { font: 700 17px/1.3 var(--font); }

.story-offer span { font: 400 15px/1.4 var(--font); }

/* The trust strip on ink under the hero. */
.story-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); background: var(--ink); border-top: 1px solid #2a2a2a; }

.story-facts > div { display: flex; flex-direction: column; gap: 5px; padding: 20px 28px; border-left: 1px solid #2a2a2a; }

.story-facts strong { font: 700 20px/1 var(--font); color: #fff; }

.story-facts span { font: 400 13px/1.4 var(--font); color: #a5a09a; }

/* A section on paper, ink or the accent: its headline beside its words,
   then what it lays out under them. */
.story-section { display: flex; flex-direction: column; gap: 34px; padding: 64px var(--gutter); }

.story-heading,
.story-head > div:first-child { display: flex; flex-direction: column; gap: 14px; }

.story-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 24px 56px; align-items: start; }

.story-head > .story-text { padding-top: 26px; }

.story-text { display: flex; flex-direction: column; gap: 14px; }

.story-text p { font: 400 16px/1.6 var(--font); color: #3a3a3a; text-wrap: pretty; }

/* An all-bold paragraph is the section's lead. */
.story-text strong { font-weight: 600; color: var(--ink); }

.story-lead { font: 600 16.5px/1.6 var(--font); color: var(--ink); max-width: 40ch; text-wrap: pretty; }

.story-section.is-dark { gap: 30px; background: var(--ink); color: #fff; }

.story-section.is-dark .story-kicker,
.story-band.is-dark .story-kicker { color: var(--accent); }

.story-section.is-dark h2,
.story-band.is-dark h2 { color: #fff; }

.story-section.is-dark .story-text p { color: #e2ded8; }

.story-section.is-dark .story-text strong,
.story-band.is-dark .story-text strong { color: #fff; }

.story-section.is-dark .story-text p.is-quiet { color: #a5a09a; }

.story-section.is-dark .story-text a,
.story-section.is-dark .story-text a:hover { color: #fff; }

.story-section.is-accent { background: var(--accent); }

.story-section.is-accent .story-kicker,
.story-section.is-accent .story-text p { color: var(--ink); }

/* The intro's figures, ruled like a table under a heavy line. */
.story-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1px; background: #e2e0dd; border-top: 2px solid var(--ink); }

.story-numbers > div,
.story-linear-stats > div { display: flex; flex-direction: column; gap: 8px; padding: 28px 26px 32px; background: var(--paper); }

.story-numbers strong,
.story-linear-stats strong { font: 700 42px/1 var(--font); letter-spacing: -.02em; }

.story-numbers span,
.story-linear-stats span { font: 400 14.5px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

/* A band: a photograph filling one half, the words in the other. The
   reverse wraps the picture above the words when the halves stack. */
.story-band { display: flex; flex-wrap: wrap; }

.story-band.is-reverse { flex-wrap: wrap-reverse; }

.story-band.is-light { background: #f6f5f3; border-block: 1px solid #e6e4e1; }

.story-band.is-dark { background: var(--ink); color: #fff; }

.story-band > .story-fill { flex: 1 1 380px; min-height: 420px; }

.story-band-copy { flex: 1.15 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 64px var(--gutter); }

.story-band-copy .story-text p { max-width: 48ch; }

.story-band-copy > div:has(> .btn) { padding-top: 8px; }

.story-fill { position: relative; margin: 0; overflow: hidden; background: var(--ink); }

.story-fill a,
.story-fill img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }

.story-fill img { object-fit: cover; }

.story-fill.is-box { min-height: 460px; background: #e9e8e6; }

/* Points behind a dash, ruled; the small ones in a card, unruled. */
.story-dashes { display: flex; flex-direction: column; margin: 8px 0 0; padding: 0; list-style: none; }

.story-dashes li { display: flex; gap: 14px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid #e2e0dd; font: 400 16px/1.5 var(--font); color: #2e2e2e; }

.story-dashes li::before { content: "—"; flex: none; color: var(--accent-ink); font: 700 13px/1.5 var(--font); }

.story-dashes.is-small { gap: 4px; margin: 0; padding-top: 4px; }

.story-dashes.is-small li { gap: 10px; padding: 0; border: 0; font-size: 14.5px; }

.story-dashes.is-small li::before { font-weight: 400; font-size: 14.5px; }

/* Linear actuation: the hook photo beside its two figures. */
.story-linear { display: flex; flex-wrap: wrap; gap: 1px; background: #e2e0dd; border: 1px solid #e2e0dd; }

.story-linear > .story-fill { flex: 1.4 1 380px; min-height: 320px; }

.story-linear-stats { flex: 1 1 260px; display: flex; flex-direction: column; gap: 1px; }

.story-linear-stats > div { flex: 1; justify-content: flex-end; padding: 28px 26px; }

.story-linear-stats > div::before,
.story-cards article::before { content: ""; width: 28px; height: 3px; background: var(--accent); }

/* The complete system's cards, ruled like a table. */
.story-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1px; background: #e2e0dd; border: 1px solid #e2e0dd; }

.story-cards.is-narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }

.story-cards article { display: flex; flex-direction: column; gap: 9px; padding: 26px 28px 30px; background: var(--paper); }

.story-card-eyebrow { font: 700 12.5px/1.2 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #8a8a8a; }

.story-cards h3 { font: 700 19px/1.2 var(--font); }

.story-cards p:not(.story-card-eyebrow) { font: 400 15px/1.55 var(--font); color: var(--ink-body); text-wrap: pretty; }

/* SIMRIG Control Center's three steps, each bar filled a little further. */
.story-levels { display: flex; flex-wrap: wrap; gap: 1px; background: #2a2a2a; border: 1px solid #2a2a2a; }

.story-levels article { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 30px; background: var(--ink); }

.story-level-n { font: 700 13px/1 var(--mono); color: var(--accent); }

.story-levels h3 { font: 700 26px/1 var(--font); color: #fff; }

.story-levels p { font: 400 15px/1.55 var(--font); color: #a5a09a; text-wrap: pretty; }

.story-track { height: 3px; margin-top: 6px; background: #2a2a2a; }

.story-track span { display: block; height: 100%; background: #8f8a84; }

.story-track.is-hot span { background: var(--accent); }

/* A label beside its sentence, ruled above: the adjustments, what runs
   underneath the software, the quiet points. */
.story-rows { display: flex; flex-direction: column; }

.story-rows > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 20px; padding: 14px 0; border-top: 1px solid #e2e0dd; }

.story-rows.is-narrow > div { grid-template-columns: 140px minmax(0, 1fr); }

.story-rows.is-wide > div { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 6px 20px; }

.story-rows h3 { font: 600 15px/1.35 var(--font); }

.story-rows p { font: 400 14.5px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

.story-section.is-dark .story-rows > div { border-top-color: #2a2a2a; }

.story-section.is-dark .story-rows p { color: #a5a09a; }

/* The supported games as icons, the rest behind a closing tile. */
.story-games-body { font: 400 16px/1.6 var(--font); color: #3a3a3a; text-wrap: pretty; }

.story-games { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 16px 12px; padding-top: 26px; }

.story-games > * { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; text-decoration: none; }

.story-games img,
.story-games strong { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }

.story-games strong { background: var(--ink); color: #fff; font: 700 17px/1 var(--font); }

.story-games span { font: 400 12.5px/1.3 var(--font); color: var(--ink-body); text-wrap: balance; }

.story-games a:hover span { color: var(--accent-ink); }

/* Installation: the rows and the typical time beside the rig photo. */
.story-install { display: flex; flex-wrap: wrap; gap: 40px 56px; align-items: stretch; }

.story-install > div { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; }

.story-install > .story-fill { flex: 1 1 340px; min-height: 420px; }

/* The heading heads the text column here, keeping the section's gap under it. */
.story-install .story-heading { margin-bottom: 34px; }

/* The rig photo over a row of three squared ones, one column beside the text. */
.story-install-media { gap: 8px; }

.story-install-media > .story-fill { flex: 1 1 auto; min-height: 420px; }

.story-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }

.story-thumbs > .story-fill { aspect-ratio: 1 / 1; }

.story-typical { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; padding: 28px; background: #f6f5f3; border: 1px solid #e2e0dd; }

.story-typical strong { font: 700 46px/1 var(--font); letter-spacing: -.02em; }

.story-typical strong span { font: 600 20px/1 var(--font); color: var(--ink-quiet); }

.story-typical p:last-child { font: 400 14.5px/1.55 var(--font); color: var(--ink-body); }

/* What's in the box: the packing list on ink. */
.story-box-list { display: flex; flex-direction: column; margin-top: 8px; }

.story-box-list > div { display: flex; gap: 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid #2a2a2a; font: 400 14.5px/1.5 var(--font); color: #e2ded8; }

.story-box-list span { flex: none; width: 26px; font: 400 12.5px/1.5 var(--mono); color: #9a938c; }

/* The belt beside quiet operation. */
.story-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 40px 56px; align-items: start; }

.story-pair > div { display: flex; flex-direction: column; gap: 14px; }

/* The specifications two columns wide under a heavy line. */
.story-specs .prose { max-width: none; }

.story-specs .prose table { border: 0; border-top: 2px solid var(--ink); }

.story-specs .prose tbody { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); column-gap: 48px; }

.story-specs .prose tbody tr { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 13px 0; border-bottom: 1px solid #ececea; background: none; }

.story-specs .prose td { width: auto; padding: 0; border: 0; font: 400 14.5px/1.4 var(--font); color: var(--ink-quiet); }

.story-specs .prose td + td { font-weight: 600; color: var(--ink); }

/* The questions on the light band, the list beside the headline. */
.product-page.is-story .product-body > .story-faq { background: #f6f5f3; border-top: 1px solid #e6e4e1; }

.story-faq .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "title list" "more list"; grid-template-rows: auto 1fr; gap: 14px 56px; align-items: start; padding-top: 0; border-top: 0; }

.story-faq .faq h2 { grid-area: title; }

.story-faq .faq-list { grid-area: list; max-width: none; border-top-color: #e2e0dd; }

.story-faq .faq-item { border-bottom-color: #e2e0dd; }

.story-faq .faq-item summary::after { color: var(--accent-ink); }

.story-faq .faq-more { grid-area: more; }

/* The closing offer over the module from behind, darkened. */
.story-final { position: relative; overflow: hidden; background: var(--ink); color: #fff; }

.story-final-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: .3; }

.story-final-inner { position: relative; display: flex; flex-wrap: wrap; gap: 32px 56px; align-items: flex-end; justify-content: space-between; padding: 72px var(--gutter); }

.story-final-copy { flex: 1 1 360px; display: flex; flex-direction: column; gap: 20px; }

.story-final .story-kicker { color: var(--accent); }

.story-final h2 { font: 700 44px/1.05 var(--font); letter-spacing: -.02em; max-width: 14ch; text-wrap: balance; color: #fff; }

.story-final ul { display: flex; flex-direction: column; gap: 5px; margin: 0; padding: 0; list-style: none; }

.story-final li { font: 400 16px/1.6 var(--font); color: #e2ded8; }

/* The same buy card as the hero's, beside the four lines. */
.story-final-inner > .story-buy { flex: 0 1 420px; }

/* A hero whose photograph runs under the words, shaded from the left. */
.story-hero.is-shaded::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .6) 45%, rgba(0, 0, 0, 0) 80%); }

.story-hero.is-shaded .story-hero-inner { z-index: 1; }

/* A bundle's saving under its price: the parts' sum struck through. */
.story-saving { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; margin-top: 6px; font: 400 14px/1.4 var(--font); color: #bdb8b1; }

.story-saving strong { font-weight: 700; color: var(--accent); }

/* The builds already in the cart, each beside its edit link. */
.story-in-cart { display: flex; flex-direction: column; gap: 6px; }

.story-in-cart > div { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid rgba(255, 255, 255, .2); font: 400 14px/1.4 var(--font); color: #e2ded8; }

.story-in-cart a { flex: none; color: #fff; font-weight: 600; }

/* The guided build's door and "Find your rig", stacked. */
.story-buy-actions { display: flex; flex-direction: column; gap: 9px; }

.story-buy-actions .story-btn-accent { text-align: center; }

.story-btn-outline { padding: 14px; border: 1px solid rgba(255, 255, 255, .6); color: #fff; text-align: center; font: 600 15px/1 var(--font); text-decoration: none; }

.story-btn-outline:hover { border-color: #fff; color: #fff; }

/* A drawing centred under a section's words, captioned. */
.story-figure { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }

.story-figure img { display: block; width: 100%; max-width: 560px; height: auto; }

.story-figure figcaption { font: 400 13px/1.4 var(--font); color: #8a8a8a; }

/* A section that follows one of its kind closes up to it. */
.story-section.is-tight { padding-top: 0; }

/* The customers' builds: the photo over who built it. */
.story-builds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 16px; }

.story-builds figure { display: flex; flex-direction: column; margin: 0; }

.story-builds a { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink); }

.story-builds img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.story-builds figcaption { display: flex; flex-direction: column; gap: 6px; padding-top: 16px; }

.story-builds strong { font: 600 15px/1.25 var(--font); }

.story-builds span { font: 400 14.5px/1.55 var(--font); color: var(--ink-body); text-wrap: pretty; }

/* On the accent: the way into the build beside its note, the two ways to
   mount as white cards. */
.story-section.is-accent h2 { color: var(--ink); }

.story-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding-top: 8px; }

.story-cta span { font: 400 13.5px/1.4 var(--font); color: #3a2a08; }

.story-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 1px; background: rgba(20, 20, 20, .18); border: 1px solid rgba(20, 20, 20, .18); }

.story-ways article { display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; background: var(--paper); }

.story-ways img { display: block; width: 100%; max-width: 260px; height: auto; margin: 0 auto 6px; }

.story-ways h3 { font: 700 19px/1.2 var(--font); }

.story-ways p { font: 400 15px/1.55 var(--font); color: #3a3a3a; text-wrap: pretty; }

/* The dashes on ink. */
.story-dashes.is-dark { margin: 0; }

.story-dashes.is-dark li { border-bottom-color: #2a2a2a; color: #e2ded8; }

.story-dashes.is-dark li::before { color: var(--accent); }

/* VR: the explanation in a box of its own. */
.story-aside { display: flex; flex-direction: column; gap: 10px; padding: 28px; background: #f6f5f3; }

.story-aside .story-text p { font-size: 15px; }

/* Sweden: the flags under the headline, the figures in the accent. */
.story-flags { display: block; width: 93px; height: auto; margin-top: 4px; border: 1px solid #2a2a2a; image-rendering: crisp-edges; }

.story-levels.is-figures h3 { color: var(--accent); }

/* A bundle's parts, a card each: the photograph on the accent over what
   it does, its page and its price on its own. */
.story-parts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 1px; background: #e2e0dd; }

.story-parts article { display: flex; flex-direction: column; background: #f6f5f3; }

.story-parts figure { position: relative; aspect-ratio: 4 / 3; margin: 0; overflow: hidden; background: #fdb500; }

.story-parts figure img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.story-parts article > div { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 36px var(--gutter) 44px; }

.story-parts h2 { font: 700 28px/1.15 var(--font); letter-spacing: -.01em; text-wrap: balance; }

.story-parts article > div > p:not(.story-kicker) { font: 400 16px/1.6 var(--font); color: #3a3a3a; text-wrap: pretty; }

.story-parts .story-dashes { margin: 0; }

.story-parts .story-dashes li { padding: 10px 0; font-size: 15px; }

.story-part-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: auto; padding-top: 10px; }

.story-part-cta span { font: 400 14px/1 var(--font); color: #6e6e6e; }

/* A bundle's boxes side by side on ink, each under its part's name. */
.story-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 32px 56px; }

.story-boxes h3 { padding-bottom: 8px; border-bottom: 2px solid var(--accent); font: 700 16px/1.3 var(--font); color: #fff; }

/* A bundle's specifications, a table per part under its name. */
.story-spec-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); gap: 32px 48px; align-items: start; }

.story-spec-groups h3 { padding-bottom: 10px; border-bottom: 2px solid var(--ink); font: 700 16px/1.3 var(--font); }

.story-spec-row { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr); gap: 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid #ececea; }

.story-spec-row span { font: 400 14.5px/1.4 var(--font); color: #6e6e6e; }

.story-spec-row strong { font: 600 14.5px/1.4 var(--font); text-wrap: pretty; }

/* The questions' own kicker over their headline. */
.story-faq .faq-head { grid-area: title; display: flex; flex-direction: column; gap: 14px; }

.story-section.is-light { background: #f6f5f3; }

.story-band.is-dark .story-text p { color: #e2ded8; }

/* ---- Home page (design "Home Page"), on the story blocks ---------------- */

/* The launch: badge and kicker, the words, then the way in beside the price. */
.home-launch { justify-content: flex-end; gap: 28px; }

.home-launch-flags { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

.home-badge { padding: 5px 10px; background: var(--accent); color: var(--ink); font: 700 12.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; }

.home-badge.is-ink { position: absolute; top: 14px; left: 14px; background: var(--ink); color: #fff; }

.home-launch-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }

.home-launch-offer .story-btn-accent { flex: none; padding: 16px 26px; }

.home-launch-price { display: flex; align-items: baseline; gap: 8px; }

.home-launch-price strong { font: 700 20px/1 var(--font); }

.home-launch-price span { font: 400 13px/1 var(--font); color: #bdb8b1; }

/* The range: a card per product, the whole card a link. */
.home-range { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 16px; }

.home-range-card { display: flex; flex-direction: column; gap: 6px; color: var(--ink); text-decoration: none; }

.home-range-card:hover { color: var(--accent-ink); }

.home-range-media { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1 / 1; margin-bottom: 10px; overflow: hidden; background: #f6f5f3; }

.home-range-media img { display: block; width: auto; height: 82%; max-width: 90%; object-fit: contain; }

.home-range-media.is-photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }

.home-range-kind { font: 700 12.5px/1 var(--font); letter-spacing: .1em; text-transform: uppercase; color: #8a8a8a; }

.home-range-name { font: 700 21px/1.15 var(--font); }

.home-range-line { font: 400 14.5px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

.home-range-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px solid #ececea; }

.home-range-foot strong { font: 700 16px/1 var(--font); color: var(--ink); }

.home-range-foot span { font: 600 14px/1 var(--font); color: var(--accent-ink); }

.home-range-note { font: 400 13px/1.5 var(--font); color: #8a8a8a; }

.home-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding-top: 8px; }

.home-actions .story-btn-accent { flex: none; padding: 14px 22px; font-size: 15px; }

.home-actions .story-btn-outline { padding: 14px 22px; }

/* Which system: tier, who it suits, the load, ruled under a heavy line. */
.home-guide-table { display: flex; flex-direction: column; border-top: 2px solid var(--ink); }

.home-guide-table > div { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 20px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #ececea; }

.home-guide-table strong { font: 700 20px/1 var(--font); }

.home-guide-table span { font: 400 15px/1.5 var(--font); color: #3a3a3a; text-wrap: pretty; }

.home-guide-table em { font: 600 14.5px/1 var(--font); font-style: normal; color: #6e6e6e; white-space: nowrap; }

/* ---- Cart page ------------------------------------------------------------- */

.cart-page {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: start;
    padding: 34px 40px 48px;
    background: #fbfbfb;
}

/* Page-level notices, in the strip the catalog's "Added to your cart" takes:
   first thing inside the page, across the full width of the grid. */
/* Rides in a notice band under the header, like the catalog's added strip. */
.cart-notice {
    padding: 12px 40px;
    font: 400 14px/1.5 var(--font);
    color: var(--accent-deep);
}

.cart-notice strong { display: block; font: 600 14px/1.4 var(--font); }
.cart-notice-abandon { margin-top: 6px; }

.cart-notice.is-problem { color: #7f1d1a; }

/* The base .cart-notice ink is the warn band's amber; the green "added"
   strip speaks in the ok band's own greens. */
.cart-notice.is-ok { color: #2c5b3c; }
.cart-notice.is-ok strong { color: var(--ok-deep); }

.cart-panel {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px;
    background: var(--paper);
    border: 1px solid var(--line);
}

.cart-empty { gap: 14px; align-items: flex-start; }

.cart-empty h1, .cart-head h1 { font: 700 32px/1.1 var(--font); }

.cart-empty p { font: 400 15px/1.5 var(--font); color: var(--ink-body); }

.cart-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.cart-meta { font: 400 14px/1 var(--font); color: var(--ink-quiet); }

/* The cart list is the page, not a panel on it: the chrome comes from each
   item card instead. Scoped to the cart page — checkout reuses .cart-panel
   and keeps its frame. */
.cart-page .cart-panel {
    border: 0;
    padding: 0;
    background: transparent;
}

/* The 1f bundle cards — one bordered block per line. */

.bundle-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e2e2e2;
    background: var(--paper);
}

.bundle-top {
    display: flex;
    gap: 18px;
    padding: 20px;
    align-items: flex-start;
}

.bundle-media {
    width: 92px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f5f5f5;
    border: 1px solid var(--line-card);
    flex: none;
}

.bundle-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.bundle-media .media-placeholder { height: 100%; }

.bundle-body { display: flex; flex-direction: column; gap: 8px; flex: 1; }

.bundle-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.bundle-head h3 { font: 700 19px/1.2 var(--font); }

.bundle-head strong { font: 700 19px/1 var(--font); white-space: nowrap; }

.line-sub { font: italic 400 14px/1.45 var(--font); color: var(--ink-quiet); }

.bundle-controls {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 4px;
    flex-wrap: wrap;
}

/* The line's name is the way back to its product page — a link, not dressed as one. */
.bundle-head h3 a { color: inherit; text-decoration: none; }
.bundle-head h3 a:hover { text-decoration: underline; }

/* View product / Remove wrap as one unit, never one on each side of a break,
   and always at the right edge — the auto margin holds on a wrapped line,
   where a flex spacer would not. */
.bundle-actions { display: inline-flex; align-items: center; gap: 14px; white-space: nowrap; margin-left: auto; }

.bundle-link, .link-danger { font: 400 13px/1 var(--font); }

.link-danger {
    background: none;
    border: 0;
    padding: 0;
    color: #9a3a3a;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.link-danger:hover { color: #7c2626; }

.stock-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    background: var(--ok-bg);
    font: 600 12px/1 var(--font);
    color: var(--ok-deep);
}

.stock-pill.is-backorder {
    background: var(--accent-tag);
    color: var(--accent-deep);
}

.stock-pill.is-off {
    background: var(--ink-mute);
    color: #fff;
}

/* Indented past the media, like the mockup: the details belong to the product. */
.bundle-lower {
    display: flex;
    flex-direction: column;
    padding: 0 20px 14px 130px;
}

.bundle-lower .line-config { margin-bottom: 12px; margin-top: 0; }

.box-expand summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 0;
    border-top: 1px solid #f0f0f0;
    font: 600 13px/1 var(--font);
    color: var(--ink-body);
    cursor: pointer;
    list-style: none;
}

.box-expand summary::-webkit-details-marker { display: none; }

.box-expand summary::after { content: "▼"; color: var(--accent); font-size: 11px; }

.box-expand[open] summary::after { content: "▲"; }

.box-expand-lines {
    display: flex;
    flex-direction: column;
    padding-bottom: 6px;
    font: italic 400 13px/1.7 var(--font);
    color: var(--ink-quiet);
}

/* Who put what in the box: a small upright heading per contributor. */
.box-expand-head {
    margin-top: 10px;
    font: 600 11px/1.6 var(--font);
    font-style: normal;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-mute);
}
.box-expand-head:first-child { margin-top: 2px; }

/* The question an answer belongs to, quieter than the answer. */
.line-option-group { color: var(--ink-quiet); }

.line-config {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 8px;
    padding: 12px 14px;
    background: var(--paper-dim);
    border-left: 2px solid var(--accent);
}

.line-config-title {
    font: 600 11px/1 var(--font);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.line-option {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    font: 400 13px/1.4 var(--font);
    color: #3f3f3f;
}

.line-config-note { font: 400 12px/1.45 var(--font); color: var(--ink-mute); }

.line-qty {
    display: flex;
    align-items: center;
    border: 1px solid var(--line-strong);
    width: fit-content;
    background: var(--paper);
}

.line-qty button, .line-qty .qty-cap {
    padding: 0 11px;
    font: 400 16px/38px var(--font);
    color: var(--ink-body);
    background: none;
    border: 0;
    cursor: pointer;
}

.line-qty .qty-cap { color: var(--line-strong); cursor: default; }

.line-qty .qty-value {
    width: 30px;
    text-align: center;
    font: 600 14px/38px var(--font);
    border-left: 1px solid #ececec;
    border-right: 1px solid #ececec;
}

.line-price {
    display: flex;
    flex-direction: column;
    gap: 3px;
    text-align: right;
}

.line-price strong { font: 700 17px/1 var(--font); }

.line-price span { font: 400 12px/1.3 var(--font); color: var(--ink-mute); }

.line-remove button {
    background: none;
    border: 0;
    font: 400 18px/1 var(--font);
    color: var(--ink-faint);
    cursor: pointer;
    padding: 8px 4px 0;
}

.line-remove button:hover { color: #9a3a3a; }

.cart-foot { font: 600 14px/1 var(--font); padding-top: 4px; }

.cart-rail { display: flex; flex-direction: column; gap: 24px; }

.rail-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 28px;
    background: var(--paper);
    border: 1px solid var(--line);
}

.rail-card h2 { font: 700 30px/1.1 var(--font); }

.rail-card h3 { font: 700 24px/1.1 var(--font); }

.rail-rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
}

.rail-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    font: 400 15px/1.3 var(--font);
}

.rail-row.is-total { font-weight: 700; }

/* The Documents card on the status page: one row per booked document —
   name and amount on the first line, its facts under the name, the
   download at the end. The card's own list, not the rail's, since a
   document has three things to say and a rail row holds two. */
.doc-rows {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
}

.doc-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: baseline;
    font: 400 15px/1.3 var(--font);
}

.doc-row .doc-amount { font-variant-numeric: tabular-nums; }

.doc-row .doc-meta { grid-column: 1 / -1; }

.doc-row .doc-link { grid-column: 1 / -1; justify-self: start; margin-top: 4px; }

.rail-trust {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 14px;
    border-top: 1px solid #ececec;
}

.rail-trust-title { font: 600 13px/1.3 var(--font); }

.rail-trust-body { font: 400 13px/1.45 var(--font); color: var(--ink-body); }

.rail-when {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font: 400 14px/1.5 var(--font);
    color: #3f3f3f;
}

/* ---- Configurator ----------------------------------------------------------- */

/* Standalone — the configurator and the region panel as pages — the card is a
   bordered panel behind the gutter every store page keeps, so its internal
   dividers end at an edge the eye can see rather than running the width of
   the sheet. The floating-card look belongs to the overlay, which strips the
   border and restores its own frame via .cfg-dialog. */
.cfg-page { background: var(--paper); padding: 34px 40px 48px; }

.cfg-card {
    background: var(--paper);
    border: 1px solid var(--line);
}

.cfg-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 24px 32px 20px;
    border-bottom: 1px solid #ececec;
}

.cfg-head h1 { font: 700 26px/1.1 var(--font); margin-top: 6px; }

.cfg-close {
    font: 400 22px/1 var(--font);
    color: var(--ink-mute);
    text-decoration: none;
    padding-top: 4px;
}

.cfg-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    padding: 0 32px;
    border-bottom: 1px solid #ececec;
    background: var(--paper);
}

.cfg-tab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px 12px 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    font: 400 14px/1 var(--font);
    color: var(--ink-faint);
    text-decoration: none;
    white-space: nowrap;
}

.cfg-tab-dot {
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background: #e0e0e0;
    color: #fff;
    font: 700 12px/22px var(--font);
    text-align: center;
}

.cfg-tab.is-locked { opacity: .45; cursor: default; }

.cfg-tab.is-done { color: var(--ink-soft); font-weight: 600; }

.cfg-tab.is-done .cfg-tab-dot { background: var(--ink); }

.cfg-tab.is-current {
    color: var(--ink);
    font-weight: 700;
    border-bottom-color: var(--accent);
}

.cfg-tab.is-current .cfg-tab-dot { background: var(--accent); color: var(--ink); }

.cfg-grid {
    display: grid;
    grid-template-columns: 1fr 372px;
}

.cfg-main {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 30px 32px 32px;
}

.cfg-error {
    padding: 12px 16px;
    background: #fdecec;
    color: #9a3a3a;
    font: 600 14px/1.4 var(--font);
}

/* The way forward when a rig doesn't fit the chosen system: the sibling
   systems that do, one button each, under the refusal banner. */
.cfg-rig-conflict {
    padding: 14px 16px;
    background: var(--note-bg);
    border: 1px solid var(--note-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.cfg-rig-conflict p { margin: 0; font: 400 14px/1.5 var(--font); color: #7a5b1f; }

.cfg-intro h2 { font: 700 30px/1.1 var(--font); }

.cfg-intro p {
    max-width: 560px;
    font: 400 15px/1.6 var(--font);
    color: var(--ink-body);
    margin-top: 8px;
}

.cfg-main form { display: flex; flex-direction: column; gap: 18px; }

/* Full width like the choice steps — a narrower text step reads as a
   different, lesser kind of question. */
.cfg-field { display: flex; flex-direction: column; gap: 7px; width: 100%; }

.cfg-field-error { font: 600 13px/1.4 var(--font); color: #b3261e; }

/* ---- The rig search (2a) --------------------------------------------------- */

.rig-search { position: relative; width: 100%; }

/* The matches sit in the flow under the field, not floated over the page:
   the configurator is a scrolling dialog, and a floated list is clipped at
   its edge the moment it is longer than the space left below the field.
   In the flow, the dialog grows and scrolls with the list instead. */
.rig-results {
    margin-top: 2px;
    background: var(--paper);
    border: 1px solid #d8d8d8;
    box-shadow: 0 22px 40px -24px rgba(0, 0, 0, .35);
}

.rig-results-header {
    padding: 9px 16px;
    font: 600 11px/1 var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mute);
    border-bottom: 1px solid #f0f0f0;
}

.rig-result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    border: 0;
    border-bottom: 1px solid #f4f4f4;
    background: var(--paper);
    text-align: left;
    cursor: pointer;
}

.rig-result:hover, .rig-result:focus-visible { background: var(--paper-dim); }

.rig-result-body { display: flex; flex-direction: column; gap: 3px; }

.rig-result-name { font: 600 15px/1.2 var(--font); color: var(--ink); }

.rig-result-spec { font: 400 12px/1.3 var(--font); color: #6e6e6e; }

.rig-result-tag {
    font: 600 11px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
    white-space: nowrap;
}

.rig-result-tag.is-attention { color: var(--accent-ink); }

.rig-result-manual {
    display: block;
    width: 100%;
    padding: 11px 16px;
    border: 0;
    background: var(--paper);
    font: 400 13px/1.4 var(--font);
    color: var(--ink);
    text-align: left;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

.rig-result-manual:hover { background: var(--paper-dim); }

/* The four common-rig cards. */
.rig-popular { display: flex; flex-direction: column; gap: 10px; }

.rig-popular-title {
    font: 600 12px/1 var(--font);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.rig-popular-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.rig-card {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid #d8d8d8;
    background: var(--paper);
    text-align: left;
    cursor: pointer;
}

.rig-card:hover, .rig-card:focus-visible {
    border-color: var(--accent);
    background: var(--accent-bg);
}

.rig-card-name { font: 600 14px/1.25 var(--font); color: var(--ink); }

.rig-card-spec { font: 400 12px/1.45 var(--font); color: #6e6e6e; }

.rig-popular-note { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

/* The what-to-measure drawing, folded until asked for. */
.cfg-measure-help summary {
    font: 600 14px/1.3 var(--font);
    color: var(--accent-ink);
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cfg-measure-help[open] summary { margin-bottom: 12px; }

.cfg-measure-help img {
    display: block;
    max-width: min(660px, 100%);
    height: auto;
    border: 1px solid var(--line);
    background: var(--paper);
    padding: 8px;
}

.cfg-field-label { font: 700 15px/1 var(--font); }

.cfg-field input,
.cfg-field textarea {
    width: 100%;
    padding: 15px 16px;
    border: 1px solid #d8d8d8;
    font: 400 16px/1 var(--font);
}

.cfg-field textarea { line-height: 1.5; resize: vertical; }

/* The mockup's amber ring marks the active field, not "required". */
.cfg-field input:focus,
.cfg-field textarea:focus {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
    outline: none;
}

.cfg-choices { display: flex; flex-direction: column; gap: 8px; }

.cfg-choice {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    border: 1px solid #e0e0e0;
    cursor: pointer;
}

.cfg-choice:has(input:checked) {
    border: 2px solid var(--accent);
    background: var(--accent-bg);
    padding: 11px 15px;
}

.cfg-choice.is-blocked { opacity: .5; cursor: not-allowed; }

.cfg-choice input { accent-color: var(--radio-accent); }

.cfg-choice-thumb {
    width: 44px;
    height: 44px;
    flex: none;
    overflow: hidden;
    background: repeating-linear-gradient(135deg, #f1f1f1 0 6px, #e7e7e7 6px 12px);
}

/* The checker means "no image yet". A real image replaces it — a transparent
   PNG must sit on plain paper, not on the placeholder pattern. */
.cfg-choice-thumb:has(img) { background: var(--paper); }

.cfg-choice-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cfg-choice-body { display: flex; flex-direction: column; gap: 3px; flex: 1; }

.cfg-choice-name { font: 700 15px/1.2 var(--font); }

.cfg-choice-sub { font: italic 400 13px/1.35 var(--font); color: var(--ink-quiet); }

.cfg-choice-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

.cfg-choice-price { font: 600 14px/1 var(--font); white-space: nowrap; }

.cfg-choice-selected { font: 600 12px/1 var(--font); color: var(--accent-ink); }

.cfg-nav { display: flex; gap: 12px; align-items: stretch; padding-top: 4px; }

/* More specific than `.cfg-main form`, which would otherwise stack this column. */
.cfg-main form.cfg-add {
    flex-direction: row;
    align-items: stretch;
    gap: 12px;
    padding-top: 4px;
}

.cfg-add .qty-field {
    flex: none;
    border: 1px solid var(--line-strong);
    padding: 0 8px;
}

.cfg-add .qty-field input {
    width: 44px;
    border: 0;
    font: 600 15px/1 var(--font);
    text-align: center;
    outline: none;
}

.cfg-back {
    display: flex;
    align-items: center;
    padding: 0 22px;
    background: var(--line-soft);
    color: var(--ink-body);
    font: 400 16px/1 var(--font);
    text-decoration: none;
}

.cfg-next { flex: 1; font-size: 16px; }

.cfg-keep { font: 400 13px/1.5 var(--font); color: var(--ink-mute); max-width: 560px; }

/* The review itself uses the checkout's rv-blocks; this label style survives
   for the rail and the product page's in-cart panel. */
.cfg-review-key {
    font: 600 12px/1 var(--font);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.cfg-rail {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 30px;
    background: var(--paper-dim);
    border-left: 1px solid #ececec;
}

.cfg-rail h2 { font: 700 22px/1.1 var(--font); }

.cfg-rail-product {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
}

.cfg-rail-product img, .cfg-rail-product .media-placeholder {
    width: 56px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    flex: none;
}

.cfg-rail-name { font: 700 16px/1.2 var(--font); }

.cfg-rail-sub { font: italic 400 12px/1.5 var(--font); color: var(--ink-quiet); }

.cfg-rail-price { font: 600 14px/1 var(--font); margin-top: 2px; }

.cfg-rail-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 9px;
    border-bottom: 1px solid #f0f0f0;
    font: 400 14px/1.35 var(--font);
}

.cfg-rail-row .is-pending { color: var(--ink-faint); }

.cfg-rail-row > div { display: flex; flex-direction: column; gap: 2px; }

.cfg-measure-note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 14px;
    background: var(--accent-bg);
    border-left: 2px solid var(--accent);
    font: 400 13px/1.5 var(--font);
    color: var(--ink-body);
}

.cfg-measure-note strong { font: 600 13px/1.3 var(--font); color: var(--ink); }

.cfg-rail-total {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 700 17px/1 var(--font);
    padding-top: 4px;
}

.cfg-rail-vat { font: 400 12px/1.5 var(--font); color: var(--ink-mute); }

/* The overlay the enhancement script mounts the card into — the mockup's
   dialog-over-the-blurred-page treatment, with the live page behind it. */
.cfg-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    width: min(1060px, calc(100vw - 32px));
    max-height: calc(100vh - 64px);
    overflow: auto;
    margin-top: 52px;
}

.cfg-dialog::backdrop {
    background: rgba(20, 20, 20, .55);
    backdrop-filter: blur(1.5px);
}

.cfg-dialog .cfg-card {
    max-width: none;
    border: 0;
    box-shadow: 0 40px 80px -30px rgba(0, 0, 0, .55);
}

/* ---- Configured confirmation (2f) ------------------------------------------ */

/* Rides in the ok notice band — the color and the rule are the band's. */
.configured-banner {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 40px;
    flex-wrap: wrap;
}

.configured-banner-text { flex: 1; min-width: 240px; }

.configured-banner-text strong {
    display: block;
    font: 700 16px/1.2 var(--font);
    color: var(--ok-deep);
}

.configured-banner-text span { font: 400 14px/1.5 var(--font); color: #2c5b3c; }

.configured-banner .btn-secondary { border-color: var(--ok-deep); color: var(--ok-deep); }

.in-cart-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px;
    background: var(--paper-dim);
    border-left: 2px solid var(--accent);
}

.in-cart-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.in-cart-panel .cfg-review-key { font-size: 12px; }

.in-cart-line {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    font: 400 13px/1.5 var(--font);
    color: #3f3f3f;
}

.separate-note { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

/* ---- Checkout (3a–3g) ------------------------------------------------------ */

/* The same rail width as the cart page: the order summary must not change
   size on the way from one to the other. */
.checkout-page {
    display: grid;
    grid-template-columns: 1fr 420px;
    gap: 32px;
    align-items: start;
    padding: 34px 40px 48px;
    background: #fbfbfb;
}

/* The panel borrows the configurator's head and tab bar; give them its rhythm
   without the cfg-card frame. */
.co-panel { gap: 0; padding: 0; }

.co-panel .cfg-head { padding: 24px 30px 20px; }

/* The page-level step rail under the chrome: same inset as the header. */
.co-steps { padding: 0 40px; }

.co-intro {
    font: 400 15px/1.6 var(--font);
    color: var(--ink-body);
    padding: 22px 30px 0;
    max-width: 640px;
}

.co-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px 30px 30px;
}

.co-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 20px;
}

.co-field { display: flex; flex-direction: column; gap: 6px; }

.co-field.is-wide { grid-column: 1 / -1; }

.co-label {
    font: 600 12px/1.3 var(--font);
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--ink-soft);
    display: flex;
    align-items: center;
    gap: 8px;
}

.co-label em { color: var(--accent-deep); font-style: normal; }

.co-field input, .co-field select {
    width: 100%;
    padding: 12px 14px;
    font: 400 15px/1.4 var(--font);
    color: var(--ink);
    background: var(--paper);
    border: 1px solid var(--line-strong);
    outline: none;
}

.co-field input:focus, .co-field select:focus {
    border-color: var(--accent);
    box-shadow: inset 0 0 0 1px var(--accent);
}

.co-hint { font: 400 12.5px/1.5 var(--font); color: var(--ink-body); }

.co-error { font: 600 13px/1.4 var(--font); color: #b3261e; }

.co-alert {
    margin: 20px 30px 0;
    padding: 14px 16px;
    border: 1px solid #e5b4b0;
    background: #fdf1f0;
    font: 600 14px/1.5 var(--font);
    color: #b3261e;
}

.co-question { padding-top: 2px; }

/* Payment methods and the buyer-type pair: bordered radio cards. */
.co-methods { display: flex; flex-direction: column; gap: 12px; }

.method-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 20px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    cursor: pointer;
}

/* Selected: the same amber treatment as the configurator's choice cards. */
.method-card:has(input:checked) {
    border: 2px solid var(--accent);
    background: var(--accent-bg);
    padding: 17px 19px;
}

.method-card.is-disabled { opacity: .55; cursor: default; }

.method-card input { margin-top: 3px; accent-color: var(--radio-accent); }

.method-body { display: flex; flex-direction: column; gap: 5px; }

.method-name { font: 700 15px/1.3 var(--font); color: var(--ink); }

.method-sub { font: 400 13.5px/1.55 var(--font); color: var(--ink-body); }

.method-terms { font: 600 12.5px/1.5 var(--font); color: var(--ink-soft); }

/* The company notice under the methods: the contact page's document box
   (.contact-docs) in the store's small running size, in the page's own
   ink. */
.co-company-note {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 20px;
    background: var(--paper-dim);
    border: 1px solid #e0e0e0;
    font: 400 13.5px/1.55 var(--font);
}

.co-company-note strong { font: 600 13.5px/1.3 var(--font); }

/* Company details concern companies: hidden while "a private person" is the
   checked answer, reacting to the radio in pure CSS. Guarded so a browser
   without :has() shows the fields rather than locking companies out. */
@supports selector(:has(input)) {
    .co-form:not(:has(input[name="buyer"][value="company"]:checked)) #company-fields {
        display: none;
    }
}

.panel-accent-title { font: 700 14px/1.3 var(--font); color: var(--ink); }

.panel-accent p { font: 400 13.5px/1.6 var(--font); color: var(--ink-body); }

/* The VIES verdict badge next to the VAT-number label. */
.vat-badge {
    padding: 3px 8px;
    font: 700 11px/1.2 var(--font);
    letter-spacing: .03em;
    text-transform: none;
}

.vat-badge.is-valid { background: var(--ok-bg); color: var(--ok-deep); }

.vat-badge.is-invalid { background: #fdf1f0; color: #b3261e; }

.vat-badge.is-pending { background: var(--accent-tag); color: var(--accent-deep); }

/* Review: one bordered block per fact, keyed by an uppercase label. */
.rv-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 30px 0;
}

/* Inside the configurator the step column already carries the padding. */
.cfg-main .rv-blocks { padding: 0; }

/* Price and Change stacked at the block's right edge. */
.rv-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    white-space: nowrap;
}

.rv-side .rv-change { padding-top: 0; }

.rv-price { font: 600 14px/1.3 var(--font); }

.rv-block {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    padding: 16px 20px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
}

/* The packing list block holds the expander alone: no key column to align
   against, and the summary's own rule would sit on top of the block's border. */
.rv-block-box { display: block; padding-top: 0; padding-bottom: 0; }

/* The summary is this block's key, so it wears .rv-key's type rather than the
   cart's: in the review it is one label in a column of labels. */
.rv-block-box .box-expand summary {
    border-top: 0;
    font: 600 11px/1.4 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
}

.rv-key {
    flex: 0 0 150px;
    font: 600 11px/1.4 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-body);
    padding-top: 3px;
}

.rv-value {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    font: 400 14.5px/1.5 var(--font);
    color: var(--ink);
}

/* No muted ink anywhere on the checkout: the review's
   second lines and the field hints read in the body ink. */
.rv-muted { color: var(--ink-body); }

.rv-change {
    font: 600 13px/1.3 var(--font);
    color: var(--ink);
    text-decoration: underline;
    white-space: nowrap;
    padding-top: 3px;
}

.co-terms {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 16px 20px;
    border: 1px solid var(--line-strong);
    background: var(--paper);
    font: 400 14.5px/1.5 var(--font);
    color: var(--ink);
    cursor: pointer;
}

.co-terms input { margin-top: 3px; accent-color: var(--radio-accent); }

.co-place-note { max-width: 560px; }

/* The rail's order lines: small thumb, name, line total. */
/* No border of its own: the totals block below draws the dividing rule. */
.co-rail-lines {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 14px;
}

.co-rail-line { display: flex; gap: 12px; align-items: center; }

.co-rail-thumb {
    flex: 0 0 52px;
    height: 52px;
    background: #f1f1f1;
    overflow: hidden;
}

.co-rail-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.co-rail-name { flex: 1; font: 600 13.5px/1.4 var(--font); color: var(--ink); }

.co-rail-price { font: 600 13.5px/1.4 var(--font); color: var(--ink); white-space: nowrap; }

.co-rail-panel { padding: 18px 20px; gap: 8px; }

/* ---- Order status (4a–4c) --------------------------------------------------- */

/* One surface: the page IS the sheet, framed by the shop chrome — no floating
   bordered panel inside it. */
.status-page {
    display: flex;
    flex-direction: column;
    background: var(--paper);
}

/* Rides in a notice band; the band brings the color, the strip the text. */
.status-banner {
    padding: 16px 36px;
    font: 600 15px/1.5 var(--font);
    color: var(--ok-deep);
}

.status-panel {
    display: flex;
    flex-direction: column;
}

.status-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 32px;
    padding: 34px 36px 26px;
}

.status-head-main { display: flex; flex-direction: column; gap: 9px; }

.status-eyebrow {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font: 600 12px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.status-head h1 { font: 700 34px/1.1 var(--font); }

.status-head p { max-width: 620px; font: 400 16px/1.6 var(--font); color: var(--ink-body); }

.badge-mute { background: #ececec; color: #3f3f3f; }

.status-aside {
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: flex-end;
    flex: none;
    text-align: right;
}

.status-aside-label { font: 400 13px/1 var(--font); color: var(--ink-mute); }

.status-aside-value { font: 700 22px/1.1 var(--font); }

.status-aside-note { font: 600 13px/1.3 var(--font); color: var(--accent-deep); }

.status-aside-note.is-late { color: #b3261e; }

/* The four-dot progress strip. */
.status-timeline { display: flex; padding: 0 36px 30px; }

.tl-step { display: flex; flex-direction: column; gap: 10px; flex: 1; }

.tl-track { display: flex; align-items: center; }

.tl-dot { width: 14px; height: 14px; border-radius: 7px; background: #e0e0e0; flex: none; }

.tl-bar { height: 2px; flex: 1; background: #e6e6e6; }

.tl-step.is-done .tl-dot, .tl-step.is-done .tl-bar { background: var(--ok-deep); }

.tl-step.is-now .tl-dot { background: var(--accent); }

.tl-label { font: 400 14px/1.3 var(--font); color: var(--ink-faint); padding-right: 20px; }

.tl-when { font: 400 12px/1.4 var(--font); color: var(--ink-mute); padding-right: 20px; }

.tl-step.is-done .tl-label { font-weight: 600; color: var(--ink-body); }

.tl-step.is-now .tl-label { font-weight: 700; color: var(--ink); }

.status-grid {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 28px;
    align-items: start;
    padding: 0 36px 40px;
}

.status-main, .status-rail { display: flex; flex-direction: column; gap: 20px; }

.status-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border: 1px solid var(--line);
    background: var(--paper);
}

.status-card.is-quiet { border: 0; background: #fafafa; }

.status-card h2 { font: 700 22px/1.1 var(--font); }

.status-card h3 { font: 700 20px/1.1 var(--font); }

.status-address { font: 400 14px/1.6 var(--font); color: var(--ink); }

/* Darker than the shared --ink-mute: these are sentences to read, not labels. */
.status-muted { font: 400 13px/1.55 var(--font); color: #454545; }

/* The amber How-to-pay panel. */
.pay-panel { gap: 16px; }

.pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.pay-head h2 { font: 700 24px/1.1 var(--font); }

/* Neutral by default — the Tracking card shares the header layout. Only the
   amber How-to-pay panel tints its meta line. */
.pay-due { font: 400 13px/1 var(--font); color: #6e6e6e; }

.pay-panel .pay-due { color: #7a5b1f; }

.pay-kv-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0;
}

.pay-kv-grid .kv.is-wide { grid-column: span 2; }

.kv-big dd { font-size: 22px; line-height: 1.1; }

.kv-hint { font: 400 12px/1.4 var(--font); color: #7a5b1f; }

/* A grid cell holding a kv box with help text under it. */
.kv-cell { display: flex; flex-direction: column; gap: 6px; }

.kv-cell.is-wide { grid-column: span 2; }

.kv-cell .kv { flex: 1; }

/* One help color for the whole amber panel — same as .pay-due and .pay-note. */
.kv-help { font: 400 12px/1.5 var(--font); color: #7a5b1f; padding: 0 2px; }

/* Height-matching spacer: a cell whose neighbour has help text renders the
   same text invisibly, so the boxes above stay level. */
.kv-help.is-ghost { visibility: hidden; }

.pay-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Doubled up to outrank `.panel-accent p`, which would gray this out. */
.pay-panel .pay-note, .pay-note { font: 400 13px/1.55 var(--font); color: #7a5b1f; max-width: 560px; }

/* The over-the-ceiling card attempt, under "How to pay": a quiet gray
   aside — the warning lives in the words, not in an amber alarm. */
.card-anyway {
    margin-top: 12px;
    padding: 14px 16px;
    background: var(--paper-dim);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.card-anyway-text { font: 400 13px/1.55 var(--font); color: #5d5d5d; max-width: 560px; }
.card-anyway-text strong { display: block; color: var(--ink); font-weight: 700; }
.card-anyway .btn { flex: none; }

/* Tracking parcels. */
.parcel-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px;
    background: #fafafa;
}

.parcel-name { font: 700 14px/1.2 var(--font); }

.parcel-tracking { font: 400 13px/1.4 var(--mono); color: #6e6e6e; }

/* Order lines on the status card. */
.status-lines { display: flex; flex-direction: column; gap: 12px; }

.status-line {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line-soft);
}

/* The totals block below draws its own top rule — a border here too would
   double the line under the last item. */
.status-line:last-child { border-bottom: 0; padding-bottom: 0; }

.status-line-body { flex: 1; display: flex; flex-direction: column; gap: 3px; }

.status-line-name { font: 700 14px/1.25 var(--font); }

.status-line-sub { font: italic 400 12px/1.45 var(--font); color: #6e6e6e; }

.status-line-opt { font: 400 12px/1.5 var(--font); color: #3f3f3f; padding-top: 3px; }

/* The question as a small label line above its answer. */
.status-line-opt > span { display: block; color: var(--ink-mute); }

.status-line-price { font: 400 13px/1.3 var(--font); color: var(--ink-body); white-space: nowrap; }

.rail-row.is-reverse div { color: var(--accent-deep); }

.status-banner.is-warn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    color: #7a4f05;
}

.status-banner.is-warn strong { display: block; }

/* The embedded Stripe overlay. Stripe's form sets its own height inside. */
.pay-dialog {
    width: min(460px, 94vw);
    border: 1px solid var(--frame);
    padding: 0;
    box-shadow: var(--shadow-sheet);
}

.pay-dialog::backdrop { background: rgba(20, 20, 20, .55); backdrop-filter: blur(3px); }

.pay-dialog-close {
    position: absolute;
    top: 6px;
    right: 10px;
    z-index: 1;
    border: 0;
    background: none;
    font: 400 22px/1 var(--font);
    color: var(--ink-mute);
    cursor: pointer;
}

.pay-dialog-mount { min-height: 480px; padding: 28px 8px 8px; }

/* ---- Print ----------------------------------------------------------------- */

/* A printed page is a record, not an interface: the chrome's pickers, every
   button, and the payment overlay go; the facts stay. The bank cells keep
   their borders, so they survive browsers that skip background colors. */
/* ---- Region panel ---------------------------------------------------------- */

/* Almost nothing here: the panel wears the configurator's shell (.cfg-page,
   .cfg-card, .cfg-head, .cfg-close, .cfg-main, .cfg-choice, .cfg-nav, .cfg-keep)
   and checkout's fields (.co-field, .co-label, .co-hint). What follows is only
   what those two do not already answer. */

/* In-page the panel fills the gutter's width — the framing itself is
   .cfg-page's, shared with the configurator — and the two pickers share a
   row, as do the two price cards. In the 760px dialog everything returns to
   one column — that dialog is the width the stacked layout was drawn for, so
   it needs no cap of its own on the card. */
.rg-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }

.rg-dialog .rg-grid { grid-template-columns: 1fr; }

/* What the chosen country means for prices, stated under the two selects. A
   note about the answer, so it reads like the closing line rather than a
   third field. */
.rg-prices { margin: 0; color: var(--muted-ink); font-size: 13px; line-height: 1.5; }

/* The overlay is .cfg-dialog with one thing changed — see region-overlay.js,
   which mounts the card into both classes. */
.rg-dialog { width: min(760px, calc(100vw - 32px)); }

/* ---- The marketing pages ------------------------------------------------- */

/* Mockup 1a: the pages around the shop, in the shop's own chrome and tokens.
   The home page is a stack of sections inside the main band — motion first,
   then proof, then products — closed by the full site footer. */

.site-footer-band { background: var(--ink); }

.site-footer { padding: 44px 40px 26px; }

.site-footer-cols {
    display: grid;
    grid-template-columns: repeat(4, 1fr) 1.2fr;
    gap: 28px;
}

.site-footer-col { display: flex; flex-direction: column; gap: 8px; }

.site-footer-head {
    font: 700 14px/1 var(--font);
    letter-spacing: .06em;
    margin-bottom: 4px;
}

.site-footer-col a,
.site-footer-col span {
    font: 400 14px/1.5 var(--font);
    color: #b9b4ae;
    text-decoration: none;
    overflow-wrap: anywhere;
}

.site-footer-col .site-footer-head { font: 700 14px/1 var(--font); color: #fff; }

.site-footer-col a:hover { color: var(--accent); }

.site-footer-line {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 6px 24px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid #2b2b2b;
    font: 400 13px/1.6 var(--font);
    color: var(--ink-mute);
}

/* ---- Home: the eyebrow and the hero buttons others still use -------------- */

.home-hero-eyebrow {
    font: 600 12px/1 var(--mono);
    letter-spacing: .2em;
    color: var(--accent);
}

.btn-accent {
    padding: 16px 26px;
    font-size: 16px;
    font-weight: 700;
    background: var(--accent);
    color: var(--ink);
}

/* Re-assert the ink: the global a:hover (a pseudo-class outranking the lone
   class) would otherwise paint the label accent-on-amber. */
.btn-accent:hover { background: #e59b16; color: var(--ink); }

.btn-outline-light {
    padding: 16px 26px;
    font-size: 16px;
    border-color: rgba(255, 255, 255, .5);
    color: #fff;
}

.btn-outline-light:hover { border-color: #fff; color: #fff; }

/* ---- Home: sections ------------------------------------------------------- */

.home-section {
    display: flex;
    flex-direction: column;
    gap: 26px;
    padding: 48px 40px;
    border-bottom: 1px solid var(--line-card);
}

.home-section.is-dim { background: var(--paper-dim); }

.home-section-head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }

.home-section-head h2 { font: 700 30px/1.15 var(--font); }

.home-section-head p { font: 400 15px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

/* ---- Home: software, simulators, mounting --------------------------------- */

.home-duo {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding: 48px 40px;
    border-bottom: 1px solid var(--line-card);
}

.home-duo-card { display: flex; flex-direction: column; gap: 12px; padding: 26px; border: 1px solid #e0e0e0; }

.home-duo-slash { width: 34px; height: 3px; background: var(--accent); }

.home-duo-card h3 { font: 700 22px/1.2 var(--font); }

.home-duo-card p { font: 400 14px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.home-duo-card a { margin-top: 6px; font: 600 14px/1 var(--font); align-self: flex-start; }

.home-sims { display: flex; flex-wrap: wrap; gap: 8px; }

.home-sim {
    padding: 7px 12px;
    background: var(--paper);
    border: 1px solid #e0e0e0;
    font: 400 13px/1 var(--font);
    color: #333;
}

a.home-sim.is-more {
    background: var(--ink);
    border-color: var(--ink);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
}

/* The compatibility helper — the download page's quiet gray box shape. */

.home-mount-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.home-mount-card { display: flex; flex-direction: column; border: 1px solid #e0e0e0; background: var(--paper); }

.home-mount-card > img {
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    min-width: 130px;
    object-fit: contain;
    padding: 10px;
}

.home-mount-body { display: flex; flex-direction: column; gap: 6px; padding: 16px; }

.home-mount-body h3 { font: 700 16px/1.25 var(--font); }

.home-mount-body p { font: 400 13px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

/* ---- Home: newsletter ------------------------------------------------------ */

/* The band paints the amber, edge to edge; the section inside holds to the
   sheet width like every other band's content. */
.home-newsletter-band { background: var(--accent); }

.home-newsletter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    padding: 36px 40px;
}

.home-newsletter h2 { font: 700 24px/1.2 var(--font); }

/* Mockup 1a's #3a2c0c — near-ink brown, not the lighter accent-deep: the
   sentence has to hold its own on the amber. */
.home-newsletter p { margin-top: 6px; font: 400 15px/1.5 var(--font); color: #3a2c0c; }

.home-newsletter form { display: flex; flex-wrap: wrap; gap: 10px; }

/* An .input sized for the band: one line tall, side by side with its button. */
.home-newsletter input {
    width: 300px;
    max-width: 100%;
    height: 46px;
    padding: 0 14px;
}

.home-newsletter .btn { padding: 15px 24px; font-size: 15px; font-weight: 700; }

/* ---- Site pages: resellers, about, contact -------------------------------- */

/* The shared frame for the simpler marketing pages: kicker, title, intro,
   then the page's own sections. is-flush drops the outer padding for pages
   whose first section paints its own background to the sheet edge. */
/* Top padding matches .home-section, so the first thing on screen sits at
   the same height whether a page opens with a section or a sheet. */
.site-page { display: flex; flex-direction: column; gap: 36px; padding: 48px 40px; }

.site-page.is-flush { gap: 0; padding: 0; }

.site-head { display: flex; flex-direction: column; gap: 14px; max-width: 700px; }

.site-kicker { font: 400 13px/1 var(--font); color: var(--ink-mute); }

.site-head h1 { font: 700 36px/1.1 var(--font); }

.site-head p { font: 400 16px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.site-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 6px; }

/* ---- Shared site blocks ---------------------------------------------------- */

/* The page head strip — the kicker or breadcrumb as a page section of its
   own, mounted first in <main>, above the page container. This is the ONE
   place the first element's position lives; the containers below hand over
   their top padding, so every page's opening line sits at the same height. */
.page-head { padding: 48px 40px 14px; }

.page-head + .site-page,
.page-head + .catalog,
.page-head + .product-page { padding-top: 0; }

.page-head + .prod-page > section:first-child { padding-top: 0; }

/* A section head with an action beside it, baseline-aligned. */
.section-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px 24px;
}

/* Two columns, text beside media — the split the marketing sections share.
   Declared after .home-section so on a shared element the grid wins over
   the section's own flex. */
.site-split { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }

.site-split-text { display: flex; flex-direction: column; gap: 16px; }

.site-split-text h1 { font: 700 36px/1.1 var(--font); }

.site-split-text h2 { font: 700 30px/1.15 var(--font); }

.site-split-text > p { font: 400 15px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.site-split-shot { display: flex; flex-direction: column; justify-content: center; }

.site-split-shot figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }

.site-split-shot img { width: 100%; height: auto; display: block; border: 1px solid #e0e0e0; }

.site-split-shot figcaption { font: italic 400 13px/1.5 var(--font); color: var(--ink-mute); }

/* The amber aside — the standing banners' tone, in a box. */
.site-note {
    display: flex;
    gap: 12px;
    padding: 14px 16px;
    background: var(--note-bg);
    border: 1px solid var(--note-line);
    font: 400 14px/1.5 var(--font);
}

.site-note strong {
    font: 700 13px/1.5 var(--font);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #b8770c;
    white-space: nowrap;
}

/* ---- Support landing (Documentation mockup 1a) ----------------------------- */

.support-section { display: flex; flex-direction: column; gap: 16px; }

.support-section h2 { font: 700 22px/1 var(--font); }

.support-intro { max-width: 620px; font: 400 14px/1.55 var(--font); color: var(--ink-body); }

.support-aside { font: 400 14px/1 var(--font); color: var(--ink-mute); }

.support-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }

/* The manuals table — the download page's file list, grown a column. */
.support-manuals { border: 1px solid #e0e0e0; overflow-x: auto; }

.support-manuals-head,
.support-manual {
    display: grid;
    grid-template-columns: 160px 1fr 170px;
    gap: 16px;
    align-items: center;
    padding: 14px 18px;
    min-width: 640px;
}

.support-manuals-head {
    padding: 11px 18px;
    background: #f8f8f8;
    border-bottom: 1px solid #e6e6e6;
    font: 600 12px/1 var(--font);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: #6e6e6e;
}

.support-manual { border-bottom: 1px solid #f1f1f1; }

.support-manual:last-child { border-bottom: 0; }

.support-manual:nth-child(odd) { background: #fafafa; }

.support-manual-product { font: 600 15px/1 var(--font); }

.support-manual-langs { font: 400 14px/1.6 var(--font); color: var(--ink-soft); }

.support-manual-langs span { margin: 0 3px; color: var(--ink-mute); }

.support-manual-serial { font: 400 13px/1.4 ui-monospace, Menlo, monospace; color: var(--ink-mute); }

/* The rig escape — the mockup's amber-flagged strip, not a full-bleed band:
   the question belongs to the page, not between pages. */
.support-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 22px 24px;
    background: #f8f8f8;
    border-left: 3px solid var(--accent);
}

.support-callout > div { display: flex; flex-direction: column; gap: 5px; }

.support-callout h2 { font: 700 17px/1.3 var(--font); }

.support-callout p { font: 400 14px/1.5 var(--font); color: var(--ink-body); text-wrap: pretty; }

.support-callout .btn { flex-shrink: 0; white-space: nowrap; }

/* ---- Terms and conditions -------------------------------------------------- */

.terms-body { max-width: 760px; font: 400 15px/1.7 var(--font); color: #2c2c2c; }

.terms-body p { margin: 0 0 1.1em; }

.terms-body h2 { font: 700 22px/1.25 var(--font); margin: 1.8em 0 .6em; }

.terms-body h2:first-child { margin-top: 0; }

.terms-body h3 { font: 700 17px/1.3 var(--font); margin: 1.5em 0 .5em; }

.terms-body h4 { font: 700 15px/1.4 var(--font); margin: 1.3em 0 .4em; }

.terms-body ul,
.terms-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }

.terms-body li { margin-bottom: .35em; }

.terms-body hr { margin: 2em 0; border: 0; border-top: 1px solid var(--line-soft); }

/* ---- Cookie consent --------------------------------------------------------- */

/* The banner: first in the page, so the keyboard and the screen reader meet
   it first; drawn last — the body becomes a column and the strip its final
   item. It rides the bottom of the window and comes to rest under the footer,
   so the last lines of the page can still be scrolled clear of it. Nothing
   behind it is locked, and both answers weigh the same. Under the header
   band's layer: the phone's open menu draws over it, not the other way. */
body:has(> .consent-banner) { display: flex; flex-direction: column; }

/* A control the keyboard lands on is scrolled clear of the strip, not under
   it — room for the two-question strip at its tallest above the phone
   breakpoint. Not while the focus is in the strip itself: its controls ride
   the bottom of the window, inside the padded zone, and the browser would
   scroll the page on every Tab trying to lift them out of it. */
html:has(.consent-banner:not(:focus-within)) { scroll-padding-bottom: 12rem; }

.consent-banner {
    order: 1;
    position: sticky;
    bottom: 0;
    z-index: 10;
    background: rgba(20, 20, 20, .94);
    color: #fff;
    border-top: 1px solid rgba(255, 255, 255, .1);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .25);
}

.consent-banner-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 28px;
    max-width: var(--sheet-w);
    margin: 0 auto;
    padding: 16px 24px;
}

.consent-banner-message { flex: 1 1 420px; font: 400 14px/1.5 var(--font); }

.consent-banner-message p { margin: 0 0 4px; text-wrap: pretty; }

.consent-banner-more { color: #c9c5c0; font-size: 13px; }

.consent-banner-more a { color: var(--accent); text-decoration: underline; }

.consent-banner-more a + a { margin-left: 10px; }

.consent-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }

.consent-banner-actions .btn { min-width: 120px; padding: 12px 18px; font-size: 14px; }

/* The panel under the terms: one bordered row per purpose. */
.consent-panel { max-width: 760px; margin-top: 56px; padding-top: 32px; border-top: 1px solid var(--line); }

.consent-panel h2 { font: 700 22px/1.25 var(--font); margin: 0 0 .6em; }

.consent-panel p { margin: 0 0 1em; font: 400 15px/1.6 var(--font); color: #2c2c2c; }

.consent-purpose { margin: 0 0 14px; padding: 16px 18px; border: 1px solid var(--line); background: var(--paper-dim); }

/* The row's heading line: name left, standing answer right. On a question it
   is the fieldset's <legend> — floated, so it lays out inside the box like
   any line instead of riding the border — and what follows clears it. */
.consent-purpose-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 6px; }

legend.consent-purpose-head { float: left; width: 100%; padding: 0; }

legend.consent-purpose-head + * { clear: both; }

.consent-purpose h3 { font: 700 16px/1.3 var(--font); margin: 0; }

.consent-purpose p { font-size: 14px; color: var(--ink-body); margin-bottom: 10px; }

.consent-status { font: 600 13px/1.3 var(--font); color: var(--ink-quiet); white-space: nowrap; }

.consent-purpose-choice { display: flex; gap: 24px; font: 400 14px/1.4 var(--font); }

.consent-purpose-choice input { accent-color: var(--radio-accent); margin-right: 6px; }

.consent-panel .btn { margin-top: 8px; }

@media (max-width: 720px) {
    html:has(.consent-banner:not(:focus-within)) { scroll-padding-bottom: 17rem; }
    .consent-banner-inner { padding: 14px 16px; }
    .consent-banner-actions { width: 100%; }
    .consent-banner-actions .btn { flex: 1; }
}

/* The release notes are folded behind their own heading: the summary carries
   the section's h2 weight, so the page reads as if the heading were one,
   with the expander's caret after it. */
.scc-notes summary {
    display: flex;
    align-items: center;
    gap: 12px;
    font: 700 30px/1.15 var(--font);
    cursor: pointer;
    list-style: none;
}

.scc-notes summary::-webkit-details-marker { display: none; }

.scc-notes summary::after { content: "▼"; color: var(--accent); font-size: 15px; }

.scc-notes[open] summary::after { content: "▲"; }

.scc-notes .scc-changelog { margin-top: 22px; }

/* The release notes wear the same prose block as the terms — both are a
   rendered Markdown file — and add the version headings' rhythm: one release
   per h2, its date under it, its areas as h3. */
.scc-changelog h2 { padding-top: .8em; border-top: 1px solid var(--line-soft); }

.scc-changelog h2:first-child { padding-top: 0; border-top: 0; }

.scc-changelog em { color: var(--ink-mute); }

/* ---- Resellers ------------------------------------------------------------ */

.reseller-groups { display: flex; flex-direction: column; gap: 26px; }

.reseller-group {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 24px;
    align-items: start;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--line-soft);
}

.reseller-country h2 { font: 700 18px/1.2 var(--font); }

.reseller-count { margin-top: 4px; font: 400 13px/1 var(--font); color: var(--ink-mute); }

.reseller-tiles { display: flex; flex-wrap: wrap; gap: 16px; }

.reseller-tile {
    display: flex;
    flex-direction: column;
    width: 288px;
    border: 1px solid #e0e0e0;
    background: var(--paper);
    text-decoration: none;
}

.reseller-tile:hover { border-color: var(--ink); color: inherit; }

.reseller-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 78px;
    padding: 10px;
    background: var(--paper);
}

.reseller-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }

.reseller-tile-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--line-card);
}

.reseller-name { font: 600 13px/1.3 var(--font); color: var(--ink-soft); }

.reseller-visit { font: 600 12px/1 var(--font); color: var(--accent-ink); white-space: nowrap; }

.reseller-become {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    padding: 22px 26px;
    background: var(--paper-dim);
    border: 1px solid #e0e0e0;
}

.reseller-become h2 { font: 700 18px/1.2 var(--font); }

.reseller-become p { margin-top: 4px; font: 400 14px/1.5 var(--font); color: var(--ink-body); }

/* ---- About ---------------------------------------------------------------- */

.about-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    border-bottom: 1px solid var(--line-card);
}

.about-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 18px;
    padding: 56px 40px;
}

/* The home hero's eyebrow, on paper instead of on dark. */
.home-hero-eyebrow.is-ink { color: var(--accent-ink); }

.about-hero-text h1 { font: 700 40px/1.1 var(--font); letter-spacing: -.01em; }

.about-started { font: 400 17px/1.6 var(--font); color: #3a3a3a; }

.about-goal {
    margin: 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--accent);
    font: italic 600 20px/1.5 var(--font);
}

.about-result { font: 400 15px/1.65 var(--font); color: var(--ink-body); text-wrap: pretty; }

.about-hero-media { position: relative; min-height: 420px; overflow: hidden; background: var(--accent); }

.about-hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 48px 40px;
    border-bottom: 1px solid var(--line-card);
}

.about-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid #e0e0e0; }

.about-card h2 { font: 700 19px/1.25 var(--font); }

.about-card p { font: 400 14px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.about-close { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 48px 40px; }

.about-details { display: flex; flex-direction: column; gap: 14px; }

.about-details h2 { font: 700 22px/1.2 var(--font); }

.about-details-rows { border: 1px solid #e0e0e0; }

.about-details-row {
    display: grid;
    grid-template-columns: 150px 1fr;
    gap: 16px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-soft);
    font: 400 14px/1.5 var(--font);
    color: #222;
}

.about-details-key { color: var(--ink-mute); }

.about-cta {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 14px;
    padding: 26px;
    background: var(--ink);
}

.about-cta h2 { font: 700 22px/1.25 var(--font); color: #fff; }

.about-cta p { font: 400 14px/1.6 var(--font); color: #b9b4ae; }

/* ---- Contact -------------------------------------------------------------- */

.contact-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 40px; }

.contact-form { display: flex; flex-direction: column; gap: 18px; }

.contact-form h2,
.contact-aside h2 { font: 700 21px/1.2 var(--font); }

.contact-form form { display: flex; flex-direction: column; gap: 16px; }

.contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.contact-field { display: flex; flex-direction: column; gap: 7px; }

.contact-label { font: 600 13px/1 var(--font); color: #333; }

/* The fields themselves are .input; only the textarea's shape is local. */
.contact-field textarea { resize: vertical; line-height: 1.6; }

.contact-error { font: 400 12px/1.4 var(--font); color: #c0392b; }

/* Off the page, not display:none — the bots that matter skip invisible
   fields less often than absent ones. */
.contact-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-send { display: flex; align-items: center; gap: 14px; }

.contact-send span { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

.contact-aside { display: flex; flex-direction: column; gap: 16px; }

.contact-rows { border: 1px solid #e0e0e0; }

.contact-channel {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    border-bottom: 1px solid var(--line-soft);
}

.contact-channel-key {
    font: 600 12px/1 var(--font);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-mute);
}

.contact-channel a { font: 400 15px/1.5 var(--font); text-decoration: none; }

.contact-channel a:hover { color: var(--accent-ink); }

.contact-channel-note { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

.contact-docs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    background: var(--paper-dim);
    border: 1px solid #e0e0e0;
}

.contact-docs h3 { font: 700 16px/1.25 var(--font); }

.contact-docs p { font: 400 14px/1.6 var(--font); color: var(--ink-body); }

.contact-docs a { font: 600 14px/1 var(--font); align-self: flex-start; }

.contact-social { display: flex; gap: 10px; }

.contact-social a {
    flex: 1;
    padding: 12px;
    border: 1px solid var(--line-strong);
    font: 600 13px/1 var(--font);
    text-align: center;
    text-decoration: none;
}

.contact-social a:hover { border-color: var(--ink); color: inherit; }

/* ---- News ------------------------------------------------------------------ */

/* The tag chips belong to the head above them, not the list below. */
.news-filter { margin-top: -14px; }

.news-featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    border: 1px solid #e0e0e0;
    background: var(--paper);
}

.news-featured-media {
    position: relative;
    display: block;
    min-height: 340px;
    overflow: hidden;
    background: var(--ink);
}

.news-featured-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.news-featured-flag {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 5px 11px;
    background: var(--accent);
    color: var(--ink);
    font: 700 12px/1 var(--font);
}

.news-featured-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 14px;
    padding: 40px;
}

.news-featured-body h2 { font: 700 30px/1.2 var(--font); text-wrap: pretty; }

.news-featured-body h2 a { text-decoration: none; }

.news-featured-body p { font: 400 15px/1.65 var(--font); color: var(--ink-body); text-wrap: pretty; }

.news-meta { font: 400 13px/1.4 var(--font); color: var(--ink-mute); }

.news-tag {
    display: inline-block;
    padding: 3px 8px;
    margin-right: 4px;
    background: var(--accent-tag);
    color: var(--accent-ink);
    font: 700 11px/1.4 var(--font);
    letter-spacing: .04em;
}

.news-years { display: flex; flex-direction: column; gap: 26px; }

.news-year { display: flex; flex-direction: column; gap: 14px; }

.news-year-head { display: flex; align-items: center; gap: 14px; }

.news-year-head h2 { font: 700 20px/1 var(--font); }

.news-year-rule { flex: 1; height: 1px; background: var(--line); }

.news-year-count { font: 400 13px/1 var(--font); color: var(--ink-mute); }

.news-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.news-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid #e0e0e0;
    background: var(--paper);
}

.news-card h3 { font: 700 17px/1.3 var(--font); text-wrap: pretty; }

.news-card h3 a { text-decoration: none; }

.news-card h3 a:hover { color: var(--accent-ink); }

.news-card p { font: 400 13px/1.55 var(--font); color: var(--ink-body); text-wrap: pretty; }

.news-card-author { margin-top: auto; font: 400 12px/1 var(--font); color: var(--ink-mute); }

.news-older { display: flex; justify-content: center; padding-top: 6px; }

/* ---- News: the article page ------------------------------------------------ */

.news-article { max-width: 760px; }

.news-article-head { display: flex; flex-direction: column; gap: 12px; }

.news-back { font: 600 14px/1 var(--font); text-decoration: none; color: var(--ink-body); }

.news-back:hover { color: var(--ink); }

.news-article-head h1 { font: 700 34px/1.15 var(--font); letter-spacing: -.01em; text-wrap: pretty; }

/* Authored Markdown: give the rendered tags the article voice. */
.news-article-body { font: 400 16px/1.7 var(--font); color: #2c2c2c; }

.news-article-body p { margin: 0 0 1.1em; }

.news-article-body h2 { font: 700 24px/1.25 var(--font); margin: 1.6em 0 .6em; }

.news-article-body h3 { font: 700 19px/1.3 var(--font); margin: 1.4em 0 .5em; }

.news-article-body ul,
.news-article-body ol { margin: 0 0 1.1em; padding-left: 1.4em; }

.news-article-body li { margin-bottom: .35em; }

.news-article-body img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 1.4em 0;
    border: 1px solid var(--line-card);
}

.news-article-body blockquote {
    margin: 1.4em 0;
    padding: 4px 0 4px 18px;
    border-left: 3px solid var(--accent);
    color: var(--ink-body);
}

/* A linked image that points at YouTube is a video — a bordered card in the
   reseller tiles' mould: preview with the play badge, then a labelled row. */
.news-article-body .news-video {
    display: block;
    margin: 1.4em 0;
    border: 1px solid #e0e0e0;
    background: var(--paper);
    text-decoration: none;
}

.news-article-body .news-video:hover { border-color: var(--ink); }

.news-video-media { position: relative; display: block; }

.news-article-body .news-video img { display: block; width: 100%; margin: 0; border: 0; }

.news-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 44px;
    border-radius: 10px;
    background: rgba(20, 20, 20, .85);
    color: #fff;
    font-size: 16px;
    text-indent: 3px;
}

.news-video:hover .news-play,
.review-card:hover .news-play { background: var(--accent); color: var(--ink); }

.news-video-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 14px;
    border-top: 1px solid var(--line-card);
    font: 600 13px/1.3 var(--font);
    color: var(--ink-soft);
}

.news-video-arrow { font: 600 12px/1 var(--font); color: var(--accent-ink); }

/* The Markdown image title, shown instead of hoarded in a tooltip. */
.news-caption {
    display: block;
    margin: -15px 0 1.4em;
    font: 400 13px/1.5 var(--font);
    color: var(--ink-mute);
    text-align: center;
}

.news-video .news-caption { margin-bottom: 0; }

/* Links that leave the site wear the arrow the reseller tiles wear. */
.news-article-body a[target="_blank"]:not(.news-video)::after {
    content: " ↗";
    font-size: .85em;
    color: var(--accent-ink);
}

@media print {
    .consent-banner,
    .store-head-right,
    .store-nav,
    .store-drawer,
    .store-band-subnav,
    .store-footer nav,
    .btn,
    .pay-actions,
    .rv-change,
    .pay-dialog,
    .cfg-close { display: none !important; }

    .status-grid { grid-template-columns: 1fr; }
    .checkout-page, .cart-page { grid-template-columns: 1fr; }

    .status-card, .pay-panel, .bundle-card, .rv-block, .rail-card { break-inside: avoid; }

    /* The order status page on paper: the record and nothing that only
       makes sense on a screen — the banner that says what just happened,
       the footer — on white, in one column, the panel and each line kept
       whole across a page break, and the page's own margins let go so the
       printer's do the framing. */
    .status-banner, .store-footer { display: none !important; }
    .status-page { padding: 0; max-width: none; }
    .status-panel { border: 0; box-shadow: none; }
    /* Kept whole: the blocks small enough to be worth moving to the next
       page rather than splitting. Not .status-panel — it is the page, taller
       than a sheet, and asking the printer not to break it only buys an
       empty first page. */
    .status-lines, .status-line, .status-address, .status-timeline { break-inside: avoid; }
    body { background: #fff; color: #000; }

    a { color: inherit; text-decoration: none; }
}

/* ---- The product pages (2a–2c) --------------------------------------------- */

/* 2a: the overview borrows the home page's section rhythm, its product cards
   and the shared site blocks; only the feature tiles and the amber band are
   its own. */

/* The one amber moment on the page — mockup 2a's compatibility band, on the
   layout's coda mount: the band owns the color so it runs edge to edge, the
   strip inside is a normal band child, held to the sheet. */

/* 2b: SIMRIG Control Center. */

/* The lede outranks the split's own paragraph rule, not just follows it. */
.site-split-text p.scc-lede { font-size: 16px; color: var(--ink-soft); }

.scc-actions { display: flex; align-items: center; gap: 12px; }

.scc-col { display: flex; flex-direction: column; gap: 14px; }

.scc-col h2 { font: 700 26px/1.2 var(--font); }

.scc-col p { font: 400 14px/1.6 var(--font); color: var(--ink-body); text-wrap: pretty; }

.scc-req { border: 1px solid #e0e0e0; background: var(--paper); }

.scc-req-row {
    display: grid;
    grid-template-columns: 170px 1fr;
    gap: 16px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
    font: 400 14px/1.4 var(--font);
}

.scc-req-row:last-child { border-bottom: 0; }

.scc-req-key { font: 600 14px/1.4 var(--font); color: var(--ink-quiet); }

.scc-doclink { font: 600 14px/1 var(--font); align-self: flex-start; }

/* 2c: the download page. The form reuses the contact form's fields. */

.dl-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 40px; align-items: start; }

.dl-main { display: flex; flex-direction: column; gap: 20px; }

.dl-gate {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 26px;
    border: 1px solid var(--line-card);
    background: var(--paper-dim);
}

.dl-gate h2 { font: 700 19px/1.2 var(--font); }

.dl-gate form { display: flex; flex-direction: column; gap: 16px; }

.dl-hint { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

.dl-send { display: flex; align-items: center; gap: 14px; }

.dl-send span { font: 400 13px/1.5 var(--font); color: var(--ink-mute); }

.dl-serial { padding-top: 16px; border-top: 1px solid var(--line-soft); }

.dl-files { border: 1px solid #e0e0e0; }

.dl-files-head {
    display: grid;
    grid-template-columns: 1fr 130px;
    padding: 11px 18px;
    background: var(--paper-dim);
    border-bottom: 1px solid var(--line-soft);
    font: 600 12px/1 var(--font);
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ink-quiet);
}

.dl-file {
    display: grid;
    grid-template-columns: 1fr 130px;
    align-items: center;
    padding: 14px 18px;
    border-bottom: 1px solid var(--line-soft);
}

.dl-file-name { font: 600 15px/1.2 var(--font); }

.dl-file-note { margin-top: 3px; font: 400 13px/1.4 var(--font); color: var(--ink-mute); }

.dl-file-version { font: 400 14px/1.4 var(--mono); }

.dl-files-foot { padding: 12px 18px; font: 400 12px/1.6 var(--font); color: var(--ink-mute); }

.dl-privacy {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 22px;
    background: var(--paper-dim);
    border-left: 3px solid var(--accent);
}

.dl-privacy h3 { font: 700 15px/1.3 var(--font); }

.dl-privacy p { font: 400 14px/1.55 var(--font); color: var(--ink-body); text-wrap: pretty; }

.dl-aside { display: flex; flex-direction: column; gap: 12px; }

.dl-aside h2 { font: 700 19px/1.2 var(--font); }

.dl-aside > p { font: 400 14px/1.6 var(--font); color: var(--ink-body); }

.dl-label,
.dl-photo { width: 100%; height: auto; display: block; border: 1px solid #e0e0e0; }

/* The older systems' note carries the label under its sentence, in the
   column beside the flag. The label is a diagram of one strip, so it keeps
   its own height and sits at the sentence's left edge rather than stretching
   to the note's width. */
.dl-note-body { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; }

.dl-label { width: auto; max-width: 100%; max-height: 45px; }

.dl-photo { max-width: 505px; }

.dl-help { display: flex; flex-direction: column; gap: 10px; padding: 22px; background: var(--paper-dim); margin-top: 8px; }

.dl-help h3 { font: 700 16px/1.2 var(--font); }

.dl-help p { font: 400 14px/1.55 var(--font); color: var(--ink-body); }

.dl-help .btn { align-self: flex-start; }

/* ---- Small screens -------------------------------------------------------- */

@media (max-width: 1000px) {
    .home-duo { grid-template-columns: 1fr; }
    .site-split { grid-template-columns: 1fr; }
    .dl-grid { grid-template-columns: 1fr; }
    .box-split.has-shot { grid-template-columns: 1fr; }
    .split-auto, .split-even, .prose-beside { grid-template-columns: 1fr; }
    .product-section.is-dim, .product-section.is-dark { padding-block: 32px; }
    .product-video { height: auto; width: 100%; max-width: 240px; aspect-ratio: 9 / 16; object-fit: cover; }
    .review-cards { grid-template-columns: 1fr; }
    /* The belt module: a narrower gutter, smaller display type, and the
       hero's photograph above its words rather than behind them. */
    .product-page.is-story { --gutter: 20px; }
    .product-page.is-story .product-body > .product-section { padding-block: 48px; }
    .story-section, .story-band-copy { padding-block: 48px; }
    /* Still the background, cropped to the module in the photograph's right
       half, and darkened toward the bottom where the words and the buy card
       stand on it. */
    .story-hero-image { object-position: 72% center; }
    .story-hero::after,
    .story-hero.is-shaded::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, .35), rgba(0, 0, 0, .55) 40%, rgba(0, 0, 0, .8)); }
    .story-hero-inner { z-index: 1; min-height: 0; padding-top: 24px; }
    .story-hero h1 { font-size: 38px; }
    .story-section h2, .story-band h2,
    .product-page.is-story .product-body > .product-section h2 { font-size: 28px; }
    .story-final h2 { font-size: 34px; }
    .story-facts { grid-template-columns: repeat(2, 1fr); }
    .story-facts > div { padding: 16px 14px; }
    .story-facts strong { font-size: 17px; }
    .story-band > .story-fill { min-height: 320px; }
    .story-rows > div, .story-rows.is-narrow > div, .story-rows.is-wide > div { grid-template-columns: 1fr; gap: 6px; }
    .story-faq .faq { grid-template-columns: 1fr; grid-template-areas: "title" "list" "more"; }
    .story-specs .prose tbody tr { grid-template-columns: minmax(0, 140px) minmax(0, 1fr); gap: 14px; }
    .stat-tiles { grid-template-columns: 1fr; }
    .about-hero { grid-template-columns: 1fr; }
    .about-cards { grid-template-columns: 1fr; }
    .about-close { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }
    .news-featured { grid-template-columns: 1fr; }
    .news-featured-media { min-height: 220px; }
    .news-cards { grid-template-columns: 1fr; }
    .motion-grid { grid-template-columns: repeat(2, 1fr); }
    .accessory-grid { grid-template-columns: repeat(2, 1fr); }
    .support-cards { grid-template-columns: repeat(2, 1fr); }
    .product-grid { grid-template-columns: 1fr; }
    .cart-page { grid-template-columns: 1fr; }
    .checkout-page { grid-template-columns: 1fr; }
    .status-grid { grid-template-columns: 1fr; }
    .status-timeline { flex-wrap: wrap; gap: 14px 0; }
    .tl-step { flex: 1 1 40%; }
    .cfg-grid { grid-template-columns: 1fr; }
    .cfg-rail { border-left: 0; border-top: 1px solid #ececec; }
}

/* The header folds into the burger below 800px — the four doors stop
   fitting beside the logo, the chip and the cart before the page itself
   narrows. store-header.js watches the same width. */
@media (max-width: 800px) {
    .store-header { padding: 12px 16px; grid-template-columns: auto auto 1fr; column-gap: 14px; }

    /* Neither row survives a phone — the burger drawer replaces both,
       every place one under the other. */
    .store-header > .store-nav { display: none; }
    .store-header > .store-drawer { display: block; grid-column: 1; grid-row: 1; }
    .store-header > .brand { grid-column: 2; }
    .store-header > .store-head-right { grid-column: 3; }
    .store-band-subnav { display: none; }

    /* The header follows the thumb: stuck to the top of the viewport, slid
       off it by the distance the page has scrolled down and back on by the
       distance it has scrolled up. store-header.js writes --head-shift as
       the finger moves; without it the band simply stays put. The drawer's
       panel hangs from the band, so it rides along. */
    .store-band-header {
        position: sticky;
        top: 0;
        z-index: 20;
        transform: translateY(calc(-1 * var(--head-shift, 0px)));
    }
    /* Left half in, half out when the finger lifts, it finishes the move. */
    .store-band-header.is-settling { transition: transform .18s ease-out; }
    @media (prefers-reduced-motion: reduce) {
        .store-band-header.is-settling { transition: none; }
    }
}

@media (max-width: 720px) {
    .store-footer { padding: 18px 16px; }
    .page-head { padding: 32px 16px 14px; }
    .standing-banner { padding: 12px 16px; flex-wrap: wrap; gap: 6px 24px; }
    .standing-banner-lead { flex-wrap: wrap; gap: 2px 12px; }
    /* One line on a phone: the sentence carries the condition by itself, so
       the label steps aside. */
    .standing-banner-label { display: none; }
    .catalog { padding: 32px 16px 40px; }
    .home-section { padding: 32px 16px; }
    .home-duo { padding: 32px 16px; }
    .home-mount-cards { grid-template-columns: 1fr; }
    /* The product page's two-up rule is more specific than the line above and
       would keep two columns on a phone, cutting each card to half a screen
       and setting the body text one or two words to the line. One column
       here too, so the drawing and its paragraph read as they do on the
       front page. */
    .product-body .home-mount-cards { grid-template-columns: 1fr; }
    .story-numbers strong, .story-linear-stats strong { font-size: 36px; }
    .home-mount-card { flex-direction: row; }
    .home-newsletter { padding: 28px 16px; }
    .home-newsletter form { width: 100%; }
    .home-newsletter input { flex: 1; width: auto; }
    /* Same first-element height as .home-section here too. */
    .site-page { padding: 32px 16px 40px; }
    .reseller-group { grid-template-columns: 1fr; gap: 12px; }
    .reseller-tile { width: 100%; }
    .about-hero-text { padding: 32px 16px; }
    .about-hero-media { min-height: 240px; }
    .about-cards { padding: 32px 16px; }
    .about-close { padding: 32px 16px; }
    .contact-row { grid-template-columns: 1fr; }
    .site-footer { padding: 28px 16px 20px; }
    .site-footer-cols { grid-template-columns: 1fr 1fr; }
    .motion-grid { grid-template-columns: 1fr; }
    .accessory-grid { grid-template-columns: 1fr; }
    .support-cards { grid-template-columns: 1fr; }
    .support-callout { flex-direction: column; align-items: flex-start; }
    .product-page { --gutter: 16px; padding: 32px 0 40px; }
    .cart-page { padding: 20px 16px 40px; }
    /* No box-in-box on a phone: the page is the surface, the panel dissolves,
       and content sits one 16px inset from the edge. */
    .checkout-page { padding: 0 0 32px; background: var(--paper); }
    .checkout-page .cart-panel { border: 0; padding: 0; }
    .co-panel .cfg-head { padding: 18px 16px 16px; }
    .co-intro { padding: 16px 16px 0; }
    .co-form { padding: 16px 16px 24px; }
    .co-panel .rv-blocks { padding: 16px 16px 0; }
    .checkout-page > .cart-rail { padding: 0 16px; }
    /* The standalone configurator and region pages get the same dissolve:
       gutter and card border go, the card is the page, content one 16px
       inset from the edge. */
    .cfg-page { padding: 0 0 32px; }
    .cfg-card { border: 0; }
    .cfg-head { padding: 18px 16px 14px; }
    .cfg-tabs { padding: 0 16px; }
    .rig-popular-grid { grid-template-columns: 1fr; }
    .cfg-main { padding: 20px 16px 24px; }
    .cfg-rail { padding: 20px 16px; }
    .status-head { flex-direction: column; padding: 20px 16px; }
    .status-banner { padding: 14px 16px; }
    .configured-banner { padding: 16px; }
    /* The message alone on a phone: the header's cart button is already on
       screen, and "keep shopping" describes doing nothing. */
    .configured-banner .btn { display: none; }
    .cart-notice { padding: 12px 16px; }
    /* The 4c mobile frames stack the actions full width. */
    .pay-actions { flex-direction: column; }
    .pay-actions .btn { width: 100%; }
    .co-steps { padding: 0 16px; }
    .status-aside { align-items: flex-start; text-align: left; }
    .status-timeline { padding: 0 16px 20px; }
    .status-grid { padding: 0 16px 24px; }
    .pay-kv-grid { grid-template-columns: 1fr; }
    /* Without this, a span-2 cell forces a phantom second column back into
       the collapsed grid and everything cramps into half the width. */
    .pay-kv-grid .kv-cell.is-wide,
    .pay-kv-grid .kv.is-wide { grid-column: auto; }
    /* The ghost help only levels boxes that sit side by side — in one column
       it is nothing but a blank gap. */
    .kv-help.is-ghost { display: none; }
    /* On a phone the configurator overlay is the page: edge to edge, full
       height, no floating margins. dvh tracks the browser bar. */
    .cfg-dialog {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        margin: 0;
    }
    .cfg-dialog .cfg-card { min-height: 100dvh; box-shadow: none; }
    /* The overlay covers the phone edge to edge, so the dimmed page behind it
       shows only while it scrolls. White instead: the dialog reads as the
       page it has become, not as a sheet over a darkened one. */
    .cfg-dialog::backdrop { background: white; backdrop-filter: none; }
    /* The chip carries three facts and a phone has room for exactly one —
       mockup 1d shows the bare code beside the cart, and in the longer
       locales (sv "inkl. moms" + "Varukorg", nl worse) anything more pushes
       the whole page past the viewport and it pans sideways. The code is
       what the prices follow; VAT basis and language live one tap away in
       the panel. */
    .region-chip-lang, .region-chip-vat, .region-chip-rule { display: none; }
    .region-chip { padding: 8px 11px; gap: 7px; font-size: 14px; }
    /* Mockup 1d's proportions for the rest of the bar: a 28px logo and a
       13px cart label, so the row fits 375px with the longest labels. */
    .brand-logo { height: 28px; }
    .store-head-right { gap: 10px; }
    /* min-height: the compacted chip's height, kept in step for the
       chip-less pages. */
    .btn-cart { padding: 0 12px; gap: 8px; font-size: 13px; min-height: 32px; }
    /* A phone is one column whether the panel is a page or a dialog. */
    .rg-grid { grid-template-columns: 1fr; }
    .co-grid { grid-template-columns: 1fr; }
    /* Stacked, not wrapped: the fixed key column and the Change link fight
       for width on a phone and land somewhere different in every block.
       Change stays pinned top-right, out of the stacking. */
    .rv-block { flex-direction: column; gap: 6px; position: relative; }
    .rv-key { flex: none; padding-top: 0; padding-right: 72px; }
    .rv-change { position: absolute; top: 16px; right: 20px; padding-top: 0; }
    .rv-side { flex-direction: row; align-items: center; gap: 14px; }
    .cart-panel { padding: 18px 14px; }
    .bundle-top { gap: 12px; padding: 14px; }
    .bundle-media { width: 64px; }
    .bundle-lower { padding: 0 14px 12px 14px; }
}