/* StakeClaimer — "The Tape"
   The printed market page and the live terminal, as one system.
   Paper carries the record. Screen carries the live.

   SCOPE. Every rule in this file is scoped to [data-design="tape"], which
   render functions opt into one page at a time (see tape_page() in
   src/web_templates.py). style.css, the old system, was deleted once the last
   route moved over; the scope attribute is kept because dropping it would be a
   large mechanical rewrite for no user-visible gain. */


/* ── Fonts: self-hosted, no third-party request ─────────────
   latin + latin-ext subsets of the Google Fonts builds. Both families are
   variable, so one file per subset serves every weight. See fonts/OFL.txt. */

@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('/static/fonts/archivo-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Archivo';
    font-style: normal;
    font-weight: 100 900;
    font-stretch: 100%;
    font-display: swap;
    src: url('/static/fonts/archivo-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/static/fonts/jetbrains-mono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
        U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 100 800;
    font-display: swap;
    src: url('/static/fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
        U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
        U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── Tokens ────────────────────────────────────────────────
   23 semantic tokens. Components name roles, never colours. Dark is the
   only theme; the light palette and its toggle were removed. */

html[data-design="tape"] {
    color-scheme: dark;
    /* Stock. Neutrals sit on hue 25; saturation cut ~70% so the warmth reads without dating the page. */
    --stock: #1e1c1a;
    --stock-band: #292624;

    /* Ink */
    --ink: #f2f0ee;
    --ink-soft: #c1b9b3;
    --ink-faint: #a29890;
    --rule: #554e4a;

    /* Printed inks — not signal colors */
    --claim: #56d8a2;
    --miss: #f58a82;      /* failure and hard limits ONLY */
    /* Identity is the claim green, by choice. Aliased rather than duplicated
       so the two can be separated again by editing one line. */
    --brand: var(--claim);

    /* Screen. Every surface that IS the product.
       --screen-claim/miss/accent are sampled from the userscript's own panel
       in userscript/src/legacy-body.template.js. Keep them synchronised with
       the panel; they are not free choices. */
    --screen: #0b0806;
    --screen-ink: #f2e7e0;
    --screen-soft: #a89588;
    --screen-rule: #2b221c;
    --screen-claim: #34c38f;
    --screen-miss: #e0605f;
    --screen-accent: #dba14a;

    --measure: 31em;   /* em, not rem: a measure must scale with its own font-size */
    --gutter: clamp(1.25rem, 4vw, 3rem);
    --shell: 1180px;

    --text: 'Archivo', system-ui, sans-serif;
    --data: 'JetBrains Mono', ui-monospace, monospace;

    --fresh-wash: rgba(219, 161, 74, 0.18);
    --settle: cubic-bezier(0.19, 1, 0.22, 1);

    /* Type scale. Seven steps. Nothing computes below 12px. */
    --text-xs:   0.75rem;    /* 12px */
    --text-sm:   0.875rem;   /* 14px */
    --text-base: 1rem;       /* 16px */
    --text-lg:   1.125rem;   /* 18px */
    --text-xl:   1.5rem;     /* 24px */
    --text-2xl:  2rem;       /* 32px */
    --text-3xl:  2.6rem;     /* 41.6px — the price and h1, unchanged */

    /* Space scale. Eight steps. */
    --space-1:  0.25rem;   /*  4px */
    --space-2:  0.5rem;    /*  8px */
    --space-3:  0.75rem;   /* 12px */
    --space-4:  1rem;      /* 16px */
    --space-6:  1.5rem;    /* 24px */
    --space-8:  2rem;      /* 32px */
    --space-12: 3rem;      /* 48px */
    --space-16: 4rem;      /* 64px */
}

/* The tape is an object on the page and needs its edge stated. */
html[data-design="tape"] .tape { border-color: var(--rule); }
/* The panel is the most persuasive thing on the page and it is a dark
   object. On dark paper its own --screen-rule edge matches the page almost
   exactly (1.2:1), so it needs the page-level rule to read as an object at
   all rather than a smudge. */
html[data-design="tape"] .panel { border-color: var(--ink-faint); }


/* ── Base ─────────────────────────────────────────────────── */

html[data-design="tape"],
[data-design="tape"] *,
[data-design="tape"] *::before,
[data-design="tape"] *::after { box-sizing: border-box; }

html[data-design="tape"] {
    scroll-padding-top: var(--space-16);   /* the sticky nav must not cover an anchor target */
    scrollbar-gutter: stable;              /* short pages (Account) must not shift vs FAQ/Pricing */
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--rule) var(--stock);
    caret-color: var(--ink);
    accent-color: var(--claim);
}

[data-design="tape"] body {
    margin: 0;
    background: var(--stock);
    color: var(--ink);
    font-family: var(--text);
    font-size: var(--text-base);
    line-height: 1.55;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: antialiased;
}

/* Browser surfaces belong to the design too. */
[data-design="tape"] ::selection { background: var(--ink); color: var(--stock); }
[data-design="tape"] ::-webkit-scrollbar { width: 12px; height: 12px; }
[data-design="tape"] ::-webkit-scrollbar-track { background: var(--stock); }
[data-design="tape"] ::-webkit-scrollbar-thumb { background: var(--rule); border: 3px solid var(--stock); }
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] ::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
}

[data-design="tape"] :focus-visible {
    outline: 2px solid var(--ink);
    outline-offset: 3px;
}
/* The solid button shares --ink with the ring; give it its own so the ring
   never depends on the offset alone. */
[data-design="tape"] .btn:focus-visible { outline-color: var(--claim); outline-offset: 2px; }

[data-design="tape"] a {
    color: inherit;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: var(--ink-faint);
    transition: text-decoration-color 120ms linear;
}
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] a:hover { text-decoration-color: var(--ink); }
}

[data-design="tape"] h1,
[data-design="tape"] h2,
[data-design="tape"] h3 {
    font-weight: 800;
    letter-spacing: -0.03em;
    text-wrap: balance;
    margin: 0;
    line-height: 1.02;
}

[data-design="tape"] .shell {
    max-width: var(--shell);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Document pages: deliberate reading column, left-aligned with the shell edge
   (not centred in the shell). Outer shell stays full --shell so the left edge
   matches every other page. */
[data-design="tape"] .shell--reading > .prose {
    max-width: 46rem;
}
[data-design="tape"] .shell--reading .prose h2 {
    max-width: none; /* beat .band h2's 22ch — document titles fill the reading column */
}
[data-design="tape"] .lede > .shell--reading > * {
    max-width: 46rem;
}

[data-design="tape"] .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

[data-design="tape"] .skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 40;
    background: var(--ink);
    color: var(--stock);
    padding: var(--space-2) var(--space-4);
    font-weight: 600;
    text-decoration: none;
}
[data-design="tape"] .skip-link:focus-visible {
    left: 0;
    outline-color: var(--claim);
}

/* ── Masthead ─────────────────────────────────────────────── */

[data-design="tape"] .masthead { border-bottom: 2px solid var(--ink); }
/* The nav row follows; the masthead proper does not. A masthead is printed once. */
@media (min-width: 861px) {
    [data-design="tape"] .masthead__nav {
        position: sticky;
        top: 0;
        z-index: 20;
        background: var(--stock);
        border-bottom: 1px solid var(--rule);
    }
}

