/* =========================================================
   NEON TOKYO THEME
   Neon night city. Deep indigo and near-black, magenta and cyan
   glow, one loud button.

   Written MOBILE FIRST. The base rules below ARE the phone layout.
   Desktop is added at the bottom with min-width queries.

   The 15 colours below are the whole skin. data/site.json holds the
   same 15 names for every preset and its copy wins over this file,
   so these values are only the fallback if the inline block is
   missing. Change the preset in site.json, not here.
   ========================================================= */

:root {
    --nt-bg:        #07040F;  /* the page. near-black indigo, like a night sky over a city */
    --nt-bg-alt:    #0C0719;  /* the top bar and the footer band, one step lighter */
    --nt-panel:     #150C2B;  /* the bottom of a ranked row card */
    --nt-panel-hi:  #211547;  /* the top of a ranked row card, so the card looks lit from above */
    --nt-line:      #3A2870;  /* every normal border and divider */
    --nt-text:      #F6F1FF;  /* headings and any text that must shout */
    --nt-body:      #CFC5EE;  /* ordinary reading text */
    --nt-muted:     #AFA3D4;  /* small labels and quiet notes */
    --nt-magenta:   #FF2E9A;  /* neon glow number one. DECORATION ONLY, never a button */
    --nt-cyan:      #2BE9F2;  /* neon glow number two. DECORATION ONLY, never a button */
    --nt-fig:       #FFFFFF;  /* the offer wording, the loudest text in a row */
    --nt-hl:        #6CF3FA;  /* the money figure inside the offer wording */
    --nt-cta:       #FFE24B;  /* THE BUTTON. This colour is used for nothing else, ever */
    --nt-cta-hover: #FFF08A;  /* the button when a mouse is over it */
    --nt-cta-ink:   #100A22;  /* the words inside the button */

    --curve-l: 16px;          /* row card corners */
    --curve-s: 9px;           /* small box corners */
    --shell: 1180px;          /* widest the page ever gets */
    --read: 880px;            /* reading column for long text */

    --font-display: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
    --font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, system-ui, sans-serif;
    --font-num: ui-monospace, SFMono-Regular, Menlo, Consolas, "Noto Sans JP", monospace;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: var(--nt-bg);
    color: var(--nt-body);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.9;
    -webkit-font-smoothing: antialiased;
}

/* the lit-up ground. Two soft neon washes, fixed, never animated, so it
   costs nothing to scroll and it never sits behind small body copy. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(58rem 34rem at 6% -8%, color-mix(in srgb, var(--nt-magenta) 26%, transparent) 0, transparent 70%),
        radial-gradient(52rem 32rem at 104% 12%, color-mix(in srgb, var(--nt-cyan) 20%, transparent) 0, transparent 70%),
        linear-gradient(180deg, var(--nt-bg-alt) 0, var(--nt-bg) 46%, var(--nt-bg) 100%);
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--nt-text);
    font-weight: 800;
    line-height: 1.45;
    /* Japanese must not break in the middle of a word. keep-all does that. */
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-wrap: balance;
}

:focus-visible { outline: 2px solid var(--nt-cyan); outline-offset: 3px; }

.wrap { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 1rem; }

.sr {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
    position: absolute; left: -9999px; top: 0; z-index: 90;
    background: var(--nt-cta); color: var(--nt-cta-ink);
    padding: .6rem 1rem; font-weight: 700; border-radius: 0 0 var(--curve-s) 0;
}
.skip:focus { left: 0; }

/* ---------- top bar ---------- */
.bar {
    position: sticky; top: 0; z-index: 40;
    background: linear-gradient(180deg, var(--nt-bg-alt) 0, color-mix(in srgb, var(--nt-bg-alt) 88%, transparent) 100%);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--nt-line);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--nt-magenta) 30%, transparent),
                0 10px 26px rgba(0, 0, 0, .45);
}
.bar-in {
    display: flex; align-items: center; justify-content: space-between;
    gap: .6rem; min-height: 50px; padding: .35rem 0;
}
.mark { display: flex; align-items: center; gap: .45rem; min-width: 0; }
.mark img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.mark-name {
    font-family: var(--font-display);
    font-weight: 800; font-size: .92rem; letter-spacing: .02em;
    color: var(--nt-text);
    background: linear-gradient(92deg, var(--nt-cyan) 0, var(--nt-text) 45%, var(--nt-magenta) 100%);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
    white-space: nowrap;
}
.nav { display: flex; gap: .2rem; flex: none; }
.nav-a {
    font-size: .78rem; font-weight: 700; line-height: 1;
    padding: .5rem .6rem; border-radius: 999px;
    color: var(--nt-body); border: 1px solid transparent;
}
.nav-a.is-here {
    color: var(--nt-text);
    border-color: var(--nt-line);
    background: color-mix(in srgb, var(--nt-cyan) 10%, transparent);
}

/* ---------- hero. Kept deliberately short: the ranked list has to start
              above the fold on a 390 x 844 phone. ---------- */
.hero {
    max-width: var(--read); margin: 0 auto;
    padding: .6rem 0 .1rem; text-align: center;
}
.eyebrow {
    margin: 0 0 .3rem;
    font-size: .64rem; font-weight: 700; letter-spacing: .22em;
    color: var(--nt-cyan);
}
.hero h1 {
    margin: 0;
    font-size: 1.42rem;
    text-shadow: 0 0 22px color-mix(in srgb, var(--nt-magenta) 38%, transparent);
}
.neon-rule {
    display: block; width: 5.5rem; height: 3px; margin: .42rem auto .38rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nt-cyan), var(--nt-magenta), var(--nt-cyan));
    background-size: 200% 100%;
    box-shadow: 0 0 14px color-mix(in srgb, var(--nt-magenta) 55%, transparent);
}
.stamp { margin: 0; font-size: .72rem; color: var(--nt-muted); }
.stamp time { font-family: var(--font-num); font-variant-numeric: tabular-nums; }

.stats {
    display: flex; justify-content: center; align-items: stretch;
    gap: 0; margin: .5rem 0 .45rem;
}
.stat {
    display: flex; flex-direction: column; align-items: center; gap: 0;
    padding: 0 .75rem; line-height: 1.35;
}
.stat + .stat { border-left: 1px solid var(--nt-line); }
.stat b {
    font-family: var(--font-display); font-weight: 800; font-size: 1.02rem;
    color: var(--nt-hl); font-variant-numeric: tabular-nums;
}
.stat span { font-size: .62rem; color: var(--nt-muted); }

/* the intro is clipped to a couple of lines and opened by a label tied to a
   hidden checkbox. No script anywhere. */
.lede-toggle, .more-toggle {
    position: absolute; opacity: 0; width: 1px; height: 1px;
    margin: 0; pointer-events: none;
}
.lede {
    margin: 0; text-align: left; font-size: .84rem; line-height: 1.9;
    color: var(--nt-body);
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
    overflow: hidden;
    word-break: normal; overflow-wrap: anywhere; line-break: strict;
}
.lede-toggle:checked ~ .lede { display: block; overflow: visible; }
.lede-btn {
    display: inline-block; margin: .3rem 0 0; cursor: pointer;
    font-size: .74rem; font-weight: 700; color: var(--nt-cyan);
    border-bottom: 1px dotted color-mix(in srgb, var(--nt-cyan) 60%, transparent);
}
.lede-btn .l-off { display: none; }
.lede-toggle:checked ~ .lede-btn .l-on { display: none; }
.lede-toggle:checked ~ .lede-btn .l-off { display: inline; }
.lede-toggle:focus-visible ~ .lede-btn { outline: 2px solid var(--nt-cyan); outline-offset: 3px; }

