/* 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. */

: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', var(--ds-font-family-sans);
  --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;
}
@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); }
/* 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%; }

.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 { 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 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 { content: '+'; color: var(--ds-text-muted); }
.faq details[open] summary::after { content: '−'; }
.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; }
.billing { display: inline-flex; gap: var(--ds-space-2xs); padding: var(--ds-space-3xs); border-radius: var(--ds-radius-pill); background: var(--ds-surface-card); border: 1px solid var(--ds-border-subtle); }
.billing button { 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; cursor: pointer; }
.billing button[aria-pressed="true"] { background: var(--ds-surface-inverse); color: var(--ds-text-inverse); }
.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; }
.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: 1px solid var(--ds-border-subtle); background: var(--ds-surface-card); }
.plan--popular { border: 2px solid var(--ds-text-primary); }
.plan__for { margin: var(--ds-space-xs) 0 0; min-height: calc(2 * var(--ds-type-body-line-height)); }
.plan__flag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--ds-surface-inverse); color: var(--ds-text-inverse); border-color: transparent; white-space: nowrap; }
.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) 0; border-top: 1px solid var(--ds-border-subtle); border-bottom: 1px solid var(--ds-border-subtle); }
.pricing__foot { color: var(--ds-text-muted); font-size: var(--ds-type-caption-size); }
.compare { margin-top: var(--st-section); text-align: left; }
.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 h4 { 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 h4 { margin: 0 0 var(--ds-space-md); font-size: var(--ds-type-caption-size); 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__nav { display: flex; flex-direction: column; }
.menu__nav a { display: flex; align-items: center; min-height: 56px; font-size: var(--ds-type-heading-1-size); border-bottom: 1px solid var(--ds-border-subtle); }
.menu__nav a[aria-current] { color: var(--st-accent); }
.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 h4 { 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: 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 { 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); }
  .frame:hover .frame__img { border-color: var(--ds-border-strong); }
  .table tr:hover td { background: var(--ds-state-hover); }
  a.card:hover { border-color: var(--ds-border-strong); }
  a.card:hover .card__cover img { transform: scale(1.03); }
  .nav a:hover { color: var(--ds-text-primary); background: var(--ds-state-hover); }
  .sort__trigger:hover { filter: brightness(.85); }
  /* A card under the pointer: its picture outlined in the strongest neutral (OD-37). */
  a.card--plain:hover .card__cover { border-color: var(--ds-text-primary); box-shadow: 0 0 0 1px var(--ds-text-primary); }
  .tiles__tile:hover, .tabs a:hover, .gallery__thumb:hover { background: var(--ds-state-hover); color: var(--ds-text-primary); }
  a.tile:hover { border-color: var(--ds-border-strong); }
  .home-shelf__all:hover { color: var(--ds-text-primary); }
  .foot2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
}
/* 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%; transform: 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); }
.cat-head__row { display: flex; justify-content: space-between; align-items: center; gap: var(--ds-space-md); }
.tabs { display: flex; gap: var(--ds-space-3xs); padding: var(--ds-space-3xs); border: 1px solid var(--ds-border-subtle); border-radius: var(--ds-radius-pill); background: var(--ds-surface-card); overflow-x: auto; scrollbar-width: none; }
.tabs a { display: inline-flex; align-items: center; height: 36px; padding: 0 var(--ds-space-md); border-radius: var(--ds-radius-pill); color: var(--ds-text-secondary); white-space: nowrap; }
.tabs a[aria-current] { background: var(--ds-state-selected); color: var(--ds-text-primary); }
/* 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 { grid-column: 1 / -1; 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 { width: 20px; height: 20px; border-radius: var(--ds-radius-xs); border: 2px solid currentColor; opacity: .8; }
.tiles__icon--screens { border-radius: var(--ds-radius-xs); border-bottom-width: 6px; }
.tiles__icon--components { border-radius: var(--ds-radius-full); }
.tiles__icon--logic { border-style: dashed; }
.tiles__icon--files { border-top-width: 6px; }
.tiles__icon--agents { border-radius: var(--ds-radius-xs) var(--ds-radius-full) var(--ds-radius-full) var(--ds-radius-full); }
/* 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: var(--ds-text-primary); }
.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. */
  .cat-head__row .tabs, .cat-head__row .sort__trigger { display: none; }
  .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, .tabs a, .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 .15s ease; }
.acc[open] > 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-lg); border: 1px solid var(--ds-border-subtle); background: var(--ds-fill-subtle); }
.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; }
.win__thumb[aria-pressed="true"] { border-color: var(--ds-border-selected); box-shadow: 0 0 0 1px var(--ds-border-selected); }
.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.is-on { border-color: var(--ds-border-selected); box-shadow: 0 0 0 1px var(--ds-border-selected); }
.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, .pick:hover { border-color: var(--ds-border-strong); }
}
@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; }
}