/* =====================================================================
   Golden Mister UK — palette.css
   Design tokens first (mobile-first scale, desktop overrides below),
   then reset/base, then every component in its own block.
   ===================================================================== */

/* ---- Self-hosted type: Roboto for display, Inter for running text ---- */
@font-face { font-family: "Roboto"; src: url("/glyphs/roboto-latin-500-normal.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("/glyphs/roboto-latin-700-normal.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/glyphs/inter-latin-400-normal.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/glyphs/inter-latin-400-italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/glyphs/inter-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/glyphs/inter-latin-700-normal.woff2") format("woff2"); font-weight: 700 900; font-style: normal; font-display: swap; }

/* ---- Tokens: colours (spec .final values), scale TYPO-08 mobile, SPACE-08, GEO-08, CONT-03 ---- */
:root {
    --cfq-primary: #f8c836;
    --cfq-accent: #332d48;
    --cfq-action-down: #221e2d;
    --cfq-field: #141516;
    --cfq-panel: #1c1d21;
    --cfq-type: #FFFFFF;
    --cfq-faint: #c1c1c1;
    --cfq-edge: #2f3136;
    --cfq-stroke-heavy: #4b4e57;
    --cfq-blend-a: #6c6098;
    --cfq-fade-bottom: #4c4165;
    --cfq-caution: #dc2626;
    --cfq-ink: #141516;
    --cfq-gold-soft: #2a2415;

    --cfq-title: "Roboto", "Arial Narrow", Arial, sans-serif;
    --cfq-prose: "Inter", "Segoe UI", system-ui, sans-serif;

    --z-title: 34px;
    --cfq-xl-2: 26px;
    --cfq-h3: 20px;
    --cfq-md-2: 16px;
    --cfq-minor: 14px;
    --cfq-xs-2: 12px;
    --cfq-base: 15px;
    --cfq-petite: 12px;
    --cfq-micro: 10px;

    --cfq-dense: 1.0;
    --cfq-even: 1.4;
    --cfq-relaxed: 1.6;
    --cfq-normal: 500;
    --cfq-demi: 700;
    --cfq-black: 900;
    --cfq-close: -0.02em;
    --cfq-default: 0.02em;
    --cfq-loose: 0.1em;

    --cfq-step-0: 5px;
    --cfq-step-1: 10px;
    --cfq-step-2: 15px;
    --cfq-step-3: 25px;
    --cfq-step-4: 40px;
    --cfq-step-5: 60px;
    --cfq-step-6: 90px;
    --cfq-step-7: 140px;

    --r-step-0: 1px 1px 0 0;
    --r-step-1: 2px 2px 0 0;
    --r-step-2: 6px 6px 0 0;
    --r-step-3: 12px 12px 0 0;
    --r-step-4: 20px 20px 0 0;
    --r-step-5: 26px 26px 0 0;
    --r-step-6: 32px 32px 0 0;
    --r-step-7: 40px 40px 0 0;
    --cfq-stadium: 9999px 9999px 0 0;
    --cfq-orb: 50%;

    --d-step-0: 0 -1px 0 rgba(0, 0, 0, 0.05) inset;
    --d-step-1: 0 -1px 0 rgba(0, 0, 0, 0.08) inset;
    --d-step-2: 0 2px 4px rgba(0, 0, 0, 0.18);
    --d-step-3: 0 4px 12px rgba(0, 0, 0, 0.24);
    --d-step-4: 0 10px 28px rgba(0, 0, 0, 0.32);
    --d-step-5: 0 16px 40px rgba(0, 0, 0, 0.36);
    --d-step-6: 0 22px 56px rgba(0, 0, 0, 0.4);
    --d-step-7: 0 30px 72px rgba(0, 0, 0, 0.44);

    --cfq-fast: 168ms;
    --cfq-mid: 290ms;
    --cfq-calm: 446ms;
    --cfq-settle: cubic-bezier(0.26, 0.55, 0.54, 0.96);
    --cfq-in: cubic-bezier(0.59, 0.04, 0.47, 0.9);
    --cfq-smooth: cubic-bezier(0.59, 0.04, 0.47, 0.9);
    --cfq-elastic: cubic-bezier(0.34, 0.9, 0.51, 0.95);

    --cfq-max: 1220px;
    --cfq-text: 1220px;
    --cfq-narrow: 510px;
    --cfq-edge-wide: 24px;
    --cfq-pad-md: 32px;
    --cfq-padding-mobile: 16px;
    --cfq-gutter: var(--cfq-padding-mobile);

    --cfq-thin: 1px;
    --b-base: 2px;
    --cfq-thick: 3px;

    --cfq-h-lg: 62px;
    --cfq-height-mobile: 56px;

    --cfq-sec: 40px;
    --cfq-lift: 4px;
}

/* Desktop scale (TYPO-08 desktop sizes) */
@media (min-width: 860px) {
    :root {
        --z-title: 56px;
        --cfq-xl-2: 38px;
        --cfq-h3: 24px;
        --cfq-md-2: 18px;
        --cfq-minor: 15px;
        --cfq-xs-2: 13px;
        --cfq-base: 16px;
        --cfq-petite: 13px;
        --cfq-micro: 11px;
        --cfq-gutter: var(--cfq-edge-wide);
    }
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--cfq-field);
    color: var(--cfq-type);
    font-family: var(--cfq-prose);
    font-size: var(--cfq-base);
    font-weight: 400;
    line-height: var(--cfq-relaxed);
}
.page-main { flex: 1 0 auto; display: block; }
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4, h5, h6 { overflow-wrap: anywhere; margin: 0; font-family: var(--cfq-title); }
h1, h2 { text-transform: uppercase; }
p { margin: 0 0 var(--cfq-step-2); }
a { color: var(--cfq-primary); text-underline-offset: 3px; transition: color var(--cfq-fast) var(--cfq-settle); }
a:hover { color: #ffe08a; }
ul, ol { margin: 0 0 var(--cfq-step-2); padding-inline-start: 1.3em; }
strong { font-weight: 700; }
button, input, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--cfq-primary); outline-offset: 3px; }