/* ---------- section headings ---------- */
.hd {
    display: flex; align-items: center; gap: .55rem;
    margin: 1.1rem 0 .2rem; font-size: 1.14rem;
}
.hd::before {
    content: ""; flex: none; width: 4px; height: 1.15em; border-radius: 2px;
    background: linear-gradient(180deg, var(--nt-cyan), var(--nt-magenta));
    box-shadow: 0 0 10px color-mix(in srgb, var(--nt-magenta) 60%, transparent);
}

/* ---------- the ranked list ---------- */
.rows { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .8rem; }

.row {
    position: relative;
    display: grid; gap: .42rem; justify-items: center; text-align: center;
    padding: .95rem .85rem .9rem;
    background: linear-gradient(168deg, var(--nt-panel-hi) 0, var(--nt-panel) 64%);
    border: 1px solid var(--nt-line);
    border-radius: var(--curve-l);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 10px 26px rgba(0, 0, 0, .5);
    /* nothing is allowed to bleed out of a card, so the page can never
       scroll sideways because of a badge */
    overflow: hidden;
}
.row.is-extra { display: none; }
.more-toggle:checked ~ .rows .row.is-extra { display: grid; }
.more-toggle:checked ~ .more-wrap { display: none; }

/* the lit left edge on every row */
.strip {
    position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
    background: linear-gradient(180deg, var(--nt-cyan), var(--nt-magenta));
    opacity: .5;
}
.row.is-lead .strip { opacity: 1; box-shadow: 0 0 12px color-mix(in srgb, var(--nt-magenta) 70%, transparent); }

/* the winner gets a gradient edge instead of a flat border. Drawn with a
   mask so it is a real 1px edge, not a fat glowing halo that eats the text. */
.row.is-lead {
    border-color: transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08),
                0 14px 40px color-mix(in srgb, var(--nt-magenta) 22%, transparent),
                0 10px 26px rgba(0, 0, 0, .55);
}
.row.is-lead::before {
    content: ""; position: absolute; inset: 0; z-index: 1;
    border-radius: inherit; padding: 1px; pointer-events: none;
    background: linear-gradient(115deg, var(--nt-magenta), var(--nt-cyan), var(--nt-magenta));
    background-size: 220% 100%;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

/* rank chip. Neon violet, never gold, because gold is the button's colour. */
.rank {
    position: absolute; top: .95rem; left: .7rem; z-index: 3;
    width: 2.3rem; height: 2.3rem; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-display); font-weight: 800; font-size: .95rem;
    line-height: 1; color: var(--nt-text);
    font-variant-numeric: tabular-nums;
    background: linear-gradient(160deg, var(--nt-panel-hi), var(--nt-bg-alt));
    border: 1px solid var(--nt-line);
}
.rank.is-top {
    border-color: var(--nt-cyan);
    box-shadow: 0 0 12px color-mix(in srgb, var(--nt-cyan) 40%, transparent);
}
.rank.is-first {
    width: 2.5rem; height: 2.5rem; font-size: 1.05rem;
    border-color: var(--nt-magenta);
    box-shadow: 0 0 16px color-mix(in srgb, var(--nt-magenta) 55%, transparent);
}
.rank .crown {
    position: absolute; top: -.72rem; left: 50%; transform: translateX(-50%);
    width: 26px; height: 18px; color: var(--nt-magenta);
    filter: drop-shadow(0 0 6px color-mix(in srgb, var(--nt-magenta) 70%, transparent));
}
.rank .spark {
    position: absolute; top: -.42rem; left: 50%;
    transform: translate(-50%, -50%);
    width: 2.6rem; height: 2.6rem; border-radius: 50%; opacity: .45;
    background: radial-gradient(circle, color-mix(in srgb, var(--nt-magenta) 60%, transparent) 0, transparent 62%);
}

/* vertical ribbon, the Japanese shelf-tag shape. Drawn in CSS, no image. */
.ribbon {
    position: absolute; top: 0; right: .85rem; z-index: 3;
    writing-mode: vertical-rl;
    font-family: var(--font-display); font-weight: 800;
    font-size: .66rem; letter-spacing: .1em; line-height: 1;
    color: var(--nt-fig);
    background: linear-gradient(180deg, var(--nt-magenta) 0, color-mix(in srgb, var(--nt-magenta) 55%, var(--nt-bg)) 100%);
    padding: .5rem .32rem 1rem;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - .48rem), 50% 100%, 0 calc(100% - .48rem));
}

/* one logo box, one size, every row. The picture is contained inside it, so
   two rows can never sit differently. */
.logo {
    width: 9.5rem; aspect-ratio: 160 / 60; flex: none;
    display: grid; place-items: center; padding: .3rem; overflow: hidden;
    background: rgba(255, 255, 255, .035);
    border: 1px solid var(--nt-line); border-radius: var(--curve-s);
}
.logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logo-fb { font-size: .72rem; font-weight: 700; color: var(--nt-text); text-align: center; }

.brand {
    font-family: var(--font-display); font-weight: 800; font-size: .92rem;
    color: var(--nt-text); line-height: 1.4;
    /* keep-all stops Japanese breaking in the middle of a word. anywhere is
       the escape hatch: without it a Japanese sentence counts as one giant
       unbreakable word and pushes the page sideways. */
    word-break: keep-all; overflow-wrap: anywhere;
}

/* rating bar. A track, a fill, a number. No stars, no icon font. */
.rate { display: inline-flex; align-items: center; gap: .45rem; }
.rate-track {
    width: 5.2rem; height: .4rem; border-radius: 999px; overflow: hidden;
    background: rgba(255, 255, 255, .11);
}
.rate-fill {
    display: block; height: 100%; width: var(--w);
    background: linear-gradient(90deg, var(--nt-cyan), var(--nt-magenta));
    box-shadow: 0 0 8px color-mix(in srgb, var(--nt-cyan) 60%, transparent);
}
.rate-num {
    font-family: var(--font-num); font-size: .85rem; font-weight: 700;
    color: var(--nt-text); font-variant-numeric: tabular-nums;
}

/* the offer. The loudest TEXT in the row. */
.offer { display: flex; flex-direction: column; align-items: center; gap: .1rem; width: 100%; }
.lbl { font-size: .64rem; font-weight: 700; letter-spacing: .12em; color: var(--nt-muted); }
/* The offer figure. The box reserves a fixed number of lines so every row is
   the same height. The wording lives in ONE inner block: if the text sat
   directly in the flex box, each run would become its own flex item and
   Japanese would wrap one character per line. */
.fig {
    display: flex; align-items: center; justify-content: center;
    width: 100%; overflow: hidden;
    font-size: 1.3rem;
    /* THREE lines reserved, fixed not minimum, so every row is exactly as
       tall as every other row whatever the wording is. */
    height: 4.35em;
}
.fig-in {
    display: block; width: 100%;
    font-family: var(--font-display); font-weight: 800;
    font-size: 1em; line-height: 1.45; color: var(--nt-fig);
    text-align: center;
    /* keep-all holds Japanese words together. anywhere is the escape hatch
       for a run too long to fit at all. */
    word-break: keep-all; overflow-wrap: anywhere;
}
.fig .hl {
    font-size: 1.5rem; color: var(--nt-hl); font-weight: 800;
    font-variant-numeric: tabular-nums; padding: 0 .06em;
    text-shadow: 0 0 16px color-mix(in srgb, var(--nt-hl) 45%, transparent);
}

