/* ==========================================================================
   Verde Casino — stylesheet
   Tokens → base → shell → components. Names of custom properties follow the
   vocabulary of this build (tint / stack / curve / type-size …).
   ========================================================================== */

/* ---------- self-hosted fonts ---------- */
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/store/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700 800; font-display: swap; src: url("/store/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/store/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500 600; font-display: swap; src: url("/store/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/store/inter-latin-700-normal.woff2") format("woff2"); }

/* ---------- design tokens ---------- */
:root {
    --tint-prime: #6cbf00;
    --tint-flare: #0c0b11;
    --tint-press: #000000;
    --tint-sheet: #131415;
    --tint-raised: #1c1e20;
    --tint-fg: #FFFFFF;
    --tint-faint: #c1c0c0;
    --tint-divider: #2a2d2f;
    --tint-rule-bold: #4a4e52;
    --tint-fade-top: #3f375c;
    --tint-grad-2: #1c1928;
    --tint-notice: #a4161a;

    --font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
    --font-prose: "Inter", "Segoe UI", Arial, sans-serif;

    --type-size-xxl: 64px;
    --type-size-display-2: 40px;
    --type-size-display-3: 28px;
    --type-size-display-4: 22px;
    --type-size-h5: 18px;
    --type-size-xs-2: 16px;
    --type-size-copy: 17px;
    --type-size-sm: 14px;
    --type-size-legal: 12px;

    --leading-close: 1.1;
    --leading-default: 1.5;
    --leading-open: 1.75;
    --fw-base: 400;
    --fw-mid: 500;
    --fw-strong: 700;
    --letter-narrow: -0.02em;
    --letter-normal: 0;
    --letter-spread: 0.04em;

    --stack-hair: 2px;
    --stack-tiny: 6px;
    --stack-snug: 10px;
    --stack-base: 14px;
    --stack-wide: 20px;
    --stack-roomy: 28px;
    --stack-vast: 48px;
    --stack-huge: 72px;

    --curve-tiny: 4px;
    --curve-snug: 8px;
    --curve-base: 12px;
    --curve-wide: 20px;
    --curve-pill: 9999px;
    --curve-dot: 50%;

    --shadow-tiny: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-snug: 0 2px 6px rgba(0, 0, 0, 0.35);
    --shadow-base: 0 6px 18px rgba(0, 0, 0, 0.45);
    --shadow-wide: 0 12px 32px rgba(0, 0, 0, 0.55);

    --border-slim: 1px;
    --border-medium: 2px;
    --border-heavy: 3px;

    --dur-snap: 172ms;
    --dur-mid: 360ms;
    --dur-long: 557ms;
    --easing-release: cubic-bezier(0.27, 0.69, 0.38, 0.94);
    --easing-swing: cubic-bezier(0.59, 0.11, 0.55, 0.99);
    --easing-bounce: cubic-bezier(0.39, 1.75, 0.54, 1.05);

    --frame-outer: 1420px;
    --frame-readable: 1420px;
    --frame-padding-desktop: 32px;
    --frame-edge-mid: 24px;
    --frame-padding-mobile: 16px;
    --bar-size-desktop: 64px;
    --bar-h-sm: 60px;

    /* own helpers */
    --slim-col: 460px;
    --sec-y: 44px;
    --gutter: var(--frame-padding-desktop);
}

@media (max-width: 1023px) {
    :root { --gutter: var(--frame-edge-mid); }
}

@media (max-width: 819px) {
    :root {
        --type-size-xxl: 36px;
        --type-size-display-2: 28px;
        --type-size-display-3: 22px;
        --type-size-display-4: 18px;
        --type-size-h5: 16px;
        --type-size-xs-2: 14px;
        --type-size-copy: 16px;
        --type-size-sm: 13px;
        --type-size-legal: 11px;
        --sec-y: 32px;
        --gutter: var(--frame-padding-mobile);
    }
}

@media (max-width: 420px) {
    :root { --type-size-xxl: 30px; }
}

/* ---------- reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
html, body { overflow-x: clip; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--tint-sheet);
    color: var(--tint-fg);
    font-family: var(--font-prose);
    font-size: var(--type-size-copy);
    font-weight: var(--fw-base);
    line-height: var(--leading-open);
}
.pageCore { flex: 1 0 auto; display: block; }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; margin: 0; }
h1, h2 { font-family: var(--font-head); font-weight: var(--fw-strong); letter-spacing: var(--letter-narrow); line-height: var(--leading-close); }
h1 { text-transform: uppercase; }
h3, h4 { font-family: var(--font-head); font-weight: var(--fw-strong); letter-spacing: var(--letter-normal); line-height: 1.25; }
p { margin: 0; }
a { color: var(--tint-prime); }
[hidden] { display: none !important; }
button { font: inherit; }

/* ---------- a11y ---------- */
.skipJump {
    position: absolute;
    left: var(--stack-base);
    top: -200px;
    z-index: 200;
    padding: var(--stack-snug) var(--stack-wide);
    background: var(--tint-prime);
    color: var(--tint-flare);
    font-weight: var(--fw-strong);
    border-radius: var(--curve-snug);
    text-decoration: none;
}
.skipJump:focus { top: var(--stack-base); }
.skipJump:not(:focus) { top: -200px !important; }
:focus-visible { outline: 2px solid var(--tint-prime); outline-offset: 3px; }

/* ---------- shared section width: every *Hold wrapper ---------- */
.boxBarHold, .netBunchHold, .latchSliderHold, .caseBlockHold, .nookSpanHold,
.sheetSetHold, .stubDisplayHold, .huskGroupHold, .courtBlockHold, .streamListHold,
.moduleTrackHold, .chipSpanHold, .chipSpanArticlesHold, .vectorListHold,
.boltZoneHold, .crateBodyHold, .chipZoneHold, .fragmentStripHold {
    width: 100%;
    max-width: calc(var(--frame-outer) + 2 * var(--frame-padding-desktop));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* ---------- reveal on scroll (blur-in) + intro (rise) ---------- */
[data-js] [data-appear]:not(.in-view) {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(22px);
}
[data-appear] {
    transition: opacity var(--dur-long) var(--easing-release), filter var(--dur-long) var(--easing-release), transform var(--dur-long) var(--easing-release);
}
[data-appear].in-view { opacity: 1; filter: none; transform: none; }
.no-js [data-appear] { opacity: 1; filter: none; transform: none; }
@keyframes riseIn {
    from { opacity: 0; transform: translateY(22px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    [data-appear] { opacity: 1 !important; filter: none !important; transform: none !important; }
}

/* ==========================================================================
   Header — HEAD-SPLIT: logo left, menu centred, offer button right.
   Behaviour hide-show (sticky, tucks away on scroll down).
   ========================================================================== */
.pulseTrack {
    position: sticky;
    top: 0;
    z-index: 95;
    background: var(--tint-sheet);
    color: var(--tint-fg);
}
.pulseTrack.isTucked { transform: translateY(-100%); }
.pulseTrackTier {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: var(--stack-wide);
    height: 64px;
    max-width: calc(var(--frame-outer) + 2 * var(--frame-padding-desktop));
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.pulseTrackBadge { display: inline-flex; align-items: center; flex-shrink: 0; }
.pulseTrackBadgeImage { display: block; height: 48px; width: auto; flex-shrink: 0; }

/* menu button: 2×2 grid glyph on a tinted square */
.pulseTrackHandle {
    display: none;
    order: 3;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin-left: 0;
    border: 0;
    border-radius: var(--curve-snug);
    background: var(--tint-raised);
    color: var(--tint-fg);
    cursor: pointer;
}
.pulseTrackDots { display: grid; grid-template-columns: repeat(2, 7px); gap: 5px; transition: transform var(--dur-mid) var(--easing-swing); }
.pulseTrackDots i { display: block; width: 7px; height: 7px; border-radius: 2px; background: var(--tint-prime); }
.pulseTrackHandle[aria-expanded="true"] .pulseTrackDots { transform: rotate(45deg); }

/* inline menu */
.pulseTrackBar {
    display: flex;
    align-items: center;
    gap: var(--stack-base);
    flex: 0 0 auto;
    margin-inline: auto;
}
.pulseTrackList {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.pulseTrackCell { display: flex; align-items: center; flex-shrink: 0; }
.pulseTrackCell + .pulseTrackCell::before {
    content: "";
    width: 1px;
    height: 14px;
    margin-inline: var(--stack-base);
    background: var(--tint-rule-bold);
}
.pulseTrackJump {
    position: relative;
    display: inline-block;
    padding-block: 8px;
    color: var(--tint-fg);
    background: var(--tint-sheet);
    font-family: var(--font-prose);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: var(--letter-spread);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.pulseTrackJump::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2px;
    height: 2px;
    background: var(--tint-prime);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--dur-snap) var(--easing-release);
}
.pulseTrackJump:hover { color: var(--tint-fg); background: var(--tint-sheet); }
.pulseTrackJump:hover::after,
.pulseTrackJump[aria-current="page"]::after { transform: scaleX(1); }

/* "more" disclosure (priority+) */
.pulseTrackMore { position: relative; flex: 0 0 auto; }
.pulseTrackMoreOpener {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--tint-divider);
    border-radius: var(--curve-snug);
    background: var(--tint-raised);
    color: var(--tint-fg);
    cursor: pointer;
}
.pulseTrackMoreOpener:hover { background: var(--tint-divider); color: var(--tint-fg); }
.pulseTrackBars { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.pulseTrackBars i { display: block; height: 2px; border-radius: 2px; background: var(--tint-fg); }
.pulseTrackPane {
    display: none;
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 97;
    min-width: 250px;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    margin: 0;
    padding: var(--stack-tiny);
    list-style: none;
    background: var(--tint-raised);
    border: 1px solid var(--tint-divider);
    border-radius: var(--curve-base);
    box-shadow: var(--shadow-wide);
}
.pulseTrackPane.is-open { display: block; }
.pulseTrackPane .pulseTrackCell { display: block; }
.pulseTrackPane .pulseTrackCell::before { display: none; }
.pulseTrackPane .pulseTrackJump {
    display: block;
    padding: 11px var(--stack-base);
    background: var(--tint-raised);
    border-radius: var(--curve-snug);
}
.pulseTrackPane .pulseTrackJump::after { left: var(--stack-base); right: auto; width: 28px; bottom: 6px; }
.pulseTrackPane .pulseTrackJump:hover { background: var(--tint-divider); color: var(--tint-fg); }

/* right side: market flag + offer button */
.pulseTrackTools { display: flex; align-items: center; gap: var(--stack-base); flex: 0 0 auto; }
.pulseTrackFlag {
    display: inline-flex;
    width: 24px;
    height: 16px;
    border-radius: 3px;
    overflow: hidden;
    box-shadow: 0 0 0 1px var(--tint-divider);
    flex-shrink: 0;
}
.pulseTrackFlagStripe { flex: 1 1 0; background: #009246; }
.pulseTrackFlagStripe + .pulseTrackFlagStripe { background: #f4f5f0; }
.pulseTrackFlagStripe + .pulseTrackFlagStripe + .pulseTrackFlagStripe { background: #ce2b37; }

/* mobile drawer: flat list of every section */
.pulseTrackDrawer {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 96;
    max-height: calc(100vh - 64px);
    overflow-y: auto;
    background: var(--tint-raised);
    border-top: 1px solid var(--tint-divider);
    box-shadow: var(--shadow-wide);
}
.pulseTrackDrawer.is-open { display: block; }
.pulseTrackDrawerList { list-style: none; margin: 0; padding: var(--stack-tiny) var(--gutter) var(--stack-wide); }
.pulseTrackDrawerCell { border-bottom: 1px solid var(--tint-divider); }
.pulseTrackDrawerJump {
    display: block;
    padding: 13px 0;
    color: var(--tint-fg);
    background: var(--tint-raised);
    font-size: 15px;
    letter-spacing: var(--letter-spread);
    text-transform: uppercase;
    text-decoration: none;
}
.pulseTrackDrawerJump[aria-current="page"] { color: var(--tint-prime); }
.pulseTrackDrawerJump:hover { color: var(--tint-prime); background: var(--tint-raised); }

@media (max-width: 959px) {
    .pulseTrackTier { height: 60px; gap: var(--stack-snug); }
    .pulseTrackBadgeImage { height: 40px; }
    .pulseTrackBar { display: none; }
    .pulseTrackHandle { display: inline-flex; }
    .pulseTrackTools { order: 2; margin-inline-start: auto; }
}
@media (min-width: 960px) {
    .pulseTrackDrawer, .pulseTrackDrawer.is-open { display: none; }
}
@media (max-width: 420px) {
    .pulseTrackFlag { display: none; }
}
@media (max-width: 359px) {
    .pulseTrackBadgeImage { height: 34px; }
}

/* ==========================================================================
   Footer — FOOT-02: two rows (brand + nav / copyright + legal),
   RG-07 warning line on top.
   ========================================================================== */
.chipZone {
    background: var(--tint-sheet);
    color: var(--tint-faint);
    border-top: 1px solid var(--tint-divider);
    padding-block: var(--stack-roomy);
}
.chipZoneAlert {
    display: block;
    text-align: center;
    padding-bottom: var(--stack-base);
    border-bottom: 1px solid var(--tint-divider);
    font-size: var(--type-size-sm);
    line-height: var(--leading-default);
    color: var(--tint-faint);
    background: var(--tint-sheet);
}
.chipZoneAge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    margin-inline-end: var(--stack-snug);
    border-radius: var(--curve-tiny);
    background: var(--tint-notice);
    color: #FFFFFF;
    font-family: var(--font-head);
    font-weight: var(--fw-strong);
    font-size: 13px;
}
.chipZoneWarn { color: var(--tint-faint); }
.chipZoneHelp {
    display: inline-block;
    margin-inline-start: var(--stack-snug);
    color: var(--tint-prime);
    background: var(--tint-sheet);
    white-space: nowrap;
    text-underline-offset: 3px;
}
.chipZoneHelp:hover { color: var(--tint-fg); background: var(--tint-sheet); }
.chipZoneTier { display: flex; align-items: center; justify-content: space-between; gap: var(--stack-vast); }
.chipZoneTop { padding-block: var(--stack-wide); }
.chipZoneBase {
    flex-wrap: wrap;
    gap: var(--stack-base) var(--stack-roomy);
    padding-top: var(--stack-base);
    border-top: 1px solid var(--tint-divider);
}
.chipZoneBadge { flex-shrink: 0; display: inline-flex; }
.chipZoneBadgeImage { display: block; height: 72px; width: auto; }
.chipZoneBar { flex: 1 1 auto; }
.chipZoneList {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--stack-snug) var(--stack-wide);
    list-style: none;
    margin: 0;
    padding: 0;
}
.chipZoneCell { display: block; }
.chipZoneJump {
    color: var(--tint-faint);
    background: var(--tint-sheet);
    font-size: var(--type-size-sm);
    text-decoration: none;
    white-space: nowrap;
}
.chipZoneJump:hover, .chipZoneJump[aria-current="page"] { color: var(--tint-fg); background: var(--tint-sheet); }
.chipZoneCopy { font-size: var(--type-size-legal); color: var(--tint-faint); }
.chipZoneLegal { display: block; }
.chipZoneLegalList { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.chipZoneLegalCell { display: flex; align-items: center; }
.chipZoneLegalCell + .chipZoneLegalCell::before { content: "·"; margin-inline: var(--stack-snug); color: var(--tint-faint); }
.chipZoneLegalJump {
    color: var(--tint-faint);
    background: var(--tint-sheet);
    font-size: var(--type-size-legal);
    text-decoration: none;
}
.chipZoneLegalJump:hover { color: var(--tint-fg); background: var(--tint-sheet); }

@media (max-width: 819px) {
    .chipZoneTier { flex-direction: column; align-items: center; gap: var(--stack-wide); text-align: center; }
    .chipZoneBadgeImage { height: 60px; }
    .chipZoneBar { width: 100%; }
    .chipZoneList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-items: center; }
    .chipZoneJump { white-space: normal; }
    .chipZoneLegalList { justify-content: center; }
}

/* ==========================================================================
   Cookie banner — COOK-04: slide-up bar with backdrop (instant show).
   ========================================================================== */
.fragmentStripBackdrop {
    position: fixed;
    inset: 0;
    z-index: 89;
    background: rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
.fragmentStrip {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    padding-block: var(--stack-roomy);
    background: var(--tint-sheet);
    color: var(--tint-fg);
    border-top: 4px solid var(--tint-prime);
    box-shadow: var(--shadow-wide);
}
.fragmentStripHold { display: flex; flex-direction: column; align-items: center; gap: var(--stack-base); text-align: center; }
.fragmentStripNotice { max-width: var(--slim-col); line-height: var(--leading-open); color: var(--tint-fg); background: var(--tint-sheet); font-size: var(--type-size-sm); }
.fragmentStripTools { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--stack-base); }
.fragmentStripAccept, .fragmentStripLater {
    min-height: 48px;
    padding-inline: var(--stack-wide);
    border-radius: var(--curve-base);
    font-family: var(--font-head);
    font-weight: var(--fw-strong);
    font-size: var(--type-size-sm);
    cursor: pointer;
    transition: transform var(--dur-snap) var(--easing-release);
}
.fragmentStripAccept { border: 0; background: var(--tint-prime); color: var(--tint-flare); }
.fragmentStripAccept:hover { background: #7fd615; color: var(--tint-flare); transform: scale(1.025); }
.fragmentStripLater { border: 1px solid var(--tint-rule-bold); background: var(--tint-raised); color: var(--tint-fg); }
.fragmentStripLater:hover { background: var(--tint-divider); color: var(--tint-fg); transform: scale(1.025); }

@media (max-width: 720px) {
    .fragmentStrip, .fragmentStripHold {
        padding: 12px 14px !important;
        gap: 8px !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
    }
    .fragmentStripHold { padding-inline: 0 !important; }
    .fragmentStripAccept, .fragmentStripLater {
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 40px !important;
    }
}

/* ==========================================================================
   Hero — HERO-05: bordered plate, typographic, centred.
   ========================================================================== */
.boxBar { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-fg); }
.boxBarFrame {
    margin: 12px;
    padding: var(--stack-vast);
    border: 1px solid var(--tint-fg);
    outline: 4px solid var(--tint-fg);
    outline-offset: 8px;
    background: var(--tint-sheet);
}
.boxBarStuff {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--stack-wide);
    text-align: center;
    animation: riseIn var(--dur-long) var(--easing-release) both;
}
.boxBarKicker { font-size: var(--type-size-sm); font-style: italic; color: var(--tint-faint); letter-spacing: var(--letter-spread); }
.boxBarLabel { font-size: var(--type-size-xxl); max-width: calc(var(--slim-col) * 2.4); }
.boxBarRule { width: 80px; height: 2px; margin: 0 auto; border: 0; background: var(--tint-prime); }
.boxBarDeck { max-width: calc(var(--slim-col) * 1.5); font-size: var(--type-size-h5); line-height: var(--leading-default); color: var(--tint-faint); }
.boxBarTools { display: flex; flex-direction: column; align-items: center; gap: var(--stack-snug); }
.boxBarAge { font-size: var(--type-size-legal); color: var(--tint-faint); }

@media (max-width: 819px) {
    .boxBarFrame { margin: 10px; padding: var(--stack-roomy) var(--stack-wide); outline-width: 3px; outline-offset: 6px; }
}
@media (max-width: 420px) {
    .boxBarFrame { padding: var(--stack-wide) var(--stack-base); }
}

/* ==========================================================================
   Offer strip — inserted between blocks so an offer button is always near.
   ========================================================================== */
.offerStrip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-base) var(--stack-wide);
    margin-block: var(--stack-roomy);
    padding: var(--stack-wide) var(--stack-roomy);
    background: var(--tint-raised);
    color: var(--tint-fg);
    border: 1px solid var(--tint-divider);
    border-left: 4px solid var(--tint-prime);
    border-radius: var(--curve-base);
}
.offerStripLine { flex: 1 1 260px; font-family: var(--font-head); font-weight: var(--fw-strong); font-size: var(--type-size-h5); line-height: 1.3; color: var(--tint-fg); background: var(--tint-raised); }
.offerStripAge { flex-basis: 100%; font-size: var(--type-size-legal); color: var(--tint-faint); background: var(--tint-raised); }
@media (max-width: 619px) {
    .offerStrip { flex-direction: column; align-items: stretch; text-align: center; padding: var(--stack-wide); }
    .offerStripLine { flex: 0 0 auto; }
}

/* ==========================================================================
   Text body — PROSE-12: section number in a circular badge left of the h2.
   headScale normal · headWeight semibold · numFormat 1 · iconSize l · roomy
   ========================================================================== */
.nookSpan { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-faint); }
.nookSpanHold { counter-reset: nookpart; }
.nookSpanHead {
    counter-increment: nookpart;
    display: flex;
    align-items: center;
    gap: var(--stack-wide);
    margin: var(--stack-vast) 0 var(--stack-wide);
    font-family: var(--font-head);
    font-size: var(--type-size-display-2);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: var(--letter-narrow);
    text-transform: none;
    color: var(--tint-fg);
    background: var(--tint-sheet);
}
.nookSpanHead::before {
    content: counter(nookpart);
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: var(--curve-dot);
    background: var(--tint-prime);
    color: var(--tint-flare);
    font-family: var(--font-head);
    font-size: 22px;
    font-weight: var(--fw-strong);
    letter-spacing: 0;
}
.nookSpanHold > .nookSpanHead:first-child { margin-top: 0; }
.nookSpanSub { margin: var(--stack-roomy) 0 var(--stack-snug); font-size: var(--type-size-display-4); color: var(--tint-fg); background: var(--tint-sheet); }
.nookSpanPara { margin: 0 0 var(--stack-wide); font-size: var(--type-size-copy); line-height: var(--leading-open); color: var(--tint-faint); background: var(--tint-sheet); }
.nookSpanPara strong, .nookSpanCell strong { color: var(--tint-fg); font-weight: 600; }
.nookSpanList { margin: 0 0 var(--stack-wide); padding-left: 1.4em; color: var(--tint-faint); }
.nookSpanCell { margin-bottom: var(--stack-snug); line-height: var(--leading-open); padding-left: var(--stack-tiny); }
.nookSpanCell::marker { color: var(--tint-prime); font-weight: var(--fw-strong); }
.nookSpanJump {
    color: var(--tint-prime);
    background: var(--tint-sheet);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: text-decoration-thickness var(--dur-snap) var(--easing-release);
}
.nookSpanJump:hover { color: var(--tint-fg); background: var(--tint-sheet); text-decoration-thickness: 2px; }
.nookSpanFigure { width: 100%; margin: var(--stack-roomy) 0 var(--stack-vast); }
.nookSpanFigure.isWide { max-width: 760px; }
.nookSpanFigure.isSquare { max-width: min(480px, 66vh); }
.nookSpanFigure.isTall { max-width: min(400px, 45vh); }
.nookSpanImage { display: block; width: 100%; height: auto; border-radius: var(--curve-base); border: 1px solid var(--tint-divider); }

@media (max-width: 819px) {
    .nookSpanHead { gap: var(--stack-base); margin-top: var(--stack-roomy); }
    .nookSpanHead::before { flex-basis: 44px; width: 44px; height: 44px; font-size: 18px; }
}

/* ==========================================================================
   Items — GRID-02: numbered vertical strip.
   ========================================================================== */
.sheetSet { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-fg); }
.sheetSetHead { margin-bottom: var(--stack-wide); font-size: var(--type-size-display-2); color: var(--tint-fg); background: var(--tint-sheet); }
.sheetSetList { list-style: none; margin: 0; padding: 0; }
.sheetSetCell {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr);
    gap: var(--stack-wide);
    padding: var(--stack-roomy) var(--stack-base);
    border-bottom: 1px solid var(--tint-divider);
    border-radius: var(--curve-snug);
    background: var(--tint-sheet);
    transition: box-shadow var(--dur-mid) var(--easing-release), background-color var(--dur-mid) var(--easing-release);
}
.sheetSetCell:hover { box-shadow: var(--shadow-base); background: var(--tint-raised); }
.sheetSetNum {
    align-self: start;
    font-family: var(--font-head);
    font-weight: var(--fw-strong);
    font-size: var(--type-size-xxl);
    line-height: 1;
    letter-spacing: var(--letter-narrow);
    color: var(--tint-prime);
    background: var(--tint-sheet);
    transition: transform var(--dur-mid) var(--easing-bounce);
    transform-origin: left top;
}
.sheetSetCell:hover .sheetSetNum { transform: scale(1.1); background: var(--tint-raised); }
.sheetSetStuff { display: flex; flex-direction: column; gap: var(--stack-tiny); }
.sheetSetLabel { font-size: var(--type-size-display-3); color: var(--tint-fg); }
.sheetSetPara { font-size: var(--type-size-copy); line-height: var(--leading-open); color: var(--tint-faint); }
.sheetSetSlot { display: block; }

