/* Wavqu design system — see app/static/DESIGN.md
   Identity: cobalt + cool silver. Lexend (display, matches the wordmark), Public Sans (interface), system mono (keys). */

/* ---------- 1. Fonts (self-hosted, SIL OFL 1.1 — see fonts/OFL-*.txt) ---------- */
@font-face {
  font-family: "Lexend";
  src: url("../fonts/Lexend-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/PublicSans-Italic-wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  --cobalt: #2448D8;
  --cobalt-hover: #1D3BB4;
  --cobalt-active: #17308F;
  --cobalt-soft: #E9EEFF;
  --deep: #14266E;
  --ink: #151B2D;
  --porcelain: #F5F7FC;
  --white: #FFFFFF;
  --text-2: #556078;
  --border: #D8DEEB;
  --border-strong: #B9C2D6;
  --success: #17634A;
  --success-bg: #E4F3EC;
  --caution: #865400;
  --caution-bg: #FFF3DC;
  --error: #B42332;
  --error-bg: #FBE7E9;
  --silver: #E6EAF4;
  --pale-blue: #C4D3FF;
  --ultramarine: #0E1C86;

  --font-display: "Lexend", "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  --radius-ctl: 10px;
  --radius-panel: 16px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(21, 27, 45, .06), 0 4px 16px rgba(21, 27, 45, .06);
  --shadow-2: 0 12px 40px rgba(20, 38, 110, .16);

  --gutter: 20px;
  --max: 1280px;
  --section: 96px;

  --t-ctl: 160ms;
  --t-drawer: 240ms;
  --t-section: 500ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  --focus-ring: 0 0 0 3px var(--white), 0 0 0 6px var(--cobalt);
}
@media (min-width: 640px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; --section: 120px; } }
@media (min-width: 1280px) { :root { --gutter: 64px; --section: 144px; } }

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--porcelain);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.015em; color: var(--ink); margin: 0 0 .4em; line-height: 1.15; }
h1 { font-size: clamp(32px, 4vw, 44px); line-height: 1.1; }
h2 { font-size: clamp(24px, 2.6vw, 30px); margin-top: 1.6em; }
h3 { font-size: 20px; }
h4 { font-size: 17px; }
p { margin: 0 0 1em; }
a { color: var(--cobalt); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--cobalt-hover); }
strong { font-weight: 600; }
code, kbd, .key, .mono { font-family: var(--font-mono); font-size: .94em; }
code { background: var(--white); border: 1px solid var(--border); border-radius: 6px; padding: 1px 6px; color: var(--deep); }
.key { display: inline-block; font-size: 17px; letter-spacing: .04em; background: var(--white); color: var(--deep); padding: 8px 12px; border-radius: var(--radius-ctl); border: 1px dashed var(--border-strong); }
.num, .price, td.num, .tabular { font-variant-numeric: tabular-nums; }
hr { border: 0; border-top: 1px solid var(--border); margin: 24px 0; }
img, svg { max-width: 100%; height: auto; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
#main:focus, #main:focus-visible { outline: none; box-shadow: none; }
::selection { background: var(--pale-blue); color: var(--deep); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 100; background: var(--ink); color: var(--white); padding: 10px 14px; border-radius: var(--radius-ctl); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 16px; box-shadow: var(--focus-ring); }

/* text utilities (kept compatible with the original templates) */
.lead { color: var(--text-2); font-size: 18px; margin-top: 0; }
.muted { color: var(--text-2); }
.small { font-size: 15px; }
.tbd { color: var(--caution); font-size: 14px; font-weight: 500; }
.center { text-align: center; }
.eyebrow { font-family: var(--font-body); font-size: 14px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 12px; }
.eyebrow--light { color: var(--pale-blue); }

/* ---------- 4. Layout ---------- */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.container--narrow { max-width: 880px; }
.grid-12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.stack > * + * { margin-top: 16px; }
.section { padding: var(--section) 0; }
.section--tight { padding: calc(var(--section) * .6) 0; }
.section-title { font-size: clamp(30px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 16px; }
.section-intro { font-size: 18px; color: var(--text-2); max-width: 640px; margin: 0 0 40px; }

/* app (logged-in) shell: narrow, centred main */
.site-main { max-width: 1040px; margin: 0 auto; padding: 32px var(--gutter) 80px; }
.public-main { padding: 0; }

/* ---------- 5. Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 40; background: rgba(245, 247, 252, .92); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); }
.site-header--hero { position: relative; background: var(--cobalt); border-bottom: 0; backdrop-filter: none; }
.site-header__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; }
/* Brand: the vector lockup from /static/brand (never redrawn).  36px tall = 147px wide (min 120px); below 400px the
   symbol alone.  The SVG viewBox already includes a small margin; the link's padding adds the rest of the clear space. */
.brand { display: inline-flex; align-items: center; flex: none; color: var(--ink); text-decoration: none; border-radius: 8px; padding: 4px 0; }
.brand img { display: block; height: 36px; width: auto; }
.brand__symbol { display: none !important; }
@media (max-width: 399px) {
  .site-header .brand__lockup { display: none; }
  .site-header .brand__symbol { display: block !important; }
}
.brand--drawer img { height: 31px; }
.brand--footer img { height: 26px; }
.site-header--hero .brand { color: var(--white); }
.nav { display: none; align-items: center; gap: 4px; }
.nav a, .nav button.link { font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 8px; min-height: 44px; display: inline-flex; align-items: center; }
.nav a:hover { background: rgba(36, 72, 216, .08); color: var(--cobalt-hover); }
.site-header--hero .nav a { color: var(--white); }
.site-header--hero .nav a:hover { background: rgba(255, 255, 255, .12); color: var(--white); }
.nav__cta { margin-left: 8px; }
.nav-toggle { display: inline-flex; }
@media (min-width: 900px) {
  .nav { display: flex; }
  .nav-toggle { display: none; }
}
/* mobile drawer */
.nav-drawer { display: none; position: fixed; inset: 0; z-index: 60; background: rgba(21, 27, 45, .45); }
.nav-drawer[data-open="true"] { display: block; }
.nav-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(360px, 90vw); background: var(--white); padding: 20px; display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow-2); transform: translateX(0); animation: drawer-in var(--t-drawer) var(--ease); }
.nav-drawer__panel a { font-size: 17px; font-weight: 500; color: var(--ink); text-decoration: none; padding: 12px 10px; border-radius: 10px; min-height: 44px; display: flex; align-items: center; }
.nav-drawer__panel a:hover { background: var(--cobalt-soft); }
.nav-drawer__panel a.btn-primary { color: var(--white); }   /* the panel link colour must not win over the button */
.nav-drawer__panel a.btn-primary:hover { background: var(--cobalt-hover); border-color: var(--cobalt-hover); color: var(--white); }
.nav-drawer__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
@keyframes drawer-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
body.drawer-open { overflow: hidden; }
html:not(.js) .nav { display: flex; flex-wrap: wrap; justify-content: flex-end; }
html:not(.js) .nav-toggle { display: none; }

/* nav rail (logged-in pages: vertical navigation) */
.nav-rail { display: flex; flex-direction: column; gap: 2px; padding: 8px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); }
.nav-rail a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav-rail a:hover { background: var(--cobalt-soft); color: var(--cobalt-hover); }
.nav-rail a[aria-current="page"] { background: var(--cobalt); color: var(--white); }
.nav-rail svg { width: 18px; height: 18px; flex: none; }
.app-layout { display: grid; gap: 24px; }
@media (min-width: 900px) { .app-layout { grid-template-columns: 220px minmax(0, 1fr); align-items: start; } .nav-rail { position: sticky; top: 88px; } }

/* ---------- 6. Buttons ---------- */
button, .btn {
  font: inherit; font-family: var(--font-body); font-size: 16px; font-weight: 600; line-height: 1.2;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--radius-ctl);
  border: 1px solid var(--cobalt); background: var(--cobalt); color: var(--white);
  cursor: pointer; text-decoration: none; white-space: nowrap; position: relative;
  transition: background-color var(--t-ctl) var(--ease), border-color var(--t-ctl) var(--ease), color var(--t-ctl) var(--ease), transform var(--t-ctl) var(--ease);
}
button:hover, .btn:hover { background: var(--cobalt-hover); border-color: var(--cobalt-hover); color: var(--white); }
button:active, .btn:active { background: var(--cobalt-active); border-color: var(--cobalt-active); transform: translateY(1px); }
button:focus-visible, .btn:focus-visible { box-shadow: var(--focus-ring); border-radius: var(--radius-ctl); }
.btn-primary { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.btn-secondary, button.secondary, .btn.secondary { background: var(--white); color: var(--cobalt); border-color: var(--border-strong); }
.btn-secondary:hover, button.secondary:hover, .btn.secondary:hover { background: var(--cobalt-soft); color: var(--cobalt-hover); border-color: var(--cobalt); }
.btn-secondary:active, button.secondary:active, .btn.secondary:active { background: #DCE4FF; }
.btn-quiet, button.quiet, .btn.quiet { background: transparent; border-color: transparent; color: var(--cobalt); }
.btn-quiet:hover, button.quiet:hover, .btn.quiet:hover { background: var(--cobalt-soft); border-color: transparent; color: var(--cobalt-hover); }
.btn-danger, button.danger, .btn.danger { background: var(--white); color: var(--error); border-color: var(--error); }
.btn-danger:hover, button.danger:hover, .btn.danger:hover { background: var(--error); color: var(--white); border-color: var(--error); }
button:disabled, .btn[aria-disabled="true"], .btn.disabled { background: var(--border); border-color: var(--border); color: var(--text-2); cursor: not-allowed; transform: none; }
.btn.is-loading, button.is-loading { color: transparent !important; pointer-events: none; }
.btn.is-loading::after, button.is-loading::after { content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: var(--white); animation: spin .8s linear infinite; }
.btn-secondary.is-loading::after, .btn-quiet.is-loading::after, .btn-danger.is-loading::after { border-color: rgba(36, 72, 216, .3); border-top-color: var(--cobalt); }
@keyframes spin { to { transform: rotate(360deg); } }
.btn-lg { font-size: 17px; min-height: 52px; padding: 12px 24px; }
.btn-sm { font-size: 14px; min-height: 36px; padding: 6px 12px; border-radius: 8px; }
.btn-block { width: 100%; }
/* inverted buttons for cobalt surfaces */
.on-cobalt .btn-primary { background: var(--white); border-color: var(--white); color: var(--cobalt); }
.on-cobalt .btn-primary:hover { background: var(--porcelain); border-color: var(--porcelain); color: var(--cobalt-hover); }
.on-cobalt .btn-secondary { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--white); }
.on-cobalt .btn-secondary:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); color: var(--white); }
.on-cobalt :focus-visible { box-shadow: 0 0 0 3px var(--cobalt), 0 0 0 6px var(--white); }
/* bare control reset for tabs / segmented controls */
button.btn-reset { background: transparent; border: 0; color: inherit; font-weight: 500; padding: 0; min-height: 0; border-radius: 0; }
button.btn-reset:hover, button.btn-reset:active { background: transparent; color: inherit; transform: none; }
.btn svg, button svg { width: 18px; height: 18px; flex: none; }

/* ---------- 7. Panels ---------- */
.panel { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 24px; margin: 16px 0; box-shadow: var(--shadow-1); }
.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }
.panel--flat { box-shadow: none; }
.panel--cobalt { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
.panel--cobalt h2, .panel--cobalt h3 { color: var(--white); }
.panel--deep { background: var(--deep); border-color: var(--deep); color: var(--white); }
.panel--porcelain { background: var(--porcelain); box-shadow: none; }
.panel__title { font-size: 20px; margin: 0 0 12px; }

/* ---------- 8. Pills & status badges ---------- */
.pill { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; line-height: 1; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); background: var(--white); color: var(--text-2); }
.pill svg { width: 14px; height: 14px; }
.pill--ok, .pill-ok, .pill-active { background: var(--success-bg); color: var(--success); border-color: transparent; }
.pill--warn, .pill-warn, .pill-pending, .pill-attention { background: var(--caution-bg); color: var(--caution); border-color: transparent; }
.pill--bad, .pill-bad { background: var(--error-bg); color: var(--error); border-color: transparent; }
.pill--info, .pill-info { background: var(--cobalt-soft); color: var(--deep); border-color: transparent; }
.pill--tag { background: var(--porcelain); color: var(--text-2); }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; background: currentColor; }
.status--ok, .status-ok, .status-active { color: var(--success); }
.status--warn, .status-pending, .status-warn { color: var(--caution); }
.status--bad, .status-bad, .status-other { color: var(--error); }
.status--muted { color: var(--text-2); }
.status--ok::before, .status-ok::before { box-shadow: 0 0 0 3px var(--success-bg); }
.status--warn::before, .status-pending::before, .status-warn::before { background: transparent; border: 2px solid currentColor; width: 7px; height: 7px; }
.status--bad::before, .status-bad::before { border-radius: 2px; }
.status-active::before, .status-other::before { display: none; }

/* ---------- 9. Forms ---------- */
label { display: block; font-size: 15px; font-weight: 500; color: var(--ink); margin: 12px 0 6px; }
.hint { font-size: 14px; color: var(--text-2); margin: 6px 0 0; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=tel], input[type=url], select, textarea {
  width: 100%; font: inherit; font-size: 16px; color: var(--ink); background: var(--white);
  padding: 10px 14px; min-height: 44px; border-radius: var(--radius-ctl); border: 1px solid var(--border-strong);
  transition: border-color var(--t-ctl) var(--ease), box-shadow var(--t-ctl) var(--ease);
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(36, 72, 216, .22); border-radius: var(--radius-ctl); }
input[aria-invalid="true"], .field--error input, .field-invalid input { border-color: var(--error); }
.field-error { font-size: 14px; color: var(--error); margin: 6px 0 0; }
.help { font-size: 14px; color: var(--text-2); margin: 6px 0 0; }
.field--error .hint { color: var(--error); }
input:disabled, select:disabled, textarea:disabled { background: var(--porcelain); color: var(--text-2); }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--cobalt); margin: 0; }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; font-weight: 400; margin: 0; padding: 10px 0; cursor: pointer; }
.check input { margin-top: 3px; flex: none; }
form button, form .btn { margin-top: 12px; }
.field { margin: 0 0 16px; }

