/* ============================================================================
   STARFALL TERMINAL — terminal-pro.css
   ----------------------------------------------------------------------------
   Layer 2 of the trading UI. Loaded *after* terminal.css, so everything here
   is a deliberate override of that sheet plus the components the newer UI
   layer (term-ui.js) expects:

   01. Hero balance        — kills the empty pocket under the chart
   02. Tape                — right→left, seamless, speed adapts to width
   03. Chart toolbar       — indicator pills + expand button
   04. Fullscreen chart    — the big-chart overlay
   05. Desk feed           — the hero signal column
   06. Feed badges         — LIVE / SIM tags + header chip modes
   07. Responsive          — 320px Android → 3440px ultrawide
   08. Motion guards
   ========================================================================== */

/* ==========================================================================
   01. HERO BALANCE
   --------------------------------------------------------------------------
   The terminal column is tall (order book + time & sales), so the copy column
   used to float in the middle with dead space above and below. Stretch both
   columns, let the copy own the full height, and let the desk feed soak up
   whatever is left over.
   ========================================================================== */
.hero { align-items: stretch; }

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
}

/* --- order book depth bars -------------------------------------------
   `.brow span:first-child` (0,2,1) in terminal.css out-specifies
   `.brow__fill` (0,1,0), so the depth bar was left in grid flow: it created a
   second grid row and doubled every level, which is what made the order book
   670px tall and dragged the whole hero down with it. Same specificity here,
   later in the cascade, so the bar goes back to being a painted overlay. */
.brow span.brow__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  grid-row: 1 / -1;
  pointer-events: none;
}
.brow { row-gap: 0; }

.hero__feed {
  margin-top: 26px;
  width: 100%;
  min-height: 132px;
  /* grows into whatever height the copy column has left, so the column reads
     as one block instead of leaving a hole under the tags */
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#heroFeed { flex: 1 1 auto; min-height: 0; overflow: hidden; }

/* the terminal fills its column, and the chart takes every spare pixel so the
   main pane never ends in a blank pocket above the footer strip */
/* Both hero columns stretch to the taller of the two, and the terminal's own
   column flex lets the chart absorb whatever is left — so neither column can
   ever end in a blank pocket. */
.hero__stage { display: flex; }
.term {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.term__body { align-items: stretch; flex: 1 1 auto; }

.term__main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.chartbox {
  flex: 1 1 auto;
  height: auto;
  min-height: 240px;
}

.term__legend { margin-top: auto; }

/* A canvas carries its bitmap size as its intrinsic size, and this one is
   sized from its own box — a feedback loop that used to inflate the hero grid
   to ~700px on a 390px phone. Taking it out of flow removes its intrinsic
   contribution entirely, so the column can be as narrow as the viewport. */
.chartbox canvas,
.bigchart__stage canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.hero__stage,
.hero__copy,
.term,
.term__body,
.term__main,
.term__side,
.chartbox,
.bigchart__inner,
.bigchart__stage { min-width: 0; }

/* --- desk feed ------------------------------------------------------- */
.hero__feed {
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(11, 17, 29, 0.62), rgba(6, 9, 16, 0.72));
  overflow: hidden;
}

.hero__feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}

.hero__feed-live {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--up);
  letter-spacing: 0.14em;
}
.hero__feed-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 10px var(--up);
  animation: hfeedPulse 1.9s var(--ease) infinite;
}
@keyframes hfeedPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.7); }
}

.hfeed__row {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border-top: 1px solid var(--line);
  font: 600 12px/1.2 var(--mono);
  letter-spacing: 0.04em;
}
.hfeed__row:first-child { border-top: 0; }
.hfeed__row b { color: var(--ink); }
.hfeed__side {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 20px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
}
.hfeed__side.up { color: var(--up); background: rgba(var(--up-rgb), 0.12); border: 1px solid rgba(var(--up-rgb), 0.28); }
.hfeed__side.down { color: var(--down); background: rgba(var(--down-rgb), 0.12); border: 1px solid rgba(var(--down-rgb), 0.28); }
.hfeed__meta { color: var(--muted); font-size: 11px; }
.hfeed__conf { color: var(--accent); font-size: 11px; font-weight: 700; }

/* ==========================================================================
   03. CHART TOOLBAR
   ========================================================================== */
.term__tools,
.bigchart__tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 0 8px;
}

.tool {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.025);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--faint);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.tool:hover { color: var(--ink-2); border-color: var(--line-2); }
.tool.is-on {
  color: var(--accent);
  border-color: var(--line-gold);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.06);
}
.tool.is-on::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.term__expand {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--muted);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s, transform 0.2s, background 0.2s;
}
.term__expand svg { width: 15px; height: 15px; }
.term__expand:hover {
  color: #0a0d14;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  border-color: transparent;
  transform: translateY(-1px);
}