@media (max-width: 819px) {
    .sheetSetCell { grid-template-columns: 52px minmax(0, 1fr); gap: var(--stack-base); padding-inline: 0; }
}

/* ==========================================================================
   Reviews — REV-03: horizontal carousel strip with dots.
   ========================================================================== */
.stubDisplay { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-fg); scroll-margin-top: 84px; }
.stubDisplayHead { margin-bottom: var(--stack-wide); font-size: var(--type-size-display-2); color: var(--tint-fg); background: var(--tint-sheet); }
.stubDisplayRail {
    display: flex;
    gap: var(--stack-base);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-bottom: var(--stack-snug);
    scrollbar-width: thin;
    scrollbar-color: var(--tint-rule-bold) transparent;
}
.stubDisplayPlate {
    flex: 0 0 360px;
    min-height: 240px;
    display: flex;
    flex-direction: column;
    gap: var(--stack-snug);
    padding: var(--stack-wide);
    scroll-snap-align: start;
    background: var(--tint-raised);
    color: var(--tint-fg);
    border: 1px solid var(--tint-divider);
    border-radius: var(--curve-base);
    transition: box-shadow var(--dur-mid) var(--easing-release);
}
.stubDisplayPlate:hover { box-shadow: var(--shadow-base); }
.stubDisplayTop { display: flex; justify-content: space-between; align-items: baseline; gap: var(--stack-snug); }
.stubDisplayWho { font-family: var(--font-head); font-weight: var(--fw-strong); color: var(--tint-fg); background: var(--tint-raised); }
.stubDisplayScore { font-size: var(--type-size-sm); font-weight: var(--fw-strong); color: var(--tint-prime); background: var(--tint-raised); }
.stubDisplayMeter { display: block; width: 60%; height: 4px; border-radius: 2px; background: #3a3d40; overflow: hidden; }
.stubDisplayFill { display: block; height: 100%; background: var(--tint-prime); }
.stubDisplayPara { margin: 0; font-size: 15px; line-height: var(--leading-default); color: var(--tint-faint); background: var(--tint-raised); }
.stubDisplayDots { display: flex; justify-content: center; gap: 8px; margin-top: var(--stack-base); }
.stubDisplayDot { width: 8px; height: 8px; border-radius: var(--curve-dot); background: #5a5d60; transition: background-color var(--dur-snap) var(--easing-release); }
.stubDisplayDot.isOn { background: var(--tint-prime); }

@media (max-width: 819px) {
    .stubDisplayPlate { flex-basis: 84%; }
}

/* ==========================================================================
   FAQ — FAQ-05: native details/summary, chevron via ::after.
   ========================================================================== */
.huskGroup { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-fg); }
.huskGroupHead { margin-bottom: var(--stack-wide); font-size: var(--type-size-display-2); color: var(--tint-fg); background: var(--tint-sheet); }
.huskGroupList { list-style: none; margin: 0; padding: 0; }
.huskGroupCell { border-bottom: 1px solid var(--tint-divider); }
.huskGroupSlot { display: block; }
.huskGroupItem { padding-block: var(--stack-base); }
.huskGroupAsk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--stack-wide);
    list-style: none;
    cursor: pointer;
    padding-block: var(--stack-tiny);
}
.huskGroupAsk::-webkit-details-marker { display: none; }
.huskGroupAsk::after {
    content: "";
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    margin-inline-end: 6px;
    border-right: 2px solid var(--tint-prime);
    border-bottom: 2px solid var(--tint-prime);
    transform: rotate(45deg);
    transition: transform var(--dur-mid) var(--easing-swing);
}
.huskGroupItem[open] > .huskGroupAsk::after { transform: rotate(225deg); }
.huskGroupQ {
    font-family: var(--font-head);
    font-size: var(--type-size-h5);
    font-weight: var(--fw-strong);
    line-height: 1.4;
    color: var(--tint-fg);
    background: var(--tint-sheet);
    transition: color var(--dur-snap) var(--easing-release);
}
.huskGroupAsk:hover .huskGroupQ { color: var(--tint-prime); background: var(--tint-sheet); }
.huskGroupReply { padding: var(--stack-snug) 0 var(--stack-tiny); }
.huskGroupItem[open] > .huskGroupReply { animation: huskOpen var(--dur-mid) var(--easing-release); }
.huskGroupPara { color: var(--tint-faint); background: var(--tint-sheet); line-height: var(--leading-open); }
@keyframes huskOpen {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: none; }
}