/* the spec rows. Same three lines on every row, so no ragged edges. */
.specs {
    display: grid; gap: .26rem; width: 100%; margin: .05rem 0;
    padding: .45rem 0; font-size: .76rem;
    border-top: 1px dashed var(--nt-line);
    border-bottom: 1px dashed var(--nt-line);
}
.spec { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; }
.spec dt { color: var(--nt-muted); white-space: nowrap; }
.spec dd {
    margin: 0; font-weight: 700; color: var(--nt-body);
    font-family: var(--font-num); font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* THE BUTTON. Solid fill, its own colour, biggest block in the row.
   Nothing decorative is allowed to fill this loudly. */
.act {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    width: 100%; margin-top: auto;
}
.cta {
    display: flex; align-items: center; justify-content: center;
    width: min(17rem, 100%); min-height: 52px; padding: .7rem 1rem;
    border-radius: 999px; white-space: nowrap;
    background: var(--nt-cta); color: var(--nt-cta-ink);
    font-family: var(--font-body); font-weight: 900; font-size: 1.06rem;
    letter-spacing: .01em; line-height: 1.2;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55),
                0 8px 22px color-mix(in srgb, var(--nt-cta) 30%, transparent);
}
.cta:hover, .cta:focus-visible { background: var(--nt-cta-hover); }
.terms { font-size: .63rem; color: var(--nt-muted); line-height: 1.5; }

/* show the rest. Outlined on purpose: it must never compete with a CTA. */
.more-wrap { margin: .9rem 0 0; }
.more-btn {
    display: flex; align-items: center; justify-content: center;
    width: min(20rem, 100%); margin: 0 auto; min-height: 46px;
    border-radius: 999px; cursor: pointer;
    border: 1px solid var(--nt-line);
    background: rgba(255, 255, 255, .04);
    color: var(--nt-text); font-weight: 700; font-size: .88rem;
}
.more-btn:hover { border-color: var(--nt-cyan); }
.more-toggle:focus-visible ~ .more-wrap .more-btn { outline: 2px solid var(--nt-cyan); outline-offset: 3px; }

/* ---------- long copy ---------- */
.prose {
    max-width: var(--read); margin: 2rem auto 0;
    font-size: .88rem; line-height: 1.95; color: var(--nt-body);
    word-break: normal; overflow-wrap: anywhere; line-break: strict;
}
.prose h2 { margin: 1.8rem 0 .5rem; font-size: 1.12rem; }
.prose h3 { margin: 1.4rem 0 .35rem; font-size: 1rem; color: var(--nt-hl); }
.prose p { margin: 0 0 .85rem; }
.prose strong { color: var(--nt-text); }
.prose a { color: var(--nt-hl); border-bottom: 1px solid color-mix(in srgb, var(--nt-hl) 45%, transparent); }
.prose ol { margin: 0 0 .9rem; padding-left: 1.4rem; }
.prose ol li { margin: 0 0 .4rem; }
.prose .marks { list-style: none; margin: 0 0 .9rem; padding: 0; }
.prose .marks li { position: relative; padding-left: 1.15rem; margin: 0 0 .4rem; }
.prose .marks li::before {
    content: ""; position: absolute; left: 0; top: .82em;
    width: .42rem; height: .42rem; border-radius: 1px;
    transform: rotate(45deg);
    background: linear-gradient(135deg, var(--nt-cyan), var(--nt-magenta));
}
.prose .note {
    font-size: .8rem; color: var(--nt-muted);
    border-left: 2px solid var(--nt-line);
    background: rgba(255, 255, 255, .03);
    border-radius: 0 var(--curve-s) var(--curve-s) 0;
    padding: .6rem .8rem; margin: 0 0 .9rem;
}
.prose .rule { border: 0; border-top: 1px solid var(--nt-line); margin: 1.6rem 0; }

/* ---------- table. Only the table scrolls sideways, never the page. ---------- */
.table-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid var(--nt-line); border-radius: var(--curve-s);
    background: var(--nt-panel); margin: 1.1rem 0;
}
.table-scroll table { border-collapse: collapse; width: 100%; min-width: 40rem; font-size: .8rem; }
.table-scroll th {
    background: linear-gradient(180deg, var(--nt-panel-hi), var(--nt-panel));
    color: var(--nt-text); font-family: var(--font-display); font-weight: 800;
    font-size: .72rem; text-align: left; white-space: nowrap;
    padding: .6rem; border-bottom: 1px solid var(--nt-line);
}
.table-scroll td {
    padding: .55rem .6rem; color: var(--nt-body);
    border-bottom: 1px solid rgba(255, 255, 255, .06);
    line-height: 1.6;
}
.table-scroll tbody tr:last-child td { border-bottom: 0; }
.table-scroll td.num {
    font-family: var(--font-num); font-variant-numeric: tabular-nums;
    white-space: nowrap; color: var(--nt-text); font-weight: 700;
}

/* ---------- FAQ. The browser's own dropdown, so it works with scripts off. ---------- */
.faq { max-width: var(--read); margin: .8rem auto 0; display: grid; gap: .5rem; }
.qa {
    background: linear-gradient(168deg, var(--nt-panel-hi), var(--nt-panel));
    border: 1px solid var(--nt-line); border-radius: var(--curve-s);
    padding: .7rem .85rem;
}
.qa[open] { border-color: color-mix(in srgb, var(--nt-cyan) 55%, var(--nt-line)); }
.qa summary {
    display: flex; align-items: flex-start; gap: .55rem; cursor: pointer;
    list-style: none;
    font-family: var(--font-display); font-weight: 800; font-size: .9rem;
    line-height: 1.6; color: var(--nt-text);
    /* a Japanese question is one long run with no spaces. It MUST be allowed
       to break, or the whole page scrolls sideways. */
    word-break: normal; overflow-wrap: anywhere; line-break: strict;
    min-width: 0;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::before {
    content: "Q"; flex: none;
    width: 1.4rem; height: 1.4rem; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--font-body); font-size: .74rem; font-weight: 900;
    color: var(--nt-cta-ink);
    background: linear-gradient(160deg, var(--nt-cyan), var(--nt-magenta));
}
.qa-a { margin: .55rem 0 0; padding-left: 1.95rem; font-size: .84rem; color: var(--nt-body); }

/* ---------- footer ---------- */
.foot {
    margin-top: 2.6rem; padding: 1.4rem 0 2.2rem;
    background: var(--nt-bg-alt);
    border-top: 1px solid var(--nt-line);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--nt-cyan) 25%, transparent);
    font-size: .78rem; color: var(--nt-muted);
}
.foot-links { display: flex; flex-wrap: wrap; gap: .3rem .9rem; margin-bottom: .8rem; }
.foot-links a { color: var(--nt-hl); font-weight: 700; }
.foot-text p { margin: 0 0 .5rem; line-height: 1.85; }
.foot-age {
    display: inline-block; margin: .4rem 0 .5rem;
    border: 1px solid var(--nt-line); border-radius: 999px;
    padding: .1rem .6rem; font-weight: 800; font-size: .72rem;
    color: var(--nt-text);
}
.foot-copy { font-size: .72rem; }

/* =========================================================
   DESKTOP. Everything above is the phone. This is the add-on.
   ========================================================= */