[data-design="tape"] .masthead__top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-6);
    padding-block: var(--space-4) var(--space-3);
    flex-wrap: wrap;
}

[data-design="tape"] .wordmark {
    font-size: clamp(1.5rem, 3.4vw, 2.1rem);
    font-weight: 800;
    letter-spacing: -0.045em;
    text-decoration: none;
}
[data-design="tape"] .wordmark span { color: var(--brand); }

[data-design="tape"] .masthead__nav {
    display: flex;
    gap: var(--space-6);
    padding-block: var(--space-2);
    border-top: 1px solid var(--rule);
    font-size: var(--text-sm);
    font-weight: 500;
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: wrap;
    row-gap: 0;
}
[data-design="tape"] .masthead__nav::-webkit-scrollbar { display: none; }
[data-design="tape"] .masthead__nav a { text-decoration: none; white-space: nowrap; padding-block: var(--space-2); }
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] .masthead__nav a:hover { text-decoration: underline; text-underline-offset: 0.3em; }
}
[data-design="tape"] .masthead__nav a[aria-current="page"] { border-bottom: 2px solid var(--ink); }
[data-design="tape"] .masthead__nav .nav-cta {
    margin-left: auto;
    font-weight: 700;
    background: var(--claim);
    color: var(--stock);
    padding: var(--space-2) var(--space-4);
    margin-block: var(--space-1);
    transition: transform 140ms var(--settle);
}
[data-design="tape"] .masthead__nav .nav-cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] .masthead__nav .nav-cta:hover {
        background: var(--ink);
        color: var(--stock);
        text-decoration: none;
    }
}
[data-design="tape"] .masthead__nav .nav-cta[aria-current="page"] { border-bottom: 0; }
@media (max-width: 720px) {
    [data-design="tape"] .masthead__nav .nav-cta { margin-left: 0; }
}

/* ── Index strip ─────────────────────────────────────────── */

[data-design="tape"] .index {
    border-bottom: 1px solid var(--rule);
    background: var(--stock-band);
}
[data-design="tape"] .index__row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--rule);
    /* Band is full-bleed; the figures align to the same column as the masthead. */
    max-width: var(--shell);
    margin-inline: auto;
}
[data-design="tape"] .index__row--single { grid-template-columns: 1fr; }
[data-design="tape"] .index__cell {
    background: var(--stock-band);
    padding: var(--space-4) var(--space-6);
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-1);
}
[data-design="tape"] .index__cell:first-child { padding-left: var(--gutter); }
[data-design="tape"] .index__cell:last-child { padding-right: var(--gutter); }
[data-design="tape"] .index__val {
    font-family: var(--data);
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
}
[data-design="tape"] .index__val.is-live { color: var(--claim); }
[data-design="tape"] .index__val .unit { font-size: 0.6em; font-weight: 400; color: var(--ink-soft); }
[data-design="tape"] .index__lab {
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
}

/* The uptime figure is the live proof-stat component, printed as an index
   figure. Its markup (dot, value, label) is fixed by render_uptime_card. */
[data-design="tape"] .index .proof-stat {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--space-1) var(--space-2);
    align-items: center;
    text-decoration: none;
}
[data-design="tape"] .index .proof-stat strong {
    grid-row: 1;
    grid-column: 1 / -1;
    font-family: var(--data);
    font-size: clamp(1.35rem, 3vw, 2rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--claim);
}
[data-design="tape"] .index .proof-stat .proof-status-dot {
    grid-row: 2;
    grid-column: 1;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--claim);
}
[data-design="tape"] .index .proof-stat > span:last-child {
    grid-row: 2;
    grid-column: 2;
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
/* Red is a result, not a decoration: only a monitor that is actually down.
   Keep the wording; drop it out of the figure emphasis slot so a flap reads
   as a status line rather than a headline above the h1. */
[data-design="tape"] .index .proof-stat.badge-down strong {
    font-family: var(--data);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    line-height: 1.2;
    color: var(--miss);
}
[data-design="tape"] .index .proof-stat.badge-down .proof-status-dot { background: var(--miss); }
[data-design="tape"] .index .proof-stat.badge-unknown strong { color: var(--ink-soft); }
[data-design="tape"] .index .proof-stat.badge-unknown .proof-status-dot { background: var(--ink-soft); }
/* The link-only fallback carries no measured figure, so it is not set as one. */
[data-design="tape"] .index .proof-stat:not([data-uptime-badge]) strong {
    font-family: var(--text);
    font-size: var(--text-base);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.22em;
}

/* ── Lede ─────────────────────────────────────────────────── */

[data-design="tape"] .lede { padding-block: clamp(var(--space-8), 6vw, var(--space-16)) var(--space-6); }

/* Inner pages share one title inset. Home keeps .lede--home. */
[data-design="tape"] .lede--page { padding-block: var(--space-8); }

[data-design="tape"] .lede h1 {
    font-size: clamp(2.4rem, 6.6vw, 4.4rem);
    max-width: 19ch;
}

/* Index only: the default step pushes Install below the fold on a laptop. */
[data-design="tape"] .lede--home h1 {
    font-size: clamp(1.75rem, 4vw, 3rem);
    max-width: 18ch;
}

[data-design="tape"] .lede p {
    max-width: 56ch;
    font-size: clamp(1.02rem, 1.7vw, 1.2rem);
    color: var(--ink-soft);
    margin: var(--space-4) 0 0;
}

[data-design="tape"] .actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-8); }

[data-design="tape"] .btn {
    font-family: var(--text);
    font-size: var(--text-base);
    font-weight: 600;
    padding: var(--space-3) var(--space-6);
    border: 1.5px solid var(--ink);
    background: var(--ink);
    color: var(--stock);
    text-decoration: none;
    cursor: pointer;
    transition: background 140ms var(--settle), color 140ms var(--settle), border-color 140ms var(--settle), transform 140ms var(--settle);
}
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] .btn:hover { background: transparent; color: var(--ink); }
}
[data-design="tape"] .btn:active { transform: scale(0.97); }
[data-design="tape"] .btn--ghost { background: transparent; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] .btn--ghost:hover { background: var(--ink); color: var(--stock); border-color: var(--ink); }
}
[data-design="tape"] .btn[disabled] { opacity: 0.4; pointer-events: none; }

/* ── The tape ─────────────────────────────────────────────── */

[data-design="tape"] .tape {
    background: var(--screen);
    color: var(--screen-ink);
    font-family: var(--data);
    font-size: var(--text-xs);
    border: 1px solid var(--screen);
}

[data-design="tape"] .tape__bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--screen-rule);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--screen-soft);
}

[data-design="tape"] .pip {
    width: 7px; height: 7px;
    background: var(--screen-accent);
    border-radius: 50%;
    flex: none;
}
[data-design="tape"] .pip--live { animation: sc-tape-pulse 2.6s ease-in-out infinite; }
[data-design="tape"] .pip--idle { background: var(--screen-soft); }
[data-design="tape"] .pip--down { background: var(--screen-miss); }
[data-design="tape"] .tape__bar .spacer { margin-left: auto; }

