/* REXSA public site — compact buyer-first layer (2026-09-23 rebuild).
   Loaded after rexsa.css. Tightens the night tokens, restyles the shared
   chrome, and owns every `s-` component used by home / products. */

html[data-design="night"] {
  --bg: #0a0b0d;
  --bg-subtle: #0f1114;
  --surface: #121418;
  --surface-raised: #181b20;
  --surface-sunken: #0a0b0d;
  --border: #262a31;
  --border-strong: #363b44;
  --text-secondary: #b1b7c1;
  --text-muted: #8c939e;
  --accent: #1677d2;
  --accent-pressed: #115fa8;
  --accent-text: #5ea9f6;
  --accent-wash: rgba(22, 119, 210, .14);
  --ok: #3fd08f;
  --font-display: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --font-sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --fs-display: clamp(2.25rem, 1.5rem + 2.6vw, 3.6rem);
  --fs-h1: clamp(2rem, 1.45rem + 1.9vw, 3rem);
  --fs-h2: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  --tracking-display: -.035em;
  --tracking-heading: -.025em;
  --container: 1200px;
  --container-wide: 1200px;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --header-h: 64px;
  --section-y: clamp(3rem, 2rem + 3vw, 4.75rem);
  --r-control: 8px;
  --r-surface: 14px;
}

html { scroll-padding-top: calc(var(--header-h) + 16px); }
html:has(body.page-home) { scroll-padding-top: var(--header-h); }
body.pub { background: var(--bg); font-size: .9375rem; line-height: 1.6; }
.pub main { padding-top: var(--header-h); }
.pub h1, .pub h2, .pub h3 { font-weight: 600; }
.pub .btn, .pub .label, .pub .eyebrow, .pub input, .pub select, .pub textarea { font-family: var(--font-sans); }


/* ---------- Buttons ---------------------------------------------------- */
.pub .btn { min-height: 44px; padding: 10px 18px; gap: 10px; font-size: .875rem; border-radius: var(--r-control); border-color: var(--border-strong); background: var(--surface-raised); }
.pub .btn svg { width: 18px; height: 18px; }
.pub .btn:hover { background: #22262d; border-color: #4a505a; transform: none; }
.pub .btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.pub .btn--primary:hover { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.pub .btn--quiet { background: transparent; }
.pub .btn--light { background: #f2f4f7; border-color: #f2f4f7; color: #0a0b0d; }
.pub .btn--light:hover { background: #fff; border-color: #fff; }
.pub .btn--sm { min-height: 36px; padding: 6px 14px; font-size: .8125rem; }
.pub .btn--disabled { pointer-events: none; }
.pub .text-link { color: var(--accent-text); font-size: .875rem; font-weight: 600; gap: 6px; align-items: center; }
.pub .text-link:hover { color: #fff; }
.pub .text-link svg { width: 16px; height: 16px; }

.pub .segmented { padding: 3px; border-radius: 10px; background: var(--surface); }
.pub .segmented button { min-height: 32px; min-width: 56px; border-radius: 7px; font: 600 .8125rem var(--font-sans); color: var(--text-muted); }
.pub .segmented button[aria-pressed=true] { background: #fff; color: #0a0b0d; }

.pub .state { font: 600 .75rem/1.4 var(--font-sans); color: var(--text-secondary); padding: 3px 9px 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
.pub .state > span { width: 6px; height: 6px; }
.pub .state--on { color: var(--ok); background: rgba(63, 208, 143, .1); }
.pub .state--on > span { background: var(--ok); }

/* ---------- Masthead --------------------------------------------------- */
.pub .masthead { z-index: 100; background: rgba(10, 11, 13, .88); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--border); }
.pub .masthead__inner { width: min(calc(100% - var(--gutter) * 2), var(--container)); display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s-5); }
.pub .masthead__inner > .wordmark { grid-column: 1; }
.pub .mainnav { grid-column: 2; gap: 4px; }
.pub .masthead__actions { grid-column: 3; justify-self: end; gap: var(--s-4); }
.pub .masthead__inner > .text-link { grid-column: 3; justify-self: end; }
.pub .wordmark > span { font-size: 1.05rem; letter-spacing: .16em; }
.pub .rx-logo { width: 26px; height: 26px; }
.pub .mainnav a { font-size: .875rem; font-weight: 500; padding: 8px 14px; border-radius: 8px; color: var(--text-secondary); }
.pub .mainnav a:hover { color: #fff; background: rgba(255, 255, 255, .05); }
.pub .mainnav a[aria-current] { color: #fff; background: rgba(255, 255, 255, .08); }
.pub .mainnav a[aria-current]::after { display: none; }
.pub .nav-account { font-size: .875rem; font-weight: 500; color: var(--text-secondary); min-height: 40px; }
.pub .nav-account:hover { color: #fff; }
.pub .navsheet { background: var(--bg); padding: var(--s-4) var(--gutter) var(--s-6); }
.pub .navsheet nav a { font: 600 1.125rem var(--font-sans); padding: 14px 0; }
.pub .navsheet nav a small { display: none; }

/* ---------- Footer ----------------------------------------------------- */
.pub .sitefoot { background: var(--bg-subtle); padding-top: var(--s-7); }
.pub .sitefoot__top { gap: var(--s-6); padding-bottom: var(--s-6); }
.pub .sitefoot nav h2 { font: 600 .75rem var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin-bottom: var(--s-3); }
.pub .sitefoot nav a { font-size: .875rem; padding: 4px 0; }
.pub .sitefoot__brand p { color: var(--text-muted); font-size: .8125rem; line-height: 1.6; margin-top: var(--s-3); max-width: 36ch; }
.pub .sitefoot__bottom { padding-block: var(--s-4); font-size: .8125rem; color: var(--text-muted); }

/* ---------- Shared bits ------------------------------------------------ */
.s-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 10px; border-radius: 999px; background: rgba(63, 208, 143, .1); color: var(--ok); font-size: .8125rem; font-weight: 600; }
.s-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 4px rgba(63, 208, 143, .18); }
.s-tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--accent-wash); color: var(--accent-text); font: 700 .6875rem/1.5 var(--font-sans); letter-spacing: .03em; text-transform: uppercase; white-space: nowrap; vertical-align: middle; }
.s-lead { color: var(--text-secondary); font-size: clamp(1rem, .95rem + .25vw, 1.125rem); line-height: 1.6; max-width: 52ch; }
.s-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.s-note { margin-top: var(--s-4); font-size: .875rem; color: var(--text-muted); }
.s-note a { color: var(--accent-text); font-weight: 600; }
.s-note a:hover { color: #fff; }

.s-section { padding-block: var(--section-y); }
.s-section--alt { background: var(--bg-subtle); }
.s-head { margin-bottom: var(--s-6); }
.s-head h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-heading); line-height: 1.15; }
.s-head h2 span { color: #fff; }
.s-hero h1 span { color: var(--accent-text); }
.s-head p { color: var(--text-secondary); margin-top: var(--s-2); max-width: 60ch; }
.s-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; }

.s-pkg__icon, .s-card__icon, .s-quote__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-raised); color: var(--accent-text); }
.s-pkg__icon svg, .s-card__icon svg, .s-quote__icon svg { width: 20px; height: 20px; }

/* ---------- Hero ------------------------------------------------------- */
.s-hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(2rem, 1rem + 3vw, 3.5rem); background: radial-gradient(60% 80% at 85% 0%, rgba(22, 119, 210, .16), transparent 70%); }
.s-hero__grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.s-hero__copy { display: grid; gap: var(--s-5); justify-items: start; }
.s-hero h1 { font-size: var(--fs-display); letter-spacing: var(--tracking-display); line-height: 1.04; }
.s-hero h1 span { display: block; }
.s-ticks { list-style: none; display: grid; grid-template-columns: repeat(2, max-content); gap: 10px 28px; margin-top: var(--s-2); }
.s-ticks li { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-secondary); }
.s-ticks svg { width: 16px; height: 16px; color: var(--ok); }

.s-quote { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); padding: var(--s-5); box-shadow: 0 24px 60px rgba(0, 0, 0, .35); }
.s-quote__head { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s-4); }
.s-quote__head > div { flex: 1; min-width: 0; }
.s-quote__head strong { display: block; font: 600 1.125rem var(--font-display); }
.s-quote__head small { color: var(--text-muted); font-size: .8125rem; }
.s-quote__list { list-style: none; display: grid; gap: 6px; }
.s-quote__list a { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: 10px; background: var(--surface-raised); border: 1px solid transparent; transition: border-color var(--t-fast), background var(--t-fast); }
.s-quote__list a:hover { border-color: var(--accent); background: var(--accent-wash); }
.s-quote__list span { flex: 1; font-size: .9375rem; color: var(--text-secondary); }
.s-quote__list b { font: 700 1.0625rem var(--font-display); font-variant-numeric: tabular-nums; }
.s-quote__list svg { width: 16px; height: 16px; color: var(--text-muted); }
.s-quote__list a:hover svg { color: var(--accent-text); }
.s-quote__foot { margin-top: var(--s-4); font-size: .8125rem; color: var(--text-muted); line-height: 1.55; }

/* ---------- Games strip ------------------------------------------------ */
.s-games { padding-bottom: var(--s-6); }
.s-games__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.s-game { display: flex; align-items: center; gap: 14px; padding: 10px 16px 10px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color var(--t-fast); }
.s-game:hover { border-color: var(--border-strong); }
.s-game__art { width: 52px; height: 52px; border-radius: 9px; overflow: hidden; background: var(--surface-raised); display: grid; place-items: center; flex: none; }
.s-game__art img { width: 100%; height: 100%; object-fit: cover; }
.s-game__art b { font: 700 1rem var(--font-display); color: var(--text-muted); }
.s-game__txt { flex: 1; display: grid; gap: 4px; justify-items: start; min-width: 0; }
.s-game__txt strong { font-size: .9375rem; }
.s-game > svg { width: 18px; height: 18px; color: var(--text-muted); }
.s-game--off .s-game__art img { filter: grayscale(1); opacity: .6; }

/* ---------- Price table ------------------------------------------------ */
.s-table { border: 1px solid var(--border); border-radius: var(--r-surface); overflow: hidden; background: var(--surface); }
.s-table__row { display: grid; grid-template-columns: minmax(0, 2.3fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 8px; padding: 14px 18px; }
.s-table__row + .s-table__row { border-top: 1px solid var(--border); }
.s-table__row--head { padding-block: 10px; background: var(--bg-subtle); font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.s-table__row--head span:not(:first-child) { text-align: center; }
.s-table__row--best { background: linear-gradient(90deg, rgba(22, 119, 210, .12), rgba(22, 119, 210, .03)); box-shadow: inset 3px 0 0 var(--accent); }
.s-pkg { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.s-pkg strong { font: 600 1.0625rem var(--font-display); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.s-pkg small { display: block; color: var(--text-muted); font-size: .8125rem; margin-top: 1px; }
.s-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 8px; }
.s-chips li { font-size: .75rem; color: var(--text-secondary); padding: 2px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); }
.s-cell { display: flex; justify-content: center; }
.s-price { display: grid; justify-items: center; gap: 1px; width: 100%; max-width: 132px; padding: 9px 6px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface-raised); transition: border-color var(--t-fast), background var(--t-fast), transform var(--t-fast); }
.s-price small { display: none; font-size: .6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
.s-price b { font: 700 1rem var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
a.s-price:hover { border-color: var(--accent); background: var(--accent); transform: translateY(-1px); }
a.s-price:hover small { color: rgba(255, 255, 255, .8); }
.s-price--none { border-style: dashed; color: var(--text-muted); }
.s-cell--soon { grid-column: 2 / -1; justify-content: center; gap: var(--s-5); align-items: center; font-size: .875rem; color: var(--text-muted); padding: 10px; border: 1px dashed var(--border-strong); border-radius: 10px; }

/* ---------- Why / how / reviews / faq --------------------------------- */
.s-grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); }
.s-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); padding: var(--s-5); display: grid; gap: var(--s-3); align-content: start; }
.s-card h3 { font-size: 1.0625rem; }
.s-card p { color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }

.s-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); counter-reset: none; }
.s-steps li { position: relative; padding-top: var(--s-2); }
.s-steps li:not(:last-child)::after { content: ''; position: absolute; top: 26px; left: 56px; right: 8px; height: 1px; background: linear-gradient(90deg, var(--border-strong), transparent); }
.s-steps__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font: 700 1rem var(--font-display); margin-bottom: var(--s-4); }
.s-steps h3 { font-size: 1.0625rem; margin-bottom: 6px; }
.s-steps p { color: var(--text-secondary); font-size: .875rem; line-height: 1.6; }

.s-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.s-review { margin: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); }
.s-review blockquote { margin: 0; flex: 1; font-size: .9375rem; line-height: 1.6; color: #e6e9ee; }
.s-review blockquote::before { content: '“'; display: block; font: 700 2rem/1 var(--font-display); color: var(--accent-text); height: 18px; }
.s-review figcaption { display: flex; align-items: center; gap: 10px; }
.s-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-raised); font-weight: 700; font-size: .875rem; color: var(--accent-text); }
.s-review figcaption strong { display: block; font-size: .875rem; }
.s-review figcaption small { color: var(--text-muted); font-size: .75rem; }

.s-faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.s-faq .s-head { position: sticky; top: calc(var(--header-h) + 24px); display: grid; gap: var(--s-4); justify-items: start; }
.s-accordion { display: grid; gap: 8px; }
.s-accordion details { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
.s-accordion details[open] { border-color: var(--border-strong); }
.s-accordion summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); padding: 15px 18px; font-weight: 600; font-size: .9375rem; }
.s-accordion summary::-webkit-details-marker { display: none; }
.s-accordion summary span { position: relative; width: 14px; height: 14px; flex: none; }
.s-accordion summary span::before, .s-accordion summary span::after { content: ''; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 1px; background: var(--text-muted); transition: transform var(--t-fast); }
.s-accordion summary span::after { transform: rotate(90deg); }
.s-accordion details[open] summary span::after { transform: rotate(0); }
.s-accordion details p { padding: 0 18px 16px; color: var(--text-secondary); font-size: .9rem; line-height: 1.65; }

