/* Multi-brand theme — palette lives in CSS variables so every domain re-skins
   without touching markup. These :root defaults are the SwapFlow brand; each
   brand re-points the same variables via the inline block in layout.php
   (see brand_css_vars() in web/lib/brands.php). */
:root {
  --c-primary: #2DE3A7; --c-primary-600: #1FC78F; --c-primary-900: #0B3D2D;
  --c-primary-rgb: 45,227,167;
  --c-accent: #FFB654; --c-accent-rgb: 255,182,84;
  --c-on-primary: #07090C;  /* text/icon colour that sits ON the primary fill */
  --c-ink-950: #07090C; --c-ink-900: #0A0E12; --c-ink-800: #10161D;
  --c-ink-700: #161E27; --c-ink-600: #1E2935; --c-ink-400: #3B4C5E;
  --c-mist-500: #7A8DA0; --c-mist-300: #AEBDCC; --c-mist-100: #E8EEF4;
  --c-danger: #FF6B6B; --c-danger-rgb: 255,107,107;
  --c-glow-1: rgba(45,227,167,0.10); --c-glow-2: rgba(255,182,84,0.05);
  --logo-from: #2DE3A7; --logo-mid: #0B3D2D; --logo-to: #2DE3A7; --logo-radius: 8px;
  --r-panel: 20px; --r-field: 12px;
  --font-display: 'Syne'; --font-body: 'Albert Sans'; --font-mono: 'IBM Plex Mono';
}

/* ------ atmosphere ------ */
.bg-glow {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% -8%, var(--c-glow-1), transparent 60%),
    radial-gradient(ellipse 45% 35% at 88% 105%, var(--c-glow-2), transparent 60%);
}
.bg-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: .35;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* ------ brand ------ */
.logo-mark {
  width: 26px; height: 26px; border-radius: var(--logo-radius); display: inline-block;
  background: conic-gradient(from 220deg, var(--logo-from), var(--logo-mid) 55%, var(--logo-to));
  box-shadow: 0 0 18px rgba(var(--c-primary-rgb), .45);
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.group:hover .logo-mark { transform: rotate(180deg); }

.live-dot {
  width: 7px; height: 7px; border-radius: 9999px; background: var(--c-primary); display: inline-block;
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(var(--c-primary-rgb), .5); }
  50%      { box-shadow: 0 0 0 6px rgba(var(--c-primary-rgb), 0); }
}

/* ------ panels ------ */
.panel {
  background: linear-gradient(180deg, var(--c-ink-800) 0%, var(--c-ink-900) 100%);
  border: 1px solid var(--c-ink-600);
  border-radius: var(--r-panel);
  box-shadow: 0 24px 60px -28px rgba(0, 0, 0, .8), inset 0 1px 0 rgba(255, 255, 255, .03);
}
.panel-inset {
  background: var(--c-ink-900); border: 1px solid var(--c-ink-600); border-radius: var(--r-field);
}

/* ------ staggered page load ------ */
.reveal { opacity: 0; transform: translateY(14px); animation: reveal .6s cubic-bezier(.2, .8, .2, 1) forwards; }
.reveal-1 { animation-delay: .05s } .reveal-2 { animation-delay: .14s }
.reveal-3 { animation-delay: .23s } .reveal-4 { animation-delay: .32s }
@keyframes reveal { to { opacity: 1; transform: none; } }

/* ------ forms ------ */
.field {
  width: 100%; background: var(--c-ink-900); border: 1px solid var(--c-ink-600); border-radius: var(--r-field);
  padding: .8rem 1rem; color: var(--c-mist-100); font-size: .95rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
}
.field:focus { border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .12); }
select.field { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237A8DA0' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; }

.btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%; padding: .95rem 1.4rem; border-radius: var(--r-field);
  font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  color: var(--c-on-primary); background: linear-gradient(180deg, var(--c-primary), var(--c-primary-600));
  box-shadow: 0 8px 28px -8px rgba(var(--c-primary-rgb), .55);
  transition: transform .15s, box-shadow .2s, filter .2s; cursor: pointer; border: 0;
}
.btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); }
.btn-primary:active { transform: translateY(0); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.btn-ghost {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1rem; border-radius: 10px;
  font-size: .85rem; color: var(--c-mist-300); border: 1px solid var(--c-ink-600); background: transparent;
  transition: border-color .2s, color .2s; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--c-primary); color: var(--c-primary); }

/* swap direction button */
.swap-flip {
  width: 40px; height: 40px; border-radius: 9999px; display: grid; place-items: center;
  background: var(--c-ink-700); border: 1px solid var(--c-ink-600); color: var(--c-primary); cursor: pointer;
  transition: transform .4s cubic-bezier(.2, .8, .2, 1), border-color .2s;
}
.swap-flip:hover { border-color: var(--c-primary); transform: rotate(180deg); }

/* ------ countdown bar ------ */
.countdown-track { height: 4px; border-radius: 9999px; background: var(--c-ink-600); overflow: hidden; }
.countdown-fill { height: 100%; border-radius: 9999px; background: linear-gradient(90deg, var(--c-primary), var(--c-primary-600)); transition: width 1s linear; }

/* ------ status rail ------ */
.rail { position: relative; }
.rail::before {
  content: ''; position: absolute; left: 13px; top: 10px; bottom: 10px; width: 2px;
  background: var(--c-ink-600); border-radius: 2px;
}
.rail-step { position: relative; display: flex; gap: 1rem; padding: .65rem 0 .65rem 0; align-items: center; }
.rail-node {
  position: relative; z-index: 1; width: 28px; height: 28px; border-radius: 9999px; flex: none;
  display: grid; place-items: center; font-size: .7rem;
  background: var(--c-ink-800); border: 2px solid var(--c-ink-600); color: var(--c-ink-400);
  transition: all .3s;
}
.rail-step.done .rail-node { border-color: var(--c-primary); background: var(--c-primary-900); color: var(--c-primary); }
.rail-step.now .rail-node {
  border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary);
  box-shadow: 0 0 0 5px rgba(var(--c-primary-rgb), .15); animation: pulse-node 1.8s ease-in-out infinite;
}
@keyframes pulse-node {
  0%, 100% { box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), .18); }
  50%      { box-shadow: 0 0 0 9px rgba(var(--c-primary-rgb), .04); }
}
.rail-step .rail-label { color: var(--c-mist-500); font-size: .92rem; }
.rail-step.done .rail-label { color: var(--c-mist-300); }
.rail-step.now .rail-label { color: var(--c-mist-100); font-weight: 600; }