@keyframes sc-tape-pulse { 0%, 100% { opacity: 1 } 50% { opacity: 0.35 } }

[data-design="tape"] .tape__rows { margin: 0; padding: 0; list-style: none; max-height: 19rem; overflow: hidden clip; }

[data-design="tape"] .tape__row {
    display: grid;
    grid-template-columns: 4.7rem minmax(0, 1fr) 6.9rem 3.4rem;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border-bottom: 1px solid var(--screen-rule);
    align-items: center;
    white-space: nowrap;
}
/* Two-column variant: a claim/label pair with no timestamp or latency. */
[data-design="tape"] .tape__row--pair { grid-template-columns: minmax(0, 1fr) auto; }
[data-design="tape"] .tape__row:last-child { border-bottom: 0; }
[data-design="tape"] .tape__row time { color: var(--screen-soft); }
[data-design="tape"] .tape__row .code { font-weight: 700; letter-spacing: 0.01em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
[data-design="tape"] .tape__row .ms { text-align: right; color: var(--screen-soft); }
[data-design="tape"] .tape__row .verdict { display: flex; align-items: center; gap: var(--space-1); white-space: nowrap; min-width: 0; }
[data-design="tape"] .verdict--claim { color: var(--screen-claim); }
[data-design="tape"] .verdict--miss { color: var(--screen-miss); }
/* A boundary is not a failure: 'never stored' is good news. */
[data-design="tape"] .verdict--bound { color: var(--screen-soft); }
[data-design="tape"] .verdict svg { width: 11px; height: 11px; flex: none; }

/* The one authored moment: a new print lands and settles. */
[data-design="tape"] .tape__row--fresh { animation: sc-tape-print 900ms var(--settle) both; }
@keyframes sc-tape-print {
    from { opacity: 0; transform: translateY(-6px); background: var(--fresh-wash); }
    to   { opacity: 1; transform: none; background: transparent; }
}

[data-design="tape"] .tape__empty,
[data-design="tape"] .tape__error {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--screen-soft);
    font-size: var(--text-xs);
    line-height: 1.7;
}
[data-design="tape"] .tape__error { color: var(--screen-miss); }
[data-design="tape"] .tape__foot {
    padding: var(--space-2) var(--space-4);
    border-top: 1px solid var(--screen-rule);
    color: var(--screen-soft);
    font-size: var(--text-xs);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}
[data-design="tape"] .tape__foot a { color: inherit; }

/* ── The install checklist ─────────────
   Installing means leaving this page for the extension store and coming
   back, so the steps are ticked rather than merely read, and tape.js keeps
   the ticks in localStorage across that round trip.

   The boxes are real checkboxes: ticking, keyboard and the struck-through
   done state all work with scripting off. Only the counter needs JS, so it
   ships hidden and tape.js reveals it. */
[data-design="tape"] .steplist__head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 2px solid var(--ink);
}
[data-design="tape"] .steplist__count {
    margin: 0 0 0 auto;
    font-family: var(--data);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-faint);
}
[data-design="tape"] .steplist__count[data-done="all"] { color: var(--claim); }

[data-design="tape"] .steplist { list-style: none; margin: 0; padding: 0; }
[data-design="tape"] .steplist__item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    column-gap: var(--space-4);
    row-gap: var(--space-3);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--rule);
}
/* Every child is placed: left to flow, the description would fall back into
   the 32px box column and set one word per line. */
[data-design="tape"] .steplist__box { grid-column: 1; grid-row: 1; }
[data-design="tape"] .steplist__t  { grid-column: 2; grid-row: 1; }
[data-design="tape"] .steplist__d  { grid-column: 2; grid-row: 2; }

[data-design="tape"] .steplist__box {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    margin: 0;
    border: 1.5px solid var(--rule);
    background: transparent;
    cursor: pointer;
    display: grid;
    place-content: center;
    transition: background 140ms var(--settle), border-color 140ms var(--settle);
}
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] .steplist__box:hover { border-color: var(--ink); }
}
[data-design="tape"] .steplist__box:checked {
    background: var(--claim);
    border-color: var(--claim);
}
/* The tick is drawn, not a glyph, so it scales and inherits no font. */
[data-design="tape"] .steplist__box:checked::after {
    content: "";
    width: 15px;
    height: 9px;
    border-left: 2.4px solid var(--stock);
    border-bottom: 2.4px solid var(--stock);
    transform: rotate(-45deg) translate(1px, -2px);
}

[data-design="tape"] .steplist__t {
    font-size: var(--text-xl);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    max-width: var(--measure);
    cursor: pointer;
    align-self: center;
    transition: color 140ms var(--settle);
}
[data-design="tape"] .steplist__d p { margin: 0; max-width: var(--measure); color: var(--ink-soft); }
[data-design="tape"] .steplist__d p + p { margin-top: var(--space-3); }
[data-design="tape"] .steplist__a {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-4) !important;
}
[data-design="tape"] .steplist__n { font-size: var(--text-sm); color: var(--ink-faint) !important; }

/* Done: the step recedes. Buttons are left alone -- .btn sets its own
   colour, so it never inherits the grey, and forcing one here painted the
   solid button white on white. */
[data-design="tape"] .steplist__item:has(.steplist__box:checked) .steplist__t { color: var(--ink-faint); }
[data-design="tape"] .steplist__item:has(.steplist__box:checked) .steplist__d p { color: var(--ink-faint); }

@media (max-width: 620px) {
    [data-design="tape"] .steplist__item { grid-template-columns: 28px minmax(0, 1fr); column-gap: var(--space-3); }
    [data-design="tape"] .steplist__box { width: 28px; height: 28px; }
    [data-design="tape"] .steplist__a .btn { width: 100%; }
}


/* ── Install gate and phone handoff ─────────
   The product cannot be installed on a phone, and 53% of search traffic is
   mobile. Rather than show that visitor a dead button and a store link that
   cannot work, tape.js marks the document and we swap in a handoff. The
   default is the desktop state, so this stays honest with scripting off. */
[data-design="tape"] .undercta {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    margin: var(--space-3) 0 0;
}
[data-design="tape"] .handoff {
    border-top: 2px solid var(--ink);
    margin-top: var(--space-6);
    padding-top: var(--space-3);
    max-width: var(--measure);
}
[data-design="tape"] .handoff p { margin: 0 0 var(--space-3); }
[data-design="tape"] .handoff__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}
[data-design="tape"] .handoff code {
    font-family: var(--data);
    font-size: var(--text-xs);
    color: var(--ink);
    overflow-wrap: anywhere;
}
/* A phone cannot install: demote the button rather than hide it, so the
   visitor can still reach the listing and read it. */
[data-design="tape"] .no-manager [data-install-actions] .btn:not(.btn--ghost) {
    background: none;
    color: var(--ink);
    border: 1px solid var(--rule);
}

/* ── The manifest ────────────────────────────
   What the script can and cannot reach. Deliberately NOT on --screen and
   not the .tape component: .tape renders the live relay feed, and this is
   a static claim the site makes rather than a surface of the product. The
   drawn panel stays the only thing on the page that depicts the product.
   Every verdict carries full --ink: "never asked" is the best news here,
   and muting it was what made the old version argue against itself.
   Selectors carry .manifest twice on purpose: "[data-design] .lede p" is
   (0,2,1) and would otherwise win the font-size on the caps and foot. */
