/* Stratum storefront — prototype stylesheet (step A, docs/04 §1; docs/09).
   Colour, space, radius, type and shadow come only from the line's semantic tokens (`--ds-…`, tokens.css copied from
   Headway's packages/tokens at build time — the line's CORE, the proposal of OD-16). The few sizes that are this
   product's own are product tokens below (`--st-…`), each aliasing a token or naming a layout width. No raw colour. */

/* The faces, from our own origin (OD-57, site-src/fonts/LICENSE.md): preloaded by every page, so they are there for
   the first paint; where one is late, a local face sized to its metrics stands in, and the swap moves nothing. */
@font-face { font-family: "Inter"; src: url(/assets/fonts/inter.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lexend"; src: url(/assets/fonts/lexend.woff2) format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; src: url(/assets/fonts/jetbrains-mono.woff2) format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* The stand-ins: a local face scaled to the real one's width, its ascent and descent matched (measured 23 Oct 2026). */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 106.79%; ascent-override: 90.83%; descent-override: 22.47%; line-gap-override: 0%; }
@font-face { font-family: "Lexend Fallback"; src: local("Arial"), local("ArialMT"), local("Helvetica"); size-adjust: 107.55%; ascent-override: 92.98%; descent-override: 23.25%; line-gap-override: 0%; }
@font-face { font-family: "JetBrains Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"), local("Courier"); size-adjust: 99.98%; ascent-override: 102.02%; descent-override: 30.01%; line-gap-override: 0%; }

:root {
  /* The grid (docs/19): one frame, 12 · 8 · 4 columns, a 4 px base. Every page region is a span of these columns. */
  /* The frame runs the window's width (Artem, 19 Oct 2026, OD-37): the header, the banner and the content share its
     edges, a small margin from the window's. The maximum only keeps a very wide screen from stretching lines. */
  --st-frame-max: 2560px;
  --st-margin: var(--ds-dimension-16);
  --st-columns: 12;
  --st-gutter-col: var(--ds-dimension-24);
  --st-section: var(--ds-space-4xl);
  /* Stratum's accent (docs/20 §1, Artem 19 Oct 2026): #d1fe17 for the primary action, the footer and the tinted actions. */
  --st-accent: #d1fe17;
  --st-accent-ink: var(--ds-color-neutral-900);
  --st-bar-h: 64px;
  --st-buybar-h: 88px;
  /* The banner's own sizes (the owner's frame B-01 · Store banner, 1920 × 585): its glass and its display type. */
  --st-glass-card: rgb(255 255 255 / 6%);
  --st-banner-font: 'Lexend', 'Lexend Fallback', var(--ds-font-family-sans);
  /* The line's families with their stand-ins (above). */
  --ds-font-family-sans: "Inter", "Inter Fallback", system-ui, sans-serif;
  --ds-font-family-mono: "JetBrains Mono", "JetBrains Mono Fallback", ui-monospace, monospace;
  --st-hero-ratio: 1440 / 960;
  --st-thumb: 232px;
  --st-card-cover: 3 / 2;
  --st-peek: 72px;
  /* The frame's width, for the one full-bleed module that measures from the window (the gallery, docs/19 §2). */
  --st-frame-w: min(var(--st-frame-max), calc(100vw - 2 * var(--st-margin)));
  --st-slide-cols: 10;
  /* The store's button (OD-40, the owner's Button · Store): the accent's gradient — lighter, the accent at 45 %, a shade —
     a glint round its edge, the accent's glow; a wash under a pointer, never white words. */
  --st-accent-light: color-mix(in srgb, var(--st-accent) 55%, white);
  --st-accent-shade: color-mix(in srgb, var(--st-accent) 80%, black);
  --st-accent-glow: color-mix(in srgb, var(--st-accent) 16%, transparent);
  --st-accent-ink-hover: color-mix(in srgb, var(--st-accent-ink) 78%, white);
  --st-glint: rgb(255 255 255 / 92%);
  --st-glint-soft: rgb(255 255 255 / 30%);
  --st-glint-w: 1.5px;
  --st-wash: rgb(0 0 0 / 10%);
  --st-wash-strong: rgb(0 0 0 / 20%);
  /* What the coming shelf shows of a product's own tokens (the owner's frames B-04/05). */
  --st-lit-solid: #de9666;
  --st-lit-glow: rgb(222 150 102 / 24%);
  --st-lit-glow-strong: rgb(222 150 102 / 40%);
  --st-lit-glow-soft: rgb(222 150 102 / 12%);
  --st-render-halo: rgb(0 0 0 / 80%);
  /* The frames' product (the owner's Cusp), as its tokens are written in them: shown, not used by the store. */
  --st-demo-primary: #f8f838;
  --st-demo-canvas: #100f0e;
  --st-demo-card: rgb(255 255 255 / 4%);
  --st-demo-glow: rgb(248 248 56 / 14%);
  /* The home's tours: the window's height and how long a step stays before the next. */
  --st-window-h: 640px;
  --st-tour-ms: 7s;
  /* The item page (OD-38): a screen of its own — two containers the window's height less a small margin above and
     below, never less than a small laptop's; at most the width a reader's eye holds. */
  --st-item-pad: var(--ds-space-2xl);
  --st-item-h: max(560px, calc(100dvh - 2 * var(--st-item-pad)));
  --st-item-max: 1600px;
  /* Motion and depth (docs/37): springs, not linear fades — a fast settle with no bounce. Only transform and opacity
     move; under "reduce motion" nothing does. */
  --st-ease-spring: cubic-bezier(.22, 1, .36, 1);
  /* Real springs for CSS (docs/37): the motion of a mass on a spring sampled into linear() — it overshoots a little and
     settles, as a thing does, instead of easing to a stop. The quick one (stiffness 400, damping 28): buttons, the
     palette's light. */
  --st-spring: linear(0, 0.021, 0.075, 0.151, 0.242, 0.338, 0.436, 0.531, 0.62, 0.7, 0.772, 0.834, 0.887, 0.93, 0.965, 0.992, 1.013, 1.028, 1.037, 1.043, 1.046, 1.046, 1.044, 1.041, 1.037, 1.033, 1.028, 1.024, 1.02, 1.016, 1.012, 1.009, 1.006, 1.004, 1.002, 1.001, 1, 0.999, 0.999, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 1);
  --st-spring-dur: 520ms;
  /* A softer one (stiffness 220, damping 19): a card's lift, a rise, a window opening. */
  --st-spring-soft: linear(0, 0.021, 0.076, 0.156, 0.25, 0.352, 0.455, 0.555, 0.649, 0.735, 0.811, 0.876, 0.93, 0.974, 1.009, 1.035, 1.053, 1.065, 1.071, 1.073, 1.071, 1.067, 1.062, 1.055, 1.047, 1.04, 1.033, 1.026, 1.019, 1.014, 1.009, 1.005, 1.002, 0.999, 0.998, 0.996, 0.995, 0.995, 0.995, 0.995, 0.995, 0.996, 0.996, 0.997, 0.997, 0.998, 0.998, 0.999, 1);
  --st-spring-soft-dur: 700ms;
  --st-ease-out: cubic-bezier(.25, 1, .5, 1);
  --st-ease-standard: cubic-bezier(.4, 0, .2, 1);
  --st-dur-fast: 160ms;
  --st-dur: 280ms;
  --st-dur-slow: 560ms;
  --st-stagger: 50ms;
  --st-lift: -4px;
  /* The edges and the light of a layer on the dark canvas: a hairline of white, a lit top edge, a soft shadow below. */
  --st-hairline: rgb(255 255 255 / 8%);
  --st-hairline-strong: rgb(255 255 255 / 16%);
  --st-hairline-hover: rgb(255 255 255 / 22%);
  --st-hairline-current: rgb(255 255 255 / 44%);
  --st-edge-glow: 0 0 0 4px rgb(255 255 255 / 4%), 0 0 24px rgb(255 255 255 / 6%);
  --st-inner-glow: inset 0 1px 0 rgb(255 255 255 / 6%);
  --st-depth: 0 24px 48px -24px rgb(0 0 0 / 72%), 0 8px 16px -8px rgb(0 0 0 / 40%);
  /* A card (OD-57): its inset, its corners inside, its ground at rest and under the pointer, the lit top rim. */
  --st-card-inset: var(--ds-space-xs);
  --st-card-inner-r: calc(var(--ds-radius-card) - var(--st-card-inset));
  --st-card-ground: rgb(255 255 255 / 3%);
  --st-card-ground-hover: rgb(255 255 255 / 7%);
  --st-rim: inset 0 1px 0 rgb(255 255 255 / 6%);
  --st-rim-w: 1px;
  --st-mark-w: 1.5px;
  /* One height for the controls of a row (the catalogue's chips and its sort). */
  --st-control-h: 40px;
  /* The payment path's widths (OD-57): the checkout's two panels, a single message or the library. */
  --st-pay-max: 1120px;
  --st-pay-narrow: 720px;
  --st-pay-form: 400px;
  /* A panel of the payment path (OD-57): dark glass lit from its top edge; the chosen one lit by the accent from a corner. */
  --st-glass-panel: linear-gradient(180deg, rgb(255 255 255 / 5%), rgb(255 255 255 / 2%) 44%, rgb(255 255 255 / 1%)), rgb(12 12 12 / 62%);
  --st-glass-lit: radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--st-accent) 9%, transparent), transparent 55%), radial-gradient(120% 90% at 100% 100%, rgb(122 140 255 / 6%), transparent 60%), linear-gradient(180deg, rgb(255 255 255 / 7%), rgb(255 255 255 / 2%) 44%), rgb(14 14 14 / 70%);
  /* An icon's well (OD-57, after getlayers): the accent's light rising from below, a lit glass above it. */
  --st-well: radial-gradient(90% 70% at 50% 115%, color-mix(in srgb, var(--st-accent) 18%, transparent), transparent 72%), linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 2%));
  --st-well-lit: radial-gradient(90% 70% at 50% 115%, color-mix(in srgb, var(--st-accent) 32%, transparent), transparent 72%), linear-gradient(180deg, rgb(255 255 255 / 12%), rgb(255 255 255 / 3%));
  --st-tone-a: color-mix(in srgb, var(--st-accent) 40%, transparent);
  --st-tone-b: color-mix(in srgb, var(--st-accent) 4%, transparent);
  --st-veil: rgb(0 0 0 / 40%);
  --st-spot: rgb(255 255 255 / 9%);
  --st-glow-a: color-mix(in srgb, var(--st-accent) 7%, transparent);
  --st-glow-b: rgb(122 140 255 / 6%);
  /* The search palette (docs/37 §4): its width, a row's height, a result's picture. */
  --st-palette-w: 640px;
  --st-palette-row: 56px;
  --st-palette-thumb: 64px;
}
@media (max-width: 1100px) { :root { --st-slide-cols: 8; --st-columns: 8; --st-gutter-col: var(--ds-dimension-20); } }
@media (max-width: 640px) { :root { --st-slide-cols: 4; --st-columns: 4; --st-margin: var(--ds-dimension-16); --st-gutter-col: var(--ds-dimension-16); } }

/* Stratum's bindings over the line's semantic contract: the primary action is the accent. */
:root[data-theme="dark"] { --ds-action-primary-bg: var(--st-accent); --ds-action-primary-fg: var(--st-accent-ink); --ds-text-on-accent: var(--st-accent-ink); }

* { box-sizing: border-box; }
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  background: var(--ds-bg-canvas);
  color: var(--ds-text-primary);
  font-family: var(--ds-font-family-sans);
  font-size: var(--ds-type-body-size);
  line-height: var(--ds-type-body-line-height);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus-ring); border-radius: var(--ds-radius-control); }

/* ── Grid (docs/19) ────────────────────────────────────────────────────── */
/* l-frame: the page's two edges, the same for the top bar, the content and the footer.
   l-grid: the columns. l-sub: a region that keeps the page's columns (a card three columns wide is three page columns). */
.l-frame { width: 100%; max-width: calc(var(--st-frame-max) + 2 * var(--st-margin)); margin-inline: auto; padding-inline: var(--st-margin); }
.l-grid { display: grid; grid-template-columns: repeat(var(--st-columns), minmax(0, 1fr)); column-gap: var(--st-gutter-col); row-gap: var(--st-gutter-col); align-content: start; }
.l-sub { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; row-gap: var(--st-gutter-col); }
.l-grid > * { grid-column: 1 / -1; min-width: 0; }

/* ── Shell ─────────────────────────────────────────────────────────────── */
.mark { font-weight: var(--ds-font-weight-semibold); font-size: var(--ds-type-heading-2-size); letter-spacing: var(--ds-font-letter-spacing-tight); display: flex; align-items: center; gap: var(--ds-space-xs); }
.mark__glyph { width: 20px; height: 20px; border-radius: var(--ds-radius-xs); background: linear-gradient(var(--ds-text-primary) 0 33%, var(--ds-text-muted) 33% 66%, var(--ds-border-strong) 66%); }

.crumbs { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }

/* ── Type ──────────────────────────────────────────────────────────────── */
.display { font-size: var(--ds-type-display-light-size); font-weight: var(--ds-type-display-light-weight); line-height: var(--ds-type-display-light-line-height); letter-spacing: var(--ds-type-display-light-letter-spacing); margin: 0; }
.lead { font-size: var(--ds-type-body-large-size); line-height: var(--ds-type-body-large-line-height); color: var(--ds-text-secondary); max-width: 64ch; margin: var(--ds-space-sm) 0 0; }
h2 { font-size: var(--ds-type-heading-1-size); line-height: var(--ds-type-heading-1-line-height); font-weight: var(--ds-type-heading-1-weight); margin: 0; }
h3 { font-size: var(--ds-type-heading-2-size); line-height: var(--ds-type-heading-2-line-height); font-weight: var(--ds-type-heading-2-weight); margin: 0; }
/* The hidden attribute wins over any component's display (a drawn state stays hidden until it is the state). */
[hidden] { display: none !important; }
.label { font-size: var(--ds-type-caption-size); color: var(--ds-text-muted); letter-spacing: var(--ds-font-letter-spacing-wide); text-transform: uppercase; }
.muted { color: var(--ds-text-muted); }
.secondary { color: var(--ds-text-secondary); }

/* ── Pieces ────────────────────────────────────────────────────────────── */
.chip { display: inline-flex; align-items: center; gap: var(--ds-space-2xs); height: 24px; padding: 0 var(--ds-space-sm); border-radius: var(--ds-radius-pill); background: var(--ds-action-secondary-bg); color: var(--ds-text-secondary); font-size: var(--ds-type-caption-size); white-space: nowrap; }
.chip--attention { background: var(--ds-status-attention-bg); color: var(--ds-status-attention-fg); }
.chip--success { background: var(--ds-status-success-bg); color: var(--ds-status-success-fg); }
.chips { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); }
.card { background: var(--ds-surface-card); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-card); padding: var(--ds-card-padding); }
.section { margin-top: var(--st-section); }
/* A page section that holds cards keeps the page's columns, so its cards stand on them. */
.l-grid > .section { display: grid; grid-template-columns: subgrid; row-gap: var(--ds-space-xl); }
.l-grid > .section > * { grid-column: 1 / -1; }
.l-grid > .section > .section__head { margin-bottom: 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-xl); margin-bottom: var(--ds-space-xl); }
.section__head p { margin: var(--ds-space-xs) 0 0; color: var(--ds-text-secondary); max-width: 70ch; }

.button { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-xs); height: 40px; padding: 0 var(--ds-space-lg); border-radius: var(--ds-radius-pill); border: 0; font: inherit; font-weight: var(--ds-font-weight-medium); cursor: pointer; }
.button--primary { background: var(--ds-action-primary-bg); color: var(--ds-action-primary-fg); }
.button--secondary { background: var(--ds-action-secondary-bg); color: var(--ds-text-primary); }
/* The secondary action as glass (OD-57, after getlayers): a faint ground, a lit top, and a rim of light that is bright at
   two opposite corners and fades between — drawn inside the button, so nothing lies past its edge. */
.button--secondary { position: relative; isolation: isolate; background: rgb(255 255 255 / 6%); box-shadow: inset 0 1px 1px rgb(255 255 255 / 8%); }
.button--secondary::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: var(--st-rim-w); background: linear-gradient(140deg, rgb(255 255 255 / 45%), rgb(255 255 255 / 6%) 38%, transparent 60%, rgb(255 255 255 / 26%)); -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .6; pointer-events: none; transition: opacity var(--st-dur) var(--st-ease-standard); }
/* Every button darkens under the pointer (docs/20 §1); a disabled one does not move. */
.button { transition: filter .15s ease; }
/* The tinted action: the accent at a low strength as its ground, the accent as its words — the header's Pricing. */
.button--tint { background: color-mix(in srgb, var(--st-accent) 10%, transparent); color: var(--st-accent); }
.button--tint[aria-current] { background: color-mix(in srgb, var(--st-accent) 18%, transparent); }
.button--lg { height: 48px; padding: 0 var(--ds-space-xl); font-size: var(--ds-type-body-large-size); }
.button[aria-disabled="true"] { cursor: not-allowed; background: var(--ds-action-secondary-bg); color: var(--ds-text-disabled); }