/* ---------- 10. Alerts / flash ---------- */
.alert, .flash { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 12px; margin: 16px 0; font-size: 15px; border: 1px solid transparent; }
.alert svg { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert--info, .alert-info { background: var(--cobalt-soft); color: var(--deep); border-color: #CBD6FF; }
.alert--ok, .alert-ok, .flash.ok { background: var(--success-bg); color: var(--success); border-color: #BFE3D2; }
.alert--warn, .alert-warn, .alert-attention { background: var(--caution-bg); color: var(--caution); border-color: #F3DDB0; }
.alert--bad, .alert-bad, .flash.bad { background: var(--error-bg); color: var(--error); border-color: #F2C3C8; }
.flash::before { content: "i"; flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.flash.bad::before { content: "!"; }
.flash.ok::before { content: "\2713"; }
.devbanner { background: var(--caution-bg); color: var(--caution); padding: 8px 14px; font-size: 14px; text-align: center; border-bottom: 1px solid #F3DDB0; }

/* ---------- 11. Tables ---------- */
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
th { color: var(--text-2); font-weight: 500; }
.table-wrap { overflow-x: auto; }

/* legacy classes from the original templates */
.plan { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 24px; }
.plan h3 { margin: 0 0 6px; }
.plan .price { font-size: 32px; font-weight: 700; font-family: var(--font-display); }
.plan .price small { font-size: 14px; color: var(--text-2); font-weight: 400; font-family: var(--font-body); }
.plan ul { padding-left: 18px; color: var(--text-2); }
ol.steps li { margin: 10px 0; }
details > summary { cursor: pointer; }

/* ---------- 12. Icons ---------- */
.icon { width: 24px; height: 24px; stroke: currentColor; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.icon--sm { width: 18px; height: 18px; }
.icon-tile { width: 48px; height: 48px; border-radius: 12px; background: var(--cobalt-soft); color: var(--cobalt); display: inline-flex; align-items: center; justify-content: center; margin-bottom: 16px; }

/* ---------- 13. Motion: section entrances ---------- */
.reveal { transition: opacity var(--t-section) var(--ease), transform var(--t-section) var(--ease); }
.reveal.reveal--pending { opacity: 0; transform: translateY(14px); }
.reveal.reveal--in { opacity: 1; transform: none; }
.fade-swap { transition: opacity 200ms var(--ease); }
.fade-swap[hidden] { display: none; }
.fade-swap.is-fading { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
  .reveal.reveal--pending { opacity: 1; transform: none; }
}

/* ======================================================================
   PUBLIC SITE
   ====================================================================== */

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--cobalt); color: var(--white); overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 78% 38%, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0) 70%),
    radial-gradient(50% 60% at 8% 100%, rgba(14, 28, 134, .55), rgba(14, 28, 134, 0) 70%),
    linear-gradient(180deg, #2A4FE0 0%, var(--cobalt) 45%, #1F40C6 100%); }
.hero__inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 36px; padding-bottom: 0; }
.hero__copy { position: relative; z-index: 2; max-width: 600px; }
.hero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(38px, 9.4vw, 54px); line-height: 1.02; letter-spacing: -0.03em; color: var(--white); margin: 0 0 20px; text-wrap: balance; }
.hero__lead { font-size: 18px; line-height: 1.5; color: #DCE3FF; max-width: 520px; margin: 0 0 16px; }
/* Subscription -> Licence key -> MT4 account: a one-line text diagram under the lead (not on the artwork) */
.hero__path { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 15px; font-weight: 600; color: var(--white); }
.hero__path li { display: inline-flex; align-items: center; white-space: nowrap; }
.hero__path li + li::before { content: "\2192"; color: var(--pale-blue); font-weight: 400; margin: 0 8px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
.hero__meta { font-size: 15px; color: #DCE3FF; margin: 0 0 6px; }
.hero__risk { font-size: 14px; color: #C2CCFA; margin: 0; }
.hero__risk a { color: var(--white); }
.hero__art { position: relative; min-width: 0; }
@media (min-width: 900px) {
  .hero__inner { padding-top: 56px; }
  .hero__title { font-size: clamp(46px, 5vw, 64px); }
  .hero__lead { font-size: 19px; }
}
@media (min-width: 1200px) {
  /* message and crest side by side; the crest stays inside its own column, so it never meets the copy */
  .hero__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: 56px; align-items: center; padding-top: 64px; padding-bottom: 72px; min-height: min(calc(86vh - 68px), 760px); }
  .hero__title { font-size: clamp(56px, 4.9vw, 72px); }
}

/* ---------- Wave crest (one breaking wave, from the Wavqu symbol) ---------- */
.wave { position: relative; margin: 0; min-width: 0; }
.wave__frame { position: relative; }
.wave__svg { display: block; width: 100%; height: auto; overflow: visible; }
.wave__crest { transform-box: fill-box; transform-origin: 78% 82%; }
@media (min-width: 1200px) {
  .wave__frame { max-width: 680px; margin-left: auto; }
}
@media (max-width: 1199px) {
  /* a deliberate crop: the crest's top part as a band under the copy, fading into the hero at the bottom.
     --band-h is the band height; the SVG is sized so viewBox y 245..450 fills it (1 unit = band-h / 205). */
  .hero__art { margin: 12px calc(var(--gutter) * -1) 0; }
  .wave__frame { --band-h: clamp(118px, 26vw, 210px); height: var(--band-h); overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 50%, transparent 100%); mask-image: linear-gradient(180deg, #000 50%, transparent 100%); }
  .wave__svg { position: absolute; top: calc(var(--band-h) * -0.2195); left: 50%; width: calc(var(--band-h) * 3.122); max-width: none; transform: translateX(-50%); }
  .wave__shadow { display: none; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .wave__svg { left: auto; right: calc(var(--gutter) - var(--band-h) * 0.2); transform: none; }
}
/* entrance: one short settle, then still. JS adds .wave--animate; without JS (or with reduced motion) the finished frame renders. */
.wave--animate .wave__crest { animation: crest-settle 1100ms cubic-bezier(.16, 1, .3, 1) both; }
.wave--animate .wave__shadow { animation: crest-fade 1100ms ease-out both; }
.wave--animate .wave__ice { animation: crest-fade 700ms ease-out 450ms both; }
@keyframes crest-settle { from { opacity: 0; transform: translate(26px, 12px) rotate(-2.5deg) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes crest-fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .wave--animate .wave__crest, .wave--animate .wave__shadow, .wave--animate .wave__ice { animation: none !important; }
}

/* ---------- Section surfaces ---------- */
.section--white { background: var(--white); }
.section--porcelain { background: var(--porcelain); }
.section--deep { background: var(--deep); color: var(--white); }
.section--deep .section-title, .section--deep h3 { color: var(--white); }
.section--deep .section-intro { color: #C9D3FF; }
.section--deep .eyebrow { color: var(--pale-blue); }
.section--hairline { border-top: 1px solid var(--border); }
.section-head { max-width: 720px; margin-bottom: 40px; }
.section-head .section-intro { margin-bottom: 0; }

/* ---------- How it works: a connected sequence ---------- */
.seq { position: relative; }
.seq__list { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.seq__step { position: relative; z-index: 1; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: start; }
.seq__node { width: 56px; height: 56px; border-radius: 50%; background: var(--white); border: 2px solid var(--cobalt); color: var(--cobalt); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px var(--porcelain); }
.seq__node svg { width: 26px; height: 26px; }
.seq__kicker { font-family: var(--font-display); font-weight: 600; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--cobalt); margin: 0 0 6px; }
.seq__step h3 { font-size: 22px; margin: 0 0 8px; letter-spacing: -0.01em; }
.seq__step p { color: var(--text-2); margin: 0 0 10px; font-size: 16px; max-width: 34ch; }
.seq__step a { font-weight: 500; }
.seq__art { margin: 0 0 14px; max-width: 300px; }
.seq__art svg { display: block; width: 100%; height: auto; }
@media (max-width: 799px) {
  .seq::before { content: ""; position: absolute; left: 27px; top: 56px; bottom: 56px; width: 2px; background: linear-gradient(180deg, var(--cobalt), var(--pale-blue)); }
}
@media (min-width: 800px) {
  .seq__list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-top: 8px; }
  .seq__step { grid-template-columns: 1fr; gap: 18px; }
  .seq__list::before { content: ""; position: absolute; z-index: 0; top: 35px; left: 28px; right: calc((100% - 80px) / 3 + 12px); height: 2px; background: linear-gradient(90deg, var(--cobalt), var(--pale-blue) 55%, var(--cobalt)); }
}

/* ---------- Dashboard showcase (demonstration data) ---------- */
.showcase { margin: 0; background: var(--white); border: 1px solid var(--border); border-radius: 20px; box-shadow: 0 24px 64px rgba(20, 38, 110, .14), 0 2px 6px rgba(20, 38, 110, .06); overflow: hidden; }
.showcase__bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 20px; border-bottom: 1px solid var(--border); background: var(--porcelain); }
.showcase__flag { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--caution); background: var(--caution-bg); border: 1px solid #F3DDB0; padding: 6px 10px; border-radius: 6px; margin-right: auto; }
.showcase__flag svg { width: 16px; height: 16px; }
.tabs { display: inline-flex; gap: 4px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-ctl); padding: 4px; max-width: 100%; overflow-x: auto; }
button.tab { min-height: 36px; padding: 6px 14px; border-radius: 8px; font-size: 15px; font-weight: 500; color: var(--text-2); background: transparent; border: 0; white-space: nowrap; }
button.tab:hover { background: var(--cobalt-soft); color: var(--cobalt-hover); transform: none; }
button.tab[aria-selected="true"] { background: var(--cobalt); color: var(--white); }
@media (max-width: 479px) {
  /* narrow phones: the three tabs share the bar's width (labels may wrap) instead of scrolling sideways */
  .showcase .showcase__bar { padding: 12px; }
  .showcase .tabs { display: flex; width: 100%; overflow: visible; }
  .showcase button.tab { flex: 1 1 0; min-width: 0; min-height: 44px; white-space: normal; line-height: 1.2; padding: 6px 6px; font-size: 14px; text-align: center; }
  .showcase .showcase__disclaimer { padding: 10px 12px; }
}
.showcase__disclaimer { margin: 0; padding: 10px 20px; font-size: 14px; color: var(--text-2); border-bottom: 1px solid var(--border); background: var(--white); }
.showcase__panel { padding: 20px; }
.showcase__panel[hidden] { display: none; }
/* with JS the figure's height follows the chosen panel: site.js animates the height change between tabs (Web
   Animations, no reserved space), so "Before setup" is not followed by the empty height of the connected view */
.js .showcase__panels { position: relative; }
.js .showcase__panels > .showcase__panel { min-width: 0; }
.showcase__h-note { font-weight: 500; text-transform: none; letter-spacing: 0; margin-left: 6px; }
.showcase__table .showcase__total th, .showcase__table .showcase__total td { border-top: 2px solid var(--border-strong); font-weight: 600; }
.showcase__table .showcase__total th { text-align: right; text-transform: none; letter-spacing: 0; font-size: 14px; }
.showcase__stats { display: grid; gap: 12px; margin-bottom: 16px; }
.stat { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--white); min-width: 0; }
.stat__label { display: block; font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin-bottom: 6px; }
.stat__value { display: block; font-family: var(--font-display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; line-height: 1.1; color: var(--ink); }
.stat__value small { font-family: var(--font-body); font-weight: 500; font-size: 14px; color: var(--text-2); margin-left: 6px; letter-spacing: 0; }
.stat__value--up { color: var(--success); }
.stat__value--down { color: var(--error); }
.stat__value--empty { color: var(--text-2); font-weight: 500; font-size: 17px; font-family: var(--font-body); line-height: 1.3; padding: 4px 0; }
.stat__meta { display: block; font-size: 13px; color: var(--text-2); margin-top: 6px; }
.showcase__grid { display: grid; gap: 16px; }
.showcase__chart { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px 10px; background: var(--white); min-width: 0; }
.showcase__chart h3, .showcase__table h3, .showcase__side h3 { font-family: var(--font-body); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-2); margin: 0 0 10px; }
.showcase__chart svg { display: block; width: 100%; height: auto; }
.chart__grid { stroke: var(--border); stroke-width: 1; }
.chart__zero { stroke: var(--ink); stroke-width: 1.4; stroke-dasharray: 4 4; }
.chart__line { fill: none; stroke: var(--cobalt); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.chart__area-up { fill: rgba(23, 99, 74, .12); }
.chart__area-down { fill: rgba(180, 35, 50, .12); }
.chart__dot { fill: var(--white); stroke: var(--cobalt); stroke-width: 2; }
.chart__tick { font-family: var(--font-body); font-size: 12px; fill: var(--text-2); }
.chart__empty { font-family: var(--font-body); font-size: 14px; font-weight: 500; fill: var(--text-2); }
.showcase__side { display: grid; gap: 12px; align-content: start; }
.showcase__card { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--white); }
.showcase__kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; font-size: 15px; margin: 0; }
.showcase__kv dt { color: var(--text-2); margin: 0; }
.showcase__kv dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.showcase__key { font-family: var(--font-mono); letter-spacing: .06em; background: var(--porcelain); border: 1px dashed var(--border-strong); padding: 4px 8px; border-radius: 8px; display: inline-block; font-size: 13px; }
.showcase__table { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--white); margin-top: 16px; min-width: 0; }
.showcase__table table { font-size: 14px; min-width: 560px; }
.showcase__table th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.showcase__table td, .showcase__table th { padding: 8px 8px; }
.showcase__table .num { text-align: right; }
.showcase__table th.num { text-align: right; }
.pl-up { color: var(--success); font-weight: 600; }
.pl-down { color: var(--error); font-weight: 600; }
.showcase__empty { color: var(--text-2); font-size: 15px; margin: 6px 0 0; }
.showcase__note { margin: 16px 0 0; }
.showcase__caption { font-size: 15px; color: var(--text-2); padding: 16px 20px; border-top: 1px solid var(--border); margin: 0; }
@media (min-width: 640px) { .showcase__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .showcase__panel { padding: 24px 28px 28px; }
  .showcase__grid { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .stat__value { font-size: 30px; }
}

/* ---------- Pricing ---------- */
.pricing-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.pricing-head .section-intro { margin-bottom: 0; }
.seg { display: inline-flex; gap: 4px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 4px; }
.seg label { margin: 0; }
.seg input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.seg span { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 16px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: background-color var(--t-ctl) var(--ease), color var(--t-ctl) var(--ease); }
.seg input:checked + span { background: var(--cobalt); color: var(--white); }
.seg input:focus-visible + span { box-shadow: var(--focus-ring); }
.pricing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 36px; align-items: start; }
/* four plans: stacked on phones, 2 x 2 from 700px, four columns only from 1200px (each card then has >= 260px, so
   prices, the intro block and the deposit tile never get squeezed; at 200% zoom a 1440px screen is 720px wide = 2 x 2) */
@media (min-width: 700px) { .pricing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .pricing { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .pricing .price-card { padding: 24px 22px; } .pricing .price-card__price { font-size: 38px; } }
/* a card is five blocks in normal flow (name / price, period, intro details / deposit allowance / included / action).
   No reserved heights, no absolute positioning: every block grows with its text. */
.price-card { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 28px; box-shadow: var(--shadow-1); overflow-wrap: break-word; }
.price-card > * + * { margin-top: 16px; }
/* from two columns the cards share row tracks (subgrid) so equivalent blocks line up across a row (no size
   containment on the card: container-type turns a subgrid back into an independent grid); every track is auto-sized, so the tallest block in a row (e.g. Starter's intro month) makes that row taller for all cards instead
   of overlapping the next block.  Each card always has exactly five blocks, matching the span. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 700px) {
    .pricing { align-items: stretch; }
    .price-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .price-card__action { align-self: end; }
    .price-card__deposit { align-self: start; }
  }
}
.price-card h3 { font-size: 22px; line-height: 1.25; margin: 0; }
.price-card__price { font-family: var(--font-display); font-weight: 700; font-size: 40px; line-height: 1.1; letter-spacing: -0.02em; margin: 0; color: var(--ink); }
.price-card__price .cur { font-size: .56em; vertical-align: top; margin-right: 2px; font-weight: 600; line-height: 1.5; }
.price-card__period { color: var(--text-2); font-size: 15px; line-height: 1.45; margin: 8px 0 0; }
.price-card__period strong { color: var(--ink); font-weight: 600; }
.price-card__note { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 10px 0 0; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.price-card__note .pill { flex: none; }
/* Starter intro month (monthly only, eligible customers): small muted struck-out regular price, dominant intro price,
   "For your first month.", the renewal price with its currency, then the once-only note as a full-width block */
.price-intro p { margin: 0; }
.price-intro .price-intro__was { font-size: 16px; font-weight: 500; line-height: 1.3; color: var(--text-2); margin: 0 0 2px; }
.price-intro__was s { text-decoration-thickness: 1.5px; text-decoration-color: currentColor; }
.price-intro .price-intro__for { margin-top: 8px; font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.price-intro .price-intro__then { margin-top: 2px; font-size: 15px; line-height: 1.45; color: var(--text-2); }
.price-intro .price-intro__terms { margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--deep); background: var(--cobalt-soft); border-radius: 8px; padding: 8px 12px; }
.price-card--lead { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt), 0 16px 40px rgba(36, 72, 216, .14); }
/* deposit allowance: label over value in a tile; Ultimate's explanation is its own paragraph under the tile */
.price-card__cap { display: flex; flex-direction: column; gap: 6px; background: var(--cobalt-soft); border: 1px solid #CBD6FF; border-radius: 14px; padding: 14px 16px; }
.price-card__cap-label { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--cobalt); }
.price-card__cap-num { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.02em; color: var(--deep); }
.price-card__cap--unlimited .price-card__cap-num { letter-spacing: -0.01em; }
.price-card__cap-note { margin: 10px 0 0; font-size: 15px; line-height: 1.45; }
.price-card__cap-note strong { display: block; font-weight: 600; color: var(--ink); }
.price-card__cap-note span { display: block; color: var(--text-2); }
.price-unlimited-note { margin: 16px 0 0; font-size: 15px; color: var(--text-2); max-width: 80ch; }
.price-card__features { list-style: none; margin: 16px 0 0; padding: 0; }
.price-card__row { display: flex; gap: 10px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.45; }
.price-card__row:last-child { padding-bottom: 0; }
.price-card__row > div { min-width: 0; }
.price-card__row svg { width: 18px; height: 18px; color: var(--cobalt); flex: none; margin-top: 2px; }
.price-card__row strong { display: block; font-weight: 600; }
.price-card__row .muted { display: block; }
.price-card__action { margin-top: 20px; }
.price-card__action .btn { width: 100%; margin: 0; }
.pricing__foot { font-size: 15px; color: var(--text-2); margin-top: 24px; max-width: 72ch; }
/* three short statements under the plans */
.price-facts { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 800px) { .price-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.price-facts li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 14px; background: var(--porcelain); border: 1px solid var(--border); font-family: var(--font-display); font-weight: 600; font-size: 17px; line-height: 1.35; color: var(--ink); min-width: 0; }
.price-facts .icon { color: var(--cobalt); margin-top: 1px; }
.price-terms { margin-top: 20px; max-width: 80ch; font-size: 15px; color: var(--text-2); }
.price-terms p { margin: 0 0 8px; }
.price-terms strong { color: var(--ink); font-weight: 600; }
.price-terms__risk { margin-top: 12px !important; }
.price-caps { margin-top: 16px; max-width: 80ch; border: 1px solid var(--border); border-radius: 14px; background: var(--white); }
.price-caps summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 52px; padding: 12px 18px; font-weight: 600; font-size: 16px; cursor: pointer; color: var(--ink); border-radius: 14px; }
.price-caps summary::-webkit-details-marker { display: none; }
.price-caps summary::after { content: "+"; font-family: var(--font-display); font-size: 22px; color: var(--cobalt); flex: none; width: 24px; text-align: center; }
.price-caps[open] summary::after { content: "\2212"; }
.price-caps summary:hover { color: var(--cobalt-hover); }
.price-caps__body { padding: 0 18px 14px; font-size: 15px; color: var(--text-2); }
.price-caps__body p { margin: 0 0 10px; }

/* ---------- Good to know (deep surface), FAQ excerpt, closing ---------- */
.trust { display: grid; gap: 28px; }
@media (min-width: 800px) { .trust { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; } .trust__item + .trust__item { border-left: 1px solid rgba(255, 255, 255, .18); padding-left: 40px; } }
.trust__item { min-width: 0; }
.trust__item .icon-tile { background: rgba(255, 255, 255, .12); color: var(--white); }
.trust__item h3 { font-size: 20px; margin: 0 0 8px; }
.trust__item p { color: #C9D3FF; margin: 0; font-size: 16px; max-width: 36ch; }
.faq-list { display: grid; gap: 0; max-width: 880px; border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 4px; font-weight: 600; font-size: 17px; cursor: pointer; min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--font-display); font-size: 22px; color: var(--cobalt); flex: none; width: 28px; text-align: center; }
.faq-item[open] summary::after { content: "\2212"; }
.faq-item summary:hover { color: var(--cobalt-hover); }
.faq-item summary:focus-visible { border-radius: 8px; }
.faq-item__body { padding: 0 4px 20px; color: var(--text-2); font-size: 16px; max-width: 68ch; }
.faq-item__body p:last-child { margin-bottom: 0; }
.closing { position: relative; overflow: hidden; background: var(--cobalt); color: var(--white); border-radius: 24px; padding: 56px var(--gutter); text-align: center; isolation: isolate; }
.closing::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 80% at 80% 20%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 70%), radial-gradient(50% 60% at 10% 100%, rgba(14, 28, 134, .6), rgba(14, 28, 134, 0) 70%); }
.closing h2 { color: var(--white); font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 12px; letter-spacing: -0.02em; }
.closing p { color: #DCE3FF; max-width: 560px; margin: 0 auto 24px; }
.closing .on-cobalt .btn-primary { background: var(--white); color: var(--cobalt); border-color: var(--white); }
.closing .on-cobalt :focus-visible { box-shadow: 0 0 0 3px var(--cobalt), 0 0 0 6px var(--white); }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--border); background: var(--white); padding: 48px 0 32px; font-size: 15px; color: var(--text-2); margin-top: auto; }
.site-footer__grid { display: grid; gap: 28px; }
@media (min-width: 760px) { .site-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.site-footer h2 { font-family: var(--font-body); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--ink); margin: 0 0 12px; }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.site-footer a { color: var(--text-2); text-decoration: none; }
.site-footer a:hover { color: var(--cobalt); text-decoration: underline; }
.site-footer__descriptor { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.site-footer__legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--border); font-size: 14px; }
.site-footer__legal p { margin: 0 0 8px; }