[data-design="tape"] .manifest {
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding-bottom: var(--space-3);
}
[data-design="tape"] .manifest .manifest__cap {
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-faint);
    margin: var(--space-6) 0 var(--space-2);
}
[data-design="tape"] .manifest .manifest__cap:first-child { margin-top: var(--space-3); }
[data-design="tape"] .manifest__rows { margin: 0; padding: 0; list-style: none; }
[data-design="tape"] .manifest .manifest__rows li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4);
    align-items: baseline;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--rule);
    font-size: var(--text-sm);
}
[data-design="tape"] .manifest__rows li:first-child { border-top: 0; }
[data-design="tape"] .manifest .manifest__v {
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink);
    white-space: nowrap;
}
[data-design="tape"] .manifest .manifest__v--yes { color: var(--claim); }
[data-design="tape"] .manifest .manifest__foot {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    margin: var(--space-4) 0 0;
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink-soft);
}


/* ── The panel, drawn to its own spec ──────────────────────
   Structure, labels and controls match the shipped panel. Its corners are
   its own: the panel is a device, and the page is paper around it.

   Do not zero these radii. They depict the shipped userscript UI (12px
   shell, 8px chips, 6px acts, 20px plan pip, 2px brand tick) and the
   caption claims fidelity to that product. Form inputs are already
   radius 0. Circles (50%) are dots, not a radius choice. */

[data-design="tape"] .panel {
    background: #14100e;
    color: var(--screen-ink);
    font-family: var(--data);
    font-size: var(--text-xs);
    border-radius: 12px;
    max-width: 420px;
    overflow: hidden;
    border: 1px solid #2a2320;
}
[data-design="tape"] .panel__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--screen-rule);
    background: rgba(52, 195, 143, 0.05);
}
[data-design="tape"] .panel__brand { display: flex; align-items: baseline; gap: var(--space-2); font-weight: 700; font-size: var(--text-sm); }
[data-design="tape"] .panel__brand i { width: 3px; height: 15px; background: var(--screen-claim); border-radius: 2px; }
[data-design="tape"] .panel__brand small { color: var(--screen-soft); font-weight: 400; }
[data-design="tape"] .panel__site { display: block; color: var(--screen-soft); font-size: var(--text-xs); margin-top: var(--space-1); }
[data-design="tape"] .panel__chips { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: var(--space-3) var(--space-4) var(--space-2); }
[data-design="tape"] .panel__chip {
    border: 1px solid var(--screen-rule); border-radius: 8px;
    padding: var(--space-2) var(--space-2); display: flex; align-items: center; gap: var(--space-2);
    letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--text-xs);
    color: var(--screen-soft);
}
[data-design="tape"] .panel__chip b { margin-left: auto; font-size: var(--text-xs); text-transform: none; letter-spacing: 0; }
[data-design="tape"] .panel__chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--screen-claim); flex: none; }
[data-design="tape"] .panel__chip[data-state="off"] .dot { background: var(--screen-soft); }
[data-design="tape"] .panel__chip[data-state="off"] b { color: var(--screen-soft); }
[data-design="tape"] .panel__chip.is-wide { grid-column: 1 / -1; }
[data-design="tape"] .panel__bar {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-2) var(--space-4); color: var(--screen-soft); font-size: var(--text-xs);
}
[data-design="tape"] .panel__bar .act {
    margin-left: 0; border: 1px solid var(--screen-rule); border-radius: 6px;
    padding: var(--space-1) var(--space-2); font-size: var(--text-xs);
}
[data-design="tape"] .panel__bar .spacer { margin-left: auto; }
[data-design="tape"] .panel__log { margin: 0 var(--space-4); padding: var(--space-2) 0; list-style: none;
    border-top: 1px solid var(--screen-rule); }
[data-design="tape"] .panel__log li { display: grid; grid-template-columns: 4.6rem 1fr; gap: var(--space-2); padding: var(--space-1) 0; }
[data-design="tape"] .panel__log time { color: var(--screen-soft); }
[data-design="tape"] .panel__log .ok { color: var(--screen-claim); }
[data-design="tape"] .panel__log .warn { color: var(--screen-accent); }
[data-design="tape"] .panel__log .info { color: #7dd3fc; }
[data-design="tape"] .panel__foot {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-3) var(--space-4); border-top: 1px solid var(--screen-rule);
}
[data-design="tape"] .panel__foot .who { font-weight: 700; font-size: var(--text-xs); }
[data-design="tape"] .panel__foot .plan {
    border: 1px solid var(--screen-rule); border-radius: 20px;
    padding: var(--space-1) var(--space-2); color: var(--screen-soft); font-size: var(--text-xs);
}
[data-design="tape"] .panel__foot .act { margin-left: auto; border: 1px solid var(--screen-rule);
    border-radius: 6px; padding: var(--space-1) var(--space-2); font-size: var(--text-xs); color: var(--screen-soft); }

/* ── The artifact and its caption ─────────────────────────── */

[data-design="tape"] .shot { margin: 0; }
[data-design="tape"] .shot img {
    display: block;
    width: 100%;
    max-width: 420px;
    height: auto;
    /* The panel is a device on paper. Its own corners are its own; the page
       adds a rule, not a shadow. */
    border: 1px solid var(--rule);
}
[data-design="tape"] .shot figcaption {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
    margin-top: var(--space-4);
    max-width: 26rem;
    line-height: 1.5;
}
[data-design="tape"] .shot figcaption b { color: var(--ink); font-weight: 600; }

/* ── Sections & rules ─────────────────────────────────────── */

[data-design="tape"] .band { padding-block: clamp(var(--space-12), 6vw, var(--space-16)); border-top: 1px solid var(--rule); }
[data-design="tape"] .band--ruled { border-top: 2px solid var(--ink); }
[data-design="tape"] .band--flush { border-top: 0; padding-top: 0; }

[data-design="tape"] .band h2 {
    font-size: clamp(1.5rem, 3vw, 2.05rem);
    max-width: 22ch;
    margin-bottom: var(--space-3);
}
[data-design="tape"] .band > .shell > p { max-width: var(--measure); color: var(--ink-soft); margin-top: 0; }

[data-design="tape"] .prose { max-width: var(--measure); }
[data-design="tape"] .prose p { margin: 0 0 var(--space-4); }
[data-design="tape"] .prose h3 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-2); letter-spacing: -0.02em; }
[data-design="tape"] .prose ul { margin: 0 0 var(--space-4); padding-left: var(--space-4); }
[data-design="tape"] .prose li { margin-bottom: var(--space-2); }
[data-design="tape"] .prose strong { font-weight: 600; }

/* ── Procedure (numbered sequence, not cards) ─────────────── */