.s-cta { padding-bottom: var(--section-y); }
.s-cta__box { display: flex; align-items: center; justify-content: space-between; gap: var(--s-5); flex-wrap: wrap; padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: 18px; background: linear-gradient(120deg, #1677d2, #0e4f8f); }
.s-cta__box h2 { font-size: var(--fs-h2); letter-spacing: var(--tracking-heading); }
.s-cta__box p { color: rgba(255, 255, 255, .85); margin-top: 4px; }
.s-cta .btn--primary { background: #fff; border-color: #fff; color: #0a0b0d; }
.s-cta .btn--primary:hover { background: #e8eef6; border-color: #e8eef6; }

/* ---------- Products pages -------------------------------------------- */
.s-page { padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem) var(--section-y); }
.s-pagehead { margin-bottom: var(--s-6); }
.s-pagehead h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-heading); line-height: 1.1; }
.s-pagehead p { color: var(--text-secondary); margin-top: var(--s-2); }
.s-pagehead--row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; }
.s-back { display: inline-block; font-size: .875rem; color: var(--text-muted); margin-bottom: var(--s-3); }
.s-back:hover { color: #fff; }

.s-gamecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.s-gamecard { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); overflow: hidden; transition: border-color var(--t-fast); }
.s-gamecard:hover { border-color: var(--border-strong); }
.s-gamecard__art { aspect-ratio: 16 / 10; background: linear-gradient(135deg, #1a1e25, #0f1114); display: grid; place-items: center; overflow: hidden; }
.s-gamecard__art img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.s-gamecard__art b { font: 700 3.5rem var(--font-display); color: #2a2f38; letter-spacing: -.04em; }
.s-gamecard--off .s-gamecard__art img { filter: grayscale(1); opacity: .55; }
.s-gamecard__body { display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-5); flex: 1; }
.s-gamecard__top { display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); }
.s-gamecard__top h2 { font-size: 1.25rem; }
.s-gamecard__body p { color: var(--text-secondary); font-size: .875rem; flex: 1; }

.s-plans { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: var(--s-4); align-items: stretch; }
.s-plan { display: flex; flex-direction: column; gap: var(--s-4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); padding: var(--s-5); scroll-margin-top: calc(var(--header-h) + 16px); transition: border-color var(--t-base), box-shadow var(--t-base); }
.s-plan--best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 20px 50px rgba(22, 119, 210, .14); background: linear-gradient(180deg, rgba(22, 119, 210, .1), var(--surface) 40%); }
.s-plan.is-target { box-shadow: 0 0 0 3px var(--accent-text); }
.s-plan__head { display: flex; align-items: center; gap: 12px; }
.s-plan__head > div { flex: 1; min-width: 0; }
.s-plan__head h2 { font-size: 1.1875rem; }
.s-plan__head small { color: var(--text-muted); font-size: .8125rem; }
.s-plan__desc { color: var(--text-secondary); font-size: .875rem; line-height: 1.55; }
.s-checks { list-style: none; display: grid; gap: 7px; }
.s-checks li { position: relative; padding-left: 24px; font-size: .875rem; }
.s-checks li::before { content: ''; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; border-radius: 50%; background: rgba(63, 208, 143, .14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%233fd08f' stroke-width='2.2'%3E%3Cpath d='M4 8.3l2.6 2.5L12 5.5'/%3E%3C/svg%3E") center / 11px no-repeat; }
.s-plan__buy { margin-top: auto; display: grid; gap: var(--s-4); }
.s-plan__buy legend { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
.s-durs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.s-dur { position: relative; display: grid; gap: 1px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px; cursor: pointer; background: var(--surface-raised); transition: border-color var(--t-fast), background var(--t-fast); }
.s-dur input { position: absolute; opacity: 0; pointer-events: none; }
.s-dur span { font-size: .75rem; color: var(--text-muted); }
.s-dur b { font: 700 1rem var(--font-display); font-variant-numeric: tabular-nums; }
.s-dur:hover { border-color: #4a505a; }
.s-dur:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }
.s-dur:has(input:checked) span { color: var(--accent-text); }
.s-dur:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.s-plan__soon { margin-top: auto; display: grid; gap: var(--s-2); padding: var(--s-4); border: 1px dashed var(--border-strong); border-radius: 10px; }
.s-plan__soon p { font-size: .8125rem; color: var(--text-muted); margin-bottom: var(--s-2); }

.s-assure { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); margin-top: var(--s-7); padding: var(--s-5); background: var(--bg-subtle); border-radius: var(--r-surface); }
.s-assure li { display: flex; gap: 12px; align-items: flex-start; font-size: .8125rem; color: var(--text-muted); line-height: 1.5; }
.s-assure svg { width: 20px; height: 20px; color: var(--accent-text); margin-top: 2px; }
.s-assure strong { display: block; color: #fff; font-size: .875rem; }
.s-assure a { color: var(--accent-text); }

/* ---------- Status / setup / legal: compact the older pages ------------ */
.pub .pagehead { padding: clamp(2rem, 1.5rem + 2vw, 3.25rem) 0 var(--s-6); }
.pub .pagehead h1, .pub .status-overview h1 { font-size: var(--fs-h1); letter-spacing: var(--tracking-heading); line-height: 1.1; }
.pub .section-heading { margin-bottom: var(--s-5); align-items: flex-end; }
.pub .band { padding-block: var(--s-7); }
.pub .status-overview { padding-top: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
.pub .support-strip { border-radius: var(--r-surface); }
.s-chapter { display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--accent-text); margin-bottom: var(--s-2); }
.pub .doc__section-head h2 { font-size: var(--fs-h2); }
.pub .label, .pub .eyebrow { font-family: var(--font-sans); font-weight: 600; letter-spacing: .06em; }

/* ---------- Responsive ------------------------------------------------- */
@media (max-width: 1080px) {
  .s-grid4, .s-steps, .s-assure { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-steps li::after { display: none; }
  .s-reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-reviews .s-review:nth-child(n+5) { display: none; }
}
@media (max-width: 900px) {
  .pub .masthead__inner { grid-template-columns: 1fr auto; }
  .pub .masthead__actions { grid-column: 2; }
  .pub .nav-account { display: none; }
  .s-hero__grid, .s-faq { grid-template-columns: 1fr; }
  .s-faq .s-head { position: static; }
  .s-quote { max-width: 520px; }
  .s-games__row, .s-gamecards { grid-template-columns: 1fr; }
  .s-gamecard { flex-direction: row; }
  .s-gamecard__art { aspect-ratio: auto; width: 34%; min-height: 100%; }
  .s-table { border: 0; background: none; display: grid; gap: 10px; overflow: visible; }
  .s-table__row--head { display: none; }
  .s-table__row { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); }
  .s-table__row + .s-table__row { border-top: 1px solid var(--border); }
  .s-table__row--best { border-color: var(--accent); }
  .s-pkg { grid-column: 1 / -1; margin-bottom: 8px; }
  .s-price { max-width: none; padding: 8px 4px; }
  .s-price small { display: block; }
  .s-cell--soon { grid-column: 1 / -1; flex-wrap: wrap; }
}
@media (max-width: 600px) {
  .s-ticks { grid-template-columns: 1fr; }
  .s-grid4, .s-steps, .s-reviews, .s-assure { grid-template-columns: 1fr; }
  .s-reviews .s-review:nth-child(n+4) { display: none; }
  .s-table__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .s-gamecard { flex-direction: column; }
  .s-gamecard__art { width: 100%; aspect-ratio: 16 / 9; }
  .s-actions .btn { flex: 1; }
  .pub .nav-buy { display: none; }
  .s-cta__box .btn { width: 100%; }
}
.s-grid4--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1080px) { .s-grid4--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .s-grid4--3 { grid-template-columns: 1fr; } }
.s-plan { position: relative; }
.s-plan__ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 3px 12px; }

/* Status page: card layout instead of full-screen bands */
.pub .status-overview { min-height: 0; padding-bottom: var(--s-6); }
.pub .status-overview__main { gap: var(--s-6); margin-bottom: var(--s-6); }
.pub .service-grid { border-top: 0; padding-top: 0; gap: var(--s-4); }
.pub .service-grid article { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); padding: var(--s-5); justify-items: start; }
.pub .service-grid p { font-size: .8125rem; margin-top: var(--s-2); }
.pub .availability { border-top: 0; padding-top: var(--s-5); }
.pub .availability-game { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); padding: var(--s-5); margin-bottom: var(--s-4); }
.pub .availability-game h3 { font-size: 1.25rem; }
.pub .availability-game header { margin-bottom: var(--s-3); }
.pub .availability-game dl { padding: 0 0 var(--s-4); gap: 0 var(--s-6); }
.pub .availability-game dl > div { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .875rem; }
@media (max-width: 900px) { .pub .service-grid, .pub .availability-game dl { grid-template-columns: 1fr; } }

/* Instrument Sans (owner's pick): tight, bold display type is what makes it read premium. */
.pub h1, .pub h2, .pub h3, .pub .display, .s-quote__head strong, .s-pkg strong, .s-price b, .s-quote__list b, .s-dur b, .s-steps__n, .s-game__art b, .s-gamecard__art b { font-weight: 700; letter-spacing: -.03em; word-spacing: 0; }
.s-hero h1, .s-head h2, .s-pagehead h1, .pub .pagehead h1, .pub .status-overview h1, .s-cta__box h2 { letter-spacing: -.04em; }
.s-hero h1 { line-height: 1.02; }
.s-price b, .s-quote__list b, .s-dur b { letter-spacing: -.01em; }
.wordmark > span { font-weight: 700; }
.s-durs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.s-dur { min-width: 0; padding: 9px 10px; }
.s-dur b { font-size: .9375rem; letter-spacing: -.01em; white-space: nowrap; }

/* ---------- Homepage: one section per screen (2026-09-23) ------------- */
/* Hero is text only and centred: one statement, two actions. */
.s-hero { position: relative; background: radial-gradient(55% 60% at 50% 0%, rgba(22, 119, 210, .2), transparent 70%); }
.page-home .s-hero { background: var(--bg); }
.s-hero__center { display: grid; justify-items: center; text-align: center; gap: var(--s-5); }
.s-hero__center h1 { font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.6rem); }
.s-hero__center .s-lead { max-width: 60ch; margin-inline: auto; }
.s-hero__center .s-actions { justify-content: center; }
.s-hero__center .s-ticks { grid-template-columns: repeat(4, max-content); justify-content: center; gap: 10px 28px; margin-top: var(--s-3); }
.pub .btn--lg { min-height: 52px; padding: 12px 24px; font-size: .9375rem; }
.s-scrollcue { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: 26px; height: 42px; border: 2px solid var(--border-strong); border-radius: 14px; display: none; }
.s-scrollcue span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--text-muted); animation: s-cue 1.8s var(--ease) infinite; }
@keyframes s-cue { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) { .s-scrollcue span { animation: none; } }
#products .s-gamecards { gap: var(--s-5); }
#products .s-gamecard__top h3 { font-size: 1.375rem; }

/* Full-screen sections: desktop-sized windows only. Below that, and for
   reduced motion, the page scrolls naturally at content height. */
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home .s-screen { min-height: calc(100dvh - var(--header-h)); display: flex; align-items: center; padding-block: clamp(2.5rem, 6vh, 5rem); }
  .page-home .s-screen > .container { width: min(calc(100% - var(--gutter) * 2), var(--container)); }
  .s-scrollcue { display: block; }

  /* Content scales with the screen height so a tall screen is not left empty. */
  .page-home .s-screen .s-head { margin-bottom: clamp(1.5rem, 4vh, 3rem); }
  .page-home .s-screen .s-head h2 { font-size: clamp(2rem, 1rem + 2.2vh + 1.4vw, 3.5rem); }
  .page-home .s-screen .s-head p { font-size: clamp(.95rem, .7rem + .6vh, 1.125rem); }
  .page-home .s-hero__center { transform: translateY(-2vh); }
  .page-home .s-hero__center h1 { font-size: clamp(3rem, 1rem + 5vh + 3vw, 6.5rem); }
  .page-home .s-hero__center .s-lead { font-size: clamp(1.05rem, .8rem + .8vh, 1.375rem); }
  .page-home .s-hero__center .s-ticks li { font-size: clamp(.875rem, .7rem + .4vh, 1rem); }
  #products .s-gamecard__art { aspect-ratio: auto; height: clamp(330px, 38svh, 460px); }
  #products .s-gamecard__body { padding: 18px 20px; gap: 14px; }
  .page-home #why .s-card { padding: clamp(1.5rem, 3.5vh, 2.5rem); gap: var(--s-4); }
  .page-home #why .s-card h3 { font-size: clamp(1.125rem, .9rem + .7vh, 1.5rem); }
  .page-home #why .s-card p { font-size: clamp(.875rem, .72rem + .45vh, 1.0625rem); }
  .page-home #why .s-card__icon { width: 52px; height: 52px; }
  .page-home #why .s-card__icon svg { width: 26px; height: 26px; }
  .page-home #how .s-steps__n { width: clamp(40px, 6vh, 60px); height: clamp(40px, 6vh, 60px); font-size: clamp(1rem, .7rem + 1vh, 1.5rem); }
  .page-home #how .s-steps li::after { top: calc(clamp(40px, 6vh, 60px) / 2 + 6px); left: calc(clamp(40px, 6vh, 60px) + 16px); }
  .page-home #how .s-steps h3 { font-size: clamp(1.0625rem, .85rem + .7vh, 1.375rem); }
  .page-home #how .s-steps p { font-size: clamp(.875rem, .72rem + .45vh, 1.0625rem); }
  .page-home #reviews .s-review blockquote { font-size: clamp(.9375rem, .75rem + .5vh, 1.125rem); }
  .page-home #faq .s-accordion summary { font-size: clamp(.9375rem, .8rem + .35vh, 1.0625rem); padding-block: clamp(14px, 2vh, 20px); }
}

/* Page-by-page movement is done by static/js/home.js (wheel only), not CSS
   scroll-snap: mandatory snap trapped small wheel steps and blocked End/footer. */
@media (max-width: 760px) { .s-hero__center .s-ticks { grid-template-columns: repeat(2, max-content); } }
@media (max-width: 480px) { .s-hero__center .s-ticks { grid-template-columns: 1fr; justify-items: start; } }

/* Screen-mode fit: price table must fit one screen; sparse screens get tiles. */
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home #pricing .s-table__row { padding-block: 10px; }
  .page-home #pricing .s-chips { flex-wrap: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .page-home #pricing .s-chips li { white-space: nowrap; }
  .page-home #pricing .s-head { margin-bottom: clamp(1rem, 2.5vh, 2rem); }
  .page-home #why .s-card { min-height: clamp(220px, 36vh, 400px); align-content: space-between; grid-template-rows: auto 1fr; }
  .page-home #why .s-card > h3 { align-self: end; }
  .page-home #how .s-steps { gap: var(--s-4); }
  .page-home #how .s-steps li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); padding: clamp(1.5rem, 3.5vh, 2.5rem); min-height: clamp(220px, 36vh, 400px); display: flex; flex-direction: column; }
  .page-home #how .s-steps li::after { display: none; }
  .page-home #how .s-steps__n { margin-bottom: auto; }
  .page-home #how .s-steps h3 { margin-top: var(--s-6); }
}
/* Laptop-height screens: drop the feature chips from the table (they are
   repeated on /products) so the whole price list stays on one screen. */