@media (min-width: 46rem) {
    .wrap { padding: 0 1.25rem; }
    .hero { padding: 1.4rem 0 .3rem; }
    .hero h1 { font-size: 2rem; }
    .lede { font-size: .88rem; -webkit-line-clamp: 3; }
    .stat b { font-size: 1.2rem; }
    .stat span { font-size: .68rem; }
    .hd { font-size: 1.3rem; margin-top: 1.9rem; }
    .prose { font-size: .92rem; }
    .prose h2 { font-size: 1.28rem; }
}

@media (min-width: 64rem) {
    .hero h1 { font-size: 2.3rem; }

    /* five fixed lanes. Same widths on every row, so nothing is ragged and
       every button is exactly as wide as every other button. */
    .row {
        grid-template-columns: 10rem minmax(0, 1fr) 11.5rem 14rem;
        grid-template-rows: auto auto auto;
        gap: .25rem 1.15rem;
        justify-items: start; text-align: left; align-items: center;
        padding: 1.15rem 1.2rem 1.15rem 5.4rem;
    }
    .row > .logo   { grid-column: 1; grid-row: 1 / 4; align-self: center; width: 10rem; }
    .row > .brand  { grid-column: 2; grid-row: 1; align-self: end; }
    .row > .rate   { grid-column: 2; grid-row: 2; }
    .row > .offer  { grid-column: 2; grid-row: 3; align-items: flex-start; align-self: start; }
    .row > .specs  { grid-column: 3; grid-row: 1 / 4; align-self: center; width: 100%;
                     border: 0; border-left: 1px dashed var(--nt-line);
                     border-right: 1px dashed var(--nt-line);
                     padding: .35rem 1.1rem; margin: 0; }
    .row > .act    { grid-column: 4; grid-row: 1 / 4; align-self: center; margin-top: 0; }

    /* still three reserved lines, so nothing is ever cropped and every row
       is the same height. The text is centred inside the reserved box. */
    .fig { justify-content: flex-start; text-align: left; height: 4.35em; font-size: 1.36rem; }
    .fig .hl { font-size: 1.6rem; }
    .brand { font-size: 1rem; }
    .cta { width: 100%; min-height: 54px; font-size: 1.08rem; }
    .terms { text-align: center; }

    /* the left edge furniture: every row reserves the same vertical pill, and
       the ribbon simply sits on top of it when a row has one */
    .strip {
        left: .8rem; top: .8rem; bottom: .8rem; width: 1.5rem; height: auto;
        border-radius: 999px; opacity: .22;
    }
    .row.is-lead .strip { opacity: .3; }
    .ribbon {
        top: .8rem; bottom: .8rem; right: auto; left: .8rem;
        width: 1.5rem; padding: .5rem .2rem;
        display: flex; align-items: center; justify-content: center;
        clip-path: none; border-radius: 999px;
        box-shadow: 0 0 14px color-mix(in srgb, var(--nt-magenta) 40%, transparent);
    }
    .rank { top: 50%; left: 2.75rem; transform: translateY(-50%); }
}

/* =========================================================
   MOVEMENT. Every animation lives inside this one block, so a visitor who
   asks their device to reduce motion is served a page with no animation
   declared at all, not one that is switched off afterwards.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
    .neon-rule { animation: ntGlide 9s linear infinite; }
    .row.is-lead::before { animation: ntGlide 7s linear infinite; }
    .rank.is-first .spark { animation: ntPulse 4.5s ease-in-out infinite; }
    .cta { transition: background-color .18s ease, box-shadow .18s ease; }
    .nav-a, .more-btn, .qa { transition: border-color .18s ease, color .18s ease; }
}

@keyframes ntGlide {
    from { background-position: 0 0; }
    to   { background-position: 200% 0; }
}
@keyframes ntPulse {
    0%, 100% { opacity: .3;  transform: translate(-50%, -50%) scale(.86); }
    50%      { opacity: .95; transform: translate(-50%, -50%) scale(1.14); }
}

/* belt and braces: if anything is ever added outside the block above, this
   still stops it dead. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
    html { scroll-behavior: auto !important; }
}

/* ---- china-neon BR additions: anime figure + neon hanzi backdrop ---- */
.hero.has-fig{position:relative;overflow:hidden;padding-right:clamp(0px,38%,440px);min-height:520px;isolation:isolate}
.hero.has-fig::before{content:"";position:absolute;inset:-20% -10% auto auto;width:70%;height:140%;z-index:-2;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--nt-magenta) 45%,transparent),transparent 70%),
             radial-gradient(closest-side at 70% 60%,color-mix(in srgb,var(--nt-cyan) 35%,transparent),transparent 70%);filter:blur(10px)}
.hanzi{position:absolute;right:2%;top:-4%;z-index:-1;font:900 clamp(12rem,30vw,24rem)/1 "Noto Serif SC","ZCOOL XiaoWei",serif;
  color:transparent;-webkit-text-stroke:2px var(--nt-magenta);opacity:.55;
  text-shadow:0 0 18px var(--nt-magenta),0 0 42px var(--nt-magenta),0 0 80px var(--nt-cyan);animation:flick 6s infinite}