[data-design="tape"] .procedure { margin: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--rule); }
[data-design="tape"] .procedure > div {
    display: grid;
    grid-template-columns: 3.2rem 1fr auto;
    gap: var(--space-6);
    padding: var(--space-6) 0;
    border-bottom: 1px solid var(--rule);
    align-items: start;
}
[data-design="tape"] .procedure dt {
    font-family: var(--data);
    font-size: var(--text-xs);
    color: var(--ink-faint);
    letter-spacing: 0.08em;
    padding-top: var(--space-1);
}
[data-design="tape"] .procedure dd { margin: 0; }
[data-design="tape"] .procedure dd > b { display: block; font-weight: 600; margin-bottom: var(--space-1); }
[data-design="tape"] .procedure dd span { color: var(--ink-soft); font-size: var(--text-base); display: block; max-width: var(--measure); }
[data-design="tape"] .procedure .timing {
    font-family: var(--data);
    font-size: var(--text-xs);
    color: var(--ink-soft);
    white-space: nowrap;
    padding-top: var(--space-1);
}

/* ── Tables: the record ───────────────────────────────────── */

[data-design="tape"] .table-wrap { overflow-x: auto; }

[data-design="tape"] table.record {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
[data-design="tape"] table.record caption {
    text-align: left;
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-bottom: var(--space-2);
}
[data-design="tape"] table.record th,
[data-design="tape"] table.record td {
    text-align: left;
    padding: var(--space-2) var(--space-4) var(--space-2) 0;
    border-bottom: 1px solid var(--rule);
    vertical-align: baseline;
}
[data-design="tape"] table.record thead th {
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--ink-soft);
    border-bottom: 1.5px solid var(--ink);
}
[data-design="tape"] table.record tbody th[scope="row"] { font-weight: 600; }
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] table.record tbody tr:hover { background: var(--stock-band); }
}
[data-design="tape"] table.record .num { font-family: var(--data); text-align: right; padding-right: var(--space-8); }
[data-design="tape"] table.record .tag:not(:last-child) { padding-right: var(--space-8); }
[data-design="tape"] table.record .tag {
    font-family: var(--data);
    font-size: var(--text-xs);
    font-weight: 700;
}
[data-design="tape"] .tag--claim { color: var(--claim); }
[data-design="tape"] .tag--miss { color: var(--miss); }
[data-design="tape"] .tag--none { color: var(--ink-soft); }
/* Prose in a data table still needs a measure: a 109-character line is not
   easier to read for being inside a cell. max-width on a cell is only a hint
   to the auto table algorithm, so the table itself is what gets fixed. */
[data-design="tape"] table.record--prose,
[data-design="tape"] table.record--qa { table-layout: fixed; }
[data-design="tape"] table.record--prose { max-width: 46em; }
[data-design="tape"] table.record--prose th:first-child { width: 32%; }
[data-design="tape"] table.record--qa { max-width: 54em; }
[data-design="tape"] table.record--qa th:first-child { width: 42%; }
@media (max-width: 700px) {
    /* Below this the viewport is the measure, and fixed columns only squeeze. */
    [data-design="tape"] table.record--prose,
    [data-design="tape"] table.record--qa { table-layout: auto; max-width: none; }
}

/* ── Offer panels ─────────────────────────────────────────
   Two columns, one tier each. Rows are declared on the parent and shared
   through subgrid: independent grids cannot align rows that follow a 1fr,
   because each column's slack absorbs its own height differences. */

[data-design="tape"] .offer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto 1fr auto auto;
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
}
[data-design="tape"] .offer__col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / -1;
    /* Equal optical space top and bottom; the 1px trim accounts for the top
       rule being 2px and the bottom rule 1px. */
    padding: calc(1.7rem - 1px) var(--space-6) 1.7rem;
}
[data-design="tape"] .offer__col + .offer__col { border-left: 1px solid var(--rule); }

/* Scoped to beat the h1/h2/h3 rule above, which sets margin:0, weight:800 and
   a negative letter-spacing that fights uppercase mono. */
[data-design="tape"] .offer__name {
    font-family: var(--data);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ink);
    line-height: 1.2;
    margin: 0 0 var(--space-3);
}

/* Same value as .offer__name's margin, so the selector sits with equal space
   above and below it. */
[data-design="tape"] .offer__dur { display: flex; align-items: center; margin: 0 0 var(--space-3); }
[data-design="tape"] .durations { display: flex; border: 1px solid var(--rule); width: fit-content; }
[data-design="tape"] .durations input { position: absolute; width: 1px; height: 1px; opacity: 0; }
[data-design="tape"] .durations label {
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    color: var(--ink-soft);
    border-right: 1px solid var(--rule);
    white-space: nowrap;
    min-width: 6rem;
    text-align: center;
    transition: transform 140ms var(--settle);
}
[data-design="tape"] .durations label:active { transform: scale(0.98); }
[data-design="tape"] .durations label:last-of-type { border-right: 0; }
[data-design="tape"] .durations input:checked + label { background: var(--ink); color: var(--stock); }
[data-design="tape"] .durations input:focus-visible + label { outline: 2px solid var(--claim); outline-offset: 2px; }

[data-design="tape"] .offer__price {
    font-family: var(--data);
    font-weight: 700;
    font-size: var(--text-3xl);
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
}
[data-design="tape"] .offer__price small { font-size: var(--text-base); font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
[data-design="tape"] .offer__sub {
    font-family: var(--data);
    font-size: var(--text-sm);
    color: var(--ink-soft);
    margin: var(--space-2) 0 0;
    height: 1.4rem;
    line-height: 1.4rem;
    display: flex;
    align-items: baseline;
    gap: var(--space-1);
}
[data-design="tape"] .offer__sub b { color: var(--ink); font-weight: 700; }

/* The best-rate marker sits with the number it describes, not inside the
   control — a segment is a choice, not a verdict on one. */
[data-design="tape"] .best {
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--claim);
    margin-left: var(--space-1);
}

[data-design="tape"] .ticks { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-2); align-content: start; }
[data-design="tape"] .ticks li { display: grid; grid-template-columns: 1.1rem 1fr; gap: var(--space-2); font-size: var(--text-base); line-height: 1.35; }
[data-design="tape"] .ticks li::before { content: '✓'; color: var(--claim); font-weight: 700; }
[data-design="tape"] .offer .actions { margin-top: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
[data-design="tape"] .trial-line { font-size: var(--text-sm); color: var(--ink-soft); margin: var(--space-3) 0 0; }

/* Progressive enhancement. Every quote and buy button is in the markup; with
   script we narrow to the selected plan, without it the selector is hidden and
   all of them show. Checkout never depends on JavaScript. */
[data-design="tape"].js .offer__quote,
[data-design="tape"].js .offer__buy { display: none; }
[data-design="tape"].js .offer__quote.is-on { display: block; }
[data-design="tape"].js .offer__buy.is-on { display: inline-flex; }
[data-design="tape"]:not(.js) .offer__dur { display: none; }
[data-design="tape"]:not(.js) .offer__quote + .offer__quote { margin-top: var(--space-4); }

@media (max-width: 760px) {
    /* Stacked, there is nothing to align across. Leaving grid-row: 1/-1 in
       place would pile both columns into one cell. */
    [data-design="tape"] .offer { display: block; }
    [data-design="tape"] .offer__col { display: block; grid-row: auto; grid-template-rows: none; }
    [data-design="tape"] .offer__col + .offer__col { border-left: 0; border-top: 1px solid var(--rule); }
    [data-design="tape"] .offer__col .trial-line:empty,
    [data-design="tape"] .offer__col .offer__dur:empty,
    [data-design="tape"] .offer__col .offer__sub:empty { display: none; }
}

/* ── Diagnostics ──────────────────────────────────────────
   A troubleshooting list scans as symptoms; the detail opens on demand but
   stays in the markup, so nothing is hidden from search. */

[data-design="tape"] .diag__group {
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: var(--space-8) 0 var(--space-2);
}
[data-design="tape"] .diag-list { border-top: 1px solid var(--ink); }
[data-design="tape"] .diag { border-bottom: 1px solid var(--rule); }
[data-design="tape"] .diag > summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    cursor: pointer;
    list-style: none;
}
[data-design="tape"] .diag > summary::-webkit-details-marker { display: none; }
[data-design="tape"] .diag__symptom { flex: 1; font-weight: 600; font-size: var(--text-base); }
/* The marker is the only moving part: a plain +/- rather than a chevron, to
   match a page made of rules and type. */