/* the terminal bar can hold a lot of chrome on a phone: scroll it, never the page */
.term__tabs {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
.term__tabs::-webkit-scrollbar { display: none; }

/* ==========================================================================
   04. FULLSCREEN CHART
   ========================================================================== */
/* the dialog is one full-height grid row: with `auto 1fr` the single child
   landed in the auto row and the chart collapsed to a 20px strip */
.bigchart {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  padding: clamp(10px, 2vw, 28px);
  background: radial-gradient(120% 120% at 50% 0%, rgba(6, 9, 16, 0.97), rgba(2, 3, 7, 0.99));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: bigIn 0.28s var(--ease) both;
}
.bigchart[hidden] { display: none; }
@keyframes bigIn { from { opacity: 0; transform: scale(0.985); } }

.bigchart__inner {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  min-height: 0;
  height: 100%;
  border: 1px solid var(--line-2);
  border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(11, 17, 29, 0.92), rgba(5, 7, 13, 0.96));
  box-shadow: var(--shadow-2), 0 0 120px -60px rgba(var(--accent-rgb), 0.9);
  overflow: hidden;
}

.bigchart__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 18px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.35);
}
.bigchart__title {
  font: 700 14px/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink);
}
.bigchart__px {
  font: 800 22px/1 var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink);
}
.bigchart__px.up { color: var(--up); }
.bigchart__px.down { color: var(--down); }
.bigchart__controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: auto;
}
.bigchart__tabs,
.bigchart__tf {
  display: flex;
  gap: 5px;
  padding: 3px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.bigchart__tabs .tool,
.bigchart__tf .tool { height: 24px; border: 0; background: transparent; }
.bigchart__tools { padding: 8px 18px 0; }

.bigchart__stage {
  position: relative;
  min-height: 0;
  padding: 10px 18px;
}
.bigchart__stage canvas {
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.bigchart__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--faint);
}
.bigchart__foot span { display: inline-flex; gap: 8px; }
.bigchart__foot b { color: var(--ink-2); }

/* ==========================================================================
   05. FEED BADGES + CHIP MODES
   ========================================================================== */
.feedtag {
  display: inline-flex;
  align-items: center;
  height: 16px;
  margin-left: 7px;
  padding: 0 6px;
  border-radius: 4px;
  border: 1px solid var(--line-2);
  font: 700 8.5px/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.12em;
  color: var(--faint);
  vertical-align: middle;
}
.feedtag--live {
  color: var(--up);
  border-color: rgba(var(--up-rgb), 0.35);
  background: rgba(var(--up-rgb), 0.1);
}

.chip[data-mode='live'] { border-color: rgba(var(--up-rgb), 0.34); color: var(--up); }
.chip[data-mode='prices'] { border-color: rgba(var(--accent-rgb), 0.34); color: var(--accent); }
.chip[data-mode='connecting'] { border-color: var(--line-2); color: var(--ink-2); }
.chip[data-mode='connecting'] i { animation: hfeedPulse 1.2s var(--ease) infinite; }
.chip[data-mode='demo'],
.chip--demo {
  border-color: rgba(var(--down-rgb), 0.3);
  color: #ffb3be;
}
.chip[data-mode='demo'] i,
.chip--demo i { background: var(--down); box-shadow: 0 0 10px var(--down); }

/* the bar-close countdown is a clock: keep it monospaced and steady */
#candleTimer { font-variant-numeric: tabular-nums; color: var(--accent); }

/* ==========================================================================
   05b. CHART LOADING STATE + PERFORMANCE DETAILS
   --------------------------------------------------------------------------
   While an exchange-fed instrument has no downloaded history, the chart shows
   this instead of a simulated candle series. Skeleton bars plus a travelling
   highlight — no fake prices, ever.
   ========================================================================== */
.chart-load {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: linear-gradient(180deg, rgba(7, 10, 18, 0.86), rgba(4, 6, 12, 0.94));
  overflow: hidden;
}
.chart-load.is-on { display: flex; }

.chart-load__bars {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 84px;
}
.chart-load__bars i {
  width: 9px;
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.75), rgba(var(--accent-rgb), 0.12));
  animation: clBar 1.15s var(--ease-2) infinite;
  transform-origin: bottom center;
}
.chart-load__bars i:nth-child(1)  { height: 34%; animation-delay: 0s; }
.chart-load__bars i:nth-child(2)  { height: 62%; animation-delay: 0.06s; }
.chart-load__bars i:nth-child(3)  { height: 45%; animation-delay: 0.12s; }
.chart-load__bars i:nth-child(4)  { height: 78%; animation-delay: 0.18s; }
.chart-load__bars i:nth-child(5)  { height: 52%; animation-delay: 0.24s; }
.chart-load__bars i:nth-child(6)  { height: 90%; animation-delay: 0.3s; }
.chart-load__bars i:nth-child(7)  { height: 64%; animation-delay: 0.36s; }
.chart-load__bars i:nth-child(8)  { height: 82%; animation-delay: 0.42s; }
.chart-load__bars i:nth-child(9)  { height: 48%; animation-delay: 0.48s; }
.chart-load__bars i:nth-child(10) { height: 70%; animation-delay: 0.54s; }
.chart-load__bars i:nth-child(11) { height: 40%; animation-delay: 0.6s; }
.chart-load__bars i:nth-child(12) { height: 58%; animation-delay: 0.66s; }
@keyframes clBar {
  0%, 100% { transform: scaleY(0.55); opacity: 0.45; }
  50%      { transform: scaleY(1); opacity: 1; }
}