/* ── Shelf ─────────────────────────────────────────────────────────────── */

/* ── System page (W-SYS) ───────────────────────────────────────────────── */
.stage { border-radius: var(--ds-radius-card); overflow: hidden; border: 1px solid var(--ds-border-subtle); background: var(--ds-bg-sunken); }
.stage__frame { aspect-ratio: var(--st-hero-ratio); position: relative; }
.stage__frame img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.empty-stage { aspect-ratio: var(--st-hero-ratio); display: grid; place-items: center; text-align: center; padding: var(--ds-space-3xl); }
.empty-stage p { max-width: 46ch; color: var(--ds-text-secondary); margin: var(--ds-space-xs) auto 0; }


.strip { display: flex; gap: var(--ds-space-md); overflow-x: auto; padding-bottom: var(--ds-space-sm); scroll-snap-type: x mandatory; }
.frame { flex: none; width: var(--st-thumb); scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.frame__img { aspect-ratio: var(--st-hero-ratio); border-radius: var(--ds-radius-md); overflow: hidden; border: 1px solid var(--ds-border-subtle); background: var(--ds-bg-sunken); }
.frame__img img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.frame__cap { font-size: var(--ds-type-caption-size); color: var(--ds-text-secondary); }
.frame__cap small { display: block; color: var(--ds-text-muted); }
.frame__none { width: 100%; height: 100%; display: grid; place-items: center; color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); padding: var(--ds-space-md); text-align: center; }

/* The screens, one at a time: a scrolling row of tabs with their counts, the chosen screen's strip under it. */
.screens { display: flex; flex-direction: column; gap: var(--ds-space-md); }
.screens__tabs { display: flex; gap: var(--ds-space-2xs); overflow-x: auto; scrollbar-width: none; padding-bottom: var(--ds-space-3xs); -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.screens__tabs .cat { width: auto; flex: none; border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-pill); white-space: nowrap; }
.screens__tabs .cat[aria-selected="true"] { background: var(--ds-state-selected); color: var(--ds-text-primary); border-color: var(--ds-border-strong); }
.screens__panel { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.screens__panel > p { margin: 0; }
/* The product logic, short (docs/21): three columns — what each part is in one line, its first names, the rest on demand. */
.logic { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-lg); }
.logic__col { display: flex; flex-direction: column; gap: var(--ds-space-xs); min-width: 0; }
.logic__col h3 { display: flex; align-items: baseline; gap: var(--ds-space-xs); }
.logic__col > p { margin: 0; }
.logic__list { list-style: none; margin: var(--ds-space-xs) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-2xs); }
.logic__list a { color: var(--ds-text-secondary); }
.logic__toggle { padding: 0; border: 0; background: none; color: var(--st-accent); font: inherit; cursor: pointer; }
@media (max-width: 640px) { .logic { grid-template-columns: minmax(0, 1fr); } }
/* The gallery's count, and the viewer a tap opens: the render at full size; pinch to zoom, drag to look around. */
.viewer { padding: 0; border: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: var(--ds-surface-overlay); }
.viewer::backdrop { background: var(--ds-surface-scrim); }
.viewer__stage { width: 100%; height: 100%; overflow: auto; touch-action: pan-x pan-y pinch-zoom; display: grid; place-items: center; }
.viewer__stage img { max-width: none; width: min(1600px, 200vw); height: auto; }
.viewer__close { position: fixed; top: calc(var(--ds-space-md) + env(safe-area-inset-top)); right: var(--ds-space-md); z-index: 2; }
/* The phone's sticky action: in the thumb's reach, above the home indicator, shown once the page's own button is gone. */
.buybar { display: none; }
@media (max-width: 640px) {
  .buybar { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); padding: var(--ds-space-sm) var(--st-margin) calc(var(--ds-space-sm) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--ds-bg-canvas) 92%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--ds-border-subtle); transform: translateY(110%); transition: transform .2s ease; }
  .buybar--on { transform: none; }
  /* While the action bar is up, the page's end stays readable above it. */
  body:has(.buybar--on) .foot2__base { padding-bottom: calc(var(--st-buybar-h) + env(safe-area-inset-bottom)); }
  .buybar[hidden] { display: none; }
  .buybar__what { display: flex; flex-direction: column; min-width: 0; font-size: var(--ds-type-caption-size); }
  .buybar__what b { font-size: var(--ds-type-body-size); }
  /* The related systems: a row a thumb swipes, each card most of the screen. */
  .grid--row { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--st-gutter-col); scrollbar-width: none; margin-inline: calc(-1 * var(--st-margin)); padding-inline: var(--st-margin); }
  .grid--row > * { flex: 0 0 82%; scroll-snap-align: start; }
  /* Tags on a phone: one row a thumb swipes. */
  .cols__side .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .cols__side .chips > * { flex: none; }
  /* Components are small things: two to a row on a phone; systems, screens and patterns keep one, they need the width. */
  .grid[data-kind="component"] > * { grid-column: span 2; }
  .grid[data-kind="component"] .card__body { padding: var(--ds-space-sm); }
  .grid[data-kind="component"] .card__sum { display: none; }
  /* The sort on a phone is a sheet from the bottom, in the thumb's reach, not a list under a button at the top. */
  .sort .sort__list { position: fixed; left: 0; right: 0; bottom: 0; top: auto; width: auto; border-radius: var(--ds-radius-2xl) var(--ds-radius-2xl) 0 0; padding: var(--ds-space-md) var(--ds-space-md) calc(var(--ds-space-md) + env(safe-area-inset-bottom)); }
  .sort .sort__option { padding-block: var(--ds-space-md); }
}
/* The checkout's steps (docs/21): where one is, and how few steps there are — the payment partner's page is step two. */
.steps { display: flex; gap: var(--ds-space-xs); margin: 0; padding: 0; list-style: none; counter-reset: step; font-size: var(--ds-type-caption-size); color: var(--ds-text-muted); }
.steps li { counter-increment: step; display: flex; align-items: center; gap: var(--ds-space-2xs); }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 20px; height: 20px; border-radius: var(--ds-radius-full); border: 1px solid var(--ds-border-default); font-variant-numeric: tabular-nums; }
.steps li + li::after { content: none; }
.steps li[aria-current="step"] { color: var(--ds-text-primary); }
.steps li[aria-current="step"]::before { background: var(--ds-action-primary-bg); color: var(--ds-action-primary-fg); border-color: transparent; }
@media (max-width: 640px) {
  /* The checkout's action stays in the thumb's reach while the form scrolls. */
  .checkout__pay { position: sticky; bottom: calc(var(--ds-space-sm) + env(safe-area-inset-bottom)); z-index: 5; box-shadow: 0 0 0 var(--ds-space-sm) var(--ds-bg-canvas); }
  /* Stuck over the form, a disabled action needs a ground of its own: a tint would let the text below show through. */
  .checkout__pay[aria-disabled="true"] { background: var(--ds-surface-raised); }
  .section__head { flex-direction: column; align-items: flex-start; gap: var(--ds-space-2xs); }
}
.screen-group { padding: var(--ds-space-lg) 0; border-top: 1px solid var(--ds-border-subtle); }
.screen-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--ds-space-md); margin-bottom: var(--ds-space-md); }

.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: var(--ds-font-weight-medium); color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); padding: var(--ds-space-xs) var(--ds-space-md) var(--ds-space-xs) 0; border-bottom: 1px solid var(--ds-border-default); }
.table td { padding: var(--ds-space-sm) var(--ds-space-md) var(--ds-space-sm) 0; border-bottom: 1px solid var(--ds-border-subtle); vertical-align: top; }
.table td:first-child { font-weight: var(--ds-font-weight-medium); width: 28%; }
/* A row's head is a th (it names the row for a screen reader and a crawler) that looks like the row's first cell. */
.table tbody th { padding: var(--ds-space-sm) var(--ds-space-md) var(--ds-space-sm) 0; border-bottom: 1px solid var(--ds-border-subtle); vertical-align: top; font-size: inherit; color: inherit; width: 28%; }

.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; justify-content: space-between; gap: var(--ds-space-md); padding: var(--ds-space-sm) 0; border-bottom: 1px solid var(--ds-border-subtle); }
.list li > :last-child { text-align: right; color: var(--ds-text-muted); }

.meter { height: 8px; border-radius: var(--ds-radius-pill); background: var(--ds-action-secondary-bg); overflow: hidden; margin: var(--ds-space-sm) 0 var(--ds-space-xs); }
.meter i { display: block; height: 100%; background: var(--ds-text-primary); border-radius: var(--ds-radius-pill); }

/* buy panel (B11) */
.notice { display: flex; flex-direction: column; gap: var(--ds-space-xs); padding: var(--ds-space-md); border-radius: var(--ds-radius-md); background: var(--ds-status-attention-bg); color: var(--ds-status-attention-fg); font-size: var(--ds-type-caption-size); }
.notice b { font-size: var(--ds-type-body-size); }
.notice ul { margin: 0; padding-left: var(--ds-space-lg); }

/* asset page */

/* search */

@media (max-width: 640px) {
  .table td:first-child, .table tbody th { width: 40%; }
  /* The narrowest phones (320 px): the columns share the width and long words wrap, so a table never pushes the page
     sideways (a page wider than the screen also moves the bars fixed to its bottom). */
  .table { table-layout: fixed; }
  .table th, .table td { padding-right: var(--ds-space-xs); overflow-wrap: anywhere; }
  .display { font-size: var(--ds-type-heading-1-size); line-height: var(--ds-type-heading-1-line-height); }
}

/* ═════ MVP structure (docs/15 §4): explore · product page · pricing · checkout · footer ═════ */
.announce { background: var(--ds-bg-sunken); color: var(--ds-text-secondary); border-bottom: 1px solid var(--ds-border-subtle); font-size: var(--ds-type-caption-size); text-align: center; padding: var(--ds-space-xs) var(--ds-space-md); }
.announce a { text-decoration: underline; }

/* Explore — a sidebar of filters, a toolbar, a grid of cards (the reference's structure) */
.grid { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; row-gap: var(--st-gutter-col); }
.grid > * { grid-column: span 3; }
.card { display: flex; flex-direction: column; border-radius: var(--ds-radius-card); border: 1px solid var(--ds-border-subtle); background: var(--ds-surface-card); overflow: hidden; transition: border-color .15s, transform .15s; position: relative; padding: 0; }
.card__cover { aspect-ratio: var(--st-card-cover); background: var(--ds-bg-sunken); overflow: hidden; position: relative; border-bottom: 1px solid var(--ds-border-subtle); }
.card__cover img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .4s; }
.card__tile { width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding: var(--ds-space-lg); gap: var(--ds-space-2xs); background: linear-gradient(160deg, var(--ds-surface-raised), var(--ds-bg-sunken)); }
.card__tile b { font-size: var(--ds-type-numeric-large-size); font-weight: var(--ds-font-weight-light); line-height: 1; }
.card__body { padding: var(--ds-space-md) var(--ds-space-lg) var(--ds-space-lg); display: flex; flex-direction: column; gap: var(--ds-space-2xs); flex: 1; }
.card__body .card__meta { margin-top: auto; padding-top: var(--ds-space-xs); }
.card__body h2, .card__body h3 { font-size: var(--ds-type-body-large-size); font-weight: var(--ds-font-weight-medium); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__sum { color: var(--ds-text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card__meta { display: flex; align-items: center; gap: var(--ds-space-xs); min-width: 0; white-space: nowrap; color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); margin-top: var(--ds-space-2xs); }
.card__meta > span:first-of-type { overflow: hidden; text-overflow: ellipsis; }
.card__status { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: var(--ds-space-3xs); color: var(--ds-status-attention-fg); }
.card__status::before { content: ''; width: 8px; height: 8px; border-radius: var(--ds-radius-full); background: currentColor; }
.card__meta i { flex: none;  width: 16px; height: 16px; border-radius: var(--ds-radius-xs); background: linear-gradient(var(--ds-text-primary) 0 33%, var(--ds-text-muted) 33% 66%, var(--ds-border-strong) 66%); }
.field { height: 44px; padding: 0 var(--ds-space-md); border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-border-default); background: var(--ds-bg-canvas); color: var(--ds-text-primary); font: inherit; width: 100%; }
.button--block { width: 100%; }
.why { font-size: var(--ds-type-caption-size); color: var(--ds-text-muted); }
.empty { grid-column: 1 / -1; padding: var(--ds-space-3xl); text-align: center; color: var(--ds-text-secondary); border: 1px dashed var(--ds-border-default); border-radius: var(--ds-radius-card); }

/* Product page — header card, gallery, two columns (the reference's structure) */
.product { padding-block: var(--ds-space-xl) var(--st-section); }
.head-card { background: var(--ds-surface-card); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-card); padding: var(--ds-space-xl); display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.head-card__row { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-md); padding-top: var(--ds-space-md); margin-top: var(--ds-space-xs); border-top: 1px solid var(--ds-border-subtle); flex-wrap: wrap; }
.maker { display: flex; align-items: center; gap: var(--ds-space-xs); color: var(--ds-text-secondary); }
.maker i { width: 20px; height: 20px; border-radius: var(--ds-radius-xs); background: linear-gradient(var(--ds-text-primary) 0 33%, var(--ds-text-muted) 33% 66%, var(--ds-border-strong) 66%); }
body { overflow-x: clip; }
.cols { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; row-gap: var(--st-gutter-col); align-items: start; }
.cols > .cols__main { grid-column: span 8; min-width: 0; }
.cols > .cols__side { grid-column: span 4; min-width: 0; }
.cols__main, .cols__side { display: flex; flex-direction: column; gap: var(--st-gutter-col); }
.box { background: var(--ds-surface-card); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-card); padding: var(--ds-space-xl); display: flex; flex-direction: column; gap: var(--ds-space-md); }
.box > p { margin: 0; color: var(--ds-text-secondary); }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-sm); }
.ticks li { display: flex; gap: var(--ds-space-sm); align-items: flex-start; }
.ticks li::before { content: '✓'; color: var(--ds-text-primary); font-weight: var(--ds-font-weight-semibold); }
.ticks--two { grid-template-columns: 1fr 1fr; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--ds-space-sm) var(--ds-space-lg); margin: 0; }
.kv dt { color: var(--ds-text-muted); }
.kv dd { margin: 0; text-align: right; }
.faq details { border-bottom: 1px solid var(--ds-border-subtle); padding: var(--ds-space-md) 0; }
.faq summary { cursor: pointer; font-weight: var(--ds-font-weight-medium); list-style: none; display: flex; justify-content: space-between; }
.faq summary::after, .lib-more summary::after { content: ""; flex: none; width: 12px; height: 12px; color: var(--ds-text-muted); background: linear-gradient(currentColor, currentColor) center / 12px var(--st-mark-w) no-repeat, linear-gradient(currentColor, currentColor) center / var(--st-mark-w) 12px no-repeat; transition: background-size var(--st-dur) var(--st-ease-out), rotate var(--st-dur) var(--st-ease-out); }
/* Open: the plus turns a quarter and loses its upright — a minus (accordion.mjs moves the box). */
.faq details[open]:not([data-closing]) summary::after, .lib-more[open]:not([data-closing]) summary::after { rotate: 90deg; background-size: 12px var(--st-mark-w), var(--st-mark-w) 0; }
.faq summary::-webkit-details-marker, .lib-more summary::-webkit-details-marker { display: none; }
.faq p { margin: var(--ds-space-sm) 0 0; color: var(--ds-text-secondary); }
.mini { display: flex; gap: var(--ds-space-sm); align-items: center; }
.mini img, .mini span.ph { width: 56px; height: 40px; border-radius: var(--ds-radius-sm); object-fit: cover; object-position: top left; background: var(--ds-bg-sunken); flex: none; }