/* ------ deposit ticket ------ */
.ticket {
  border: 1.5px dashed var(--c-ink-400); border-radius: 16px; padding: 1.25rem;
  background: repeating-linear-gradient(-45deg, rgba(255,255,255,.012) 0 8px, transparent 8px 16px), var(--c-ink-900);
}
.qr-frame { background: #fff; padding: 10px; border-radius: 12px; width: fit-content; }

/* status badge */
.badge { display: inline-flex; align-items: center; gap: .45rem; padding: .35rem .8rem; border-radius: 9999px; font-size: .8rem; font-weight: 600; }
.badge-active   { background: rgba(var(--c-primary-rgb), .1); color: var(--c-primary); border: 1px solid rgba(var(--c-primary-rgb), .25); }
.badge-warn     { background: rgba(var(--c-accent-rgb), .1);  color: var(--c-accent);  border: 1px solid rgba(var(--c-accent-rgb), .25); }
.badge-danger   { background: rgba(var(--c-danger-rgb), .1);  color: var(--c-danger);  border: 1px solid rgba(var(--c-danger-rgb), .25); }

/* big numeric display */
.amount-display { font-family: var(--font-mono), monospace; font-variant-numeric: tabular-nums; }

/* completed checkmark draw-in */
.check-burst { width: 84px; height: 84px; }
.check-burst circle { stroke: var(--c-primary); stroke-width: 2.5; fill: rgba(var(--c-primary-rgb), .08); stroke-dasharray: 260; stroke-dashoffset: 260; animation: draw 1s ease forwards; }
.check-burst path { stroke: var(--c-primary); stroke-width: 4; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 60; stroke-dashoffset: 60; animation: draw .6s ease .55s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ===========================================================================
   PART VARIANTS — each page region has several real implementations and a
   brand picks one (see web/lib/parts.php). These are the region-level styles;
   the SKINS section below then re-tints them per brand.
   =========================================================================== */

/* ---- header variants ----------------------------------------------------- */
.head-pill {
  background: var(--c-ink-800); border: 1px solid var(--c-ink-600);
  border-radius: 9999px; padding: .3rem .4rem;
}
.head-pill-item {
  padding: .38rem .95rem; border-radius: 9999px; color: var(--c-mist-500);
  transition: background .2s, color .2s;
}
a.head-pill-item:hover { background: var(--c-ink-700); color: var(--c-mist-100); }

.head-strip {
  border-bottom: 1px solid var(--c-ink-700); background: var(--c-ink-950);
  padding: .55rem 0;
}
.head-ledger { border-bottom: 1px solid var(--c-ink-600); }

/* ---- hero variants ------------------------------------------------------- */
.chip {
  display: inline-flex; align-items: center; padding: .4rem .85rem;
  border-radius: 9999px; font-size: .78rem; color: var(--c-mist-300);
  background: var(--c-ink-800); border: 1px solid var(--c-ink-600);
}

/* manifesto — steps as a ruled row across the page */
.step-row {
  background: var(--c-ink-600); border: 1px solid var(--c-ink-600);
  border-radius: var(--r-panel); overflow: hidden;
}
.step-cell {
  background: var(--c-ink-900); padding: 1.25rem 1.35rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.step-num { font-size: .72rem; letter-spacing: .2em; color: var(--c-primary); }
.step-text { font-size: .92rem; color: var(--c-mist-300); line-height: 1.45; }

/* console — the card sits under a framed instrument readout */
.console-frame {
  border: 1px solid var(--c-ink-600); border-radius: var(--r-panel);
  background: linear-gradient(180deg, var(--c-ink-800), var(--c-ink-900));
  overflow: hidden;
}
.console-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1.1rem; border-bottom: 1px solid var(--c-ink-600);
  background: var(--c-ink-950); color: var(--c-mist-500);
}

/* ---- deposit variants ---------------------------------------------------- */
.qr-halo { box-shadow: 0 0 0 6px rgba(var(--c-primary-rgb), .10), 0 18px 40px -20px rgba(0,0,0,.7); }
.deposit-flat dl { border-top: 1px solid var(--c-ink-600); }
.term-key {
  flex: none; width: 4.5rem; color: var(--c-mist-500); font-size: .78rem;
  letter-spacing: .12em;
}

/* ---- tracker: stepper-horizontal ---------------------------------------- */
.stepper { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; }
.stepper-step {
  position: relative; display: flex; flex-direction: column; align-items: center;
  gap: .6rem; text-align: center; padding-top: .25rem;
}
.stepper-track {
  position: absolute; top: 15px; left: 50%; right: -50%; height: 2px;
  background: var(--c-ink-600); z-index: 0;
}
.stepper-step.is-last .stepper-track { display: none; }
.stepper-step.done .stepper-track { background: var(--c-primary); }
.stepper-node {
  position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 9999px;
  display: grid; place-items: center; font-size: .72rem; flex: none;
  background: var(--c-ink-800); border: 2px solid var(--c-ink-600); color: var(--c-ink-400);
  transition: all .3s;
}
.stepper-step.done .stepper-node { border-color: var(--c-primary); background: var(--c-primary-900); color: var(--c-primary); }
.stepper-step.now .stepper-node {
  border-color: var(--c-primary); background: var(--c-primary); color: var(--c-on-primary);
  animation: pulse-node 1.8s ease-in-out infinite;
}
.stepper-label { font-size: .72rem; line-height: 1.3; color: var(--c-mist-500); max-width: 11ch; }
.stepper-step.done .stepper-label { color: var(--c-mist-300); }
.stepper-step.now  .stepper-label { color: var(--c-mist-100); font-weight: 600; }
@media (max-width: 560px) {
  .stepper { grid-auto-flow: row; gap: .2rem; }
  .stepper-step { flex-direction: row; align-items: center; text-align: left; gap: .85rem; }
  .stepper-track { top: 50%; bottom: -50%; left: 15px; right: auto; width: 2px; height: auto; }
  .stepper-label { max-width: none; font-size: .85rem; }
}

/* ---- tracker: ledger-rows ------------------------------------------------ */
.ledger { border-top: 1px solid var(--c-ink-600); }
.ledger-row {
  display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: 1rem;
  padding: .8rem .25rem; border-bottom: 1px solid var(--c-ink-600);
}
.ledger-seq   { font-size: .72rem; color: var(--c-ink-400); }
.ledger-label { font-size: .9rem; color: var(--c-mist-500); }
.ledger-state { font-size: .66rem; letter-spacing: .16em; color: var(--c-ink-400); }
.ledger-row.done .ledger-label  { color: var(--c-mist-300); }
.ledger-row.done .ledger-state  { color: var(--c-primary); }
.ledger-row.now  { background: rgba(var(--c-primary-rgb), .04); }
.ledger-row.now  .ledger-label  { color: var(--c-mist-100); font-weight: 600; }
.ledger-row.now  .ledger-state  { color: var(--c-accent); }
.ledger-row.now  .ledger-seq    { color: var(--c-primary); }

/* ---- tracker: orbital ---------------------------------------------------- */
.orbital { display: flex; flex-wrap: wrap; align-items: center; gap: 2rem; justify-content: center; }
.orbital-dial { position: relative; width: 150px; height: 150px; flex: none; }
.orbital-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.orbital-track { fill: none; stroke: var(--c-ink-600); stroke-width: 6; }
.orbital-value {
  fill: none; stroke: var(--c-primary); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  transition: stroke-dashoffset .8s cubic-bezier(.2,.8,.2,1);
  filter: drop-shadow(0 0 8px rgba(var(--c-primary-rgb), .5));
}
.orbital-centre {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .2rem; text-align: center; padding: 0 1.5rem;
}
.orbital-pct { font-size: 1.6rem; color: var(--c-mist-100); line-height: 1; }
.orbital-now { font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: var(--c-mist-500); }
.orbital-legend { flex: 1 1 14rem; display: flex; flex-direction: column; gap: .6rem; min-width: 12rem; }
.orbital-sat { display: flex; align-items: center; gap: .75rem; font-size: .86rem; color: var(--c-mist-500); }
.orbital-dot {
  width: 8px; height: 8px; border-radius: 9999px; flex: none;
  background: var(--c-ink-600); transition: all .3s;
}
.orbital-sat.done .orbital-dot { background: var(--c-primary); }
.orbital-sat.done .orbital-name { color: var(--c-mist-300); }
.orbital-sat.now .orbital-dot {
  background: var(--c-primary); box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), .18);
  animation: pulse-dot 2s ease-in-out infinite;
}
.orbital-sat.now .orbital-name { color: var(--c-mist-100); font-weight: 600; }