.chart-load__txt {
  text-align: center;
  font-family: var(--mono);
}
.chart-load__txt b {
  display: block;
  font: 700 12px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
}
.chart-load__txt span {
  display: block;
  margin-top: 6px;
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* a highlight sweeps across the placeholder so it reads as "fetching" */
.chart-load::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.05) 50%, transparent 65%);
  animation: clSweep 2.2s linear infinite;
  pointer-events: none;
}
@keyframes clSweep {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

/* --- extra performance detail ---------------------------------------- */
.kpi { display: flex; flex-direction: column; }
.kpi__spark {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 12px;
  opacity: 0.85;
}

.panel__note {
  margin: 12px 2px 0;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--muted);
}

.statrow {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 14px;
  border-top: 1px solid var(--line);
}
.statrow > div {
  padding: 10px 8px 2px;
  text-align: center;
}
.statrow span {
  display: block;
  font: 600 10px/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--faint);
}
.statrow b {
  display: block;
  margin-top: 6px;
  font: 700 15px/1 var(--mono);
  color: var(--ink);
}

.statlist--two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
}
.statlist--two div { padding: 9px 10px; }

/* ==========================================================================
   06. ULTRAWIDE — use the whole panel
   ========================================================================== */
@media (min-width: 1600px) {
  :root { --maxw: 1480px; }
}
@media (min-width: 2000px) {
  :root { --maxw: 1720px; }
  .hero { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 52px; }
  .term__body { grid-template-columns: minmax(0, 1fr) 250px; }
  /* A 2320px screenshot is a poster, not a screenshot: an image that keeps its
     aspect ratio while the page grows turns into a wall at 2560px+ (the
     gallery tiles went 360×253 → 570×398, and the AI shot 794×548 → 1310×819).
     So the pictures stop growing and the extra width becomes more of them /
     a wider crop instead — the tile scale stays the one it was designed at. */
  .gal { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .ai__shot img { aspect-ratio: 21 / 9; max-height: 460px; }
  .gal__item > img { max-height: 320px; }
  .gal__item--wide > img { max-height: 360px; }
}
@media (min-width: 2560px) {
  :root { --maxw: 2040px; }
  body { font-size: 17px; }
  .term__body { grid-template-columns: minmax(0, 1fr) 290px; }
  .hero__title { letter-spacing: -0.015em; }
}
@media (min-width: 3200px) {
  :root { --maxw: 2320px; }
  .gal { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* ==========================================================================
   07. RESPONSIVE
   ========================================================================== */

/* --- laptops: keep hero content above the fold ------------------------ */
@media (min-width: 1241px) and (max-height: 960px) {
  .hero { padding-top: 54px; }
  .chartbox { min-height: 220px; }
}

/* --- tablet landscape / small laptop ---------------------------------- */
@media (max-width: 1240px) {
  .hero { gap: 40px; }
  .term__body { grid-template-columns: minmax(0, 1fr) 196px; }
  .bigchart { padding: 12px; }
}

/* --- tablet portrait -------------------------------------------------- */
@media (max-width: 1040px) {
  .hero { padding-top: 40px; gap: 34px; }
  .chartbox { min-height: 300px; }
  .term__side { border-left: 1px solid var(--line); }
  .bigchart__head { gap: 10px 14px; }
  .bigchart__px { font-size: 19px; }
}

/* --- phones ----------------------------------------------------------- */
@media (max-width: 860px) {
  .chartbox { height: auto; min-height: 230px; }
  .term__tools { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 10px; scrollbar-width: none; }
  .term__tools::-webkit-scrollbar { display: none; }
  .term__main { padding: 12px 12px 4px; }
  .hero__feed { margin-top: 20px; }
  .hfeed__row { grid-template-columns: 50px minmax(0, 1fr) auto auto; gap: 10px; }

  .bigchart { padding: 8px; }
  .bigchart__inner { border-radius: var(--r); }
  .bigchart__head { padding: 11px 13px; }
  .bigchart__px { font-size: 17px; }
  .bigchart__tools,
  .bigchart__stage,
  .bigchart__foot { padding-inline: 13px; }
  .bigchart__stage { padding-block: 6px; }
  .bigchart__foot { gap: 8px 16px; font-size: 10px; }
}

@media (max-width: 640px) {
  .hero__title { letter-spacing: -0.025em; }
  .bigchart__controls { width: 100%; margin-left: 0; }
  .bigchart__tabs,
  .bigchart__tf { flex: 1 1 auto; overflow-x: auto; scrollbar-width: none; }
  .bigchart__tabs::-webkit-scrollbar,
  .bigchart__tf::-webkit-scrollbar { display: none; }
  .bigchart__px { font-size: 16px; }
}

/* --- small phones (Galaxy A-series, iPhone SE) ------------------------ */
@media (max-width: 560px) {
  .hero__title { font-size: clamp(2.05rem, 9.6vw, 2.7rem); }
  .hero__title .thin { letter-spacing: 0.2em; }
  .hero__lead { font-size: 0.97rem; }
  .hero__feed { display: none; }        /* the terminal already streams this */
  .hero__kpis { gap: 0; }
  .chartbox { min-height: 200px; }
  .term__body { grid-template-columns: 1fr; }
  .term__side { display: block; }
  .book,
  .sales { border-left: 0; }
  .term__foot { flex-wrap: wrap; gap: 8px 14px; }
  .term__stat { flex: 1 1 40%; }
  .bigchart__foot { display: none; }
}

/* --- the smallest Android widths still in use ------------------------- */
@media (max-width: 380px) {
  :root { --r: 13px; --r-lg: 17px; }
  .wrap,
  .sec,
  .divider,
  .cta,
  .foot__inner,
  .foot__barbox,
  .foot__legal,
  .hero { width: min(100% - 20px, var(--maxw)); }
  .hero__title { font-size: clamp(1.85rem, 9vw, 2.2rem); }
  .hero__cta { gap: 9px; }
  .btn--lg { height: 45px; font-size: 0.82rem; }
  .term { border-radius: var(--r); }
  .term__bar { padding: 9px 10px; gap: 9px; }
  .term__id { display: none; }
  .quote__px { font-size: 1.35rem; }
  .chartbox { min-height: 180px; }
  .tool { height: 24px; padding: 0 8px; font-size: 9px; }
  .bigchart { padding: 5px; }
  .bigchart__head { padding: 9px 10px; }
  .bigchart__title { font-size: 12px; }
  .bigchart__px { font-size: 15px; }
  .bigchart__tools,
  .bigchart__stage { padding-inline: 10px; }
}

/* --- landscape phones: vertical budget is the scarce resource --------- */
@media (max-height: 520px) and (max-width: 1040px) {
  .chartbox { min-height: 170px; }
  .hero { padding-top: 26px; }
  .bigchart__foot { display: none; }
}

/* ==========================================================================
   08. MOTION GUARDS
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hfeed__row,
  .tool,
  .term__expand { transition: none !important; }
  .chart-load__bars i,
  .chart-load::after { animation: none !important; }
  .chart-load__bars i { transform: none; opacity: 0.7; }
}

@media (max-width: 560px) {
  .statlist--two { grid-template-columns: 1fr; }
  .kpi__spark { height: 28px; }
}

/* Lite mode (weak devices): drop the pulse */
body.is-lite .hero__feed-live i { animation: none; }

/* Print: the terminal is decoration */
@media print {
  .bigchart,
  .term__tools { display: none !important; }
}

/* the lab link sits in the same row as the section anchors but leaves the
   page, so it is marked apart from them instead of pretending to be a section */
.nav__link--lab {
  color: var(--accent);
  border-bottom: 1px dotted rgba(var(--accent-rgb), 0.5);
  padding-bottom: 2px;
}
.nav__link--lab:hover { color: var(--accent-2); }

/* ==========================================================================
   08b. MOBILE HEADER FIT
   --------------------------------------------------------------------------
   On a phone the bar held the wordmark, the feed chip, a ghost button, the
   join button and the nav burger side by side, so the last two were pushed
   past the right edge (the header clips them, which is why the page report
   still said "no overflow" while the burger was unreachable).
   ========================================================================== */
@media (max-width: 860px) {
  .head__bar { gap: 10px; }
  .head__actions { gap: 8px; }
  .head__actions .btn--ghost { display: none !important; }
}

@media (max-width: 620px) {
  .brand__text b { font-size: 15px; letter-spacing: 0.04em; }
  .brand__text em { font-size: 9px; letter-spacing: 0.14em; }
  .chip { height: 30px; }
  .chip--live { padding: 0 10px; }
  .head__actions .btn--gold {
    height: 34px;
    padding: 0 11px;
    font-size: 10.5px;
    letter-spacing: 0.1em;
  }
  .burger { width: 38px; height: 38px; }
}

@media (max-width: 460px) {
  /* the mark carries the brand at this size — the wordmark is the least
     useful thing in a bar that also has to fit a join button and a menu */
  .brand__text { display: none; }
}

/* ==========================================================================
   09. PERFORMANCE HEADLINE (perf hero)
   --------------------------------------------------------------------------
   The record a member actually looks at: one headline figure on the left, the
   supporting ratios as meters on the right, and a 52-week ribbon underneath
   derived from the same equity curve the chart draws.
   ========================================================================== */
.phero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 18px 26px;
  padding: 22px 22px 20px;
  margin: 22px 0 18px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 150% at 0% 0%, rgba(var(--accent-rgb), 0.10), transparent 55%),
    radial-gradient(90% 120% at 100% 100%, rgba(34, 211, 165, 0.07), transparent 60%),
    linear-gradient(180deg, rgba(12, 18, 30, 0.66), rgba(6, 9, 16, 0.78));
  box-shadow: var(--shadow-2);
  overflow: hidden;
}

/* a single travelling sheen along the top edge, so the block reads as live */
.phero::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.85), transparent);
  opacity: 0.6;
  animation: pheroSheen 6.5s linear infinite;
  pointer-events: none;
}
@keyframes pheroSheen {
  0% { transform: translateX(-45%); }
  100% { transform: translateX(45%); }
}

