/* ============================================================================
   marketing.css — the public marketing surfaces (M3): landing assembly
   (HERO/GRID/PHIL), the §5 product-page sections, about/error/attributions
   pages, and the marketing-only chrome (On-this-page menu, sticky CTA, nav
   drawer live in chrome.css with the header they extend).
   Token-bound only (F-R01); structural primitives (.stack/.cluster/.action-row)
   come from base.css — this file adds marketing composition, not new primitives.
   Every color, radius, spacing and motion value binds a role (SC-R01). The handful
   of bare pixel values are composition geometry that no role covers and that a
   requirement or a wireframe pins directly — the single-card 560px cap (F-R24), the
   44px touch floor (F-R05), the gallery's fixed strip height (GAL-R04), the width
   that forces the tiered table to scroll (SPEC-R04) — each stated where it is used,
   the same posture chrome.css takes with the admin metrics.
   ========================================================================== */

/* Numeric face + tabular figures for number-dense text (F-R08). Marketing is the
   only consumer today (spec values, download meta, versions); it lifts to base.css
   the moment a non-marketing surface needs it, rather than being copied. */
.numeric {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
}

/* The arrival highlight (OTP-R02): opacity-only tint on the target, gone in
   motion-highlight. Safe under reduced motion by construction — nothing moves. */
.anchor-highlight {
    animation: anchor-arrive var(--motion-highlight) var(--motion-ease);
}

@keyframes anchor-arrive {
    from { background-color: var(--accent-surface); }
    to { background-color: transparent; }
}

/* Scroll-container edge cues (F-R17): a fade at each overflowing edge, painted as a
   background attachment so it appears only where content actually overflows. */
.edge-cues {
    overflow-x: auto;
    background-image:
        linear-gradient(to right, var(--surface-page), transparent 24px),
        linear-gradient(to left, var(--surface-page), transparent 24px),
        linear-gradient(to right, var(--scrim), transparent 24px),
        linear-gradient(to left, var(--scrim), transparent 24px);
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 32px 100%, 32px 100%, 16px 100%, 16px 100%;
    background-attachment: local, local, scroll, scroll;
}

/* ============================================================================
   Landing — Hero (HERO, WF-01 ②)
   ========================================================================== */

/* The product page's hero shares this backdrop (Jeff, 2026-10-14), so both hosts get the same
   stacking context for it. */
.hero,
.prh {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* HERO-R02: whisper-contrast motif + radial glow, both CSS. No raster, no JS, and
   nothing here can delay the headline (HERO-R03) — the layer paints behind it.
   AI Note: the motif data URI carries literal colors because an SVG data URI cannot
   read custom properties. They are the token values (--glow / --surface-deep) at
   whisper alpha; changing the theme's glow means changing this pair too. */
.hero__backdrop {
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--surface-deep);
    background-image:
        radial-gradient(70% 90% at 20% 0%, var(--accent-surface), transparent 60%),
        radial-gradient(50% 70% at 85% 20%, var(--accent-surface), transparent 65%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23EDE7FF' stroke-opacity='0.05' stroke-width='1'%3E%3Cpath d='M0 48h96M48 0v96'/%3E%3Ccircle cx='48' cy='48' r='18'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat, no-repeat, repeat;
}

.hero__inner {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
    align-items: flex-start;
}

.hero__inner h1 {
    max-width: 20ch;
}

/* ============================================================================
   Landing — ProductFamilyGrid + ProductCard (GRID/CARD, WF-05)
   ========================================================================== */

/* Flex rather than grid tracks precisely because grid would left-align the final
   partial row, which F-R24 forbids. */
.grid__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xl);
    margin: 0;
    padding-block: 0;
    list-style: none;
}

.grid__cell {
    display: flex;
    flex: 0 1 100%;
}

/* GRID-R02's steps. The third track exists only from 1200px AND only when a third
   product does — two cards never stretch across three columns. */