.hero-fig{position:absolute;right:0;bottom:0;height:100%;max-height:640px;width:auto;object-fit:contain;z-index:0;
  filter:drop-shadow(0 0 22px color-mix(in srgb,var(--nt-magenta) 70%,transparent)) drop-shadow(0 0 48px color-mix(in srgb,var(--nt-cyan) 45%,transparent));
  -webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.hero.has-fig>*:not(.hero-fig):not(.hanzi){position:relative;z-index:1}
.hero.has-fig h1{text-shadow:0 0 12px var(--nt-magenta),0 0 32px color-mix(in srgb,var(--nt-magenta) 60%,transparent)}
@keyframes flick{0%,19%,21%,62%,64%,100%{opacity:.55}20%,63%{opacity:.15}}
@media (prefers-reduced-motion:reduce){.hanzi{animation:none}}
@media (max-width:760px){.hero.has-fig{padding-right:0;min-height:0;padding-bottom:300px}
  .hero-fig{height:320px;left:50%;right:auto;transform:translateX(-50%)}.hanzi{font-size:13rem;top:auto;bottom:0}}
/* BR fixes */
.logo img{width:100%;height:100%;object-fit:contain}
.cta{white-space:normal;text-align:center;font-size:.98rem}
.spec{flex-wrap:wrap}.spec dd{white-space:normal;text-align:right}
.hero-fig{mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 62% 58% at 50% 48%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 58% at 50% 48%,#000 55%,transparent 100%)}
.hanzi{opacity:.8;-webkit-text-stroke:3px var(--nt-magenta)}
@media (max-width:760px){.hero.has-fig{padding-bottom:0}
  .hero-fig{position:static;display:block;transform:none;margin:1rem auto 0;height:340px;order:9}}

/* =====================================================================
   BR LAYOUTS — body.L-<name>. Colours only from --nt-* tokens.
   Display face per layout comes from --disp (set in each block).
   ===================================================================== */
body[class^="L-"]:not(.L-base) h1,body[class^="L-"]:not(.L-base) .hd{font-family:var(--disp)}
[class^="L-"] .lede-x{color:var(--nt-body);font-size:1.02rem;line-height:1.7;max-width:68ch;margin:1.2rem 0}
[class^="L-"] .stamp{color:var(--nt-muted);font-size:.8rem}
[class^="L-"] .eyebrow{color:var(--nt-cyan)}
[class^="L-"] .cta{white-space:normal;text-align:center}
[class^="L-"] .terms{color:var(--nt-muted);font-size:.66rem;line-height:1.45}
[class^="L-"] ol{list-style:none;padding:0;margin:0}

/* 1 dragon ----------------------------------------------------------- */
.L-dragon{--disp:"Anton","Ma Shan Zheng",sans-serif}
.L-dragon .d-hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden;isolation:isolate;
  background:radial-gradient(60% 70% at 50% 40%,color-mix(in srgb,var(--nt-magenta) 45%,transparent),transparent 70%)}
.L-dragon .d-fig{position:absolute;left:50%;top:0;height:100%;width:auto;transform:translateX(-50%);z-index:-1;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(#000 55%,transparent 96%);mask-image:linear-gradient(#000 55%,transparent 96%)}
.L-dragon .d-hz{position:absolute;inset:auto 0 18% 0;text-align:center;font:400 clamp(14rem,42vw,34rem)/1 "Ma Shan Zheng",serif;color:var(--nt-magenta);opacity:.35;z-index:-2;text-shadow:0 0 60px var(--nt-magenta)}
.L-dragon .d-copy{padding-bottom:2.5rem;text-align:left}
.L-dragon h1{font-size:clamp(2.6rem,7vw,6.2rem);line-height:.95;text-transform:uppercase;letter-spacing:-.01em;color:var(--nt-text);
  text-shadow:0 0 18px var(--nt-magenta),0 0 50px var(--nt-magenta);max-width:14ch}
.L-dragon .scrolls{display:grid;gap:1.6rem;margin-top:1rem}
.L-dragon .scroll{position:relative;padding:2rem 1.6rem 1.2rem 5.5rem;background:linear-gradient(90deg,var(--nt-panel-hi),var(--nt-panel));
  border-top:6px solid var(--nt-cyan);border-bottom:6px solid var(--nt-cyan);border-radius:4px}
.L-dragon .scroll::before,.L-dragon .scroll::after{content:"";position:absolute;top:-10px;bottom:-10px;width:14px;background:var(--nt-cyan);border-radius:7px}
.L-dragon .scroll::before{left:-7px}.L-dragon .scroll::after{right:-7px}
.L-dragon .scroll-rank{position:absolute;left:1.2rem;top:1.2rem;font:400 3.4rem/1 "Ma Shan Zheng",serif;color:var(--nt-cta);text-shadow:0 0 16px var(--nt-cta)}
.L-dragon .scroll-offer{font:400 clamp(1.5rem,3.4vw,2.4rem)/1.1 var(--disp);color:var(--nt-text);margin:0 0 1rem}
.L-dragon .scroll-offer .hl{color:var(--nt-cta)}
.L-dragon .scroll-foot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.L-dragon .scroll-logo img{height:40px;width:auto}
.L-dragon .scroll-name{color:var(--nt-muted);font-weight:700;margin-right:auto}

/* 2 arcade ----------------------------------------------------------- */
.L-arcade{--disp:"Bungee",sans-serif}
.L-arcade .a-grid{display:grid;grid-template-columns:minmax(260px,32%) 1fr;gap:2.5rem;align-items:start}
.L-arcade .a-rail{position:sticky;top:4rem;height:calc(100vh - 5rem);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;
  border:3px solid var(--nt-magenta);border-radius:22px 22px 6px 6px;background:radial-gradient(circle at 50% 30%,var(--nt-panel-hi),var(--nt-bg));
  box-shadow:0 0 30px var(--nt-magenta),inset 0 0 40px color-mix(in srgb,var(--nt-cyan) 30%,transparent)}
.L-arcade .a-fig{height:88%;width:auto;align-self:center;mix-blend-mode:screen}
.L-arcade .a-hz{position:absolute;top:.6rem;left:0;right:0;text-align:center;font:900 4rem/1 "ZCOOL KuaiLe",sans-serif;color:var(--nt-cta);text-shadow:0 0 20px var(--nt-cta)}
.L-arcade .a-insert{text-align:center;font:400 .9rem var(--disp);color:var(--nt-cyan);letter-spacing:.2em;animation:blink 1.2s steps(2) infinite;margin:.6rem 0}
@keyframes blink{50%{opacity:0}}
.L-arcade h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.05;color:var(--nt-cta);text-shadow:4px 4px 0 var(--nt-magenta)}
.L-arcade .cabs{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:1.2rem}
.L-arcade .cab{display:flex;flex-direction:column;gap:.7rem;padding:.9rem;background:var(--nt-panel);border:2px solid var(--nt-line);border-radius:16px 16px 4px 4px;position:relative}
.L-arcade .cab-marq{background:var(--nt-magenta);color:var(--nt-cta-ink);border-radius:10px;text-align:center;font:400 1.6rem var(--disp);padding:.2rem}
.L-arcade .cab-marq span{font-size:.8rem}
.L-arcade .cab-screen{aspect-ratio:16/9;display:grid;place-items:center;background:var(--nt-bg);border-radius:8px;border:1px solid var(--nt-cyan);padding:.6rem}
.L-arcade .cab-screen img{max-width:100%;max-height:100%;object-fit:contain}
.L-arcade .cab-offer{font-weight:800;color:var(--nt-text);flex:1;margin:0}
.L-arcade .cab-p1{position:absolute;top:-.7rem;right:-.5rem;background:var(--nt-cyan);color:var(--nt-cta-ink);font:400 .8rem var(--disp);padding:.2rem .5rem;border-radius:6px}
@media(max-width:860px){.L-arcade .a-grid{grid-template-columns:1fr}.L-arcade .a-rail{position:relative;top:0;height:420px}}

/* 3 mahjong ---------------------------------------------------------- */
.L-mahjong{--disp:"Russo One",sans-serif}
.L-mahjong .m-hero{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1rem;min-height:440px}
.L-mahjong .m-fig{height:460px;width:auto;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 60%,transparent);mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 60%,transparent)}
.L-mahjong h1{font-size:clamp(2.2rem,5vw,4.4rem);line-height:1;color:var(--nt-text)}
.L-mahjong .tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:1.4rem}
.L-mahjong .tile{position:relative;display:grid;gap:.8rem;justify-items:center;text-align:center;padding:1.2rem 1rem 1.3rem;
  background:linear-gradient(180deg,var(--nt-text) 0 72%,var(--nt-magenta) 72% 100%);color:var(--nt-cta-ink);border-radius:18px;
  box-shadow:0 10px 0 var(--nt-panel-hi),0 12px 30px color-mix(in srgb,var(--nt-magenta) 45%,transparent)}
.L-mahjong .tile-num{font:900 5.5rem/1 "ZCOOL KuaiLe","Noto Serif SC",serif;color:var(--nt-magenta)}
.L-mahjong .tile-logo{background:var(--nt-bg);border-radius:10px;padding:.4rem .8rem;width:80%;height:58px;display:grid;place-items:center}
.L-mahjong .tile-logo img{max-height:100%;max-width:100%;object-fit:contain}
.L-mahjong .tile-offer{font-weight:800;font-size:.95rem;margin:0;min-height:2.8em}
.L-mahjong .tile-offer .hl{color:var(--nt-magenta)}
@media(max-width:760px){.L-mahjong .m-hero{grid-template-columns:1fr}.L-mahjong .m-fig{height:320px;justify-self:center}}

/* 4 podium ----------------------------------------------------------- */
.L-podium{--disp:"Cinzel Decorative",serif}
.L-podium .p-stage{position:relative;overflow:hidden;isolation:isolate;padding-top:2rem;
  background:radial-gradient(50% 60% at 50% 30%,color-mix(in srgb,var(--nt-magenta) 50%,transparent),transparent)}