.phero__main {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.phero__label {
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
}
.phero__big {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(2.6rem, 6.4vw, 4.5rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.phero__big.up {
  color: var(--up);
  text-shadow: 0 0 34px rgba(34, 211, 165, 0.35);
}
.phero__delta {
  font: 600 12px/1.5 var(--mono);
  color: var(--muted);
}
.phero__delta em {
  font-style: normal;
  font-weight: 700;
  margin-right: 6px;
}
.phero__delta em.up { color: var(--up); }
.phero__spark {
  width: 100%;
  height: 58px;
  margin-top: 4px;
}
.phero__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.phero__tags span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
  font: 600 10.5px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--ink-2);
}
.phero__tags i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--muted);
}
.phero__tags i.up {
  background: var(--up);
  box-shadow: 0 0 10px rgba(var(--up-rgb), 0.85);
}

/* --- meters ----------------------------------------------------------- */
.phero__meters {
  display: grid;
  gap: 11px;
  min-width: 0;
  align-content: start;
}
.meter { display: grid; gap: 5px; min-width: 0; }
.meter__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.meter__top span {
  font: 600 11.5px/1.2 var(--ui);
  color: var(--ink-2);
}
.meter__val {
  font: 800 13.5px/1 var(--mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.meter__val.up { color: var(--up); }
.meter__bar {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.meter__bar i {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.9), var(--accent-2));
  box-shadow: 0 0 14px rgba(var(--accent-rgb), 0.55);
  transition: width 1.1s var(--ease);
}
.phero.is-in .meter__bar i { width: var(--w); }
.meter__bar--zero i { background: rgba(255, 255, 255, 0.25); box-shadow: none; }
.meter__note {
  font: 500 10px/1.3 var(--mono);
  color: var(--faint);
}

/* --- week ribbon ------------------------------------------------------ */
.phero__ribbon {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
  margin-top: 2px;
}
.phero__ribbon-label {
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--faint);
}
.ribbon {
  display: grid;
  grid-template-columns: repeat(52, minmax(0, 1fr));
  gap: 3px;
  min-height: 26px;
}
.ribbon i {
  display: block;
  border-radius: 3px;
  background: rgba(34, 211, 165, var(--a, 0.5));
  transform: scaleY(0.35);
  transform-origin: bottom;
  opacity: 0;
  transition: transform 0.5s var(--ease), opacity 0.5s var(--ease);
}
.phero.is-in .ribbon i {
  transform: none;
  opacity: 1;
  transition-delay: calc(var(--i, 0) * 9ms);
}