/* ---- tracker: ascii-bar -------------------------------------------------- */
.ascii-head {
  display: flex; justify-content: space-between; font-size: .7rem;
  letter-spacing: .18em; color: var(--c-mist-500); margin-bottom: .6rem;
}
.ascii-bar { font-size: 1.05rem; line-height: 1; letter-spacing: -.04em; margin-bottom: 1.1rem; word-break: break-all; }
.ascii-on  { color: var(--c-primary); }
.ascii-off { color: var(--c-ink-600); }
.ascii-list { font-size: .82rem; }
.ascii-row { display: flex; gap: .8rem; padding: .3rem 0; color: var(--c-ink-400); }
.ascii-mark { flex: none; }
.ascii-row.done { color: var(--c-mist-300); }
.ascii-row.done .ascii-mark { color: var(--c-primary); }
.ascii-row.now  { color: var(--c-mist-100); }
.ascii-row.now  .ascii-mark { color: var(--c-accent); }

/* ---- tracker: checklist -------------------------------------------------- */
.checklist { display: flex; flex-direction: column; gap: .6rem; }
.check-item {
  display: flex; gap: .9rem; align-items: flex-start; padding: .85rem 1rem;
  border: 1px solid var(--c-ink-600); border-radius: var(--r-field);
  background: var(--c-ink-900); transition: all .3s;
}
.check-box {
  flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center;
  border: 2px solid var(--c-ink-600); color: transparent; margin-top: .1rem; transition: all .3s;
}
.check-item.done .check-box { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-on-primary); }
.check-item.now {
  border-color: rgba(var(--c-primary-rgb), .45);
  box-shadow: 0 0 0 3px rgba(var(--c-primary-rgb), .08);
}
.check-item.now .check-box { border-color: var(--c-primary); }
.check-spin {
  width: 9px; height: 9px; border-radius: 9999px;
  border: 2px solid var(--c-primary); border-right-color: transparent;
  animation: check-spin .8s linear infinite;
}
@keyframes check-spin { to { transform: rotate(360deg); } }
.check-body { display: flex; flex-direction: column; gap: .15rem; }
.check-label { font-size: .92rem; color: var(--c-mist-500); }
.check-item.done .check-label { color: var(--c-mist-300); }
.check-item.now  .check-label { color: var(--c-mist-100); font-weight: 600; }
.check-state { font-size: .74rem; color: var(--c-mist-500); opacity: .8; }
.check-item.now .check-state { color: var(--c-primary); opacity: 1; }