/* ---------- Content pages (setup guide, FAQ, beginners) ---------- */
.page-head { background: var(--white); border-bottom: 1px solid var(--border); padding: 56px 0 40px; }
.page-head h1 { font-size: clamp(32px, 5vw, 56px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 12px; }
.page-head p { color: var(--text-2); font-size: 18px; max-width: 680px; margin: 0; }
.page-body { padding: 48px 0 var(--section); }
.doc-layout { display: grid; gap: 40px; }
@media (min-width: 1000px) { .doc-layout { grid-template-columns: 280px minmax(0, 1fr); align-items: start; } .doc-layout__aside { position: sticky; top: 88px; } }
.checklist { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 20px; }
.checklist h2 { font-size: 16px; margin: 0 0 8px; }
.checklist ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.checklist li { counter-increment: step; }
.checklist a { display: flex; gap: 10px; align-items: center; min-height: 40px; padding: 4px 8px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 15px; }
.checklist a::before { content: counter(step); flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--cobalt-soft); color: var(--cobalt); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.checklist a:hover { background: var(--porcelain); color: var(--cobalt-hover); }
.checklist a[aria-current="step"] { background: var(--cobalt-soft); }
.checklist__progress { font-size: 14px; color: var(--text-2); margin: 8px 0 0; }
.step { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 28px; margin-bottom: 20px; scroll-margin-top: 96px; }
.step__head { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 12px; }
.step__num { flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--cobalt); color: var(--white); font-family: var(--font-display); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.step h2 { font-size: 24px; margin: 4px 0 0; }
.step__art { border-radius: 12px; border: 1px solid var(--border); background: var(--porcelain); padding: 12px; margin: 16px 0; }
.step__art svg { display: block; width: 100%; height: auto; }
.step__result, .step__trouble { border-radius: 12px; padding: 14px 16px; margin: 14px 0 0; font-size: 15px; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; }
.step__result { background: var(--success-bg); color: var(--success); }
.step__trouble { background: var(--caution-bg); color: var(--caution); }
.step__result strong, .step__trouble strong { display: block; margin-bottom: 2px; }
.step__result svg, .step__trouble svg { width: 20px; height: 20px; margin-top: 2px; }
.step__done { margin-top: 16px; font-size: 15px; }
.compare { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 700px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare__col { border-radius: var(--radius-panel); padding: 22px; border: 1px solid var(--border); background: var(--white); }
.compare__col--on { border-color: var(--cobalt); background: var(--cobalt-soft); }
.compare__col h3 { font-size: 18px; margin: 0 0 8px; display: flex; gap: 8px; align-items: center; }
.compare__col ul { margin: 0; padding-left: 18px; color: var(--text-2); font-size: 15px; }
.defs { display: grid; gap: 16px; }
@media (min-width: 760px) { .defs { grid-template-columns: 1fr 1fr; } }
.def { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 24px; }
.def h2 { font-size: 22px; margin: 12px 0 8px; }
.def p { color: var(--text-2); font-size: 16px; margin: 0; }
.def p + p { margin-top: 8px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.toc a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: var(--radius-pill); background: var(--white); border: 1px solid var(--border); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; }
.toc a:hover { border-color: var(--cobalt); color: var(--cobalt); }
.qa { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 24px 28px; margin-bottom: 16px; scroll-margin-top: 96px; }
.qa h2 { font-size: 21px; margin: 0 0 8px; }
.qa p { color: var(--text-2); margin: 0; font-size: 16px; }
.qa p + p { margin-top: 10px; }
.qa .answer { font-weight: 600; color: var(--ink); }
.suit { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 24px 28px; }
.suit .check { border-bottom: 1px solid var(--border); }
.suit .check:last-of-type { border-bottom: 0; }

/* ---------- Setup guide: illustrated steps, self-confirmed vs server-confirmed ---------- */
.doc-layout { grid-template-columns: minmax(0, 1fr); }
.doc-layout > * { min-width: 0; }
@media (min-width: 1000px) { .doc-layout { grid-template-columns: 280px minmax(0, 1fr); } }
.guide-intro { display: grid; gap: 20px; margin: 0 0 32px; }
.guide-fig { margin: 18px 0 0; border: 1px solid var(--border); border-radius: 14px; background: var(--porcelain); overflow: hidden; }
.guide-fig svg { display: block; width: 100%; height: auto; }
.guide-fig figcaption { font-size: 13.5px; color: var(--text-2); padding: 8px 14px; border-top: 1px solid var(--border); background: var(--white); display: flex; gap: 8px; align-items: baseline; }
.guide-fig figcaption strong { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* SVG mock-up text styles */
.mk { font-family: var(--font-body); font-size: 13px; fill: var(--ink); }
.mk--muted { fill: var(--text-2); }
.mk--small { font-size: 11.5px; }
.mk--mono { font-family: var(--font-mono); font-size: 12px; fill: var(--deep); }
.mk--white { fill: var(--white); }
.mk--bold { font-weight: 600; }
.mk--title { font-weight: 600; font-size: 13px; }
.mk-win { fill: var(--white); stroke: var(--border-strong); }
.mk-bar { fill: #EEF1F8; }
.mk-hl { fill: var(--cobalt-soft); stroke: var(--cobalt); stroke-width: 1.5; }
.mk-sel { fill: var(--cobalt); }
.mk-btn { fill: var(--white); stroke: var(--border-strong); }
.mk-ok { fill: var(--success); }
.mk-line { stroke: var(--border); }
.mk-point { stroke: var(--cobalt); stroke-width: 1.8; fill: none; }
.mk-callout { fill: var(--cobalt); }
.guide-step__do { margin: 0 0 4px; }
.page-body .key, .guide-step .mono { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.guide-step__do strong, .guide-step__next strong { color: var(--cobalt); font-weight: 600; }
.guide-step__next { margin: 14px 0 0; font-size: 15px; color: var(--text-2); }
.guide-step .step__result { margin-top: 14px; }
.guide-step .step__more { margin-top: 12px; }
.guide-step .step__more .step__trouble { margin: 12px; }
.confirm { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--border-strong); }
.confirm .check { padding: 6px 0; font-size: 15px; }
.confirm__tag { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; padding: 4px 10px; border-radius: var(--radius-pill); }
.confirm__tag--self { color: var(--text-2); border: 1.5px dashed var(--border-strong); background: var(--white); }
.confirm__tag--server { color: var(--success); background: var(--success-bg); border: 1.5px solid #BFE3D2; }
.confirm__tag svg { width: 14px; height: 14px; }
.confirm--server { border-top-style: solid; border-top-color: #BFE3D2; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; align-items: start; }
.confirm--server p { margin: 0; font-size: 15px; color: var(--text-2); }
.confirm--server .confirm__tag { align-self: start; }
.checklist a.is-done::before { background: var(--white); border: 1.5px dashed var(--border-strong); color: var(--text-2); content: "\2713"; }
.checklist li.checklist__server a::before { content: "\2713"; background: var(--success-bg); color: var(--success); border: 1.5px solid #BFE3D2; }
.checklist__legend { display: grid; gap: 6px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--border); font-size: 13px; color: var(--text-2); }
.checklist__legend span { display: inline-flex; align-items: center; gap: 8px; }
.checklist__legend i { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-style: normal; font-size: 10px; font-weight: 700; flex: none; }
.checklist__legend i.self { border: 1.5px dashed var(--border-strong); color: var(--text-2); }
.checklist__legend i.server { background: var(--success-bg); color: var(--success); border: 1.5px solid #BFE3D2; }
.guide-step .step__head h2 { font-size: 23px; }
.guide-prereq { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 20px 24px; }
.guide-prereq h2 { font-size: 18px; margin: 0 0 10px; }
.guide-prereq ul { margin: 0; padding-left: 20px; color: var(--text-2); font-size: 15px; display: grid; gap: 4px; }
.guide-prereq ul strong { color: var(--ink); font-weight: 600; }
.guide-after { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 24px 28px; }
.guide-after h2 { margin: 0 0 8px; font-size: 22px; }
.guide-after dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 12px 0 0; font-size: 15px; }
.guide-after dt { color: var(--text-2); margin: 0; }
.guide-after dd { margin: 0; font-weight: 500; }
@media (max-width: 480px) { .guide-after dl { grid-template-columns: 1fr; gap: 2px 0; } .guide-after dd { margin-bottom: 8px; } }

/* ---------- FAQ and beginners: lighter surfaces ---------- */
.qa { background: transparent; border: 0; border-top: 1px solid var(--border); border-radius: 0; padding: 24px 0; margin: 0; }
.qa:last-of-type { border-bottom: 1px solid var(--border); }
.qa h2 { font-size: 22px; margin: 0 0 10px; }
.qa p { max-width: 68ch; }
.defs { display: grid; gap: 0; border-top: 1px solid var(--border); }
@media (min-width: 760px) { .defs { grid-template-columns: 1fr 1fr; column-gap: 48px; } }
.def { background: transparent; border: 0; border-bottom: 1px solid var(--border); border-radius: 0; padding: 24px 0; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 4px 18px; }
.def .icon-tile { margin: 0; grid-row: span 3; }
.def h2 { margin: 2px 0 6px; }
.def p { grid-column: 2; }
.suit { background: var(--white); border: 1px solid var(--border); border-radius: 20px; padding: 28px; }
@media (min-width: 760px) { .suit { padding: 36px 40px; } }

/* ======================================================================
   CUSTOMER AREA (logged-in "quieter working mode"), auth flow, admin, dev
   Appended; nothing above is changed.
   ====================================================================== */

/* ---------- App shell ---------- */
.site-main--wide { max-width: 1240px; }
.app-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; margin: 0 0 24px; }
.app-head h1 { font-size: clamp(26px, 3vw, 34px); margin: 0; }
.app-head__sub { color: var(--text-2); font-size: 15px; margin: 0; display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.app-layout--dash { gap: 28px; }
@media (min-width: 900px) { .app-layout--dash { grid-template-columns: 224px minmax(0, 1fr); } }
/* app navigation: rail on desktop, single-row menu on narrow screens */
.app-nav { display: flex; gap: 4px; padding: 6px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.app-nav::-webkit-scrollbar { display: none; }
.app-nav a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 12px; min-height: 44px; border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; flex: none; transition: background-color var(--t-ctl) var(--ease), color var(--t-ctl) var(--ease); }
.app-nav a:hover { background: var(--cobalt-soft); color: var(--cobalt-hover); }
.app-nav a[aria-current="page"] { background: var(--cobalt); color: var(--white); }
.app-nav svg { width: 18px; height: 18px; flex: none; }
@media (min-width: 900px) {
  .app-nav { flex-direction: column; overflow: visible; position: sticky; top: 88px; padding: 8px; gap: 2px; }
  .app-nav a { display: flex; white-space: normal; }
}
.dash-stack { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.dash-stack > .panel, .dash-stack > .alert { margin: 0; }
.dash-stack > [id] { scroll-margin-top: 96px; }
@media (max-width: 899px) {
  /* urgency order on one column: attention, checklist, then the facts */
  .dash-stack > .dash-attention { order: -2; }
  .dash-stack > .dash-checklist { order: -1; }
}
.stat-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.stat-grid > .panel { margin: 0; min-width: 0; }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.panel__head h2 { font-size: 17px; margin: 0; }
.panel__foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border); }
.panel__foot form { margin: 0; }
.panel__foot .btn, .panel__foot button { margin-top: 0; }
.panel__note { font-size: 14px; color: var(--text-2); margin: 12px 0 0; }
/* key / value lists */
.kv { display: grid; grid-template-columns: minmax(96px, max-content) minmax(0, 1fr); gap: 8px 14px; margin: 0; font-size: 15px; }
.kv dt { color: var(--text-2); margin: 0; }
.kv dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }
.kv dd .small { font-weight: 400; }
.kv a.small { font-size: 14px; margin-left: 6px; }
@media (max-width: 380px) { .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dd { margin-bottom: 8px; } }
.mono { font-family: var(--font-mono); font-size: .94em; letter-spacing: .02em; }

/* attention banner */
.alert--banner { align-items: flex-start; margin: 0; }
.alert--banner ul { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.alert--banner li { display: flex; gap: 8px; align-items: baseline; }
.alert--banner li::before { content: "\2192"; flex: none; }
.alert--banner a { color: inherit; font-weight: 500; }

/* ---------- Setup checklist (compact task list) ---------- */
.tasklist { list-style: none; margin: 0; padding: 0; }
.tasklist > li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 4px 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
.tasklist > li:first-child { border-top: 0; padding-top: 4px; }
.tasklist > li:last-child { padding-bottom: 4px; }
.tasklist__icon { grid-row: span 2; align-self: start; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; border: 1.5px solid var(--border-strong); color: var(--text-2); background: var(--white); margin-top: 1px; }
.tasklist__icon svg { width: 16px; height: 16px; stroke-width: 2.2; }
.tasklist > li.is-done .tasklist__icon { background: var(--success); border-color: var(--success); color: var(--white); }
.tasklist__label { font-weight: 600; font-size: 15px; margin: 0; }
.tasklist > li.is-done .tasklist__label { color: var(--text-2); text-decoration: line-through; text-decoration-thickness: 1px; }
.tasklist__desc { font-size: 14px; color: var(--text-2); margin: 0; grid-column: 2; }
.tasklist__action { grid-row: span 2; display: flex; align-items: center; gap: 8px; }
.tasklist__action form { margin: 0; display: inline-flex; gap: 8px; }
.tasklist__action .btn, .tasklist__action button { margin: 0; }
.tasklist__wait { font-size: 14px; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.tasklist__wait svg { width: 16px; height: 16px; }
@media (max-width: 600px) {
  .tasklist > li { grid-template-columns: 28px minmax(0, 1fr); }
  .tasklist__action { grid-row: auto; grid-column: 2; margin-top: 6px; flex-wrap: wrap; }
}
.tasklist__progress { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); margin: 0 0 8px; }
.progress { flex: 1 1 120px; height: 6px; border-radius: var(--radius-pill); background: var(--border); overflow: hidden; }
.progress__bar { display: block; height: 100%; background: var(--cobalt); border-radius: inherit; transition: width var(--t-drawer) var(--ease); }

/* ---------- Flow stepper (Account → Plan → Payment → Setup) ---------- */
.flow { margin: 0 0 28px; }
.flow-steps { list-style: none; margin: 0; padding: 0; display: flex; align-items: flex-start; }
.flow-steps__item { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; font-size: 14px; font-weight: 500; color: var(--text-2); }
.flow-steps__item:not(:last-child)::after { content: ""; position: absolute; top: 15px; left: calc(50% + 20px); right: calc(-50% + 20px); height: 2px; background: var(--border); }
.flow-steps__item--done:not(:last-child)::after { background: var(--cobalt); }
.flow-steps__dot { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; background: var(--white); border: 1.5px solid var(--border-strong); color: var(--text-2); }
.flow-steps__dot svg { width: 16px; height: 16px; stroke-width: 2.4; }
.flow-steps__item--done .flow-steps__dot { background: var(--cobalt-soft); border-color: var(--cobalt); color: var(--cobalt); }
.flow-steps__item--current .flow-steps__dot { background: var(--cobalt); border-color: var(--cobalt); color: var(--white); box-shadow: 0 0 0 4px var(--cobalt-soft); }
.flow-steps__item--current { color: var(--ink); font-weight: 600; }
.flow-steps__label { padding: 0 4px; }
.flow-steps__summary { display: none; margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.flow-steps__summary .muted { font-weight: 500; }
@media (max-width: 559px) {
  .flow-steps { display: none; }
  .flow-steps__summary { display: flex; align-items: center; gap: 10px; }
  .flow-steps__summary .flow-steps__dot { width: 28px; height: 28px; font-size: 13px; background: var(--cobalt); border-color: var(--cobalt); color: var(--white); }
}

/* ---------- Auth and flow pages: one focused card ---------- */
.auth { max-width: 520px; margin: 0 auto; }
.auth--wide { max-width: 640px; }
.auth__mark { display: flex; justify-content: center; margin: 4px 0 16px; }
.auth__mark img { display: block; width: 64px; height: auto; }
.auth h1 { font-size: clamp(26px, 4vw, 32px); text-align: center; margin: 0 0 20px; }
.auth .flow { margin-bottom: 24px; }
.auth .panel { margin: 0; padding: 28px 24px; }
@media (min-width: 560px) { .auth .panel { padding: 32px; } }
.auth .panel form > .btn, .auth .panel form > button { margin-top: 20px; }
.auth__foot { font-size: 15px; color: var(--text-2); text-align: center; margin: 20px 0 0; }
.auth__foot a { color: var(--cobalt); }
.auth .field { margin-bottom: 18px; }
.auth .field > label:first-child { margin-top: 0; }
.auth .alert { margin: 0 0 20px; }
.field-error { display: flex; gap: 6px; align-items: flex-start; }
.field-error::before { content: "!"; flex: none; width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; margin-top: 2px; }
.help, .hint { line-height: 1.45; }
/* show-password toggle */
label.show-password { display: inline-flex; align-items: center; gap: 10px; font-size: 14px; font-weight: 500; color: var(--text-2); margin: 10px 0 0; padding: 4px 0; min-height: 36px; cursor: pointer; }
label.show-password input { width: 18px; height: 18px; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.form-actions .btn, .form-actions button { margin-top: 0; }
@media (max-width: 420px) { .form-actions .btn, .form-actions button { width: 100%; } }

/* summary table (review, billing change, account change, dev checkout) */
table.summary { margin: 0 0 20px; font-size: 15px; }
table.summary th { width: 36%; font-weight: 500; color: var(--text-2); padding: 11px 12px 11px 0; }
table.summary td { padding: 11px 0; font-weight: 500; }
table.summary td .muted, table.summary td .small { font-weight: 400; }
table.summary tr:last-child th, table.summary tr:last-child td { border-bottom: 0; }
table.summary td.summary__lead { font-size: 18px; font-weight: 700; }
@media (max-width: 440px) {
  table.summary, table.summary tbody, table.summary tr, table.summary th, table.summary td { display: block; width: 100%; }
  table.summary th { padding: 10px 0 0; border: 0; font-size: 14px; }
  table.summary td { padding: 2px 0 10px; }
}

/* segmented control block + selectable plan cards */
.seg--form { display: inline-flex; border: 1px solid var(--border); padding: 4px; margin: 0; }
.seg--form legend { padding: 0; margin: 0 0 8px; font-size: 15px; font-weight: 500; }
.seg-wrap { margin: 0 0 20px; }
.seg-wrap > .seg-label { display: block; font-size: 15px; font-weight: 500; margin: 0 0 8px; }
/* choose plan: one card per plan, five blocks in normal flow (name + radio / price, period, intro details / deposit
   allowance / included / selection status).  The card is a <div>; the plan name is the radio's <label> and its
   ::after covers the card, so a click anywhere on the card selects the plan.  Selection only changes colours and a
   box-shadow ring (border width and the status row's size stay the same), so selecting never moves anything. */
.auth.auth--plans { max-width: 1120px; }
.plan-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.plan-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 24px; align-items: start; }
@media (min-width: 600px) { .plan-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .plan-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.plan-card { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; padding: 20px; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); font-size: 15px; line-height: 1.45; overflow-wrap: break-word; cursor: pointer; transition: border-color var(--t-ctl) var(--ease), box-shadow var(--t-ctl) var(--ease); }
.plan-card > * + * { margin-top: 14px; }
@supports (grid-template-rows: subgrid) {
  @media (min-width: 600px) {
    .plan-cards { align-items: stretch; }
    .plan-card { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
    .plan-card__status { align-self: end; }
    .plan-card__deposit { align-self: start; }   /* the tile hugs its text; the next block still starts on the shared line */
  }
}
.plan-card:hover { border-color: var(--cobalt); }
.plan-card:has(input:checked) { border-color: var(--cobalt); box-shadow: 0 0 0 1px var(--cobalt), var(--shadow-1); }
.plan-card:has(input:focus-visible) { box-shadow: 0 0 0 1px var(--cobalt), var(--focus-ring); }
.plan-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.plan-card__name { margin: 0; padding-top: 9px; min-width: 0; font-family: var(--font-display); font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--ink); cursor: pointer; }
.plan-card__name::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--radius-panel); }
.plan-card__control { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 -11px 0 0; }
.plan-card__control input { width: 22px; height: 22px; margin: 0; accent-color: var(--cobalt); }
.plan-card__control input:focus-visible { box-shadow: none; outline: none; }
.plan-card__priceblock > :first-child { margin-top: 0; }
.plan-card .price-card__price { font-size: 34px; }
.plan-card__deposit { padding: 12px 14px; border-radius: 12px; background: var(--cobalt-soft); }
.plan-card__cap { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--deep); }
.plan-card__cap strong { display: block; margin-top: 2px; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; }
.plan-card__cap--unlimited strong { margin-top: 0; font-size: 17px; }
.plan-card__cap-note { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.plan-card__features { list-style: none; margin: 14px 0 0; padding: 0; }
.plan-card__features li { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: var(--text-2); }
.plan-card__features li > span { min-width: 0; }
.plan-card__features .icon { width: 18px; height: 18px; color: var(--cobalt); margin-top: 1px; }
/* status row: "Selected" and "Select <plan>" share one grid cell, so the row is the same size in both states */
.plan-card__status { display: grid; justify-items: start; }
.plan-card__status > * { grid-area: 1 / 1; max-width: 100%; white-space: normal; line-height: 1.2; }
.plan-card__select { background: var(--white); border-color: var(--border-strong); color: var(--text-2); }
.plan-card__selected { visibility: hidden; }
.plan-card:has(input:checked) .plan-card__selected { visibility: visible; }
.plan-card:has(input:checked) .plan-card__select { visibility: hidden; }

/* confirming state (payment return) */
.confirming { display: flex; gap: 16px; align-items: flex-start; }
.spinner { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--cobalt-soft); border-top-color: var(--cobalt); animation: spin 1s linear infinite; margin-top: 2px; }
.confirming p { margin: 0 0 8px; }

/* copy rows (licence key, server URL) */
.copy-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.copy-row .key { margin: 0; max-width: 100%; overflow-wrap: anywhere; font-size: 16px; }
.copy-row .btn, .copy-row button { margin: 0; }
.copy-row__live { font-size: 14px; color: var(--success); font-weight: 600; min-width: 0; }
.copy-row__live:empty { display: none; }

/* ---------- Setup page (logged in) ---------- */
.setup-layout { display: grid; gap: 32px; }
@media (min-width: 1000px) { .setup-layout { grid-template-columns: 300px minmax(0, 1fr); align-items: start; } .setup-layout__aside { position: sticky; top: 88px; } }
.setup-layout .panel { margin: 0 0 20px; }
.setup-layout .step { margin-bottom: 20px; }
.setup-layout .step h2 { margin-top: 1px; }
.setup-layout .step p:last-child { margin-bottom: 0; }
.step__more { margin: 14px 0 0; border: 1px solid var(--border); border-radius: 12px; background: var(--white); }
.step__more summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; min-height: 44px; font-weight: 600; font-size: 15px; cursor: pointer; border-radius: 12px; }
.step__more summary::-webkit-details-marker { display: none; }
.step__more summary::after { content: "+"; font-family: var(--font-display); font-size: 20px; color: var(--cobalt); }
.step__more[open] summary::after { content: "\2212"; }
.step__more[open] summary { border-bottom: 1px solid var(--border); border-radius: 12px 12px 0 0; }
.step__more .step__result, .step__more .step__trouble { margin: 12px; }
.step__more .step__result + .step__trouble { margin-top: 0; }
.setup-aside__title { font-size: 16px; margin: 0 0 12px; }
.compare--tight { margin: 0 0 24px; }
.compare--tight .compare__col { padding: 18px; }
.compare--tight h3 { font-size: 16px; }
.setup-note { font-size: 15px; color: var(--text-2); margin: -8px 0 28px; }

/* ---------- Admin ---------- */
.admin-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--deep); color: var(--white); padding: 4px 10px; border-radius: 6px; vertical-align: middle; }
.admin-tools { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; justify-content: space-between; margin: 0 0 12px; }
.admin-tools .field { margin: 0; flex: 1 1 260px; max-width: 420px; }
.admin-tools .field label { margin-top: 0; }
.admin-tools form { margin: 0; }
.admin-tools form button { margin: 0; }
.admin-count { font-size: 14px; color: var(--text-2); }
.table-wrap table { min-width: 640px; }
.table-wrap--wide table { min-width: 1180px; }
.table-wrap th { white-space: nowrap; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; }
.table-wrap td { font-size: 14px; }
.admin-actions { display: grid; gap: 10px; min-width: 300px; }
.admin-actions form { display: grid; grid-template-columns: auto minmax(120px, 1fr) auto; gap: 8px; align-items: end; margin: 0; }
.admin-actions form.admin-actions__two { grid-template-columns: minmax(120px, 1fr) auto; }
.admin-actions label { font-size: 12px; font-weight: 600; color: var(--text-2); margin: 0 0 4px; }
.admin-actions input[type=number], .admin-actions input[type=text] { min-height: 38px; padding: 6px 10px; font-size: 14px; }
.admin-actions input[type=number] { width: 84px; }
.admin-actions button { margin: 0; min-height: 38px; }
tr.is-filtered-out { display: none; }