@media (min-width: 1000px) and (min-height: 680px) and (max-height: 860px) {
  .page-home #pricing .s-chips { display: none; }
  .page-home #pricing .s-head p { display: none; }
}
/* Tiles: top-align so every card's title sits on the same line. */
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home #why .s-card { align-content: start; grid-template-rows: none; }
  .page-home #why .s-card > h3 { align-self: auto; margin-top: clamp(1.5rem, 6vh, 4rem); }
  .page-home #how .s-steps__n { margin-bottom: 0; }
  .page-home #how .s-steps h3 { margin-top: clamp(1.5rem, 6vh, 4rem); }
}

/* ---------- Homepage price cards (replaces the price table) ------------ */
.s-pricecards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-4); align-items: stretch; }
.s-pricecards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.s-pricecard { position: relative; display: flex; flex-direction: column; gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); }
.s-pricecard--best { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 24px 60px rgba(22, 119, 210, .16); background: linear-gradient(180deg, rgba(22, 119, 210, .12), var(--surface) 45%); }
.s-pricecard__ribbon { position: absolute; top: -11px; left: 50%; transform: translateX(-50%); background: var(--accent); color: #fff; padding: 3px 12px; }
.s-pricecard__head { display: flex; align-items: center; gap: 12px; }
.s-pricecard__head > div { min-width: 0; }
.s-pricecard__head h3 { font-size: 1.25rem; }
.s-pricecard__head small { display: block; color: var(--text-muted); font-size: .8125rem; margin-top: 2px; }
.s-pricecard .s-checks li { font-size: .8125rem; color: var(--text-secondary); }
.s-pricecard__prices { list-style: none; display: grid; gap: 6px; margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.s-pricecard__prices a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 10px; background: var(--surface-raised); border: 1px solid transparent; transition: background var(--t-fast), border-color var(--t-fast); }
.s-pricecard__prices a:hover { border-color: var(--accent); background: var(--accent-wash); }
.s-pricecard__prices span { flex: 1; font-size: .875rem; color: var(--text-secondary); white-space: nowrap; }
.s-pricecard__prices b { font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-pricecard__prices svg { width: 15px; height: 15px; color: var(--text-muted); flex: none; }
.s-pricecard__prices a:hover svg { color: var(--accent-text); }
.s-pricecard--best .s-pricecard__prices a { background: rgba(22, 119, 210, .14); }
.s-pricecard--best .s-pricecard__prices a:hover { background: var(--accent); border-color: var(--accent); }
.s-pricecard--best .s-pricecard__prices a:hover span, .s-pricecard--best .s-pricecard__prices a:hover svg { color: #fff; }
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home .s-pricecard { padding: clamp(1.25rem, 2.6vh, 2rem); }
  .page-home .s-pricecard__prices a { padding-block: clamp(8px, 1.3vh, 13px); }
  .page-home .s-pricecard__head h3 { font-size: clamp(1.125rem, .9rem + .6vh, 1.5rem); }
  .page-home .s-pricecard__prices b { font-size: clamp(.9375rem, .8rem + .4vh, 1.125rem); }
}
@media (max-width: 1080px) { .s-pricecards, .s-pricecards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .s-pricecards, .s-pricecards--3 { grid-template-columns: 1fr; } }
.s-from { margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--border); display: grid; gap: 2px; }
.s-from__label { font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.s-from__price { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); line-height: 1.05; letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.s-pricecard--best .s-from__label { color: var(--accent-text); }
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home .s-pricecard { gap: clamp(1rem, 2.2vh, 1.5rem); }
  .page-home .s-from__price { font-size: clamp(2rem, 1rem + 2.4vh + .8vw, 3.25rem); }
  .page-home #pricing .s-head p { display: block; }
}
/* One card per sellable tool; auto-fit so a newly priced tool (e.g. ESP) just adds a column. */
.s-pricecards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
@media (max-width: 1080px) { .s-pricecards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .s-pricecards { grid-template-columns: 1fr; } }
.s-from__price--soon { font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem) !important; color: var(--text-secondary); line-height: 1.35; }
.s-head--row .s-head__one, #pricing .s-head p { max-width: none; }
/* Five cards across: keep every line single and inside its card. */
.s-pricecards .btn { white-space: nowrap; }
.s-from__price--soon { font-size: clamp(1.25rem, 1rem + .6vw, 1.625rem) !important; white-space: normal; }
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home .s-pricecard { padding: clamp(1.1rem, 2.2vh, 1.6rem); }
  .page-home .s-from__price { font-size: clamp(2rem, .9rem + 2vh + .7vw, 2.9rem); }
}
/* "Coming Soon" occupies the same box as a price so every divider lines up. */
.s-from__price--soon { display: flex; align-items: center; min-height: calc(clamp(2rem, 1.4rem + 1.6vw, 2.75rem) * 1.05); line-height: 1.1 !important; }
@media (min-width: 1000px) and (min-height: 680px) { .page-home .s-from__price--soon { min-height: calc(clamp(2rem, .9rem + 2vh + .7vw, 2.9rem) * 1.05); } }
/* Package taglines are one short phrase: keep them on one line. */
.s-pricecard__head small, .s-plan__head small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-pricecard__tag { margin-top: calc(var(--s-2) * -1); color: var(--text-secondary); font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.s-pricecard--best .s-pricecard__tag { color: var(--accent-text); }

/* Steps: compact, to the point, ending in a buy action. */
.s-steps__cta { display: flex; align-items: center; gap: var(--s-5); flex-wrap: wrap; margin-top: clamp(1.5rem, 4vh, 3rem); }
.s-steps__cta span { color: var(--text-muted); font-size: .9375rem; }
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home #how .s-steps li { min-height: 0; padding: clamp(1.5rem, 3.2vh, 2.25rem); }
  .page-home #how .s-steps h3 { margin-top: clamp(1rem, 2.6vh, 1.75rem); margin-bottom: 8px; }
  .page-home #how .s-steps p { font-size: clamp(.9375rem, .78rem + .45vh, 1.125rem); line-height: 1.5; }
}