/* Pricing — the plans page */
.pricing { padding-block: var(--ds-space-3xl) var(--st-section); text-align: center; }
.pricing > * { grid-column: 3 / 11; }
.pricing > .plans, .pricing > .compare, .pricing > .pricing__foot { grid-column: 1 / -1; }
.pricing > .faq { text-align: left; }
.pricing__ctx { color: var(--ds-text-secondary); }
/* The toggle sits centred inside a row that spans its columns, so the row's edges stay on the grid. */
.pricing__toggle { display: flex; justify-content: center; }
/* The billing toggle (OD-57): glass with a light pill that slides to the chosen period (pricing.mjs places it). */
.billing { position: relative; display: inline-flex; gap: var(--ds-space-2xs); padding: var(--ds-space-2xs); border-radius: var(--ds-radius-pill); background: rgb(255 255 255 / 4%); box-shadow: inset 0 0 0 1px var(--st-hairline); }
.billing button { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--ds-space-xs); height: 36px; padding: 0 var(--ds-space-lg); border-radius: var(--ds-radius-pill); border: 0; background: transparent; color: var(--ds-text-secondary); font: inherit; font-weight: var(--ds-font-weight-medium); cursor: pointer; transition: color var(--st-dur) var(--st-ease-standard); }
.billing button[aria-pressed="true"] { color: var(--ds-text-inverse); }
.billing__pill { position: absolute; z-index: 0; top: var(--ds-space-2xs); bottom: var(--ds-space-2xs); left: 0; width: 0; border-radius: var(--ds-radius-pill); background: var(--ds-surface-inverse); box-shadow: 0 4px 16px rgb(0 0 0 / 30%); }
.billing:not(.is-ready) button[aria-pressed="true"] { background: var(--ds-surface-inverse); }
.billing__save { padding: 0 var(--ds-space-xs); border-radius: var(--ds-radius-pill); background: color-mix(in srgb, var(--st-accent) 16%, transparent); color: var(--st-accent); font-size: var(--ds-type-caption-size); line-height: 20px; }
.billing button[aria-pressed="true"] .billing__save { background: color-mix(in srgb, var(--st-accent-ink) 12%, transparent); color: var(--st-accent-ink); }
@media (prefers-reduced-motion: no-preference) { .billing__pill { transition: translate var(--st-spring-dur) var(--st-spring), width var(--st-spring-dur) var(--st-spring); } }
.plans { display: grid; grid-template-columns: subgrid; row-gap: var(--st-gutter-col); text-align: left; align-items: stretch; }
.plans > .plan { grid-column: span 4; }
/* A plan (OD-57, after getlayers' pricing): glass lit from its top, a hairline inside, a soft shadow below; the popular
   one lit by the accent from within — never a white frame. */
.plan { position: relative; display: flex; flex-direction: column; gap: var(--ds-space-md); padding: var(--ds-space-xl); border-radius: var(--ds-radius-card); border: 0; background: var(--st-glass-panel); box-shadow: inset 0 0 0 1px var(--st-hairline), var(--st-rim), var(--st-depth); }
.plan--popular { background: var(--st-glass-lit); box-shadow: inset 0 0 0 1px var(--st-hairline-strong), var(--st-rim), var(--st-depth), 0 0 64px -24px var(--st-accent-glow); }
.plan__head { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); }
.plan__tag { color: var(--ds-text-muted); font-size: var(--ds-type-body-size); font-weight: var(--ds-font-weight-regular); }
.plan__badge { display: inline-flex; align-items: center; gap: var(--ds-space-2xs); height: 28px; padding: 0 var(--ds-space-sm); border-radius: var(--ds-radius-pill); background: color-mix(in srgb, var(--st-accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-accent) 36%, transparent); color: var(--st-accent); font-size: var(--ds-type-caption-size); font-weight: var(--ds-font-weight-semibold); white-space: nowrap; }
/* The features: each behind a small tinted tick. */
.marks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-sm); color: var(--ds-text-secondary); }
.marks li { display: flex; gap: var(--ds-space-sm); align-items: flex-start; }
.mark-tick { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: var(--ds-space-3xs); border-radius: var(--ds-radius-xs); background: color-mix(in srgb, var(--st-accent) 14%, transparent); color: var(--st-accent); }
.plan:not(.plan--popular) .mark-tick { background: rgb(255 255 255 / 6%); color: var(--ds-text-primary); }
.plan__for { margin: var(--ds-space-xs) 0 0; min-height: calc(2 * var(--ds-type-body-line-height)); }
.plan__price { display: flex; align-items: baseline; gap: var(--ds-space-xs); }
.plan__price b { font-size: var(--ds-type-numeric-large-size); font-weight: var(--ds-font-weight-medium); font-variant-numeric: tabular-nums; }
.plan__quota { display: flex; flex-direction: column; gap: var(--ds-space-2xs); padding: var(--ds-space-md); border-radius: var(--ds-radius-lg); background: rgb(255 255 255 / 3%); box-shadow: inset 0 0 0 1px var(--st-hairline); }
.pricing__foot { color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.compare { margin-top: var(--st-section); text-align: left; padding: var(--ds-space-xl); border-radius: var(--ds-radius-card); background: var(--st-glass-panel); box-shadow: inset 0 0 0 1px var(--st-hairline), var(--st-rim); }
.compare__title { text-align: center; margin-bottom: var(--ds-space-xl); }
.pricing__head { display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-md); }
.pricing__head .display, .pricing__head .pricing__ctx { margin: 0; }
.compare td, .compare th { text-align: center; }
.compare td:first-child, .compare th:first-child { text-align: left; }

/* Checkout — two halves: the order, the system */
.checkout { min-height: 100vh; min-height: 100dvh; row-gap: 0; }
.checkout > .checkout__form { grid-column: 1 / 6; padding-block: var(--ds-space-xl); }
.checkout__in { display: flex; flex-direction: column; gap: var(--ds-space-lg); }
/* Full-bleed by design (docs/19 §2): the art's ground runs from column 7 to the window's right edge. */
.checkout > .checkout__art { grid-column: 7 / -1; box-shadow: 0 0 0 100vmax var(--ds-bg-sunken); clip-path: inset(0 -100vmax 0 0); }
.checkout__top { display: flex; justify-content: space-between; align-items: center; }
.checkout__art { background: var(--ds-bg-sunken); display: flex; align-items: center; justify-content: center; padding-block: var(--ds-space-3xl); }
.checkout__art figure { margin: 0; width: 100%; display: flex; flex-direction: column; gap: var(--ds-space-md); }
.checkout__art img { border-radius: var(--ds-radius-card); border: 1px solid var(--ds-border-subtle); box-shadow: var(--ds-shadow-elevation-3-modal); }
.order { border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-card); padding: var(--ds-space-lg); display: flex; flex-direction: column; gap: var(--ds-space-sm); background: var(--ds-surface-card); }
.order__row { display: flex; justify-content: space-between; gap: var(--ds-space-md); }
.due { display: flex; justify-content: space-between; align-items: baseline; padding-top: var(--ds-space-md); border-top: 1px solid var(--ds-border-subtle); }
.due b { font-size: var(--ds-type-numeric-large-size); font-weight: var(--ds-font-weight-medium); }
.state { display: none; }
.state[data-on] { display: flex; flex-direction: column; gap: var(--ds-space-md); }
.cards-badges { display: flex; flex-wrap: wrap; gap: var(--ds-space-2xs); justify-content: center; }

/* Footer — newsletter band, columns, legal line */
.foot2 { margin-top: var(--st-section); overflow: hidden; }
.foot2__in { padding-block: var(--ds-space-3xl) var(--ds-space-xl); display: flex; flex-direction: column; gap: var(--ds-space-3xl); }
.foot2__news { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--ds-space-xl); flex-wrap: wrap; padding-bottom: var(--ds-space-3xl); border-bottom: 1px solid var(--ds-border-subtle); }
.foot2__news h2 { font-size: var(--ds-type-display-size); line-height: 1.1; font-weight: var(--ds-font-weight-regular); letter-spacing: var(--ds-font-letter-spacing-tight); margin: 0; max-width: 18ch; }
.foot2__news p { margin: var(--ds-space-sm) 0 0; max-width: 52ch; }
.foot2__news form { display: flex; gap: var(--ds-space-xs); min-width: min(420px, 100%); }
.foot2__news form .field { flex: 1; min-width: 0; }
.foot2__news form .button { white-space: nowrap; flex: none; }
.foot2__cols > * { grid-column: span 2; }
.foot2__cols > .foot2__brand { grid-column: span 4; }
.foot2__brand { display: flex; flex-direction: column; gap: var(--ds-space-md); }
.foot2__brand p { margin: 0; max-width: 36ch; }
.foot2__brand h3 { margin-bottom: var(--ds-space-xs); }
.foot2__brand p.foot2__small { font-size: var(--ds-type-caption-size); margin-top: var(--ds-space-2xs); }
.foot2__cols h3 { margin: 0 0 var(--ds-space-md); font-size: var(--ds-type-caption-size); line-height: inherit; color: var(--ds-text-muted); font-weight: var(--ds-font-weight-medium); text-transform: uppercase; letter-spacing: .06em; }
.foot2__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--ds-space-sm); }
.foot2__legal { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--ds-space-sm) var(--ds-space-xl); align-items: center; padding-top: var(--ds-space-lg); border-top: 1px solid var(--ds-border-subtle); color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.foot2__left { display: flex; gap: var(--ds-space-lg); flex-wrap: wrap; }
.foot2__left a { color: inherit; }
.foot2__pay { display: flex; align-items: center; gap: var(--ds-space-sm); flex-wrap: wrap; justify-content: flex-end; }
.paymarks { display: flex; gap: var(--ds-space-2xs); flex-wrap: wrap; }
.paymark { padding: var(--ds-space-3xs) var(--ds-space-xs); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-xs); background: var(--ds-surface-card); color: var(--ds-text-secondary); font-weight: var(--ds-font-weight-medium); white-space: nowrap; }
.foot2__mor { grid-column: 1 / -1; margin: 0; max-width: 90ch; }
.legal-row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-2xs) var(--ds-space-md); font-size: var(--ds-type-caption-size); color: var(--ds-text-muted); padding-top: var(--ds-space-md); border-top: 1px solid var(--ds-border-subtle); }
.legal-row a { color: var(--ds-text-secondary); text-decoration: underline; text-underline-offset: 2px; }
.legal-row span { flex-basis: 100%; text-align: center; }
.doc { padding-block: var(--ds-space-3xl) var(--st-section); text-align: left; }
.doc > * { grid-column: 3 / 11; }
.doc--narrow > * { grid-column: 4 / 10; }
.doc__list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--ds-space-sm); }

@media (max-width: 1100px) {
  .grid > * { grid-column: span 4; }
  .cols > .cols__main, .cols > .cols__side { grid-column: 1 / -1; }
  .pricing > *, .doc > *, .doc--narrow > * { grid-column: 1 / -1; }
  .plans > .plan { grid-column: 1 / -1; }
  .checkout > .checkout__form { grid-column: 1 / -1; }
  .checkout > .checkout__art { grid-column: 1 / -1; clip-path: inset(0 -100vmax); }
  .foot2__cols > * { grid-column: span 4; }
  .foot2__cols > .foot2__brand { grid-column: 1 / -1; }
  .foot2__legal { grid-template-columns: minmax(0, 1fr); }
  .foot2__pay { justify-content: flex-start; }
}
@media (max-width: 640px) {
  .ticks--two { grid-template-columns: minmax(0, 1fr); }
  .foot2__cols > * { grid-column: span 2; }
  .foot2__news h2 { font-size: var(--ds-type-heading-1-size); }
}

/* The download — one ZIP and what is inside (catalog/offer.json `delivery`) */
.zip { border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-card); background: var(--ds-bg-sunken); padding: var(--ds-space-md) var(--ds-space-lg); margin: var(--ds-space-md) 0; }
.zip__name { display: flex; align-items: center; gap: var(--ds-space-xs); }
.zip__icon { width: 16px; height: 20px; flex: none; border-radius: var(--ds-radius-xs); background: repeating-linear-gradient(180deg, var(--ds-text-muted) 0 2px, transparent 2px 4px) 50% 0 / 4px 10px no-repeat, var(--ds-surface-raised); border: 1px solid var(--ds-border-default); }
.zip ul, .zip__list { list-style: none; margin: var(--ds-space-sm) 0 0; padding: 0 0 0 var(--ds-space-lg); border-left: 1px solid var(--ds-border-subtle); display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.zip li, .zip__list li { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: var(--ds-space-sm); align-items: baseline; }
.zip code, .zip__list code { font-family: var(--ds-font-mono, 'JetBrains Mono', monospace); font-size: var(--ds-type-caption-size); color: var(--ds-text-primary); }
.zip li span, .zip__list li span { color: var(--ds-text-secondary); font-size: var(--ds-type-caption-size); }
@media (max-width: 640px) { .zip li, .zip__list li { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ═════ Storefront v2 (docs/20): the dark theme, the fixed header, the banner, the catalogue, the yellow footer ═════ */

/* The header — fixed at the top while the page scrolls; the mark, the catalogue's sections, the search, pricing, the action */
.bar { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--ds-bg-canvas) 86%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--ds-border-subtle); }
.bar__in { min-height: var(--st-bar-h); padding-block: var(--ds-space-xs); display: flex; align-items: center; gap: var(--ds-space-lg); }
.nav { display: flex; gap: var(--ds-space-3xs); }
.nav a { padding: var(--ds-space-xs) var(--ds-space-sm); border-radius: var(--ds-radius-pill); color: var(--ds-text-secondary); white-space: nowrap; }
.nav a[aria-current] { color: var(--ds-text-primary); background: var(--ds-state-selected); }
.bar__search { flex: 1 1 auto; min-width: 0; position: relative; display: flex; align-items: center; }
.bar__search input { width: 100%; height: 40px; padding: 0 var(--ds-space-2xl) 0 var(--ds-space-md); border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-border-default); background: var(--ds-surface-card); color: var(--ds-text-primary); font: inherit; }
.bar__search input::placeholder { color: var(--ds-text-placeholder); }
.bar__search input:focus { outline: none; border-color: var(--ds-border-focus); box-shadow: var(--ds-shadow-focus-ring); }
.bar__search kbd { position: absolute; right: var(--ds-space-sm); font-family: var(--ds-font-family-mono); font-size: var(--ds-type-caption-size); color: var(--ds-text-muted); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-xs); padding: 0 var(--ds-space-xs); }
.bar__end { display: flex; align-items: center; gap: var(--ds-space-sm); }
/* The holder's chip (plan-chip.mjs, docs/31 §6): in the header where there is room; on a phone it lives in the menu. */
.chip--plan { text-decoration: none; }
@media (max-width: 640px) { .bar .chip--plan { display: none; } }

/* The catalogue — categories with their counts on 3 columns, the shelf on 9 (docs/19, docs/20 §3) */
.catalogue { padding-block: var(--ds-space-xl) 0; align-items: start; scroll-margin-top: var(--st-bar-h); }
.catalogue .side { grid-column: span 3; position: sticky; top: calc(var(--st-bar-h) + var(--ds-space-md)); max-height: calc(100vh - var(--st-bar-h) - 2 * var(--ds-space-md)); overflow-y: auto; display: flex; flex-direction: column; gap: var(--ds-space-sm); scrollbar-width: thin; }
.catalogue > .shelf { grid-column: span 9; display: grid; grid-template-columns: subgrid; row-gap: var(--ds-space-lg); align-content: start; }
.shelf > * { grid-column: 1 / -1; min-width: 0; }
.side__block { background: var(--ds-surface-card); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-card); padding: var(--ds-space-md); display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.side__block > .label { margin: 0; }
.cats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-3xs); }
.cat { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-sm); min-height: 32px; padding: var(--ds-space-2xs) var(--ds-space-sm); border: 0; border-radius: var(--ds-radius-md); background: transparent; color: var(--ds-text-secondary); font: inherit; text-align: left; cursor: pointer; transition: filter .15s ease; }
.cat[aria-pressed="true"] { background: var(--ds-state-selected); color: var(--ds-text-primary); }
.cat__n { color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); font-variant-numeric: tabular-nums; font-weight: var(--ds-font-weight-regular); }
/* On a desktop the sidebar carries the categories; the phone's sticky row and the sections inside the catalogue wait. */
/* Phone-only pieces wait on wider screens: the thumb bar, the filter sheet's head and foot, the menu button. */
.thumbbar, .side__sheet-head, .side__sheet-foot, .bar__menu { display: none; }
.scrim { position: fixed; inset: 0; z-index: 35; background: var(--ds-surface-scrim); }
body.is-locked { overflow: hidden; }
.side__sheet-head { justify-content: space-between; align-items: center; }
.side__sheet-head h2 { font-size: var(--ds-type-heading-1-size); }
.side__sheet-foot { position: sticky; bottom: 0; padding: var(--ds-space-sm) 0 calc(var(--ds-space-md) + env(safe-area-inset-bottom)); background: var(--ds-surface-raised); }
/* The menu button: three lines in a round button, the size of a thumb. */
.bar__menu { place-items: center; width: 44px; height: 44px; border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-full); background: var(--ds-surface-card); color: var(--ds-text-primary); cursor: pointer; }
.bar__menu span, .bar__menu span::before, .bar__menu span::after { display: block; width: 16px; height: var(--ds-space-3xs); border-radius: var(--ds-radius-full); background: currentColor; }
.bar__menu span { position: relative; }
.bar__menu span::before, .bar__menu span::after { content: ""; position: absolute; left: 0; }
.bar__menu span::before { top: calc(-3 * var(--ds-space-3xs)); }
.bar__menu span::after { top: calc(3 * var(--ds-space-3xs)); }
/* The menu: a full-screen sheet with the search, the sections, Pricing, help and legal. */
.menu { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: var(--ds-space-md) var(--st-margin) calc(var(--ds-space-xl) + env(safe-area-inset-bottom)); border: 0; background: var(--ds-bg-canvas); color: var(--ds-text-primary); }
.menu[open] { display: flex; flex-direction: column; gap: var(--ds-space-lg); overflow-y: auto; }
.menu::backdrop { background: var(--ds-surface-scrim); }
.menu__head { display: flex; justify-content: space-between; align-items: center; }
.menu__more { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.menu__more a { display: flex; align-items: center; min-height: 44px; color: var(--ds-text-secondary); }
/* The thumb bar's pieces. */
.thumbbar__search { flex: 1 1 auto; min-width: 0; }
.thumbbar__search input { width: 100%; height: 48px; padding: 0 var(--ds-space-lg); border-radius: var(--ds-radius-pill); border: 1px solid var(--ds-border-default); background: var(--ds-surface-card); color: var(--ds-text-primary); font: inherit; font-size: var(--ds-font-size-16); }
.thumbbar__sort { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-full); background: var(--ds-surface-card); cursor: pointer; }
.thumbbar__filter { flex: none; height: 48px; }
.thumbbar__count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 var(--ds-space-2xs); border-radius: var(--ds-radius-pill); background: var(--ds-action-primary-bg); color: var(--ds-action-primary-fg); font-size: var(--ds-type-caption-size); }
/* The strongest neutral as an action's ground: Filter on the thumb bar. */
.button--inverse { background: var(--ds-surface-inverse); color: var(--ds-text-inverse); }
.shelf__head { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-md); }
.shelf__head h2 { font-size: var(--ds-type-heading-1-size); display: flex; align-items: baseline; gap: var(--ds-space-xs); }
/* The sort: its button reads "Sort by: Featured"; its list opens under it, on the raised surface, with room around each order. */
.sort { position: relative; flex: none; }
.sort__trigger { display: inline-flex; align-items: center; gap: var(--ds-space-xs); height: 44px; padding: 0 var(--ds-space-md) 0 var(--ds-space-lg); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-pill); background: var(--ds-surface-card); color: var(--ds-text-primary); font: inherit; cursor: pointer; transition: filter .15s ease; }
.sort__label { color: var(--ds-text-muted); }
.sort__caret { margin-left: var(--ds-space-sm); transform: rotate(90deg); transition: transform .15s ease; opacity: .7; }
.sort__trigger[aria-expanded="true"] .sort__caret { transform: rotate(-90deg); }
.sort__list { position: absolute; z-index: 30; right: 0; top: calc(100% + var(--ds-space-xs)); min-width: 100%; width: max-content; margin: 0; padding: var(--ds-space-xs); list-style: none; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-2xl); background: var(--ds-surface-raised); box-shadow: var(--ds-shadow-elevation-3-modal); }
.sort__list:focus { outline: none; }
.sort__option { padding: var(--ds-space-sm) var(--ds-space-lg); border-radius: var(--ds-radius-lg); color: var(--ds-text-secondary); cursor: pointer; white-space: nowrap; }
.sort__option.is-active { background: var(--ds-state-hover); color: var(--ds-text-primary); }
.sort__option[aria-selected="true"] { color: var(--ds-text-primary); font-weight: var(--ds-font-weight-medium); }
.shelf__end { display: flex; justify-content: center; }
.shelf__more { font-size: var(--ds-type-body-size); font-weight: var(--ds-font-weight-regular); color: var(--ds-text-muted); }