/* ---------- Local-dev stand-ins (fake Stripe) ---------- */
.dev-card { border: 1px dashed var(--caution); background: #FFFDF7; box-shadow: none; }
.dev-tag { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--caution-bg); color: var(--caution); padding: 4px 10px; border-radius: 6px; margin-bottom: 12px; }
.dev-sub { padding: 14px 0; border-top: 1px solid var(--border); }
.dev-sub:first-of-type { border-top: 0; }
.dev-sub p { margin: 0 0 10px; }
/* stat panels: label over value, so long labels never squeeze the value */
.stat-grid .kv { grid-template-columns: 1fr; gap: 12px 0; }
.stat-grid .kv dt { font-size: 12.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 2px; }
.stat-grid .kv dd { font-size: 16px; }
.kv a.small { white-space: nowrap; }
.panel__head { flex-wrap: wrap; }
.tasklist > li.is-done .tasklist__label { text-decoration: none; }
/* setup aside: stacked task rows, and the sticky column scrolls when taller than the viewport */
.setup-layout__aside .tasklist > li { grid-template-columns: 28px minmax(0, 1fr); }
.setup-layout__aside .tasklist__action { grid-row: auto; grid-column: 2; margin-top: 6px; flex-wrap: wrap; }
.setup-layout__aside .tasklist__desc { font-size: 13.5px; }
@media (min-width: 1000px) { .setup-layout__aside { max-height: calc(100vh - 100px); overflow-y: auto; padding: 2px; } }
/* single-column grids must never grow to a child's min-content width (320px) */
.setup-layout, .app-layout--dash { grid-template-columns: minmax(0, 1fr); }
.setup-layout > *, .app-layout--dash > * { min-width: 0; }
@media (min-width: 900px) { .app-layout--dash { grid-template-columns: 224px minmax(0, 1fr); } }
@media (min-width: 1000px) { .setup-layout { grid-template-columns: 300px minmax(0, 1fr); } }
.step code, .compare code { overflow-wrap: anywhere; }
/* narrow screens: long button labels in the logged-in area may wrap instead of overflowing */
@media (max-width: 480px) { .site-main .btn, .site-main button { white-space: normal; max-width: 100%; text-align: center; } }