@media (min-width: 768px) {
    .grid__list--pair > .grid__cell,
    .grid__list--wide > .grid__cell {
        flex-basis: calc(50% - var(--space-xl) / 2);
    }
}

@media (min-width: 1200px) {
    .grid__list--wide > .grid__cell {
        flex-basis: calc(100% / 3 - var(--space-xl) * 2 / 3);
    }
}

/* A single card renders centred at single-column width (F-R24). */
.grid__list--single > .grid__cell {
    max-width: 560px;
    margin-inline: auto;
}

.card {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--container-pad);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    color: var(--text-primary-on-raised);
    text-decoration: none;
}

/* CARD-R03 / F-R28: hover shifts surface and border tokens only — no motion, no
   size change. The card is one anchor, so this is the whole interactive treatment. */
.card:hover {
    background-color: var(--surface-hover);
    border-color: var(--divider);
}

.card .mf img {
    border-radius: var(--radius-control);
}

/* The no-mark tile keeps the thumb's 16:9 box so cards in a row stay aligned. */
.card__mono {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 16 / 9;
    background-color: var(--surface-deep);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-control);
    color: var(--accent);
    font-family: var(--font-display);
    font-size: var(--font-size-3);
    font-weight: var(--font-weight-heading);
}

.card__name {
    font-family: var(--font-display);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-heading);
}

.card__category {
    color: var(--text-secondary);
}

.card__facts {
    margin-top: var(--space-xs);
}

/* Pushed to the card's foot so equal-height cards in a row align their arrows. */
.card__go {
    margin-top: auto;
    color: var(--accent);
}

/* ============================================================================
   Landing — PhilosophyStrip (PHIL, WF-12)
   ========================================================================== */

.phil {
    background-color: var(--surface-raised);
}

.phil__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-3xl);
    margin: 0;
    padding-block: 0;
    list-style: none;
}

.phil__item {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

/* One desktop column per item — two items centre as two, three fill three
   (PHIL-R01); below the desktop step they stack. */
@media (min-width: 1024px) {
    .phil__item {
        flex: 1 1 0;
    }
}

.phil__claim {
    font-family: var(--font-display);
    font-size: var(--font-size-1);
    font-weight: var(--font-weight-heading);
    color: var(--text-primary-on-raised);
}

.phil__support {
    color: var(--text-secondary);
}

/* ============================================================================
   Product page — ProductHero (PRH, WF-06)
   ========================================================================== */

.prh__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.prh__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    min-width: 0;
}

.prh__brand {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* The hook carries the hero's weight: larger and in primary ink, with the
   statement stepping down beneath it. Both stay inside `measure` so the line
   length holds at every width. */
.prh__headline {
    font-size: var(--font-size-2);
    color: var(--text-primary);
    font-weight: 600;
}

.prh__tagline {
    font-size: var(--font-size-1);
    color: var(--text-secondary);
}

.prh__visual {
    min-width: 0;
}

/* Two columns from the desktop step; below it the DOM order already reads
   text → CTA → visual, which is the mobile contract (PRH-R04). */
@media (min-width: 1024px) {
    .prh__inner {
        flex-direction: row;
        align-items: center;
    }

    .prh__text,
    .prh__visual {
        flex: 1 1 50%;
    }
}

/* ============================================================================
   Product page — FeatureSection (FS, WF-07)
   ========================================================================== */

.fs--tinted {
    background-color: var(--surface-raised);
}

.fs__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}