/* The footer — the accent as its ground, ink on it; the legal line on the dark base below */
.foot2 { background: var(--st-accent); color: var(--st-accent-ink); }
.foot2 .muted, .foot2 .foot2__cols h3 { color: color-mix(in srgb, var(--st-accent-ink) 66%, transparent); }
.foot2 a { color: var(--st-accent-ink); }
.foot2__news { border-bottom-color: color-mix(in srgb, var(--st-accent-ink) 18%, transparent); }
.foot2 .field { background: transparent; border-color: color-mix(in srgb, var(--st-accent-ink) 32%, transparent); color: var(--st-accent-ink); }
.foot2 .field::placeholder { color: color-mix(in srgb, var(--st-accent-ink) 52%, transparent); }
.foot2 .button[aria-disabled="true"] { background: color-mix(in srgb, var(--st-accent-ink) 12%, transparent); color: color-mix(in srgb, var(--st-accent-ink) 64%, transparent); }
.foot2 .mark__glyph { background: linear-gradient(var(--st-accent-ink) 0 33%, color-mix(in srgb, var(--st-accent-ink) 60%, transparent) 33% 66%, color-mix(in srgb, var(--st-accent-ink) 25%, transparent) 66%); }
.foot2__base { background: var(--ds-bg-canvas); color: var(--ds-text-muted); }
.foot2__base a { color: var(--ds-text-secondary); }
.foot2__base .foot2__legal { border-top: 0; padding-block: var(--ds-space-lg); }

@media (max-width: 1100px) {
  .bar__in { flex-wrap: wrap; row-gap: var(--ds-space-2xs); column-gap: var(--ds-space-md); }
  .bar .nav { flex: 1 1 0; min-width: 0; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .bar__search { order: 3; flex-basis: 100%; }
  .catalogue .side { grid-column: 1 / -1; position: static; max-height: none; overflow: visible; }
  .catalogue > .shelf { grid-column: 1 / -1; }
  /* Above the shelf the categories are one row of pills that scrolls, the row fading at its edge. */
  .side__block { background: none; border: 0; padding: 0; }
  .cats { flex-direction: row; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
  .cats li { flex: none; }
  .cat { width: auto; border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-pill); white-space: nowrap; }
}
@media (max-width: 640px) {
  /* The phone's header (docs/21 §6): the mark, Pricing and the menu button; under them the catalogue's sections as
     tabs, the current one underlined. It stays at the top. The search lives in the thumb bar on the catalogue and in
     the menu everywhere else. */
  .shelf__head h2 { font-size: var(--ds-type-heading-2-size); }
  /* The shelf's sort button gives way to the thumb bar's; its list stays, a sheet from the bottom. */
  .shelf__head .sort__trigger { display: none; }
  .announce__more { display: none; }
  .bar__in { row-gap: 0; padding-block: var(--ds-space-xs) 0; }
  .bar__search { display: none; }
  .bar__end { margin-left: auto; gap: var(--ds-space-xs); }
  .bar__menu { display: grid; }
  .bar .nav { order: 4; flex: 1 1 100%; gap: var(--ds-space-lg); overflow-x: auto; scrollbar-width: none; -webkit-mask-image: none; mask-image: none; }
  .bar .nav a { padding: var(--ds-space-sm) 0; border-radius: 0; background: none; border-bottom: 2px solid transparent; }
  .bar .nav a[aria-current] { background: none; color: var(--ds-text-primary); border-bottom-color: var(--ds-text-primary); }
  /* The thumb bar: the search, the sort and Filter at the bottom of the screen, above the home indicator. */
  .thumbbar { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: var(--ds-space-xs); padding: var(--ds-space-sm) var(--st-margin) calc(var(--ds-space-sm) + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--ds-bg-canvas) 90%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--ds-border-subtle); }
  body:has(.thumbbar) .foot2__base { padding-bottom: calc(var(--st-buybar-h) + env(safe-area-inset-bottom)); }
  /* On a product page the action takes the bottom once it is up; the search waits under it. */
  body:has(.buybar--on) .thumbbar--search { display: none; }
  /* The filter: the categories and the systems as a sheet from the bottom, its results counted on its button. */
  .catalogue .side { display: none; }
  .catalogue .side.side--open { display: flex; position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: auto; max-height: 82dvh; overflow-y: auto; flex-direction: column; gap: var(--ds-space-lg); padding: var(--ds-space-lg) var(--st-margin) 0; border-radius: var(--ds-radius-2xl) var(--ds-radius-2xl) 0 0; background: var(--ds-surface-raised); box-shadow: var(--ds-shadow-elevation-3-modal); }
  .side--open .side__sheet-head { display: flex; }
  .side--open .side__sheet-foot { display: block; }
  .side--open .cats { flex-direction: column; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .side--open .cat { width: 100%; border: 0; border-radius: var(--ds-radius-md); }
}

/* The banner (the owner's frame B-01 · Store banner, docs/20 §5). Above 1100 px the composition is the frame itself,
   scaled to the banner's width: every size is N units of the 1920-wide frame (--u, a container unit), so it keeps its
   proportions on every desktop. The action is the store's own button, at its own size. */
.banner-row { padding-top: var(--ds-space-xs); }
.banner { position: relative; container-type: inline-size; aspect-ratio: 1920 / 585; display: flex; align-items: center; justify-content: center; overflow: clip; border-radius: var(--ds-radius-3xl); font-family: var(--st-banner-font);
  background: radial-gradient(ellipse at center, var(--ds-bg-canvas) 40%, color-mix(in srgb, var(--st-accent) 45%, var(--ds-bg-canvas)) 100%); }
/* The owner's picture only where the build carries it (`banner--art`, home.mjs): a public build has none, and a
   stylesheet that asked for it anyway would cost every visit a 404 (docs/41). */
.banner--art { background: url(/media/storefront/banner-bg.jpg) center / cover no-repeat, radial-gradient(ellipse at center, var(--ds-bg-canvas) 40%, color-mix(in srgb, var(--st-accent) 45%, var(--ds-bg-canvas)) 100%); }
.banner * { --u: calc(100cqw / 1920); }
.banner__hero { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: calc(40 * var(--u)); text-align: center; }
.banner__words { display: flex; flex-direction: column; align-items: center; gap: calc(16 * var(--u)); }
.banner__title { margin: 0; font-size: calc(64 * var(--u)); line-height: calc(72 * var(--u)); font-weight: var(--ds-font-weight-semibold); letter-spacing: calc(-.5 * var(--u)); color: var(--ds-text-primary); }
.banner__accent { color: var(--st-accent); }
.banner__lead { margin: 0; font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); color: var(--ds-text-secondary); }
.banner__card { position: absolute; z-index: 1; display: flex; flex-direction: column; gap: calc(20 * var(--u)); padding: calc(24 * var(--u)); border: 1px solid var(--ds-border-default); border-radius: calc(24 * var(--u)); background: var(--st-glass-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
.banner__card--states { left: calc(120 * var(--u)); top: calc(50% - 27.5 * var(--u)); transform: translateY(-50%); width: calc(400 * var(--u)); }
.banner__card--files { right: calc(290 * var(--u)); bottom: calc(-41 * var(--u)); width: calc(340 * var(--u)); }
.banner__head { display: flex; justify-content: space-between; align-items: center; gap: calc(8 * var(--u)); }
.banner__title-row { display: flex; align-items: center; gap: calc(8 * var(--u)); }
.banner__icon { flex: none; width: calc(20 * var(--u)); height: calc(20 * var(--u)); }
.banner__chip .banner__icon { width: calc(16 * var(--u)); height: calc(16 * var(--u)); }
.banner__card-title { font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); color: var(--ds-text-primary); white-space: nowrap; }
.banner__note { font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); color: var(--ds-text-muted); white-space: nowrap; }
.banner__stage { position: relative; width: calc(352 * var(--u)); height: calc(196 * var(--u)); }
.banner__shot { position: absolute; overflow: hidden; border: 1px solid var(--ds-border-default); border-radius: calc(8 * var(--u)); background: var(--ds-bg-sunken); }
.banner__shot img, .banner__phone img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.banner__shot--left { left: 0; top: calc(24 * var(--u)); width: calc(156 * var(--u)); height: calc(104 * var(--u)); box-shadow: 0 8px 24px var(--ds-shadow-color), 0 2px 4px var(--ds-shadow-color); }
.banner__shot--right { left: calc(196 * var(--u)); top: calc(24 * var(--u)); width: calc(156 * var(--u)); height: calc(104 * var(--u)); }
.banner__shot--front { left: calc(62 * var(--u)); top: 0; width: calc(228 * var(--u)); height: calc(152 * var(--u)); border: 0; border-radius: calc(9 * var(--u)); background: none; }
.banner__chip { position: absolute; left: calc(40 * var(--u)); top: calc(158 * var(--u)); display: flex; align-items: center; gap: calc(8 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)); border: 1px solid var(--ds-border-glass); border-radius: var(--ds-radius-pill); background: var(--ds-surface-card); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-size: calc(14 * var(--u)); line-height: calc(20 * var(--u)); font-weight: var(--ds-font-weight-medium); color: var(--ds-text-primary); white-space: nowrap; }
.banner__files { display: flex; align-items: flex-start; gap: calc(12 * var(--u)); width: 100%; }
.banner__file { flex: 1 0 0; min-width: 0; }
.banner__phone { flex: none; width: calc(43 * var(--u)); height: calc(93 * var(--u)); overflow: hidden; border-radius: calc(4 * var(--u)); }
.banner__phone--2 { width: calc(42 * var(--u)); height: calc(91.3 * var(--u)); }
.banner__file--agents { display: flex; flex-direction: column; gap: calc(8 * var(--u)); padding: calc(12 * var(--u)); border: 1px solid var(--ds-border-default); border-radius: calc(8 * var(--u)); background: var(--ds-surface-card); }
.banner__mono { font-family: var(--ds-font-family-mono); font-size: calc(12 * var(--u)); line-height: calc(18 * var(--u)); color: var(--ds-action-primary-bg); }
.banner__line { display: block; height: calc(6 * var(--u)); border-radius: calc(4 * var(--u)); background: var(--ds-fill-muted); }
.banner__line--1 { width: calc(96 * var(--u)); background: var(--ds-fill-strong); }
.banner__line--2 { width: calc(72 * var(--u)); }
.banner__line--3 { width: calc(108 * var(--u)); }
.banner__line--4 { width: calc(56 * var(--u)); background: var(--ds-fill-strong); }
.banner__pointer { position: absolute; z-index: 3; display: flex; align-items: flex-start; }
.banner__pointer--agent { right: calc(140 * var(--u)); bottom: calc(121 * var(--u)); }
.banner__cursor { position: relative; flex: none; width: calc(21 * var(--u)); height: calc(21 * var(--u)); }
/* The pointer's SVG carries its shadow around it: it overhangs its 21-unit box by the frame's own insets. */
.banner__cursor img { position: absolute; inset: -78.57% -116.67% -154.76% -116.67%; width: auto; height: auto; max-width: none; }
.banner__tag { display: inline-flex; margin-top: calc(20 * var(--u)); padding: calc(8 * var(--u)) calc(16 * var(--u)); border-radius: var(--ds-radius-pill); background: var(--ds-surface-inverse); color: var(--ds-text-inverse); font-size: calc(18 * var(--u)); line-height: calc(24 * var(--u)); font-weight: var(--ds-font-weight-semibold); white-space: nowrap; filter: drop-shadow(0 8px 12px var(--ds-shadow-color)) drop-shadow(0 2px 2px var(--ds-shadow-color)); }

/* Below 1100 px the frame cannot keep its proportions and stay readable: the words and the action first, at a size
   of their own, the three cards in a row under them, the pointers left out. */
@media (max-width: 1100px) {
  /* A narrow banner gets the light ground (960 px, a quarter of the bytes): the phone's first screen paints sooner. */
  .banner--art { background-image: url(/media/storefront/banner-bg-960.jpg), radial-gradient(ellipse at center, var(--ds-bg-canvas) 40%, color-mix(in srgb, var(--st-accent) 45%, var(--ds-bg-canvas)) 100%); }
  .banner { aspect-ratio: auto; flex-wrap: wrap; align-items: flex-start; gap: var(--ds-space-lg); padding: var(--ds-space-3xl) var(--ds-space-lg); }
  .banner * { --u: .9px; }
  .banner__hero { flex-basis: 100%; margin-bottom: var(--ds-space-lg); }
  .banner__card { position: static; transform: none; }
  .banner__pointer { display: none; }
  .banner__card--states, .banner__card--files { width: auto; }
}
@media (max-width: 640px) {
  .banner { padding: var(--ds-space-2xl) var(--ds-space-md); }
  .banner * { --u: .62px; }
  .banner__title { font-size: var(--ds-type-heading-1-size); line-height: var(--ds-type-heading-1-line-height); }
  .banner__lead { font-size: var(--ds-type-body-size); line-height: var(--ds-type-body-line-height); }
  .banner__card--files { display: none; }
}

/* ═════ Touch (docs/21): what a phone needs that a mouse does not ═════ */
/* Hover is for a pointer that hovers. On a touch screen a :hover sticks after the tap (a darkened button, an outlined
   card), so every hover rule lives here, and only here. */
@media (hover: hover) {
  a:hover { color: var(--ds-text-primary); }
  .crumbs a:hover { color: var(--ds-text-primary); }
  a.chip:hover { background: var(--ds-state-hover); color: var(--ds-text-primary); }
  .button:hover:not([aria-disabled="true"]), .cat:hover { filter: brightness(.85); }
  .table tr:hover td, .table tbody tr:hover th { background: var(--ds-state-hover); }
  .nav a:hover { color: var(--ds-text-primary); background: var(--ds-state-hover); }
  .sort__trigger:hover { filter: brightness(.85); }
  .tiles__tile:hover, .gallery__thumb:hover { background: var(--ds-state-hover); color: var(--ds-text-primary); }
  .home-shelf__all:hover { color: var(--ds-text-primary); }
}
/* A finger, not a cursor: no grey flash on tap, no 300 ms wait for a double tap, a 44 px target for every control,
   and 16 px text in a field — below that, iOS Safari zooms the page when the field takes the focus. */