.L-podium .p-fig{position:absolute;left:50%;top:-2%;height:78%;transform:translateX(-50%);z-index:-1;mix-blend-mode:screen;opacity:.9}
.L-podium .p-hz{position:absolute;right:4%;top:6%;font:900 12rem/1 "Noto Serif SC",serif;color:transparent;-webkit-text-stroke:2px var(--nt-cta);opacity:.5;z-index:-2}
.L-podium .podium{display:grid;grid-template-columns:1fr 1.15fr 1fr;align-items:end;gap:1rem;padding-top:16rem}
.L-podium .step{display:flex;flex-direction:column;align-items:center;gap:.7rem;text-align:center}
.L-podium .step-logo{background:var(--nt-panel);border:1px solid var(--nt-cta);border-radius:12px;padding:.5rem 1rem;height:64px;display:grid;place-items:center}
.L-podium .step-logo img{max-height:100%;max-width:150px;object-fit:contain}
.L-podium .step-offer{color:var(--nt-text);font-weight:800;margin:0}
.L-podium .step-block{width:100%;display:grid;place-items:center;background:linear-gradient(180deg,var(--nt-cta),color-mix(in srgb,var(--nt-cta) 40%,var(--nt-bg)));
  color:var(--nt-cta-ink);font:900 3rem/1 var(--disp);border-radius:10px 10px 0 0}
.L-podium .s1 .step-block{height:190px}.L-podium .s2 .step-block{height:130px}.L-podium .s3 .step-block{height:95px}
.L-podium h1{font-size:clamp(2rem,4.5vw,3.8rem);color:var(--nt-cta);margin-top:2.5rem;text-shadow:0 0 24px var(--nt-magenta)}
.L-podium .p-rest{width:100%;border-collapse:collapse}
.L-podium .p-rest td{padding:.8rem;border-bottom:1px solid var(--nt-line);color:var(--nt-body);vertical-align:middle}
.L-podium .p-rest img{height:36px;width:auto}
.L-podium .cta-sm{min-height:44px;font-size:.85rem;padding:.4rem .9rem}
@media(max-width:760px){.L-podium .podium{grid-template-columns:1fr;padding-top:18rem}.L-podium .s1{order:-1}.L-podium .step-block{height:56px!important}}