@media (max-width: 1040px) {
  .phero { grid-template-columns: 1fr; }
  .phero__meters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ribbon { grid-template-columns: repeat(26, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
  .phero { padding: 18px 15px 16px; border-radius: var(--r-lg); }
  .phero__meters { grid-template-columns: 1fr; gap: 10px; }
  .phero__spark { height: 44px; }
  .phero__big { font-size: clamp(2.2rem, 13vw, 3rem); }
  .ribbon { grid-template-columns: repeat(18, minmax(0, 1fr)); gap: 2px; }
  .phero__tags span { font-size: 10px; padding: 5px 9px; }
}

@media (prefers-reduced-motion: reduce) {
  .phero::after { animation: none; opacity: 0.25; }
  .phero .meter__bar i,
  .phero.is-in .ribbon i { transition: none; }
  .phero.is-in .meter__bar i { width: var(--w); }
}

/* ==========================================================================
   10. AI TRADE DESK
   --------------------------------------------------------------------------
   Replaces the old market table section: a live gold chart on the left, the
   pipeline and the honesty notes on the right, and one loud way into the AI
   trade page.
   ========================================================================== */
.sec--ai { position: relative; }
.sec--ai::before {
  content: '';
  position: absolute;
  inset: -40px -10% auto -10%;
  height: 320px;
  background: radial-gradient(60% 100% at 50% 0%, rgba(var(--accent-rgb), 0.07), transparent 70%);
  pointer-events: none;
}

.ai {
  display: grid;
  grid-template-columns: minmax(0, 1.32fr) minmax(0, 1fr);
  gap: 18px;
  /* stretch, so the stage is exactly as tall as the column of cards beside it:
     the chart absorbs the difference instead of leaving a hole under it */
  align-items: stretch;
}

/* --- stage ------------------------------------------------------------ */
.ai__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(120% 90% at 0% 0%, rgba(var(--accent-rgb), 0.09), transparent 60%),
    linear-gradient(180deg, rgba(12, 18, 30, 0.66), rgba(6, 9, 16, 0.78));
  box-shadow: var(--shadow-2);
  overflow: hidden;
}
.ai__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.ai__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
  font: 700 9.5px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--accent);
}
.ai__tag i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--up);
  box-shadow: 0 0 10px rgba(var(--up-rgb), 0.9);
  animation: aiPulse 1.9s ease-in-out infinite;
}
@keyframes aiPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.72); }
}
.ai__pair {
  font: 700 11px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--ink-2);
}
.ai__pair em { font-style: normal; color: var(--faint); font-weight: 600; }