.fs__text {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

.fs__media {
    min-width: 0;
}

/* A vector mark in the capture slot (an icon, not a screenshot — 2026-09-16): mark size,
   centered in the column, on no frame, the way the stage marks sit in the chain. */
.fs__media--mark {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: var(--space-xl);
}

.fs__media--mark .mf {
    width: min(160px, 40%);
}

.fs__media--mark img {
    display: block;
    width: 100%;
    height: auto;
}

/* The caveat is subordinate in weight and real in substance — never a tooltip. */
.fs__caveat {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    border-left: 2px solid var(--divider);
    padding-left: var(--space-md);
}

/* FS-R06: the points are the claim's evidence — a bold lead and one sentence each,
   a real list without bullets (the lead is the marker), inside the prose measure. */
.fs__points {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin: 0;
    padding: 0;
    list-style: none;
}

.fs__lead {
    font-weight: 500;
}

/* A text-only section takes the centred narrow measure rather than a 1200px line. */
.fs--textonly .fs__text {
    margin-inline: auto;
    max-width: var(--measure-prose-max);
}

/* F-R23: the two-column split collapses BELOW 1024, not 768 — the 768–1023 band
   stacks so no text column squeezes under the measure floor. */
@media (min-width: 1024px) {
    .fs--mediaright .fs__inner,
    .fs--medialeft .fs__inner {
        flex-direction: row;
        align-items: center;
    }

    .fs--mediaright .fs__text,
    .fs--mediaright .fs__media,
    .fs--medialeft .fs__text,
    .fs--medialeft .fs__media {
        flex: 1 1 50%;
    }

    /* Order is a desktop-only concern: the DOM keeps text first for every viewport
       that stacks, so mobile needs no counter-rule (FS-R03). */
    .fs--medialeft .fs__media {
        order: -1;
    }
}

/* ============================================================================
   Video player — the site's values for the AdaptiveVideo library's custom
   properties (Video-Demos-v1 §9.5). The library ships neutral fallbacks; this is
   the one place the site's look reaches it.
   ========================================================================== */

.av {
    --av-radius: var(--radius-container);
    --av-border: var(--border-hairline);
    --av-caption-color: var(--text-secondary);
    --av-caption-gap: var(--space-sm);
    --av-button-surface: var(--surface-raised);
    --av-button-text: var(--text-primary);
    --av-focus: var(--focus-ring-width) solid var(--focus-ring);
    --av-letterbox: var(--surface-deep);
    /* The demo's control bar (Video-Control-Bar-Proposal-v1 §5). The see-through surfaces mix
       a token with transparent, so this file keeps no color literals. */
    --av-bar-surface: linear-gradient(transparent, color-mix(in srgb, var(--surface-deep) 92%, transparent));
    --av-bar-text: var(--text-primary);
    --av-accent: var(--accent);
    --av-track: color-mix(in srgb, var(--text-primary) 22%, transparent);
    --av-buffered: color-mix(in srgb, var(--text-primary) 42%, transparent);
    --av-menu-surface: var(--surface-raised);
    --av-menu-text: var(--text-primary);
    --av-big-play-surface: color-mix(in srgb, var(--surface-deep) 72%, transparent);
    --av-time-font: var(--font-numeric);
}

/* ============================================================================
   Product page — VideoSection (VSC, WF-54): the heading block, then the player
   across the content frame.
   ========================================================================== */

.vs--tinted {
    background-color: var(--surface-raised);
}

.vs__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

.vs__player {
    width: 100%;
    margin: 0;
}

/* ============================================================================
   Product page — FeatureGrid (FG, WF-08)
   ========================================================================== */

.fg__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
    margin-top: var(--section-gap);
    padding: 0;
    list-style: none;
}

.fg__card {
    flex: 0 1 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--container-pad);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

/* FG-R01: NO hover, NO pointer. The absence is the affordance boundary (F-R28) —
   a card that looks clickable and isn't costs trust, so there is deliberately
   nothing here to remove later. */

.fg__title {
    font-weight: 500;
    color: var(--text-primary-on-raised);
}

.fg__body {
    color: var(--text-secondary);
}

/* FG-R02: 2-up from 768, 3-up from 1024 (the fixed breakpoint set, F-R03). */
@media (min-width: 768px) {
    .fg__card {
        flex-basis: calc(50% - var(--space-lg) / 2);
    }
}

@media (min-width: 1024px) {
    .fg__card {
        flex-basis: calc(100% / 3 - var(--space-lg) * 2 / 3);
    }
}

/* ============================================================================
   Product page — SignalChain (CHN, WF-49)
   ========================================================================== */