/* 5 board ------------------------------------------------------------ */
.L-board{--disp:"Orbitron",sans-serif}
.L-board .b-hero{position:relative;padding:3rem 0 2rem;padding-right:260px}
.L-board .b-fig{position:absolute;right:0;top:0;height:340px;width:auto;mix-blend-mode:screen;border-radius:50%;
  -webkit-mask-image:radial-gradient(circle,#000 55%,transparent 70%);mask-image:radial-gradient(circle,#000 55%,transparent 70%)}
.L-board h1{font-size:clamp(2rem,4.2vw,3.6rem);font-weight:900;color:var(--nt-cta);text-transform:uppercase;letter-spacing:.04em}
.L-board .board{background:var(--nt-bg);border:2px solid var(--nt-line);border-radius:10px;padding:.5rem;font-family:"Space Mono",monospace}
.L-board .dep{display:grid;grid-template-columns:9rem 10rem 1fr 6rem 11rem;align-items:center;gap:1rem;padding:.8rem;border-bottom:1px dashed var(--nt-line)}
.L-board .dep-head{color:var(--nt-muted);font-size:.72rem;letter-spacing:.2em}
.L-board .dep-pay{font:700 1.15rem "Space Mono",monospace;color:var(--nt-cta);background:var(--nt-panel);padding:.35rem .5rem;border-radius:4px;letter-spacing:.06em;text-align:center}
.L-board .dep-name{color:var(--nt-text);font-weight:700;text-transform:uppercase}
.L-board .dep-offer{color:var(--nt-body)}.L-board .dep-offer .hl{color:var(--nt-cyan)}
.L-board .dep-min{color:var(--nt-muted);font-variant-numeric:tabular-nums}
@media(max-width:900px){.L-board .b-hero{padding-right:0}.L-board .b-fig{position:static;display:block;margin:1rem auto;height:260px}
  .L-board .dep{grid-template-columns:1fr 1fr}.L-board .dep-head{display:none}.L-board .dep-offer{grid-column:1/-1}.L-board .dep .cta{grid-column:1/-1}}

/* 6 envelope --------------------------------------------------------- */
.L-envelope{--disp:"Black Ops One",sans-serif}
.L-envelope .e-hero{display:grid;grid-template-columns:auto 1fr;gap:2rem;align-items:center;padding:2rem 0}
.L-envelope .e-fig{height:520px;width:auto;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 60% 55%,#000 60%,transparent);mask-image:radial-gradient(ellipse 60% 55%,#000 60%,transparent)}
.L-envelope h1{font-size:clamp(2.2rem,5vw,4.2rem);line-height:1;color:var(--nt-cta);text-shadow:0 3px 0 var(--nt-magenta),0 0 30px var(--nt-magenta)}
.L-envelope .envs{display:grid;grid-template-columns:repeat(2,1fr);gap:1.6rem}
.L-envelope .env{position:relative;overflow:hidden;padding:5.5rem 1.6rem 1.6rem;border-radius:14px;text-align:center;
  background:linear-gradient(180deg,var(--nt-magenta),color-mix(in srgb,var(--nt-magenta) 55%,var(--nt-bg)));box-shadow:0 0 0 2px var(--nt-cyan) inset}
.L-envelope .env::before{content:"";position:absolute;left:-10%;right:-10%;top:-60px;height:130px;border-radius:0 0 50% 50%;background:color-mix(in srgb,var(--nt-magenta) 70%,var(--nt-bg));border-bottom:2px solid var(--nt-cyan)}
.L-envelope .env-seal{position:absolute;top:28px;left:50%;transform:translateX(-50%);background:var(--nt-cyan);border-radius:999px;padding:.5rem 1.1rem;height:58px;display:grid;place-items:center;z-index:1}
.L-envelope .env-seal img{max-height:100%;max-width:130px;object-fit:contain}
.L-envelope .env-hz{position:absolute;right:.6rem;bottom:.2rem;font:900 5rem/1 "Noto Serif SC",serif;color:var(--nt-cyan);opacity:.25}
.L-envelope .env-offer{font:400 clamp(1.4rem,2.6vw,2.1rem)/1.1 var(--disp);color:var(--nt-text);margin:1rem 0 .6rem}
.L-envelope .env-offer .hl{color:var(--nt-cta)}
.L-envelope .env-meta{color:var(--nt-text);opacity:.85;font-size:.85rem}
@media(max-width:760px){.L-envelope .e-hero{grid-template-columns:1fr}.L-envelope .e-fig{height:340px;justify-self:center}.L-envelope .envs{grid-template-columns:1fr}}

/* 7 magazine --------------------------------------------------------- */
.L-magazine{--disp:"Righteous",sans-serif}
.L-magazine .mz-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:3rem;align-items:stretch;padding:2rem 0}
.L-magazine .mz-copy{align-self:center}
.L-magazine h1{font-size:clamp(2.4rem,5vw,4.6rem);line-height:1;color:var(--nt-text)}
.L-magazine h1::first-line{font-family:"Monoton",cursive;color:var(--nt-magenta);text-shadow:0 0 20px var(--nt-magenta)}
.L-magazine .mz-figwrap{margin:0;position:relative;border-left:4px solid var(--nt-cyan);background:linear-gradient(180deg,var(--nt-panel),var(--nt-bg));display:grid;place-items:end center;overflow:hidden}
.L-magazine .mz-fig{height:560px;width:auto;mix-blend-mode:screen}
.L-magazine figcaption{position:absolute;top:.5rem;left:.8rem;font:900 5rem/1 "Noto Serif SC",serif;color:var(--nt-cyan);text-shadow:0 0 18px var(--nt-cyan)}
.L-magazine .mz-row{display:grid;grid-template-columns:12rem 1fr 11rem 3rem;align-items:center;gap:1.4rem;padding:1.2rem 0;border-top:1px solid var(--nt-line)}
.L-magazine .mz-offer{font:400 1.35rem/1.2 var(--disp);color:var(--nt-text);margin:0 0 .3rem}
.L-magazine .mz-offer .hl{color:var(--nt-magenta)}
.L-magazine .mz-logo img{height:48px;width:auto;max-width:100%;object-fit:contain}
.L-magazine .mz-n{font:400 1.6rem "Monoton",cursive;color:var(--nt-muted);text-align:right}
@media(max-width:860px){.L-magazine .mz-hero{grid-template-columns:1fr}.L-magazine .mz-fig{height:380px}
  .L-magazine .mz-row{grid-template-columns:1fr auto}.L-magazine .mz-row .cta{grid-column:1/-1;order:5}.L-magazine .mz-n{display:none}}

/* 8 strip ------------------------------------------------------------ */
.L-strip{--disp:"Rubik Mono One",sans-serif}
.L-strip .st-hero{display:grid;grid-template-columns:.9fr 1.1fr;gap:2rem;align-items:center;padding:1.5rem 0}
.L-strip .st-fig{height:540px;width:auto;justify-self:center;mix-blend-mode:screen;-webkit-mask-image:radial-gradient(ellipse 60% 55%,#000 60%,transparent);mask-image:radial-gradient(ellipse 60% 55%,#000 60%,transparent)}
.L-strip h1{font-size:clamp(1.8rem,3.8vw,3.2rem);line-height:1.1;color:var(--nt-magenta);text-shadow:0 0 14px var(--nt-magenta)}
.L-strip .st-track{display:grid;grid-auto-flow:column;grid-auto-columns:min(280px,78vw);gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:1rem max(16px,calc((100vw - var(--shell))/2)) 2rem;scrollbar-color:var(--nt-magenta) transparent}
.L-strip .st-card{scroll-snap-align:start;display:flex;flex-direction:column;gap:.8rem;padding:1.2rem;border-radius:24px;background:var(--nt-panel);
  border:2px solid var(--nt-magenta);box-shadow:0 0 22px color-mix(in srgb,var(--nt-magenta) 40%,transparent)}
.L-strip .st-rank{font:400 2.6rem/1 var(--disp);color:var(--nt-cta)}
.L-strip .st-logo{height:60px;display:grid;place-items:start}.L-strip .st-logo img{max-height:100%;max-width:100%;object-fit:contain}
.L-strip .st-offer{font-weight:800;color:var(--nt-text);flex:1;margin:0}
.L-strip .st-specs{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;font-size:.78rem;color:var(--nt-muted);margin:0}
.L-strip .st-specs dd{margin:0;color:var(--nt-body)}
@media(max-width:760px){.L-strip .st-hero{grid-template-columns:1fr}.L-strip .st-fig{height:340px}}

/* 9 terminal --------------------------------------------------------- */
.L-terminal{--disp:"Space Mono",monospace;font-family:"Space Mono",monospace}
.L-terminal .t-ghost{position:fixed;right:-4vw;bottom:0;height:92vh;width:auto;opacity:.22;mix-blend-mode:screen;pointer-events:none;z-index:0}
.L-terminal .t-wrap{position:relative;z-index:1}
.L-terminal .t-hero{padding:3rem 0 1rem;max-width:62ch}
.L-terminal .t-prompt{color:var(--nt-cyan);font-size:.9rem}
.L-terminal .t-caret{display:inline-block;width:.6em;height:1.1em;background:var(--nt-cyan);vertical-align:-.2em;margin-left:.3em;animation:blink 1s steps(2) infinite}
.L-terminal h1{font-size:clamp(1.8rem,3.6vw,3rem);font-weight:700;color:var(--nt-text);line-height:1.15}
.L-terminal .t-head,.L-terminal .t-line{display:grid;grid-template-columns:3rem 11rem 4rem 1fr 12rem;gap:1rem;align-items:center}
.L-terminal .t-head{color:var(--nt-muted);font-size:.72rem;padding:.4rem .6rem;border-bottom:1px solid var(--nt-cyan)}
.L-terminal .t-line{padding:.75rem .6rem;border-bottom:1px solid var(--nt-line);font-variant-numeric:tabular-nums}
.L-terminal .t-line:hover{background:var(--nt-panel)}
.L-terminal .t-i{color:var(--nt-muted)}.L-terminal .t-name{color:var(--nt-text);font-weight:700}.L-terminal .t-score{color:var(--nt-cyan)}
.L-terminal .t-offer{color:var(--nt-body)}.L-terminal .t-offer .hl{color:var(--nt-cta)}
.L-terminal .t-go{border-radius:2px;min-height:44px;font-family:"Space Mono",monospace}
@media(prefers-reduced-motion:reduce){.L-terminal .t-caret,.L-arcade .a-insert{animation:none}}
@media(max-width:860px){.L-terminal .t-head{display:none}.L-terminal .t-line{grid-template-columns:2.4rem 1fr 3rem}.L-terminal .t-offer,.L-terminal .t-go{grid-column:1/-1}}
.L-podium .p-fig{-webkit-mask-image:radial-gradient(ellipse 48% 50% at 50% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 48% 50% at 50% 45%,#000 55%,transparent 100%)}
/* ---- critic round 1 fixes ---- */
/* envelope: stacked centred hero, figure on top */
.L-envelope .e-hero{grid-template-columns:1fr;justify-items:center;text-align:center}
.L-envelope .e-fig{height:460px}.L-envelope .e-center .lede-x{margin-inline:auto}
/* arcade: one wide cabinet per row: screen | offer | marquee+cta */
.L-arcade .cabs{grid-template-columns:1fr}
.L-arcade .cab{display:grid;grid-template-columns:200px 1fr 150px;grid-template-rows:auto auto;align-items:center;gap:.6rem 1.2rem;border-radius:26px 6px 26px 6px}
.L-arcade .cab-screen{grid-row:1/3}.L-arcade .cab-offer{grid-row:1/3;font-size:1.15rem}
.L-arcade .cab-marq{grid-column:3}.L-arcade .cab .cta{grid-column:3}
@media(max-width:640px){.L-arcade .cab{grid-template-columns:1fr 1fr}.L-arcade .cab-screen,.L-arcade .cab-offer{grid-row:auto;grid-column:1/-1}.L-arcade .cab-marq{grid-column:1}.L-arcade .cab .cta{grid-column:2}}
/* strip: band hero + offer-only cards */
.L-strip .st-hero{display:none}
.L-strip .st-band{position:relative;overflow:hidden;min-height:620px;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--nt-bg-alt),var(--nt-panel-hi));border-bottom:4px solid var(--nt-magenta)}
.L-strip .st-copy{padding-top:2.5rem;text-align:center;position:relative;z-index:1}
.L-strip .st-copy h1{max-width:20ch;margin-inline:auto}
.L-strip .st-fig{position:absolute;left:50%;bottom:-38%;transform:translateX(-50%);height:115%;width:auto;mix-blend-mode:screen;opacity:.95;
  -webkit-mask-image:radial-gradient(ellipse 55% 60% at 50% 40%,#000 55%,transparent);mask-image:radial-gradient(ellipse 55% 60% at 50% 40%,#000 55%,transparent)}
.L-strip .st-card{position:relative;min-height:320px;justify-content:space-between;background:linear-gradient(160deg,var(--nt-panel-hi),var(--nt-bg))}
.L-strip .st-logo{height:34px}.L-strip .st-offer{font:400 1.45rem/1.15 var(--disp);color:var(--nt-text)}
.L-strip .st-offer .hl{color:var(--nt-magenta)}
.L-strip .st-rank{position:absolute;right:.8rem;top:.4rem;font:400 3.2rem/1 var(--disp);color:var(--nt-cyan);opacity:.35}
@media(max-width:760px){.L-strip .st-band{min-height:560px}.L-strip .st-fig{height:90%;bottom:-30%}}
/* terminal: stacked log */
.L-terminal .t-log{display:grid;gap:1.1rem;border-left:2px solid var(--nt-cyan);padding-left:1.2rem}
.L-terminal .t-entry{padding:.4rem 0 1rem;border-bottom:1px dashed var(--nt-line)}
.L-terminal .t-cmd{color:var(--nt-muted);margin:0 0 .4rem;font-size:.86rem;word-break:break-word}
.L-terminal .t-ps{color:var(--nt-cta)}.L-terminal .t-score{color:var(--nt-cyan)}
.L-terminal .t-out{color:var(--nt-text);font-size:1.1rem;margin:0 0 .7rem}.L-terminal .t-out .hl{color:var(--nt-cta)}
.L-terminal .t-go{width:auto;display:inline-flex;padding:.5rem 1.2rem}
.L-terminal .t-go::before{content:"[ENTER] ";opacity:.7}

/* ---- critic round 1: access ---- */
/* mask-image #000 values below/above are alpha masks, not visible colour (token-audit exempt) */
.L-mahjong .tile-num{color:var(--nt-cta-ink);text-shadow:3px 3px 0 var(--nt-magenta)}
.L-mahjong .tile-offer .hl{color:var(--nt-cta-ink);text-decoration:underline;text-decoration-color:var(--nt-magenta);text-decoration-thickness:3px}
.L-envelope .env-meta{opacity:1}
.cta:focus-visible{outline:3px solid var(--nt-text);outline-offset:3px}
.L-strip .st-track:focus-visible{outline:2px solid var(--nt-cyan);outline-offset:-4px}
/* ---- critic round 1: craft ---- */
.bar-in{gap:.8rem}.mark{min-width:0;flex:1 1 auto}.mark-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav{flex:none}
.L-strip .st-track{padding-inline:max(16px,calc((100vw - var(--shell))/2 + 16px));scroll-padding-inline:max(16px,calc((100vw - var(--shell))/2 + 16px));
  -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
.L-strip .st-logo,.L-arcade .cab-screen,.L-mahjong .tile-logo,.L-podium .step-logo,.L-envelope .env-seal{background:var(--nt-fig)}
.L-terminal .t-ghost{right:0;max-width:48vw;object-fit:contain;object-position:right bottom}
.L-magazine h1::first-line{font-family:inherit;color:inherit;text-shadow:none}
.L-magazine h1{text-shadow:0 0 22px var(--nt-magenta)}
.L-magazine figcaption{top:auto;bottom:.6rem;left:auto;right:.8rem}
.L-arcade .a-hz{top:auto;bottom:3.2rem;font-size:2.6rem}
.L-arcade .hd{margin-bottom:1.6rem}
.L-mahjong .tile-num{font-size:4.5rem;min-height:4.5rem}
.L-podium .step-block b{font-family:"Noto Sans",sans-serif}
.L-podium .podium{padding-top:22rem}.L-podium .p-fig{height:60%}
.L-podium .step-offer{background:color-mix(in srgb,var(--nt-bg) 80%,transparent);padding:.3rem .6rem;border-radius:6px}
.L-board .dep-pay{font-size:.9rem;white-space:nowrap}
@media(max-width:760px){.wrap{padding-inline:16px}
  .L-dragon .d-hero{min-height:0;flex-direction:column;align-items:stretch}
  .L-dragon .d-fig{position:static;transform:none;height:420px;margin:0 auto;display:block}
  .L-dragon .d-hz{bottom:auto;top:10%}
  .L-mahjong .m-fig{height:320px;display:block}}
/* ---- critic round 2 fixes ---- */
.L-arcade .cab{grid-template-columns:5rem 1fr 13rem;grid-template-rows:auto}
.L-arcade .cab-coin{grid-row:auto;width:4.4rem;height:4.4rem;border-radius:50%;display:grid;place-items:center;font:400 1.5rem var(--disp);
  background:var(--nt-cta);color:var(--nt-cta-ink);box-shadow:0 0 0 4px var(--nt-magenta),0 0 24px var(--nt-cta)}
.L-arcade .cab-body{display:grid;gap:.4rem}
.L-arcade .cab-marq{grid-column:auto;background:var(--nt-fig);border-radius:8px;height:38px;width:130px;display:grid;place-items:center;padding:.2rem .5rem}
.L-arcade .cab-marq img{max-height:100%;max-width:100%;object-fit:contain}
.L-arcade .cab-offer{grid-row:auto;font:400 1.1rem/1.25 var(--disp);color:var(--nt-text)}
.L-arcade .cab .cta{grid-column:auto}
@media(max-width:640px){.L-arcade .cab{grid-template-columns:4.4rem 1fr}.L-arcade .cab .cta{grid-column:1/-1}}
.L-strip .hd.wrap{padding-inline:max(16px,calc((100vw - var(--shell))/2 + 16px));max-width:none}
.L-strip .st-logo{height:40px;width:130px;border-radius:8px;padding:.3rem .5rem;flex:none}
.L-strip .st-card{gap:1rem}
.L-strip .st-fig{bottom:-62%;height:120%}
.L-strip .st-copy h1{text-shadow:0 0 14px var(--nt-bg),0 0 30px var(--nt-bg),0 0 14px var(--nt-magenta)}
.L-podium .podium,.L-podium .p-label{max-width:var(--shell);margin-inline:auto;box-sizing:border-box}
.L-podium .p-label{font:900 1rem var(--disp);color:var(--nt-cta);letter-spacing:.3em;text-transform:uppercase;padding-top:20rem;margin-bottom:.6rem}
.L-podium .podium{padding-top:0}
.L-podium .p-rest td:nth-child(2) img,.L-magazine .mz-logo img{background:var(--nt-fig);border-radius:8px;padding:.3rem .6rem;box-sizing:content-box}
.L-board .dep{grid-template-columns:9rem 10rem 1fr 11rem}
.L-magazine .mz-terms{margin-top:.8rem}
.L-dragon .scroll-rank{opacity:1}
.L-dragon .lede-x{margin-top:2rem}
@media(max-width:420px){.mark-name{font-size:.8rem}.nav-a{font-size:.72rem;padding:.35rem .55rem}.nav-a:not(:first-child){display:none}}
/* logo backing chosen per logo luminance (data-lbg) */
.L-strip .st-logo,.L-arcade .cab-marq,.L-mahjong .tile-logo,.L-podium .step-logo,.L-envelope .env-seal{background:transparent}
[class^="L-"] img[data-lbg]{border-radius:8px;padding:.3rem .6rem;box-sizing:border-box}
[class^="L-"] img[data-lbg="light"]{background:var(--nt-fig)}
[class^="L-"] img[data-lbg="dark"]{background:var(--nt-bg)}
.L-board .dep>*{min-width:0;overflow-wrap:anywhere}