/* ---- Skip link + a11y ---- */
.skip-hop {
    position: absolute;
    left: var(--cfq-step-2);
    top: var(--cfq-step-1);
    z-index: 200;
    padding: var(--cfq-step-1) var(--cfq-step-2);
    background: var(--cfq-primary);
    color: var(--cfq-ink);
    font-weight: 700;
}
.skip-hop:not(:focus) { top: -200px !important; }
.skip-hop:hover { background: var(--cfq-primary); color: var(--cfq-ink); }

/* ---- Shared section frame: one width for every section ---- */
.b88, .i41, .w13, .t88, .v84, .u38, .q47, .x38, .m81, .k25 { display: block; padding-block: var(--cfq-sec); }
.b88-core { width: 100%; max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide)); margin-inline: auto; padding-inline: var(--cfq-gutter); }
.i41-core { width: 100%; max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide)); margin-inline: auto; padding-inline: var(--cfq-gutter); }
.w13-core { width: 100%; max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide)); margin-inline: auto; padding-inline: var(--cfq-gutter); }
.t88-core { width: 100%; max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide)); margin-inline: auto; padding-inline: var(--cfq-gutter); }
.v84-core { width: 100%; max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide)); margin-inline: auto; padding-inline: var(--cfq-gutter); }
.u38-core { width: 100%; max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide)); margin-inline: auto; padding-inline: var(--cfq-gutter); }
.q47-core { width: 100%; max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide)); margin-inline: auto; padding-inline: var(--cfq-gutter); }
.x38-core { width: 100%; max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide)); margin-inline: auto; padding-inline: var(--cfq-gutter); }
.m81-core { width: 100%; max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide)); margin-inline: auto; padding-inline: var(--cfq-gutter); }
.k25-core { width: 100%; max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide)); margin-inline: auto; padding-inline: var(--cfq-gutter); }

/* ---- Motion: reveal "rise" on observer (hook data-onview, state in-view) ---- */
[data-onview] { opacity: 0; transform: translateY(14px); transition: opacity var(--cfq-calm) var(--cfq-settle), transform var(--cfq-calm) var(--cfq-settle); }
[data-onview].in-view { opacity: 1; transform: none; }
.no-js [data-onview] { opacity: 1; transform: none; }

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

/* =====================================================================
   HEADER — HEAD-MIRROR: menu on the left, logo on the right.
   Knobs: height 62, static, topline active, tint hover, upper 15/600,
   bar dividers, "More" overflow, outline+solid pill buttons,
   text burger with outline frame, shadow edge, wide side padding,
   logo size L inside a circular (elliptic) frame.
   ===================================================================== */
.m53 {
    position: relative;
    z-index: 60;
    background: rgba(20, 21, 22, 0.94);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.m53-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cfq-step-1) var(--cfq-step-2);
    max-width: 1440px;
    min-height: 62px;
    margin-inline: auto;
    padding: var(--cfq-step-1) var(--cfq-gutter);
}
.m53-menu-knob {
    order: 1;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--cfq-step-2);
    border: 1px solid var(--cfq-stroke-heavy);
    border-radius: var(--r-step-2);
    background: var(--cfq-field);
    color: var(--cfq-type);
    font-family: var(--cfq-title);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: var(--cfq-loose);
    text-transform: uppercase;
    cursor: pointer;
    transition: border-color var(--cfq-fast) var(--cfq-settle);
}
.m53-menu-knob:hover { border-color: var(--cfq-primary); color: var(--cfq-type); background: var(--cfq-field); }
.m53-index { display: none; }
.m53-actions { order: 3; flex: 1 0 100%; display: flex; align-items: center; gap: var(--cfq-step-1); }
.m53-glyph {
    order: 2;
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 3px var(--cfq-step-2);
    border-radius: var(--cfq-orb);
    background: #1f1b12;
}
.m53-glyph img { height: 36px; width: auto; flex-shrink: 0; }
.m53-quiet {
    display: none;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--cfq-step-3);
    border: 1px solid var(--cfq-primary);
    border-radius: var(--cfq-stadium);
    background: var(--cfq-field);
    color: var(--cfq-primary);
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
    text-decoration: none;
    transition: border-color var(--cfq-fast) var(--cfq-settle), transform var(--cfq-fast) var(--cfq-settle);
}
.m53-quiet:hover { border-color: var(--cfq-type); color: var(--cfq-type); background: var(--cfq-field); transform: translateY(-2px); }
.m53-actions .m53-offer {
    flex: 1 1 auto;
    justify-content: center;
    min-height: 44px;
    padding-inline: var(--cfq-step-3);
    border-radius: var(--cfq-stadium);
    font-size: 14px;
    white-space: nowrap;
    text-decoration: none;
}