/* FAQ: the six most-asked questions, all answers visible, in a grid. */
.s-head--center { text-align: center; }
.s-head--center p { margin-inline: auto; }
.s-qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
.s-qa__item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); padding: var(--s-5); }
.s-qa__item h3 { font-size: 1.0625rem; margin-bottom: var(--s-2); }
.s-qa__item p { color: var(--text-secondary); font-size: .9rem; line-height: 1.6; }
.s-qa__cta { display: flex; justify-content: center; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-top: clamp(1.5rem, 4vh, 2.5rem); color: var(--text-muted); }
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home #faq .s-qa__item { padding: clamp(1.25rem, 3vh, 2rem); }
  .page-home #faq .s-qa__item h3 { font-size: clamp(1.0625rem, .85rem + .6vh, 1.3rem); }
  .page-home #faq .s-qa__item p { font-size: clamp(.9rem, .75rem + .45vh, 1.0625rem); }
}
@media (max-width: 1080px) { .s-qa { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .s-qa { grid-template-columns: 1fr; } }

/* Homepage FAQ accordion. */
.page-home #faq .s-qa { grid-template-columns: 1fr; max-width: 960px; margin-inline: auto; gap: 14px; }
.page-home #faq details.s-qa__item { padding: 0; border-radius: 16px; transition: border-color var(--t-fast); }
.page-home #faq .s-qa__item[open] { border-color: var(--accent-text); }
.page-home #faq .s-qa__item summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 28px; cursor: pointer; list-style: none; font-size: 1.0625rem; font-weight: 600; line-height: 1.4; }
.page-home #faq .s-qa__item summary::-webkit-details-marker { display: none; }
.page-home #faq .s-qa__item summary::marker { content: ''; }
.page-home #faq .s-qa__item summary:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 4px; border-radius: 16px; }
.page-home #faq .s-qa__item summary svg { width: 20px; height: 20px; flex-shrink: 0; transition: transform var(--t-fast); }
.page-home #faq .s-qa__item[open] summary svg { transform: rotate(180deg); }
.page-home #faq .s-qa__item p { margin: 0; padding: 0 28px 24px; font-size: 1rem; line-height: 1.65; }
@media(max-width:600px) {
  .page-home #faq .s-qa__item summary { padding: 20px; gap: 16px; font-size: 1rem; }
  .page-home #faq .s-qa__item p { padding: 0 20px 20px; font-size: .9375rem; }
}

/* Closing call-to-action: its own band with equal breathing room, centred. */
.s-cta { padding-block: var(--section-y); }
.s-cta__box { display: grid; justify-items: center; text-align: center; gap: var(--s-3); padding: clamp(2.5rem, 2rem + 3vw, 4.5rem) var(--s-5); border-radius: 20px; background: radial-gradient(80% 120% at 50% 0%, rgba(255, 255, 255, .14), transparent 60%), linear-gradient(135deg, #1a7fe0, #0d4a8a); box-shadow: 0 30px 80px rgba(22, 119, 210, .22); }
.s-cta__box h2 { font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem); letter-spacing: -.04em; line-height: 1.05; }
.s-cta__box h2 span { color: #cfe5ff; }
.s-cta__box p { color: rgba(255, 255, 255, .85); font-size: clamp(1rem, .95rem + .3vw, 1.1875rem); margin: 0; }
.pub .s-cta__btn { margin-top: var(--s-4); background: #fff; border-color: #fff; color: #0a0b0d; }
.pub .s-cta__btn:hover { background: #e8eef6; border-color: #e8eef6; }
.s-cta__box { justify-content: stretch; grid-template-columns: 1fr; }

/* ---------- Closing screen (replaces the blue box) --------------------- */
.s-closing { position: relative; overflow: hidden; padding-block: clamp(4rem, 3rem + 5vw, 7rem); text-align: center; isolation: isolate; }
.s-closing::before { content: ''; position: absolute; inset: 0; z-index: -2; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size: 56px 56px; -webkit-mask-image: radial-gradient(60% 70% at 50% 60%, #000 20%, transparent 75%); mask-image: radial-gradient(60% 70% at 50% 60%, #000 20%, transparent 75%); }
.s-closing__glow { position: absolute; left: 50%; bottom: -40%; width: min(1100px, 120vw); aspect-ratio: 2 / 1; transform: translateX(-50%); z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(22,119,210,.45), rgba(22,119,210,.12) 55%, transparent); filter: blur(20px); }
.page-home .s-closing__glow { display: none; }
.s-closing::after { content: ''; position: absolute; left: 50%; top: 0; width: min(720px, 90vw); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(94,169,246,.6), transparent); }
.s-closing__inner { display: grid; justify-items: center; gap: var(--s-4); }
.s-closing h2 { font-size: clamp(2.6rem, 1.6rem + 4vw, 5.25rem); line-height: 1; letter-spacing: -.045em; background: linear-gradient(180deg, #fff 30%, #a9c9ec); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-closing h2 span { background: linear-gradient(180deg, #8cc4ff, #3d8fe0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.s-closing p { color: var(--text-secondary); font-size: clamp(1.05rem, .95rem + .4vw, 1.3rem); }
.s-closing .s-actions { justify-content: center; margin-top: var(--s-3); }
.s-closing__trust { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin-top: var(--s-5); }
.s-closing__trust li { display: flex; align-items: center; gap: 8px; font-size: .875rem; color: var(--text-muted); }
.s-closing__trust svg { width: 16px; height: 16px; color: var(--ok); }

/* ---------- Footer, refined --------------------------------------------- */
.pub .sitefoot { position: relative; background: var(--bg); border-top: 0; padding-top: clamp(2.5rem, 5vh, 3.5rem); }
.pub .sitefoot::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: min(calc(100% - var(--gutter) * 2), var(--container)); height: 1px; background: linear-gradient(90deg, transparent, var(--border-strong) 15%, var(--border-strong) 85%, transparent); }
.pub .sitefoot__top { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: var(--s-6); padding-bottom: clamp(2rem, 4vh, 3rem); }
.pub .sitefoot__brand p { margin-top: var(--s-3); max-width: 34ch; }
.sitefoot__discord { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--s-4); padding: 8px 14px; border-radius: 999px; background: rgba(88, 101, 242, .14); color: #aab4ff; font-size: .8125rem; font-weight: 600; transition: background var(--t-fast), color var(--t-fast); }
.sitefoot__discord:hover { background: #5865f2; color: #fff; }
.sitefoot__discord svg { width: 16px; height: 16px; }
.pub .sitefoot nav h2 { color: #fff; font-size: .8125rem; letter-spacing: .02em; text-transform: none; margin-bottom: var(--s-3); }
.pub .sitefoot nav a { color: var(--text-muted); }
.pub .sitefoot nav a:hover { color: #fff; }
.pub .sitefoot__bottom { border-top: 1px solid var(--border); }

/* Closing + footer share the final screen on desktop, so the last stop
   shows exactly these two and nothing of the FAQ above. --foot-h is set
   from the footer's real height by home.js. */
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home .s-closing { min-height: calc(100dvh - var(--header-h) - var(--foot-h, 300px)); display: flex; align-items: center; }
  .page-home .s-closing > .container { width: min(calc(100% - var(--gutter) * 2), var(--container)); }
}
@media (max-width: 900px) { .pub .sitefoot__top { grid-template-columns: 1fr 1fr; } .pub .sitefoot__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .s-closing .s-actions .btn { width: 100%; } }
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home .s-closing { padding-block: clamp(1.5rem, 5vh, 5rem); }
  .page-home .s-closing h2 { font-size: clamp(2.6rem, .8rem + 4.5vh + 2vw, 5.25rem); }
  .page-home .s-closing__trust { margin-top: clamp(.5rem, 2vh, 1.5rem); }
  .page-home .sitefoot { padding-top: clamp(1.75rem, 4.5vh, 3.5rem); }
  .page-home .sitefoot__top { padding-bottom: clamp(1.25rem, 3.5vh, 3rem); }
}

/* Closing: the blue box is back, compact and centred (owner, 2026-09-23). */
.s-closing__box { width: min(100%, 860px); display: grid; justify-items: center; gap: var(--s-3); padding: clamp(2rem, 1.5rem + 2.2vw, 3.25rem) clamp(1.25rem, 4vw, 3rem); border-radius: 20px; background: radial-gradient(70% 110% at 50% 0%, rgba(255,255,255,.16), transparent 60%), linear-gradient(135deg, #1a7fe0, #0d4a8a); box-shadow: 0 24px 70px rgba(22, 119, 210, .25), inset 0 1px 0 rgba(255,255,255,.18); }
.s-closing__box h2 { font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.5rem) !important; background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #fff; }
.s-closing__box h2 span { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: #cfe5ff; }
.s-closing__box p { color: rgba(255,255,255,.85); }
.s-closing__box .s-actions { margin-top: var(--s-2); }
.pub .s-closing__box .btn--primary { background: #fff; border-color: #fff; color: #0a0b0d; }
.pub .s-closing__box .btn--primary:hover { background: #e8eef6; border-color: #e8eef6; }
.pub .s-closing__box .btn--quiet { border-color: rgba(255,255,255,.4); color: #fff; }
.pub .s-closing__box .btn--quiet:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.s-closing__box .s-closing__trust { margin-top: var(--s-3); }
.s-closing__box .s-closing__trust li { color: rgba(255,255,255,.8); }
.s-closing__box .s-closing__trust svg { color: #9fe3c2; }
.s-closing__glow { opacity: .6; }
/* Smaller closing box (owner: "masih terlalu besar"). */
.s-closing__box { width: min(100%, 620px); gap: var(--s-2); padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem); border-radius: 16px; }
.s-closing__box h2, .page-home .s-closing .s-closing__box h2 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem) !important; }
.s-closing__box p, .page-home .s-closing .s-closing__box p { font-size: 1rem; }
.s-closing__box .s-actions { margin-top: var(--s-3); }
.s-closing__box .s-closing__trust { margin-top: var(--s-3); gap: 6px 20px; }
.s-closing__box .s-closing__trust li { font-size: .8125rem; }

/* Closing is no longer forced to a full screen (owner: too much empty space).
   It takes its content height, shares the FAQ background so the page end
   reads as one continuous area, then the footer follows. */
@media (min-width: 1000px) and (min-height: 680px) {
  .page-home .s-closing { min-height: 0; display: block; padding-block: 0 clamp(2.5rem, 7vh, 4.5rem); }
  .page-home #faq { min-height: calc(100dvh - var(--header-h)); padding-bottom: clamp(2rem, 5vh, 3.5rem); }
}
.s-closing { background: var(--bg-subtle); padding-block: 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.s-closing::before, .s-closing::after { display: none; }
.s-closing__glow { bottom: -60%; opacity: .45; }
.pub .sitefoot { background: var(--bg); }
.pub .sitefoot::before { display: none; }
.pub .sitefoot__bottom { border-top: 0; }
.pub:not(.page-home) .sitefoot { background: var(--bg-subtle); }

/* Closing banner: a wide, short rectangle — text left, action right. */
.s-closing__box { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); text-align: left; padding: clamp(1.5rem, 1.2rem + 1vw, 2.25rem) clamp(1.5rem, 1rem + 2.5vw, 3rem); border-radius: 18px; }
.s-closing__text { display: grid; gap: 6px; justify-items: start; }
.s-closing__box h2, .page-home .s-closing .s-closing__box h2 { font-size: clamp(1.75rem, 1.3rem + 1.3vw, 2.5rem) !important; line-height: 1.05; }
.s-closing__box .s-closing__trust { justify-content: flex-start; margin-top: 6px; }
.pub .s-closing__box > .btn { flex: none; background: #fff; border-color: #fff; color: #0a0b0d; }
.pub .s-closing__box > .btn:hover { background: #e8eef6; border-color: #e8eef6; }
@media (max-width: 760px) {
  .s-closing__box { flex-direction: column; align-items: flex-start; }
  .pub .s-closing__box > .btn { width: 100%; }
}
/* "Play?" was pale blue on blue and read as dim: make it the brightest word. */
.s-closing__box h2 span { color: #fff !important; text-shadow: 0 0 18px rgba(255,255,255,.55), 0 0 42px rgba(140,200,255,.45); }
.s-closing__box h2 { color: rgba(255,255,255,.92); }
/* "Play?" matches "Ready to": plain white, no glow. */
.s-closing__box h2, .s-closing__box h2 span { color: #fff !important; text-shadow: none !important; }

/* Package page: every card's sections start on the same lines. */
.s-plan .s-checks { min-height: calc(3 * 1.6em + 2 * 7px); }
.pub .s-plan__cta { justify-content: space-between; padding-inline: 18px; }
.pub .s-plan__cta [data-total] { font-weight: 700; font-variant-numeric: tabular-nums; }
.s-plan .s-checks { align-content: start; }

/* ---------- Status page (compact, 2026-09-24) -------------------------- */
.s-status { display: grid; gap: clamp(1.75rem, 3vw, 2.5rem); }
.s-status__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-5); flex-wrap: wrap; }
.s-status__head h1 { font-size: var(--fs-h1); letter-spacing: -.04em; line-height: 1.05; }
.s-status__head > div > p:last-child { color: var(--text-secondary); margin-top: var(--s-2); }
.s-status__signal { display: inline-flex; align-items: center; gap: 8px; margin-bottom: var(--s-3); padding: 4px 12px 4px 10px; border-radius: 999px; background: rgba(63,208,143,.1); color: var(--ok); font-size: .8125rem; font-weight: 600; }
.s-status__signal i { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 0 rgba(63,208,143,.6); animation: s-pulse 2s infinite; }
.s-status__signal--warn { background: rgba(228,195,139,.12); color: #e4c38b; }
.s-status__signal--warn i { background: #e4c38b; }
@keyframes s-pulse { 0% { box-shadow: 0 0 0 0 rgba(63,208,143,.55); } 70% { box-shadow: 0 0 0 8px rgba(63,208,143,0); } 100% { box-shadow: 0 0 0 0 rgba(63,208,143,0); } }
@media (prefers-reduced-motion: reduce) { .s-status__signal i { animation: none; } }
.s-status__build { display: grid; grid-template-columns: auto auto; column-gap: var(--s-5); align-items: baseline; padding: 14px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: border-color var(--t-fast); }
.s-status__build:hover { border-color: var(--border-strong); }
.s-status__build span { grid-column: 1 / -1; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.s-status__build strong { font-size: 1.5rem; letter-spacing: -.02em; }
.s-status__build em { font-style: normal; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-size: .875rem; font-weight: 600; }
.s-status__build em svg { width: 15px; height: 15px; }
.s-status__note { padding: 12px 16px; border-radius: 10px; font-size: .9rem; background: var(--accent-wash); color: #d6e8ff; }
.s-status__note--warn { background: rgba(228,195,139,.12); color: #f0d9ad; }
.s-status__block { display: grid; gap: var(--s-4); }
.s-status__block h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.s-status__blockhead { display: flex; justify-content: space-between; align-items: center; gap: var(--s-4); }

.s-svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); border-radius: var(--r-surface); background: var(--surface); }
.s-svc__item { padding: 18px 20px; display: grid; gap: 8px; align-content: start; }
.s-svc__item + .s-svc__item { border-left: 1px solid var(--border); }
.s-svc__top { display: flex; align-items: center; gap: 10px; }
.s-svc__top h3 { flex: 1; font-size: 1rem; min-width: 0; }
.s-svc__icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--surface-raised); color: var(--accent-text); flex: none; }
.s-svc__icon svg { width: 17px; height: 17px; }
.s-svc__item p { color: var(--text-muted); font-size: .8125rem; line-height: 1.5; padding-left: 42px; }

.s-avail { border: 1px solid var(--border); border-radius: var(--r-surface); background: var(--surface); }
.s-avail__row { display: grid; grid-template-columns: minmax(180px, 240px) minmax(0, 1fr) 32px; align-items: center; gap: var(--s-5); padding: 16px 20px; }
.s-avail__row + .s-avail__row { border-top: 1px solid var(--border); }
.s-avail__game { display: grid; gap: 6px; justify-items: start; }
.s-avail__game h3 { font-size: 1.0625rem; }
.s-avail__tools { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.s-avail__tools li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--surface-raised); font-size: .8125rem; color: var(--text-secondary); }
.s-avail__tools li i { width: 6px; height: 6px; border-radius: 50%; background: var(--ok); }
.s-avail__tools li.is-off { opacity: .55; }
.s-avail__tools li.is-off i { background: var(--text-muted); }
.s-avail__soon { color: var(--text-muted); font-size: .875rem; }
.s-avail__link { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); transition: background var(--t-fast), color var(--t-fast); }
.s-avail__link:hover { background: var(--surface-raised); color: #fff; }
.s-avail__link svg { width: 16px; height: 16px; }
.s-status__help { color: var(--text-muted); font-size: .875rem; text-align: center; }
.s-status__help a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent-text); font-weight: 600; }
.s-status__help a:hover { color: #fff; }
.s-status__help svg { width: 14px; height: 14px; }
@media (max-width: 900px) {
  .s-svc { grid-template-columns: 1fr; }
  .s-svc__item + .s-svc__item { border-left: 0; border-top: 1px solid var(--border); }
  .s-avail__row { grid-template-columns: minmax(0, 1fr) 32px; }
  .s-avail__tools, .s-avail__soon { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Account pages: one compact centred card (2026-09-24) ------- */
.s-auth { min-height: calc(100dvh - var(--header-h) - 64px); display: grid; place-items: center; padding: clamp(1.5rem, 4vh, 3rem) var(--gutter); }
.s-auth__card { width: min(100%, 420px); padding: clamp(1.5rem, 1.2rem + 1.5vw, 2.25rem); background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 24px 60px rgba(0,0,0,.35); }
.s-auth__head { display: grid; justify-items: center; text-align: center; gap: 6px; margin-bottom: var(--s-5); }
.s-auth__mark { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--s-2); border-radius: 12px; background: var(--accent-wash); }
.s-auth__mark .rx-logo { width: 24px; height: 24px; }
.s-auth__head h1 { font-size: 1.75rem; letter-spacing: -.035em; line-height: 1.1; }
.s-auth__head p { color: var(--text-secondary); font-size: .9375rem; }
.s-auth .form { display: grid; gap: var(--s-4); }
.s-auth .field { display: grid; gap: 6px; margin: 0; }
.s-auth .field__label { font-size: .8125rem; font-weight: 600; color: var(--text-secondary); margin: 0; }
.s-auth .input { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border-strong); color: #fff; font-size: .9375rem; }
.s-auth .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,119,210,.25); }
.s-auth .field__hint { font-size: .75rem; color: var(--text-muted); margin: 0; }
.s-auth .field__aside { display: flex; justify-content: flex-end; margin-top: 2px; }
.s-auth .field__aside a { font-size: .8125rem; color: var(--accent-text); text-decoration: none; }
.s-auth .field__aside a:hover { color: #fff; }
.s-auth .btn--lg { min-height: 48px; margin-top: var(--s-2); }
.s-auth .note { margin-bottom: var(--s-4); border-radius: 10px; }
.s-auth__foot { margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--border); text-align: center; font-size: .875rem; color: var(--text-muted); }
.s-auth__foot a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.s-auth__foot a:hover { color: #fff; }
.pub.is-auth .auth-footer { max-width: var(--container); margin-inline: auto; padding: 20px var(--gutter); }
/* Short laptop screens: tighten the card so every form fits without scrolling. */
@media (max-height: 820px) {
  .s-auth { padding-block: 16px; }
  .s-auth__card { padding: 20px 24px; }
  .s-auth__head { margin-bottom: 16px; gap: 4px; }
  .s-auth__mark { width: 40px; height: 40px; margin-bottom: 4px; }
  .s-auth__head h1 { font-size: 1.5rem; }
  .s-auth .form { gap: 12px; }
  .s-auth .input { min-height: 42px; }
  .s-auth .btn--lg { min-height: 44px; margin-top: 4px; }
  .s-auth__foot { margin-top: 16px; padding-top: 12px; }
  .pub.is-auth .auth-footer { padding-block: 12px; }
}
/* Form messages inside the account card. */
.s-auth .note { display: grid; gap: 2px; padding: 10px 14px; border: 0; border-radius: 10px; background: var(--accent-wash); }
.s-auth .note:focus { outline: none; }
.s-auth .note__label { font: 600 .8125rem var(--font-sans); letter-spacing: 0; text-transform: none; color: #9cc8f5; }
.s-auth .note p { margin: 0; font-size: .8125rem; color: var(--text-secondary); }
.s-auth .note--error { background: rgba(243,170,165,.1); }
.s-auth .note--error .note__label { color: #f3aaa5; }
.s-auth .note--ok { background: rgba(63,208,143,.1); }
.s-auth .note--ok .note__label { color: var(--ok); }
.s-auth .note--warn { background: rgba(228,195,139,.12); }
.s-auth .note--warn .note__label { color: #e4c38b; }
.s-auth .note::before, .s-auth .note::after { display: none; }

/* ---------- Signed-in user menu (masthead) ------------------------------ */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 4px 12px 4px 4px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover, .usermenu[open] > summary { border-color: #4a505a; background: var(--surface-raised); }
.usermenu__avatar { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: #fff; }
.usermenu__avatar svg { width: 17px; height: 17px; }
.usermenu__avatar::after { content: ''; position: absolute; right: -1px; bottom: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 2px solid var(--surface); }
.usermenu__name { max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 600; color: #fff; }
.usermenu__caret { width: 14px; height: 14px; color: var(--text-muted); transition: transform var(--t-fast); }
.usermenu[open] .usermenu__caret { transform: rotate(180deg); }
.usermenu__panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: 220px; padding: 6px; border-radius: 14px; background: var(--surface-raised); border: 1px solid var(--border-strong); box-shadow: 0 20px 50px rgba(0,0,0,.5); display: grid; }
.usermenu__who { padding: 8px 10px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--border); display: grid; }
.usermenu__who small { font-size: .75rem; color: var(--text-muted); }
.usermenu__who strong { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usermenu__panel a { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; font-size: .875rem; color: var(--text-secondary); }
.usermenu__panel a:hover { background: rgba(255,255,255,.06); color: #fff; }
.usermenu__panel a svg { width: 16px; height: 16px; color: var(--text-muted); }
.usermenu__panel .usermenu__out { margin-top: 4px; border-top: 1px solid var(--border); border-radius: 0 0 8px 8px; padding-top: 11px; }
.usermenu__panel .usermenu__out:hover { color: #f3aaa5; }
@media (max-width: 900px) {
  .usermenu__name, .usermenu__caret { display: none; }
  .usermenu > summary { padding: 3px; }
}

/* ---------- Member dashboard (compact, 2026-09-24) ---------------------- */
.s-dash { display: grid; gap: var(--s-5); }
.s-dash__head { display: flex; justify-content: space-between; align-items: center; gap: var(--s-5); flex-wrap: wrap; }
.s-dash__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
.s-dash__avatar { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: 1.25rem; font-weight: 700; }
.s-dash__who h1 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); letter-spacing: -.035em; line-height: 1.1; overflow-wrap: anywhere; }
.s-dash__who p { color: var(--text-secondary); font-size: .9375rem; margin-top: 2px; }
.s-dash__actions { display: flex; gap: var(--s-3); }
.s-dash__stats { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
.s-dash__stats li { display: grid; gap: 2px; padding: 16px 20px; border-radius: 12px; background: var(--surface); border: 1px solid var(--border); }
.s-dash__stats strong { font-size: 1.75rem; line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.s-dash__stats span { font-size: .8125rem; color: var(--text-muted); }
.s-dash__card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); overflow: hidden; }
.s-dash__tabs { display: flex; gap: 4px; padding: 8px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.s-dash__tabs button { flex: none; padding: 8px 14px; border-radius: 8px; background: transparent; color: var(--text-secondary); font: 500 .875rem var(--font-sans); }
.s-dash__tabs button:hover { color: #fff; background: rgba(255,255,255,.05); }
.s-dash__tabs button[aria-selected=true] { color: #fff; background: rgba(255,255,255,.09); }
.s-dash .dash__panel { padding: 20px; }
.s-dash .dash__panel:focus { outline: none; }

.s-orders { display: grid; }
.s-orders__row { display: grid; grid-template-columns: minmax(0, 2.2fr) 1fr 1fr 1fr 1.1fr 130px; align-items: center; gap: 12px; padding: 14px 4px; font-size: .875rem; color: var(--text-secondary); }
.s-orders__row + .s-orders__row { border-top: 1px solid var(--border); }
.s-orders__row--head { padding-block: 0 10px; font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.s-orders__prod { display: grid; gap: 2px; min-width: 0; }
.s-orders__prod strong { color: #fff; font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.s-orders__prod a { font-size: .75rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.s-orders__prod a:hover { color: var(--accent-text); }
.s-orders__row .btn { justify-self: end; }
.s-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 600 .75rem var(--font-sans); font-style: normal; white-space: nowrap; }
.s-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.s-badge--ok { background: rgba(63,208,143,.1); color: var(--ok); }
.s-badge--warn { background: rgba(228,195,139,.12); color: #e4c38b; }
.s-badge--off { background: rgba(255,255,255,.06); color: var(--text-muted); }
.s-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); font-size: .8125rem; color: var(--text-muted); }
.s-pager div { display: flex; gap: 4px; }
.s-pager a, .s-pager span[aria-current] { display: grid; place-items: center; min-width: 32px; height: 32px; border-radius: 8px; color: var(--text-secondary); }
.s-pager a:hover { background: rgba(255,255,255,.06); color: #fff; }
.s-pager span[aria-current] { background: #fff; color: #0a0b0d; font-weight: 600; }
.s-dash__empty { display: grid; justify-items: center; gap: 6px; text-align: center; padding: 36px 16px; }
.s-dash__empty h3 { font-size: 1.125rem; }
.s-dash__empty p { color: var(--text-muted); font-size: .875rem; margin-bottom: 10px; }

/* Existing review / password / account panels, restyled inside the card. */
.s-dash .reviews { display: grid; gap: 12px; }
.s-dash .reviewitem { padding: 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); }
.s-dash .reviewitem__head { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.s-dash .reviewitem__head h3 { font-size: 1rem; }
.s-dash .form, .s-dash .pwform { display: grid; gap: 14px; max-width: 560px; }
.s-dash .field { display: grid; gap: 6px; margin: 0; }
.s-dash .field__label { font: 600 .8125rem var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-secondary); margin: 0; }
.s-dash .input, .s-dash .textarea { width: 100%; min-height: 44px; padding: 10px 14px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border-strong); color: #fff; font-size: .9375rem; }
.s-dash .input:focus, .s-dash .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,119,210,.25); }
.s-dash .field__hint { font-size: .75rem; color: var(--text-muted); margin: 0; }
.s-dash .form__grid--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.s-dash .pwform .btn, .s-dash .reviewitem form .btn { justify-self: start; }
.s-dash .spec { display: grid; margin: 0; max-width: 560px; }
.s-dash .spec__row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--border); font-size: .875rem; }
.s-dash .spec__row:last-child { border-bottom: 0; }
.s-dash .spec__row dt { color: var(--text-muted); }
.s-dash .spec__row dd { margin: 0; color: #fff; font-weight: 500; text-align: right; overflow-wrap: anywhere; }
.s-dash .empty { display: grid; justify-items: center; text-align: center; gap: 6px; padding: 32px 16px; }
.s-dash .empty__title { font-size: 1.125rem; }
.s-dash .empty__body { color: var(--text-muted); font-size: .875rem; }
.s-dash .note { display: grid; gap: 2px; margin-bottom: 14px; padding: 10px 14px; border: 0; border-radius: 10px; background: rgba(63,208,143,.1); }
.s-dash .note--error { background: rgba(243,170,165,.1); }
.s-dash .note__label { font: 600 .8125rem var(--font-sans); letter-spacing: 0; text-transform: none; }
.s-dash .note p { margin: 0; font-size: .8125rem; color: var(--text-secondary); }

@media (max-width: 900px) {
  .s-orders__row--head { display: none; }
  .s-orders__row { grid-template-columns: 1fr 1fr; gap: 8px 12px; padding: 16px 0; }
  .s-orders__prod { grid-column: 1 / -1; }
  .s-orders__row > span[data-label]::before { content: attr(data-label); display: block; font-size: .6875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; }
  .s-orders__row .btn { grid-column: 1 / -1; justify-self: stretch; }
  .s-dash .form__grid--2 { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .s-dash__actions { width: 100%; }
  .s-dash__actions .btn { flex: 1; }
  .s-dash__stats li { padding: 12px 14px; }
  .s-dash__stats strong { font-size: 1.375rem; }
}
.s-dash .form__grid--2 { align-items: start; }
@media (max-width: 900px) { .s-orders__row--head + .s-orders__row { border-top: 0; padding-top: 4px; } }

/* ---------- Downloads (compact, 2026-09-24) ----------------------------- */
.s-dl { display: grid; gap: var(--s-5); }
.s-dl__head h1 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -.04em; line-height: 1.05; }
.s-dl__head p { color: var(--text-secondary); margin-top: 4px; }
.s-dl__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: stretch; }
.s-dl__card { display: flex; flex-direction: column; gap: var(--s-4); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); }
.s-dl__card h2 { font-size: 1.25rem; letter-spacing: -.02em; }
.s-dl__card > p { color: var(--text-secondary); font-size: .9375rem; margin-top: -8px; }
.s-dl__top { display: flex; align-items: center; gap: 14px; }
.s-dl__icon { display: grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 12px; background: var(--accent-wash); color: var(--accent-text); }
.s-dl__icon svg { width: 22px; height: 22px; }
.s-dl__icon--lock { background: rgba(228,195,139,.12); color: #e4c38b; }
.s-dl__meta { color: var(--text-muted); font-size: .8125rem; margin-top: 2px; }
.s-dl .btn--lg svg { width: 18px; height: 18px; }
.s-dl__card .btn--block { margin-top: auto; }
.s-dl__actions { display: grid; gap: 8px; margin-top: auto; }
.s-dl__actions .btn--block { margin-top: 0; }
.s-dl__extra { display: grid; gap: 6px; }
.s-dl__extra a { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; background: var(--surface-raised); font-size: .875rem; color: var(--text-secondary); }
.s-dl__extra a:hover { color: #fff; }
.s-dl__extra svg { width: 16px; height: 16px; }
.s-dl__notes summary { cursor: pointer; font-size: .875rem; color: var(--accent-text); font-weight: 600; }
.s-dl__notes .prose { margin-top: 8px; font-size: .875rem; color: var(--text-secondary); white-space: pre-line; }
.s-dl__stepshead { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.s-dl__steps { list-style: none; display: grid; }
.s-dl__steps li { display: flex; gap: 14px; padding: 12px 0; }
.s-dl__steps li + li { border-top: 1px solid var(--border); }
.s-dl__steps li:first-child { padding-top: 0; }
.s-dl__steps li:last-child { padding-bottom: 0; }
.s-dl__steps span { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--accent); color: #fff; font-size: .8125rem; font-weight: 700; }
.s-dl__steps strong { display: block; font-size: .9375rem; }
.s-dl__steps p { color: var(--text-muted); font-size: .8125rem; margin-top: 2px; }
@media (max-width: 860px) { .s-dl__grid { grid-template-columns: 1fr; } }
.s-dl__stepshead { min-height: 48px; }
.s-dl__text { color: var(--text-secondary); font-size: .9375rem; }
/* Bundle card: file list + release facts fill the card with real information. */
.s-dl__top > div { flex: 1; min-width: 0; }
.s-dl__ver { flex: none; padding: 4px 10px; border-radius: 999px; background: rgba(63,208,143,.1); color: var(--ok); font-size: .75rem; font-weight: 700; }
.s-dl__files { list-style: none; display: grid; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); }
.s-dl__files li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.s-dl__files li + li { border-top: 1px solid var(--border); }
.s-dl__files li > div { flex: 1; min-width: 0; display: grid; }
.s-dl__files strong { font-size: .9375rem; }
.s-dl__files small { font-size: .8125rem; color: var(--text-muted); }
.s-dl__ficon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 9px; background: var(--surface-raised); color: var(--accent-text); }
.s-dl__ficon svg { width: 17px; height: 17px; }
.s-dl__files a { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--text-muted); }
.s-dl__files a:hover { background: var(--surface-raised); color: #fff; }
.s-dl__files a svg { width: 16px; height: 16px; }
.s-dl__facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.s-dl__facts div { padding: 10px 12px; border-radius: 10px; background: var(--surface-raised); }
.s-dl__facts dt { font-size: .6875rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.s-dl__facts dd { margin: 2px 0 0; font-size: .875rem; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 520px) { .s-dl__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Steps share the card height evenly so neither card shows dead space. */
@media (min-width: 861px) {
  .s-dl__steps { flex: 1; grid-auto-rows: 1fr; }
  .s-dl__steps li, .s-dl__steps li:first-child, .s-dl__steps li:last-child { align-items: center; padding: 0; }
}
@media (min-width: 861px) { .s-dl__steps { grid-auto-rows: minmax(64px, 1fr); } }

/* ---------- Checkout (compact, 2026-09-24) ------------------------------ */
.s-co { display: grid; gap: var(--s-5); }
.s-co__head h1 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -.04em; line-height: 1.05; }
.s-co__head p { color: var(--text-secondary); margin-top: 4px; }
.s-co__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--s-4); align-items: start; }
.s-co__card { display: grid; gap: var(--s-4); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); }
.s-co__cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.s-co__cardhead h2 { font-size: 1.125rem; letter-spacing: -.02em; }
.s-co__cardhead span { font-size: .8125rem; color: var(--text-muted); }
.s-co__methods { display: grid; gap: 10px; }
.s-co__method { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; text-align: left; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent-wash); color: #fff; transition: background var(--t-fast); }
.s-co__method:hover { background: rgba(22,119,210,.24); }
.s-co__method:disabled { opacity: .6; cursor: wait; }
.s-co__micon { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 10px; background: var(--surface-raised); color: #fff; }
.s-co__micon svg { width: 20px; height: 20px; }
.s-co__mtext { flex: 1; display: grid; min-width: 0; }
.s-co__mtext strong { font-size: 1rem; }
.s-co__mtext small { font-size: .8125rem; color: var(--text-secondary); }
.s-co__mgo { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; background: var(--accent); font-size: .875rem; font-weight: 600; white-space: nowrap; }
.s-co__mgo svg { width: 16px; height: 16px; }
.s-co__soon { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; background: var(--bg-subtle); }
.s-co__soon > span { font-size: .75rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.s-co__soon ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.s-co__soon li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 6px; border-radius: 999px; background: var(--surface-raised); font-size: .8125rem; color: var(--text-muted); }
.s-co__soon li span { display: grid; place-items: center; width: 18px; height: 18px; opacity: .7; }
.s-co__soon li svg { width: 14px; height: 14px; }
.s-co__next { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.s-co__next li { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--text-secondary); }
.s-co__next li span { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--surface-raised); color: var(--accent-text); font-size: .75rem; font-weight: 700; }
.s-co__product { display: grid; gap: 2px; padding: 14px 16px; border-radius: 12px; background: var(--bg-subtle); }
.s-co__product strong { font-size: 1.25rem; letter-spacing: -.02em; }
.s-co__product span { font-size: .8125rem; color: var(--text-muted); }
.s-co__rows { display: grid; gap: 8px; margin: 0; }
.s-co__rows div { display: flex; justify-content: space-between; gap: 12px; font-size: .875rem; }
.s-co__rows dt { color: var(--text-muted); }
.s-co__rows dd { margin: 0; color: #fff; font-weight: 500; text-align: right; }
.s-co__promo { display: grid; gap: 6px; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.s-co__promo .field__label { font: 600 .8125rem var(--font-sans); letter-spacing: 0; text-transform: none; color: var(--text-secondary); margin: 0; }
.s-co__promo .promo__row { display: flex; gap: 8px; }
.s-co__promo .input { flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border-strong); color: #fff; font-size: .875rem; text-transform: uppercase; }
.s-co__promo .input::placeholder { text-transform: none; }
.s-co__promo .input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(22,119,210,.25); }
.s-co__promo .btn { min-height: 42px; }
.s-co__promo .promo__msg { margin: 0; font-size: .8125rem; min-height: 0; }
.s-co__promo .promo__msg:empty { display: none; }
.s-co__promo .promo__msg.is-ok { color: var(--ok); }
.s-co__promo .promo__msg.is-error { color: #f3aaa5; }
.s-co__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.s-co__total > span { font-size: .875rem; font-weight: 600; color: var(--text-secondary); }
.s-co__total strong { display: flex; align-items: baseline; gap: 10px; font-size: 2rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.s-co__total .summary__was { font-size: 1rem; color: var(--text-muted); text-decoration: line-through; font-weight: 500; }
.s-co__legal { font-size: .75rem; color: var(--text-muted); }
.s-co__legal a { color: var(--text-secondary); text-decoration: underline; }
@media (max-width: 900px) { .s-co__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) {
  .s-co__method { flex-wrap: wrap; }
  .s-co__mgo { width: 100%; justify-content: center; }
  .s-co__next { grid-template-columns: 1fr; }
}
/* Equal-height cards; the "what happens next" row sits on the left card's floor. */
.s-co__grid { align-items: stretch; }
.s-co__card { display: flex; flex-direction: column; }
.s-co__next { margin-top: auto; }
.s-co__promo { margin: 0; }
.s-co__rows { margin: 0; }
.s-co__after { flex: 1; display: flex; flex-direction: column; gap: 12px; padding-top: var(--s-4); border-top: 1px solid var(--border); }
.s-co__after h3 { font-size: .8125rem; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); }
.s-co__after .s-co__next { flex: 1; margin: 0; padding: 0; border: 0; grid-template-columns: 1fr; grid-auto-rows: minmax(52px, 1fr); gap: 0; }
.s-co__after .s-co__next li { align-items: center; gap: 14px; }
.s-co__after .s-co__next li + li { border-top: 1px solid var(--border); }
.s-co__after .s-co__next li span { width: 28px; height: 28px; background: var(--accent); color: #fff; font-size: .8125rem; }
.s-co__after .s-co__next li div { display: grid; }
.s-co__after .s-co__next strong { font-size: .9375rem; color: #fff; }
.s-co__after .s-co__next small { font-size: .8125rem; color: var(--text-muted); }

/* ---------- Invoice (compact, 2026-09-24) ------------------------------- */
.s-inv { display: grid; gap: var(--s-5); }
.s-inv__head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; }
.s-inv__head h1 { font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.5rem); letter-spacing: -.04em; line-height: 1.05; }
.s-inv__head p { color: var(--text-secondary); margin-top: 4px; }
.s-inv__head .s-badge { font-size: .8125rem; padding: 5px 12px; }
.s-inv__mono { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: .875em; letter-spacing: .02em; }
.s-inv__grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(300px, 1fr); gap: var(--s-4); align-items: stretch; }
.s-inv__card { display: flex; flex-direction: column; gap: var(--s-4); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-surface); min-width: 0; }
.s-inv__cardhead { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.s-inv__cardhead h2 { font-size: 1.125rem; letter-spacing: -.02em; }
.s-inv__cardhead span { font-size: .8125rem; color: var(--text-muted); }
.s-inv__text { color: var(--text-secondary); font-size: .9375rem; }
.s-inv__amount { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 12px; background: var(--accent-wash); border: 1px solid rgba(22,119,210,.4); }
.s-inv__amount > span { font-size: .875rem; font-weight: 600; color: #9cc8f5; }
.s-inv__amount strong { font-size: 2rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.s-inv__amount small { margin-left: 6px; font-size: .8125rem; color: var(--text-muted); }
.s-inv__rows { display: grid; margin: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-subtle); }
.s-inv__rows > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 8px 14px; font-size: .875rem; }
.s-inv__rows > div + div { border-top: 1px solid var(--border); }
.s-inv__rows dt { color: var(--text-muted); }
.s-inv__rows dd { margin: 0; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 500; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.s-inv__rows--plain { border: 0; background: none; border-radius: 0; }
.s-inv__rows--plain > div { min-height: 0; padding: 0; }
.s-inv__rows--plain > div + div { border-top: 0; margin-top: 8px; }
.s-inv__copy { padding: 4px 10px; border-radius: 6px; background: var(--surface-raised); border: 1px solid var(--border-strong); color: var(--text-secondary); font: 600 .75rem var(--font-sans); }
.s-inv__copy:hover { color: #fff; border-color: #4a505a; }
.s-inv__proof { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 12px; background: rgba(88,101,242,.1); }
.s-inv__proof > div { flex: 1; display: grid; gap: 2px; min-width: 0; }
.s-inv__proof strong { font-size: .9375rem; }
.s-inv__proof small { font-size: .8125rem; color: var(--text-secondary); }
.s-inv__proofico { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 10px; background: rgba(88,101,242,.2); color: #aab4ff; }
.s-inv__proofico svg { width: 18px; height: 18px; }
.s-inv__proof .btn { flex: none; background: #5865f2; border-color: #5865f2; }
.s-inv__proof .btn:hover { background: #4752c4; border-color: #4752c4; }
.s-inv__wait { display: flex; align-items: center; gap: 12px; margin-top: auto; padding: 12px 14px; border-radius: 12px; background: rgba(228,195,139,.08); font-size: .875rem; color: #e4c38b; }
.s-inv__wait > span:nth-child(2) { flex: 1; }
.s-inv__wait .spinner { width: 16px; height: 16px; flex: none; border-radius: 50%; border: 2px solid rgba(228,195,139,.3); border-top-color: #e4c38b; animation: s-spin .9s linear infinite; }
@keyframes s-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .s-inv__wait .spinner { animation: none; } }
.s-inv__poll { margin: -8px 0 0; font-size: .8125rem; color: var(--text-muted); }
.s-inv__poll:empty { display: none; }
.s-inv__key { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 12px; background: rgba(63,208,143,.08); border: 1px solid rgba(63,208,143,.35); }
.s-inv__key span { flex: 1; min-width: 0; font-family: ui-monospace, Consolas, monospace; font-size: 1.0625rem; letter-spacing: .04em; color: #fff; overflow-wrap: anywhere; }
.s-inv__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.s-inv__actions .btn svg { width: 17px; height: 17px; }
.s-inv__more summary, .s-inv__link { display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; font-weight: 600; color: var(--accent-text); cursor: pointer; }
.s-inv__more summary { margin-bottom: 10px; }
.s-inv__link svg { width: 15px; height: 15px; }
.s-inv__card .s-co__total { margin-top: auto; }
.s-inv__card .s-co__total small { font-size: .8125rem; color: var(--text-muted); font-weight: 500; }
@media (max-width: 900px) { .s-inv__grid { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .s-inv__proof { flex-wrap: wrap; } .s-inv__proof .btn { width: 100%; } .s-inv__amount strong { font-size: 1.625rem; } }
/* Invoice cards take their own height: no stretched dead space. */
.s-inv__grid { align-items: start; }
.s-inv__card .s-co__total, .s-inv__wait { margin-top: 0; }
/* "Starting from" price scales with its card so long IDR amounts
   (Rp180.000) never spill out; USD and IDR use the same size. */
.s-pricecard { container-type: inline-size; }
.s-from__price, .page-home .s-from__price { font-size: min(2.9rem, 16cqi); white-space: nowrap; }
.s-from__price--soon, .page-home .s-from__price--soon { font-size: min(1.625rem, 11cqi) !important; }
.s-pagehead h1 span { color: #fff; }
/* Blue accent on the last part of every page title, matching the homepage. */
.s-dl__head h1 span, .s-co__head h1 span, .s-inv__head h1 span, .s-status__head h1 span,
.s-dash__who h1 span, .s-auth__head h1 span, .pub .pagehead h1 span { color: #fff; }
/* Chrome autofill paints inputs light blue; keep member forms dark too. */
.s-auth .input:-webkit-autofill, .s-auth .input:-webkit-autofill:hover, .s-auth .input:-webkit-autofill:focus,
.s-dash .input:-webkit-autofill, .s-co__promo .input:-webkit-autofill {
  -webkit-text-fill-color: #fff; caret-color: #fff; transition: background-color 9999s ease-out 0s;
  -webkit-box-shadow: 0 0 0 1000px var(--bg) inset; box-shadow: 0 0 0 1000px var(--bg) inset; }

/* One typeface everywhere (owner, 2026-09-24): codes use Instrument Sans too,
   with tabular figures and a little tracking so keys stay easy to read. */
html[data-design="night"] { --font-mono: "Instrument Sans", "Segoe UI", system-ui, sans-serif; }
.pub .mono, .pub code, .pub kbd, .pub .label, .pub .eyebrow, .s-inv__mono, .s-inv__key span, .pub .docstep__num {
  font-family: var(--font-sans); font-variant-numeric: tabular-nums; }
.s-inv__mono { font-size: 1em; letter-spacing: .01em; }
.s-inv__key span { font-weight: 600; letter-spacing: .06em; }
/* Downloads: one bundle card per game the member owns, stacked on the left. */
.s-dl__builds { display: grid; gap: var(--s-4); align-content: start; }
.s-dl__game { color: inherit; }
.s-dl__grid { align-items: start; }

/* Shared typography for Products, Setup and Downloads game pickers. */
.pub .s-gamepicker-head{margin-bottom:32px;text-align:center}
.pub .s-gamepicker-head h1{font-family:var(--font-display);font-size:var(--fs-h1);font-weight:700;letter-spacing:var(--tracking-heading);line-height:1.1}
.pub .s-gamepicker-head>p{font-family:var(--font-display);font-size:1rem;font-weight:400;line-height:1.6;color:var(--text-secondary);margin:12px auto 0}
.pub .s-gamepicker-head>.s-back{display:block;text-align:left;margin-bottom:20px}


/* Public-site scrollbars: compact branded treatment. */
@media (forced-colors: none) {
  html[data-design="night"], html[data-design="night"] .pub * {
    scrollbar-width: thin;
    scrollbar-color: #454d5a #0a0b0d;
  }
  html[data-design="night"] { scrollbar-gutter: stable; }
  @supports selector(::-webkit-scrollbar) {
    html[data-design="night"], html[data-design="night"] .pub * {
      scrollbar-width: auto;
      scrollbar-color: auto;
    }
    html[data-design="night"]::-webkit-scrollbar, .pub ::-webkit-scrollbar {
      width: 10px; height: 10px;
    }
    html[data-design="night"]::-webkit-scrollbar-track, .pub ::-webkit-scrollbar-track {
      background: #0a0b0d;
    }
    html[data-design="night"]::-webkit-scrollbar-thumb, .pub ::-webkit-scrollbar-thumb {
      min-height: 48px; background: #454d5a;
      border: 3px solid #0a0b0d; border-radius: 999px;
    }
    html[data-design="night"]::-webkit-scrollbar-thumb:hover, .pub ::-webkit-scrollbar-thumb:hover {
      background: #1677d2; border-width: 2px;
    }
    html[data-design="night"]::-webkit-scrollbar-thumb:active, .pub ::-webkit-scrollbar-thumb:active {
      background: #5ea9f6; border-width: 2px;
    }
    html[data-design="night"]::-webkit-scrollbar-button, .pub ::-webkit-scrollbar-button {
      display: none; width: 0; height: 0;
    }
    html[data-design="night"]::-webkit-scrollbar-corner, .pub ::-webkit-scrollbar-corner {
      background: #0a0b0d;
    }
  }
}

/* Home access CTA: approved centered design. */
.pub .s-access { background: var(--bg); border: 0; }
.pub .s-access__campaign { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: clamp(48px,7vw,100px) 0; }
.pub .s-access__heading { margin: 0; font-size: clamp(2.5rem,5.2vw,5rem); line-height: 1.08; letter-spacing: -.045em; font-weight: 700; color: #fff; }
.pub .s-access__figure { display: block; margin-top: 14px; font-size: clamp(3rem,8vw,7.25rem); line-height: 1.08; letter-spacing: -.055em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pub .s-access__buy { display: inline-flex; align-items: center; justify-content: center; gap: 16px; width: min(100%,440px); min-height: 70px; margin-top: 40px; padding: 18px 28px; border-radius: 6px; background: #0060ff; color: #fff; font-size: 1.25rem; line-height: 1.3; font-weight: 600; }
.pub .s-access__buy svg { width: 24px; height: 24px; }
.pub .s-access__buy:hover { background: #0051db; }
.pub .s-access__buy:focus-visible { outline: 3px solid #8bbcff; outline-offset: 5px; }
.pub .s-access__switch { display: flex; margin-top: 28px; padding: 0; border: 1px solid #30343b; border-radius: 10px; overflow: hidden; background: transparent; }
.pub .s-access__switch button { min-width: 78px; min-height: 40px; padding: 8px 16px; border-radius: 0; color: #d1d5dc; font-size: .9375rem; }
.pub .s-access__switch button[aria-pressed=true] { color: #fff; background: #0060ff; }
@media(max-width: 640px) {
  .pub .s-access__campaign { padding: 36px 0; }
  .pub .s-access__heading { font-size: clamp(2.25rem,9vw,3.5rem); }
  .pub .s-access__figure { font-size: clamp(2.5rem,11.2vw,4.5rem); margin-top: 12px; }
  .pub .s-access__buy { margin-top: 30px; min-height: 60px; font-size: 1.0625rem; }
}

/* Balance public catalogue, single-package pages and authentication forms. */
html[data-design="night"]:has(body.is-auth){scrollbar-gutter:auto}
.pub .s-page:has(>.s-products-picker-head),.pub .s-page:has(>.s-setup-picker-head){min-height:calc(100svh - var(--header-h));display:flex;flex-direction:column;justify-content:center;padding-block:48px}
.pub .s-page:has(>.s-products-picker-head)>.s-gamecards,.pub .s-page:has(>.s-setup-picker-head)>.s-gamecards{width:100%}
@media(min-width:901px) and (min-height:760px){
  .pub .s-page:has(>.s-products-picker-head),.pub .s-page:has(>.s-setup-picker-head){padding-block:clamp(32px,4vh,52px)}
  .pub .s-page:has(>.s-products-picker-head)>.s-gamepicker-head,.pub .s-page:has(>.s-setup-picker-head)>.s-gamepicker-head{margin-bottom:clamp(28px,3.5vh,44px)}
  .pub .s-page:has(>.s-products-picker-head) .s-gamecard__art,.pub .s-page:has(>.s-setup-picker-head) .s-gamecard__art{height:clamp(330px,38svh,460px);aspect-ratio:auto}
  .pub .s-page:has(>.s-products-picker-head) .s-gamecard__body,.pub .s-page:has(>.s-setup-picker-head) .s-gamecard__body{padding:18px 20px;gap:14px}
}
.pub .s-page:has(#pkg-bloodstrike)>.s-pagehead{display:block;text-align:center}
.pub .s-page:has(#pkg-bloodstrike)>.s-pagehead .s-back{display:block;text-align:left}
.pub .s-page:has(#pkg-bloodstrike)>.s-pagehead p{margin-inline:auto}
.pub .s-page:has(#pkg-bloodstrike)>.s-pagehead>.segmented{width:max-content;margin:20px auto 0}
.pub .s-page:has(#pkg-bloodstrike)>.s-plans{display:flex;justify-content:center;flex-wrap:wrap}
.pub .s-page:has(#pkg-bloodstrike)>.s-plans>.s-plan{width:100%;max-width:380px}
.pub .s-page:has(#pkg-bloodstrike)>.s-assure{max-width:900px;margin-inline:auto}
@media(max-width:640px){.pub .s-page:has(>.s-products-picker-head),.pub .s-page:has(>.s-setup-picker-head){justify-content:flex-start;padding-block:32px}}
/* Center Status composition and keep the footer divider beyond the first screen. */
.pub .s-status{min-height:calc(100svh - var(--header-h) + 16px);display:flex;flex-direction:column;justify-content:center;padding-block:48px}

/* ---------- Public light theme ----------------------------------------- */
html[data-design="light"] {
  color-scheme: light;
  --bg: #ffffff;
  --bg-subtle: #f8fafc;
  --surface: #ffffff;
  --surface-raised: #f8fafc;
  --surface-sunken: #f8fafc;
  --surface-badge: #e5e7eb;
  --border: #e5e7eb;
  --border-strong: #cbd5e1;
  --text-primary: #111827;
  --text-secondary: #64748b;
  --text-muted: #64748b;
  --accent: #16a34a;
  --accent-pressed: #15803d;
  --accent-text: #2563eb;
  --accent-wash: #eff6ff;
  --focus: #2563eb;
  --ok: #16a34a;
  --success: #16a34a;
  --warning: #92400e;
  --error: #dc2626;
  --info-pressed: #1d4ed8;
  --success-wash: #f0fdf4;
  --warning-wash: #fffbeb;
  --error-wash: #fef2f2;
  --focus-ring: rgba(37, 99, 235, .2);
  --scrim: rgba(17, 24, 39, .45);
  --font-mono: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
}
html[data-design="light"] body.pub { color: var(--text-primary); }
html[data-design="light"] .pub .rx-logo { filter: brightness(0); }
html[data-design="light"] .pub .masthead { background: #fff; }
html[data-design="light"] .pub .mainnav a:hover { color: var(--text-primary); background: rgba(16, 18, 22, .05); }
html[data-design="light"] .pub .mainnav a[aria-current] { color: var(--text-primary); background: rgba(16, 18, 22, .07); }
html[data-design="light"] .pub .nav-account:hover,
html[data-design="light"] .pub .text-link:hover,
html[data-design="light"] .s-note a:hover,
html[data-design="light"] .s-back:hover,
html[data-design="light"] .s-avail__link:hover,
html[data-design="light"] .s-status__help a:hover,
html[data-design="light"] .s-auth .field__aside a:hover,
html[data-design="light"] .s-auth__foot a:hover,
html[data-design="light"] .s-dl__extra a:hover,
html[data-design="light"] .s-dl__files a:hover { color: var(--text-primary); }
html[data-design="light"] .pub .btn:not(.btn--primary):not(.btn--light) { background: var(--surface); border-color: var(--border-strong); color: var(--text-primary); }
html[data-design="light"] .pub .btn:not(.btn--primary):not(.btn--light):hover { background: var(--surface-raised); border-color: #aeb6c0; }
html[data-design="light"] .pub .segmented { border: 1px solid var(--border); }
html[data-design="light"] .pub .segmented button[aria-pressed=true] { background: var(--surface); color: var(--text-primary); box-shadow: 0 1px 3px rgba(16, 18, 22, .1); }
html[data-design="light"] .pub .state,
html[data-design="light"] .s-chips li,
html[data-design="light"] .s-badge--off { background: rgba(16, 18, 22, .055); }
html[data-design="light"] .s-head h2 span,
html[data-design="light"] .s-pagehead h1 span,
html[data-design="light"] .s-dl__head h1 span,
html[data-design="light"] .s-co__head h1 span,
html[data-design="light"] .s-inv__head h1 span,
html[data-design="light"] .s-status__head h1 span,
html[data-design="light"] .s-dash__who h1 span,
html[data-design="light"] .s-auth__head h1 span,
html[data-design="light"] .pub .pagehead h1 span,
html[data-design="light"] .pb-heading h1 span { color: var(--text-primary); }
html[data-design="light"] .s-assure strong,
html[data-design="light"] .usermenu__name,
html[data-design="light"] .s-orders__prod strong,
html[data-design="light"] .s-dash .spec__row dd,
html[data-design="light"] .s-dl__facts dd,
html[data-design="light"] .s-co__rows dd,
html[data-design="light"] .s-co__after .s-co__next strong,
html[data-design="light"] .s-inv__rows dd,
html[data-design="light"] .s-inv__key span { color: var(--text-primary); }
html[data-design="light"] .s-auth .input,
html[data-design="light"] .s-dash .input,
html[data-design="light"] .s-dash .textarea,
html[data-design="light"] .s-co__promo .input { background: var(--surface); color: var(--text-primary); }
html[data-design="light"] .s-auth .input:-webkit-autofill,
html[data-design="light"] .s-auth .input:-webkit-autofill:hover,
html[data-design="light"] .s-auth .input:-webkit-autofill:focus,
html[data-design="light"] .s-dash .input:-webkit-autofill,
html[data-design="light"] .s-co__promo .input:-webkit-autofill {
  -webkit-text-fill-color: var(--text-primary); caret-color: var(--text-primary);
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; box-shadow: 0 0 0 1000px var(--surface) inset;
}
html[data-design="light"] .usermenu__panel a:hover,
html[data-design="light"] .s-dash__tabs button:hover,
html[data-design="light"] .s-dash__tabs button[aria-selected=true],
html[data-design="light"] .s-pager a:hover { color: var(--text-primary); background: rgba(16, 18, 22, .055); }
html[data-design="light"] .s-pager span[aria-current] { background: var(--text-primary); color: #fff; }
html[data-design="light"] .s-co__method { color: var(--text-primary); }
html[data-design="light"] .s-co__micon { color: var(--accent-text); }
html[data-design="light"] .pub .sitefoot nav h2 { color: var(--text-primary); }
html[data-design="light"] .pub .sitefoot nav a:hover { color: var(--text-primary); }
html[data-design="light"] .s-closing::before { background-image: linear-gradient(rgba(16,18,22,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(16,18,22,.045) 1px, transparent 1px); }
html[data-design="light"] .pub .s-access__heading { color: var(--text-primary); }
html[data-design="light"] .pub .s-access__switch { border-color: var(--border-strong); }
html[data-design="light"] .pub .s-access__switch button { color: var(--text-secondary); }

@media (forced-colors: none) {
  html[data-design="light"], html[data-design="light"] .pub * { scrollbar-width: thin; scrollbar-color: #aeb6c0 #f7f8fa; }
  @supports selector(::-webkit-scrollbar) {
    html[data-design="light"]::-webkit-scrollbar-track, html[data-design="light"] .pub ::-webkit-scrollbar-track { background: #f7f8fa; }
    html[data-design="light"]::-webkit-scrollbar-thumb, html[data-design="light"] .pub ::-webkit-scrollbar-thumb { background: #aeb6c0; border-color: #f7f8fa; }
    html[data-design="light"]::-webkit-scrollbar-corner, html[data-design="light"] .pub ::-webkit-scrollbar-corner { background: #f7f8fa; }
  }
}
@media(max-width:700px){.pub .s-status{justify-content:flex-start;padding-block:32px 48px}}
.pub .s-status{min-height:calc(100dvh - 64px + 48px);flex-shrink:0}

.s-status .s-avail__row{grid-template-columns:minmax(0,1fr) auto}
.s-status .s-avail__game{display:flex;align-items:center;justify-content:space-between;gap:20px;width:100%}
@media(max-width:640px){.s-status .s-avail__game{gap:12px}}

/* FAQ: fixed answer area beside the question list. */
.page-home #faq .s-qa--split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); max-width: 1120px; gap: 24px; align-items: start; }
.s-qa__questions { display: grid; gap: 12px; }
.s-qa__question { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; min-height: 72px; padding: 20px 24px; text-align: left; color: var(--text-primary); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; font: 600 1rem/1.4 var(--font-sans); cursor: pointer; }
.s-qa__question svg { width: 20px; height: 20px; flex-shrink: 0; }
.s-qa__question:hover { border-color: var(--border-strong); }
.s-qa__question[aria-selected=true] { border-color: var(--accent-text); background: var(--accent-wash); }
.s-qa__question:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; }
.s-qa__answers { display: grid; min-height: 408px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 32px; }
.s-qa__answer { grid-area: 1 / 1; }
.s-qa__answer[hidden] { display: block; visibility: hidden; pointer-events: none; }
.s-qa__answer h3 { margin: 0 0 20px; font-size: 1.25rem; line-height: 1.4; }
.s-qa__answer p { margin: 0; color: var(--text-secondary); font-size: 1rem; line-height: 1.7; }
@media(max-width:700px) {
  .page-home #faq .s-qa--split { grid-template-columns: 1fr; gap: 20px; }
  .s-qa__question { min-height: 60px; padding: 16px 20px; }
  .s-qa__answers { min-height: 240px; padding: 24px; }
}

/* REXSACODE palette: color-only overrides for legacy component literals.
   Action green and information blue deliberately use separate semantic roles. */
html[data-design="light"] .pub .s-hero h1 span,
html[data-design="light"] .pub .s-closing__box h2,
html[data-design="light"] .pub .s-closing__box h2 span { color: var(--text-primary) !important; }
html[data-design="light"] .pub .s-closing__box { background: var(--surface); box-shadow: 0 24px 70px rgba(17,24,39,.06), inset 0 1px 0 rgba(255,255,255,.18); }
html[data-design="light"] .pub .s-closing__box p { color: var(--text-secondary); }
html[data-design="light"] .pub .s-closing__box > .btn--primary,
html[data-design="light"] .pub .s-access__buy { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-design="light"] .pub .s-closing__box > .btn--primary:hover,
html[data-design="light"] .pub .s-access__buy:hover { background: var(--accent-pressed); border-color: var(--accent-pressed); }
html[data-design="light"] .pub .s-access__buy:focus-visible { outline-color: var(--focus); }
html[data-design="light"] .pub .sitefoot { background: var(--bg-subtle); }
html[data-design="light"] .pub .navtoggle span { background: var(--text-primary); }
html[data-design="light"] .pub .mainnav a[aria-current] { color: var(--accent-text); background: var(--accent-wash); }
html[data-design="light"] .pub .mainnav a:hover { color: var(--accent-text); background: var(--surface-raised); }
html[data-design="light"] .pub .navsheet nav a:hover,
html[data-design="light"] .pub .navsheet nav a[aria-current] { color: var(--accent-text); }
html[data-design="light"] .pub .btn--light { background: var(--surface-raised); border-color: var(--border); color: var(--text-primary); }
html[data-design="light"] .pub .btn--light:hover { background: var(--surface); border-color: var(--border-strong); }
html[data-design="light"] .pub .btn:not(.btn--primary):not(.btn--light):hover { border-color: var(--border-strong); }
html[data-design="light"] .pub .btn--danger:not(.btn--primary):not(.btn--light),
html[data-design="light"] .pub .btn--danger:not(.btn--primary):not(.btn--light):hover { color: var(--error); }
html[data-design="light"] .pub .btn:disabled,
html[data-design="light"] .pub .btn--disabled { color: var(--text-muted); background: var(--surface-raised); border-color: var(--border); }
html[data-design="light"] .pub .segmented button[aria-pressed=true],
html[data-design="light"] .pub .s-access__switch button[aria-pressed=true] { color: var(--accent-text); background: var(--accent-wash); }
html[data-design="light"] .pub .s-dur:has(input:checked) { border-color: var(--accent-text); background: var(--accent-wash); }
html[data-design="light"] .pub .s-dur:hover { border-color: var(--accent-text); }
html[data-design="light"] .pub .s-plan--best { border-color: var(--accent-text); box-shadow: 0 0 0 1px var(--accent-text), 0 20px 50px rgba(37,99,235,.08); background: linear-gradient(180deg, var(--accent-wash), var(--surface) 40%); }
html[data-design="light"] .pub .s-plan__ribbon { background: var(--accent-text); }
html[data-design="light"] .pub .s-gamecard__art { background: linear-gradient(135deg, var(--surface-raised), var(--surface)); }
html[data-design="light"] .pub .s-gamecard__art b { color: var(--text-secondary); }
html[data-design="light"] .pub .state,
html[data-design="light"] .pub .s-chips li,
html[data-design="light"] .pub .s-badge--off { background: var(--surface-raised); }
html[data-design="light"] .pub .state--on,
html[data-design="light"] .pub .s-badge--ok,
html[data-design="light"] .pub .s-pill,
html[data-design="light"] .pub .s-status__signal,
html[data-design="light"] .pub .s-dl__ver { background: var(--success-wash); color: var(--success); }
html[data-design="light"] .pub .s-badge--warn,
html[data-design="light"] .pub .s-status__signal--warn,
html[data-design="light"] .pub .s-status__note--warn,
html[data-design="light"] .pub .s-dl__icon--lock,
html[data-design="light"] .pub .s-inv__wait { background: var(--warning-wash); color: var(--warning); }
html[data-design="light"] .pub .s-status__signal--warn i { background: var(--warning); }
html[data-design="light"] .pub .s-status__note:not(.s-status__note--warn),
html[data-design="light"] .pub .s-auth .note__label { color: var(--accent-text); }
html[data-design="light"] .pub .s-auth .note--error,
html[data-design="light"] .pub .s-dash .note--error { background: var(--error-wash); }
html[data-design="light"] .pub .s-auth .note--error .note__label,
html[data-design="light"] .pub .s-co__promo .promo__msg.is-error { color: var(--error); }
html[data-design="light"] .pub .s-auth .note--ok,
html[data-design="light"] .pub .s-dash .note:not(.note--error) { background: var(--success-wash); }
html[data-design="light"] .pub .s-auth .note--ok .note__label { color: var(--success); }
html[data-design="light"] .pub .s-auth .note--warn { background: var(--warning-wash); }
html[data-design="light"] .pub .s-auth .note--warn .note__label { color: var(--warning); }
html[data-design="light"] .pub .s-auth .input:focus,
html[data-design="light"] .pub .s-dash .input:focus,
html[data-design="light"] .pub .s-dash .textarea:focus,
html[data-design="light"] .pub .s-co__promo .input:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--focus-ring); }
html[data-design="light"] .pub input,
html[data-design="light"] .pub select,
html[data-design="light"] .pub textarea { accent-color: var(--accent-text); }
html[data-design="light"] .pub select,
html[data-design="light"] .pub select option { background-color: var(--surface); color: var(--text-primary); }
html[data-design="light"] .pub input::placeholder,
html[data-design="light"] .pub textarea::placeholder { color: var(--text-muted); }
html[data-design="light"] .pub .sitefoot__discord,
html[data-design="light"] .pub .s-inv__proofico { color: var(--accent-text); background: var(--accent-wash); }
html[data-design="light"] .pub .sitefoot__discord:hover { background: var(--info-pressed); color: #fff; }
html[data-design="light"] .pub .s-inv__proof { background: var(--accent-wash); }
html[data-design="light"] .pub .s-inv__proof .btn { background: var(--accent-text); border-color: var(--accent-text); color: #fff; }
html[data-design="light"] .pub .s-inv__proof .btn:hover { background: var(--info-pressed); border-color: var(--info-pressed); }
html[data-design="light"] .pub .s-inv__amount { border-color: var(--border); }
html[data-design="light"] .pub .s-inv__amount > span { color: var(--accent-text); }
html[data-design="light"] .pub .s-inv__key { background: var(--success-wash); border-color: var(--success); }
html[data-design="light"] .pub .s-inv__wait .spinner { border-color: var(--border-strong); border-top-color: var(--warning); }
html[data-design="light"] .pub .s-inv__copy:hover { color: var(--accent-text); border-color: var(--border-strong); }
html[data-design="light"] .pub .s-co__method { border-color: var(--accent); background: var(--success-wash); }
html[data-design="light"] .pub .s-co__method:hover { background: #dcfce7; }
html[data-design="light"] .pub .s-co__mgo { color: var(--accent-pressed); }
html[data-design="light"] .pub .usermenu > summary:hover,
html[data-design="light"] .pub .usermenu[open] > summary { border-color: var(--border-strong); }
html[data-design="light"] .pub .usermenu__panel { box-shadow: 0 20px 50px rgba(17,24,39,.12); }
html[data-design="light"] .pub .usermenu__panel .usermenu__out:hover { color: var(--error); }
html[data-design="light"] .pub .s-dash__tabs button[aria-selected=true],
html[data-design="light"] .pub .s-pager span[aria-current] { color: var(--accent-text); background: var(--accent-wash); }
html[data-design="light"] .pub .spec__val--mono,
html[data-design="light"] .pub .dialog,
html[data-design="light"] .pub .icon-x,
html[data-design="light"] .pub .legal__toc-link:hover,
html[data-design="light"] .pub .legal__toc-link[aria-current],
html[data-design="light"] .pub .doc__nav a[aria-current] { color: var(--text-primary); }
html[data-design="light"] .pub .prose a,
html[data-design="light"] .pub .legal__section a,
html[data-design="light"] .pub .text-link:hover,
html[data-design="light"] .pub .s-note a:hover,
html[data-design="light"] .pub .s-back:hover,
html[data-design="light"] .pub .s-avail__link:hover,
html[data-design="light"] .pub .s-status__help a:hover,
html[data-design="light"] .pub .s-auth .field__aside a:hover,
html[data-design="light"] .pub .s-auth__foot a:hover,
html[data-design="light"] .pub .s-dl__extra a:hover,
html[data-design="light"] .pub .s-dl__files a:hover,
html[data-design="light"] .pub .sitefoot nav a:hover { color: var(--info-pressed); }
html[data-design="light"] .pub ::selection { color: var(--text-primary); background: #dcfce7; }
@media (forced-colors: none) {
  html[data-design="light"], html[data-design="light"] .pub * { scrollbar-color: var(--border-strong) var(--bg-subtle); }
  html[data-design="light"]::-webkit-scrollbar-track,
  html[data-design="light"] .pub ::-webkit-scrollbar-track,
  html[data-design="light"]::-webkit-scrollbar-corner,
  html[data-design="light"] .pub ::-webkit-scrollbar-corner { background: var(--bg-subtle); }
  html[data-design="light"]::-webkit-scrollbar-thumb,
  html[data-design="light"] .pub ::-webkit-scrollbar-thumb { background: var(--border-strong); border-color: var(--bg-subtle); }
  html[data-design="light"]::-webkit-scrollbar-thumb:hover,
  html[data-design="light"] .pub ::-webkit-scrollbar-thumb:hover { background: var(--text-secondary); }
  html[data-design="light"]::-webkit-scrollbar-thumb:active,
  html[data-design="light"] .pub ::-webkit-scrollbar-thumb:active { background: var(--accent-text); }
}

html[data-design="light"] .pub .input,
html[data-design="light"] .pub .textarea,
html[data-design="light"] .pub .account-avatar,
html[data-design="light"] .pub .image-dialog { color: var(--text-primary); }
html[data-design="light"] .pub .doc-intro .text-link,
html[data-design="light"] .pub .docstep__image-toggle:hover { color: var(--accent-text); }
html[data-design="light"] .pub .doc__nav-link[aria-current] { color: var(--accent-text); box-shadow: inset 2px 0 var(--accent-text); }
html[data-design="light"] .pub .guide-lang button[aria-pressed=true] { color: var(--accent-text); background: var(--accent-wash); }
html[data-design="light"] .pub .s-dash__avatar,
html[data-design="light"] .pub .usermenu__avatar,
html[data-design="light"] .pub .rx-profile__avatar { background: var(--accent-wash); color: var(--accent-text); }

/* Premium light refinement: paint-only depth, shared by desktop and mobile.
   Inset outlines on borderless surfaces preserve their exact box dimensions. */
html[data-design="light"] {
  --border: #e2e8f0;
  --card-border: #e2e8f0;
  --card-shadow: 0 2px 4px rgba(15,23,42,.025), 0 8px 24px rgba(15,23,42,.045);
  --card-shadow-hover: 0 3px 6px rgba(15,23,42,.035), 0 12px 28px rgba(15,23,42,.065);
  --card-border-hover: #cbd5e1;
  --action-shadow-hover: 0 3px 10px rgba(22,163,74,.14);
  --hero-gradient: #ffffff;
}
html[data-design="light"] .pub.page-home .s-hero { background: var(--hero-gradient); }
html[data-design="light"] .pub.page-home #products,
html[data-design="light"] .pub.page-home #faq { background: var(--bg-subtle); }
html[data-design="light"] .pub.page-home #pricing { background: var(--bg-subtle); }
html[data-design="light"] .pub :is(.s-gamecard, .s-card, .s-plan, .s-qa__answers, .s-dl__card, .s-co__card, .s-inv__card, .s-auth__card, .s-svc, .s-avail, .s-status__build, .s-orders__item, .rx-profile__identity, .rx-profile__stat, .pb-overview) {
  border-color: var(--card-border);
  box-shadow: var(--card-shadow);
}
html[data-design="light"] .pub .s-plan--best {
  border-color: var(--accent-text);
  box-shadow: 0 0 0 1px rgba(37,99,235,.12), var(--card-shadow);
}
html[data-design="light"] .pub .s-plan.is-target { box-shadow: 0 0 0 3px var(--accent-text), var(--card-shadow); }
html[data-design="light"] .pub .s-closing__box {
  box-shadow: inset 0 0 0 1px var(--card-border), var(--card-shadow);
}
html[data-design="light"] .pub :is(.s-gamecard, .s-status__build):hover {
  border-color: var(--card-border-hover);
  box-shadow: var(--card-shadow-hover);
}
html[data-design="light"] .pub .s-qa__question:hover {
  background: var(--surface-raised);
  border-color: var(--card-border-hover);
  box-shadow: 0 2px 8px rgba(15,23,42,.035);
}
html[data-design="light"] .pub .s-qa__question[aria-selected=true] {
  background: var(--accent-wash);
  border-color: var(--accent-text);
  box-shadow: 0 2px 8px rgba(37,99,235,.055);
}
html[data-design="light"] .pub .btn--primary:hover,
html[data-design="light"] .pub .s-closing__box > .btn--primary:hover,
html[data-design="light"] .pub .s-access__buy:hover {
  box-shadow: var(--action-shadow-hover);
}
html[data-design="light"] .pub .btn--primary:active,
html[data-design="light"] .pub .s-access__buy:active {
  background-color: var(--accent-pressed);
  box-shadow: inset 0 1px 3px rgba(15,23,42,.1);
}
html[data-design="light"] .pub .s-inv__proof .btn:hover {
  box-shadow: 0 3px 10px rgba(37,99,235,.12);
}
html[data-design="light"] .pub .s-inv__proof .btn:active {
  background-color: var(--info-pressed);
}
html[data-design="light"] .pub .btn:not(.btn--primary):hover {
  box-shadow: 0 2px 8px rgba(15,23,42,.04);
}
html[data-design="light"] .pub .btn:not(.btn--primary):active {
  background-color: var(--surface-raised);
  box-shadow: inset 0 1px 3px rgba(15,23,42,.06);
}
html[data-design="light"] .pub .btn:disabled,
html[data-design="light"] .pub .btn--disabled { box-shadow: none; }

/* Approved hero: left-aligned headline, actions and benefits below. */
@media(min-width:1000px){
.page-home .s-hero__center{grid-template-columns:1fr;justify-items:start;text-align:left}
.page-home .s-hero__center h1{grid-column:1;grid-row:1;font-size:clamp(3rem,1rem + 5vh + 3vw,6.5rem)}
.page-home .s-hero__center .s-lead{display:none}
.page-home .s-hero__center .s-actions{grid-column:1;grid-row:2;justify-content:flex-start}
.page-home .s-hero__center .s-ticks{grid-column:1;grid-row:3;grid-template-columns:repeat(3,max-content);justify-content:start;gap:10px 28px;margin-top:var(--s-3)}
}
@media(max-width:999px){
.page-home .s-hero__center{justify-items:start;text-align:left}
.page-home .s-hero__center .s-actions{justify-content:flex-start}
.page-home .s-hero__center .s-ticks{justify-content:start}
}

/* Give the left-aligned hero copy, actions and benefits room to breathe. */
.page-home .s-hero__center { row-gap: 40px; }
.page-home .s-hero__center .s-ticks { margin-top: 0; }
@media(min-width:1000px) and (min-height:680px) {
  .page-home .s-hero__center { transform: none; }
}
@media(max-width:480px) {
  .page-home .s-hero__center { row-gap: 28px; }
}

/* Centered hero with a small supporting caption. */
.page-home .s-hero__center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.page-home .s-hero__center h1 { grid-column: 1; grid-row: 1; }
.page-home .s-hero__center .s-lead { display: block; grid-column: 1; grid-row: 2; font-size: 1rem; margin-inline: auto; }
.page-home .s-hero__center .s-actions { grid-column: 1; grid-row: 3; justify-content: center; }
.page-home .s-hero__center .s-ticks { grid-column: 1; grid-row: 4; justify-content: center; }

/* Keep the centered hero title on one line within its container. */
.page-home .s-hero__center h1 { white-space: nowrap; font-size: clamp(1.25rem, 6.1vw, 5.5rem); }

/* Tighter hero grouping: title 20px caption 28px actions 28px benefits. */
.page-home .s-hero__center { row-gap: 0; }
.page-home .s-hero__center .s-lead { margin-top: 20px; }
.page-home .s-hero__center .s-actions { margin-top: 28px; }
.page-home .s-hero__center .s-ticks { margin-top: 28px; }

/* Fit the longer hero wording on a single line across viewport sizes. */
.page-home .s-hero__center h1 { font-size: clamp(.875rem, 4.5vw, 4rem); }

/* Restore the larger centered two-line hero heading. */
.page-home .s-hero__center h1 { white-space: normal; font-size: clamp(2.6rem, 1.6rem + 4.2vw, 5.6rem); }
@media(min-width:1000px) and (min-height:680px) {
  .page-home .s-hero__center h1 { font-size: clamp(3rem, 1rem + 5vh + 3vw, 6.5rem); }
}

/* Supported Games: gently bring the hovered card forward. */
@media (hover:hover) and (pointer:fine) {
  .page-home #products .s-gamecard {
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  }
  html[data-design="light"] .pub.page-home #products .s-gamecard:hover {
    transform: translateY(-8px) scale(1.025);
    z-index: 1;
    box-shadow: 0 6px 12px rgba(15,23,42,.06), 0 20px 40px rgba(15,23,42,.12);
  }
}
@media (prefers-reduced-motion:reduce) {
  html[data-design="light"] .pub.page-home #products .s-gamecard:hover { transform: none; }
}

/* Homepage game posters: metadata and action overlay the artwork. */
.page-home #products .s-gamecard__body {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.3), transparent 35%, transparent 60%, rgba(0,0,0,.5));
  justify-content: space-between;
}
html[data-design="light"] .pub.page-home #products .s-gamecard__top h3 {
  color: #fff;
  background: rgba(17,24,39,.88);
  padding: 5px 10px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
html[data-design="light"] .pub.page-home #products .state--on {
  color: #dcfce7;
  background: rgba(20,83,45,.9);
  border: 1px solid #16a34a;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}
.page-home #products .s-gamecard__body > .btn { margin-top: auto; }

/* Match game-name and availability badge typography on homepage posters. */
html[data-design="light"] .pub.page-home #products .s-gamecard__top h3,
html[data-design="light"] .pub.page-home #products .s-gamecard__top .state {
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  padding: 5px 10px;
}

/* Taller homepage posters balance the full-screen games composition. */
.page-home #products .s-gamecard__art { width: 100%; height: auto; aspect-ratio: 4 / 5; }
@media(min-width:1000px) and (min-height:680px) {
  .page-home #products .s-gamecard__art { height: clamp(380px, 52svh, 560px); aspect-ratio: auto; }
}

/* Four supported-game posters in an alphabetical desktop row. */
@media(min-width:1000px) {
  .page-home #products .s-gamecards { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .page-home #products .s-gamecard__top { gap: 8px; }
  .page-home #products .s-gamecard__body { padding: 16px 12px; }
}
html[data-design="light"] .pub.page-home #products .state:not(.state--on) { background: rgba(17,24,39,.88); color: #fff; }
html[data-design="light"] .pub.page-home #products .btn--disabled { background: rgba(17,24,39,.88); color: #fff; border-color: rgba(255,255,255,.25); }

/* Keep poster labels on one line, including Lost Saga Origin. */
html[data-design="light"] .pub.page-home #products .s-gamecard__top h3,
html[data-design="light"] .pub.page-home #products .s-gamecard__top .state {
  white-space: nowrap;
  padding-inline: 6px;
}
.page-home #products .s-gamecard__top { gap: 6px; }

/* Full-width at the top; a floating light navigation bar after scrolling. */
html[data-design="light"] .pub .masthead {
  transition: background var(--t-base), border-color var(--t-base), border-radius 220ms ease, box-shadow 220ms ease, top 220ms ease, width 220ms ease;
}
html[data-design="light"] .pub .masthead.is-scrolled:not(.is-open) {
  top: 12px;
  left: 0;
  right: 0;
  width: min(calc(100% - 32px), 1200px);
  margin-inline: auto;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 4px 10px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.08);
}
.pub .masthead.is-scrolled:not(.is-open) .masthead__inner { width: calc(100% - 40px); }
@media(max-width:700px) {
  html[data-design="light"] .pub .masthead.is-scrolled:not(.is-open) { top: 8px; width: calc(100% - 16px); border-radius: 14px; }
  .pub .masthead.is-scrolled:not(.is-open) .masthead__inner { width: calc(100% - 24px); }
}

/* Animate both navbar geometry and inner content instead of snapping widths. */
html[data-design="light"] .pub .masthead {
  width: 100%;
  margin-inline: auto;
  border: 1px solid transparent;
  border-bottom-color: var(--border);
  transition: top 420ms cubic-bezier(.22,1,.36,1), width 420ms cubic-bezier(.22,1,.36,1), border-radius 420ms cubic-bezier(.22,1,.36,1), background 420ms ease, border-color 420ms ease, box-shadow 420ms ease;
}
.pub .masthead__inner {
  transition: width 420ms cubic-bezier(.22,1,.36,1);
}

/* Sections fill the viewport behind the floating navbar; no previous band. */
html:has(body.page-home) { scroll-padding-top: 0; }

/* FAQ gets a full viewport before the footer starts. */
.page-home #faq { min-height: 100dvh; }

/* Compact, stable FAQ answer panel with two concise desktop lines. */
.page-home #faq .s-qa__answers { min-height: 0; align-self: start; }
.page-home #faq .s-qa__copy span { display: block; }