/* ==========================================================================
   CTA — CTA-02: centred contained box. Carries the offer anchor.
   ========================================================================== */
.streamList { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-fg); scroll-margin-top: 84px; }
.streamListPlate {
    max-width: calc(var(--slim-col) + 2 * var(--stack-vast));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--stack-base);
    padding: var(--stack-vast);
    text-align: center;
    background: #171c12;
    color: var(--tint-fg);
    border: 1px solid var(--tint-divider);
    border-radius: var(--curve-wide);
}
.streamListHead { font-size: var(--type-size-display-2); color: var(--tint-fg); background: #171c12; }
.streamListPara { line-height: var(--leading-open); color: var(--tint-faint); background: #171c12; }
.streamListAge { font-size: var(--type-size-legal); color: var(--tint-faint); background: #171c12; }
@media (max-width: 819px) {
    .streamListPlate { padding: var(--stack-roomy) var(--stack-wide); }
}

/* ==========================================================================
   Author byline — BYLINE-04: quote-style attribution at the end.
   ========================================================================== */
.moduleTrack { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-fg); }
.moduleTrackQuote { position: relative; max-width: calc(var(--slim-col) * 1.3); margin: 0 auto; padding-top: var(--stack-vast); text-align: center; }
.moduleTrackQuote::before {
    content: "\201C";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-head);
    font-size: 64px;
    line-height: 1;
    color: var(--tint-prime);
}
.moduleTrackPara { font-family: var(--font-head); font-size: var(--type-size-display-4); font-style: italic; font-weight: 600; line-height: 1.45; color: var(--tint-fg); background: var(--tint-sheet); }
.moduleTrackSign { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--stack-tiny) var(--stack-snug); margin-top: var(--stack-wide); }
.moduleTrackFace { width: 32px; height: 32px; border-radius: var(--curve-dot); object-fit: cover; flex-shrink: 0; }
.moduleTrackWho { font-style: normal; }
.moduleTrackJump { color: var(--tint-prime); background: var(--tint-sheet); font-weight: var(--fw-strong); text-decoration: none; }
.moduleTrackJump:hover { color: var(--tint-fg); background: var(--tint-sheet); text-decoration: underline; }
.moduleTrackJob { font-size: var(--type-size-sm); font-style: italic; color: var(--tint-faint); background: var(--tint-sheet); }