/* ---- done: confetti ------------------------------------------------------ */
.burst { position: relative; width: 92px; height: 92px; margin: 0 auto; }
.burst-core {
  position: absolute; inset: 50% auto auto 50%; transform: translate(-50%, -50%);
  width: 58px; height: 58px; border-radius: 9999px; display: grid; place-items: center;
  background: var(--c-primary); color: var(--c-on-primary);
  box-shadow: 0 0 34px -4px rgba(var(--c-primary-rgb), .7);
  animation: burst-pop .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes burst-pop { from { transform: translate(-50%, -50%) scale(0); } }
.burst-shard {
  position: absolute; top: 50%; left: 50%; width: 5px; height: 12px; border-radius: 2px;
  background: var(--c-accent); opacity: 0;
  transform-origin: 50% 50%;
  animation: burst-fly .85s cubic-bezier(.15,.75,.3,1) both;
  animation-delay: calc(.18s + var(--i) * .012s);
}
.burst-shard:nth-child(odd) { background: var(--c-primary); }
@keyframes burst-fly {
  0%   { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(-6px) scale(.4); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: rotate(calc(var(--i) * 30deg)) translateY(-48px) scale(1); }
}

/* ---- done: stamp --------------------------------------------------------- */
.stamp-wrap { position: relative; }
.stamp {
  position: absolute; top: -.5rem; right: -.25rem; transform: rotate(-13deg);
  border: 3px double var(--c-primary); color: var(--c-primary); border-radius: 6px;
  padding: .35rem 1rem; font-family: var(--font-mono), monospace; font-size: .95rem;
  letter-spacing: .22em; text-transform: uppercase; opacity: .82; pointer-events: none;
}
.stamp-figures { display: grid; gap: 1rem; text-align: left; max-width: 22rem; margin: 0 auto; }
.stamp-figures dt {
  font-size: .66rem; text-transform: uppercase; letter-spacing: .18em;
  color: var(--c-mist-500); margin-bottom: .25rem;
}
.stamp-figures dd { font-size: 1.05rem; color: var(--c-mist-100); }
.stamp-figures > div { border-bottom: 1px solid var(--c-ink-600); padding-bottom: .8rem; }

/* ---- done: receipt ------------------------------------------------------- */
.receipt {
  position: relative; max-width: 22rem; margin: 0 auto; text-align: left;
  background: var(--c-ink-800); border: 1px solid var(--c-ink-600);
  border-radius: 0 0 12px 12px; padding: 2.4rem 1.5rem 1.5rem;
}
.receipt-perf {
  position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: repeating-linear-gradient(90deg, var(--c-ink-600) 0 7px, transparent 7px 14px);
}
.receipt-tick {
  position: absolute; top: -19px; left: 50%; transform: translateX(-50%);
  width: 38px; height: 38px; border-radius: 9999px; display: grid; place-items: center;
  background: var(--c-primary); color: var(--c-on-primary);
  box-shadow: 0 6px 18px -6px rgba(var(--c-primary-rgb), .7);
}
.receipt-lines { display: grid; gap: .1rem; }
.receipt-lines > div {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px dashed var(--c-ink-600);
}
.receipt-lines dt { font-size: .8rem; color: var(--c-mist-500); }
.receipt-lines dd { font-size: .92rem; color: var(--c-mist-100); }
.receipt-note { font-size: .74rem; color: var(--c-mist-500); margin-top: 1rem; line-height: 1.5; }

/* ---- done: terminal-ok --------------------------------------------------- */
.term-ok { font-size: .9rem; line-height: 1.85; }
.term-line { color: var(--c-mist-500); }
.term-ok-line { color: var(--c-primary); font-size: 1.35rem; letter-spacing: .04em; }
.term-dim { color: var(--c-mist-300); }
.term-caret {
  display: inline-block; width: .55rem; height: 1.05rem; background: var(--c-primary);
  vertical-align: -.18rem; animation: term-blink 1.05s steps(1) infinite;
}
@keyframes term-blink { 50% { opacity: 0; } }

/* ---- track variants ------------------------------------------------------ */
/* terminal — the reference is typed at a prompt, not into a boxed field */
.term-input-row {
  display: flex; align-items: center; gap: .75rem;
  border-bottom: 2px solid var(--c-ink-600); padding-bottom: .6rem;
  transition: border-color .2s;
}
.term-input-row:focus-within { border-color: var(--c-primary); }
.term-prompt { color: var(--c-primary); font-size: 1.1rem; flex: none; }
.term-input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--c-mist-100); font-size: 1.05rem; padding: .2rem 0;
}
.term-input::placeholder { color: var(--c-ink-400); }

/* soft — a friendly badge above a roomy, centred field */
.track-glyph {
  display: inline-grid; place-items: center; width: 52px; height: 52px;
  border-radius: 9999px; color: var(--c-primary);
  background: rgba(var(--c-primary-rgb), .12);
}

/* desk — a labelled enquiry form with ruled rows */
.desk-form { border-top: 1px solid var(--c-ink-600); }
.desk-row {
  display: grid; gap: .35rem 1.5rem; padding: 1rem 0;
  border-bottom: 1px solid var(--c-ink-600);
}
@media (min-width: 560px) { .desk-row { grid-template-columns: 10rem 1fr; align-items: start; } }
.desk-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--c-mist-500); padding-top: .85rem;
}
@media (max-width: 559px) { .desk-label { padding-top: 0; } }

/* rail — the field is the first node on a lit rail, stages listed beneath it.
   The rail is one gradient border on the list, so the line can't drift out of
   alignment with the nodes the way a separate absolutely-positioned bar does. */
.rail-track-head { display: flex; gap: 1rem; align-items: flex-start; }
.rail-track-node {
  flex: none; width: 11px; height: 11px; margin-top: .55rem; border-radius: 9999px;
  background: var(--c-ink-600); box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), .06);
}
.rail-track-node-live {
  background: var(--c-primary);
  box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), .16), 0 0 14px rgba(var(--c-primary-rgb), .5);
  animation: rail-track-pulse 2.4s ease-in-out infinite;
}
@keyframes rail-track-pulse { 50% { box-shadow: 0 0 0 7px rgba(var(--c-primary-rgb), .05), 0 0 18px rgba(var(--c-primary-rgb), .6); } }
.rail-track-form { flex: 1; min-width: 0; }
.rail-track-label {
  display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .16em;
  color: var(--c-mist-500); margin-bottom: .5rem;
}
.rail-track-input-row { display: flex; gap: .6rem; align-items: stretch; }
.rail-track-input-row .field { flex: 1; min-width: 0; }
.rail-track-btn { width: auto; flex: none; padding-left: 1.5rem; padding-right: 1.5rem; }
@media (max-width: 479px) {
  .rail-track-input-row { flex-direction: column; }
  .rail-track-btn { width: 100%; }
}
.rail-track-stages {
  list-style: none; margin: .25rem 0 0; padding: 1.25rem 0 0 0;
  /* the rail itself: fades in under the live node and out at the last stage */
  margin-left: 5px; border-left: 1px solid var(--c-ink-600);
}
/* -5px pulls each 9px node back so its centre lands on the 1px rail at x=5.5 */
.rail-track-stage { display: flex; gap: 1rem; align-items: flex-start; margin-left: -5px; padding-bottom: 1.15rem; }
.rail-track-stage:last-child { padding-bottom: 0; }
.rail-track-stage .rail-track-node { margin-top: .3rem; width: 9px; height: 9px; box-shadow: none; }
.rail-track-stage-name {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; color: var(--c-mist-300);
}
.rail-track-stage-desc { font-size: .82rem; color: var(--c-mist-500); margin-top: .2rem; line-height: 1.5; }