html { -webkit-tap-highlight-color: transparent; }
a, button, input, select, summary, [role=tab], [role=option] { touch-action: manipulation; }
@media (pointer: coarse) {
  input, select, textarea, .field, .bar__search input { font-size: var(--ds-font-size-16); }
  .billing button { min-height: 44px; }
  .bar__search input { height: 44px; }
  .logic__list a, .logic__toggle, .checkout__top a, .zip .logic__toggle, .list a, .gallery__cap a, .box > a.muted, a.chip, a.mini { display: inline-flex; align-items: center; min-height: 44px; }
  .logic__list a { min-width: 44px; }
  .crumbs a, .foot2 li a, .foot2__base a, .legal-row a { min-width: 44px; justify-content: center; }
  .mark { min-height: 44px; }
  .button, .cat, .sort__trigger, .nav a, .screens__tabs .cat { min-height: 44px; }
  .sort__option { min-height: 44px; display: flex; align-items: center; }
  .crumbs a, .foot2 li a, .foot2__base a, .legal-row a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot2__cols ul { gap: 0; }
  .faq summary { min-height: 44px; display: flex; align-items: center; }
}


/* ═════ Storefront v3 (docs/24): a content-led home, the catalogue's categories in a row, a stage and a panel ═════ */
.home { padding-bottom: var(--st-section); }
/* The small label above a headline: what the shelf holds, counted. */
.pill { display: inline-flex; align-items: center; min-height: 28px; padding: var(--ds-space-3xs) var(--ds-space-sm); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-pill); color: var(--ds-text-secondary); font-size: var(--ds-type-caption-size); }
/* A shelf of the home: its head, its cards on the page's columns, its faded last row and its way into the catalogue. */
.home-shelf, .home-proof, .home-next, .home-how { margin-top: var(--st-section); }
.home-shelf__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--ds-space-lg); }
.home-shelf__head > div { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-sm); }
.home-shelf__title { font-size: var(--ds-type-display-light-size); font-weight: var(--ds-type-display-light-weight); line-height: var(--ds-type-display-light-line-height); letter-spacing: var(--ds-type-display-light-letter-spacing); }
.home-shelf__all { color: var(--ds-text-secondary); white-space: nowrap; }
.home-shelf__fade { position: relative; display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; max-height: 200px; overflow: hidden; }
.home-shelf__fade > .grid { filter: blur(6px); opacity: .5; -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); pointer-events: none; }
.home-shelf__fade > .button { position: absolute; left: 50%; top: 40%; translate: -50% -50%; }
.home-shelf__end { display: flex; justify-content: center; }
/* A glass pill: the action that sits over pictures. */
.button--glass { background: color-mix(in srgb, var(--ds-surface-card) 72%, transparent); color: var(--ds-text-primary); border: 1px solid var(--ds-border-default); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.grid--3 > * { grid-column: span 4; }
.grid--4 > * { grid-column: span 3; }
/* A card that is its picture: the name and its kind on one line under it, its system under that. */
.card--plain { background: none; border: 0; border-radius: 0; overflow: visible; gap: var(--ds-space-xs); }
.card--plain .card__cover { border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-card); transition: border-color .15s ease; }
.card__line { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-sm); min-width: 0; }
.card__line b { font-weight: var(--ds-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__line span { flex: none; font-size: var(--ds-type-caption-size); }
.card__by { font-size: var(--ds-type-caption-size); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__name { font-weight: var(--ds-font-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__cover--next { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: var(--ds-space-xs); padding: var(--ds-space-lg); border-style: dashed; }
/* The proof: what ships, beside its tree. */
.home-proof { align-items: center; }
.home-proof > .home-proof__words { grid-column: span 5; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-md); }
.home-proof > .home-proof__tree { grid-column: 7 / -1; }
.home-proof .lead { margin: 0; }
/* Tiles: a section to go to, with one line on what it holds. */
.tile { grid-column: span 6; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-xs); padding: var(--ds-space-xl); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-card); background: var(--ds-surface-card); transition: border-color .15s ease; }
.tile b { font-size: var(--ds-type-heading-1-size); font-weight: var(--ds-font-weight-regular); }
.step { grid-column: span 4; display: flex; flex-direction: column; gap: var(--ds-space-xs); padding: var(--ds-space-xl); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-card); }
.step__n { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ds-radius-full); background: var(--ds-state-selected); font-variant-numeric: tabular-nums; }

/* The catalogue's head: the count, the headline, the sections as tabs, the sort at the right. */
.cat-head { padding-top: var(--ds-space-2xl); row-gap: var(--ds-space-lg); }
.cat-head__words { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-sm); }
/* The categories in a row above the shelf: each group a label and its chips, one line that scrolls. */
.catalogue--row { padding-top: var(--ds-space-lg); }
.catalogue--row .side { flex: 1; min-width: 0; position: static; max-height: none; overflow-x: auto; overflow-y: visible; flex-direction: row; align-items: center; gap: var(--ds-space-lg); padding-bottom: var(--ds-space-sm); border-bottom: 1px solid var(--ds-border-subtle); scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent); }
.catalogue--row > .shelf { grid-column: 1 / -1; }
.catalogue--row .side__block { flex-direction: row; align-items: center; gap: var(--ds-space-sm); padding: 0; background: none; border: 0; flex: none; }
.catalogue--row .cats { flex-direction: row; }
.catalogue--row .cats li { flex: none; }
.catalogue--row .cat { width: auto; border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-pill); white-space: nowrap; }
.keep { margin-top: var(--st-section); }
.keep__title { grid-column: 1 / -1; }
.keep > .tile { grid-column: span 4; }
/* A section with nothing to sell yet: a state, drawn. */
.coming { padding-top: var(--ds-space-xl); }
.coming__card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-md); padding: var(--ds-space-3xl); border: 1px dashed var(--ds-border-default); border-radius: var(--ds-radius-card); }
.coming__card p { margin: 0; max-width: 60ch; }
.coming__row { display: flex; flex-wrap: wrap; gap: var(--ds-space-sm); }

/* The item (OD-37): two containers the window's height. The panel holds still; the stage's column scrolls inside its
   own container — on top a view box of a fixed size where the tiles change only the view (a long view scrolls inside
   the box), under it "More like this". Nothing on the page moves when a tile is pressed. */
.item-page { min-height: 100dvh; display: flex; justify-content: center; align-items: center; padding: var(--st-item-pad) var(--st-margin); background: radial-gradient(ellipse at 30% 0%, color-mix(in srgb, var(--st-accent) 6%, transparent), transparent 60%), var(--ds-bg-canvas); }
.item { width: 100%; max-width: var(--st-item-max); display: grid; grid-template-columns: repeat(var(--st-columns), minmax(0, 1fr)); column-gap: var(--st-gutter-col); align-items: stretch; height: var(--st-item-h); }
.panel { position: relative; }
/* Close: back to the list, in the panel's corner. */
.item__close { position: absolute; top: var(--ds-space-md); right: var(--ds-space-md); display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--ds-radius-full); border: 1px solid var(--ds-border-default); background: var(--ds-surface-raised); }
.item__close span, .item__close span::after { display: block; width: 16px; height: var(--ds-space-3xs); border-radius: var(--ds-radius-full); background: var(--ds-text-primary); transform: rotate(45deg); }
.item__close span::after { content: ""; transform: rotate(90deg); }
.item__panel > .chips:first-of-type { padding-right: var(--ds-space-3xl); }
.item > .item__stage { grid-column: span 8; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: var(--ds-space-xl); padding: var(--ds-space-sm) var(--ds-space-sm) var(--ds-space-xl); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-2xl); background: var(--ds-surface-card); }
.item > .item__panel { grid-column: span 4; min-width: 0; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.item__view { flex: none; position: relative; height: calc(var(--st-item-h) * .72); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-xl); overflow: hidden; background: var(--ds-bg-sunken); }
.item__view > .view { position: absolute; inset: 0; overflow-y: auto; padding: var(--ds-space-lg); scrollbar-width: thin; }
.item__view > .view--flush { padding: 0; }
.item__view > .gallery__main--one, .item__view > .empty-stage { width: 100%; height: 100%; border: 0; border-radius: 0; aspect-ratio: auto; }
.item__view > .gallery__main--one img { height: 100%; aspect-ratio: auto; object-fit: contain; object-position: center; }
.item__more { display: flex; flex-direction: column; gap: var(--ds-space-md); padding-inline: var(--ds-space-sm); }
.item__more-head { display: flex; align-items: center; gap: var(--ds-space-md); }
.item__more-head h2 { font-size: var(--ds-type-heading-2-size); display: flex; align-items: baseline; gap: var(--ds-space-xs); }
.item__more-nav { margin-left: auto; display: flex; gap: var(--ds-space-xs); }
.item__more-nav .arrow { width: 36px; height: 36px; border-radius: var(--ds-radius-full); border: 1px solid var(--ds-border-default); background: var(--ds-surface-card); color: var(--ds-text-primary); font: inherit; cursor: pointer; }
.item__more-nav .arrow:disabled { opacity: .4; cursor: default; }
.item__more .strip { scroll-behavior: smooth; }
.panel { display: flex; flex-direction: column; gap: var(--ds-space-md); padding: var(--ds-space-xl); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-2xl); background: var(--ds-surface-card); }
.panel__title { font-size: var(--ds-type-display-light-size); font-weight: var(--ds-type-display-light-weight); line-height: var(--ds-type-display-light-line-height); margin: 0; }
.panel__lead { margin: 0; color: var(--ds-text-secondary); }
.panel__actions { display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.panel__block { display: flex; flex-direction: column; gap: var(--ds-space-xs); padding-top: var(--ds-space-md); border-top: 1px solid var(--ds-border-subtle); }
.panel .why { margin: 0; }
/* The store's answer under the panel's button (access.mjs, docs/31 §5): a refusal in the attention colour. */
.why--refused { color: var(--ds-status-attention-fg); }
.panel .kv { padding-top: var(--ds-space-md); border-top: 1px solid var(--ds-border-subtle); }
.lock { width: 12px; height: 12px; border: 2px solid currentColor; border-radius: var(--ds-radius-xs); opacity: .6; }
/* The six tiles: what the stage shows, one pressed — the strongest neutral. */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-xs); padding-top: var(--ds-space-md); border-top: 1px solid var(--ds-border-subtle); }
.tiles__tile { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: var(--ds-space-md); min-height: 88px; padding: var(--ds-space-sm); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg); background: var(--ds-bg-sunken); color: var(--ds-text-secondary); font: inherit; font-size: var(--ds-type-caption-size); text-align: left; cursor: pointer; position: relative; }
.tiles__tile .cat__n { position: absolute; top: var(--ds-space-sm); right: var(--ds-space-sm); }
.tiles__tile[aria-pressed="true"] { background: var(--ds-state-selected); border-color: var(--ds-border-strong); color: var(--ds-text-primary); }
.tiles__icon { opacity: .8; }
.tiles__tile[aria-pressed="true"] .tiles__icon { opacity: 1; }
/* The stage's views. */
.view { display: flex; flex-direction: column; gap: var(--ds-space-lg); }
.kv--grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ds-space-md); }
.kv--grid > div { display: flex; flex-direction: column; gap: var(--ds-space-3xs); }
.kv--grid dd { text-align: left; font-size: var(--ds-type-heading-2-size); }
.view__head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--ds-space-md); flex-wrap: wrap; }
.gallery { display: flex; flex-direction: column; gap: var(--ds-space-sm); height: 100%; padding-bottom: var(--ds-space-sm); }
.gallery > .gallery__cap, .gallery > .gallery__nav { padding-inline: var(--ds-space-md); }
.gallery__main { display: block; flex: 1; min-height: 0; width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--ds-border-subtle); overflow: hidden; background: var(--ds-bg-sunken); cursor: zoom-in; touch-action: pan-y; }
.gallery__main img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.gallery__cap { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-md); color: var(--ds-text-secondary); }
.gallery__cap a { color: var(--ds-text-primary); white-space: nowrap; }
.gallery__count { margin-left: auto; color: var(--ds-text-muted); font-variant-numeric: tabular-nums; }
.gallery__nav { display: flex; align-items: center; gap: var(--ds-space-sm); }
.gallery__nav button.arrow { flex: none; width: 36px; height: 36px; border-radius: var(--ds-radius-full); border: 1px solid var(--ds-border-default); background: var(--ds-surface-card); color: var(--ds-text-primary); font: inherit; cursor: pointer; }
.gallery__thumbs { display: flex; gap: var(--ds-space-xs); overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
.gallery__thumb { flex: none; width: 96px; padding: 0; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-md); overflow: hidden; background: var(--ds-bg-sunken); cursor: pointer; opacity: .6; }
.gallery__thumb img { width: 100%; aspect-ratio: var(--st-hero-ratio); object-fit: cover; object-position: top center; }
.gallery__thumb[aria-current="true"] { opacity: 1; border-color: transparent; box-shadow: inset 0 0 0 1px var(--st-hairline-strong); }
.sample { display: flex; flex-direction: column; gap: var(--ds-space-xs); padding-top: var(--ds-space-md); border-top: 1px solid var(--ds-border-subtle); }
.sample p { margin: 0; }
.sample form { display: flex; gap: var(--ds-space-xs); }
.agents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-md); }
.agents__item { display: flex; flex-direction: column; gap: var(--ds-space-xs); padding: var(--ds-space-lg); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg); background: var(--ds-bg-sunken); }
.agents__item code { font-family: var(--ds-font-mono, 'JetBrains Mono', monospace); color: var(--ds-text-primary); }
.agents__item p { margin: 0; }
.view > p { margin: 0; }
@media (max-width: 1100px) {
  .home-proof > .home-proof__words, .home-proof > .home-proof__tree { grid-column: 1 / -1; }
  .tile, .step, .keep > .tile { grid-column: span 4; }
  .grid--3 > *, .grid--4 > * { grid-column: span 4; }
  /* Narrow: one column, natural heights — the panel first, the stage under it. */
  .item-page { padding-block: var(--ds-space-md) var(--ds-space-2xl); }
  .item { height: auto; row-gap: var(--st-gutter-col); }
  .item > .item__stage, .item > .item__panel { grid-column: 1 / -1; height: auto; overflow: visible; }
  .item > .item__panel { order: -1; }
  .item__view { height: auto; }
  .item__view > .view { position: static; overflow: visible; }
  .item__view > .view--flush .gallery__main { flex: none; aspect-ratio: var(--st-hero-ratio); }
  .item__view > .gallery__main--one, .item__view > .empty-stage { aspect-ratio: var(--st-hero-ratio); height: auto; }
}
@media (max-width: 640px) {
  .home-shelf__title, .panel__title { font-size: var(--ds-type-heading-1-size); line-height: var(--ds-type-heading-1-line-height); }
  .home-shelf__head { flex-direction: column; align-items: flex-start; }
  .tile, .step, .keep > .tile, .grid--3 > *, .grid--4 > * { grid-column: 1 / -1; }
  .home-shelf__fade { max-height: 160px; }
  /* On a phone the header carries the sections as tabs and the thumb bar the sort: the tabs and the sort's button under
     the headline wait; the sort's list stays, a sheet from the bottom. */
  .catalogue--row .side { display: none; }
  .catalogue--row .side.side--open { display: flex; flex-direction: column; align-items: stretch; -webkit-mask-image: none; mask-image: none; }
  .catalogue--row .side--open .side__block { flex-direction: column; align-items: stretch; }
  .catalogue--row .side--open .cats { flex-direction: column; }
  .catalogue--row .side--open .cat { width: 100%; border: 0; border-radius: var(--ds-radius-md); }
  .agents { grid-template-columns: minmax(0, 1fr); }
  }
/* A finger on the v3 pieces (docs/21): after their own rules, so the 44 px target wins. */
@media (pointer: coarse) {
  .gallery__nav button.arrow { width: 44px; height: 44px; }
  .tiles__tile, .gallery__thumb { min-height: 44px; }
  .home-shelf__all, .view__head a, .section__head a, .item__more-head a { display: inline-flex; align-items: center; min-height: 44px; }
  .item__more-nav .arrow, .item__close { width: 44px; height: 44px; }
}

/* How to use it, and the questions (OD-39): accordions under "More like this" — a rounded card per item, the number,
   the title and a chevron on one line; the answer under it when open. */