[data-design="tape"] .diag > summary::after {
    content: '+';
    font-family: var(--data);
    font-size: var(--text-lg);
    line-height: 1;
    color: var(--ink-soft);
}
[data-design="tape"] .diag[open] > summary::after { content: '\2212'; }
[data-design="tape"] .diag > summary:focus-visible { outline: 2px solid var(--claim); outline-offset: 2px; }
[data-design="tape"] .diag__means,
[data-design="tape"] .diag__do {
    margin: 0 0 var(--space-3);
    max-width: 60ch;
    font-size: var(--text-base);
    line-height: 1.5;
    color: var(--ink-soft);
}
[data-design="tape"] .diag__means { margin-top: calc(-1 * var(--space-1)); }
[data-design="tape"] .diag__do { color: var(--ink); padding-bottom: var(--space-2); }

@media (max-width: 560px) {
    [data-design="tape"] .diag > summary { flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
    [data-design="tape"] .diag__symptom { flex-basis: 100%; }
}

/* ── Flow: a process as a pipeline ────────────────────────
   Direction of travel left to right. Each step is tagged with whose machine
   it runs on, which is the fact the prose beneath otherwise has to argue.
   No new hue: "yours" is a filled chip and everything else is an outline, so
   the steps that touch the reader's account carry the visual weight. */

[data-design="tape"] .flow {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-top: 2px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    list-style: none;
    margin: 0;
    padding: 0;
}
[data-design="tape"] .flow__step {
    display: grid;
    grid-template-rows: auto auto 1fr auto;
    padding: var(--space-6) var(--space-6) var(--space-6);
    position: relative;
}
[data-design="tape"] .flow__step + .flow__step { border-left: 1px solid var(--rule); }
[data-design="tape"] .flow__n {
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    color: var(--ink-faint);
    margin: 0 0 var(--space-3);
}
[data-design="tape"] .flow__t {
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 0 0 var(--space-2);
}
[data-design="tape"] .flow__d { font-size: var(--text-sm); line-height: 1.45; color: var(--ink-soft); margin: 0; }
[data-design="tape"] .flow__where { margin: var(--space-4) 0 0; }
[data-design="tape"] .chip {
    display: inline-block;
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--rule);
    color: var(--ink-soft);
}
[data-design="tape"] .chip--yours { background: var(--ink); border-color: var(--ink); color: var(--stock); }

/* The link between steps: a mark sitting on the divider. */
[data-design="tape"] .flow__step + .flow__step::before {
    content: '';
    position: absolute;
    left: -4px;
    top: 1.75rem;
    width: 7px;
    height: 7px;
    background: var(--stock);
    border-top: 1px solid var(--ink);
    border-right: 1px solid var(--ink);
    transform: rotate(45deg);
}

@media (max-width: 900px) {
    [data-design="tape"] .flow { grid-template-columns: repeat(2, 1fr); }
    [data-design="tape"] .flow__step:nth-child(3) { border-left: 0; }
    [data-design="tape"] .flow__step:nth-child(n+3) { border-top: 1px solid var(--rule); }
    [data-design="tape"] .flow__step:nth-child(3)::before { display: none; }
}
@media (max-width: 560px) {
    [data-design="tape"] .flow { grid-template-columns: 1fr; }
    [data-design="tape"] .flow__step + .flow__step { border-left: 0; border-top: 1px solid var(--rule); }
    [data-design="tape"] .flow__step::before { display: none; }
}

[data-design="tape"] .plainlist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
[data-design="tape"] .plainlist li {
    /* Hanging indent, not a grid: a grid row would push any content after
       the first child into the marker column, one word per line. */
    padding-left: var(--space-6);
    text-indent: -1.5rem;
    font-size: var(--text-base);
    line-height: 1.45;
}
[data-design="tape"] .plainlist li b { font-weight: 600; }
[data-design="tape"] .plainlist li::before {
    content: '—';
    color: var(--ink-faint);
    display: inline-block;
    width: 1.5rem;
    text-indent: 0;
}


/* ── Notes / marginalia ───────────────────────────────────── */

[data-design="tape"] .callout {
    font-size: var(--text-base);
    line-height: 1.5;
    border-top: 2px solid var(--ink);
    padding-top: var(--space-3);
    margin: var(--space-6) 0;
    max-width: var(--measure);
}
[data-design="tape"] .callout b { font-weight: 700; }

[data-design="tape"] .note {
    font-size: var(--text-sm);
    color: var(--ink-soft);
    border-top: 1px solid var(--rule);
    padding-top: var(--space-3);
    margin-top: var(--space-6);
    max-width: var(--measure);
    line-height: 1.5;
}
[data-design="tape"] .note b { color: var(--ink); font-weight: 600; }
/* Printing a full URL is the anti-phishing evidence; it must still wrap. */
[data-design="tape"] .note,
[data-design="tape"] .callout { overflow-wrap: break-word; }

/* The lede sets its own paragraph type; the two tiers must not inherit it. */
[data-design="tape"] .lede .callout { font-size: var(--text-base); color: var(--ink); }
[data-design="tape"] .lede .note { font-size: var(--text-sm); color: var(--ink-soft); }

[data-design="tape"] details.reveal {
    border-top: 1px solid var(--rule);
    margin-top: var(--space-6);
}
[data-design="tape"] details.reveal summary {
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding-block: var(--space-3);
    cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] details.reveal summary:hover { color: var(--ink); }
}
[data-design="tape"] details.reveal[open] summary { color: var(--ink); }
[data-design="tape"] details.reveal ul {
    columns: 2;
    overflow-wrap: anywhere;
    column-gap: var(--space-8);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
    font-family: var(--data);
    font-size: var(--text-xs);
    color: var(--ink-soft);
}
[data-design="tape"] details.reveal li { break-inside: avoid; padding-block: var(--space-1); }
@media (max-width: 620px) {
    [data-design="tape"] details.reveal ul { columns: 1; }
}

[data-design="tape"] .stamp {
    display: inline-block;
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    border: 1px solid var(--rule);
    padding: var(--space-1) var(--space-2);
    color: var(--ink-soft);
}

/* ── Two-column split ─────────────────────────────────────── */