/* scan — an instrument readout: sweeping bar, wide mono field, status rows */
.scan-frame {
  border: 1px solid var(--c-ink-600); border-radius: 1rem; overflow: hidden;
  background: var(--c-ink-800);
}
.scan-bar { height: 3px; background: var(--c-ink-700); position: relative; overflow: hidden; }
.scan-sweep {
  position: absolute; inset-block: 0; width: 38%;
  background: linear-gradient(90deg, transparent, var(--c-primary), transparent);
  animation: scan-sweep 3.4s cubic-bezier(.45,0,.55,1) infinite;
}
@keyframes scan-sweep { 0% { left: -40%; } 100% { left: 102%; } }
.scan-body { padding: 1.75rem 1.5rem 1.5rem; }
@media (min-width: 640px) { .scan-body { padding: 2rem; } }
.scan-label {
  display: block; font-size: .66rem; letter-spacing: .2em; color: var(--c-mist-500);
}
.scan-input { font-size: 1.02rem; letter-spacing: .06em; padding-block: .85rem; }
.scan-readout { margin-top: 1.5rem; border-top: 1px solid var(--c-ink-600); font-size: .72rem; }
.scan-readout > div {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: 1rem;
  padding: .6rem 0; border-bottom: 1px solid var(--c-ink-700);
}
.scan-readout > div:last-child { border-bottom: 0; }
.scan-readout dt { color: var(--c-mist-500); letter-spacing: .14em; }
.scan-readout dd { color: var(--c-mist-300); margin: 0; overflow-wrap: anywhere; }

/* orbit — concentric rings behind a centred card, one satellite in transit */
/* overflow-x:clip (not hidden) contains the rings sideways without creating a
   scroll container, so they still bleed above the card. Paired with a width that
   can't exceed the section, a narrow screen can never gain a horizontal scrollbar. */
.track-orbit { position: relative; overflow-x: clip; overflow-y: visible; }
.orbit-stage {
  position: absolute; left: 50%; top: 0;
  width: min(460px, 100%); aspect-ratio: 1;
  transform: translate(-50%, -34%); pointer-events: none; z-index: 0;
}
.orbit-ring {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  border: 1px solid rgba(var(--c-primary-rgb), .16); border-radius: 9999px;
}
.orbit-ring-1 { width: 42%; height: 42%; }
.orbit-ring-2 { width: 68%; height: 68%; border-color: rgba(var(--c-primary-rgb), .1); }
.orbit-ring-3 { width: 100%; height: 100%; border-color: rgba(var(--c-primary-rgb), .06); }
.orbit-sat {
  position: absolute; left: 50%; top: 50%; width: 68%; height: 68%;
  transform: translate(-50%, -50%); animation: orbit-spin 14s linear infinite;
}
.orbit-sat-dot {
  position: absolute; left: 50%; top: -4px; width: 8px; height: 8px; margin-left: -4px;
  border-radius: 9999px; background: var(--c-primary);
  box-shadow: 0 0 14px rgba(var(--c-primary-rgb), .8);
}
@keyframes orbit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
.orbit-card {
  position: relative; z-index: 1;
  border: 1px solid var(--c-ink-600); border-radius: 1.25rem;
  background: var(--c-ink-800); padding: 2rem 1.5rem;
}
@media (min-width: 640px) { .orbit-card { padding: 2.25rem 2rem; } }

/* stub — a torn ticket counterfoil; notches + dashes make the perforation */
.stub-card {
  border: 1px solid var(--c-ink-600); border-radius: 1rem;
  background: var(--c-ink-800); overflow: hidden;
}
.stub-top { padding: 1.75rem 1.5rem 1.5rem; }
.stub-bottom { padding: 1.5rem; }
@media (min-width: 640px) {
  .stub-top { padding: 2rem 2rem 1.75rem; }
  .stub-bottom { padding: 1.75rem 2rem 2rem; }
}
.stub-perf {
  position: relative; height: 0;
  border-top: 2px dashed var(--c-ink-600);
}
.stub-notch {
  position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 9999px;
  background: var(--c-ink-900);
}
.stub-notch-l { left: -11px; }
.stub-notch-r { right: -11px; }
.stub-label {
  display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .2em;
  color: var(--c-mist-500);
}
.stub-input { font-size: 1.05rem; letter-spacing: .08em; text-align: center; padding-block: .9rem; }

/* ---- footer variants ----------------------------------------------------- */
.foot-link { color: var(--c-mist-500); transition: color .2s; }
.foot-link:hover { color: var(--c-primary); }

/* ===========================================================================
   CONTENT PAGES — About / FAQ / Fees / Contact / Terms / Privacy / AML.
   Bodies are operator-written markdown-lite, so the styling has to hold up for
   text nobody designed around.
   =========================================================================== */
.content-title { font-size: 2rem; line-height: 1.12; }
@media (min-width: 640px) { .content-title { font-size: 2.6rem; } }
.content-intro { line-height: 1.6; }