.guide { display: flex; flex-direction: column; gap: var(--ds-space-md); padding-inline: var(--ds-space-sm); }
.guide__title { font-size: var(--ds-type-heading-2-size); }
.guide__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.acc { border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg); background: var(--ds-bg-sunken); }
.acc > summary { list-style: none; display: flex; align-items: center; gap: var(--ds-space-md); min-height: 48px; padding: var(--ds-space-sm) var(--ds-space-lg); cursor: pointer; border-radius: var(--ds-radius-lg); }
.acc > summary::-webkit-details-marker { display: none; }
.acc__num { flex: none; color: var(--ds-text-muted); font-variant-numeric: tabular-nums; font-size: var(--ds-type-caption-size); }
.acc__title { flex: 1; font-weight: var(--ds-font-weight-medium); }
.acc__marker { flex: none; width: 8px; height: 8px; border-right: 2px solid var(--ds-text-muted); border-bottom: 2px solid var(--ds-text-muted); transform: rotate(45deg); transition: transform var(--st-spring-dur) var(--st-spring); }
.acc[open]:not([data-closing]) > summary .acc__marker { transform: rotate(-135deg); }
.acc > p { margin: 0; padding: 0 var(--ds-space-lg) var(--ds-space-md); color: var(--ds-text-secondary); }
.acc:has(.acc__num) > p { padding-left: calc(var(--ds-space-lg) + var(--ds-space-md) + 2ch); }
@media (hover: hover) { .acc > summary:hover { background: var(--ds-state-hover); } }

/* ═════ The home's told blocks (OD-40, the owner's frames B-02 · B-04/05 · B-06/07/08) ═════ */
@property --glint-angle { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes glint { to { --glint-angle: 360deg; } }
@keyframes rise { from { opacity: 0; transform: translateY(var(--ds-space-xs)); } }
@keyframes tour-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes blink { 50% { opacity: 0; } }
/* The store's button: a pill of the accent's gradient; its glint runs round the edge, slowly. */
.button-store { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; height: 48px; padding: 0 var(--ds-space-2xl); border-radius: var(--ds-radius-pill); background: linear-gradient(90deg, var(--st-accent-light), var(--st-accent) 45%, var(--st-accent-shade)); color: var(--st-accent-ink); font-family: var(--st-banner-font); font-size: var(--ds-type-body-large-size); white-space: nowrap; box-shadow: 0 0 20px var(--st-accent-glow); transition: color .25s ease, box-shadow .3s ease; }
.button-store::before { content: ""; position: absolute; inset: 0; z-index: 1; padding: var(--st-glint-w); border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--glint-angle), var(--st-glint), var(--st-glint-soft) 25%, var(--st-glint) 50%, var(--st-glint-soft) 75%, var(--st-glint)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: glint 6s linear infinite; }
.button-store::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: transparent; pointer-events: none; transition: background .25s ease; }
.button-store > span { position: relative; z-index: 2; }
.button-store:active::after { background: var(--st-wash-strong); }
.button-store:focus-visible { box-shadow: 0 0 0 3px var(--ds-fill-default), 0 0 20px var(--st-accent-glow); border-radius: var(--ds-radius-pill); }
.block-title { font-size: var(--ds-type-display-light-size); font-weight: var(--ds-type-display-light-weight); line-height: var(--ds-type-display-light-line-height); letter-spacing: var(--ds-type-display-light-letter-spacing); }
.ico { flex: none; display: block; }
.icon-tile { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ds-radius-md); background: var(--st-well); box-shadow: var(--st-rim), inset 0 0 0 1px var(--st-hairline); color: var(--ds-text-primary); }
.mono { display: inline-flex; align-items: center; gap: var(--ds-space-xs); font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace); font-size: var(--ds-type-caption-size); }
.tag { display: inline-flex; align-items: center; gap: var(--ds-space-2xs); padding: var(--ds-space-3xs) var(--ds-space-xs); border-radius: var(--ds-radius-pill); border: 1px solid transparent; background: var(--ds-fill-default); color: var(--ds-text-secondary); font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace); font-size: var(--ds-type-caption-size); white-space: nowrap; }
.tag--check { padding: var(--ds-space-2xs) var(--ds-space-xs); background: var(--ds-fill-subtle); border-color: var(--ds-border-default); }
.tag--accent { background: none; border-color: var(--st-accent); color: var(--st-accent); }
.tag--coming { background: none; border-color: var(--ds-border-default); color: var(--ds-text-muted); transition: color .3s ease, border-color .3s ease; }
.accent { color: var(--st-accent); }

/* B-02 · Every system ships whole: two cards and a whole row, each a text column and a preview. */
.ships { margin-top: var(--st-section); row-gap: var(--ds-space-lg); }
.ships__head { display: flex; flex-direction: column; gap: var(--ds-space-md); }
.ships__head .lead { margin: 0; }
.ships__card { display: flex; gap: var(--ds-space-lg); min-width: 0; padding: var(--ds-space-md); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-3xl); background: var(--ds-surface-card); }
.l-grid > .ships__card--half { grid-column: span 6; height: 380px; }
.ships__text { flex: none; width: 320px; display: flex; flex-direction: column; justify-content: space-between; gap: var(--ds-space-lg); padding: var(--ds-space-md); }
.ships__words { display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.ships__words h3 { font-size: var(--ds-type-body-large-size); font-weight: var(--ds-font-weight-regular); }
.ships__words p { margin: 0; color: var(--ds-text-muted); }
.ships__words b { color: var(--ds-text-primary); font-weight: var(--ds-font-weight-regular); }
.ships__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-xl); }
.ships__preview { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: var(--ds-space-sm); padding: var(--ds-space-lg); overflow: clip; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-2xl); background: var(--ds-fill-subtle); }
.ships__preview--stack { align-items: center; gap: var(--ds-space-lg); }
.ships__preview--tree { justify-content: flex-start; gap: var(--ds-space-xs); }
/* Three frames: two behind, one in front; under a pointer they part a little. */
.shots { position: relative; width: min(100%, 440px); aspect-ratio: 440 / 216; }
.shots__shot { position: absolute; overflow: hidden; border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-lg); background: var(--ds-bg-canvas); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.shots__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.shots__shot--left { left: 0; top: 17%; width: 48%; height: 65%; }
.shots__shot--right { right: 0; top: 17%; width: 48%; height: 65%; }
.shots__shot--front { left: 16%; top: 3%; width: 68%; height: 93%; box-shadow: 0 24px 48px var(--ds-shadow-color, rgb(0 0 0 / 40%)), 0 4px 8px var(--ds-shadow-color, rgb(0 0 0 / 40%)); }
.ships__chips { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ds-space-xs); }
.agentsfile { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.agentsfile__head, .agentsfile__line, .archive__head { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-xs); }
.agentsfile__line > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.agentsfile__line > span:first-child { flex: none; }
.agentsfile__line { padding-block: var(--ds-space-sm); border-top: 1px solid var(--ds-border-subtle); font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace); font-size: var(--ds-type-caption-size); }
.agentsfile > p { margin: 0; }
.archive { list-style: none; margin: 0 0 0 var(--ds-space-xs); padding: 0 0 0 var(--ds-space-lg); border-left: 1px solid var(--ds-border-default); }
.archive li { display: flex; align-items: center; gap: var(--ds-space-md); padding-block: var(--ds-space-sm); border-bottom: 1px solid var(--ds-border-subtle); }
.archive li > .mono { flex: none; width: 200px; color: var(--ds-text-primary); }
.archive li > span:last-child { color: var(--ds-text-secondary); }

/* B-04 … B-08 · A tour: the steps, a window that shows the chosen one. */
.tour { margin-top: var(--st-section); align-items: start; }
.tour > .tour__steps { grid-column: span 5; display: flex; flex-direction: column; gap: var(--ds-space-3xl); min-width: 0; }
.tour > .tour__window { grid-column: span 7; height: var(--st-window-h); min-width: 0; padding: var(--ds-space-lg); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-3xl); background: var(--ds-surface-card); }
.tour__list { display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.tour__step { display: flex; gap: var(--ds-space-md); width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tour__step:focus-visible { box-shadow: none; }
.tour__step:focus-visible .tour__item { box-shadow: var(--ds-shadow-focus-ring); }
.tour__marker { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--ds-space-2xs); padding-top: var(--ds-space-xl); }
.tour__dot { width: 8px; height: 8px; border-radius: var(--ds-radius-full); background: var(--ds-border-strong); transition: background .3s ease; }
.tour__rail { position: relative; flex: 1; width: var(--ds-space-3xs); min-height: 24px; overflow: hidden; background: var(--ds-border-subtle); transition: background .3s ease; }
.tour__fill { position: absolute; inset: 0; transform: scaleY(0); transform-origin: top; background: var(--st-accent); }
.tour__item { flex: 1; min-width: 0; display: flex; gap: var(--ds-space-md); padding: var(--ds-space-lg); border: 1px solid transparent; border-radius: var(--ds-radius-2xl); transition: background .4s ease, border-color .4s ease; }
.tour__num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--ds-radius-lg); border: 1px solid var(--ds-border-subtle); background: var(--ds-fill-subtle); color: var(--ds-text-muted); font-size: var(--ds-type-title-size); font-weight: var(--ds-font-weight-semibold); transition: background .4s ease, color .4s ease, border-color .4s ease; }
.tour__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.tour__title { display: flex; align-items: center; gap: var(--ds-space-sm); color: var(--ds-text-muted); font-size: var(--ds-type-heading-2-size); line-height: var(--ds-type-heading-2-line-height); font-weight: var(--ds-type-heading-2-weight); transition: color .4s ease; }
.tour__text { max-height: 0; opacity: 0; overflow: hidden; color: var(--ds-text-secondary); transition: max-height .5s ease, opacity .4s ease; }
.tour__step[aria-selected="true"] .tour__item { background: var(--ds-surface-card); border-color: var(--ds-border-subtle); }
.tour__step[aria-selected="true"] .tour__dot { background: var(--st-accent); }
.tour__step[aria-selected="true"] .tour__rail { background: var(--ds-border-strong); }
.tour__step[aria-selected="true"] .tour__num { background: var(--st-accent); border-color: transparent; color: var(--st-accent-ink); }
.tour__step[aria-selected="true"] .tour__title { color: var(--ds-text-primary); }
.tour__step[aria-selected="true"] .tour__text { max-height: 80px; opacity: 1; }
.tour__step[aria-selected="true"] .tag--coming { border-color: var(--st-accent); color: var(--st-accent); }
/* The tour advances by itself: the chosen step's rail fills, then the next is chosen (site-src/js/home.mjs). */
.tour.is-playing .tour__step[aria-selected="true"] .tour__fill { animation: tour-fill var(--st-tour-ms) linear forwards; }
.tour.is-away .tour__fill, .tour:focus-within .tour__fill { animation-play-state: paused; }
.tour__panel { display: flex; gap: var(--ds-space-lg); height: 100%; min-height: 0; }
.tour__panel:not([hidden]) { animation: rise .5s ease both; }
.win__viewer { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: var(--ds-space-md); }
.win__preview { flex: 1; min-height: 0; overflow: hidden; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-3xl); background: var(--ds-bg-canvas); }
.win__preview img { width: 100%; height: 100%; object-fit: cover; transition: opacity .4s ease; }
/* A render kept whole and centred (3D Scenes): its own transparent ground lies on the canvas. */
.win__preview--contain img, .win__thumbs--contain .win__thumb img { object-fit: contain; object-position: center; }
/* A product screen keeps its top left in view — its navigation and its title — as the frame shows it. */
.win__preview--start img, .win__thumbs--start .win__thumb img { object-position: 30% top; }
.win__preview img.is-out { opacity: 0; }
.win__more { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.win__more-head { display: flex; align-items: center; gap: var(--ds-space-xs); }
.win__thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ds-space-sm); }
.win__thumb { height: 96px; padding: 0; overflow: hidden; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-lg); background: var(--ds-bg-canvas); cursor: pointer; transition: border-color .3s ease, box-shadow .3s ease; }
.win__thumb img { width: 100%; height: 100%; object-fit: cover; }
/* The one in view is lit; the others wait dimmed — never a white ring (OD-57). */
.win__thumb { opacity: .55; border-color: transparent; box-shadow: inset 0 0 0 1px var(--st-hairline); transition: opacity var(--st-dur) var(--st-ease-standard); }
.win__thumb[aria-pressed="true"] { opacity: 1; border-color: transparent; box-shadow: inset 0 0 0 1px var(--st-hairline-strong); }
.win__details { flex: none; width: 340px; min-height: 0; overflow-y: auto; scrollbar-width: none; display: flex; flex-direction: column; align-items: flex-start; gap: var(--ds-space-md); padding: var(--ds-space-xl); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-3xl); background: var(--ds-fill-subtle); }
.win__details hr { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--ds-border-subtle); }
.win__details > [data-seg-panel], .win__pane { width: 100%; display: flex; flex-direction: column; gap: var(--ds-space-md); }
.win__title { font-size: var(--ds-type-heading-1-size); line-height: var(--ds-type-heading-1-line-height); font-weight: var(--ds-type-heading-1-weight); }
.win__text { margin: 0; color: var(--ds-text-secondary); }
.win__label { color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); font-weight: var(--ds-font-weight-semibold); }
.win__tags { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); }
.rows { width: 100%; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ds-space-xs); }
.row { display: flex; align-items: center; gap: var(--ds-space-sm); padding: var(--ds-space-xs) var(--ds-space-sm); border-radius: var(--ds-radius-control); background: var(--ds-fill-subtle); }
.row > .mono:nth-last-child(2) { flex: 1; min-width: 0; color: var(--ds-text-primary); }
.swatch { flex: none; width: 16px; height: 16px; border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-xs); }
.segments { display: inline-flex; gap: var(--ds-space-2xs); padding: var(--ds-space-2xs); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-pill); background: var(--ds-fill-subtle); }
.segment { padding: var(--ds-space-3xs) var(--ds-space-xs); border-radius: var(--ds-radius-pill); background: var(--ds-fill-default); color: var(--ds-text-secondary); font-family: var(--ds-font-family-mono, 'JetBrains Mono', monospace); font-size: var(--ds-type-caption-size); }
.segment.is-on { background: var(--ds-surface-inverse); color: var(--ds-text-inverse); }
/* Find it: a search, the industries, the systems. */
.win__search { display: flex; align-items: center; gap: var(--ds-space-xs); padding: var(--ds-space-xs) var(--ds-space-xs) var(--ds-space-xs) var(--ds-space-sm); border: 1px solid var(--ds-border-glass); border-radius: var(--ds-radius-control); background: var(--ds-surface-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.win__placeholder { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ds-text-muted); }
.win__filters { display: flex; flex-wrap: wrap; gap: var(--ds-space-xs); }
.filter { display: inline-flex; align-items: center; gap: var(--ds-space-2xs); padding: var(--ds-space-3xs) var(--ds-space-xs); border-radius: var(--ds-radius-control); background: var(--ds-fill-muted); color: var(--ds-text-secondary); font-size: var(--ds-type-caption-size); }
.filter.is-on { background: var(--ds-fill-strong); color: var(--ds-text-primary); }
.picks { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--ds-space-sm); }
.pick { min-height: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: var(--ds-space-xs); padding: var(--ds-space-xs); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-2xl); background: var(--ds-fill-subtle); transition: border-color .3s ease, box-shadow .3s ease; }
.pick { border-color: transparent; background: var(--st-card-ground); box-shadow: var(--st-rim); transition: background-color var(--st-dur) var(--st-ease-standard); }
.pick.is-on { border-color: transparent; background: var(--st-card-ground-hover); box-shadow: var(--st-rim), inset 0 0 0 1px var(--st-hairline-strong); }
.pick__shot { flex: 1; min-height: 0; overflow: hidden; border-radius: var(--ds-radius-lg); background: var(--ds-bg-canvas); }
.pick__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.pick__cap { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-xs); padding: var(--ds-space-2xs) var(--ds-space-xs); white-space: nowrap; }
.pick__cap b { flex: 0 1 auto; min-width: 0; font-weight: var(--ds-font-weight-medium); overflow: hidden; text-overflow: ellipsis; }
.pick__cap .mono { flex: 0 4 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; display: block; }
.pick--next { cursor: default; }
.pick--next .pick__shot { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: var(--ds-space-xs); padding: var(--ds-space-md); border: 1px dashed var(--ds-border-default); }
/* Ship it: an agent's session, line by line. */
.session { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--ds-space-md); padding: var(--ds-space-xl); overflow: hidden; border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-3xl); background: var(--ds-bg-sunken); }
.session__head { display: flex; align-items: center; gap: var(--ds-space-xs); }
.session__head i { width: 8px; height: 8px; border-radius: var(--ds-radius-full); background: var(--ds-border-strong); }
.session__prompt { display: flex; gap: var(--ds-space-sm); align-items: flex-start; padding: var(--ds-space-sm) var(--ds-space-md); border: 1px solid var(--ds-border-default); border-radius: var(--ds-radius-control); background: var(--ds-fill-subtle); color: var(--ds-text-primary); }
.session__step { display: flex; align-items: flex-start; gap: var(--ds-space-sm); }
.session__step > .mono { flex-direction: column; align-items: flex-start; gap: var(--ds-space-3xs); color: var(--ds-text-primary); }
.session__step--live { align-items: center; }
.session__step--live > .mono { flex-direction: row; }
.session__cursor { width: 8px; height: 16px; background: var(--st-accent); animation: blink 1s steps(1) infinite; }
.session__foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-xs); padding-top: var(--ds-space-md); border-top: 1px solid var(--ds-border-subtle); }
.session.is-run .session__step { animation: rise .45s ease both; }
.session.is-run .session__step:nth-child(4) { animation-delay: .35s; }
.session.is-run .session__step:nth-child(5) { animation-delay: .7s; }
.session.is-run .session__step:nth-child(6) { animation-delay: 1.05s; }
.session.is-run .session__step:nth-child(7) { animation-delay: 1.4s; }
.session.is-run .session__step:nth-child(8) { animation-delay: 1.75s; }
@media (hover: hover) {
  .button-store:hover { color: var(--st-accent-ink-hover); box-shadow: 0 0 28px var(--st-accent-glow); }
  .button-store:hover::after { background: var(--st-wash); }
  a.button--primary:hover { color: var(--st-accent-ink-hover); }
  .tour:hover .tour__fill { animation-play-state: paused; }
  .tour__step:hover .tour__title { color: var(--ds-text-primary); }
  .ships__card:hover .shots__shot--left { transform: translateX(-6%) rotate(-3deg); }
  .ships__card:hover .shots__shot--right { transform: translateX(6%) rotate(3deg); }
  .ships__card:hover .shots__shot--front { transform: translateY(-4%); }
  .win__thumb:hover { opacity: .9; }
  .pick:hover { background-color: var(--st-card-ground-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .button-store::before, .tour__panel:not([hidden]), .session.is-run .session__step, .session__cursor { animation: none; }
}
@media (max-width: 1100px) {
  .l-grid > .ships__card--half { grid-column: 1 / -1; height: auto; }
  .tour > .tour__steps, .tour > .tour__window { grid-column: 1 / -1; }
  .tour > .tour__window { height: auto; }
  .tour__panel { flex-direction: column; }
  .win__details { width: auto; align-self: stretch; }
  .win__preview { flex: none; aspect-ratio: 16 / 10; }
  .picks { grid-template-rows: none; }
  .pick__shot { flex: none; aspect-ratio: 16 / 10; }
  .session { min-height: 480px; }
}
@media (max-width: 640px) {
  .ships__card { flex-direction: column; }
  .ships__text { width: auto; }
  .archive li { flex-direction: column; align-items: flex-start; gap: var(--ds-space-2xs); }
  .archive li > .mono { width: auto; }
  .picks { grid-template-columns: minmax(0, 1fr); }
  .win__thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .session { padding: var(--ds-space-md); }
  .tour > .tour__steps { gap: var(--ds-space-lg); }
  .block-title { font-size: var(--ds-type-heading-1-size); line-height: var(--ds-type-heading-1-line-height); }
}
/* A finger on the told blocks (docs/21): last, so the 44 px targets and the 16 px field win. */
@media (pointer: coarse) {
  .win__thumb { min-height: 44px; }
}

/* ═════ Motion and depth (docs/37): springs, glass, light — transform and opacity only ═════ */
/* The page's light: two soft glows fixed behind everything — the accent's at the top left, a cool one at the bottom
   right. Painted once; nothing moves. */
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 45% at 8% 0%, var(--st-glow-a), transparent 70%), radial-gradient(50% 50% at 100% 100%, var(--st-glow-b), transparent 70%); }
/* The header: deeper glass, a hairline under it. */
.bar { background: color-mix(in srgb, var(--ds-bg-canvas) 70%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--st-hairline); }
.bar__search input { border-color: var(--st-hairline-strong); background: color-mix(in srgb, var(--ds-surface-card) 70%, transparent); box-shadow: var(--st-inner-glow); transition: border-color var(--st-dur-fast) var(--st-ease-standard); }
.nav a { transition: color var(--st-dur-fast) var(--st-ease-standard), background-color var(--st-dur-fast) var(--st-ease-standard); }