/* ---------- Legal drafts (/terms, /privacy, /refunds, /risk) ---------- */
.legal { max-width: 880px; margin: 0 auto; }
.legal__nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 20px; font-size: 15px; }
.legal__nav a { color: var(--cobalt); }
.legal__nav a[aria-current="page"] { color: var(--ink); font-weight: 600; text-decoration: none; }
.legal__banner { margin: 0 0 24px; }
.legal__doc { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 24px 20px; overflow-wrap: anywhere; }
@media (min-width: 640px) { .legal__doc { padding: 40px 48px; } }
.legal__doc h2 { font-size: 22px; margin: 32px 0 12px; scroll-margin-top: 88px; }
.legal__doc h3, .legal__doc h4 { font-size: 18px; margin: 24px 0 8px; }
.legal__doc p, .legal__doc li { line-height: 1.6; }
.legal__doc hr { border: 0; border-top: 1px solid var(--border); margin: 28px 0; }
.legal__doc blockquote { margin: 16px 0; padding: 12px 16px; border: 1px solid var(--pale-blue); background: var(--cobalt-soft); border-radius: 10px; color: var(--deep); }
.legal__doc blockquote p { margin: 0 0 8px; } .legal__doc blockquote p:last-child { margin: 0; }
.legal-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.legal-table th { background: var(--porcelain); font-weight: 600; }
mark.legal-ph { background: var(--caution-bg); color: var(--caution); padding: 0 3px; border-radius: 4px; font-weight: 600; }
.alert[hidden] { display: none; }
.pill--save { font-weight: 600; }
.seg { flex-wrap: wrap; }
.dash-interval { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; width: 100%; margin: 0 0 4px; }
.dash-interval .seg span { min-height: 32px; padding: 4px 12px; font-size: 14px; }

/* ======================================================================
   Payments: method choice, Bitcoin review, payment status (web_payments.py)
   ====================================================================== */
.pay-page { max-width: 880px; }
.pay-plan { text-align: center; margin: 0 0 20px; color: var(--text-2); font-size: 15px; overflow-wrap: anywhere; }
.pay-plan strong { color: var(--ink); }
.pay-methods { display: grid; gap: 16px; margin: 0 0 24px; }
@media (min-width: 720px) { .pay-methods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.auth .pay-methods .panel.pay-method { margin: 0; padding: 24px; display: flex; flex-direction: column; }
.pay-method__head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; }
.pay-method__head .icon { color: var(--cobalt); }
.pay-method__head h2 { font-size: 20px; margin: 0; flex: 1 1 auto; }
.pay-method__facts { margin: 0 0 18px; flex: 1 1 auto; }
.pay-method__note { margin: 10px 0 0; }
.pay-method--off { background: var(--porcelain); }
.pay-method--off .alert { margin: 0 0 12px; }
.before-pay { margin: 0 0 20px; padding: 16px 18px; border: 1px solid var(--pale-blue); border-radius: 12px; background: var(--cobalt-soft); }
.before-pay__title { font-size: 16px; margin: 0 0 6px; }
.before-pay__text { margin: 0; font-size: 15px; line-height: 1.55; }
/* Risk acknowledgement: required tick-box above the pay button (_risk_ack.html), same block style as "Before you pay" */
.risk-ack { margin: 0 0 16px; padding: 6px 18px 12px; border: 1px solid var(--pale-blue); border-radius: 12px; background: var(--cobalt-soft); }
.risk-ack__check { min-height: 44px; padding: 10px 0; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.risk-ack__check input { width: 20px; height: 20px; margin-top: 2px; }
.risk-ack__hint { margin: 0; }
.risk-ack .field-error { margin: 0 0 8px; }
.risk-ack--error { border-color: var(--error); }
/* Assisted setup (optional one-time add-on; app/web_assisted.py) */
.addon { border-color: var(--pale-blue); box-shadow: var(--shadow-1); }
.auth .panel.addon { margin: 0 0 20px; padding: 18px 20px; }
.addon__form { margin: 0; }
.addon__check { padding: 0 0 10px; align-items: flex-start; }
.addon__label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 16px; }
.addon__optional { margin-left: auto; }
.addon__body p { margin: 0 0 8px; }
.addon__body .help { margin: 8px 0 0; }
.addon__check + .addon__body, .addon__form + .addon__body { padding-left: 32px; }
.addon__more { margin: 6px 0 0; font-size: 15px; }
.addon__more summary { cursor: pointer; color: var(--cobalt); font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }
.addon__safeguards { margin: 8px 0; padding-left: 20px; font-size: 15px; line-height: 1.5; }
.addon__safeguards li { margin: 0 0 4px; }
.addon__title { font-size: 18px; margin: 0 0 8px; }
.panel .addon__title { margin-top: 18px; }
.addon--offer .addon__title, .addon--setup .setup-aside__title { margin-top: 0; }
.addon__actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.addon__actions form { margin: 0; }
.addon__actions--page .btn { min-width: 220px; }
.addon__save { margin-top: 8px; }
.addon__booking { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; background: var(--cobalt-soft); color: var(--deep); font-size: 15px; }
.addon__booking p { margin: 0 0 6px; }
.addon__booking p:last-child { margin: 0; }
.addon-status .addon__label { margin-bottom: 8px; }
.addon--setup .setup-aside__title { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.assisted-line { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border); font-size: 15px; line-height: 1.5; }
.setup-done + .assisted-line { border-top: 0; padding-top: 0; }
.assisted-line .icon { flex: none; margin-top: 2px; color: var(--cobalt); }
.nowrap, .addon .mono, .addon__booking .mono, .assisted-line .mono { white-space: nowrap; }
.admin-history { margin: 6px 0 0; padding-left: 18px; }
.admin-actions form.admin-actions__stack { grid-template-columns: minmax(0, 1fr); gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.admin-actions__stack button { justify-self: start; }
.admin-actions input[type=datetime-local] { min-height: 38px; padding: 6px 10px; font-size: 14px; width: 100%; }
.admin-actions--assisted { min-width: 250px; }
#assisted-table td:first-child { min-width: 150px; }
.admin-assisted-config { overflow-wrap: anywhere; }
#assisted-table td:first-child .mono { white-space: nowrap; }
@media (max-width: 540px) {
  .addon__check + .addon__body, .addon__form + .addon__body { padding-left: 0; }
  .addon__optional { margin-left: 0; }
  .addon__actions .btn, .addon__actions form, .addon__actions--page .btn { width: 100%; min-width: 0; }
}
.prepaid-banner { display: flex; gap: 10px; align-items: center; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; background: var(--cobalt-soft); color: var(--deep); font-size: 15px; }
.prepaid-banner .icon { flex: none; width: 22px; height: 22px; }
.status-line { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 18px; font-size: 16px; line-height: 1.5; }
.status-line .icon { flex: none; width: 28px; height: 28px; margin-top: 1px; }
.status-line--ok .icon { color: var(--success); }
.status-line--wait .icon { color: var(--cobalt); }
.status-line--bad .icon { color: var(--error); }
.status-line--ok strong { color: var(--success); }
.pay-status__support { margin: 0 0 18px; }
.pay-status__refresh { margin: 0 0 16px; }
.pay-status__poll { margin: 14px 0 0; }
.dev-actions { margin: 12px 0 0; }
.dev-actions__row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dev-actions__row .btn, .dev-actions__row button { margin: 0; }
.admin-jobs { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.admin-jobs__item { white-space: nowrap; }

/* ---- two-factor authentication: Settings -> Security, setup, login code (see app/web_security.py) ---- */
.code-input { font-family: var(--font-mono); font-size: 22px; letter-spacing: .18em; font-variant-numeric: tabular-nums; max-width: 14ch; }
.code-input--recovery { letter-spacing: .1em; max-width: 18ch; text-transform: uppercase; }
.mfa-alt { margin: 16px 0 0; }
.mfa-expiry { margin: 16px 0 0; }
.mfa-done { margin-top: 0; }
.mfa-steps { list-style: none; counter-reset: mfa; padding: 0; margin: 0; }
.mfa-steps > li { counter-increment: mfa; position: relative; padding-left: 44px; }
.mfa-steps > li + li { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--border); }
.mfa-steps > li::before { content: counter(mfa); position: absolute; left: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--cobalt-soft); color: var(--cobalt); font-family: var(--font-display); font-weight: 600; display: inline-flex; align-items: center; justify-content: center; }
.mfa-steps > li + li::before { top: 24px; }
.mfa-steps__title { font-size: 18px; margin: 2px 0 6px; }
.mfa-qr { margin: 16px 0; padding: 12px; background: var(--white); border: 1px solid var(--border); border-radius: 12px; width: min(100%, 244px); }
.mfa-qr svg { display: block; width: 100%; height: auto; }
.mfa-manual summary { cursor: pointer; color: var(--cobalt); font-weight: 500; min-height: 44px; display: flex; align-items: center; }
.mfa-manual summary:focus-visible { box-shadow: var(--focus-ring); border-radius: 6px; }
.mfa-key { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0 0; }
.mfa-key code { font-family: var(--font-mono); font-size: 17px; letter-spacing: .06em; padding: 8px 12px; background: var(--porcelain); border: 1px dashed var(--border-strong); border-radius: 8px; word-break: break-all; color: var(--deep); }
.recovery-codes { list-style: none; padding: 0; margin: 16px 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.recovery-codes li { counter-increment: none; }
.recovery-codes code { display: block; text-align: center; font-family: var(--font-mono); font-size: 17px; letter-spacing: .06em; padding: 8px 6px; background: var(--porcelain); border: 1px solid var(--border); border-radius: 8px; color: var(--deep); }
.recovery-codes code { white-space: nowrap; }
@media (max-width: 420px) { .recovery-codes code { font-size: 15px; letter-spacing: .02em; padding: 8px 4px; } }
@media (max-width: 320px) { .recovery-codes { grid-template-columns: minmax(0, 1fr); } }
.recovery-codes__tools { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 16px; }
.stepup { border: 1px solid var(--border); border-radius: 12px; padding: 4px 16px 8px; margin: 16px 0; }
.stepup legend { font-family: var(--font-display); font-weight: 600; padding: 0 6px; }
.stepup__why { margin: 4px 0 4px; }
.stepup__alt summary { cursor: pointer; color: var(--cobalt); min-height: 44px; display: flex; align-items: center; }
.sec-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; min-width: 0; }
.sec-stack > .panel:first-child, .sec-stack > .alert:first-child { margin-top: 0; }
.sec-head { margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.sec-head .panel__title { margin: 0; }
.sec-intro { font-weight: 500; }
.sec-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 16px; }
.sec-note { max-width: 46ch; margin: 0; }
.sec-count { font-size: 17px; }
.sec-activity td:first-child { white-space: nowrap; }