/* ==========================================================================
   Offer buttons — generated by scripts/cta-style.mjs (domain-seeded)
   ========================================================================== */
.mine-pick{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--stack-roomy);border-radius:var(--curve-base);font-size:15px;font-weight:700;letter-spacing:var(--letter-spread);white-space:nowrap;text-align:center}
.mine-pick{position:relative;
  background:#0891B2;color:#000000;text-decoration:none;font-family:var(--font-head);text-transform:uppercase;
  transition:background var(--dur-snap) var(--easing-release),transform var(--dur-snap) var(--easing-release);}
.mine-pick.mine-pick{color:#000000;text-decoration:none;font-family:var(--font-head);}
.mine-pick:hover{background:#0E7490;color:#FFFFFF;animation:none}
.mine-pick.mine-pick:hover{color:#FFFFFF;text-decoration:none}
.mine-pick:hover::after{animation:none}
.mine-pick:active{background:#155E75;color:#FFFFFF}
.mine-pick:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
@keyframes mine-wake{0%,100%{transform:scaleX(0)}40%,60%{transform:scaleX(1)}}
.mine-pick::after{content:"";position:absolute;left:12%;right:12%;bottom:6px;height:4px;background:currentColor;opacity:.5;transform-origin:left;animation:mine-wake 1.9s var(--easing-release) infinite}
@media (prefers-reduced-motion:reduce){.mine-pick,.mine-pick::after{animation:none!important;transition:none!important}}

/* offer button geometry per context (after the generated block on purpose) */
.mine-pick:hover { transform: scale(1.025); }
.pulseTrackTools .mine-pick { min-height: 44px; padding: 0 18px; font-size: 14px; }
.boxBarTools .mine-pick { min-height: 52px; padding: 0 var(--stack-vast); border-radius: var(--curve-tiny); font-size: 16px; }
.streamListPlate .mine-pick { min-height: 52px; padding: 0 var(--stack-roomy); }
.offerStrip .mine-pick { flex: 0 0 auto; }
.pulseTrackButton, .streamListButton, .offerStripButton, .boxBarButton { position: relative; }
.vectorListBand { min-width: 0; }
@media (max-width: 619px) {
    .offerStrip .mine-pick { width: 100%; }
    .boxBarTools .mine-pick { padding: 0 var(--stack-wide); }
}
@media (max-width: 380px) {
    .pulseTrackTools .mine-pick { padding: 0 12px; font-size: 13px; letter-spacing: 0; }
    .mine-pick { white-space: normal; }
}

/* ==========================================================================
   Breadcrumbs — BREAD-01: inline minimal slash.
   ========================================================================== */
.latchSlider { padding-block: var(--stack-base); background: var(--tint-sheet); color: var(--tint-faint); }
.latchSliderList { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; font-size: var(--type-size-sm); }
.latchSliderCell { display: flex; align-items: center; }
.latchSliderCell + .latchSliderCell::before { content: "/"; margin-inline: var(--stack-snug); color: #77797b; }
.latchSliderJump { color: var(--tint-faint); background: var(--tint-sheet); text-decoration: none; }
.latchSliderJump:hover { color: var(--tint-prime); background: var(--tint-sheet); }
.latchSliderNow { color: var(--tint-fg); background: var(--tint-sheet); }

/* ==========================================================================
   Page header — PHEAD-01: eyebrow + title + divider + description.
   ========================================================================== */
.netBunch {
    padding-top: var(--stack-huge);
    padding-bottom: var(--stack-roomy);
    background: var(--tint-sheet);
    color: var(--tint-fg);
    border-bottom: 1px solid #1f2123;
}
.netBunchHold { display: flex; flex-direction: column; align-items: flex-start; gap: var(--stack-base); animation: riseIn var(--dur-long) var(--easing-release) both; }
.netBunchKicker { font-size: var(--type-size-sm); font-weight: var(--fw-mid); letter-spacing: var(--letter-spread); text-transform: uppercase; color: var(--tint-prime); background: var(--tint-sheet); }
.netBunchLabel { max-width: calc(var(--slim-col) * 2); font-size: var(--type-size-xxl); color: var(--tint-fg); background: var(--tint-sheet); }
.netBunchRule { width: 60px; height: 2px; background: var(--tint-prime); }
.netBunchDeck { font-size: var(--type-size-h5); line-height: var(--leading-default); color: var(--tint-faint); background: var(--tint-sheet); }
@media (max-width: 819px) {
    .netBunch { padding-top: var(--stack-vast); }
}

/* ==========================================================================
   Inline CTA — INLINE-CTA-03: text hook, no button.
   ========================================================================== */
.caseBlock { padding-block: var(--stack-base); background: var(--tint-sheet); color: var(--tint-fg); }
.caseBlockLine { text-align: center; font-size: var(--type-size-xs-2); line-height: var(--leading-default); color: var(--tint-fg); background: var(--tint-sheet); }
.caseBlockLine strong { font-weight: var(--fw-strong); color: var(--tint-fg); }
.caseBlockJump {
    color: var(--tint-prime);
    background: var(--tint-sheet);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
    white-space: nowrap;
}
.caseBlockJump:hover { color: var(--tint-fg); background: var(--tint-sheet); text-decoration-thickness: 3px; }

/* ==========================================================================
   Data table — TABLE-02: borderless editorial.
   ========================================================================== */
.courtBlock { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-fg); }
.courtBlockScroll { overflow-x: auto; }
.courtBlockGrid { width: 100%; border-collapse: collapse; background: var(--tint-sheet); }
.courtBlockGrid th {
    padding: var(--stack-base);
    text-align: left;
    font-family: var(--font-head);
    font-weight: var(--fw-strong);
    font-size: var(--type-size-sm);
    letter-spacing: var(--letter-spread);
    text-transform: uppercase;
    color: var(--tint-fg);
    background: var(--tint-sheet);
    border-bottom: 2px solid var(--tint-prime);
}
.courtBlockGrid td {
    padding: var(--stack-base);
    font-size: var(--type-size-copy);
    line-height: var(--leading-default);
    color: var(--tint-faint);
    background: var(--tint-sheet);
    border-bottom: 1px solid #25282a;
}
.courtBlockGrid td:first-child { color: var(--tint-fg); font-weight: var(--fw-mid); }
.courtBlockGrid tr:last-child td { border-bottom: none; }
@media (max-width: 619px) {
    .courtBlockGrid th, .courtBlockGrid td { padding: 10px 6px; font-size: 13px; }
    .courtBlockGrid th { letter-spacing: 0; }
}

/* ==========================================================================
   Author page — AUTH-06: full-hero poster with portrait.
   ========================================================================== */
.chipSpan {
    padding-block: var(--sec-y);
    background: #15190f;
    background-image: linear-gradient(135deg, #2c450c 0%, #131415 72%);
    color: var(--tint-fg);
}
.chipSpanPlate { display: grid; grid-template-columns: 256px minmax(0, 1fr); gap: var(--stack-vast); align-items: center; padding-block: var(--stack-roomy); }
.chipSpanFrame { width: 256px; aspect-ratio: 4 / 5; border-radius: var(--curve-wide); overflow: hidden; box-shadow: var(--shadow-wide); }
.chipSpanFace { display: block; width: 100%; height: 100%; object-fit: cover; }
.chipSpanStuff { display: flex; flex-direction: column; gap: var(--stack-base); animation: riseIn var(--dur-long) var(--easing-release) both; }
.chipSpanJob { font-size: var(--type-size-sm); letter-spacing: var(--letter-spread); text-transform: uppercase; color: var(--tint-prime); background: #15190f; }
.chipSpanWho { font-size: clamp(40px, 6vw, 64px); color: var(--tint-fg); background: #15190f; }
.chipSpanBio { font-size: var(--type-size-h5); line-height: var(--leading-default); color: var(--tint-faint); background: #15190f; }
.chipSpanSkills { display: flex; flex-wrap: wrap; gap: var(--stack-snug); list-style: none; margin: var(--stack-tiny) 0 0; padding: 0; }
.chipSpanSkill {
    padding: 6px var(--stack-base);
    border: 1px solid #3f5a1c;
    border-radius: var(--curve-pill);
    background: #1b2412;
    color: var(--tint-fg);
    font-size: var(--type-size-sm);
}
@media (max-width: 819px) {
    .chipSpanPlate { grid-template-columns: minmax(0, 1fr); gap: var(--stack-roomy); justify-items: center; text-align: center; }
    .chipSpanFrame { width: min(220px, 60vw); }
    .chipSpanStuff { align-items: center; }
    .chipSpanWho { font-size: var(--type-size-xxl); }
    .chipSpanSkills { justify-content: center; }
}

/* other articles by the author (plain text) */
.chipSpanArticles { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-fg); }
.chipSpanArticlesHead { margin-bottom: var(--stack-wide); font-size: var(--type-size-display-3); color: var(--tint-fg); background: var(--tint-sheet); }
.chipSpanArticlesList { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--stack-snug) var(--stack-roomy); list-style: none; margin: 0; padding: 0; }
.chipSpanArticlesCell { padding: var(--stack-snug) 0 var(--stack-snug) var(--stack-base); border-left: 3px solid var(--tint-prime); color: var(--tint-faint); background: var(--tint-sheet); line-height: var(--leading-default); }
@media (max-width: 819px) {
    .chipSpanArticlesList { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   Contact form — FORM-02: two columns, info left, form right.
   ========================================================================== */
.vectorList { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-fg); }
.vectorListHold { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--stack-roomy); align-items: start; }
.vectorListSide {
    display: flex;
    flex-direction: column;
    gap: var(--stack-base);
    padding: var(--stack-wide);
    background: #182012;
    color: var(--tint-fg);
    border-radius: var(--curve-base);
}
.vectorListHead { font-size: var(--type-size-display-4); color: var(--tint-fg); background: #182012; }
.vectorListPara { line-height: var(--leading-default); color: var(--tint-faint); background: #182012; }
.vectorListWays { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--stack-snug); }
.vectorListWay { display: flex; flex-direction: column; font-size: var(--type-size-sm); }
.vectorListKind { font-size: var(--type-size-legal); text-transform: uppercase; letter-spacing: var(--letter-spread); color: var(--tint-faint); background: #182012; }
.vectorListJump { color: var(--tint-prime); background: #182012; overflow-wrap: anywhere; }
.vectorListJump:hover { color: var(--tint-fg); background: #182012; }
.vectorListSheet { display: flex; flex-direction: column; gap: var(--stack-snug); }
.vectorListMark { font-size: var(--type-size-sm); font-weight: var(--fw-mid); color: var(--tint-fg); background: var(--tint-sheet); }
.vectorListField {
    width: 100%;
    min-height: 48px;
    padding: 12px var(--stack-base);
    margin-bottom: var(--stack-tiny);
    font: inherit;
    font-size: 16px;
    color: var(--tint-fg);
    background: var(--tint-raised);
    border: 1px solid var(--tint-rule-bold);
    border-radius: var(--curve-snug);
}
.vectorListField:focus { border-color: var(--tint-prime); outline: none; }
.vectorListArea { resize: vertical; min-height: 150px; }
.vectorListSend {
    align-self: flex-start;
    min-height: 48px;
    padding: 0 var(--stack-roomy);
    border: 0;
    border-radius: var(--curve-base);
    background: var(--tint-prime);
    color: var(--tint-flare);
    font-family: var(--font-head);
    font-weight: var(--fw-strong);
    text-transform: uppercase;
    letter-spacing: var(--letter-spread);
    cursor: pointer;
    transition: transform var(--dur-snap) var(--easing-release);
}
.vectorListSend:hover { background: #7fd615; color: var(--tint-flare); transform: scale(1.025); }
.vectorListDone { padding: var(--stack-base); border-left: 4px solid var(--tint-prime); background: var(--tint-raised); color: var(--tint-fg); }
@media (max-width: 819px) {
    .vectorListHold { grid-template-columns: minmax(0, 1fr); }
    .vectorListSend { align-self: stretch; }
}

/* ==========================================================================
   Legal — LEGAL-02: numbered sections via CSS counter.
   ========================================================================== */
.boltZone { padding-block: var(--sec-y); background: var(--tint-sheet); color: var(--tint-faint); }
.boltZoneLead { margin-bottom: var(--stack-roomy); font-size: var(--type-size-h5); line-height: var(--leading-default); color: var(--tint-fg); background: var(--tint-sheet); }
.boltZoneBody { counter-reset: boltpart; }
.boltZonePart { counter-increment: boltpart; margin-bottom: var(--stack-roomy); }
.boltZoneHead { margin-bottom: var(--stack-snug); font-size: var(--type-size-display-4); color: var(--tint-fg); background: var(--tint-sheet); }
.boltZoneHead::before {
    content: counter(boltpart) ". ";
    margin-right: var(--stack-tiny);
    color: var(--tint-prime);
    font-family: var(--font-head);
    font-weight: var(--fw-strong);
}
.boltZonePara { margin-bottom: var(--stack-base); padding-left: var(--stack-base); line-height: var(--leading-open); color: var(--tint-faint); background: var(--tint-sheet); }
.boltZoneAside { margin: var(--stack-roomy) 0 var(--stack-snug); font-size: var(--type-size-display-3); color: var(--tint-fg); background: var(--tint-sheet); }
.boltZoneList { margin: 0 0 var(--stack-wide); padding-left: 1.3em; }
.boltZoneCell { margin-bottom: var(--stack-tiny); line-height: var(--leading-default); color: var(--tint-faint); }
.boltZoneCell::marker { color: var(--tint-prime); }
.boltZoneNote { padding-top: var(--stack-base); border-top: 1px solid var(--tint-divider); font-size: var(--type-size-sm); color: var(--tint-faint); background: var(--tint-sheet); }
@media (max-width: 819px) {
    .boltZonePara { padding-left: 0; }
}

/* ==========================================================================
   404 — ERR-06: bordered card.
   ========================================================================== */
.crateBody { padding-block: var(--stack-huge); background: var(--tint-sheet); color: var(--tint-fg); }
.crateBodyPlate {
    max-width: calc(var(--slim-col) + 2 * var(--stack-vast));
    margin-inline: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--stack-base);
    padding: var(--stack-vast);
    text-align: center;
    background: var(--tint-raised);
    color: var(--tint-fg);
    border: 2px solid var(--tint-prime);
    border-radius: var(--curve-wide);
    box-shadow: var(--shadow-base);
}
.crateBodyCode { font-family: var(--font-head); font-weight: var(--fw-strong); font-size: 88px; line-height: 1; color: var(--tint-prime); background: var(--tint-raised); }
.crateBodyLabel { font-size: var(--type-size-display-3); text-transform: none; color: var(--tint-fg); background: var(--tint-raised); }
.crateBodyPara { line-height: var(--leading-default); color: var(--tint-faint); background: var(--tint-raised); }
.crateBodyReturn {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--stack-roomy);
    border: 1px solid var(--tint-prime);
    border-radius: var(--curve-base);
    background: var(--tint-sheet);
    color: var(--tint-fg);
    font-family: var(--font-head);
    font-weight: var(--fw-strong);
    text-decoration: none;
    transition: transform var(--dur-snap) var(--easing-release);
}
.crateBodyReturn:hover { background: var(--tint-prime); color: var(--tint-flare); transform: scale(1.025); }
@media (max-width: 819px) {
    .crateBody { padding-block: var(--stack-vast); }
    .crateBodyPlate { padding: var(--stack-roomy) var(--stack-wide); }
    .crateBodyCode { font-size: 64px; }
}

@media (max-width: 975px) {
  .pulseTrackBar,
  .pulseTrackList,
  .pulseTrackJump,
  .pulseTrackMore { display: none !important; }
  .pulseTrackHandle { display: flex !important; }
}