/* Buttons: a spring under the pointer (a little larger), a press (a little smaller). */
/* Hover and press move by `scale`, never by `transform`: a button placed with `translate` (the shelf's Explore) keeps its
   place under the pointer (it jumped, 23 Oct 2026). */
.button, .button-store, .sort__trigger, .cat { transition: scale var(--st-spring-dur) var(--st-spring), filter var(--st-dur-fast) var(--st-ease-standard); }
.button:active:not([aria-disabled="true"]), .button-store:active, .sort__trigger:active, .cat:active { scale: .97; }
/* One look for every action towards a plan (Artem, 23 Oct 2026): the primary button is the store's button without its
   glint — the accent's gradient, its glow, dark words. */
.button--primary { background: linear-gradient(90deg, var(--st-accent-light), var(--st-accent) 45%, var(--st-accent-shade)); color: var(--st-accent-ink); font-family: var(--st-banner-font); box-shadow: 0 0 20px var(--st-accent-glow); }
.button--primary[aria-disabled="true"] { background: var(--ds-action-secondary-bg); color: var(--ds-text-disabled); box-shadow: none; }
/* One type for every action towards a plan (Artem, 24 Oct 2026: "the Choose your plan button — this style everywhere,
   one type"): the primary button is the store's button whole — its gradient, the glint that runs round its edge, its glow,
   a wash under the pointer (beneath the words: the button is its own stacking context). */
.button--primary { position: relative; isolation: isolate; transition: scale var(--st-spring-dur) var(--st-spring), color var(--st-dur) var(--st-ease-standard), box-shadow var(--st-dur) var(--st-ease-standard); }
.button--primary::before { content: ""; position: absolute; inset: 0; padding: var(--st-glint-w); border-radius: inherit; pointer-events: none; background: conic-gradient(from var(--glint-angle), var(--st-glint), var(--st-glint-soft) 25%, var(--st-glint) 50%, var(--st-glint-soft) 75%, var(--st-glint)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); animation: glint 6s linear infinite; }
.button--primary::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: transparent; pointer-events: none; transition: background var(--st-dur) var(--st-ease-standard); }
.button--primary:active::after { background: var(--st-wash-strong); }
.button--primary[aria-disabled="true"]::before, .button--primary:disabled::before { display: none; }
@media (hover: hover) {
  .button--primary:hover:not([aria-disabled="true"]):not(:disabled) { filter: none; color: var(--st-accent-ink-hover); box-shadow: 0 0 28px var(--st-accent-glow); }
  .button--primary:hover:not([aria-disabled="true"]):not(:disabled)::after { background: var(--st-wash); }
}
@media (prefers-reduced-motion: reduce) { .button--primary::before { animation: none; } }
/* On the way through payment the header keeps out of it. */
body:has([data-flow="pay"]) [data-cta] { display: none; }

/* Cards (OD-57, Artem 23 Oct 2026: "the hover must not leave the card's container … and it does not reach the text"):
   a card is one container with a small inset — its picture, its words — and everything the pointer does happens inside
   it, clipped by its corners: the container's ground lifts, a soft light follows the pointer, the picture leans in a
   little inside its own frame. Nothing moves, scales, rings or casts a shadow past the card's edge. */
.card { overflow: hidden; isolation: isolate; padding: var(--st-card-inset); gap: var(--st-card-inset); border: 0; border-radius: var(--ds-radius-card); background: var(--st-card-ground); box-shadow: var(--st-rim); transition: background-color var(--st-dur) var(--st-ease-standard); }
.card > .card__cover { border: 0; border-radius: var(--st-card-inner-r); box-shadow: none; }
.card__cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--st-rim); pointer-events: none; }
.card__body { padding: var(--ds-space-xs) var(--ds-space-sm) var(--ds-space-sm); }
/* The spotlight: a soft light that follows the pointer inside the card (site-src/js/motion.mjs sets --mx and --my). */
.card::before { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 0%), var(--st-spot), transparent 60%); opacity: 0; pointer-events: none; transition: opacity var(--st-dur) var(--st-ease-standard); }
.card__cover img { transition: scale var(--st-spring-soft-dur) var(--st-spring-soft), opacity var(--st-dur-slow) var(--st-ease-out); }
/* A section's card (name only): no ground at rest — the picture and its words on the page — the same ground under the
   pointer, round both. */
.card--plain { background: none; box-shadow: none; }
.card--plain > .card__line, .card--plain > .card__by { padding-inline: var(--ds-space-2xs); }
.card--plain > .card__by { padding-bottom: var(--ds-space-2xs); }
.tile { border-color: var(--st-hairline); box-shadow: var(--st-inner-glow); transition: background-color var(--st-dur) var(--st-ease-standard); }
/* A gallery's frame: the same container — the picture and its caption lit together under the pointer. */
.frame { padding: var(--st-card-inset); border-radius: var(--ds-radius-card); transition: background-color var(--st-dur) var(--st-ease-standard); }
.frame__img { border: 0; border-radius: var(--st-card-inner-r); box-shadow: var(--st-rim); }
.frame__cap { padding-inline: var(--ds-space-2xs); }