/* nav row */
.m53-queue { display: flex; flex-wrap: nowrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.m53-node, .m53-spill { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.m53-queue > .m53-node + .m53-node::before,
.m53-queue > .m53-node + .m53-spill::before {
    content: "";
    width: 1px;
    height: 16px;
    margin-inline: var(--cfq-step-0);
    background: var(--cfq-stroke-heavy);
}
.m53-step {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 var(--cfq-step-1);
    border-radius: var(--r-step-2);
    color: var(--cfq-type);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color var(--cfq-fast) var(--cfq-settle), color var(--cfq-fast) var(--cfq-settle);
}
.m53-step:hover { background: #26272c; color: var(--cfq-type); }
.m53-step[aria-current="page"] { box-shadow: inset 0 3px 0 var(--cfq-primary); color: var(--cfq-primary); }
.m53-more-knob {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    padding: 0 var(--cfq-step-1);
    border: 0;
    border-radius: var(--r-step-2);
    background: var(--cfq-field);
    color: var(--cfq-type);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
}
.m53-more-knob::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--cfq-fast) var(--cfq-settle); }
.m53-more-knob[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
.m53-more-knob:hover { background: #26272c; color: var(--cfq-type); }
.m53-more-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 70;
    min-width: 230px;
    margin: 0;
    padding: var(--cfq-step-1);
    list-style: none;
    background: var(--cfq-panel);
    border: 1px solid var(--cfq-edge);
    border-radius: var(--r-step-3);
    box-shadow: var(--d-step-4);
}
.m53-more-menu.is-open { display: block; }
.m53-more-menu .m53-node::before { display: none; }
.m53-more-menu .m53-step { width: 100%; background: var(--cfq-panel); }
.m53-more-menu .m53-step:hover { background: #2a2b31; color: var(--cfq-type); }

/* mobile drawer — full flat list */
.m53-drawer { display: none; background: var(--cfq-panel); border-top: 1px solid var(--cfq-edge); max-height: calc(100vh - 150px); overflow-y: auto; }
.m53-drawer.is-open { display: block; }
.m53-drawer-queue { list-style: none; margin: 0; padding: var(--cfq-step-1) var(--cfq-gutter) var(--cfq-step-3); }
.m53-drawer-node { display: block; }
.m53-drawer-step {
    display: flex;
    align-items: center;
    min-height: 48px;
    border-bottom: 1px solid var(--cfq-edge);
    color: var(--cfq-type);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--cfq-panel);
}
.m53-drawer-step:hover { color: var(--cfq-primary); background: var(--cfq-panel); }
.m53-drawer-step[aria-current="page"] { color: var(--cfq-primary); }

@media (min-width: 900px) {
    .m53-bar { flex-wrap: nowrap; padding-inline: var(--cfq-step-4); }
    .m53-menu-knob { display: none; }
    .m53-index { display: block; order: 1; flex: 1 1 auto; min-width: 0; }
    .m53-actions { order: 2; flex: 0 0 auto; }
    .m53-actions .m53-offer { flex: 0 0 auto; }
    .m53-glyph { order: 3; margin-inline-start: var(--cfq-step-1); }
    .m53-glyph img { height: 46px; }
    .m53-drawer, .m53-drawer.is-open { display: none; }
}
@media (min-width: 1200px) {
    .m53-quiet { display: inline-flex; }
}

/* ---- RG-02: band right under the header ---- */
.m53-caution { background: var(--cfq-caution); color: #FFFFFF; }
.m53-caution-run {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px var(--cfq-step-1);
    max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide));
    margin-inline: auto;
    padding: 7px var(--cfq-gutter);
    font-size: 13px;
    line-height: 1.4;
    text-align: center;
}
.m53-caution-age { padding: 1px 6px; border-radius: 4px; background: #FFFFFF; color: #a51b1b; font-weight: 800; }
.m53-caution-words { color: #FFFFFF; }
.m53-caution-help { color: #FFFFFF; text-decoration: underline; font-weight: 600; }
.m53-caution-help:hover { color: #FFFFFF; text-decoration-thickness: 2px; }

/* =====================================================================
   FOOTER — FOOT-09 wide single strip on the brand colour
   ===================================================================== */
.v26 { background: var(--cfq-primary); color: var(--cfq-ink); padding-block: var(--cfq-step-3); }
.v26-core {
    display: flex;
    flex-direction: column;
    gap: var(--cfq-step-2);
    width: 100%;
    max-width: calc(var(--cfq-max) + 2 * var(--cfq-edge-wide));
    margin-inline: auto;
    padding-inline: var(--cfq-gutter);
}
.v26-lane { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cfq-step-2) var(--cfq-step-3); }
.v26-glyph { display: inline-flex; flex-shrink: 0; }
.v26-glyph img { height: 36px; width: auto; }
.v26-index { display: block; }
.v26-queue { display: flex; flex-wrap: wrap; gap: 6px var(--cfq-step-3); list-style: none; margin: 0; padding: 0; }
.v26-node { display: block; }
.v26-step { color: var(--cfq-ink); font-size: var(--cfq-petite); font-weight: 700; letter-spacing: var(--cfq-loose); text-transform: uppercase; text-decoration: none; }
.v26-step:hover { color: var(--cfq-ink); text-decoration: underline; }
.v26-base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--cfq-step-1) var(--cfq-step-3); padding-top: var(--cfq-step-2); border-top: 1px solid rgba(20, 21, 22, 0.28); }
.v26-rules { display: block; }
.v26-queue-fine { gap: 4px var(--cfq-step-2); }
.v26-queue-fine .v26-step { font-size: var(--cfq-micro); }
.v26-copy { color: var(--cfq-ink); font-size: var(--cfq-micro); letter-spacing: var(--cfq-default); }

/* =====================================================================
   COOKIE — COOK-10 centred modal card, slides up (clip-path wipe)
   ===================================================================== */
.m28 { position: static; }
.m28[hidden] { display: none; }
.m28-scrim { position: fixed; inset: 0; z-index: 94; background: rgba(0, 0, 0, 0.45); opacity: 0; pointer-events: none; transition: opacity var(--cfq-calm) var(--cfq-settle); }
.m28-sheet {
    position: fixed;
    inset: 0;
    z-index: 95;
    width: min(480px, calc(100vw - 2 * var(--cfq-step-4)));
    height: fit-content;
    max-height: calc(100vh - 2 * var(--cfq-step-3));
    margin: auto;
    overflow-y: auto;
    padding: var(--cfq-step-5);
    background: var(--cfq-panel);
    border-radius: var(--r-step-4);
    box-shadow: var(--d-step-4);
    clip-path: inset(100% 0 0 0);
    transition: clip-path var(--cfq-calm) var(--cfq-settle);
}
.m28.is-shown .m28-scrim { opacity: 1; }
.m28.is-shown .m28-sheet { clip-path: inset(0 0 0 0); }
.m28-head { margin-bottom: var(--cfq-step-1); font-family: var(--cfq-title); font-size: var(--cfq-minor); font-weight: 700; letter-spacing: var(--cfq-loose); text-transform: uppercase; color: var(--cfq-primary); }
.m28-message { color: var(--cfq-faint); font-size: var(--cfq-petite); line-height: var(--cfq-even); }
.m28-actions { display: flex; flex-direction: column; gap: var(--cfq-step-1); }
.m28-grant, .m28-reject { min-height: 44px; padding: 0 var(--cfq-step-3); border-radius: var(--cfq-stadium); font-weight: 700; cursor: pointer; }
.m28-grant { border: 1px solid var(--cfq-primary); background: var(--cfq-primary); color: var(--cfq-ink); }
.m28-grant:hover { background: #ffd65c; color: var(--cfq-ink); }
.m28-reject { border: 1px solid var(--cfq-stroke-heavy); background: var(--cfq-panel); color: var(--cfq-type); }
.m28-reject:hover { border-color: var(--cfq-type); color: var(--cfq-type); background: var(--cfq-panel); }
@media (min-width: 581px) {
    .m28-actions { flex-direction: row; justify-content: flex-end; }
}
@media (max-width: 720px) {
    .m28-sheet { padding: 16px 18px !important; font-size: 13px !important; line-height: 1.35 !important; }
    .m28-message { font-size: 13px !important; line-height: 1.35 !important; margin-bottom: 10px; }
    .m28-grant, .m28-reject { padding: 8px 14px !important; font-size: 13px !important; min-height: 44px !important; }
}

/* =====================================================================
   Shared section headings
   ===================================================================== */
.t88-head, .w13-head, .u38-head {
    margin-bottom: var(--cfq-step-3);
    font-size: var(--cfq-xl-2);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: var(--cfq-close);
    color: var(--cfq-type);
}

/* =====================================================================
   HERO — HERO-02 split, photo on the right
   ===================================================================== */
.b88 { background: linear-gradient(160deg, var(--cfq-field) 0%, #1a1726 100%); }
.b88-core { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cfq-step-4); align-items: center; }
.b88-words { min-width: 0; }
.b88-eyebrow {
    display: block;
    margin-bottom: var(--cfq-step-2);
    font-family: var(--cfq-prose);
    font-size: var(--cfq-petite);
    font-weight: 700;
    letter-spacing: var(--cfq-loose);
    text-transform: uppercase;
    color: var(--cfq-primary);
}
.b88-title { font-size: var(--z-title); font-weight: 900; line-height: 1.02; letter-spacing: var(--cfq-close); color: var(--cfq-type); }
.b88-lead { max-width: var(--cfq-narrow); margin: var(--cfq-step-3) 0 0; font-size: var(--cfq-minor); line-height: var(--cfq-even); color: var(--cfq-faint); }
.b88-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cfq-step-2); margin-top: var(--cfq-step-4); }
.b88-actions .b88-go {
    min-height: 52px;
    padding-inline: var(--cfq-step-4);
    border-radius: var(--r-step-3);
    font-family: var(--cfq-title);
    font-weight: 700;
    letter-spacing: var(--cfq-loose);
    text-transform: uppercase;
    text-decoration: none;
}
.b88-alt {
    display: inline-flex;
    align-items: center;
    min-height: 52px;
    padding-inline: var(--cfq-step-4);
    border: 1px solid var(--cfq-faint);
    border-radius: var(--r-step-3);
    background: var(--cfq-field);
    color: var(--cfq-type);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--cfq-fast) var(--cfq-settle), transform var(--cfq-fast) var(--cfq-settle);
}
.b88-alt:hover { border-color: var(--cfq-type); color: var(--cfq-type); background: var(--cfq-field); transform: translateY(-4px); }
.b88-terms { display: block; margin-top: var(--cfq-step-2); font-size: var(--cfq-micro); color: var(--cfq-faint); letter-spacing: var(--cfq-default); }
.b88-figure { margin: 0; height: 280px; border-radius: var(--r-step-4); overflow: hidden; box-shadow: var(--d-step-4); }
.b88-figure img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--cfq-calm) var(--cfq-settle); }
.b88-figure:hover img { transform: scale(1.03); }
@keyframes cfq-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.b88-words > .b88-eyebrow, .b88-words > .b88-title, .b88-words > .b88-lead { animation: cfq-rise var(--cfq-calm) var(--cfq-settle) both; }
.b88-words > .b88-title { animation-delay: 60ms; }
.b88-words > .b88-lead { animation-delay: 120ms; }
@media (min-width: 860px) {
    .b88-core { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); min-height: 480px; gap: var(--cfq-step-5); }
    .b88-figure { height: auto; aspect-ratio: 4 / 5; max-height: 600px; }
}