.chn__rail {
    position: relative; /* site.js measures the phone tiles against the strip (CHN-R16) */
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin: var(--section-gap) 0 0;
    padding: 0;
    list-style: none;
}

.chn__cell {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

/* CHN-R02: the whole cell is the one link — one surface, no second target inside it.
   The hover cue is right here and absent on FeatureGrid cards for the same reason (F-R28):
   its presence says "this goes somewhere", and these do. */
.chn__link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-areas: "mark n" "mark name" "mark role";
    column-gap: var(--space-md);
    row-gap: var(--space-xs);
    align-items: center;
    height: 100%;
    padding: var(--space-md);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    color: inherit;
    text-decoration: none;
}

a.chn__link:hover,
a.chn__link:focus-visible {
    border-color: var(--accent);
}

/* CHN-R03: decorative — sized here, named by nothing. */
.chn__mark {
    grid-area: mark;
    width: 48px;
    height: 48px;
}

.chn__n {
    grid-area: n;
    font-size: var(--font-size--1);
    letter-spacing: 0.08em;
    color: var(--accent);
}

.chn__name {
    grid-area: name;
    font-weight: 500;
    color: var(--text-primary-on-raised);
}

.chn__role {
    grid-area: role;
    font-size: var(--font-size--1);
    color: var(--text-secondary);
}

.chn__cell--out .chn__link {
    border-style: dashed;
}

/* CHN-R04: the connector is decoration — a glyph from CSS, nothing in the DOM. */
.chn__cell + .chn__cell::before {
    content: "↓";
    display: block;
    margin-bottom: var(--space-xs);
    text-align: center;
    color: var(--text-secondary);
}

/* CHN-R05: one row from 768; the connector turns to point along it. */
@media (min-width: 768px) {
    .chn__rail {
        flex-direction: row;
        align-items: stretch;
        gap: var(--space-lg);
    }

    .chn__link {
        grid-template-columns: 1fr;
        grid-template-areas: "mark" "n" "name" "role";
        align-items: start;
        justify-items: start;
    }

    .chn__cell + .chn__cell::before {
        content: "→";
        position: absolute;
        top: 50%;
        left: calc(-1 * var(--space-lg));
        width: var(--space-lg);
        margin: 0;
        transform: translateY(-50%);
    }
}

/* CHN-R15/R16 (Jeff, 2026-09-17): on a phone, a chain with a deck shows its cells as a
   second carousel directly above the deck — the tile in the centre is the stage in view,
   its neighbours peek from either side, smaller and behind it — and the two rows stay in
   step (site.js). Native scroll-snap on the same markup: the tiles are the links they always
   were, so without script every tile is full size and a tap still lands on the slide. The
   peeking neighbours are the "this scrolls" cue (GAL-R04's reading of F-R17), so this row
   hides its scrollbar; the deck keeps its own. A chain without a deck keeps the list. */