/* --- gold quote ------------------------------------------------------- */
.ai__quote {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  gap: 6px 14px;
}
.ai__quote > b {
  font-family: var(--display);
  font-weight: 900;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.ai__chg {
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
  font: 700 11px/1 var(--mono);
  color: var(--muted);
}
.ai__chg.up { color: var(--up); border-color: rgba(var(--up-rgb), 0.35); background: rgba(var(--up-rgb), 0.09); }
.ai__chg.down { color: var(--down); border-color: rgba(var(--down-rgb), 0.35); background: rgba(var(--down-rgb), 0.09); }

.ai__tape {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin-top: 4px;
  list-style: none;
}
.ai__tape li { display: flex; flex-direction: column; gap: 5px; }
.ai__tape span {
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.16em;
  color: var(--faint);
}
.ai__tape b {
  font: 700 12.5px/1 var(--mono);
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.ai__stage .chartbox2 {
  /* the chart is what grows when the stage has room to fill */
  flex: 1 1 auto;
  min-height: 240px;
}

/* --- pipeline --------------------------------------------------------- */
.ai__pipeline { display: grid; gap: 8px; }
.ai__step {
  position: relative;
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 13px;
  border-radius: var(--r);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.28);
  overflow: hidden;
}
/* a light pulse travelling the pipeline, one step after another */
.ai__step::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.14), transparent);
  animation: aiFlow 4.6s linear infinite;
  pointer-events: none;
}
.ai__step:nth-child(2)::after { animation-delay: 1.15s; }
.ai__step:nth-child(3)::after { animation-delay: 2.3s; }
.ai__step:nth-child(4)::after { animation-delay: 3.45s; }
@keyframes aiFlow {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(320%); }
}
.ai__step-n {
  font: 800 10.5px/1 var(--mono);
  letter-spacing: 0.1em;
  color: var(--accent);
}
.ai__step-t { font: 600 12.5px/1.35 var(--ui); color: var(--ink-2); }
.ai__step-v {
  font: 700 10.5px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.ai__cta { margin-top: 2px; }
.ai__note {
  margin: 0;
  font: 600 10.5px/1.6 var(--mono);
  color: var(--faint);
}

/* --- side cards ------------------------------------------------------- */
.ai__side { display: grid; gap: 14px; align-content: start; }
.ai__card {
  display: grid;
  gap: 9px;
  padding: 18px;
  border-radius: var(--r-lg);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(12, 18, 30, 0.62), rgba(7, 10, 18, 0.74));
  transition: border-color 0.35s, transform 0.35s var(--ease);
}
.ai__card:hover { border-color: var(--line-gold); transform: translateY(-3px); }
.ai__ico {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--line-gold);
  background: rgba(var(--accent-rgb), 0.08);
  color: var(--accent);
}
.ai__ico svg { width: 19px; height: 19px; }
.ai__card b { font-family: var(--display); font-size: 16px; letter-spacing: -0.01em; }
.ai__card p { margin: 0; font-size: 13px; line-height: 1.62; color: var(--muted); }
.ai__disclaimer {
  margin: 2px 0 0;
  padding: 14px 16px;
  border-radius: var(--r);
  border: 1px dashed var(--line-2);
  font: 600 10.5px/1.7 var(--mono);
  color: var(--faint);
}

/* ==========================================================================
   11. SECTION RAIL
   ========================================================================== */
.rail {
  position: fixed;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 45;
  display: none;
  flex-direction: column;
  gap: 11px;
}
@media (min-width: 1500px) {
  .rail { display: flex; }
}
.rail a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}
.rail i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  background: transparent;
  transition: background 0.3s, transform 0.3s var(--ease), border-color 0.3s;
}
.rail a:hover i { border-color: var(--accent); }
.rail a.is-on i {
  background: var(--accent);
  border-color: transparent;
  transform: scale(1.3);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.9);
}
.rail__n {
  width: 16px;
  text-align: right;
  font: 700 9px/1 var(--mono);
  letter-spacing: 0.04em;
  color: var(--faint);
  transition: color 0.3s;
}
.rail a.is-on .rail__n { color: var(--accent); }
.rail__label {
  position: absolute;
  right: 42px;
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: rgba(6, 9, 16, 0.94);
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 0.25s, transform 0.25s var(--ease);
  pointer-events: none;
}
.rail a:hover .rail__label { opacity: 1; transform: none; }

/* --- hero trade button ------------------------------------------------ */
.hero__trade svg { width: 15px; height: 15px; }

/* --- loading panel in its error state --------------------------------- */
.chart-load.is-err .chart-load__bars i {
  animation: none !important;
  opacity: 0.26;
  height: 22%;
}
.chart-load.is-err .chart-load__txt b { color: var(--down); }

/* ==========================================================================
   12. RESPONSIVE — AI DESK + RAIL
   ========================================================================== */