/* ---- billing interval: current vs proposed (dashboard + plan-change review pages) ----
   The CURRENT interval keeps an outline and a "Current" tag whether or not it is selected; the selected one is
   filled cobalt immediately (no colour transition, so a click never looks ignored). */
.seg span { transition: none; }
.seg .seg__opt.is-current > span { box-shadow: inset 0 0 0 1px var(--cobalt); }
.seg .seg__tag { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 18px; letter-spacing: .02em; text-transform: uppercase; background: var(--cobalt-soft); color: var(--cobalt-hover); }
.seg input:checked + span .seg__tag { background: rgba(255, 255, 255, .22); color: var(--white); }
.dash-interval__hint { flex: 1 1 100%; margin: 0; }
.dash-interval .btn:disabled, .dash-interval .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; box-shadow: none; }
@media (forced-colors: active) { .seg input:checked + span { outline: 2px solid CanvasText; } .seg .seg__opt.is-current > span { outline: 1px dashed CanvasText; } }

/* dashboard sections: the sticky site header (68 px + margin) must never cover a heading reached from the rail */
.app-head[id], .dash-stack [id] { scroll-margin-top: 96px; }

/* ---- billing-interval selector + plan-change review (one component: review page and dashboard Subscription panel)
   The label sits above the control (no fieldset border through it); three equal segments, 44 px targets, text
   centred; the selected interval is cobalt with white text, the rest neutral; the CURRENT interval is a muted line
   below, never a badge inside the options.  "Update review" sits beside the segments on wide screens, full width
   below on narrow ones. */
.ivsel { margin: 0 0 20px; container-type: inline-size; }
.ivsel__label { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.ivsel__row { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.ivsel__seg { flex: 1 1 auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px;
  padding: 4px; margin: 0; background: var(--porcelain); border: 1px solid var(--border); border-radius: 12px; }
.ivsel__opt { position: relative; display: flex; margin: 0; min-width: 0; }
.ivsel__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.ivsel__opt span { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 8px 6px;
  border-radius: 8px; text-align: center; line-height: 1.2; overflow-wrap: anywhere; hyphens: auto;
  font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-2); background: transparent; }
.ivsel__opt input:hover + span { background: var(--white); color: var(--ink); }
.ivsel__opt input:checked + span, .ivsel__opt input:checked:hover + span { background: var(--cobalt); color: var(--white); }
.ivsel__opt input:focus-visible + span { box-shadow: var(--focus-ring); }
.ivsel__btn { flex: 0 0 auto; width: 100%; min-height: 48px; white-space: nowrap; margin: 0; }
.ivsel__btn:disabled { opacity: .55; }
/* loading: the label stays readable ("Updating review…") with an inline spinner */
.ivsel .ivsel__btn.is-loading, .ivsel .ivsel__btn.is-loading:disabled { color: var(--text-2) !important; opacity: 1; transition: none; }
.ivsel .ivsel__btn.is-loading::after { position: static; flex: none; width: 16px; height: 16px; border-color: rgba(36, 72, 216, .3); border-top-color: var(--cobalt); }
.ivsel__current { margin: 8px 0 0; font-size: 14px; color: var(--text-2); }
.ivsel__status { margin: 4px 0 0; min-height: 1.4em; color: var(--text-2); }
.ivsel__status.is-error { color: var(--error); font-weight: 600; }
/* side by side once the component itself has room (the review page on desktop); stacked, full width, in a
   narrow column (phones, and the half-width dashboard panel) */
@container (min-width: 480px) {
  .ivsel__row { flex-direction: row; gap: 12px; }
  .ivsel__seg { max-width: 480px; }
  .ivsel__btn { width: auto; min-height: 54px; }
}
@media (forced-colors: active) { .ivsel__opt input:checked + span { outline: 2px solid CanvasText; } }
.panel__foot > .dash-change { flex: 1 1 100%; }
.dash-change .ivsel { margin: 0 0 8px; }
.change-review-slot[aria-busy="true"] { opacity: .55; transition: opacity var(--t-ctl) var(--ease); }

.change-review__charge { margin: 0 0 16px; padding: 16px 18px; border-radius: 12px; background: var(--cobalt-soft); border: 1px solid #CBD6FF; }
.change-review__charge--none { background: var(--porcelain); border-color: var(--border); }
.change-review__charge-label { margin: 0; font-size: 14px; font-weight: 600; color: var(--deep); }
.change-review__charge-amount { margin: 2px 0 4px; font-family: var(--font-display); font-size: 34px; font-weight: 600; line-height: 1.15; color: var(--ink); }
.change-review__charge-note { margin: 0; color: var(--text-2); }
.change-review__rows { margin: 0; display: grid; gap: 0; }
.change-review__row { display: grid; grid-template-columns: minmax(140px, 200px) 1fr; gap: 4px 16px; padding: 10px 0; border-top: 1px solid var(--border); }
.change-review__row:first-child { border-top: 0; }
.change-review__row dt { margin: 0; font-size: 14px; font-weight: 600; color: var(--text-2); }
.change-review__row dd { margin: 0; }
.change-review__row dd .muted { display: block; font-size: 14px; }
.change-review__actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 18px 0 0; }
.change-review__actions .btn { margin: 0; min-height: 44px; }
.change-review__fine { margin: 10px 0 0; }
@media (max-width: 560px) {
  .change-review__row { grid-template-columns: 1fr; }
  .change-review__actions .btn { width: 100%; }
}
.dash-change .change-review { margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--border); }
.dash-change .change-review__row { grid-template-columns: 1fr; }
.dash-change .change-review__charge-amount { font-size: 28px; }

/* ======================================================================
   Visual QA pass (2026-10-23): consistency fixes, applied site-wide
   ====================================================================== */
/* header buttons ("Get started", "Log out", "Menu"): one button size in the bar.  `.nav a` (link styling, ink text)
   used to win over the button classes, so "Get started" showed ink text on cobalt; the hero header showed it as a
   cobalt button on the cobalt bar */
.nav a.nav__cta, .nav a.nav__cta:hover { color: var(--white); background: var(--cobalt); border: 1px solid var(--cobalt); border-radius: var(--radius-ctl); padding: 8px 16px; min-height: 44px; font-weight: 600; }
.nav a.nav__cta:hover { background: var(--cobalt-hover); border-color: var(--cobalt-hover); }
.site-header--hero .nav a.nav__cta { background: var(--white); border-color: var(--white); color: var(--cobalt); }
.site-header--hero .nav a.nav__cta:hover { background: var(--porcelain); border-color: var(--porcelain); color: var(--cobalt-hover); }
.site-header--hero .nav :focus-visible, .site-header--hero .nav-toggle:focus-visible { box-shadow: 0 0 0 3px var(--cobalt), 0 0 0 6px var(--white); }
.site-header .nav form button, .site-header .nav-toggle { min-height: 44px; padding: 8px 16px; font-size: 15px; border-radius: var(--radius-ctl); }
/* tables: numeric columns (th/td.num) right-aligned with tabular figures everywhere; stacked summary rows on phones
   read left to right instead */
/* only in column tables (with a header row); key/value summary tables keep their values left-aligned */
table:has(> thead) th.num, table:has(> thead) td.num { text-align: right; }
th.num, td.num { font-variant-numeric: tabular-nums; }
@media (max-width: 440px) { table.summary th.num, table.summary td.num { text-align: left; } }
.legal-table td.num { white-space: nowrap; }
/* showcase: the chart card keeps its own height instead of stretching to the side column (no empty white box) */
@media (min-width: 900px) { .showcase__grid { align-items: start; } }
/* horizontal scroll containers: a soft shadow appears on whichever edge has more table to scroll to (pure CSS:
   the white covers scroll with the content, the shadows stay with the box).  --wrap-bg = the surface it sits on. */
.table-wrap { --wrap-bg: var(--white);
  background:
    linear-gradient(90deg, var(--wrap-bg) 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
    linear-gradient(270deg, var(--wrap-bg) 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(21, 27, 45, .24), rgba(21, 27, 45, 0)) left center / 14px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(21, 27, 45, .24), rgba(21, 27, 45, 0)) right center / 14px 100% no-repeat scroll;
  -webkit-overflow-scrolling: touch; }
.table-wrap:focus-visible { box-shadow: var(--focus-ring); }
.section--porcelain .table-wrap, .panel--porcelain .table-wrap { --wrap-bg: var(--porcelain); }
/* legal tables: headers wrap (they are long sentences), words never break mid-word, and the table only scrolls when
   it really needs more room than the document column */
.legal__doc .table-wrap { margin: 16px 0; }
.legal__doc .table-wrap table.legal-table { min-width: 560px; }
.legal-table th { white-space: normal; font-size: 13px; line-height: 1.35; vertical-align: bottom; }
.legal-table th, .legal-table td { overflow-wrap: normal; word-break: normal; }
.legal-table td:first-child { white-space: nowrap; }
@media (max-width: 639px) { .legal__doc ul, .legal__doc ol { padding-left: 22px; } }
/* setup guide: the "Done" tick row and its SELF-CONFIRMED tag share one centre line */
.confirm .check { align-items: center; }
.confirm .check input { margin-top: 0; }
/* payment method cards: facts keep their natural row spacing (the list grows, its rows do not), buttons align */
.pay-method__facts { align-content: start; }
/* interval selector: "Update review" sits level with the segments ("form .btn" margin used to push it 12px down and
   stretch the segment track); an empty status line takes no space */
.ivsel .ivsel__btn, .ivsel .ivsel__seg { margin: 0; }
@container (min-width: 480px) { .ivsel__row { align-items: center; } }
.ivsel__status:empty { min-height: 0; margin: 0; }
/* focused-card pages with more than one panel (assisted setup, payment pages): 20px between stacked panels and
   before the footer link, instead of panels touching */
.auth > .panel + .panel, .auth > .panel + .alert, .auth > .alert + .panel { margin-top: 20px; }
.auth > .panel + p, .auth > .panel + form.auth__foot { margin-top: 20px; }
/* status pills inside table rows: compact, so a pill never makes its row taller than a text row */
td .pill { padding: 3px 9px; font-size: 13px; line-height: 1.2; }
/* account menu row on phones/tablets scrolls sideways (dashboard and Settings -> Security): fade the right edge so
   the cut-off item reads as "more" */
@media (max-width: 899px) {
  .app-nav { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 32px), transparent); padding-right: 28px; }
}
/* the two-column security activity list fits a phone without a 640px scrolling floor */
.table-wrap table.sec-activity { min-width: 0; }
.sec-activity td:first-child { white-space: nowrap; padding-right: 16px; }
/* hero actions on narrow phones: the two buttons share one full width each instead of two ragged widths */
@media (max-width: 479px) { .hero__actions .btn { flex: 1 1 100%; } }
/* date/time inputs (trade-history filter, admin scheduling) use the same field style as text inputs, and show the
   focus ring while any part of the field is focused (the browser focuses an inner segment, so :focus-visible on the
   input itself never matched) */
input[type=date], input[type=datetime-local], input[type=time] {
  font: inherit; font-size: 16px; color: var(--ink); background: var(--white); padding: 10px 14px; min-height: 44px;
  border-radius: var(--radius-ctl); border: 1px solid var(--border-strong); max-width: 100%;
  transition: border-color var(--t-ctl) var(--ease), box-shadow var(--t-ctl) var(--ease); }
input[type=date]:focus, input[type=datetime-local]:focus, input[type=time]:focus { outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px rgba(36, 72, 216, .22); }
/* small buttons keep the control radius (10px) like every other button */
.btn-sm { border-radius: var(--radius-ctl); }

/* ======================================================================
   Visual QA pass, part 2 (2026-10-23): one size for every control
   ====================================================================== */
/* anchors: the sticky header (68px) never covers a heading reached by a link; the hero header is not sticky */
[id] { scroll-margin-top: 88px; }
body:has(.site-header--hero) [id] { scroll-margin-top: 16px; }
/* text fields are exactly 44px like buttons and selects (16px text x 1.55 line-height made them 47px, so a field and
   the button beside it never lined up) */
input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=tel],
input[type=url], input[type=date], input[type=datetime-local], input[type=time], select { line-height: 22px; }
/* buttons: 44px minimum for every size; .btn-sm only uses smaller type and padding */
.btn-sm { min-height: 44px; }
.admin-actions input[type=number], .admin-actions input[type=text], .admin-actions button { min-height: 44px; }
/* segmented controls (billing interval on pricing / choose plan / prepaid change / dashboard, chart range, the
   interval selector, demo tabs): one track (porcelain, 1px border, 12px radius, 3px inset) and one option (36px,
   8px radius, 15px semibold), so every track is 44px tall and lines up with the 44px button next to it */