@media (max-width: 767px) {
    .chn--deck .chn__rail {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        /* Out to the screen's edges, past the frame's gutter, so a peeking tile runs off the
           screen and not off a margin. The side padding — a sixth of the screen each; vw,
           because a percentage would resolve against the narrower frame — is the room that
           lets the first and last tile centre, and leaves the tile two thirds of the screen. */
        margin-inline: calc(-1 * var(--container-pad));
        padding: 0 calc(100vw / 6);
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .chn--deck .chn__rail::-webkit-scrollbar {
        display: none;
    }

    .chn--deck .chn__cell {
        flex: 0 0 100%; /* of the content box: two thirds of the screen (Jeff, 2026-09-17) */
        margin-inline: calc(-1 * var(--space-sm)); /* the sliver each neighbour sits under */
        scroll-snap-align: center;
        transition: transform var(--motion-standard) var(--motion-ease), opacity var(--motion-standard) var(--motion-ease);
    }

    /* No connector between tiles: the numbers carry the order (CHN-R04). */
    .chn--deck .chn__cell + .chn__cell::before {
        content: none;
    }

    /* Once script names the current tile, the others step back — smaller, dimmer, under its
       edges. Each shrinks toward the current tile, so the overlap stays the sliver above. */
    .chn--deck .chn__rail:has([aria-current="true"]) .chn__cell:not(:has(> [aria-current="true"])) {
        transform: scale(0.88);
        opacity: 0.72;
    }

    .chn--deck .chn__cell:has(> [aria-current="true"]) {
        z-index: 1;
    }

    .chn--deck .chn__cell:has(~ .chn__cell > [aria-current="true"]) {
        transform-origin: right center;
    }

    .chn--deck .chn__cell:has(> [aria-current="true"]) ~ .chn__cell {
        transform-origin: left center;
    }
}

/* CHN-R10: the stage panels, one in view at a time, in their own scroll container with
   scroll-snap — the gallery strip's construction (GAL-R01): native without script, the page
   never pans (PF-R03), a visible scrollbar and the edge cues for discoverability (F-R17). */
.chn__deck {
    position: relative;
    margin-top: var(--space-xl);
}

.chn__slides {
    display: flex;
    gap: var(--space-lg);
    margin: 0;
    padding: 0 0 var(--space-sm);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: auto;
    scrollbar-color: var(--divider) var(--surface-deep);
}

.chn__slide {
    flex: 0 0 100%;
    min-width: 0;
    scroll-snap-align: start;
}

.chn__panel {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    box-sizing: border-box;
    height: 100%;
    padding: var(--container-pad);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.chn__panel-text {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    min-width: 0;
}

.chn__panel-media {
    min-width: 0;
}

/* The strip marks the slide in view (site.js, CHN-R11) with the edge a hovered cell shows. */
.chn__link[aria-current="true"] {
    border-color: var(--accent);
}

.chn__nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* Enhancement only: the arrows exist for JS to reveal (CHN-R11). */
.chn__nav[hidden] {
    display: none;
}

.chn__count {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* Prev/next are a desktop convenience — touch scrolling is the mobile affordance. */
@media (max-width: 1023px) {
    .chn__nav {
        display: none;
    }
}

@media (min-width: 1024px) {
    .chn__panel {
        flex-direction: row;
        align-items: center;
    }

    .chn__panel-text,
    .chn__panel-media {
        flex: 1 1 50%;
    }
}

/* ============================================================================
   Product page — GalleryStrip (GAL, WF-09)
   ========================================================================== */

.gal__wrap {
    position: relative;
    margin-top: var(--section-gap);
}

.gal__strip {
    display: flex;
    gap: var(--space-lg);
    margin: 0;
    padding: 0 0 var(--space-sm);
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* The scrollbar stays visible: this container's own discoverability (F-R17). */
    scrollbar-width: auto;
    scrollbar-color: var(--divider) var(--surface-deep);
}

/* GAL-R04: fixed strip height, item width follows each image's aspect ratio. Capping
   the item below the container width is what leaves the partial-item peek — the cue
   that says "this scrolls" without a control (F-R17). */
.gal__item {
    flex: 0 0 auto;
    scroll-snap-align: start;
    max-width: 80%;
}

.gal__item .mf img {
    height: 260px; /* the fixed strip height (GAL-R04); nothing else sets the item's size */
    width: auto;
    object-fit: contain;
}

.gal__nav {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

/* Enhancement only: the buttons exist for JS to reveal, and native scrolling plus
   the peek and edge cues carry the no-JS case (GAL-R02). */
.gal__nav[hidden] {
    display: none;
}

/* Prev/next are a desktop convenience — touch scrolling is the mobile affordance. */
@media (max-width: 1023px) {
    .gal__nav {
        display: none;
    }
}

/* ============================================================================
   Product page — SpecBlock (SPEC, WF-10)
   ========================================================================== */

.spec__legend {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-sm) var(--space-md);
    align-items: baseline;
    margin-block: var(--section-gap);
    max-width: var(--measure-prose-max);
}

.spec__legend dd {
    margin: 0;
    color: var(--text-secondary);
}

/* Cues and the scroll behaviour come from .edge-cues on the same element (F-R17,
   SPEC-R04); this only sets the box. */
.spec__wrap {
    width: 100%;
}

.spec__table {
    width: 100%;
    border-collapse: collapse;
    text-align: left;
}

.spec__table--tiered {
    min-width: 640px;
}

.spec__table th,
.spec__table td {
    padding: var(--space-md);
    border-bottom: 1px solid var(--divider);
    vertical-align: top;
}

.spec__table thead th {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    font-weight: 500;
}

.spec__table tbody th {
    font-weight: 500;
    color: var(--text-primary);
}

.spec__table td {
    color: var(--text-secondary);
}

/* ============================================================================
   Product page — DownloadSection (DLS, WF-25)
   ========================================================================== */

.dls__rows {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    margin-block: var(--section-gap);
    padding: 0;
    list-style: none;
}

.dls__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    padding: var(--container-pad);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.dls__facts {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-secondary);
}

.dls__channel {
    color: var(--text-primary-on-raised);
}

.dls__sha {
    flex: 1 1 100%;
    min-width: 0;
}

.dls__note {
    flex: 1 1 100%;
    margin: 0;
    color: var(--text-secondary);
}

.dls__notice {
    color: var(--text-primary);
    background: var(--surface-raised);
    border-inline-start: 3px solid var(--accent);
    padding: var(--space-sm) var(--space-md);
    margin-block-end: var(--space-md);
}

.dls__trial {
    color: var(--text-primary);
}

.dls__depth {
    margin-top: var(--space-sm);
}

/* F-R12: below 768 the row's segments stack and the action goes full-width at the
   ≥44px touch size — no horizontal scroll, no clipped action. */
@media (max-width: 767px) {
    .dls__row {
        flex-direction: column;
        align-items: stretch;
    }

    .dls__action .btn {
        width: 100%;
        min-height: 44px;
    }
}

/* ============================================================================
   Product page — SupportSection (SUP, WF-18)
   ========================================================================== */

.sup__docs {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-block: var(--section-gap);
    padding: 0;
    list-style: none;
}

.sup__doc {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--container-pad);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
}

.sup__doc-text {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.sup__doc-title {
    color: var(--text-primary-on-raised);
    font-weight: 500;
}

.sup__doc-meta {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.sup__tiles {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

/* The tile is a compact destination and stays one — the contact form lives on its
   own page, so this never grows into a form (SUP-R03). */
.sup__tile {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: var(--space-md) var(--space-xl);
    background-color: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    border-radius: var(--radius-container);
    color: var(--text-primary-on-raised);
    text-decoration: none;
}

.sup__tile:hover {
    background-color: var(--surface-hover);
}

@media (max-width: 767px) {
    .sup__doc {
        flex-direction: column;
        align-items: stretch;
    }

    .sup__doc-action .btn,
    .sup__tile {
        width: 100%;
        justify-content: center;
        min-height: 44px;
    }
}

/* ============================================================================
   Product page — StatusStrip + CtaBand (SS/CTAB, WF-11)
   ========================================================================== */

.ss {
    border-block: 1px solid var(--border-hairline);
    padding-block: var(--space-xl);
}

.ss__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
}

.ss__line {
    color: var(--text-secondary);
}

/* SS-R01: no reserved gap. The forward link is a flex child that only exists when
   it renders — nothing here holds space for it. */
.ss__forward {
    margin-left: auto;
}

.ctab {
    background-color: var(--surface-raised);
    text-align: center;
}

.ctab__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap);
}

.ctab__inner .sh__lede {
    max-width: var(--measure-prose);
}

/* ============================================================================
   StickyCta (STK, WF-06) — mobile only, JS-driven, absent without script
   ========================================================================== */

.stk {
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    background-color: var(--surface-header);
    border-top: 1px solid var(--border-hairline);
    /* F-R18: the bar clears the device's own bottom chrome. */
    padding: var(--space-md) var(--container-pad) calc(var(--space-md) + env(safe-area-inset-bottom));
    /* STK-R03: opacity is the only thing that animates; reduced motion flattens it
       to an instant swap via base.css's site-wide rule. */
    transition: opacity var(--motion-standard) var(--motion-ease);
}

.stk[hidden] {
    display: none;
}

.stk__inner .btn {
    width: 100%;
    min-height: 44px;
}

/* STK-R01: mobile only. Above the step the in-page CTAs are always reachable. */
@media (min-width: 768px) {
    .stk {
        display: none;
    }
}

/* STK-R02: the page reserves the bar's height while it shows, so the bar never
   occludes the content under it. */
.has-sticky-cta .pf__main {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

@media (min-width: 768px) {
    .has-sticky-cta .pf__main {
        padding-bottom: 0;
    }
}

/* ============================================================================
   Secondary pages (lead-owned): /about, /privacy, /404, /error shell, /contact
   ========================================================================== */


.about {
    max-width: var(--measure-prose-max);
    margin-inline: auto;
    display: grid;
    gap: var(--space-3xl);
}

.about__mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-container);
    background: var(--surface-raised);
    border: 1px solid var(--border-hairline);
    color: var(--accent);
    font-weight: var(--font-weight-heading);
    font-size: var(--font-size-1);
}