@media (max-width: 1240px) {
  .ai { grid-template-columns: 1fr; }
  .ai__side { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ai__disclaimer { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .ai__stage { padding: 15px; gap: 12px; border-radius: var(--r-lg); }
  .ai__stage .chartbox2 { min-height: 200px; }
  .ai__step { grid-template-columns: 26px minmax(0, 1fr); }
  .ai__step-v { grid-column: 2; text-align: left; margin-top: 3px; }
  .ai__side { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .ai__quote { grid-template-columns: 1fr; }
  .ai__chg { justify-self: start; }
  .ai__tape { gap: 8px 18px; }
  .ai__stage .chartbox2 { min-height: 170px; }
  .ai__card { padding: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .ai__tag i,
  .ai__step::after { animation: none !important; }
  .ai__step::after { opacity: 0.2; }
}

/* ==========================================================================
   13. TERMS & SERVICES
   --------------------------------------------------------------------------
   Thirty clauses is a lot of text, so the layout does the work of making it
   navigable: a contents rail on the left, one column of clauses on the right,
   a hairline rule between clauses so the eye keeps its place, and the clause
   number hung in the margin in mono. Nothing is collapsed: a term that has to
   be clicked open is a term nobody reads.
   ========================================================================== */
.sec--terms {
  padding-top: 74px;
  /* the desk header is sticky, so anything jumped to by id has to reserve
     room for it or the first line of the clause lands underneath the bar */
  scroll-margin-top: 96px;
  /* The terms are the one section that is meant to be read line by line, so it
     runs wider than every other section on the page — 140px of extra measure,
     which on a wide screen the two-column layout spends on the clause column
     rather than on empty gutter. */
  width: min(100% - 40px, calc(var(--maxw) + 140px));
}
.sec--terms .sec__head { max-width: 96ch; }

.terms {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

.terms__idx {
  position: sticky;
  top: 96px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.005));
}
.terms__idx > b {
  display: block;
  margin-bottom: 12px;
  font: 700 10px/1 var(--mono);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}
.terms__idx ol {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: tcl;
}
.terms__idx li { min-width: 0; counter-increment: tcl; }
.terms__idx a {
  display: block;
  padding: 4px 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: var(--muted);
  border-bottom: 1px dotted transparent;
  transition: color 0.22s, border-color 0.22s;
}
.terms__idx a::before {
  content: counter(tcl, decimal-leading-zero) ' ';
  font: 700 10px/1 var(--mono);
  color: var(--faint);
  letter-spacing: 0.04em;
}
.terms__idx a:hover { color: var(--ink); border-bottom-color: var(--line-gold); }
.terms__idxnote {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
  font: 600 10px/1.6 var(--mono);
  letter-spacing: 0.03em;
  color: var(--faint);
}

.terms__items { min-width: 0; }
.terms__item {
  position: relative;
  padding: 0 0 26px 44px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 96px;
}
.terms__item:last-child { border-bottom: 0; margin-bottom: 0; }
.terms__item h3 {
  position: relative;
  margin: 0 0 13px;
  font-family: var(--display);
  font-size: 1.06rem;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.terms__item h3 em {
  position: absolute;
  left: -44px;
  top: 1px;
  font: 700 11px/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.terms__item p {
  margin: 0 0 13px;
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.78;
  max-width: 108ch;
}
.terms__item p:last-child { margin-bottom: 0; }
.terms__item p b { color: var(--ink-2); }
.terms__item ul {
  display: grid;
  gap: 9px;
  margin: 0 0 14px;
  padding: 14px 16px;
  list-style: none;
  border: 1px solid var(--line);
  border-left: 2px solid var(--line-gold);
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.26);
}
.terms__item ul li {
  position: relative;
  padding-left: 18px;
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--muted);
}
.terms__item ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border: 1px solid var(--line-gold);
  border-radius: 2px;
}
.terms__ack {
  padding: 14px 16px;
  border: 1px solid var(--line-gold);
  border-radius: 10px;
  background: rgba(var(--accent-rgb), 0.06);
  font: 600 11px/1.7 var(--mono);
  letter-spacing: 0.03em;
  color: var(--ink-2);
}
.terms__ack b { color: var(--accent); }
.terms__back {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
  padding-top: 22px;
  border-top: 1px dashed var(--line);
}

@media (max-width: 1080px) {
  .terms { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .terms__idx { position: static; }
  .terms__idx ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .terms__idx ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms__item { padding-left: 30px; }
  .terms__item h3 em { left: -30px; }
}

/* ==========================================================================
   14. TERMS TEASER
   --------------------------------------------------------------------------
   The thirty clauses moved to terms.html, so the desk no longer ends in a wall
   of legal text: this section is a door. It keeps the #terms id, the revision
   stamp and the section-rail label, so every link and anchor that pointed at
   the old section still lands somewhere that explains itself — and the clause
   layout, the contents rail and the print rules above are still used, now by
   the page that actually holds the document.
   ========================================================================== */
/* The door to the terms is a widening, not a paragraph: the copy inside it is
   the longest run of prose on the landing page and it was set in a 58-character
   column inside a box barely wider than that, so the card read as two narrow
   strips with a third of the width empty beside it. The card takes the width
   the section has, and the prose takes the width the card has. */
.legalcta { max-width: min(1420px, 100%); }

.legalcta__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.75fr);
  gap: 26px 56px;
  padding: clamp(24px, 3vw, 46px);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  background:
    radial-gradient(95% 130% at 106% -25%, rgba(var(--accent-rgb), 0.15), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.042), rgba(255, 255, 255, 0.006));
  box-shadow: var(--shadow-2);
}
.legalcta__card::after {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), 0.65), transparent);
}
/* a section mark watermark: this card is a door to a document, and it reads as
   one without a single word being added to the copy */