.seg, .seg-mini, .ivsel__seg, .tabs { background: var(--porcelain); border: 1px solid var(--border); border-radius: 12px; padding: 3px; gap: 3px; margin: 0; }
.showcase__bar .tabs { background: var(--white); }
.seg span:not(.seg__tag), .seg-mini__opt > span, .ivsel__opt span, button.tab {
  min-height: 36px; border-radius: 8px; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--text-2); }
.seg span:not(.seg__tag) { padding: 6px 14px; }
.seg label:not(:has(input:checked)) > span:hover, .ivsel__opt input:hover + span { background: var(--white); color: var(--ink); }
.seg input:checked + span, .seg-mini__opt input:checked + span, .ivsel__opt input:checked + span, button.tab[aria-selected="true"] { background: var(--cobalt); color: var(--white); }
.seg-mini__opt input:hover:not(:checked) + span, button.tab:not([aria-selected="true"]):hover { background: var(--white); color: var(--ink); }
.dash-interval .seg span:not(.seg__tag) { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.ivsel__btn, .ivsel .ivsel__btn { min-height: 44px; }
@container (min-width: 480px) { .ivsel__btn { min-height: 44px; } }
.seg-wrap > .seg-label { margin: 0 0 8px; }
/* table headers: one style in every scrolling table (13px, uppercase, semibold, muted) */
.table-wrap th, .trades th { font-size: 13px; font-weight: 600; letter-spacing: .04em; }
/* cards use the panel radius (16px) everywhere */
.panel.stat, .price-card { border-radius: var(--radius-panel); }
/* licence key: fits a 360px phone without being cut at the right edge */
@media (max-width: 400px) { .copy-row .key, .keybox .key { font-size: 14px; letter-spacing: 0; padding: 8px 10px; } }
/* admin: the operator tables (licences 1180px, outbox, exceptions) fit a 1440px screen without sideways scrolling */
.site-main--admin { max-width: 1440px; }
/* "When" columns (security events, audit log, activity): the timestamp stays on one line */
.table-wrap td.tabular:first-child { white-space: nowrap; }
/* card padding: 24px on tablets and desktops, 20px on phones, for panels, setup steps and the focused auth card alike
   (steps were 28px and auth cards 28px x 24px on a 360px phone while dashboard panels were 20px) */
.step { padding: 24px; }
@media (max-width: 639px) { .panel, .step, .auth .panel, .price-card { padding: 20px; } }
/* setup guide figure captions: ordinary text flow (as a flex row, every inline <code> became its own column and
   "Experts" / "Licence_Key" broke one letter-pair per line on phones) */
.guide-fig figcaption { display: block; line-height: 1.45; }
.guide-fig figcaption strong { margin-right: 4px; }
/* deposit-limit worked example (FAQ, pricing disclosure): a column table, so the key/value "summary" widths and the
   zero side padding do not apply; numbers and the "New baskets" text never touch ("500Allowed") */
.deposit-example th { width: auto; padding: 10px 0 8px; }
.deposit-example th:first-child { width: 42%; }
.deposit-example th + th, .deposit-example td + td { padding-left: 20px; }
.deposit-example caption { padding-top: 4px; }
.qa .table-wrap { --wrap-bg: var(--porcelain); margin: 16px 0; }
/* danger buttons: the loading spinner takes the button's red, not cobalt */
.btn-danger.is-loading::after, button.danger.is-loading::after { border-color: rgba(180, 35, 50, .3); border-top-color: var(--error); }
/* date/time fields: the browser's inner date segments add 2px, so 9px vertical padding keeps them at 44px */
input[type=date], input[type=datetime-local], input[type=time] { padding-top: 9px; padding-bottom: 9px; }
/* admin header: "Back to admin" is a normal link beside the ADMIN tag, not part of the uppercase eyebrow */
.admin-tag + a { margin-left: 8px; font-size: 15px; font-weight: 500; letter-spacing: 0; text-transform: none; }
/* admin pages share the header's 1280px frame (left edges line up); the wide operator tables fit it at 1440px */
.site-main--admin { max-width: var(--max); }
.site-main--admin .table-wrap--wide table { min-width: 1100px; }
/* admin audit "Details" (one long JSON string) wraps inside its column instead of pushing the table to 1,300px */
.table-wrap td.mono.small:last-child { overflow-wrap: anywhere; word-break: break-word; }
/* identifiers in other columns (Stripe ids, price ids, order refs, key prefixes) never split mid-token: the table
   scrolls inside its .table-wrap instead */
.table-wrap td.mono.small:not(:last-child) { overflow-wrap: normal; word-break: normal; }

/* admin sub-navigation (_admin_nav.html): one row of section links at the top of every admin page */
.admin-subnav { margin: 0 0 20px; border-bottom: 1px solid var(--border); }
.admin-subnav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 6px; }
.admin-subnav a { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 12px; border-radius: var(--radius-ctl) var(--radius-ctl) 0 0; font-size: 15px; font-weight: 600; color: var(--text-2, var(--ink)); text-decoration: none; border-bottom: 3px solid transparent; }
.admin-subnav a:hover { color: var(--cobalt); background: var(--cobalt-soft); }
.admin-subnav a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.admin-subnav a[aria-current="page"] { color: var(--deep); border-bottom-color: var(--cobalt); }
.admin-subnav .pill { font-size: 12px; padding: 1px 8px; }
.admin-section { scroll-margin-top: 96px; }
.admin-attention { margin: 0 0 16px; }
.admin-jobs-table td, .admin-jobs-table th { white-space: nowrap; }

/* ======================================================================
   Text layout pass (2026-10-23): long strings, hit areas
   ====================================================================== */
/* long unbroken strings (e-mail addresses, account ids, order references, error text) wrap inside their block
   instead of pushing the page sideways; break-word only breaks a word that cannot fit, so tables keep their
   natural column widths */
p, li, dd, dt, h1, h2, h3, label, .field-error, .hint, .alert > div { overflow-wrap: break-word; }
/* flex rows that carry an e-mail (security header "you@…  Administrator"): the text item may shrink and wrap */
.app-head__sub { max-width: 100%; }
.app-head__sub > span:not(.pill) { min-width: 0; overflow-wrap: anywhere; }
.auth .panel strong, .panel p .mono, .alert strong { overflow-wrap: anywhere; }
/* segmented options (billing interval) are 36px inside a 44px track: the hit area covers the full track height so
   every option is a 44px target (nothing moves; the pseudo-element is invisible) */
.seg span:not(.seg__tag), button.tab { position: relative; }
.seg span:not(.seg__tag)::before, button.tab::before { content: ""; position: absolute; left: 0; right: 0; top: -4px; bottom: -4px; }
/* the demo tab track scrolls sideways (overflow: auto): keep the hit area inside its padding box so it never adds
   vertical scroll overflow (42px of the 44px track) */
.tabs button.tab::before { top: -3px; bottom: -3px; }

/* admin licences table (2026-10-23): seven stacked columns instead of fourteen, so it fits the 1280px admin frame at
   1440px (it reached 1,547px+ with the trading-profile column).  Each cell holds its data as stacked lines; headers
   carry a second muted line naming the stacked data and a title with the full list.  It scrolls inside its
   .table-wrap only when the wrap is narrower than ~920px (viewport below ~1100px). */
.site-main--admin .table-wrap--licences table.admin-licences { min-width: 920px; }
.admin-licences th { vertical-align: bottom; line-height: 1.3; }
.th-sub { display: block; font-size: 11px; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--text-2); white-space: nowrap; }
.admin-licences abbr[title] { text-decoration: none; cursor: help; }
.lic-cell > * { display: block; }
.lic-cell > * + * { margin-top: 3px; }
.lic-cell > .pill { display: inline-flex; margin-top: 4px; border-radius: 8px; text-align: left; }
.lic-cell > .tabular { white-space: nowrap; }
.lic-cell .num { text-align: left; }
.lic-cell__email { max-width: 240px; overflow-wrap: anywhere; }
.lic-cell--nw > * { white-space: nowrap; }
.lic-cell .pill[data-licence-profile-pending] { white-space: nowrap; }
.admin-licences td.lic-actions { width: 336px; min-width: 300px; }
/* actions: fields share a row when there is room; the button drops below instead of pushing the table wider */
.admin-actions--wrap { min-width: 0; gap: 12px; }
.admin-actions--wrap form, .admin-actions--wrap form.admin-actions__two { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.admin-actions--wrap form > div { flex: 1 1 100px; min-width: 0; }
.admin-actions--wrap form > div:has(input[type=number]) { flex: 0 0 72px; }
.admin-actions--wrap input[type=number] { width: 100%; }
.admin-actions--wrap form > div:has(select) { flex: 0 1 100px; }
.admin-actions--wrap select { width: 100%; min-height: 44px; padding-top: 6px; padding-bottom: 6px; font-size: 14px; }
.admin-actions--wrap input[type=text] { width: 100%; }
.admin-actions--wrap form > button { flex: none; }
/* admin plans: the discount is a small pill beside the price on one line ("$1,375 (8% off)" used to wrap) */
td.plan-price { white-space: nowrap; }
td.plan-cap .small { display: block; }
.pill--disc { padding: 2px 7px; font-size: 12px; line-height: 1.2; vertical-align: 1px; margin-left: 4px; }
td .pill--disc { padding: 2px 7px; font-size: 12px; }

/* ---- customer name (sign-up, /settings/name, dashboard header, admin tables) ---- */
.field-row { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 16px; }
@media (min-width: 480px) { .field-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.app-head__name { color: var(--ink); font-weight: 600; }
.app-head__name + span::before { content: "\00B7"; margin-right: 8px; color: var(--text-2); }
.lic-cell__name { font-weight: 600; max-width: 240px; overflow-wrap: anywhere; }

/* ======================================================================
   Motion and polish pass (24 Oct 2026)
   One authored moment (the hero: copy rises line by line while the crest settles, then the crest breathes slowly
   while on screen), continuity on scroll (the "how it works" connector draws across the steps as they arrive, the
   demo chart draws its line, plans arrive one after another), and quiet feedback everywhere (buttons lift, cards
   lift, disclosures open smoothly).  Everything is on opacity / transform / stroke-dashoffset / height-of-details.
   Nothing here hides content without JavaScript: the entrance keyframes hang off html.js (added by site.js) and the
   reveal classes are only ever added by site.js.  prefers-reduced-motion: no entrances, no idle loop, no draw.
   ====================================================================== */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --t-reveal: 680ms; }

/* ---- hero: the one rehearsed entrance ---- */
@keyframes rise-in { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.js .hero__copy > * { animation: rise-in 760ms var(--ease-out) both; }
.js .hero__copy > :nth-child(1) { animation-delay: 40ms; }
.js .hero__copy > :nth-child(2) { animation-delay: 120ms; }
.js .hero__copy > :nth-child(3) { animation-delay: 220ms; }
.js .hero__copy > :nth-child(4) { animation-delay: 300ms; }
.js .hero__copy > :nth-child(5) { animation-delay: 380ms; }
.js .hero__copy > :nth-child(6) { animation-delay: 460ms; }
.js .hero__copy > :nth-child(7) { animation-delay: 520ms; }
/* the path diagram: each stop lights up in turn after its line arrives */
.js .hero__path li { animation: rise-in 520ms var(--ease-out) both; }
.js .hero__path li:nth-child(1) { animation-delay: 560ms; }
.js .hero__path li:nth-child(2) { animation-delay: 700ms; }
.js .hero__path li:nth-child(3) { animation-delay: 840ms; }
.hero__path li + li::before { display: inline-block; }
/* once settled, the crest breathes slowly, only while it is on screen (site.js toggles .wave--idle) */
.wave__shadow { transform-box: fill-box; transform-origin: center; }
.wave--idle .wave__crest { animation: crest-idle 7200ms ease-in-out infinite; }
.wave--idle .wave__shadow { animation: shadow-idle 7200ms ease-in-out infinite; }
@keyframes crest-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shadow-idle { 0%, 100% { transform: scaleX(1); opacity: .55; } 50% { transform: scaleX(.965); opacity: .42; } }
/* content-page heads and the focused auth card arrive the same way, shorter */
.js .page-head .eyebrow, .js .page-head h1, .js .page-head p { animation: rise-in 640ms var(--ease-out) both; }
.js .page-head h1 { animation-delay: 80ms; }
.js .page-head p { animation-delay: 160ms; }
.js .auth > .panel, .js .auth > h1, .js .auth > .auth__mark, .js .auth > .flow { animation: rise-in 560ms var(--ease-out) both; }
.js .auth > h1 { animation-delay: 60ms; }
.js .auth > .flow { animation-delay: 120ms; }
.js .auth > .panel { animation-delay: 160ms; }

/* ---- scroll entrances: role-based, not one identical fade on every block ---- */
.reveal { transition: opacity var(--t-reveal) var(--ease-out), transform var(--t-reveal) var(--ease-out); }
.reveal.reveal--pending { opacity: 0; transform: translateY(20px); }
.reveal--scale.reveal--pending { transform: translateY(16px) scale(.985); }
/* a list arrives as a list: children follow one another (80 ms apart, capped at eight) */
.reveal .stagger > * { transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms); }
.reveal.reveal--pending .stagger > * { opacity: 0; transform: translateY(18px); }
.reveal.reveal--in .stagger > * { opacity: 1; transform: none; }
.stagger > :nth-child(1) { --i: 0; } .stagger > :nth-child(2) { --i: 1; } .stagger > :nth-child(3) { --i: 2; } .stagger > :nth-child(4) { --i: 3; }
.stagger > :nth-child(5) { --i: 4; } .stagger > :nth-child(6) { --i: 5; } .stagger > :nth-child(7) { --i: 6; } .stagger > :nth-child(n+8) { --i: 7; }
/* how it works: the connector draws from the first step to the last as the steps arrive; nodes settle to size */
.seq__list::before { transform-origin: left center; transition: transform 1200ms var(--ease-out) 160ms; }
.seq::before { transform-origin: center top; transition: transform 1200ms var(--ease-out) 160ms; }
.seq.reveal--pending .seq__list::before { transform: scaleX(0); }
.seq.reveal--pending::before { transform: scaleY(0); }
.seq__node { transition: transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + 120ms); }
.seq.reveal--pending .seq__node { transform: scale(.72); }
.seq__step { --i: 0; } .seq__step:nth-child(2) { --i: 1; } .seq__step:nth-child(3) { --i: 2; }
/* demo dashboard: the chart line draws itself when the figure arrives and again when a tab is chosen */
.showcase .chart__line { stroke-dasharray: 1; stroke-dashoffset: 0; }
.showcase__panel.is-drawn .chart__line { animation: chart-draw 1500ms var(--ease-out) 120ms both; }
.showcase__panel.is-drawn .chart__area-up, .showcase__panel.is-drawn .chart__area-down { animation: fade-in 700ms ease-out 900ms both; }
.showcase__panel.is-drawn .chart__dot { transform-box: fill-box; transform-origin: center; animation: dot-pop 420ms var(--ease-out) 1400ms both; }
@keyframes chart-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes dot-pop { from { opacity: 0; transform: scale(0); } 70% { transform: scale(1.35); } to { opacity: 1; transform: scale(1); } }
.js .showcase__panel.is-entering { animation: panel-in 240ms var(--ease-out) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* good-to-know tiles: the icon settles into its tile */
.trust__item .icon-tile { transition: transform 700ms var(--ease-out); transition-delay: calc(var(--i, 0) * 80ms + 120ms); }
.reveal.reveal--pending .trust__item .icon-tile { transform: scale(.7); }

/* ---- feedback: lift and settle ---- */
.btn, button { transition: background-color var(--t-ctl) var(--ease), border-color var(--t-ctl) var(--ease), color var(--t-ctl) var(--ease), transform var(--t-ctl) var(--ease), translate 180ms var(--ease-out), box-shadow 220ms var(--ease-out); }
@media (hover: hover) {
  .btn-primary:hover, .hero__actions .btn-primary:hover, .closing .btn-primary:hover { translate: 0 -1px; box-shadow: 0 8px 20px rgba(14, 28, 134, .26); }
  .btn-secondary:hover, .hero__actions .btn-secondary:hover { translate: 0 -1px; box-shadow: 0 6px 16px rgba(21, 27, 45, .08); }
}
.btn:active, button:active { translate: 0 0; box-shadow: none; }
.price-card { transition: translate 220ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color var(--t-ctl) var(--ease); }
@media (hover: hover) {
  .price-card:hover { translate: 0 -4px; box-shadow: 0 18px 40px rgba(20, 38, 110, .12), 0 2px 6px rgba(20, 38, 110, .06); border-color: var(--pale-blue); }
  .price-card--lead:hover { box-shadow: 0 0 0 1px var(--cobalt), 0 22px 48px rgba(36, 72, 216, .18); }
  .trust__item .icon-tile:hover { transform: translateY(-2px); }
  .def:hover .icon-tile, .step:hover .step__num { transform: translateY(-1px); }
}
.icon-tile, .step__num { transition: transform 220ms var(--ease-out); }
/* the sticky header gains depth once the page has scrolled under it (site.js toggles .is-scrolled) */
.site-header { transition: box-shadow 260ms var(--ease-out), background-color 260ms var(--ease-out); }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(21, 27, 45, .08); }
/* disclosures open smoothly where the browser can interpolate to auto; elsewhere they open at once, as before */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq-item::details-content, .price-caps::details-content, .step__more::details-content, .pf-change::details-content, .billing-orders::details-content {
    height: 0; overflow: clip; transition: height 340ms var(--ease-out), content-visibility 340ms allow-discrete; }
  .faq-item[open]::details-content, .price-caps[open]::details-content, .step__more[open]::details-content, .pf-change[open]::details-content, .billing-orders[open]::details-content { height: auto; }
}
.faq-item summary::after, .price-caps summary::after, .step__more summary::after { transition: transform 280ms var(--ease-out), color var(--t-ctl) var(--ease); display: inline-block; }
.faq-item[open] summary::after, .price-caps[open] summary::after, .step__more[open] summary::after { content: "+"; transform: rotate(45deg); }
/* links in running text: underline grows a little heavier on hover instead of jumping */
p a:not(.btn), li a:not(.btn), .faq-item__body a { transition: color var(--t-ctl) var(--ease), text-decoration-color var(--t-ctl) var(--ease), text-decoration-thickness var(--t-ctl) var(--ease); }
p a:not(.btn):hover, li a:not(.btn):hover { text-decoration-thickness: 2px; }
/* nav links: the hover tint fades in */
.nav a, .nav-drawer__panel a, .site-footer a, .checklist a, .toc a { transition: background-color var(--t-ctl) var(--ease), color var(--t-ctl) var(--ease), border-color var(--t-ctl) var(--ease); }
/* pricing interval switch: the incoming price rises a touch while it fades in */
.fade-swap { transition: opacity 200ms var(--ease), transform 220ms var(--ease-out); }
.fade-swap.is-fading { opacity: 0; transform: translateY(4px); }