/* =====================================================================
   REVIEWS — REV-06 compact list with inline ratings
   ===================================================================== */
.t88-score { margin-bottom: var(--cfq-step-1); color: var(--cfq-faint); font-size: var(--cfq-petite); }
.t88-score strong { color: var(--cfq-primary); }
.t88-queue { list-style: none; margin: 0; padding: 0; }
.t88-node { padding-block: var(--cfq-step-3); border-bottom: 1px solid #25262a; }
.t88-file { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--cfq-step-2); }
.t88-person { font-size: var(--cfq-base); font-weight: 700; color: var(--cfq-type); }
.t88-rate { font-weight: 700; color: var(--cfq-primary); }
.t88-stamp { margin-inline-start: auto; font-size: var(--cfq-petite); color: var(--cfq-faint); }
.t88-words { margin: var(--cfq-step-1) 0 0; font-size: var(--cfq-base); line-height: var(--cfq-even); color: var(--cfq-type); }
.t88-plug { padding-block: var(--cfq-step-3); border-bottom: 1px solid #25262a; }

/* ---- inline offer plugs (inside reviews, prose, grid) ---- */
.t88-offerline, .v84-plug {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cfq-step-1) var(--cfq-step-3);
    padding: var(--cfq-step-3);
    background: var(--cfq-accent);
    border-radius: var(--r-step-3);
    box-shadow: inset 0 3px 0 var(--cfq-primary);
}
.v84-plug { margin: var(--cfq-step-4) 0; }
.t88-offerline-head, .v84-plug-head {
    font-family: var(--cfq-title);
    font-size: var(--cfq-md-2);
    font-weight: 700;
    letter-spacing: var(--cfq-default);
    text-transform: uppercase;
    color: var(--cfq-type);
}
.t88-offerline .t88-offerline-go, .v84-plug .v84-plug-go { min-height: 48px; padding-inline: var(--cfq-step-3); border-radius: var(--cfq-stadium); text-decoration: none; }
.t88-offerline-terms, .v84-plug-terms { flex-basis: 100%; font-size: var(--cfq-micro); color: var(--cfq-faint); }