.about__statement {
    font-size: var(--font-size-1);
    color: var(--text-primary);
}

.about__legal {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    border-top: 1px solid var(--border-hairline);
    padding-top: var(--space-lg);
}

/* /privacy (PRV-R01): one admin-authored Markdown text, often long, under the
   page's own h1. The MarkdownView's calm in-block spacing (primitives.css,
   .mdv > * + *) suits the short notes it was made for; here the sections need
   air above their headings or a reader cannot see where one ends and the next
   begins. */
.privacy {
    max-width: var(--measure-prose-max);
    margin-inline: auto;
}

.privacy__updated {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

.privacy .mdv > h2 {
    margin-block-start: var(--space-2xl);
}

.privacy .mdv > h3 {
    margin-block-start: var(--space-xl);
}

.err {
    align-items: flex-start;
}

.err__code {
    font-family: var(--font-numeric);
    font-size: var(--font-size-3);
    color: var(--text-secondary);
    opacity: 0.6;
    margin: 0;
}

.err__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: var(--space-sm);
}

.err__request-id {
    color: var(--text-secondary);
    font-size: var(--font-size--1);
}

/* /error renders its own zero-data shell (ERR-R03) outside MainLayout. */
.err-shell {
    min-height: 100dvh;
    display: grid;
    grid-template-rows: auto 1fr auto;
}