.legalcta__card::before {
  content: '\00A7';
  position: absolute;
  right: -0.06em;
  bottom: -0.34em;
  z-index: 0;
  font: 700 clamp(9rem, 17vw, 15rem) / 1 var(--display);
  color: rgba(var(--accent-rgb), 0.055);
  pointer-events: none;
  user-select: none;
}
.legalcta__head,
.legalcta__side { position: relative; z-index: 1; }

/* --- the revision seal ------------------------------------------------- */
.legalcta__seal {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.008));
}
.legalcta__sealico {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 12px;
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.1);
  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.28);
}
.legalcta__sealico svg { width: 19px; height: 19px; }
.legalcta__sealtxt { display: grid; gap: 3px; min-width: 0; }
.legalcta__sealtxt b {
  font-family: var(--display);
  font-size: 14px;
  letter-spacing: 0.005em;
}
.legalcta__sealtxt em {
  font: 700 9.5px/1.4 var(--mono);
  font-style: normal;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--faint);
}

.legalcta__head { grid-column: 1; grid-row: 1; align-self: start; }
.legalcta__head .sec__sub { max-width: 84ch; font-size: 1.02rem; line-height: 1.75; }

/* the whole acting column — button, shortcuts, revision note — stacks in the
   second grid cell, so the button keeps its own height instead of being
   stretched to the height of the copy beside it */
.legalcta__side {
  grid-column: 2;
  grid-row: 1;
  display: grid;
  align-content: start;
  gap: 15px;
}

/* --- the button ------------------------------------------------------- */
.legalcta__btn {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 18px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  overflow: hidden;
  color: #1c1200;
  background: linear-gradient(135deg, #ffd766, var(--accent) 44%, var(--accent-2));
  box-shadow: 0 22px 50px -24px rgba(var(--accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, 0.62);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.legalcta__btn::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 46%;
  left: -60%;
  background: linear-gradient(110deg, transparent, rgba(255, 255, 255, 0.6), transparent);
  transform: skewX(-18deg);
  transition: left 0.75s var(--ease);
}
.legalcta__btn:hover { transform: translateY(-3px); box-shadow: 0 30px 60px -26px rgba(var(--accent-rgb), 1), inset 0 1px 0 rgba(255, 255, 255, 0.7); }
.legalcta__btn:hover::after { left: 110%; }
.legalcta__btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.legalcta__ico {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 13px;
  background: rgba(18, 13, 2, 0.16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.legalcta__ico svg { width: 21px; height: 21px; }
.legalcta__txt { display: grid; gap: 3px; min-width: 0; }
.legalcta__txt b {
  font-family: var(--display);
  font-size: 15px;
  letter-spacing: 0.005em;
  line-height: 1.2;
}
.legalcta__txt em {
  font: 700 9.5px/1.4 var(--mono);
  font-style: normal;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(28, 18, 0, 0.68);
}
.legalcta__arrow { width: 18px; height: 18px; margin-left: auto; flex-shrink: 0; transition: transform 0.3s var(--ease); }
.legalcta__btn:hover .legalcta__arrow { transform: translateX(4px); }

/* --- the clauses you can jump straight to ----------------------------- */
.legalcta__jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.legalcta__jump a {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.3);
  font: 600 11px/1 var(--mono);
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.22s, border-color 0.22s, background 0.22s;
}
.legalcta__jump a b {
  font: inherit;
  margin-right: 7px;
  color: var(--accent);
  opacity: 0.85;
}
.legalcta__jump a::after { content: ' ↗'; color: var(--faint); }
.legalcta__jump a:hover { color: var(--ink); border-color: var(--line-gold); background: rgba(var(--accent-rgb), 0.07); }

.legalcta__foot {
  font: 600 10px/1.7 var(--mono);
  letter-spacing: 0.06em;
  color: var(--faint);
}
.legalcta__foot span { color: var(--accent); }

@media (max-width: 1080px) {
  .legalcta__card {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .legalcta__head,
  .legalcta__side { grid-column: 1; grid-row: auto; }
  .legalcta__head .sec__sub { max-width: none; }
}
@media (max-width: 520px) {
  .legalcta__card { border-radius: var(--r-lg); }
  .legalcta__btn { padding: 14px 15px; gap: 11px; }
  .legalcta__ico { width: 36px; height: 36px; border-radius: 11px; }
  .legalcta__ico svg { width: 18px; height: 18px; }
  .legalcta__txt b { font-size: 13.5px; }
  .legalcta__txt em { letter-spacing: 0.08em; }
}

@media (prefers-reduced-motion: reduce) {
  .legalcta__btn,
  .legalcta__btn::after,
  .legalcta__arrow { transition: none; }
  .legalcta__btn:hover { transform: none; }
}