/* Glass where something lies over the page: the sort's list, the filter chips, the filter sheet. */
.sort__trigger { border-color: var(--st-hairline-strong); background: var(--st-veil); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.sort__list { border-color: var(--st-hairline); background: color-mix(in srgb, var(--ds-surface-raised) 60%, transparent); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); transform-origin: top right; }
.catalogue--row .cat { border: 1px solid var(--st-hairline); background: var(--st-veil); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.catalogue--row .cat[aria-pressed="true"] { background: var(--ds-state-selected); border-color: var(--st-hairline-strong); }

@keyframes reveal { from { opacity: 0; transform: translateY(12px) scale(.99); } }
@keyframes pop { from { opacity: 0; transform: scale(.97); } }
@media (prefers-reduced-motion: no-preference) {
  /* A page turns, it does not blink: the browser cross-fades between pages, the header stays put, and the current
     section's pill slides from the old tab to the new (View Transitions; where unsupported, pages change as before). */
  @view-transition { navigation: auto; }
  .bar { view-transition-name: bar; }
  .bar .nav a[aria-current] { view-transition-name: nav-pill; }
  ::view-transition-group(nav-pill) { animation-duration: var(--st-spring-soft-dur); animation-timing-function: var(--st-spring-soft); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--st-dur-fast); }
  /* Cards rise one after another — on load, and each time a filter redraws the shelf. Before its turn a card is held
     at the start (backwards); after it, the card is its own again, so the hover's transform is not overridden. */
  .grid > *, .home-shelf .card, .keep > .tile { animation: reveal var(--st-spring-soft-dur) var(--st-spring-soft) backwards; }
  .grid > :nth-child(2), .home-shelf .card:nth-child(2), .keep > .tile:nth-child(3) { animation-delay: calc(1 * var(--st-stagger)); }
  .grid > :nth-child(3), .home-shelf .card:nth-child(3), .keep > .tile:nth-child(4) { animation-delay: calc(2 * var(--st-stagger)); }
  .grid > :nth-child(4), .home-shelf .card:nth-child(4) { animation-delay: calc(3 * var(--st-stagger)); }
  .grid > :nth-child(5), .home-shelf .card:nth-child(5) { animation-delay: calc(4 * var(--st-stagger)); }
  .grid > :nth-child(6) { animation-delay: calc(5 * var(--st-stagger)); }
  .grid > :nth-child(7) { animation-delay: calc(6 * var(--st-stagger)); }
  .grid > :nth-child(8) { animation-delay: calc(7 * var(--st-stagger)); }
  .grid > :nth-child(n+9) { animation-delay: calc(8 * var(--st-stagger)); }
  .sort__list:not([hidden]) { animation: pop var(--st-spring-dur) var(--st-spring) backwards; }
}
@media (hover: hover) {
  /* Darker under the pointer, as every button is (docs/20 §1) — and a little larger, on a spring. */
  .button:hover:not([aria-disabled="true"]), .sort__trigger:hover, .cat:hover, .button-store:hover { scale: 1.02; }
  .button:hover:not([aria-disabled="true"]):active, .button-store:hover:active, .sort__trigger:hover:active, .cat:hover:active { scale: .97; }
  .bar__search input:hover { border-color: var(--ds-border-strong); }
  .button--secondary:hover::before { opacity: 1; }
  a.card:hover, a.frame:hover { background-color: var(--st-card-ground-hover); }
  a.card:hover::before { opacity: 1; }
  a.card:hover .card__cover img { scale: 1.03; }
  a.tile:hover { background-color: var(--st-card-ground-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .button, .button-store, .sort__trigger, .cat, .card, .card__cover img, .tile { transition: none; }
}
@media (hover: hover) and (prefers-reduced-motion: reduce) {
  a.card:hover .card__cover img { scale: none; }
  .button:hover:not([aria-disabled="true"]), .button-store:hover, .sort__trigger:hover, .cat:hover { scale: none; }
}

/* ── The search palette (docs/37 §4) ─────────────────────────────────────────────────────────────────────────────── */
.palette { width: min(var(--st-palette-w), calc(100vw - 2 * var(--st-margin))); max-width: none; max-height: none; margin: 12vh auto auto; padding: 0; border: 0; background: none; color: var(--ds-text-primary); overflow: visible; }
.palette::backdrop { background: var(--st-veil); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.palette__box { display: flex; flex-direction: column; border: 1px solid var(--st-hairline-strong); border-radius: var(--ds-radius-2xl); background: color-mix(in srgb, var(--ds-surface-raised) 90%, transparent); backdrop-filter: blur(32px) saturate(150%); -webkit-backdrop-filter: blur(32px) saturate(150%); box-shadow: var(--st-inner-glow), var(--st-depth); overflow: hidden; }
.palette__field { display: flex; align-items: center; gap: var(--ds-space-sm); padding: var(--ds-space-md) var(--ds-space-lg); border-bottom: 1px solid var(--st-hairline); }
.palette__field .glyph { opacity: .7; }
.palette__field input { flex: 1; min-width: 0; height: 32px; border: 0; background: none; color: var(--ds-text-primary); font: inherit; font-size: var(--ds-type-body-large-size); outline: none; }
.palette__field input::placeholder { color: var(--ds-text-placeholder); }
/* The field is the palette's only input and holds the caret; the ring goes round the whole window instead. */
.palette__field input:focus-visible { box-shadow: none; }
.palette__box:focus-within { box-shadow: var(--st-inner-glow), var(--st-depth), 0 0 0 1px var(--ds-border-focus); }
.palette kbd { font-family: var(--ds-font-family-mono); font-size: var(--ds-type-caption-size); color: var(--ds-text-muted); border: 1px solid var(--st-hairline-strong); border-radius: var(--ds-radius-xs); padding: 0 var(--ds-space-2xs); }
.palette__list { position: relative; max-height: 56vh; overflow-y: auto; padding: var(--ds-space-xs); overscroll-behavior: contain; scrollbar-width: thin; }
.palette__pill { position: absolute; z-index: 0; left: var(--ds-space-xs); right: var(--ds-space-xs); top: 0; height: var(--h, var(--st-palette-row)); border-radius: var(--ds-radius-lg); background: var(--ds-state-hover); box-shadow: inset 0 0 0 1px var(--st-hairline); pointer-events: none; }
.palette__group + .palette__group { margin-top: var(--ds-space-xs); }
.palette__label { padding: var(--ds-space-xs) var(--ds-space-sm) var(--ds-space-2xs); color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); letter-spacing: .02em; }
.palette__row { position: relative; z-index: 1; display: flex; align-items: center; gap: var(--ds-space-sm); min-height: var(--st-palette-row); padding: var(--ds-space-xs) var(--ds-space-sm); border-radius: var(--ds-radius-lg); color: var(--ds-text-secondary); outline: none; }
.palette__row[aria-selected="true"] { color: var(--ds-text-primary); }
.palette__thumb { flex: none; width: var(--st-palette-thumb); aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--st-hairline); border-radius: var(--ds-radius-md); background: var(--ds-bg-sunken); }
.palette__thumb:empty { width: 40px; aspect-ratio: 1; background: var(--ds-fill-subtle); }
.palette__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.palette__thumb.palette__thumb--icon { width: 40px; aspect-ratio: 1; border: 0; background: var(--st-well); }
.palette__words { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.palette__words b { font-weight: var(--ds-font-weight-medium); color: var(--ds-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__words mark { background: none; color: var(--st-accent); }
.palette__meta { color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__tag { flex: none; padding: 0 var(--ds-space-xs); border: 1px solid var(--st-hairline-strong); border-radius: var(--ds-radius-pill); color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.palette__empty { padding: var(--ds-space-xl) var(--ds-space-md); color: var(--ds-text-secondary); text-align: center; }
.palette__empty a { color: var(--st-accent); text-decoration: underline; text-underline-offset: 3px; }
.palette__foot { display: flex; gap: var(--ds-space-lg); padding: var(--ds-space-sm) var(--ds-space-lg); border-top: 1px solid var(--st-hairline); color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.palette__foot span { display: inline-flex; align-items: center; gap: var(--ds-space-2xs); }
.bar__search input { cursor: text; }
@media (prefers-reduced-motion: no-preference) {
  .palette[open] .palette__box { animation: pop var(--st-spring-soft-dur) var(--st-spring-soft) backwards; }
  .palette[open]::backdrop { animation: fade var(--st-dur) var(--st-ease-standard) backwards; }
  .palette__pill { transition: transform var(--st-spring-dur) var(--st-spring); }
}
@keyframes fade { from { opacity: 0; } }
@media (max-width: 640px) {
  .palette { width: 100vw; margin: 0; }
  .palette__box { min-height: 100dvh; border-radius: 0; border-width: 0; }
  .palette__list { max-height: none; flex: 1; }
  .palette__foot { display: none; }
}
@media (pointer: coarse) {
  .palette__field input { font-size: var(--ds-font-size-16); }
}
/* On a phone the head's second row holds only the sort's list (its button is on the thumb bar), so it takes no gap. */
@media (max-width: 640px) { .cat-head { row-gap: 0; } }
/* The phone's sheets (docs/37 §6): a grip on top says it can be pulled down; the sheet's head takes the drag (no page
   scroll under the finger there); the sheet itself is glass with a lit edge. */
.side__sheet-head { position: relative; touch-action: none; }
.sheet__grip { position: absolute; left: 50%; top: calc(-1 * var(--ds-space-sm)); translate: -50% 0; width: 40px; height: 4px; border-radius: var(--ds-radius-pill); background: var(--st-hairline-current); }
@media (max-width: 640px) {
  .catalogue .side.side--open { background: color-mix(in srgb, var(--ds-surface-raised) 88%, transparent); backdrop-filter: blur(24px) saturate(150%); -webkit-backdrop-filter: blur(24px) saturate(150%); border-top: 1px solid var(--st-hairline-strong); box-shadow: var(--st-inner-glow), var(--ds-shadow-elevation-3-modal); }
  .scrim { background: var(--st-veil); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
}
/* The header's tabs: a soft light under the pointer, slid from tab to tab by motion.mjs (Motion's spring). */
.bar .nav { position: relative; }
.nav__glow { position: absolute; z-index: -1; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--ds-radius-pill); background: var(--ds-state-hover); box-shadow: inset 0 0 0 1px var(--st-hairline); opacity: 0; pointer-events: none; }
.menu__head { touch-action: none; }
@media (hover: hover) { .bar .nav a:hover { background: transparent; } }
@media (max-width: 640px) { .nav__glow { display: none; } }
/* Below the first screen a block waits for the view (motion.mjs); the class only hides and comes off as it enters. */
@media (prefers-reduced-motion: no-preference) { .is-waiting { opacity: 0; animation: none; } }
/* A picture that is not there yet stays clear and fades in once decoded (fade.mjs, OD-57) — on the frame's own ground. */
img { transition: opacity var(--st-dur-slow) var(--st-ease-out); }
img.is-loading { opacity: 0; transition: none; }
/* The categories' row on a desktop wraps instead of scrolling sideways: a mouse has no sideways wheel, and the second
   group (the design systems, on Sections and Search) sat past the edge, out of reach (23 Oct 2026). */
@media (min-width: 641px) {
  .catalogue--row .side { flex-wrap: wrap; overflow: visible; row-gap: var(--ds-space-sm); -webkit-mask-image: none; mask-image: none; }
  .catalogue--row .side__block { flex: 0 1 auto; min-width: 0; }
  .catalogue--row .cats { flex-wrap: wrap; row-gap: var(--ds-space-xs); }
}

/* ── Icons (OD-57): Lucide, inline, after getlayers' glyphs ─────────────────────────────────────────────────────────
   A glyph takes its text's colour. In a well its closed shapes fill with the accent's gradient and its last stroke is the
   accent — one icon in two tones, lit from below; a row or a tile under the pointer, or the current one, lights its
   well a step more. */
.glyph { flex: none; display: block; }
.glyph-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.glyph-tone-a { stop-color: var(--st-tone-a); }
.glyph-tone-b { stop-color: var(--st-tone-b); }
.icon-tile .glyph :is(rect, circle, ellipse), .tiles__icon :is(rect, circle, ellipse), .banner__icon :is(rect, circle, ellipse) { fill: url(#glyph-tone); }
.icon-tile .glyph > :last-child:not(:only-child), .tiles__tile[aria-pressed="true"] .tiles__icon > :last-child:not(:only-child) { stroke: var(--st-accent); }
.icon-tile { transition: background var(--st-dur) var(--st-ease-standard); }
.palette__row[aria-selected="true"] .icon-tile, .tour__step[aria-current="true"] .icon-tile, .tour__step[aria-selected="true"] .icon-tile { background: var(--st-well-lit); }
@media (hover: hover) {
  a:hover .icon-tile, button:hover .icon-tile { background: var(--st-well-lit); }
}

/* ═════ The payment path (OD-57): the store's pages — checkout, the payment's outcome, Download again — in the
   storefront's own language: dark glass panels lit from the top, wells for icons, the accent only for the way on. ═════ */
.pay { padding-block: var(--ds-space-2xl) var(--st-section); }
.pay__in { width: 100%; max-width: var(--st-pay-max); margin-inline: auto; display: flex; flex-direction: column; gap: var(--ds-space-xl); }
.pay__in--narrow { max-width: var(--st-pay-narrow); }
.pay__head { display: flex; flex-direction: column; gap: var(--ds-space-sm); }
.pay__head .display { margin: 0; }
.pay__lead { margin: 0; color: var(--ds-text-secondary); }
/* Where the buyer is: plan → payment → files. Done steps carry a tick, the current one the accent. */
.pay-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--ds-space-xs); color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.pay-steps li { display: inline-flex; align-items: center; gap: var(--ds-space-xs); }
.pay-steps li + li::before { content: ""; width: 24px; height: var(--st-rim-w); background: var(--st-hairline-strong); }
.pay-steps__n { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--ds-radius-full); background: rgb(255 255 255 / 6%); box-shadow: inset 0 0 0 1px var(--st-hairline); color: var(--ds-text-secondary); font-variant-numeric: tabular-nums; }
.pay-steps [aria-current="step"] { color: var(--ds-text-primary); }
.pay-steps [aria-current="step"] .pay-steps__n { background: color-mix(in srgb, var(--st-accent) 16%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--st-accent) 40%, transparent); color: var(--st-accent); }
.pay-steps .is-done { color: var(--ds-text-secondary); }
.pay-steps .is-done .pay-steps__n { color: var(--st-accent); }
/* The checkout's three panels: the order and what it holds on the left, the payment on the right; on a narrow screen the
   payment comes right after the order — the action within reach, the details after it (docs/21). */
.pay-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "order pay" "holds pay"; grid-template-rows: auto 1fr; gap: var(--st-gutter-col); align-items: start; }
.pay-panel--order { grid-area: order; }
.pay-panel--holds { grid-area: holds; }
.pay-panel--pay { grid-area: pay; }
/* A panel of the path: the plans' glass. */
.pay-panel { position: relative; display: flex; flex-direction: column; gap: var(--ds-space-lg); padding: var(--ds-space-xl); border-radius: var(--ds-radius-card); background: var(--st-glass-panel); box-shadow: inset 0 0 0 1px var(--st-hairline), var(--st-rim), var(--st-depth); }
.pay-panel--lit { background: var(--st-glass-lit); box-shadow: inset 0 0 0 1px var(--st-hairline-strong), var(--st-rim), var(--st-depth), 0 0 64px -24px var(--st-accent-glow); }
.pay-panel__head { display: flex; align-items: center; gap: var(--ds-space-sm); }
.pay-panel__head > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.pay-panel__title { font-size: var(--ds-type-heading-2-size); line-height: var(--ds-type-heading-2-line-height); font-weight: var(--ds-font-weight-medium); margin: 0; }
.pay-panel__label { color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.pay-price { display: flex; align-items: baseline; gap: var(--ds-space-xs); }
.pay-price b { font-size: var(--ds-type-numeric-large-size); font-weight: var(--ds-font-weight-medium); font-variant-numeric: tabular-nums; letter-spacing: var(--ds-font-letter-spacing-tight); }
.pay-rows { display: flex; flex-direction: column; margin: 0; padding: var(--ds-space-xs) var(--ds-space-md); border-radius: var(--ds-radius-lg); background: rgb(255 255 255 / 3%); box-shadow: inset 0 0 0 1px var(--st-hairline); }
.pay-rows > div { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-md); min-height: 40px; color: var(--ds-text-secondary); }
.pay-rows > div + div { border-top: var(--st-rim-w) solid var(--st-hairline); }
.pay-rows dd { margin: 0; color: var(--ds-text-primary); font-variant-numeric: tabular-nums; }
.pay-rows .pay-rows__due { color: var(--ds-text-primary); font-weight: var(--ds-font-weight-medium); }
.pay-trust { display: flex; flex-direction: column; gap: var(--ds-space-sm); padding-top: var(--ds-space-md); border-top: var(--st-rim-w) solid var(--st-hairline); color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.pay-trust__line { display: flex; align-items: center; gap: var(--ds-space-xs); color: var(--ds-text-secondary); }
.pay-trust__line .glyph { color: var(--st-accent); }
.pay-frame { min-height: 452px; }
/* While a value is on its way: a soft bar that breathes, the size of what comes. */
.pay-skel { display: block; height: 16px; width: 72px; border-radius: var(--ds-radius-pill); background: rgb(255 255 255 / 8%); }
.pay-skel--price { height: 44px; width: 160px; border-radius: var(--ds-radius-md); }
.pay-skel--frame { height: 360px; width: 100%; border-radius: var(--ds-radius-lg); }
@media (prefers-reduced-motion: no-preference) { .pay-skel { animation: breathe 1.6s var(--st-ease-standard) infinite; } }
@keyframes breathe { 50% { opacity: .45; } }
/* The payment's outcome, and any one-message state: one panel in the middle, its state in a well. */
.pay-outcome { align-items: center; text-align: center; gap: var(--ds-space-md); padding: var(--ds-space-3xl) var(--ds-space-xl); }
.pay-outcome .display { margin: 0; font-size: var(--ds-type-heading-1-size); line-height: var(--ds-type-heading-1-line-height); }
.pay-outcome p { margin: 0; max-width: 52ch; color: var(--ds-text-secondary); }
.icon-tile--lg { width: 56px; height: 56px; border-radius: var(--ds-radius-lg); }
.icon-tile--ok { background: var(--st-well-lit); }
.icon-tile--warn { background: radial-gradient(90% 70% at 50% 115%, var(--ds-status-attention-bg), transparent 72%), linear-gradient(180deg, rgb(255 255 255 / 9%), rgb(255 255 255 / 2%)); color: var(--ds-status-attention-fg); }
/* Waiting: a ring that turns inside the well. */
.pay-wait { width: 20px; height: 20px; border-radius: var(--ds-radius-full); border: 2px solid var(--st-hairline-strong); border-top-color: var(--st-accent); }
@media (prefers-reduced-motion: no-preference) { .pay-wait { animation: turn .9s linear infinite; } }
@keyframes turn { to { rotate: 1turn; } }
.pay-actions { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--ds-space-sm); }
.pay-note { color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.pay-note--refused { color: var(--ds-status-attention-fg); }
/* Download again: the library's rows. */
.lib-row { display: flex; align-items: center; gap: var(--ds-space-md); padding-block: var(--ds-space-md); }
.lib-row + .lib-row { border-top: var(--st-rim-w) solid var(--st-hairline); }
.lib-row__words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--ds-space-3xs); }
.lib-row__words span { color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.lib-row__act { display: flex; flex-direction: column; align-items: flex-end; gap: var(--ds-space-2xs); text-align: right; }
.lib-big { margin: 0; font-size: var(--ds-type-numeric-large-size); line-height: 1.1; font-weight: var(--ds-font-weight-medium); letter-spacing: var(--ds-font-letter-spacing-tight); font-variant-numeric: tabular-nums; }
.lib-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ds-space-sm); color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.lib-strip b { color: var(--ds-text-primary); font-weight: var(--ds-font-weight-medium); }
.link-quiet { color: var(--ds-text-secondary); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }
.pay-field { display: flex; flex-direction: column; gap: var(--ds-space-xs); width: 100%; text-align: left; }
.pay-field label { color: var(--ds-text-secondary); font-size: var(--ds-type-caption-size); }
.pay-field .field { background: rgb(255 255 255 / 4%); border-color: var(--st-hairline-strong); }
.pay-field .field[aria-invalid="true"] { border-color: var(--ds-status-attention-fg); }
.pay-alert { padding: var(--ds-space-md); border-radius: var(--ds-radius-lg); background: var(--ds-status-attention-bg); color: var(--ds-status-attention-fg); }
.lib-more summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; font-weight: var(--ds-font-weight-medium); }
.lib-more ul { margin: var(--ds-space-sm) 0 0; padding-left: var(--ds-space-lg); display: flex; flex-direction: column; gap: var(--ds-space-xs); color: var(--ds-text-secondary); }
@media (max-width: 900px) {
  .pay-grid { grid-template-columns: minmax(0, 1fr); grid-template-areas: "order" "pay" "holds"; grid-template-rows: auto; }
}
@media (max-width: 640px) {
  .pay-panel { padding: var(--ds-space-lg); }
  .lib-row { flex-wrap: wrap; }
  .lib-row__act { align-items: flex-start; text-align: left; width: 100%; }
  .lib-row__act .button { width: 100%; }
}
.pay-form-w { width: 100%; max-width: var(--st-pay-form); }
.pay-stack { display: flex; flex-direction: column; align-items: inherit; gap: var(--ds-space-2xs); }
.pay-panel .pay-stack { align-items: flex-start; }
.pay-actions .pay-stack { align-items: center; }
.pay-panel.lib-more { padding-block: var(--ds-space-md); }
@media (max-width: 640px) { .pay-outcome .display { font-size: var(--ds-type-heading-2-size); line-height: var(--ds-type-heading-2-line-height); } }

/* Text links (Artem, 24 Oct 2026: "the footer's links turn white and jump — they should lighten a little, smoothly, with
   an underline"): under the pointer a link lightens a step towards its ground's light and its underline fades in under the
   words; leaving, both ease back. Nothing changes size or place. Links that are underlined at rest (the legal row, a text
   page) keep a faint line that brightens. */
.foot2 a, .foot2__base a, .legal-row a, .menu__more a, .crumbs a, .home-shelf__all, .doc a, .faq__more a, .palette__empty a, .empty a { text-decoration: underline; text-decoration-thickness: var(--st-rim-w); text-underline-offset: 4px; text-decoration-color: transparent; transition: color var(--st-dur) var(--st-ease-standard), text-decoration-color var(--st-dur) var(--st-ease-standard); }
.legal-row a, .doc a, .faq__more a, .palette__empty a, .empty a { text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); }
@media (hover: hover) {
  .foot2 a:hover { color: color-mix(in srgb, var(--st-accent-ink) 68%, var(--st-accent)); text-decoration-color: currentColor; }
  .foot2__base a:hover, .menu__more a:hover, .crumbs a:hover, .home-shelf__all:hover, .legal-row a:hover, .doc a:hover, .faq__more a:hover, .palette__empty a:hover { color: color-mix(in srgb, var(--ds-text-secondary) 55%, var(--ds-text-primary)); text-decoration-color: currentColor; }
}

/* The catalogue's control line (24 Oct 2026): the filters at the left, the sort at the right, on one line and one height —
   every control of the row 40 px (44 on touch), their tops shared, so a row of chips and the sort are centred alike; when
   the chips wrap, the sort stays with their first line. The line's rule runs under both. */
.cat-bar { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--ds-space-lg); padding-bottom: var(--ds-space-sm); border-bottom: var(--st-rim-w) solid var(--st-hairline); }
.cat-bar > .side { border-bottom: 0; padding-bottom: 0; }
.cat-bar > .sort { flex: none; }
.catalogue--row .cat, .cat-bar .sort__trigger { min-height: var(--st-control-h); height: var(--st-control-h); }
.catalogue--row .side__block > .label { display: flex; align-items: center; min-height: var(--st-control-h); }
@media (pointer: coarse) { .catalogue--row .cat, .cat-bar .sort__trigger { min-height: 44px; height: 44px; } .catalogue--row .side__block > .label { min-height: 44px; } }
@media (max-width: 640px) {
  .cat-bar { display: contents; }
  .cat-bar .sort__trigger { display: none; }
}
/* A group's name sits on its first line of chips, not in the middle of a wrapped group. */
@media (min-width: 641px) { .catalogue--row .side__block { align-items: flex-start; } }
/* The end of a page that explains buying: a lit panel with the one way on (shell.mjs nextStep). */
.next-step { display: flex; align-items: center; justify-content: space-between; gap: var(--ds-space-lg); flex-wrap: wrap; padding: var(--ds-space-xl); border-radius: var(--ds-radius-card); background: var(--st-glass-lit); box-shadow: inset 0 0 0 1px var(--st-hairline-strong), var(--st-rim), var(--st-depth); }
.next-step h2 { margin: 0; }
.next-step p { margin: var(--ds-space-2xs) 0 0; }