[data-design="tape"] .split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(var(--space-6), 4vw, var(--space-12));
    align-items: start;
}
/* Two columns on the same grid as the offer panels above, so headings and
   text line up down the page instead of drifting by a gutter. */
[data-design="tape"] .split--panelled { grid-template-columns: 1fr 1fr; gap: 0; }
[data-design="tape"] .split--panelled > .prose {
    /* The prose measure would cap each column below its own track and pull
       the right edge in; here the grid sets the width. */
    max-width: none;
    padding-inline: var(--space-6);
}
[data-design="tape"] .split--panelled .plainlist { padding-inline-start: 0; }

/* Row tracks are declared once on the split and shared down through both
   columns, so item three on the left starts level with item three on the
   right even when one of them wraps to a second line. Shorter copy alone
   only holds at the widest breakpoint. */
@supports (grid-template-rows: subgrid) {
    [data-design="tape"] .split--panelled { grid-template-rows: auto repeat(4, auto); }
    [data-design="tape"] .split--panelled > .prose {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 1 / -1;
        align-content: start;
    }
    [data-design="tape"] .split--panelled .plainlist {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: 2 / -1;
    }
}
@media (max-width: 760px) {
    /* Stacked, there is nothing to align across. */
    [data-design="tape"] .split--panelled,
    [data-design="tape"] .split--panelled > .prose,
    [data-design="tape"] .split--panelled .plainlist {
        grid-template-rows: none;
        grid-row: auto;
    }
    [data-design="tape"] .split--panelled > .prose { display: block; }
    [data-design="tape"] .split--panelled .plainlist { display: grid; }
}


/* ── Related guides ───────────────────────────────────────── */

[data-design="tape"] .related { columns: 2; column-gap: var(--space-8); margin: 0; padding: 0; list-style: none; }
[data-design="tape"] .related li { break-inside: avoid; border-bottom: 1px solid var(--rule); }
[data-design="tape"] .related a { display: block; padding-block: var(--space-2); text-decoration: none; font-size: var(--text-base); }
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] .related a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}
@media (max-width: 560px) {
    [data-design="tape"] .related { columns: 1; }
}

/* ── Footer ───────────────────────────────────────────────── */

[data-design="tape"] .foot { border-top: 2px solid var(--ink); padding-block: var(--space-8) var(--space-12); margin-top: var(--space-12); }
[data-design="tape"]:has(.close) .foot { margin-top: 0; }

/* Homepage closer — last beat before the footer. */
[data-design="tape"] .close {
    text-align: center;
    padding-block: clamp(var(--space-12), 8vw, var(--space-16));
    border-top: 1px solid var(--rule);
}
[data-design="tape"] .close h2 {
    font-size: clamp(1.75rem, 4.4vw, 2.75rem);
    max-width: 22ch;
    margin: 0 auto;
    overflow-wrap: anywhere;
}
[data-design="tape"] .close p {
    max-width: 58ch;
    margin: var(--space-3) auto 0;
    color: var(--ink-soft);
}
[data-design="tape"] .close .actions {
    justify-content: center;
}
[data-design="tape"] .foot__cols { display: flex; gap: var(--space-8); flex-wrap: wrap; justify-content: space-between; }
[data-design="tape"] .foot h2 {
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-soft);
    margin: 0 0 var(--space-2);
    font-weight: 700;
}
[data-design="tape"] .foot ul { list-style: none; margin: 0; padding: 0; font-size: var(--text-sm); }
[data-design="tape"] .foot li { margin-bottom: var(--space-1); }
[data-design="tape"] .foot li a { display: inline-block; padding-block: var(--space-2); min-height: 24px; }
[data-design="tape"] .foot a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) {
    [data-design="tape"] .foot a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
}
[data-design="tape"] .foot__legal { margin-top: var(--space-8); font-size: var(--text-xs); color: var(--ink-soft); max-width: var(--measure); }

/* ── Checkout form (re-skin; class names are load-bearing for app.js) ─ */

[data-design="tape"] .checkout-form {
    max-width: none;
}
[data-design="tape"] .checkout-pay {
    max-width: 48rem;
    margin-top: var(--space-6);
}
[data-design="tape"] .checkout-pay > label {
    display: block;
    margin: var(--space-4) 0 var(--space-2);
    font-weight: 600;
    color: var(--ink);
}
[data-design="tape"]:not(.js) .checkout-form .offer__dur {
    display: flex;
}
[data-design="tape"] .checkout-form input[type="text"],
[data-design="tape"] .checkout-form input:not([type]),
[data-design="tape"] .checkout-form input[name="stake_username"] {
    width: 100%;
    max-width: var(--measure);
    padding: var(--space-3) var(--space-3);
    font: inherit;
    color: var(--ink);
    background: var(--stock);
    border: 1.5px solid var(--ink);
    border-radius: 0;
}
[data-design="tape"] .checkout-form input[name="stake_username"]:focus {
    outline: 2px solid var(--claim);
    outline-offset: 2px;
}
[data-design="tape"] .plan-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-2);
}
[data-design="tape"] .plan-badge {
    display: block;
    min-height: 1.25rem;
    margin: 0;
    font-family: var(--data);
    font-size: var(--text-xs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.25rem;
    color: var(--ink-soft);
    white-space: nowrap;
}
[data-design="tape"] .checkout-summary {
    margin-top: var(--space-4);
    padding: var(--space-4) var(--space-4);
    border: 1px solid var(--rule);
    background: var(--stock-band);
}
[data-design="tape"] .checkout-summary-row {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    font-size: var(--text-sm);
}
[data-design="tape"] .checkout-summary-row + .checkout-summary-row {
    margin-top: var(--space-2);
}
[data-design="tape"] .checkout-confirmation-note,
[data-design="tape"] .field-help,
[data-design="tape"] .form-note,
[data-design="tape"] .muted {
    color: var(--ink-soft);
}
[data-design="tape"] .form-actions {
    margin-top: var(--space-6);
}
[data-design="tape"] .form-actions .btn {
    width: 100%;
    max-width: var(--measure);
    text-align: center;
}

[data-design="tape"] .desktop-note { display: none; }
@media (max-width: 860px) {
    /* On a phone the install action cannot succeed, so it must not lead. */
    [data-design="tape"] .lede .actions .btn:first-child { background: transparent; color: var(--ink); }
    [data-design="tape"] .desktop-note {
        display: block;
        border-top-width: 2px;
        border-top-color: var(--miss);
    }
    [data-design="tape"] .desktop-note b { color: var(--miss); }
}


/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 900px) {
    [data-design="tape"] .split { grid-template-columns: 1fr; }
    [data-design="tape"] .procedure > div { grid-template-columns: 2.6rem 1fr; }
    [data-design="tape"] .procedure .timing { grid-column: 2; padding-top: var(--space-1); }
}

