/* The dashboard app's styles, shared by dashboard.html and admin.html (body[data-app]). They were dashboard.html's
   own <style> until the admin panel (10-18) needed the same frame. */

  /* The customer dashboard, on the partner's dashboard UI (his dashboard.html, branch partner-accounts; owner 10-15).
     His styles below are kept as they were, so the parts we keep or drop are easy to see; ours come at the end.
     Pure black and white: a problem is a hollow ring beside the words, never a colour. */
  .ac-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .ac-top { padding: calc(var(--header) + 56px) 0 clamp(70px, 8vw, 120px); }
  .ac-title { margin: 0; font-size: clamp(44px, 5.4vw, 88px); line-height: .94; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; overflow-wrap: anywhere; }
  .ac-lead { margin: 18px 0 0; max-width: 30em; font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6; color: rgba(255,255,255,.7); }
  .ac-lead b { font-weight: 600; color: var(--paper); overflow-wrap: anywhere; }
  .ac-text { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.72); }
  .ac-text b { font-weight: 600; color: var(--paper); overflow-wrap: anywhere; }
  [hidden] { display: none !important; }

  /* account.html: the words on the left, the panel on the right */
  .ac-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 40px clamp(40px, 6vw, 110px); align-items: start; }
  .ac-panel { padding: clamp(20px, 2.2vw, 28px); border-radius: 24px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
  .ac-pick { display: inline-grid; gap: 6px; margin-top: 34px; padding: 18px 22px; border-radius: 18px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
  .ac-pick .kick { margin: 0; }
  .ac-pick__name { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 30px; line-height: 1; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
  .ac-pick__line { margin: 0; font-size: 14px; color: rgba(255,255,255,.7); }
  .ac-tabs.planpick { display: flex; width: 100%; margin: 0 0 22px; }
  .ac-tabs.planpick button { flex: 1; padding: 0 10px; }
  .ac-form { display: grid; gap: 16px; }
  .ac-field { display: grid; gap: 8px; }
  .ac-field > label { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
  .ac-input { width: 100%; height: 52px; padding: 0 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.04); color: var(--paper); font: 500 16px/1 "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif; transition: border-color .2s var(--ease), background-color .2s var(--ease); }
  .ac-input:hover { border-color: rgba(255,255,255,.36); }
  .ac-input:focus { outline: none; border-color: var(--paper); background: rgba(255,255,255,.07); }
  .ac-pw { position: relative; }
  .ac-pw .ac-input { padding-right: 80px; }
  .ac-eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); height: 36px; padding: 0 12px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); transition: color .2s, background-color .2s; }
  .ac-eye:hover { color: var(--paper); background: rgba(255,255,255,.08); }
  .ac-hint { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.48); }
  .ac-hint b { font-weight: 600; color: rgba(255,255,255,.8); overflow-wrap: anywhere; }
  .ac-hint a { color: rgba(255,255,255,.75); text-decoration: underline; text-underline-offset: 3px; }
  .ac-wide { width: 100%; justify-content: center; }
  .btn[disabled] { opacity: .6; cursor: progress; }
  .ac-or { display: flex; align-items: center; gap: 14px; margin: 18px 0; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
  .ac-or::before, .ac-or::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,.14); }
  .ac-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 20px; }
  .ac-link { font-size: 13px; font-weight: 500; color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 3px; }
  .ac-link:hover { color: var(--paper); }
  .ac-wait { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 15px; color: rgba(255,255,255,.75); }
  .ac-wait i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--paper); animation: acSpin .8s linear infinite; }
  @keyframes acSpin { to { transform: rotate(360deg); } }
  /* The status line: a filled dot for news, a hollow ring for a problem. */
  .ac-msg { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 0; font-size: 14px; line-height: 1.5; color: var(--paper); }
  .ac-msg:empty { display: none; }
  .ac-msg::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); transform: translateY(-1px); }
  .ac-msg.is-err::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--paper); }
  .ac-msg.is-new { animation: acSay .45s var(--soft); }
  @keyframes acSay { from { opacity: 0; transform: translate3d(0, 6px, 0); } }

  /* checkout.html and dashboard.html: cards */
  .db-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: clamp(28px, 3vw, 44px); align-items: start; }
  .db-side { display: grid; gap: 16px; }
  .db-card { padding: clamp(22px, 2.3vw, 32px); border-radius: 22px; border: 1px solid rgba(255,255,255,.14); background: rgba(255,255,255,.03); }
  .db-card > .kick { margin-bottom: 14px; }
  .db-plan { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin: 0; font-size: clamp(34px, 3.6vw, 56px); line-height: 1; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
  .db-bill { margin: 12px 0 0; font-size: 15px; font-weight: 600; letter-spacing: .04em; color: var(--paper); }
  .db-since { margin: 6px 0 0; font-size: 14px; color: rgba(255,255,255,.6); }
  .db-status { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px 10px; margin: 18px 0 0; font-size: 13.5px; line-height: 1.5; color: rgba(255,255,255,.66); }
  .db-pill { flex: none; display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px dashed rgba(255,255,255,.5); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--paper); }
  .db-rows { margin: 20px 0 0; border-top: 1px solid rgba(255,255,255,.12); }
  .db-rows > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px 18px; padding: 13px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
  .db-rows dt { font-size: 14px; line-height: 1.45; color: rgba(255,255,255,.6); }
  .db-rows dd { margin: 0; max-width: 62%; font-size: 14px; line-height: 1.45; font-weight: 500; text-align: right; color: var(--paper); overflow-wrap: anywhere; }
  .db-rows .is-off dt, .db-rows .is-off dd { color: rgba(255,255,255,.36); }
  .db-text { margin: 0; font-size: 15px; line-height: 1.6; color: rgba(255,255,255,.7); }
  .db-text b { font-weight: 600; color: var(--paper); }
  .db-new { display: flex; align-items: baseline; gap: 10px; max-width: 46em; margin: 24px 0 0; padding: 14px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.3); font-size: 14.5px; line-height: 1.5; }
  .db-new::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--paper); transform: translateY(-1px); }
  .db-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
  .db-more { margin-top: 18px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .db-more summary { display: flex; align-items: center; justify-content: space-between; padding: 4px 0 14px; cursor: pointer; list-style: none; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
  .db-more summary::-webkit-details-marker { display: none; }
  .db-more summary::after { content: "+"; font-size: 18px; font-weight: 400; transition: transform .25s var(--ease); }
  .db-more[open] summary::after { transform: rotate(45deg); }
  .db-more summary:hover { color: var(--paper); }
  .db-more .ac-form { padding: 2px 0 20px; }
  .db-del { margin-top: 18px; padding: 18px; border-radius: 16px; border: 1px solid rgba(255,255,255,.3); }
  .db-del .db-acts { margin-top: 14px; }
  .co-price { display: flex; align-items: baseline; gap: 12px; margin: 22px 0 0; }
  .co-price b { font-size: clamp(46px, 4.4vw, 66px); line-height: 1; font-weight: 500; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
  .co-price span { font-size: 13px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.6); }
  .co-terms { margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.7); }
  .co-pay .btn { margin: 22px 0 16px; }
  .co-change { display: inline-block; margin-top: 18px; }

  /* privacy.html */
  .pv { max-width: 760px; }
  .pv h2 { margin: clamp(36px, 4vw, 52px) 0 12px; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--paper); }
  .pv p, .pv li { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.74); }
  .pv ul { margin: 0 0 12px; padding-left: 20px; }
  .pv b { font-weight: 600; color: var(--paper); }
  .pv a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }

  /* checkout.html: a short hand-off to Stripe */
  .co-wait { display: flex; align-items: center; gap: 12px; margin: 26px 0 0; font-size: 15px; color: rgba(255,255,255,.78); }
  .co-wait i { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255,255,255,.2); border-top-color: var(--paper); animation: acSpin .8s linear infinite; }
  .co-box { max-width: 560px; margin-top: 32px; }
  .co-box .db-plan { font-size: clamp(30px, 3vw, 44px); }


  @media (max-width: 899px) {
    .ac-grid, .db-grid { grid-template-columns: minmax(0, 1fr); }
    .ac-top { padding-top: calc(var(--header) + 36px); }
  }
  @media (max-width: 520px) {
    .db-rows > div { flex-direction: column; gap: 2px; }
    .db-rows dd { max-width: none; text-align: left; }
    .ac-pick { display: grid; }
  }

  /* dashboard.html v6: a normal dashboard - a sidebar, a head on every page, cards - made of getswitch.net's own parts
     (build_dashboard.py, make_dash_v6.py). Remote control is v5's page as it was. */
  @font-face { font-family: "SwitchApp"; src: url("fonts/Montserrat-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
  @font-face { font-family: "SwitchApp"; src: url("fonts/Montserrat-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
  @font-face { font-family: "SwitchApp"; src: url("fonts/Montserrat-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
  @font-face { font-family: "SwitchMono"; src: url("fonts/Inconsolata-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
  body[data-app] {
    --top: 0px; --side: 264px; --pad: clamp(20px, 2.3vw, 44px); --gap: clamp(14px, 1.15vw, 22px);
    --ui: "Barlow", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --app: "SwitchApp", "Gotham", "Montserrat", "Helvetica Neue", Arial, sans-serif; --mono: "SwitchMono", "Inconsolata", Consolas, monospace;
    --hair: rgba(255,255,255,.14); --hair-2: rgba(255,255,255,.1); --glass: rgba(18,18,18,.6);
    background: #000; color: #fff; font: 400 16px/1.5 var(--ui);
  }
  [data-app] [hidden] { display: none !important; }
  [data-app] .mark, [data-app] .word { display: block; width: auto; }
  [data-app] h1, [data-app] h2, [data-app] h3, [data-app] p, [data-app] figure, [data-app] dl, [data-app] ol, [data-app] ul { margin: 0; }
  .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ic { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .app { --z: 1; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); align-items: start; min-height: 100vh; overflow-x: clip; }

  /* ---- the sidebar: the S mark and the AI's status, the pages, who's signed in ---- */
  .side { position: sticky; top: 0; z-index: 40; display: flex; flex-direction: column; height: 100vh; height: 100dvh; padding: 22px 16px 16px; border-right: 1px solid rgba(255,255,255,.08);
    background: radial-gradient(130% 34% at 0% 100%, rgba(255,255,255,.07), rgba(255,255,255,0) 70%), #000; }
  .side__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 40px; padding: 0 2px 0 12px; }
  .side__mark .mark { height: 32px; transition: transform .5s var(--ease); }
  .side__mark:hover .mark { transform: rotate(-8deg) scale(1.06); }
  .side__chip { height: 30px; padding: 0 12px; font-size: 10.5px; }
  .side__label { margin: 40px 0 12px !important; padding: 0 18px; font: 600 11px/1 var(--ui); letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.4); }
  .side__nav { display: grid; gap: 4px; }
  .side__nav button { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; height: 46px; padding: 0 18px; border-radius: 999px; font: 600 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.62); text-align: left; white-space: nowrap; transition: color .2s, background-color .35s var(--ease), box-shadow .35s var(--ease); }
  .side__nav .ic { width: 17px; height: 17px; }
  .side__nav button:hover { color: #fff; background: rgba(255,255,255,.06); }
  .side__nav button[aria-selected="true"] { color: #fff; background: rgba(255,255,255,.1); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
  .side__nav button[aria-selected="true"]::after { content: ""; position: absolute; right: 18px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.85); }
  .side__nav button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .side__foot { margin-top: auto; padding-top: 20px; }
  .me { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 12px 10px 12px 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; background: rgba(255,255,255,.03); }
  .me__t { display: grid; flex: 1; gap: 6px; min-width: 0; }
  .me__t b { overflow: hidden; font: 600 13px/1.1 var(--ui); letter-spacing: .06em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
  .me__t small { overflow: hidden; font: 600 10.5px/1.1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); text-overflow: ellipsis; white-space: nowrap; }
  .me__out { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; color: rgba(255,255,255,.62); transition: color .2s, background-color .25s var(--ease); }
  .me__out:hover { color: #fff; background: rgba(255,255,255,.1); }
  .me__out:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
  .me__out .ic { width: 16px; height: 16px; }
  .avatar { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); font: 600 13px/1 var(--ui); font-style: normal; letter-spacing: 0; color: #fff; }
  .toast { position: fixed; top: 18px; left: calc(50% + var(--side) / 2); z-index: 60; display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px); padding: 12px 18px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: var(--glass); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font-size: 14px; transform: translateX(-50%); animation: chipIn .7s var(--soft) backwards; }
  .toast::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.85); }

  /* ---- the page: one head, then cards on twelve columns that fill the screen beside the sidebar ---- */
  .dmain { min-width: 0; }
  .panel { padding: clamp(22px, 2vw, 36px) var(--pad) 64px; animation: panelIn .55s var(--soft); }
  .panel--bleed { padding: 0; }
  @keyframes panelIn { from { opacity: 0; translate: 0 10px; } }
  .phead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 32px; margin-bottom: clamp(18px, 1.5vw, 28px); }
  .phead__t { min-width: 0; }
  .phead .kick { margin-bottom: 12px; }
  .phead__title { font: 700 clamp(32px, 2.5vw, 48px)/1 var(--ui); letter-spacing: .012em; text-transform: uppercase; overflow-wrap: anywhere; }
  .phead__lead { margin-top: 12px !important; max-width: 44em; font-size: 16px; color: rgba(255,255,255,.66); }
  .phead__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  .phead__acts:not(:has(> :not([hidden]))) { display: none; }
  .g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }
  .g12--top { align-items: start; }
  .s3 { grid-column: span 3; } .s4 { grid-column: span 4; } .s5 { grid-column: span 5; } .s7 { grid-column: span 7; } .s8 { grid-column: span 8; } .s12 { grid-column: 1 / -1; }
  .col { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; }
  .panel > .btnrow, .panel > .ac-msg { margin-top: var(--gap); }

  /* ---- buttons: the site's pills - solid white with the arrow for the main thing, outlined for the rest ---- */
  .pb { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 44px; padding: 0 22px; overflow: hidden; border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(255,255,255,.04); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #fff; font: 600 12px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .15s var(--ease); }
  .pb:hover { border-color: #fff; background: rgba(255,255,255,.09); }
  .pb:active:not([disabled]) { transform: scale(.97); }
  .pb:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .pb--solid { border-color: #fff; background: #fff; color: #000; }
  .pb--solid:hover { border-color: rgba(255,255,255,.84); background: rgba(255,255,255,.84); }
  .pb--ghost { border-color: transparent; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pb--ghost:hover { border-color: transparent; background: rgba(255,255,255,.1); }
  .pb--danger:hover { border-color: #fff; background: #fff; color: #000; }
  .pb--sm { height: 38px; padding: 0 17px; font-size: 11px; }
  .pb[disabled] { opacity: .38; cursor: not-allowed; }
  .pb > span { position: relative; }
  .arr { flex: none; width: 13px; height: 9px; transition: transform .25s var(--ease); }
  .pb:hover .arr, a:hover .pb .arr, .gcard:hover .arr { transform: translateX(3px); }
  .btnrow { display: flex; flex-wrap: wrap; gap: 10px; }
  .btnrow:not(:has(> :not([hidden]))) { display: none; }
  /* hold to confirm: a fill runs across the pill; letting go early cancels */
  .hold { --hold: 900ms; user-select: none; touch-action: none; }
  .hold::before { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.28); transform: scaleX(0); transform-origin: left; transition: transform .25s var(--ease); }
  .hold.is-holding::before { transform: scaleX(1); transition: transform var(--hold) linear; }
  /* Copy turns into a tick */
  .code__copy .i-ok { display: none; }
  .code__copy.is-done .i-copy { display: none; }
  .code__copy.is-done .i-ok { display: block; animation: pop .35s var(--soft); }
  @keyframes pop { 0% { transform: scale(.3); } 70% { transform: scale(1.25); } 100% { transform: scale(1); } }

  /* ---- chips: the game pages' glass pills ---- */
  .chip { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 14px; border-radius: 999px; background: var(--glass); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.82); white-space: nowrap; }
  .chip i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.85); }
  .chip.is-off { color: rgba(255,255,255,.6); }
  .chip.is-off i, .chip.is-due i { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.65); }
  .chip.is-due { border-color: rgba(255,255,255,.5); }
  .tag { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); font: 600 10px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.75); }
  .fchips { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .fchip { position: absolute; display: inline-flex; align-items: center; gap: 10px; padding: 10px 15px; border-radius: 999px; background: var(--glass); border: 1px solid rgba(255,255,255,.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,.75); animation: chipIn .9s var(--soft) backwards, bob 6s ease-in-out infinite alternate; animation-delay: var(--d, .8s), 0s; }
  .fchip b { font-size: 18px; font-weight: 600; letter-spacing: .01em; color: #fff; }
  .fchip i { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.85); }
  @keyframes chipIn { from { opacity: 0; translate: 0 12px; } }
  @keyframes bob { to { translate: 0 -7px; } }

  /* ---- Remote control's head (v5's .band: the kick, the big line, the lead, pills) and the switches (.seg) ---- */
  .band { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; column-gap: clamp(24px, 4vw, 72px); min-height: clamp(330px, 38vh, 440px); padding: calc(var(--top) + 44px) var(--edge) clamp(28px, 3vw, 44px); overflow: hidden; }
  .band::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(90deg, #000 0%, rgba(0,0,0,.84) 28%, rgba(0,0,0,.35) 64%, rgba(0,0,0,.18) 100%),
                linear-gradient(180deg, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 26%, rgba(0,0,0,0) 58%, #000 100%); }
  .band--plain::before { background: radial-gradient(30% 50% at 74% 46%, rgba(255,255,255,.13), rgba(255,255,255,0) 72%), radial-gradient(42% 24% at 74% 92%, rgba(255,255,255,.07), rgba(255,255,255,0) 72%); }
  .band__copy { position: relative; z-index: 2; min-width: 0; animation: chipIn .9s var(--soft) .1s backwards; }
  .band .kick { margin-bottom: 14px; }
  .band__title { font: 700 clamp(40px, 4.6vw, 86px)/.96 var(--ui); letter-spacing: .012em; text-transform: uppercase; overflow-wrap: anywhere; }
  .band__lead { margin-top: 18px !important; max-width: 36em; font-size: clamp(15px, 1.05vw, 18px); line-height: 1.6; color: rgba(255,255,255,.82); }
  .band__go { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
  .band__go:not(:has(> :not([hidden]))) { display: none; }
  .filters { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
  .seg { display: inline-flex; gap: 2px; max-width: 100%; padding: 4px; overflow-x: auto; border-radius: 999px; background: rgba(18,18,18,.55); border: 1px solid rgba(255,255,255,.13); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); scrollbar-width: none; }
  .seg button { flex: none; height: 34px; padding: 0 15px; border-radius: 999px; font: 600 11px/1 var(--ui); letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.72); transition: color .2s, background-color .35s var(--ease); }
  .seg button:hover { color: #fff; }
  .seg button[aria-pressed="true"] { background: #fff; color: #000; }
  .seg--wrap { flex-wrap: wrap; border-radius: 22px; }

  /* cards: the game pages' .rcard */
  .pcard { position: relative; container-type: inline-size; display: flex; flex-direction: column; min-width: 0; padding: clamp(20px, 1.8vw, 32px); overflow: hidden; border: 1px solid var(--hair); border-radius: 18px; background: rgba(255,255,255,.03); color: #fff; }
  .pcard--link { cursor: pointer; transition: border-color .3s var(--ease), background-color .3s var(--ease); }
  .pcard--link:hover { border-color: rgba(255,255,255,.34); background: rgba(255,255,255,.05); }
  /* no plan: the plan card is the way in - a brighter edge and the solid pill (not a white block) */
  .pcard.t--inv { color: #fff; border-color: rgba(255,255,255,.42); background: radial-gradient(70% 80% at 85% 40%, rgba(255,255,255,.12), rgba(255,255,255,0) 70%), rgba(255,255,255,.04); }
  .pcard.t--inv .pb { border-color: #fff; background: #fff; color: #000; }
  .when-none { display: none; }
  .t--inv .when-none { display: inline; }
  .t--inv .when-plan { display: none; }
  .pcard__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
  .pcard__k { display: flex; align-items: center; gap: 10px; font: 600 12px/1.2 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
  .pcard__t { display: block; margin-top: 10px !important; font: 700 clamp(22px, 1.6vw, 30px)/1.05 var(--ui); letter-spacing: .01em; text-transform: uppercase; }
  .pcard__big { display: block; margin-top: 14px; font: 700 clamp(34px, 2.8vw, 54px)/1 var(--ui); letter-spacing: .012em; text-transform: uppercase; }
  .pcard__p { display: block; margin-top: 10px !important; font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.7); }
  .pcard__head .pcard__p { margin-top: 6px !important; }
  .pcard__note { margin-top: 6px !important; font-size: 14px; color: rgba(255,255,255,.5); }
  .pcard__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; padding-top: 24px; }
  .pcard__go:not(:has(> :not([hidden]))) { display: none; }
  .pcard--danger { border-color: rgba(255,255,255,.22); }
  .pcard--plantile { background: radial-gradient(60% 70% at 88% 45%, rgba(255,255,255,.1), rgba(255,255,255,0) 70%), rgba(255,255,255,.03); }
  .pcard__emblem { position: absolute; right: clamp(14px, 2vw, 36px); top: 50%; display: flex; transform: translateY(-58%); pointer-events: none; }
  .pcard__emblem img { width: clamp(96px, 8.6vw, 168px); height: auto; filter: drop-shadow(0 0 40px rgba(255,255,255,.26)); animation: hover 5s ease-in-out infinite alternate; }
  .pcard__emblem img + img { margin-left: -18%; }
  .pcard--plantile > :not(.pcard__emblem) { position: relative; z-index: 1; }
  .pcard--plan { gap: 0; }
  .pcard__badges { display: flex; gap: 4px; margin-bottom: 16px; }
  .pcard__badges img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 0 20px rgba(255,255,255,.2)); }
  .pcard__price { display: block; margin-top: 16px; font: 500 34px/1 var(--ui); font-variant-numeric: tabular-nums; }
  .pcard__price small { font-size: 14px; color: rgba(255,255,255,.55); }

  /* the games: the site's frames, greyscale, the words over the bottom */
  .gcard { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: clamp(260px, 22vw, 340px); padding: clamp(20px, 1.8vw, 32px); overflow: hidden; border: 1px solid var(--hair); border-radius: 18px; color: #fff; }
  .gcard__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.6); transition: transform 1s var(--soft), filter .6s var(--ease); }
  .gcard::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,0) 25%, rgba(0,0,0,.88) 100%); }
  .gcard:hover .gcard__img { transform: scale(1.05); filter: grayscale(1) brightness(.75); }
  .gcard .pcard__k { color: rgba(255,255,255,.72); }
  .gcard__t { margin-top: 8px; font: 700 clamp(26px, 2.2vw, 40px)/1 var(--ui); text-transform: uppercase; }
  .gcard__p { margin-top: 10px; font-size: 15px; color: rgba(255,255,255,.75); }
  .gcard__go { display: inline-flex; align-items: center; gap: 10px; margin-top: 18px; font: 600 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; }

  /* ---- v6 cards ---- */
  /* the numbers: what each counts, the number with its last days as small bars beside it */
  .kpi__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-top: auto; padding-top: 22px; }
  .kpi__v { font: 500 clamp(36px, 2.7vw, 54px)/.9 var(--ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .kpi__s { display: block; margin-top: 12px; font-size: 13.5px; color: rgba(255,255,255,.45); }
  .spark { display: flex; flex: 0 1 46%; align-items: flex-end; gap: 3px; max-width: 190px; height: 42px; }
  .spark i { flex: 1; min-width: 0; height: max(2px, var(--h, 0%)); border-radius: 2px; background: rgba(255,255,255,.14); }
  .spark i.has { background: rgba(255,255,255,.6); }
  .spark i.has:last-child { background: #fff; box-shadow: 0 0 10px rgba(255,255,255,.55); }
  /* Activity: hours a day, one bar a day, a shade per AI */
  .activity__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px 18px; }
  .legend { display: flex; flex-wrap: wrap; gap: 8px 16px; }
  .legend span { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.62); }
  .legend i { width: 10px; height: 10px; border-radius: 3px; background: var(--c); }
  .seg--sm { padding: 3px; }
  .seg--sm button { height: 30px; padding: 0 13px; font-size: 10.5px; }
  .bars { position: relative; height: clamp(170px, 10.5vw, 210px); margin-top: auto; padding-left: 46px; }
  .bars__grid { position: absolute; inset: 0 0 26px 46px; pointer-events: none; }
  .bars__grid span { position: absolute; left: 0; right: 0; bottom: var(--y); border-top: 1px solid var(--hair-2); }
  .bars__grid span:last-child { border-top-color: var(--hair); }
  .bars__grid b { position: absolute; right: calc(100% + 10px); top: -8px; font: 600 10.5px/16px var(--ui); letter-spacing: .08em; color: rgba(255,255,255,.42); white-space: nowrap; }
  .bars__cols { position: relative; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: clamp(3px, .45vw, 9px); height: 100%; }
  .bars__col { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) 26px; min-width: 0; }
  .bars__stack { display: flex; flex-direction: column-reverse; justify-self: center; width: min(100%, 44px); min-height: 0; }
  .bars__stack i { flex: none; height: var(--h); background: var(--c); transition: opacity .2s; }
  .bars__stack i:last-child { border-radius: 4px 4px 0 0; }
  .bars__stack i:first-child:not(.stub) { box-shadow: 0 0 14px rgba(255,255,255,.18); }
  .bars__stack i.stub { height: 2px; border-radius: 1px; background: rgba(255,255,255,.16); }
  .bars__col:hover .bars__stack i:not(.stub) { opacity: .78; }
  .bars__col b { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font: 600 10px/16px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.42); white-space: nowrap; }
  .activity .hint { position: absolute; left: calc(50% + 23px); top: 62%; width: min(80%, 440px); transform: translate(-50%, -50%); font: 600 11px/1.6 var(--ui); letter-spacing: .14em; text-transform: uppercase; text-align: center; color: rgba(255,255,255,.42); pointer-events: none; }
  /* Overview's plan card: the badge on its lit ring, right; no plan = a brighter edge, never a white block */
  .pcard__emblem::before { content: ""; position: absolute; left: 50%; bottom: -12%; z-index: -1; width: 175%; aspect-ratio: 4.2 / 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.24), rgba(255,255,255,.06) 58%, rgba(255,255,255,0)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }
  .pcard__emblem:empty { display: none; }
  a.pcard.t--inv:hover { border-color: #fff; background: radial-gradient(70% 80% at 85% 40%, rgba(255,255,255,.16), rgba(255,255,255,0) 70%), rgba(255,255,255,.06); }
  .gcard { min-height: clamp(210px, 13vw, 250px); }
  /* Overview: the last sessions, or the three steps before there are any */
  .mini { display: grid; }
  .mini__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; border-top: 1px solid var(--hair-2); }
  .mini__row > span:first-child { display: grid; gap: 5px; min-width: 0; }
  .mini__row b { overflow: hidden; font: 700 14px/1.2 var(--ui); letter-spacing: .05em; text-transform: uppercase; text-overflow: ellipsis; white-space: nowrap; }
  .mini__row small { overflow: hidden; font-size: 13.5px; color: rgba(255,255,255,.55); text-overflow: ellipsis; white-space: nowrap; }
  .mini__res { flex: none; font: 600 14px/1 var(--ui); }
  #ov-start .steps { max-width: none; margin-top: 18px !important; }
  /* Statistics: the picked AI fills the height of the AIs + sessions column; its chart takes what's left */
  #st-ai .ai__body { flex: 1; }
  #st-ai .ai__chart { min-height: 0; }
  #st-ai .chart { flex: 1; height: auto; min-height: 140px; padding-top: 18px; }   /* the tallest bar clear of the label */
  .chart__col i { justify-self: center; width: min(100%, 40px); }
  #ov-recent-t .pcard__head { align-items: center; }
  @container (max-width: 600px) { #st-ai .ai__body { grid-template-rows: auto minmax(0, 1fr); } }

  /* ---- License: the rank badge on the game pages' lit ring, the script, what the plan includes ---- */
  .lic__ranks.lic__ranks--three img { width: 44%; margin: 0; opacity: .78; }
  .lic__ranks.lic__ranks--three img:nth-child(2) { position: relative; z-index: 1; width: 64%; margin: 0 -12%; opacity: 1; }
  .ring { position: absolute; left: 50%; bottom: -24%; z-index: 0; width: 210%; aspect-ratio: 4.2 / 1; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(255,255,255,.26), rgba(255,255,255,.07) 58%, rgba(255,255,255,0)); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); animation: ringIn 1.4s var(--soft) .2s backwards; }
  .ring::after { content: ""; position: absolute; inset: -18% -9%; border-radius: 50%; border: 1px solid rgba(255,255,255,.08); }
  @keyframes ringIn { from { opacity: 0; transform: translateX(-50%) scale(.8); } }
  .lic__ranks { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; height: 100%; }
  .lic__ranks img { width: 100%; max-width: 100%; height: auto; object-fit: contain; filter: drop-shadow(0 0 46px rgba(255,255,255,.28)); animation: figIn 1.3s var(--soft) .3s backwards, hover 5s ease-in-out 1.6s infinite alternate; }
  .lic__ranks img + img { margin-left: -12%; }
  .lic__ranks:has(img + img) img { width: 62%; }
  @keyframes figIn { from { opacity: 0; transform: translate3d(0, 24px, 0); } }
  @keyframes hover { to { translate: 0 -12px; } }
  .code { margin-top: 18px !important; padding: 18px 20px; overflow-x: auto; border: 1px solid var(--hair); border-radius: 12px; background: rgba(0,0,0,.6); font: 500 15px/1.7 var(--mono); color: #fff; white-space: pre; cursor: copy; transition: border-color .25s var(--ease); }
  .code:hover, .code:focus-visible { outline: none; border-color: rgba(255,255,255,.34); }
  .code.is-flash { border-color: #fff; }
  .incl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 44px); margin-top: 18px !important; padding: 0; list-style: none; }
  .incl li { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 0; border-top: 1px solid var(--hair-2); }
  .incl svg { flex: none; width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #fff; color: #000; }
  .incl li.is-off svg { background: transparent; color: rgba(255,255,255,.45); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
  .incl span { display: grid; gap: 4px; min-width: 0; }
  .incl small { font: 600 11px/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
  .incl b { overflow: hidden; font-size: 17px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .incl li.is-off b { color: rgba(255,255,255,.45); }

  /* one wide plan card: the badge on its ring | the plan | how long it runs */
  #lic-card { display: grid; grid-template-columns: clamp(170px, 13vw, 240px) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: clamp(20px, 2.6vw, 56px); }
  .lic-none { display: grid; grid-template-columns: minmax(0, 1fr) clamp(220px, 20vw, 380px); align-items: center; gap: clamp(20px, 2.6vw, 56px); color: #fff; }
  .lic-none__t { display: flex; flex-direction: column; }
  .lplan__fig { position: relative; display: grid; place-items: center; min-height: clamp(170px, 12vw, 220px); }
  .lplan__fig .ring { bottom: 0; width: 150%; aspect-ratio: 4.2 / 1; }
  .lplan__fig .lic__ranks { width: 100%; height: auto; }
  .lplan__fig .lic__ranks--three { width: 76%; }
  .lplan__name { display: block; margin-top: 12px !important; font: 700 clamp(48px, 4.2vw, 84px)/.92 var(--ui); letter-spacing: .012em; text-transform: uppercase; overflow-wrap: anywhere; }
  .lplan__name.is-dim { color: rgba(255,255,255,.35); }
  .lplan .fchips { position: static; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .lplan .fchip { position: static; padding: 8px 13px; animation: chipIn .9s var(--soft) backwards; animation-delay: var(--d, .8s); }
  .lplan .fchip b { font-size: 15px; }
  .lic-none .pcard__go { padding-top: 24px; }
  .facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-left: 1px solid var(--hair-2); }
  .facts > div { display: flex; flex-direction: column; min-width: 0; padding: 6px 0 6px clamp(16px, 1.6vw, 30px); }
  .facts > div + div { border-left: 1px solid var(--hair-2); }
  .facts dt { font: 600 12px/1.2 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); }
  .facts dd { margin: 0; padding-top: 16px; font: 500 clamp(28px, 2.4vw, 46px)/1 var(--ui); letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
  .facts small { margin-top: 10px; font-size: 13px; color: rgba(255,255,255,.45); }
  .inf { display: block; width: 1.5em; height: .9em; }
  .meter-dd { width: 100%; }
  .meter { display: block; height: 3px; margin: 14px 0 5px; overflow: hidden; border-radius: 2px; background: rgba(255,255,255,.18); }
  .meter i { display: block; width: var(--w, 0%); height: 100%; background: #fff; box-shadow: 0 0 12px rgba(255,255,255,.7); transition: width .9s var(--soft); }
  #lic-meter-t { letter-spacing: .14em; text-transform: uppercase; }

  /* ---- Statistics ---- */
  .ais__head, .ais__row { display: grid; grid-template-columns: 48px minmax(0, 2fr) repeat(4, minmax(0, 1fr)) 16px; align-items: center; gap: 16px; }
  .ais__head { padding: 0 12px 10px; font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.45); }
  .ais__row { position: relative; width: 100%; min-height: 70px; padding: 11px 12px; border-top: 1px solid var(--hair-2); border-radius: 0; color: #fff; text-align: left; cursor: pointer; transition: background-color .25s var(--ease), border-radius .25s; }
  .ais__row:hover { background: rgba(255,255,255,.04); }
  .ais__row[aria-pressed="true"] { border-radius: 12px; border-top-color: transparent; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); }
  .ais__row[aria-pressed="true"] + .ais__row { border-top-color: transparent; }
  .ais__row img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; filter: grayscale(1) brightness(.75); }
  .ais__row b { display: block; overflow: hidden; font: 700 15px/1.2 var(--ui); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; text-overflow: ellipsis; }
  .ais__row small { display: block; margin-top: 3px; overflow: hidden; font-size: 13.5px; color: rgba(255,255,255,.6); white-space: nowrap; text-overflow: ellipsis; }
  .ais__row > span { font: 500 18px/1 var(--ui); font-variant-numeric: tabular-nums; }
  .ais__row > .ais__n { font: inherit; }
  .ais__row svg { width: 14px; height: 14px; color: rgba(255,255,255,.4); }
  .ai__head { display: flex; align-items: center; gap: 14px; }
  .ai__img { flex: none; width: 56px; height: 56px; border-radius: 12px; object-fit: cover; filter: grayscale(1) brightness(.75); }
  .ai__id { flex: 1; min-width: 0; }
  .ai__name { display: block; margin-top: 6px; font: 700 clamp(22px, 1.6vw, 30px)/1.05 var(--ui); text-transform: uppercase; }
  .ai__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 28px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--hair-2); }
  @container (max-width: 600px) { .ai__body { grid-template-columns: minmax(0, 1fr); } }
  .multi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; gap: 22px 16px; }
  .multi dt { font: 600 11px/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
  .multi dd { margin: 8px 0 0; font: 500 clamp(28px, 2.2vw, 40px)/1 var(--ui); font-variant-numeric: tabular-nums; }
  .ai__chart { position: relative; display: flex; flex-direction: column; min-height: 180px; }
  .chart { display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: clamp(2px, .4vw, 7px); align-items: end; height: 140px; margin-top: auto; }
  .chart__col { position: relative; display: grid; grid-template-rows: 1fr 16px; gap: 6px; min-width: 0; height: 100%; }
  .chart__col i { align-self: end; display: block; height: max(2px, var(--h, 0%)); border-radius: 3px; background: rgba(255,255,255,.16); transition: background-color .2s; }
  .chart__col.has i { background: #fff; box-shadow: 0 0 14px rgba(255,255,255,.25); }
  .chart__col:hover i { background: rgba(255,255,255,.7); }
  .chart__col b { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); font: 600 10px/16px var(--ui); letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.45); white-space: nowrap; }
  .chart__empty { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); font: 600 11px/1 var(--ui); letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.4); }
  .sess__row { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.8fr) minmax(0, .7fr) minmax(0, 1fr); gap: 16px; align-items: center; min-height: 52px; padding: 0 4px; border-top: 1px solid var(--hair-2); font-size: 15px; color: rgba(255,255,255,.6); }
  .sess__row b { font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff; }
  .sess__row span:nth-child(3) { font-variant-numeric: tabular-nums; color: #fff; }
  .sess__row span:last-child { font-weight: 600; color: #fff; text-align: right; }
  .sess__empty { font-size: 15px; color: rgba(255,255,255,.45); }

  /* ---- Settings: rows ---- */
  .rows { display: grid; margin-top: 16px; }
  .row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--hair-2); }
  .row__t { display: grid; flex: 1 1 150px; gap: 4px; min-width: 0; }
  .row > .pb { flex: none; }   /* never narrower than its words: it goes under them instead */
  .row__t b { overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
  .row__t small { font-size: 14px; color: rgba(255,255,255,.55); }
  .row__who { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .row__who .avatar { width: 44px; height: 44px; font-size: 16px; }
  .row__acts { display: flex; flex-wrap: wrap; gap: 8px; }
  .row--form { display: block; }
  .form__row { display: grid; gap: 14px; }
  .form__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
  [data-app] .ac-msg:empty { display: none; }
  /* Play statistics: off until the buyer turns them on (owner, 10-15). The switch is the menu replica's, full size. */
  .tgl { position: relative; flex: none; width: 48px; height: 28px; padding: 0; border: 0; border-radius: 14px; background: rgba(255,255,255,.18); cursor: pointer; transition: background-color .2s var(--ease); }
  .tgl::after { content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,.75); transition: transform .2s var(--ease), background-color .2s var(--ease); }
  .tgl[aria-checked="true"] { background: #fff; }
  .tgl[aria-checked="true"]::after { transform: translateX(20px); background: #000; }
  .tgl:disabled { cursor: default; opacity: .4; }
  .tgl:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .optin .pcard__p { max-width: 34em; }

  /* ---- Remote control: the game pages' hero - the words left, the menu on a lit ring right ---- */
  .band--remote { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); align-items: center; min-height: max(640px, 100svh); padding-bottom: 60px; }
  .rcstat { display: flex; align-items: flex-start; gap: 14px; max-width: 34em; margin-top: 28px; padding: 16px 18px; border: 1px solid rgba(255,255,255,.16); border-radius: 16px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
  .rcstat__dot { flex: none; width: 8px; height: 8px; margin-top: 3px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.75); }
  .rcstat b { display: block; font: 600 12px/1.2 var(--ui); letter-spacing: .16em; }
  .rcstat b + span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.72); }
  .steps { max-width: 34em; margin-top: 22px !important; padding: 0; list-style: none; border-top: 1px solid var(--hair-2); }
  .steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: baseline; padding: 14px 0; border-bottom: 1px solid var(--hair-2); font-size: 16px; color: rgba(255,255,255,.82); }
  .steps b { font: 600 12px/1 var(--ui); letter-spacing: .16em; color: rgba(255,255,255,.45); }
  .stage { position: relative; z-index: 1; align-self: center; min-width: 0; padding: 40px 0 70px; }
  .stage > .ring { bottom: 4%; width: 120%; aspect-ratio: 5 / 1; }
  .swstage { position: relative; width: 100%; height: 500px; transform: perspective(2200px) rotateY(-11deg) rotateX(5deg); transform-style: preserve-3d; transition: transform 1s var(--soft); }
  .stage:hover .swstage { transform: perspective(2200px) rotateY(0deg) rotateX(0deg); }
  .stage .fchip--a { left: 0; top: 8px; }
  .stage .fchip--b { right: -6px; top: 34%; }
  .stage .fchip--c { left: 6%; bottom: 26px; }
  .swin { --bg: #050505; --tile: #0e0e0e; --tile-h: #161616; --line: #242424; --text: #f4f4f4; --muted: #808080; --dim: #4e4e4e; --ink: #606060; }
  /* ---- the menu replica's tiles (Remote control only): the menu's tile, label, value, toggle, scrub, choice, keycap, action, input, info, hero ---- */
  .bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; gap: 12px; }
  .sp-c2 { grid-column: span 2; } .sp-c3 { grid-column: span 3; } .sp-c4 { grid-column: 1 / -1; } .sp-r2 { grid-row: span 2; }
  .t { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 122px; padding: 14px 16px 16px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--tile); color: var(--text); font: inherit; text-align: left; transition: background-color .25s var(--ease), border-color .25s var(--ease); }
  a.t, button.t { cursor: pointer; }
  a.t:hover, button.t:hover { background: var(--tile-h); border-color: var(--dim); }
  .t__label { display: block; min-height: 16px; padding-right: 44px; font: 700 11px/16px var(--app); letter-spacing: .02em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t__sub { display: block; margin-top: 2px; font: 400 11px/14px var(--app); color: var(--dim); }
  .t__desc { display: block; margin-top: 2px; font: 400 12px/1.25 var(--app); color: var(--muted); }
  .t__value { display: block; margin-top: auto; padding-top: 10px; font: 900 34px/40px var(--app); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .t__value--xl { font-size: 54px; line-height: 58px; }
  .t__title { display: block; margin-top: 4px; padding-right: 50px; font: 700 15px/1.25 var(--app); }
  .t__note { display: block; margin-top: 6px; padding-right: 50px; font: 400 12px/1.35 var(--app); color: var(--muted); }
  .t__body { display: block; margin-top: 6px; font: 400 13px/1.2 var(--app); color: var(--muted); }
  .badge { position: absolute; right: 16px; bottom: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #000; transition: transform .25s var(--ease); }
  .badge svg { width: 12px; height: 12px; }
  a.t:hover .badge, button.t:hover .badge { transform: translateX(3px); }
  .t--inv { background: #fff; border-color: #fff; color: #000; }
  .t--inv .t__label, .t--inv .t__sub, .t--inv .t__note { color: var(--ink); }
  .t--inv .badge { background: #000; color: #fff; }
  a.t--inv:hover, button.t--inv:hover { background: #e9e9e9; border-color: #e9e9e9; }
  .t--toggle .sw { position: absolute; top: 13px; right: 16px; width: 30px; height: 18px; border-radius: 9px; background: var(--line); }
  .t--toggle .sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 12px; height: 12px; border-radius: 50%; background: var(--muted); }
  .t__state { display: block; margin-top: auto; font: 900 36px/40px var(--app); }
  .t--toggle.is-on { background: #fff; border-color: #fff; color: #000; }
  .t--toggle.is-on .t__label, .t--toggle.is-on .t__desc { color: var(--ink); }
  .t--toggle.is-on .sw { background: #000; }
  .t--toggle.is-on .sw::after { left: 15px; background: #fff; }
  .t--scrub .t__drag { position: absolute; top: 14px; right: 16px; font: 700 10px/16px var(--app); color: var(--dim); }
  .t--scrub .t__value { margin-bottom: 18px; }
  .track { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 2px; background: var(--line); }
  .track__ticks i { position: absolute; bottom: 6px; width: 1px; height: 4px; background: var(--dim); }
  .track__ticks i.mid { height: 8px; }
  .track__fill { position: absolute; left: 0; top: 0; bottom: 0; background: #fff; }
  .track__head { position: absolute; top: 50%; width: 2px; height: 14px; margin-left: -1px; background: #fff; transform: translateY(-50%); }
  .t--choice { padding: 14px 8px 12px; }
  .t--choice .t__label { padding: 0 8px; }
  .opts { display: grid; margin-top: 14px; }
  .opt { display: flex; align-items: center; justify-content: space-between; height: 30px; padding: 0 12px; border-radius: 8px; }
  .opt b { font: 700 14px/1 var(--app); color: var(--muted); }
  .opt em { font: 500 11px/1 var(--mono); font-style: normal; color: var(--dim); }
  .opt.is-on { background: #fff; }
  .opt.is-on b { color: #000; }
  .opt.is-on em { color: var(--ink); }
  .t--key .cap { align-self: flex-start; display: inline-grid; place-items: center; height: 42px; margin-top: auto; padding: 0 14px; border: 1px solid var(--dim); border-radius: 10px; background: var(--bg); font: 700 15px/1 var(--app); }
  .t--input .box { display: flex; align-items: center; height: 48px; margin-top: auto; padding: 0 14px; overflow: hidden; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font: 500 18px/1 var(--mono); white-space: nowrap; }
  .t--input .box.is-ph { color: var(--dim); }
  .t--hero .mark { position: absolute; right: -60px; bottom: -44px; z-index: 0; height: calc(100% + 20px); }
  .t--hero .word { position: relative; z-index: 1; height: 14px; margin: 6px 0 0 4px; align-self: flex-start; }
  .hero__k { position: relative; z-index: 1; margin: 24px 0 0 4px; font: 700 11px/14px var(--app); color: var(--muted); }
  .hero__title { position: relative; z-index: 1; max-width: calc(100% - 150px); margin: 2px 0 0 4px; overflow: hidden; font: 900 26px/34px var(--app); text-overflow: ellipsis; white-space: nowrap; }
  .hero__body { position: relative; z-index: 1; max-width: calc(100% - 175px); margin: 6px 0 0 4px; font: 400 12px/1.2 var(--app); color: var(--muted); }
  .spill { position: relative; z-index: 1; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 26px; margin: auto 0 4px 4px; padding: 0 12px 0 11px; border-radius: 13px; background: #fff; color: #000; font: 700 10px/1 var(--app); letter-spacing: .02em; white-space: nowrap; }
  .spill i { width: 6px; height: 6px; border-radius: 50%; background: #000; }
  .spill.is-off { background: transparent; color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }
  .spill.is-off i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); }
  .spill--ink { position: absolute; top: 12px; right: 14px; margin: 0; background: #000; color: #fff; }
  .spill--ink i { background: #fff; }
  .spill--ink.is-due { background: transparent; color: #000; box-shadow: inset 0 0 0 1px #000; }
  .spill--ink.is-due i { background: transparent; box-shadow: inset 0 0 0 1.5px #000; }
  .t--profile .prof { display: flex; align-items: center; gap: 12px; margin-top: auto; min-width: 0; }
  .t--profile .avatar { flex: none; width: 44px; height: 44px; }
  .prof > span { display: grid; gap: 3px; min-width: 0; }
  .prof b { overflow: hidden; font: 700 14px/18px var(--app); text-overflow: ellipsis; white-space: nowrap; }
  .prof small { overflow: hidden; font: 400 11px/14px var(--app); color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
  .swin { position: absolute; left: 0; top: 0; width: 820px; height: 500px; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--bg); transform-origin: 0 0; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
  .swin__head { position: relative; height: 64px; border-bottom: 1px solid var(--line); }
  .swin__brand { position: absolute; left: 22px; top: 15px; display: flex; align-items: flex-start; gap: 8px; }
  .swin__brand .mark { height: 34px; }
  .swin__brand .word { height: 15px; margin-top: 10px; }
  .swin__nav { position: absolute; left: 50%; top: 12px; display: flex; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 20px; background: var(--tile); transform: translateX(-50%); }
  .swin__thumb { position: absolute; left: 4px; top: 3px; width: 96px; height: 32px; border-radius: 16px; background: #fff; transform: translateX(calc(var(--i, 1) * 104px)); transition: transform .45s var(--ease); }
  .swin__nav button { position: relative; z-index: 1; width: 104px; height: 38px; font: 700 13px/1 var(--app); color: var(--muted); transition: color .3s var(--ease); }
  .swin__nav button[aria-selected="true"] { color: #000; }
  .swin__nav button:hover:not([aria-selected="true"]) { color: var(--text); }
  .swin__fps { position: absolute; right: 96px; top: 18px; display: flex; align-items: center; gap: 6px; width: 84px; height: 28px; padding-left: 11px; border: 1px solid var(--line); border-radius: 14px; background: var(--tile); font: 500 12px/1 var(--mono); color: var(--muted); }
  .swin__fps i { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); }
  .swin__btn { position: absolute; top: 18px; width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 50%; background: var(--tile); }
  .swin__btn--min { right: 58px; }
  .swin__btn--x { right: 22px; }
  .swin__btn--min::after { content: ""; position: absolute; left: 8px; top: 12px; width: 10px; height: 2px; background: var(--text); }
  .swin__btn--x::before, .swin__btn--x::after { content: ""; position: absolute; left: 12px; top: 7px; width: 2px; height: 11px; background: var(--text); transform: rotate(45deg); }
  .swin__btn--x::after { transform: rotate(-45deg); }
  .swin__body { position: relative; height: 434px; }
  .swin__page { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 185px); grid-template-rows: repeat(3, 122px); gap: 12px; padding: 22px; filter: grayscale(1); opacity: .34; pointer-events: none; user-select: none; }
  .swin__page .t { min-height: 0; }
  .swin { box-shadow: 0 60px 140px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04), 0 0 110px rgba(255,255,255,.08); }
  .swin__page { opacity: .52; }
  .rc.is-locked .swin__page { opacity: .3; }

  .panel--bleed .band { padding-left: var(--pad); padding-right: var(--pad); }

  @media (max-width: 1599px) { body[data-app] { --side: 236px; } }
  @media (max-width: 1299px) {
    body[data-app] { --side: 220px; }
    .s3, .s4 { grid-column: span 6; }
    .s5, .s7, .s8 { grid-column: 1 / -1; }
    #lic-card { grid-template-columns: clamp(150px, 16vw, 200px) minmax(0, 1fr); }
    .facts { grid-column: 1 / -1; padding-top: 20px; border-left: 0; border-top: 1px solid var(--hair-2); }
    .facts > div:first-child { padding-left: 0; }
  }
  @media (max-width: 1099px) {
    .col.s4 { grid-column: 1 / -1; }
    .band--remote { grid-template-columns: minmax(0, 1fr); min-height: 0; row-gap: 20px; }
  }
  @media (max-width: 899px) {
    .app { display: block; }
    .side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 12px; height: auto; padding: 10px 16px; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.08); background: rgba(0,0,0,.86); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
    .side__top { flex: 1; min-width: 0; padding: 0; }
    .side__mark .mark { height: 28px; }
    .side__label { display: none; }
    .side__nav { order: 3; display: flex; flex-basis: 100%; gap: 2px; overflow-x: auto; scrollbar-width: none; }
    .side__nav::-webkit-scrollbar { display: none; }
    .side__nav button { flex: none; width: auto; height: 38px; padding: 0 14px; }
    .side__nav .ic, .side__nav button[aria-selected="true"]::after { display: none; }
    .side__foot { margin: 0; padding: 0; }
    .me { gap: 4px; padding: 0; border: 0; background: none; }
    .me__t { display: none; }
    .toast { left: 50%; }
    .panel { padding: 22px 16px 64px; }
    .panel--bleed { padding: 0; }
    .phead { align-items: flex-start; }
    .filters { justify-content: flex-start; }
    .s4, .s5, .s7, .s8, .col.s4 { grid-column: 1 / -1; }
    .band { grid-template-columns: minmax(0, 1fr); row-gap: 22px; min-height: 0; padding: 30px 16px 28px; }
    .panel--bleed .band { padding-left: 16px; padding-right: 16px; }
    #lic-card, .lic-none { grid-template-columns: minmax(0, 1fr); }
    .lplan__fig { width: min(56vw, 220px); justify-self: center; }
    .lic-none .lplan__fig { order: -1; }
    .stage .fchips { position: relative; inset: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 18px; }
    .stage .fchip { position: static; padding: 8px 13px; font-size: 10px; animation: chipIn .9s var(--soft) backwards; animation-delay: var(--d, .8s); }
    .fchip b { font-size: 15px; }
    .stage { padding: 0; }
    .stage > .ring { display: none; }
    .swstage { transform: none !important; }
  }
  @media (max-width: 680px) {
    .kpi { padding: 16px; }
    .kpi__v { font-size: 30px; }
    .kpi__row { gap: 10px; padding-top: 16px; }
    .spark { height: 30px; }
    .activity .pcard__head { flex-wrap: wrap; }
    .activity__tools { justify-content: flex-start; }
    .bars { padding-left: 0; }
    .bars__grid { left: 0; }
    .bars__grid b { display: none; }
    .activity .hint { left: 50%; }
    .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .facts > div:last-child { grid-column: 1 / -1; margin-top: 16px; padding: 16px 0 0; border-left: 0; border-top: 1px solid var(--hair-2); }
    .incl { grid-template-columns: minmax(0, 1fr); }
    .code { white-space: pre-wrap; word-break: break-all; font-size: 13.5px; }
    .ais__head, .ais__row { grid-template-columns: 40px minmax(0, 1fr) auto auto 12px; gap: 12px; }
    .ais__x { display: none; }
    .ais__row img { width: 40px; height: 40px; }
    .ai__head { flex-wrap: wrap; }
    .ai__id { min-width: calc(100% - 70px); }
    #st-ai-last { order: 3; }
    .sess__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 10px 0; }
    .sess__row span:nth-child(3) { text-align: left; }
    .swstage { height: auto !important; }
    .swin { position: relative; width: 100%; height: auto; transform: none !important; }
    .swin__head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; height: auto; padding: 14px; }
    .swin__brand { position: static; }
    .swin__brand .word { display: none; }
    .swin__fps { position: static; margin-left: auto; }
    .swin__btn { position: relative; top: auto; right: auto; flex: none; }
    .swin__nav { position: static; order: 5; flex-basis: 100%; transform: none; }
    .swin__nav button { flex: 1; width: auto; min-width: 0; padding: 0 4px; font-size: 12px; }
    .swin__thumb { display: none; }
    .swin__nav button[aria-selected="true"] { margin: 3px; height: 32px; border-radius: 16px; background: #fff; }
    .swin__body { height: auto; }
    .swin__page { position: relative; inset: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(122px, auto); gap: 10px; padding: 12px; }
    .swin__page .t { grid-column: auto !important; grid-row: auto !important; }
    .swin__page .t--hero, .swin__page .t--choice, .swin__page .t--info, .swin__page .t--input { grid-column: 1 / -1 !important; }
    .swin__page .t--hero { min-height: 240px; }
  }

  /* ---- Ours: payments' accounts (ACCOUNTS.md) in the partner's cards ---- */
  .db-boot { display: grid; place-items: center; min-height: 70vh; }
  .db-gone { max-width: 46em; margin: 0 auto; padding: 120px 24px; }
  .db-gone .db-new { margin: 0; }
  .db-pickrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-bottom: var(--gap); }
  .db-pickrow .seg { flex-wrap: wrap; border-radius: 22px; }
  .db-order { align-items: start; }
  #orders > .db-text, #orders > .db-text + .ac-form { max-width: 40em; }
  #addEmail { max-width: 40em; margin-top: 16px; }
  .db-line { margin-top: 14px !important; max-width: 38em; font-size: 16px; line-height: 1.55; font-weight: 500; color: #fff; }
  .db-lic { display: grid; grid-template-columns: clamp(170px, 13vw, 240px) minmax(0, 1fr) minmax(0, 1.2fr); align-items: center; gap: clamp(20px, 2.6vw, 56px); }
  .db-lic .fchips { position: static; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
  .db-lic .fchip { position: static; padding: 8px 13px; animation: chipIn .9s var(--soft) backwards; animation-delay: var(--d, .8s); }
  .db-lic .fchip b { font-size: 15px; }
  .db-meter-t { letter-spacing: .14em; text-transform: uppercase; }
  .db-key .db-text + .db-text, .db-dev .db-text + .db-text { margin-top: 10px; }
  .db-key .db-text a, .db-cancel a, #discordText a, #creatorInvite a, .db-rlist a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .db-keyval { font-size: 17px; letter-spacing: .04em; white-space: pre-wrap; word-break: break-all; }
  .db-script { white-space: pre-wrap; word-break: normal; overflow-wrap: anywhere; font-size: 14px; }   /* words whole where they fit */
  .db-lines { margin-top: 26px; }
  .db-lines .code { margin-top: 12px !important; }
  .db-lines .ac-hint { margin-top: 10px; }
  .db-key .db-lines .db-acts { margin-top: 14px; }
  .db-facts { margin-top: 16px !important; }
  .db-key .db-acts, .db-dev .db-acts, .db-plancard .db-acts { margin-top: 18px; }
  /* the plan tile's words stay clear of its badges (they ran under them in the partner's) */
  .pcard--plantile .pcard__p { max-width: 54%; }
  .pcard__emblem img:has(+ img), .pcard__emblem img + img { width: clamp(80px, 6.6vw, 128px); }   /* Pro's two badges */
  .pcard--plantile:has(.pcard__emblem img + img) .pcard__p { max-width: 40%; }
  .pcard--danger .row__t b { white-space: normal; }
  .db-dev .ac-hint { margin-top: 10px; }
  .db-rlist { display: grid; margin-top: 14px !important; padding: 0; list-style: none; }
  .db-rlist li { padding: 13px 0; border-top: 1px solid var(--hair-2); font-size: 15px; color: rgba(255,255,255,.75); }
  .db-cancel { margin-top: 20px; }
  .db-cancelform { display: grid; gap: 14px; margin-top: 14px; }
  .db-choice { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
  .db-opt { display: flex; align-items: baseline; gap: 10px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.82); }
  .db-date { max-width: 220px; height: 44px; color-scheme: dark; }
  /* A subscription's renewal, billing and cancelling, one step in behind "Manage subscription" (owner, 10-19): the way
     in sits where the plan card's facts were, and the step in takes the License page's place until "Back to your plan". */
  .db-mng { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding: 6px 0 6px clamp(16px, 1.6vw, 30px); border-left: 1px solid var(--hair-2); }
  .db-order.is-managing > :not(.db-manage), .db-order:not(.is-managing) > .db-manage, .is-managing .db-pickrow { display: none; }
  .db-manage { display: grid; justify-items: start; gap: 16px; }
  .db-back { display: inline-flex; align-items: center; gap: 9px; }
  .db-mcard { width: 100%; }
  .db-mname { margin-top: 12px !important; font: 700 clamp(32px, 2.8vw, 52px)/.95 var(--ui); letter-spacing: .012em; text-transform: uppercase; }
  .db-mcard .facts { margin-top: 26px; padding-top: 22px; border-left: 0; border-top: 1px solid var(--hair-2); }
  .db-mcard .facts > div:first-child { padding-left: 0; }
  .db-mcard .db-cancel { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair-2); }
  /* The paid reset's panel in the PC lock card: checkout.html's two boxes (pages.css), before Stripe */
  .db-paidform { display: grid; gap: 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--hair-2); }
  .db-paidform .db-paidtitle { margin: 0; font-size: 16px; font-weight: 600; color: #fff; }
  .db-paidform .db-price { font-weight: 600; color: #fff; }
  .db-paidform .checks { display: grid; gap: 14px; }
  .db-paidform .check { display: flex; align-items: flex-start; gap: 12px; }
  .db-paidform .check__body { min-width: 0; }
  .db-paidform .check label { cursor: pointer; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.82); }
  .db-paidform a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
  .db-paidform .tick { -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 1px 0 0; border: 1.5px solid rgba(255,255,255,.75); border-radius: 5px; background: #000; cursor: pointer; transition: border-color .15s, background-color .15s; }
  .db-paidform .tick:checked { border-color: #fff; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat; }
  .db-paidform .tick:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
  .db-paidform .tick[aria-invalid="true"] { border-color: #fff; box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }
  .db-paidform .err { margin: 8px 0 0; padding: 8px 11px; border-radius: 10px; background: #fff; color: #000; font-size: 13.5px; line-height: 1.45; }
  .db-paidform .fine { margin: 0; }
  .db-table { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
  .db-table th, .db-table td { padding: 12px 8px; border-bottom: 1px solid var(--hair-2); text-align: right; font-weight: 500; white-space: nowrap; }
  .db-table thead th { font: 600 11px/1.2 var(--ui); letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.55); }
  .db-table tbody th { text-align: left; color: #fff; }
  .db-tablewrap { margin-top: 18px; overflow-x: auto; }
  .dlegal { padding: 0 var(--pad) 28px; }
  @media (max-width: 1299px) {
    .db-lic { grid-template-columns: clamp(150px, 16vw, 200px) minmax(0, 1fr); }
    .db-lic .facts { grid-column: 1 / -1; padding-top: 20px; border-left: 0; border-top: 1px solid var(--hair-2); }
    .db-lic .facts > div:first-child { padding-left: 0; }
    .db-lic .db-mng { grid-column: 1 / -1; padding: 20px 0 0; border-left: 0; border-top: 1px solid var(--hair-2); }
  }
  @media (max-width: 899px) {
    .pcard--plantile .pcard__p { max-width: 44%; }
    .db-lic { grid-template-columns: minmax(0, 1fr); }
    .db-lic .lplan__fig { width: min(56vw, 220px); justify-self: center; }
    .dlegal { padding: 0 16px 28px; }
  }