/* =====================================================================
   ITEMS — GRID-08 cards with a top-border accent + meaning icons
   ===================================================================== */
.w13-queue { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cfq-step-3); list-style: none; margin: 0; padding: 0; }
.w13-brick {
    position: relative;
    padding: var(--cfq-step-3);
    background: var(--cfq-panel);
    border-top: 4px solid var(--cfq-primary);
    border-radius: 0 0 12px 12px;
    box-shadow: var(--d-step-2);
    transition: opacity var(--cfq-calm) var(--cfq-settle), transform var(--cfq-mid) var(--cfq-settle), box-shadow var(--cfq-mid) var(--cfq-settle);
}
.w13-brick.in-view:hover { transform: translateY(-4px); box-shadow: var(--d-step-4); }
.w13-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-bottom: var(--cfq-step-2); border-radius: var(--r-step-2); background: var(--cfq-gold-soft); }
.w13-icon svg { width: 24px; height: 24px; fill: var(--cfq-primary); }
.w13-title { margin-bottom: var(--cfq-step-1); font-size: var(--cfq-h3); font-weight: 700; line-height: 1.2; color: var(--cfq-type); }
.w13-words { margin: 0; font-size: var(--cfq-base); line-height: var(--cfq-even); color: var(--cfq-faint); }
.w13-plug {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: var(--cfq-step-2);
    padding: var(--cfq-step-3);
    background: var(--cfq-accent);
    border-top: 4px solid var(--cfq-primary);
    border-radius: 0 0 12px 12px;
}
.w13-plug-head { font-family: var(--cfq-title); font-size: var(--cfq-h3); font-weight: 700; text-transform: uppercase; color: var(--cfq-type); }
.w13-plug .w13-go { min-height: 48px; padding-inline: var(--cfq-step-3); border-radius: var(--cfq-stadium); text-decoration: none; }
.w13-plug-terms { font-size: var(--cfq-micro); color: var(--cfq-faint); }
@media (min-width: 581px) {
    .w13-queue { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .w13-plug { grid-column: 1 / -1; }
    .w13-brick { padding: var(--cfq-step-4); }
}
@media (min-width: 1160px) {
    .w13-queue { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .w13-plug { grid-column: auto; }
}

/* =====================================================================
   PROSE — PROSE-13: thin dashed full-width line above every h2,
   compact bold heads, tight rhythm
   ===================================================================== */
.v84-part { min-width: 0; }
.v84-core h2 {
    margin: var(--cfq-step-3) 0 var(--cfq-step-2);
    padding-top: var(--cfq-step-2);
    border-top: 1px dashed var(--cfq-stroke-heavy);
    font-size: calc(var(--cfq-xl-2) * 0.72);
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: var(--cfq-close);
    color: var(--cfq-type);
}
.v84-core > .v84-part:first-child h2, .v84-core > .v84-figure + .v84-part h2 { margin-top: 0; }
.v84-core p, .v84-core li { color: #e7e7e7; line-height: var(--cfq-relaxed); }
.v84-core ul, .v84-core ol { margin-bottom: var(--cfq-step-2); }
.v84-core li { margin-bottom: var(--cfq-step-0); }
.v84-core li::marker { color: var(--cfq-primary); }
.v84-core strong { color: var(--cfq-type); }
.v84-figure { margin: 0 auto var(--cfq-step-3); border-radius: var(--r-step-3); overflow: hidden; background: var(--cfq-panel); }
.v84-wide { width: min(100%, 46rem); }
.v84-square { width: min(100%, 26rem); }
.v84-figure img { width: 100%; height: auto; }

/* =====================================================================
   CTA — CTA-10 magazine pull-quote
   ===================================================================== */
.q47 { padding-block: var(--cfq-step-5); background: linear-gradient(180deg, var(--cfq-field) 0%, #1a1629 100%); }
.q47-core { display: flex; flex-direction: column; align-items: center; text-align: center; }
.q47-kicker { font-size: var(--cfq-petite); font-weight: 700; letter-spacing: var(--cfq-loose); text-transform: uppercase; color: var(--cfq-primary); }
.q47-statement {
    max-width: min(100%, 56rem);
    margin: var(--cfq-step-2) auto var(--cfq-step-3);
    font-size: var(--z-title);
    font-style: italic;
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: var(--cfq-close);
    text-transform: none;
    color: var(--cfq-type);
}
.q47-statement::before { content: "\201C"; display: block; height: 0.55em; font-size: 1.8em; line-height: 1; color: var(--cfq-primary); }
.q47-sub { max-width: var(--cfq-narrow); margin: 0 auto; line-height: var(--cfq-relaxed); color: var(--cfq-faint); }
.q47-core .q47-go {
    margin-top: var(--cfq-step-3);
    min-height: 52px;
    padding-inline: var(--cfq-step-4);
    border-radius: var(--cfq-stadium);
    font-family: var(--cfq-title);
    font-size: var(--cfq-minor);
    letter-spacing: var(--cfq-loose);
    text-transform: uppercase;
    text-decoration: none;
}
.q47-terms { margin-top: var(--cfq-step-2); font-size: var(--cfq-micro); color: var(--cfq-faint); }

/* =====================================================================
   FAQ — FAQ-08 bordered box with indicator bar
   ===================================================================== */
.u38-frame { padding: var(--cfq-step-2) var(--cfq-step-3); background: #19191b; border: 1px solid #2b2c30; border-radius: var(--r-step-4); }
.u38-node { position: relative; padding-left: var(--cfq-step-3); box-shadow: inset 4px 0 0 var(--cfq-blend-a); border-bottom: 1px solid #27282c; }
.u38-node:last-child { border-bottom: 0; }
.u38-ask { display: flex; align-items: center; justify-content: space-between; gap: var(--cfq-step-2); padding-block: var(--cfq-step-2); cursor: pointer; list-style: none; }
.u38-ask::-webkit-details-marker { display: none; }
.u38-q { font-size: var(--cfq-md-2); font-weight: 700; line-height: 1.3; color: var(--cfq-type); }
.u38-sign { position: relative; flex: 0 0 22px; width: 22px; height: 22px; }
.u38-sign::before, .u38-sign::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2px; margin: -1px 0 0 -7px; background: var(--cfq-primary); transition: transform var(--cfq-mid) var(--cfq-settle); }
.u38-sign::after { transform: rotate(90deg); }
.u38-node[open] .u38-sign::after { transform: rotate(0deg); }
.u38-answer { overflow: hidden; }
.u38-answer p { margin: 0; padding-bottom: var(--cfq-step-2); color: var(--cfq-faint); line-height: var(--cfq-relaxed); }
@media (min-width: 860px) {
    .u38-frame { padding: var(--cfq-step-4) var(--cfq-step-5); }
}

/* =====================================================================
   AUTHOR BYLINE — BYLINE-01 compact inline, end of article
   ===================================================================== */
.x38 { padding-block: var(--cfq-step-3); }
.x38-core { display: flex; align-items: center; gap: var(--cfq-step-2); }
.x38-portrait { display: block; flex: 0 0 48px; width: 48px; height: 48px; border-radius: var(--cfq-orb); overflow: hidden; }
.x38-portrait img { width: 48px; height: 48px; object-fit: cover; object-position: center top; }
.x38-words { min-width: 0; }
.x38-credit { font-size: var(--cfq-base); color: var(--cfq-faint); }
.x38-person { color: var(--cfq-primary); text-decoration: underline; }
.x38-hat { margin-top: var(--cfq-step-0); font-size: var(--cfq-petite); font-style: italic; color: var(--cfq-faint); }

/* ---- Offer buttons: output of scripts/cta-style.mjs (emerald, looping slide) ---- */
.toka-hit{display:inline-flex;align-items:center;justify-content:center;padding:0 var(--cfq-step-4);min-height:52px;border-radius:var(--r-step-3);border:1px solid var(--cfq-faint);font-weight:600}
.toka-hit{
  background:#059669;color:#141516;text-decoration:none;
  transition:background var(--cfq-fast) var(--cfq-settle),border-color var(--cfq-fast) var(--cfq-settle);}
.toka-hit.toka-hit{color:#141516;text-decoration:none;}
.toka-hit:hover{background:#047857;color:#FFFFFF;animation:none}
.toka-hit.toka-hit:hover{color:#FFFFFF;text-decoration:none}
.toka-hit:hover::after{animation:none}
.toka-hit:active{background:#065F46;color:#FFFFFF}
.toka-hit:focus-visible{outline:3px solid #FFFFFF;outline-offset:3px}
@keyframes toka-beat{0%{transform:translateX(0)}18.750%{transform:translateX(6px)}37.500%,100%{transform:translateX(0)}}
.toka-hit{animation:toka-beat 1.2s var(--cfq-smooth) infinite}
@media (prefers-reduced-motion:reduce){.toka-hit,.toka-hit::after{animation:none!important;transition:none!important}}
.toka-hit { border-color: #047857; }

/* =====================================================================
   PAGE HEADER — PHEAD-02 compact centred
   ===================================================================== */
.i41 { padding-block: var(--cfq-step-5) var(--cfq-sec); background: var(--cfq-field); }
.i41-core { display: flex; flex-direction: column; align-items: center; text-align: center; }
.i41-title { font-size: var(--z-title); font-weight: 900; line-height: 1.04; letter-spacing: var(--cfq-close); color: var(--cfq-type); animation: cfq-rise var(--cfq-calm) var(--cfq-settle) both; }
.i41-rule { display: block; width: 64px; height: 3px; margin: var(--cfq-step-3) auto 0; background: var(--cfq-primary); }
.i41-lead { max-width: var(--cfq-narrow); margin: var(--cfq-step-3) auto 0; font-size: var(--cfq-minor); line-height: var(--cfq-even); color: var(--cfq-faint); }
.i41-meta { margin-top: var(--cfq-step-2); font-size: var(--cfq-petite); color: var(--cfq-faint); }

/* =====================================================================
   LEGAL — LEGAL-03 two columns with a sticky table of contents
   ===================================================================== */
.m81-core { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--cfq-step-4); }
.m81-toc { align-self: start; padding: var(--cfq-step-3); background: var(--cfq-panel); border-radius: var(--r-step-3); font-size: var(--cfq-petite); }
.m81-toc-head { margin-bottom: var(--cfq-step-1); font-family: var(--cfq-title); font-weight: 700; letter-spacing: var(--cfq-loose); text-transform: uppercase; color: var(--cfq-primary); }
.m81-toc-queue { margin: 0; padding-inline-start: 1.2em; }
.m81-toc-queue li { margin-bottom: var(--cfq-step-0); color: var(--cfq-faint); }
.m81-toc-step { color: var(--cfq-faint); text-decoration: none; }
.m81-toc-step:hover { color: var(--cfq-primary); }
.m81-content { min-width: 0; }
.m81-part { scroll-margin-top: var(--cfq-step-3); }
.m81-part h2 {
    margin: var(--cfq-step-4) 0 var(--cfq-step-2);
    padding-top: var(--cfq-step-2);
    border-top: 1px dashed var(--cfq-stroke-heavy);
    font-size: calc(var(--cfq-xl-2) * 0.72);
    font-weight: 900;
    line-height: 1.15;
    color: var(--cfq-type);
}
.m81-part:first-child h2 { margin-top: 0; }
.m81-part p, .m81-part li { color: #e7e7e7; }
.m81-note { margin-top: var(--cfq-step-4); padding: var(--cfq-step-3); background: var(--cfq-panel); border-radius: var(--r-step-3); font-size: var(--cfq-petite); color: var(--cfq-faint); }
@media (min-width: 860px) {
    .m81-core { grid-template-columns: 240px minmax(0, 1fr); gap: var(--cfq-step-6); }
    .m81-toc { position: sticky; top: var(--cfq-step-5); }
}

/* =====================================================================
   AUTHOR — AUTH-08 minimal avatar + name, articles list
   ===================================================================== */
.r49 { display: inline-flex; align-items: center; gap: var(--cfq-step-2); margin-top: var(--cfq-step-3); padding: var(--cfq-step-1) var(--cfq-step-3) var(--cfq-step-1) var(--cfq-step-1); background: var(--cfq-panel); border-radius: 999px; text-align: left; }
.r49-portrait { flex: 0 0 40px; width: 40px; height: 40px; border-radius: var(--cfq-orb); object-fit: cover; object-position: center top; }
.r49-words { display: flex; flex-direction: column; }
.r49-person { font-size: var(--cfq-base); font-weight: 700; color: var(--cfq-type); }
.r49-hat { font-size: var(--cfq-micro); color: var(--cfq-faint); }
.r49-articles { margin-top: var(--cfq-step-4); padding: var(--cfq-step-3); background: var(--cfq-panel); border-radius: var(--r-step-3); }
.v84-core .r49-articles-head { margin-top: 0; }
.r49-articles-queue { list-style: none; margin: 0; padding: 0; }
.r49-articles-node { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px var(--cfq-step-2); padding-block: var(--cfq-step-1); border-bottom: 1px solid var(--cfq-edge); }
.r49-articles-node:last-child { border-bottom: 0; }
.r49-articles-stamp { font-size: var(--cfq-petite); color: var(--cfq-faint); }

/* =====================================================================
   CONTACT FORM — FORM-03 compact, one field per row
   ===================================================================== */
.j47 { margin-top: var(--cfq-step-4); padding-block: var(--cfq-step-3); }
.v84-core .j47-head { margin-top: 0; }
.j47-intro { max-width: 540px; color: var(--cfq-faint); }
.j47-form { display: flex; flex-direction: column; gap: var(--cfq-step-2); }
.j47-file { display: flex; flex-direction: column; gap: var(--cfq-step-0); }
.j47-caption { font-size: var(--cfq-petite); font-weight: 600; color: var(--cfq-type); }
.j47-box { width: 100%; min-height: 48px; padding: var(--cfq-step-1) var(--cfq-step-2); border: 1px solid var(--cfq-stroke-heavy); border-radius: var(--r-step-2); background: var(--cfq-panel); color: var(--cfq-type); }
.j47-box:focus { border-color: var(--cfq-primary); outline: none; }
.j47-area { min-height: 140px; resize: vertical; }
.j47-send { width: 100%; height: 52px; border: 0; border-radius: var(--cfq-stadium); background: var(--cfq-primary); color: var(--cfq-ink); font-weight: 700; letter-spacing: var(--cfq-default); cursor: pointer; transition: transform var(--cfq-fast) var(--cfq-settle); }
.j47-send:hover { background: #ffd65c; color: var(--cfq-ink); transform: translateY(-4px); }
.j47-done { padding: var(--cfq-step-2); background: var(--cfq-panel); border-radius: var(--r-step-2); color: var(--cfq-primary); }

/* =====================================================================
   404 — ERR-05 glitch
   ===================================================================== */
.k25 { padding-block: var(--cfq-step-6); }
.k25-core { display: flex; flex-direction: column; align-items: center; text-align: center; }
.k25-code { font-family: var(--cfq-title); font-size: clamp(88px, 22vw, 180px); font-weight: 900; line-height: 1; color: var(--cfq-blend-a); letter-spacing: var(--cfq-close); }
.k25-title { position: relative; max-width: var(--cfq-narrow); margin-top: var(--cfq-step-2); font-size: var(--cfq-xl-2); font-weight: 900; line-height: 1.1; color: var(--cfq-type); }
.k25-title::before, .k25-title::after { content: attr(data-text); position: absolute; inset: 0; color: var(--cfq-primary); opacity: 0.6; pointer-events: none; }
.k25-title::before { transform: translate(2px, -2px); clip-path: inset(0 0 55% 0); }
.k25-title::after { transform: translate(-2px, 2px); color: var(--cfq-blend-a); clip-path: inset(55% 0 0 0); }
.k25-words { max-width: var(--cfq-narrow); margin: var(--cfq-step-3) auto 0; color: var(--cfq-faint); }
.k25-return { display: inline-flex; align-items: center; min-height: 48px; margin-top: var(--cfq-step-3); padding-inline: var(--cfq-step-4); border: 1px solid var(--cfq-primary); border-radius: var(--cfq-stadium); background: var(--cfq-field); color: var(--cfq-primary); font-weight: 700; text-decoration: none; }
.k25-return:hover { border-color: var(--cfq-type); color: var(--cfq-type); background: var(--cfq-field); }

@media (max-width: 935px) {
  .m53-quiet { display: none !important; }
  .m53-menu-knob { display: flex !important; }
}