@media (max-width: 560px) {
    /* Four columns do not fit a phone. The latency goes, and the verdict drops
       under the source rather than squeezing it into an ellipsis — a truncated
       "stake.com · high roll…" is exactly the detail a reader came for. */
    [data-design="tape"] .tape__row {
        grid-template-columns: 3.9rem minmax(0, 1fr);
        gap: var(--space-1) var(--space-2);
        font-size: var(--text-xs);
    }
    [data-design="tape"] .tape__row .verdict { grid-column: 2; }
    [data-design="tape"] .tape__row--pair { grid-template-columns: minmax(0, 1fr) auto; }
    [data-design="tape"] .tape__row--pair .verdict { grid-column: 2; }
    [data-design="tape"] .tape__row .ms { display: none; }
    [data-design="tape"] .masthead__top { padding-bottom: var(--space-2); }
}

@media (prefers-reduced-motion: reduce) {
    /* Keep the state change, drop the movement. A new print still arrives and is
       still marked; it simply does not slide or pulse. */
    [data-design="tape"] .pip--live { animation: none; }
    [data-design="tape"] .tape__row--fresh {
        animation: none;
        background: var(--fresh-wash);
    }
    [data-design="tape"] a,
    [data-design="tape"] .btn,
    [data-design="tape"] .nav-cta,
    [data-design="tape"] .durations label { transition-duration: 1ms; }
    [data-design="tape"] .btn:active,
    [data-design="tape"] .nav-cta:active,
    [data-design="tape"] .durations label:active { transform: none; }
}

/* -- Order / payment confirmation states (re-skin) -- */
[data-design="tape"] .status-badge {
    display: inline-block;
    padding: var(--space-1) var(--space-2);
    font-family: var(--data);
    font-size: var(--text-xs);
    font-weight: 700;
    border: 1px solid var(--rule);
    color: var(--ink-soft);
}
[data-design="tape"] .status-badge.active {
    border-color: var(--claim);
    color: var(--claim);
}
[data-design="tape"] .success-hero {
    margin: var(--space-4) 0 var(--space-4);
}
[data-design="tape"] .success-icon {
    display: inline-block;
    font-family: var(--data);
    font-weight: 700;
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    color: var(--claim);
    border-bottom: 1.5px solid var(--claim);
    margin-bottom: var(--space-2);
}
[data-design="tape"] .steps {
    margin: var(--space-4) 0;
    padding-left: var(--space-4);
}
[data-design="tape"] .steps li {
    margin-bottom: var(--space-2);
    max-width: var(--measure);
}
[data-design="tape"] .btn-secondary,
[data-design="tape"] .btn.btn-secondary {
    background: transparent;
    color: var(--ink);
}
[data-design="tape"] .btn-primary,
[data-design="tape"] .btn.btn-primary {
    /* legacy class name kept for identical link markup */
}

/* -- FAQ accordion + legacy helper blocks used on tape ports -- */
[data-design="tape"] .faq-list { margin: var(--space-6) 0; }
[data-design="tape"] .faq-item { border-bottom: 1px solid var(--rule); }
[data-design="tape"] .faq-question {
    width: 100%;
    padding: var(--space-4) var(--space-8) var(--space-4) 0;
    color: var(--ink);
    background: none;
    border: none;
    font: inherit;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    position: relative;
}
[data-design="tape"] .faq-question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-soft);
    font-family: var(--data);
}
[data-design="tape"] .faq-item.is-open .faq-question::after { content: "\2212"; }
[data-design="tape"] .faq-answer {
    display: none;
    padding: 0 0 var(--space-4);
    color: var(--ink-soft);
    font-size: var(--text-base);
    max-width: var(--measure);
}
[data-design="tape"] .faq-item.is-open .faq-answer { display: block; }
[data-design="tape"] .card {
    margin: var(--space-6) 0;
    padding: 0;
    border: 0;
    background: transparent;
}
[data-design="tape"] .card p,
[data-design="tape"] .card li {
    max-width: var(--measure);
}
/* A labeled sequence, not a paragraph. The card measure would leave the
   right half of .claim-flow empty. */
[data-design="tape"] .card .flow-steps li {
    max-width: none;
}
[data-design="tape"] .card.claim-flow > h2,
[data-design="tape"] .card.decision-path > h2 {
    max-width: none;
}
[data-design="tape"] .card h2 { margin-top: var(--space-6); }
[data-design="tape"] .check-list { margin: var(--space-2) 0 var(--space-4); padding-left: var(--space-4); }
[data-design="tape"] .check-list li { margin-bottom: var(--space-1); }
[data-design="tape"] .safety-grid {
    display: grid;
    gap: var(--space-6);
    margin: var(--space-6) 0;
}
@media (min-width: 800px) {
    [data-design="tape"] .safety-grid { grid-template-columns: 1fr 1fr; }
}
[data-design="tape"] .flow-steps { margin: var(--space-2) 0 var(--space-4); padding-left: var(--space-4); }
[data-design="tape"] .flow-steps li { margin-bottom: var(--space-3); }
[data-design="tape"] .flow-steps li span { display: block; color: var(--ink-soft); font-size: var(--text-base); }
@media (min-width: 800px) {
    [data-design="tape"] .flow-steps {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-8);
        row-gap: var(--space-4);
        padding-left: var(--space-6);
    }
    [data-design="tape"] .flow-steps li { margin-bottom: 0; }
}
[data-design="tape"] .table-scroll { overflow-x: auto; margin: var(--space-4) 0; }
[data-design="tape"] .permissions-table,
[data-design="tape"] .compare-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}
[data-design="tape"] .permissions-table th,
[data-design="tape"] .permissions-table td,
[data-design="tape"] .compare-table th,
[data-design="tape"] .compare-table td {
    border-bottom: 1px solid var(--rule);
    padding: var(--space-2) var(--space-2);
    text-align: left;
    vertical-align: top;
}
[data-design="tape"] .metadata-details { margin: var(--space-3) 0; }
[data-design="tape"] .metadata-details summary {
    cursor: pointer;
    font-weight: 600;
}
[data-design="tape"] .review-proof {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-4);
    align-items: baseline;
    margin-bottom: var(--space-3);
    font-size: var(--text-sm);
}
[data-design="tape"] .section-faq { margin: var(--space-8) 0; }
[data-design="tape"] .section-faq .eyebrow { color: var(--ink-soft); font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; }

/* -- SEO guide pages (search-entry) -- */
[data-design="tape"] .lede .eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--ink-soft);
    font-size: var(--text-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
[data-design="tape"] .trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--ink-soft);
}
[data-design="tape"] .btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-4) 0;
}
[data-design="tape"] .btn-row .btn { width: auto; max-width: none; }
[data-design="tape"] .section-cta-band {
    margin-top: var(--space-8);
    padding-top: var(--space-6);
    border-top: 1px solid var(--rule);
}
[data-design="tape"] .section-cta-band p {
    max-width: var(--measure);
}

[data-design="tape"] .lookup-form {
    max-width: var(--measure);
}
[data-design="tape"] .lookup-form label {
    display: block;
    margin: 0 0 var(--space-2);
    font-weight: 600;
}
[data-design="tape"] .lookup-form input {
    width: 100%;
    max-width: var(--measure);
    padding: var(--space-3) var(--space-3);
    font: inherit;
    color: var(--ink);
    background: var(--stock);
    border: 1.5px solid var(--ink);
    border-radius: 0;
}
[data-design="tape"] .status-badge.expired {
    border-color: var(--ink-soft);
    color: var(--ink-soft);
}