.err-shell__bar {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
    background: var(--surface-header);
    border-bottom: 1px solid var(--border-hairline);
}

.err-shell__main {
    padding: var(--space-3xl) var(--space-xl);
    max-width: var(--measure-prose-max);
    justify-self: center;
    width: 100%;
}

.err-shell__legal {
    padding: var(--space-lg) var(--space-xl);
    color: var(--text-secondary);
    font-size: var(--font-size--1);
    border-top: 1px solid var(--border-hairline);
}

.contact {
    max-width: 24rem;
    margin-inline: auto;
}

/* ADG-R06's draft-preview arm announces itself — an admin must never mistake a
   draft render for the published page. The published page's counterpart (.draft-strip,
   2026-09-17) is quiet: a hairline, secondary ink, the same two links. Both render for
   a signed-in Administrator only. */
.draft-banner,
.draft-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm) var(--space-md);
    margin: var(--space-md) auto 0;
    padding: var(--space-sm) var(--space-md);
    border: 1px solid var(--status-warning-border);
    border-radius: var(--radius-control);
    background-color: var(--status-warning-surface);
    color: var(--text-primary-on-raised);
    font-size: var(--font-size--1);
}

.draft-strip {
    border-color: var(--border-hairline);
    background-color: transparent;
    color: var(--text-secondary);
}