.prose-brand { color: var(--c-mist-300); font-size: .98rem; line-height: 1.75; }
.prose-brand > * + * { margin-top: 1.05rem; }
.prose-brand h2 {
  font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 1.3rem;
  color: var(--c-mist-100); margin-top: 2.2rem; line-height: 1.25;
}
.prose-brand h3 {
  font-family: var(--font-display), sans-serif; font-weight: 700; font-size: 1.05rem;
  color: var(--c-mist-100); margin-top: 1.7rem;
}
.prose-brand h4 { font-weight: 700; font-size: .95rem; color: var(--c-mist-100); margin-top: 1.4rem; }
.prose-brand ul, .prose-brand ol { padding-left: 1.35rem; }
.prose-brand ul { list-style: disc; }
.prose-brand ol { list-style: decimal; }
.prose-brand li { margin-top: .45rem; }
.prose-brand li::marker { color: var(--c-primary); }
.prose-brand strong { color: var(--c-mist-100); font-weight: 700; }
.prose-brand a { color: var(--c-primary); text-decoration: underline; text-underline-offset: 3px; }
.prose-brand a:hover { text-decoration-thickness: 2px; }
.prose-brand code {
  font-family: var(--font-mono), monospace; font-size: .86em;
  background: var(--c-ink-800); border: 1px solid var(--c-ink-600);
  border-radius: 5px; padding: .1rem .35rem; color: var(--c-mist-100);
}

/* FAQ accordion */
.faq { display: flex; flex-direction: column; gap: .6rem; }
.faq-item {
  border: 1px solid var(--c-ink-600); border-radius: var(--r-field);
  background: var(--c-ink-800); overflow: hidden;
}
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.15rem; cursor: pointer; list-style: none;
  font-weight: 600; color: var(--c-mist-100); font-size: .96rem;
  transition: background .2s;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { background: var(--c-ink-700); }
.faq-icon {
  flex: none; width: 11px; height: 11px; position: relative; color: var(--c-primary);
  transition: transform .25s;
}
.faq-icon::before, .faq-icon::after {
  content: ''; position: absolute; background: currentColor; border-radius: 2px;
}
.faq-icon::before { inset: 45% 0 45% 0; }
.faq-icon::after  { inset: 0 45% 0 45%; }
.faq-item[open] .faq-icon { transform: rotate(135deg); }
.faq-a { padding: 0 1.15rem 1.15rem; font-size: .92rem; }

.coin-table { border-collapse: collapse; }
.coin-table th {
  text-align: left; padding: .7rem 1rem; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--c-mist-500); border-bottom: 1px solid var(--c-ink-600);
  font-weight: 600;
}
.coin-table td { padding: .65rem 1rem; border-bottom: 1px solid var(--c-ink-600); font-size: .86rem; }
.coin-table tr:last-child td { border-bottom: 0; }

/* ===========================================================================
   SKINS — per-brand STRUCTURAL look (selected by the `skin-*` body class via
   brand_body_class()). The base rules above are the `terminal` skin; each
   block below restyles atmosphere, panels, buttons and type so brands don't
   read as the same template. Colours still come from the brand CSS variables.
   =========================================================================== */

/* Hero headline scale — base, then per-skin so type hierarchy differs too. */
.hero-h1 { font-size: 2.25rem; line-height: 1.08; }
@media (min-width: 640px) { .hero-h1 { font-size: 3rem; } }
.skin-vault   .hero-h1 { font-size: 2rem;  letter-spacing: -.01em; font-weight: 700; }
@media (min-width: 640px) { .skin-vault .hero-h1 { font-size: 2.5rem; } }
.skin-cosmic  .hero-h1 { font-size: 2.6rem; }
@media (min-width: 640px) { .skin-cosmic .hero-h1 { font-size: 3.6rem; } }
.skin-brutal  .hero-h1 { font-size: 3rem; letter-spacing: -.03em; line-height: .98; }
@media (min-width: 640px) { .skin-brutal .hero-h1 { font-size: 4.5rem; } }
.skin-aurora  .hero-h1 { font-size: 2.6rem; }
@media (min-width: 640px) { .skin-aurora .hero-h1 { font-size: 3.6rem; } }
.skin-daylight .hero-h1 { font-weight: 700; }

/* ---- neo (CoinDart): glassy, rounded, drifting glow, pill buttons --------- */
.skin-neo .bg-grain { opacity: .18; }
.skin-neo .bg-glow { animation: neo-drift 18s ease-in-out infinite; }
@keyframes neo-drift { 50% { transform: translateY(-3%) scale(1.06); } }
.skin-neo .panel {
  backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px);
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  border-color: rgba(var(--c-primary-rgb), .18);
}
.skin-neo .btn-primary { border-radius: 9999px; text-transform: uppercase; letter-spacing: .06em; }
.skin-neo .logo-mark { box-shadow: 0 0 26px rgba(var(--c-primary-rgb), .6); }

/* ---- vault (VaultRoute): flat, sharp, ruled, restrained ------------------- */
body.skin-vault::before {
  content: ''; position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 50;
  background: linear-gradient(90deg, var(--c-primary), transparent 70%);
}
.skin-vault .bg-grain { display: none; }
.skin-vault .bg-glow { opacity: .45; }
.skin-vault .panel { background: var(--c-ink-800); box-shadow: none; border: 1px solid var(--c-ink-600); }
.skin-vault .logo-mark { box-shadow: none; }
.skin-vault .btn-primary {
  box-shadow: none; text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; font-weight: 600;
}
.skin-vault .reveal { animation-duration: .4s; }

/* ---- cosmic (NebulaX): heavy glow, starfield, gradient headline ----------- */
.skin-cosmic .bg-glow {
  background:
    radial-gradient(ellipse 90% 60% at 50% -10%, var(--c-glow-1), transparent 65%),
    radial-gradient(ellipse 60% 50% at 85% 112%, var(--c-glow-2), transparent 60%);
}
.skin-cosmic .bg-grain {
  opacity: .55;
  background-image:
    radial-gradient(1px 1px at 18% 28%, rgba(255,255,255,.55), transparent),
    radial-gradient(1px 1px at 68% 58%, rgba(255,255,255,.38), transparent),
    radial-gradient(1px 1px at 38% 82%, rgba(255,255,255,.30), transparent),
    radial-gradient(1px 1px at 88% 22%, rgba(255,255,255,.45), transparent),
    radial-gradient(1px 1px at 52% 12%, rgba(255,255,255,.30), transparent);
}
.skin-cosmic h1 span {
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.skin-cosmic .panel {
  border-color: rgba(var(--c-primary-rgb), .22);
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.8), 0 0 44px -12px rgba(var(--c-primary-rgb), .18),
              inset 0 1px 0 rgba(255,255,255,.04);
}