/* ---- reduced motion: entrances, draws and the idle loop are off; state changes stay (instant) ---- */
@media (prefers-reduced-motion: reduce) {
  .js .hero__copy > *, .js .hero__path li, .js .page-head .eyebrow, .js .page-head h1, .js .page-head p,
  .js .auth > .panel, .js .auth > h1, .js .auth > .auth__mark, .js .auth > .flow, .js .showcase__panel.is-entering,
  .showcase__panel.is-drawn .chart__line, .showcase__panel.is-drawn .chart__area-up, .showcase__panel.is-drawn .chart__area-down,
  .showcase__panel.is-drawn .chart__dot, .wave--idle .wave__crest, .wave--idle .wave__shadow { animation: none !important; }
  .reveal.reveal--pending, .reveal.reveal--pending .stagger > *, .seq.reveal--pending .seq__node, .reveal.reveal--pending .trust__item .icon-tile { opacity: 1; transform: none; }
  .seq.reveal--pending .seq__list::before, .seq.reveal--pending::before { transform: none; }
  .btn-primary:hover, .btn-secondary:hover, .price-card:hover { translate: 0 0; }
}

/* ---- layout fixes from the 24 Oct audit ---- */
/* legal tables: the first column wraps like the others (a nowrap first column pushed the privacy table to 1,200px) */
.legal-table td:first-child { white-space: normal; min-width: 8em; }
/* worked-example table on phones: natural width inside its scroll wrap, no 640px floor */
.table-wrap table.deposit-example { min-width: 520px; }
/* error pages (templates/error.html): the focused auth card, with the status code as a quiet mark */
.errpage { text-align: center; }
.errpage__code { font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: .18em; color: var(--cobalt); margin: 0 0 8px; }
.errpage .panel { text-align: left; }
.errpage__text { font-size: 17px; margin: 0 0 4px; }
.errpage__actions { margin-top: 18px; }
.errpage__help { margin: 16px 0 0; }

/* ======================================================================
   Admin trading results (2026-10-24): /admin/results and /admin/results/<id>
   ====================================================================== */
/* the operator table: twelve columns, scrolls inside its .table-wrap below ~1300px (never the page) */
.site-main--admin .table-wrap--results table.admin-results { min-width: 1000px; }
.admin-results th, .admin-results td { padding: 10px 5px; }
.admin-results td.lic-cell:first-child { min-width: 150px; }
.admin-results th { vertical-align: bottom; line-height: 1.3; font-size: 12px; letter-spacing: .03em; }
.admin-results th a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; border-radius: 6px; }
.admin-results th a:hover { color: var(--cobalt); }
.admin-results th a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.admin-results th.is-sorted a { color: var(--deep); }
.admin-results .sort-mark { font-size: 11px; color: var(--text-2); }
.admin-results th.is-sorted .sort-mark { color: var(--cobalt); }
.admin-results th.num a { justify-content: flex-end; }
.admin-results abbr[title] { text-decoration: none; cursor: help; }
.admin-results td.num { white-space: nowrap; }
.admin-results .lic-cell__name { font-weight: 600; }
/* profit green, loss red, tabular figures; the same colours as the customer's P/L cards */
.pl { font-weight: 600; font-variant-numeric: tabular-nums; }
.pl.is-pos { color: var(--success); }
.pl.is-neg { color: var(--error); }
.admin-results tfoot td { font-weight: 600; border-top: 2px solid var(--border-strong); border-bottom: 0; background: var(--porcelain); }
.admin-results tfoot .pl { font-size: 15px; }
/* per-customer facts: a responsive grid of label / value pairs (one column at 360px, up to four on a desktop) */
.results-facts { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 0; }
.results-facts > div { min-width: 0; }
.results-facts dt { font-size: 13px; font-weight: 600; color: var(--text-2); margin: 0 0 4px; }
.results-facts dd { margin: 0; font-size: 16px; overflow-wrap: anywhere; }
.results-facts dd .pill { vertical-align: middle; }
.results-facts__lead dd { font-size: 20px; }
.results-detail { display: flex; flex-direction: column; gap: 24px; min-width: 0; margin: 16px 0; }
.results-detail > .panel { margin: 0; }

/* ---- Windows high contrast / forced colours: box-shadow rings and tinted backgrounds are dropped by the browser, so
   focus, the selected tab / current nav item and buttons get a system-colour outline or border instead. ---- */
@media (forced-colors: active) {
  button.tab[aria-selected="true"], .dash-nav a[aria-current="page"], .app-nav a[aria-current="page"], .nav-rail a[aria-current="page"],
  .admin-subnav a[aria-current="page"], .chip[aria-current="true"], .legal__nav a[aria-current="page"], .doc-layout__aside a[aria-current="true"] { outline: 2px solid CanvasText; outline-offset: -2px; text-decoration: underline; }
  .btn, button, .btn-secondary, button.tab { border: 1px solid ButtonText; }
  a.btn { border-color: LinkText; }
  .pill, .tag, .alert, .flash, .panel, .card { border: 1px solid CanvasText; }
  :focus-visible, .seg input:focus-visible + span, .seg-mini__opt input:focus-visible + span, .ivsel__opt input:focus-visible + span,
  .plan-card:has(input:focus-visible), .table-wrap:focus-visible, #main:focus-visible { outline: 3px solid Highlight; outline-offset: 2px; }
  #main:focus-visible { outline-offset: -3px; }
  input[type="date"]:focus-visible, input[type="datetime-local"]:focus-visible, input[type="time"]:focus-visible { outline: 3px solid Highlight; }   /* their screen rule (ring on the field, no outline) is more specific than :focus-visible */
  .site-header { backdrop-filter: none; }
  .skip-link:focus { outline: 3px solid Highlight; }
}

/* ---- print: the page content only, nothing sticky, no clipped scrollers, every dashboard section ---- */
@media print {
  html, body { overflow: visible !important; height: auto !important; background: #fff; }
  body.drawer-open { overflow: visible; }
  .skip-link, .nav-toggle, .nav-drawer, .devbanner, .site-header .nav, .nav__cta, .site-footer__grid, .dash-nav, .app-nav, .nav-rail,
  .admin-subnav, [data-refresh], .copy-row__live, .chart__tip { display: none !important; }
  .site-header { position: static !important; backdrop-filter: none; background: transparent; border-bottom: 1px solid #000; box-shadow: none; transition: none; }
  .doc-layout__aside, .setup-layout__aside, .dash-nav { position: static !important; }
  .app-layout, .app-layout--dash, .setup-layout, .doc-layout { display: block; }   /* no rail column once the nav is gone */
  .app-layout > *, .setup-layout > *, .doc-layout > * { margin-bottom: 24px; }
  .trades th { white-space: normal; }
  .reveal, .reveal.reveal--pending, .stagger > *, .hero__copy > * { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; }
  .js .dash-tab:not(.is-active), .dash-tab { display: block !important; }
  .dash-tab + .dash-tab { margin-top: 24px; }
  .table-wrap, .keybox, pre { overflow: visible !important; }
  .table-wrap table, .table-wrap--wide table { min-width: 0 !important; }
  .keybox .key, pre, code { white-space: pre-wrap !important; overflow-wrap: anywhere; }
  .panel, .card, .price-card, .plan-card, .stat, tr, figure { break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }
  .panel, .card { box-shadow: none; }
  a { text-decoration: underline; }
  .site-footer { border-top: 1px solid #000; }
}

/* ---------- Brokers page (/brokers) ---------- */
.broker-reqs, .broker-rec, .broker-list, .broker-no { margin: 0 0 32px; }
.broker-reqs h2, .broker-list h2, .broker-no h2 { font-size: 24px; margin: 0 0 12px; }
.broker-reqs__list { margin: 0 0 16px; padding-left: 22px; display: grid; gap: 10px; font-size: 16px; }
.broker-reqs__list li { padding-left: 4px; }
.broker-reqs p, .broker-list p, .broker-no p, .broker-no li { color: var(--text-2); font-size: 16px; }
.broker-rec { position: relative; background: var(--white); border: 1px solid var(--cobalt); border-radius: 20px; padding: 28px; box-shadow: 0 0 0 1px var(--cobalt), var(--shadow-1); }
.broker-rec__badge { display: inline-flex; align-items: center; min-height: 28px; padding: 3px 12px; border-radius: var(--radius-pill); background: var(--cobalt); color: var(--white); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 12px; }
.broker-rec h2 { font-size: 28px; margin: 0 0 10px; }
.broker-rec__lead { font-size: 17px; margin: 0 0 14px; }
.broker-rec__facts { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 6px; font-size: 16px; color: var(--text-2); }
.broker-rec__note { margin: 0; font-size: 15px; color: var(--text-2); padding-top: 12px; border-top: 1px solid var(--border); }
.broker-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 560px; }
.broker-table th, .broker-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.broker-table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); background: var(--porcelain); white-space: nowrap; }
.broker-table tbody th { font-weight: 600; white-space: nowrap; }
.broker-table td { color: var(--text-2); }
.broker-no ul { margin: 0 0 14px; padding-left: 22px; display: grid; gap: 8px; }
.broker-no li strong { color: var(--ink); }
@media (max-width: 639px) { .broker-rec { padding: 20px; } .broker-rec h2 { font-size: 24px; } }
/* brokers: a card grid instead of a table (owner, 25 Oct 2026) */
.broker-grid { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .broker-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .broker-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.broker-card { min-width: 0; background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-panel); padding: 18px 20px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 10px; transition: translate 220ms var(--ease-out), box-shadow 260ms var(--ease-out), border-color var(--t-ctl) var(--ease); }
@media (hover: hover) { .broker-card:hover { translate: 0 -2px; border-color: var(--pale-blue); box-shadow: 0 12px 28px rgba(20, 38, 110, .10), 0 2px 6px rgba(20, 38, 110, .06); } }
.broker-card__name { font-size: 19px; margin: 0; }
.broker-card__reg, .broker-card__check { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--text-2); overflow-wrap: anywhere; }
.broker-card__label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--cobalt); margin-bottom: 2px; }
.broker-card__check { padding-top: 10px; border-top: 1px solid var(--border); margin-top: auto; }
.broker-reqs, .broker-rec, .broker-list, .broker-no { max-width: none; }
.page-body .broker-list { margin-left: calc(-1 * clamp(0px, (100vw - 880px) / 2 - var(--gutter), 200px)); margin-right: calc(-1 * clamp(0px, (100vw - 880px) / 2 - var(--gutter), 200px)); }