/* ---- daylight (Lumora): LIGHT mode — soft shadows, no grain --------------- */
.skin-daylight .bg-grain { display: none; }
.skin-daylight .bg-glow { opacity: .85; }
.skin-daylight .panel {
  background: var(--c-ink-800); border: 1px solid var(--c-ink-600);
  box-shadow: 0 14px 44px -18px rgba(20,30,60,.20);
}
.skin-daylight .panel-inset { background: var(--c-ink-700); border-color: var(--c-ink-600); }
.skin-daylight .field { background: #fff; }
.skin-daylight .btn-primary { box-shadow: 0 10px 26px -10px rgba(var(--c-primary-rgb), .55); }

/* ---- brutal (Gridline): flat, hard borders, offset shadows, grid ---------- */
body.skin-brutal { background-image:
  linear-gradient(var(--c-ink-700) 1px, transparent 1px),
  linear-gradient(90deg, var(--c-ink-700) 1px, transparent 1px);
  background-size: 46px 46px; background-position: -1px -1px;
}
.skin-brutal .bg-grain, .skin-brutal .bg-glow { display: none; }
.skin-brutal .panel {
  background: var(--c-ink-900); border: 2px solid var(--c-mist-100); border-radius: 0;
  box-shadow: 7px 7px 0 var(--c-primary);
}
.skin-brutal .panel-inset { background: var(--c-ink-950); border: 2px solid var(--c-ink-600); border-radius: 0; }
.skin-brutal .field { border: 2px solid var(--c-ink-600); border-radius: 0; }
.skin-brutal .field:focus { border-color: var(--c-primary); box-shadow: none; }
.skin-brutal .logo-mark { box-shadow: none; }
.skin-brutal .btn-primary {
  border-radius: 0; font-family: var(--font-mono), monospace; text-transform: uppercase; letter-spacing: .08em;
  box-shadow: 5px 5px 0 var(--c-mist-100);
}
.skin-brutal .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--c-mist-100); filter: none; }
.skin-brutal h1, .skin-brutal h2 { text-transform: uppercase; letter-spacing: -.02em; }

/* ---- aurora (Aurova): animated multi-colour gradients, gradient buttons --- */
.skin-aurora .bg-grain { opacity: .12; }
.skin-aurora .bg-glow {
  background:
    radial-gradient(ellipse 70% 50% at 12% 0%, var(--c-glow-1), transparent 60%),
    radial-gradient(ellipse 60% 50% at 92% 102%, var(--c-glow-2), transparent 60%),
    radial-gradient(ellipse 55% 45% at 60% 120%, rgba(56,189,248,.12), transparent 60%);
  animation: aurora-shift 22s ease-in-out infinite;
}
@keyframes aurora-shift { 50% { transform: translate3d(0,-2%,0) scale(1.08); filter: hue-rotate(20deg); } }
.skin-aurora .panel {
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015));
  border-color: rgba(var(--c-primary-rgb), .20);
}
.skin-aurora .btn-primary { background: linear-gradient(110deg, var(--c-primary), var(--c-accent)); }
.skin-aurora h1 span {
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ===========================================================================
   SKIN × PART — the second half of the divergence. Two brands can share a part
   variant (e.g. both draw `stepper-horizontal`) and still not look related,
   because the skin restyles that variant here.
   =========================================================================== */

/* ---- terminal (SwapFlow) ------------------------------------------------- */
.skin-terminal .content-title { letter-spacing: -.02em; }
.skin-terminal .content-eyebrow::before { content: '// '; }

/* ---- neo (CoinDart): pills, blur, uppercase micro-labels ----------------- */
.skin-neo .head-pill { backdrop-filter: blur(9px); -webkit-backdrop-filter: blur(9px); background: rgba(255,255,255,.05); }
.skin-neo .chip {
  border-radius: 9999px; background: rgba(var(--c-primary-rgb), .08);
  border-color: rgba(var(--c-primary-rgb), .22); color: var(--c-primary);
  text-transform: uppercase; letter-spacing: .1em; font-size: .68rem;
}
.skin-neo .stepper-node { border-width: 2px; box-shadow: 0 0 0 4px rgba(var(--c-primary-rgb), .06); }
.skin-neo .stepper-step.now .stepper-node { box-shadow: 0 0 20px -2px rgba(var(--c-primary-rgb), .8); }
.skin-neo .stepper-label { text-transform: uppercase; letter-spacing: .07em; font-size: .66rem; }
.skin-neo .faq-item { border-radius: 16px; backdrop-filter: blur(6px); background: rgba(255,255,255,.04); }
.skin-neo .qr-frame { border-radius: 18px; }
.skin-neo .burst-core { box-shadow: 0 0 46px -2px rgba(var(--c-primary-rgb), .85); }

/* ---- vault (VaultRoute): ruled, flat, nothing rounded ------------------- */
.skin-vault .ledger-row { padding-left: .6rem; padding-right: .6rem; }
.skin-vault .ledger-row.now { background: rgba(var(--c-primary-rgb), .06); box-shadow: inset 2px 0 0 var(--c-primary); }
.skin-vault .stamp { border-radius: 0; border-style: double; }
.skin-vault .deposit-flat dl { border-top-color: var(--c-primary); border-top-width: 2px; }
.skin-vault .faq-item { border-radius: 4px; background: var(--c-ink-800); }
.skin-vault .faq-q { text-transform: none; letter-spacing: 0; }
.skin-vault .qr-frame { border-radius: 4px; }
.skin-vault .content-title { font-weight: 700; letter-spacing: -.01em; }
.skin-vault .prose-brand h2 { text-transform: uppercase; letter-spacing: .06em; font-size: 1.05rem; }
.skin-vault .foot-columns { border-top: 2px solid var(--c-primary); padding-top: 2rem; }
.skin-vault .desk-form { border-top-color: var(--c-primary); border-top-width: 2px; }

/* daylight: the soft track field wants the same white fill as other inputs */
.skin-daylight .track-glyph { background: #fff; box-shadow: 0 8px 22px -14px rgba(20,30,60,.5); }

/* ---- cosmic (NebulaX): glow bleeds through every part ------------------- */
.skin-cosmic .console-frame {
  border-color: rgba(var(--c-primary-rgb), .25);
  box-shadow: 0 0 50px -14px rgba(var(--c-primary-rgb), .35);
}
.skin-cosmic .console-bar { background: rgba(var(--c-primary-rgb), .06); }
.skin-cosmic .orbital-value { filter: drop-shadow(0 0 14px rgba(var(--c-primary-rgb), .8)); stroke-width: 7; }
.skin-cosmic .orbital-pct {
  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.skin-cosmic .orbital-dial::after {
  content: ''; position: absolute; inset: 14%; border-radius: 9999px;
  background: radial-gradient(circle, rgba(var(--c-primary-rgb), .16), transparent 70%);
  pointer-events: none;
}
.skin-cosmic .chip { background: rgba(var(--c-primary-rgb), .07); border-color: rgba(var(--c-primary-rgb), .2); }
.skin-cosmic .faq-item { border-color: rgba(var(--c-primary-rgb), .18); }
.skin-cosmic .content-title span, .skin-cosmic .prose-brand h2 { color: var(--c-mist-100); }

/* ---- daylight (Lumora): light, soft, generous ---------------------------- */
.skin-daylight .head-pill { background: #fff; box-shadow: 0 6px 18px -12px rgba(20,30,60,.35); }
.skin-daylight .chip { background: #fff; box-shadow: 0 4px 12px -8px rgba(20,30,60,.4); }
.skin-daylight .check-item { background: #fff; box-shadow: 0 6px 20px -16px rgba(20,30,60,.5); }
.skin-daylight .check-item.now { box-shadow: 0 10px 26px -16px rgba(var(--c-primary-rgb), .55); }
.skin-daylight .receipt { background: #fff; box-shadow: 0 18px 44px -26px rgba(20,30,60,.4); }
.skin-daylight .faq-item { background: #fff; box-shadow: 0 6px 20px -18px rgba(20,30,60,.5); }
.skin-daylight .faq-q:hover { background: var(--c-ink-700); }
.skin-daylight .prose-brand code { background: var(--c-ink-700); }
.skin-daylight .qr-frame { box-shadow: 0 10px 30px -18px rgba(20,30,60,.6); }
.skin-daylight .step-cell { background: #fff; }

/* ---- brutal (Gridline): hard edges, no curves, mono everywhere ---------- */
.skin-brutal .chip {
  border-radius: 0; border: 2px solid var(--c-mist-100); background: transparent;
  font-family: var(--font-mono), monospace; text-transform: uppercase; font-size: .7rem;
}
.skin-brutal .step-row, .skin-brutal .step-cell { border-radius: 0; }
.skin-brutal .step-cell { border: 0; }
.skin-brutal .ascii-bar { font-size: 1.2rem; }
.skin-brutal .ascii-row.now { background: var(--c-primary); color: var(--c-on-primary); }
.skin-brutal .ascii-row.now .ascii-mark { color: var(--c-on-primary); }
.skin-brutal .faq-item { border-radius: 0; border: 2px solid var(--c-ink-600); background: var(--c-ink-900); }
.skin-brutal .faq-item[open] { border-color: var(--c-primary); }
.skin-brutal .faq-q { font-family: var(--font-mono), monospace; text-transform: uppercase; font-size: .82rem; letter-spacing: .04em; }
.skin-brutal .qr-frame { border-radius: 0; }
.skin-brutal .content-title { text-transform: uppercase; letter-spacing: -.03em; }
.skin-brutal .prose-brand h2, .skin-brutal .prose-brand h3 { text-transform: uppercase; }
.skin-brutal .prose-brand a { text-decoration-thickness: 2px; }
.skin-brutal .term-ok { border-left: 3px solid var(--c-primary); padding-left: 1.1rem; }
.skin-brutal .term-input-row { border-bottom-width: 3px; }
.skin-brutal .track-terminal h1 { letter-spacing: -.03em; }
.skin-brutal .coin-table th { border-bottom-width: 2px; }

/* ---- aurora (Aurova): gradient wash across the parts -------------------- */
.skin-aurora .chip {
  background: linear-gradient(110deg, rgba(var(--c-primary-rgb), .12), rgba(var(--c-accent-rgb), .10));
  border-color: rgba(var(--c-primary-rgb), .22);
}
.skin-aurora .stepper-step.done .stepper-track { background: linear-gradient(90deg, var(--c-primary), var(--c-accent)); }
.skin-aurora .stepper-step.now .stepper-node { background: linear-gradient(140deg, var(--c-primary), var(--c-accent)); }
.skin-aurora .burst-core { background: linear-gradient(140deg, var(--c-primary), var(--c-accent)); }
.skin-aurora .faq-item {
  backdrop-filter: blur(8px); background: rgba(255,255,255,.045);
  border-color: rgba(var(--c-primary-rgb), .18);
}
.skin-aurora .content-title {
  background: linear-gradient(100deg, var(--c-mist-100), var(--c-primary));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.skin-aurora .qr-frame { border-radius: 18px; }

/* Motion is decorative throughout — honour the OS setting. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .burst-core, .burst-shard, .check-spin, .term-caret,
  .live-dot, .rail-step.now .rail-node, .stepper-step.now .stepper-node,
  .orbital-sat.now .orbital-dot, .bg-glow,
  .rail-track-node-live, .scan-sweep, .orbit-sat {
    animation: none !important;
  }
  /* The sweep is invisible parked off-screen, so bring it into the bar. */
  .scan-sweep { left: 0; width: 100%; opacity: .35; }
  .reveal { opacity: 1; transform: none; }
  .burst-shard { opacity: 0; }
  .orbital-value { transition: none; }
}