/* CyberRedeem landing (preview at ssltls.gg/new/). The Terminal look as a Persuade page: black
   ground with two tone steps, white Hanken Grotesk, signal yellow only on the next action (buttons,
   the closing field, the replay's tick). No rules, no gradients, no shadows at rest. */

:root {
  --bg: #0b0b0b; --s1: #141414; --s2: #1c1c1c; --s3: #262626;
  --ink: #ffffff; --ink-2: #c9c9c9; --ink-3: #9a9a9a;
  --yellow: #ffd100; --on-yellow: #111111;
  --good: #2dbe6c; --bad: #e5484d;
  --font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --gut: clamp(20px, 3.2vw, 48px);
  --max: 1376px;
  --gap: clamp(112px, 14vw, 200px);
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 18px/1.55 var(--font); font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
::selection { background: var(--yellow); color: var(--on-yellow); }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; flex: none; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 2px; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skiplink { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--yellow); color: var(--on-yellow); padding: 10px 14px; font-weight: 700; text-decoration: none; border-radius: 4px; }
.skiplink:focus { top: 12px; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.muted { color: var(--ink-3); }
.note { color: var(--ink-3); font-size: 15px; line-height: 1.5; max-width: 72ch; }

/* ---------- controls ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 24px; border-radius: 4px;
  background: var(--yellow); color: var(--on-yellow); font-weight: 700; font-size: 18px; text-decoration: none; white-space: nowrap;
  transition: transform 140ms var(--ease), background-color 160ms ease;
}
.btn svg { transition: transform 200ms var(--ease); }
.btn:active { transform: scale(0.97); }
@media (hover: hover) { .btn:hover { background: #ffdb33; } .btn:hover svg { transform: translateX(3px); } }
.btn-sm { height: 40px; padding: 0 16px; font-size: 15px; }
.btn-ink { background: var(--on-yellow); color: var(--yellow); }
@media (hover: hover) { .btn-ink:hover { background: #000; } }
.link { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; text-decoration-color: var(--s3); transition: text-decoration-color 160ms ease; }
@media (hover: hover) { .link:hover { text-decoration-color: var(--yellow); } }

/* ---------- top bar ---------- */
.bar { position: sticky; top: 0; z-index: 20; background: var(--bg); }
.bar-in { display: flex; align-items: center; gap: 28px; height: 72px; }
.lockup {
  display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 4px 0 13px;
  border: 2px solid var(--ink); border-radius: 10px; font-weight: 700; font-size: 17px; letter-spacing: -0.02em; text-decoration: none;
}
.lockup .tk { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); color: var(--bg); }
.bar nav { display: flex; gap: 26px; margin-left: auto; }
.bar nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15.5px; transition: color 150ms ease; }
@media (hover: hover) { .bar nav a:hover { color: var(--ink); } }

/* ---------- hero ---------- */
.hero { padding: clamp(40px, 6vw, 88px) 0 0; }
.hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.hero h1 { font-size: clamp(46px, 7.4vw, 112px); line-height: 0.95; letter-spacing: -0.035em; font-weight: 700; }
.lede { margin-top: 36px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; max-width: 34ch; color: var(--ink); }
.cta { display: flex; align-items: center; gap: 28px; margin-top: 40px; flex-wrap: wrap; }

/* the Friday stream strip (GET /api/site/stream): before = countdown, live = codes so far, after = hidden */
.stream { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: fit-content; max-width: 100%; margin-top: 28px; padding: 11px 16px; border-radius: 6px; background: var(--s1); color: var(--ink-2); font-size: 16px; line-height: 1.4; }
.stream[hidden] { display: none; }
.stream b { color: var(--ink); font-weight: 700; }
.stream .sdot { display: inline-block; width: 9px; height: 9px; margin-right: 10px; vertical-align: 1px; border-radius: 50%; background: var(--ink-3); }
.stream.live .sdot { background: var(--bad); animation: livedot 1.2s ease-in-out infinite alternate; }
.stream .slive { color: var(--ink); font-weight: 700; }
.stream .link { font-size: 15.5px; }
.stream.enter { animation: stripin 220ms var(--ease) both; }
@keyframes livedot { to { opacity: 0.35; } }
@keyframes stripin { from { opacity: 0; transform: translateY(4px); } }

/* the live thing: a redeemed-code field (the logo, made real) replaying real drops */
.replay { margin: clamp(48px, 6vw, 80px) 0 0; max-width: 560px; }
.field {
  display: flex; align-items: center; gap: 16px; height: 76px; padding: 0 10px 0 26px; border-radius: 14px;
  background: var(--s2); position: relative;
}
.field .code { flex: 1; min-width: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: 0.06em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.field .clock { font-size: 18px; color: var(--ink-2); white-space: nowrap; }
.field .clock b { font-weight: 700; color: var(--ink); }
.field .knob { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--s3); color: transparent; transition: background-color 120ms ease-out, color 100ms ease-out, transform 120ms ease-out; }
.field.done .knob { transition: background-color 220ms var(--ease), color 160ms ease, transform 220ms var(--ease); }
.field.done .knob { background: var(--ink); color: var(--bg); transform: scale(1.04); }
.field .code i { font-style: normal; color: var(--ink-3); letter-spacing: 0.02em; }
.field.done .knob svg path { stroke-dasharray: 24; animation: tick 260ms var(--ease) both; }
@keyframes tick { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }
.replay figcaption { margin-top: 14px; font-size: 15.5px; color: var(--ink-2); min-height: 48px; transition: opacity 160ms ease-out; }
.replay figcaption.swap { opacity: 0; transition-duration: 90ms; }
.replay figcaption b { color: var(--ink); font-weight: 700; }

.hero-shot { margin: 0; justify-self: end; width: min(100%, 414px); }
.phone { background: #000; padding: 12px; border-radius: 44px; }
.phone img { border-radius: 32px; width: 100%; }
figure { margin: 0; }
figcaption { font-size: 14.5px; color: var(--ink-3); margin-top: 14px; }
.hero-shot figcaption, .shot figcaption { text-align: center; }

/* ---------- sections ---------- */
section + section { margin-top: var(--gap); }
.sec-h { font-size: clamp(36px, 4.8vw, 72px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; max-width: 16ch; }
.sec-lede { margin-top: 24px; max-width: 54ch; font-size: 20px; color: var(--ink); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: center; }
.split > div > p { margin-top: 24px; max-width: 46ch; font-size: 20px; }
.shot { width: min(100%, 414px); justify-self: center; }

.head2 { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 24px clamp(32px, 5vw, 96px); align-items: end; }
.head2 .sec-lede { margin-top: 0; }
/* proof: figures + the drops table */
.proof .figs { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 4vw, 72px); margin-top: 56px; align-items: end; }
.big { display: block; font-size: clamp(88px, 15vw, 232px); line-height: 0.82; letter-spacing: -0.045em; font-weight: 700; white-space: nowrap; }
.fig-main p { margin-top: 24px; max-width: 30ch; font-size: 18px; color: var(--ink-2); }
.fig-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fig-side > div { background: var(--s1); padding: 24px 24px 22px; border-radius: 6px; }
.fig-side b { display: block; font-size: clamp(34px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.035em; font-weight: 700; white-space: nowrap; }
.fig-side p { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }
.drops { margin-top: 72px; }
.drops h3 { font-size: 24px; letter-spacing: -0.02em; font-weight: 700; margin-bottom: 16px; }
.drops .note { margin-top: 18px; }
.tbl-wrap { overflow-x: auto; background: var(--s1); border-radius: 6px; }
table.tbl { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.tbl th { text-align: left; font-weight: 600; font-size: 14.5px; color: var(--ink-3); padding: 16px 20px 12px; }
.tbl td { padding: 14px 20px; border-top: 1px solid var(--s3); white-space: nowrap; }
.tbl .num { text-align: right; }
.tbl td.code { font-weight: 700; letter-spacing: 0.06em; }
.tbl td.muted { white-space: normal; }
.tbl .claimed { display: inline-flex; align-items: center; gap: 10px; }
.tbl tr.new td { animation: rowfade 400ms ease-out both; }
@keyframes rowfade { from { opacity: 0; } }

/* result squares (shared) */
.sq { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 4px; flex: none; color: #111; }
.sq.ok { background: var(--good); }
.sq.fail { background: var(--bad); }
.sq.skip { border: 2.5px solid var(--ink); color: var(--ink); }
.tbl .sq { width: 22px; height: 22px; }

/* what did you miss? (GET /api/site/drops: 15-minute buckets, last 7 days) */
.ms { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 12px; margin-top: 48px; }
.ms-in, .ms-out { background: var(--s1); border-radius: 6px; padding: 28px; }
.ms-in { display: grid; gap: 26px; align-content: start; }
.ms-row { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 12px; }
.ms-v { float: right; color: var(--ink); font-weight: 700; }
.ms input[type="range"] { width: 100%; height: 32px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.ms select {
  width: 100%; height: 52px; padding: 0 12px; border: 0; border-radius: 4px; background: var(--bg); color: var(--ink);
  font: 600 16px/1 var(--font); cursor: pointer;
}
.ms-out { display: flex; flex-direction: column; gap: 18px; }
.ms-head { font-size: clamp(20px, 1.8vw, 24px); line-height: 1.35; color: var(--ink-2); }
.ms-head b { color: var(--ink); }
.ms-presets { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.ms-chip {
  height: 56px; border: 2px solid var(--s3); border-radius: 6px; background: transparent; color: var(--ink); font: 700 16px/1.15 var(--font); cursor: pointer;
  transition: border-color 150ms ease, transform 120ms var(--ease);
}
.ms-chip small { display: block; font-size: 13px; font-weight: 500; color: var(--ink-3); margin-top: 2px; }
.ms-chip[aria-pressed="true"] { border-color: var(--ink); }
.ms-chip:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .ms-chip:hover { border-color: var(--ink-3); } .ms-chip[aria-pressed="true"]:hover { border-color: var(--ink); } }
.ms-lbl { display: block; font-size: 15px; font-weight: 600; color: var(--ink-3); margin-bottom: 6px; }
.ms-head .ms-big { display: block; font-size: clamp(44px, 5vw, 72px); line-height: 1; letter-spacing: -0.04em; color: var(--ink); margin-bottom: 10px; }
.ms-chart { display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 3px; height: 120px; align-items: end; }
.ms-chart i { display: block; height: 100%; background: var(--s3); border-radius: 2px; transform-origin: bottom; transition: background-color 120ms ease; }
.ms-chart i.away { background: var(--ink); }
.ms-axis { display: flex; justify-content: space-between; color: var(--ink-3); font-size: 13px; margin-top: -10px; }
.ms-out .note { font-size: 14.5px; }

/* how: the clock of one drop */
.track { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.track li { background: var(--s1); border-radius: 6px; padding: 26px 24px 28px; display: flex; flex-direction: column; gap: 10px; min-height: 280px; }
.track .t { font-size: clamp(32px, 3.4vw, 48px); font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.track b { font-size: 20px; font-weight: 700; margin-top: auto; }
.track p { color: var(--ink-2); font-size: 16.5px; }
.track li.hit { background: var(--ink); color: var(--bg); }
.track li.hit p { color: #333; }

/* cloud: drawn architecture (person → server → browsers) */
.diagram { display: grid; gap: 12px; }
.node { background: var(--s1); border-radius: 6px; padding: 20px 22px; display: flex; align-items: center; gap: 14px; }
.node b { font-size: 20px; font-weight: 700; }
.node .lbl { color: var(--ink-3); font-size: 15px; }
.node.person, .node.server { justify-content: space-between; }
.node.server { background: var(--s2); padding: 28px 22px; }
.node.server b { font-size: 26px; }
.accts { display: grid; gap: 12px; padding-left: clamp(24px, 4vw, 56px); }
.node.acc { flex-wrap: wrap; }
.node.acc .lbl { margin-left: auto; }
.facts { margin: 36px 0 0; display: grid; gap: 22px; }
.facts dt { font-weight: 700; font-size: 20px; }
.facts dd { margin: 4px 0 0; color: var(--ink-2); font-size: 17px; max-width: 48ch; }

/* accounts: discount figures */
.split.rev > :first-child { order: 0; }
.disc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; max-width: 560px; }
.disc > div { background: var(--s1); border-radius: 6px; padding: 20px; }
.disc b { display: block; font-size: clamp(28px, 3vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; white-space: nowrap; }
.disc > div:first-child b { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.25; }
.disc span { display: block; margin-top: 8px; color: var(--ink-2); font-size: 15px; }
.accounts .note { margin-top: 22px; }

/* claims legend */
.legend { list-style: none; padding: 0; margin: 40px 0 0; display: grid; gap: 26px; }
.legend li { display: flex; gap: 18px; align-items: flex-start; }
.legend b { font-size: 21px; font-weight: 700; }
.legend p { color: var(--ink-2); font-size: 17px; margin-top: 2px; max-width: 42ch; }

/* companion */
.comp-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: end; }
.comp-head p { font-size: 20px; max-width: 54ch; }
.comp-head p + p { grid-column: 2; margin-top: -8px; font-size: 17px; }
.comp-head .sec-h { grid-row: span 2; }


/* ---------- live demos (the real Mini App and companion, sample data) ---------- */
.screen { position: relative; overflow: hidden; background: #111; }
.phone .screen { border-radius: 32px; aspect-ratio: 390 / 844; }
.screen .poster { width: 100%; height: 100%; object-fit: cover; transition: opacity 200ms ease-out; }
.screen iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; opacity: 0; pointer-events: none; background: #111; transition: opacity 220ms ease-out; }
.demo.live .screen iframe { opacity: 1; pointer-events: auto; }
.demo.shown .screen iframe { opacity: 1; }
.demo.shown .poster { opacity: 0; }
.try { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; padding: 0; background: transparent; cursor: pointer; display: grid; place-items: end center; padding-bottom: 96px; }
.try-l {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--ink); color: var(--bg); font: 700 16px/1 var(--font);
  transition: transform 160ms var(--ease), opacity 160ms ease-out;
}
.try-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
.t-touch { display: none; }
@media (pointer: coarse) { .t-fine { display: none; } .t-touch { display: inline; } }
@media (hover: hover) { .try:hover .try-l { transform: translateY(-2px); } }
.try:active .try-l { transform: scale(0.96); }
.try:focus-visible { outline: none; }
.try:focus-visible .try-l { outline: 3px solid var(--yellow); outline-offset: 3px; }
.demo.used .try-l { opacity: 0; transform: translateY(6px) scale(0.96); pointer-events: none; }
.demo.live .try { display: none; }
.demo.loading .try-dot { animation: blink 0.9s ease-in-out infinite alternate; }
@keyframes blink { to { opacity: 0.3; } }
.demo-foot { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 14px; }
.demo-foot figcaption { margin: 0; }
.done { height: 36px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--s2); color: var(--ink); font: 700 15px/1 var(--font); cursor: pointer; transition: transform 120ms var(--ease); }
.done:active { transform: scale(0.96); }
.browser { background: var(--s2); border-radius: 10px; overflow: hidden; }
.chrome { display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; }
.chrome i { width: 10px; height: 10px; border-radius: 50%; background: var(--s3); }
.chrome span { margin-left: 12px; font-size: 13px; color: var(--ink-3); }
.browser .screen { aspect-ratio: 1440 / 900; }
.browser .try { padding-bottom: 40px; }
.wide { margin-top: 56px; }
.wide .demo-foot { justify-content: flex-start; }
@media (max-width: 899px), (pointer: coarse) { .demo[data-desktop-only] .try { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .screen .poster, .screen iframe, .try-l { transition: none; }
  .demo.loading .try-dot { animation: none; }
}

/* alerts: switches + example messages */
.switches { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 4px; max-width: 420px; }
.switches li { display: flex; align-items: center; justify-content: space-between; gap: 16px; background: var(--s1); padding: 14px 18px; border-radius: 6px; font-weight: 600; }
.sw { position: relative; display: block; width: 58px; height: 30px; border-radius: 15px; border: 2px solid var(--ink-3); flex: none; }
.sw .k { position: absolute; top: 3px; left: 4px; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--ink-3); }
.sw i { display: none; }
.sw.on { border-color: var(--ink); }
.sw.on .k { left: auto; right: 3px; background: var(--ink); border-color: var(--ink); }
.sw.on .k::after { content: ""; position: absolute; left: 5px; top: 2px; width: 5px; height: 9px; border: solid var(--bg); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.sw.on i { display: block; position: absolute; top: 11px; width: 4px; height: 4px; border-radius: 50%; background: var(--ink); }
.sw.on i:nth-child(1) { left: 7px; } .sw.on i:nth-child(2) { left: 14px; } .sw.on i:nth-child(3) { left: 21px; }
.chat { display: grid; gap: 12px; justify-items: start; max-width: 520px; justify-self: end; width: 100%; }
.msg { background: var(--s2); border-radius: 16px 16px 16px 4px; padding: 16px 20px 12px; width: min(100% - 80px, 460px); }
.msg b { font-size: 15px; color: var(--ink-2); }
.msg p { margin-top: 4px; font-size: 17px; line-height: 1.45; }
.msg time { display: block; text-align: right; font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.msg:nth-child(2) { margin-left: clamp(0px, 3vw, 40px); }
.msg:nth-child(3) { margin-left: clamp(0px, 6vw, 80px); }
.msg:nth-child(4) { margin-left: clamp(0px, 3vw, 40px); }
.msg p strong { font-weight: 700; }
.msg .aside { margin-top: 6px; font-size: 15px; font-style: italic; color: var(--ink-3); }
.msg .ln { color: var(--ink-3); margin-right: 6px; }

/* wager: the facts list sits under the copy (shared .facts) */
.wager .facts { margin-top: 32px; }

/* invite: what the balance does */
.uses { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 22px; }
.uses b { font-size: 20px; font-weight: 700; }
.uses p { margin-top: 2px; color: var(--ink-2); font-size: 17px; max-width: 46ch; }
.tag { display: inline-block; margin-left: 8px; padding: 3px 8px; border-radius: 3px; background: var(--s3); color: var(--ink); font-size: 13px; font-weight: 700; line-height: 1.3; vertical-align: 2px; white-space: nowrap; }
.invite .note { margin-top: 24px; }

/* cash-out (featured): the real Mini App, as captured frames, played once in view. CSS holds the
   END frame (no JS, reduced motion); site.js plays the way there with transform/opacity only. */
.cashout .head2 .sec-h { max-width: 14ch; }
.sec-h .tag { font-size: 15px; letter-spacing: 0; vertical-align: 0.6em; margin-left: 6px; }
.co-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 120px); align-items: center; margin-top: 64px; }
.cashfig { width: min(100%, 414px); justify-self: center; }
.co-screen { container-type: inline-size; }
.co-screen img { border-radius: 0; }
.co-l { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.co-scrim { background: rgba(0, 0, 0, 0.6); }
.co-sheet { position: absolute; left: 0; right: 0; top: 13.448%; bottom: 0; overflow: hidden; border-radius: 2.05cqw 2.05cqw 0 0; background: #141414; }
.co-shd { display: block; width: 100%; height: auto; }
.co-bclip { position: absolute; left: 0; right: 0; top: 9.309%; bottom: 0; overflow: hidden; }
.co-body { display: block; width: 100%; height: auto; transform: translateY(-20.097%); }
.co-tap { position: absolute; width: 13cqw; height: 13cqw; margin: -6.5cqw 0 0 -6.5cqw; border-radius: 50%; background: rgba(128, 128, 128, 0.45); border: 2px solid rgba(255, 255, 255, 0.9); opacity: 0; pointer-events: none; }
.co-tap.t1 { left: 50%; top: 45.56%; }
.co-tap.t2 { left: 50%; top: 90.05%; }
.co-banner {
  position: absolute; left: 3cqw; right: 3cqw; top: 2.5cqw; display: flex; gap: 3cqw; align-items: flex-start;
  padding: 3cqw 3.6cqw; border-radius: 4cqw; background: #f4f4f4; color: #111; font-size: 3.3cqw; line-height: 1.35;
}
.co-app { flex: none; display: grid; place-items: center; width: 9cqw; height: 9cqw; border-radius: 50%; background: #111; color: #fff; }
.co-app svg { width: 4.6cqw; height: 4.6cqw; }
.co-bt { display: grid; min-width: 0; }
.co-bt > b { font-weight: 700; }
.co-bt > span:last-child { color: #333; }
.co-bh { display: flex; justify-content: space-between; color: #666; font-size: 3cqw; }
.co-bh b { font-weight: 600; color: #444; }
.cashfig .demo-foot { flex-wrap: wrap; }
.co-replay { height: 36px; padding: 0 16px; border: 0; border-radius: 4px; background: var(--s2); color: var(--ink); font: 700 15px/1 var(--font); cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 200ms ease-out, transform 120ms var(--ease); }
.cashfig.played .co-replay { opacity: 1; pointer-events: auto; }
.co-replay:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) { .co-replay:hover { background: var(--s3); } }
.co-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.co-steps li { display: flex; gap: 18px; align-items: flex-start; background: var(--s1); border-radius: 6px; padding: 22px 24px; }
.co-steps .n { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--ink); font-weight: 700; font-size: 16px; }
.co-steps b { font-size: 20px; font-weight: 700; }
.co-steps p { margin-top: 4px; color: var(--ink-2); font-size: 17px; max-width: 48ch; }

/* prices */
/* price builder: the same line pricing as checkout (@cr/core priceLines) for a new customer */
.builder { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 12px; margin-top: 48px; }
.builder[hidden] { display: none; }
.b-in, .b-out { background: var(--s1); border-radius: 6px; padding: 28px; }
.b-in { display: grid; gap: 26px; align-content: start; }
.b-lbl { display: block; font-size: 15px; font-weight: 600; color: var(--ink-3); margin-bottom: 10px; }
.seg2 { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; background: var(--bg); padding: 4px; border-radius: 6px; }
.seg2 button {
  height: 52px; border: 0; border-radius: 4px; background: transparent; color: var(--ink-2); font: 700 17px/1.1 var(--font); cursor: pointer; padding: 0 8px;
  transition: background-color 150ms ease, color 150ms ease, transform 120ms var(--ease);
}
.seg2 button small { display: block; font-size: 13px; font-weight: 500; color: inherit; opacity: 0.75; margin-top: 3px; }
.seg2 button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.seg2 button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .seg2 button:hover:not([aria-pressed="true"]) { color: var(--ink); background: var(--s2); } }
.b-plans button { height: 62px; }
.b-friend { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.b-friend[hidden] { display: none; }
.b-friend b { display: block; font-size: 18px; }
.b-friend span span { color: var(--ink-2); font-size: 15.5px; }
.b-friend .sw { background: transparent; padding: 0; cursor: pointer; transition: transform 120ms var(--ease); }
.b-friend .sw:active { transform: scale(0.96); }
.b-out { display: flex; flex-direction: column; gap: 16px; }
.b-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.b-lines li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--s3); }
.b-lines li span { color: var(--ink-2); font-size: 16px; }
.b-lines li span em { font-style: normal; color: var(--ink); font-weight: 600; margin-left: 6px; white-space: nowrap; }
.b-lines li b { font-size: 18px; white-space: nowrap; }
.b-lines li s { color: var(--ink-3); font-size: 15px; margin-right: 8px; font-weight: 500; }
.b-total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.b-total span { font-weight: 700; font-size: 18px; }
.b-total b { font-size: clamp(40px, 4.2vw, 56px); line-height: 1; letter-spacing: -0.04em; font-weight: 700; }
.b-sub { color: var(--ink-2); font-size: 16px; margin-top: -8px; text-align: right; }
.b-out .btn { justify-content: center; }
.b-out .note { font-size: 14.5px; }

.prices .tbl-wrap { margin-top: 48px; }
.plans td { font-size: 19px; padding-top: 22px; padding-bottom: 22px; }
.plans td:first-child { font-weight: 700; font-size: 22px; }
.plans .price { font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; letter-spacing: -0.03em; }
.plans .rec { display: inline-block; margin-left: 12px; font-size: 14px; font-weight: 700; color: var(--bg); background: var(--ink); padding: 3px 8px; border-radius: 3px; vertical-align: 3px; letter-spacing: 0; }
.prices .note { margin-top: 18px; }
.plans .len { display: none; font-size: 15px; font-weight: 500; color: var(--ink-2); margin-top: 2px; }

/* faq */
.faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 96px); align-items: start; }
.qs { display: grid; gap: 8px; }
details { background: var(--s1); border-radius: 6px; }
summary { cursor: pointer; list-style: none; padding: 20px 56px 20px 22px; font-size: 19px; font-weight: 700; position: relative; }
summary::-webkit-details-marker { display: none; }
summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 10px; height: 10px; border: solid var(--ink-2); border-width: 0 2px 2px 0; transform: translateY(-70%) rotate(45deg); transition: transform 200ms var(--ease); }
details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
details[open] p { animation: qa 200ms ease-out both; }
@keyframes qa { from { opacity: 0; transform: translateY(-4px); } }
details p { padding: 0 22px 22px; color: var(--ink-2); font-size: 17px; max-width: 66ch; }
@media (hover: hover) { summary:hover { color: var(--yellow); } }

/* close: the one yellow field */
.close { background: var(--yellow); color: var(--on-yellow); padding: clamp(88px, 11vw, 160px) 0; }
.close-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 64px; align-items: end; }
.close h2 { font-size: clamp(48px, 8vw, 128px); line-height: 0.92; letter-spacing: -0.04em; font-weight: 700; grid-row: span 2; }
.close p { font-size: 20px; max-width: 40ch; }
.close .btn { justify-self: start; }
/* desktop only: scan with a phone to open the bot (QR made locally from the Mini App's own encoder) */
.qr-open { grid-column: 2; display: flex; align-items: center; gap: 18px; margin-top: 8px; }
.qr-img { flex: none; width: 116px; height: 116px; padding: 8px; background: #fff; border-radius: 6px; }
.qr-img svg { width: 100%; height: 100%; }
.qr-open figcaption { margin: 0; color: var(--on-yellow); font-size: 15.5px; max-width: 26ch; }
@media (max-width: 899px), (pointer: coarse) { .qr-open { display: none; } }

/* footer: the name returns */
.foot { padding: 72px 0 40px; }
.foot-name { display: inline-flex; align-items: center; gap: 0.12em; font-size: clamp(38px, 10.4vw, 160px); font-weight: 700; letter-spacing: -0.055em; line-height: 1; padding: 0.06em 0.07em 0.1em 0.2em; border: max(3px, 0.035em) solid var(--ink); border-radius: 0.24em; max-width: 100%; }
.foot-name .tk { display: grid; place-items: center; width: 0.78em; height: 0.78em; border-radius: 50%; background: var(--ink); color: var(--bg); flex: none; }
.foot-name .tk svg { width: 0.5em; height: 0.5em; }
.foot-row { display: flex; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; margin-top: 40px; align-items: center; }
.foot nav { display: flex; gap: 24px; flex-wrap: wrap; }
.foot nav a { font-weight: 600; text-decoration: none; color: var(--ink-2); }
@media (hover: hover) { .foot nav a:hover { color: var(--ink); } }
.foot .muted { font-size: 14.5px; max-width: 60ch; }

/* ---------- entrance (only when JS runs; content never stays hidden) ---------- */
.js .rise { opacity: 0; }
.js .rise.in { opacity: 1; transition: opacity 520ms ease-out; transition-delay: var(--d, 0ms); }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .co-row { grid-template-columns: minmax(0, 1fr); margin-top: 48px; }
  .builder { grid-template-columns: minmax(0, 1fr); }
  .ms { grid-template-columns: minmax(0, 1fr); }
  .bar nav { display: none; }
  .bar .btn-sm { margin-left: auto; }
  .hero-in, .split, .comp-head, .faq-in, .close-in, .head2 { grid-template-columns: minmax(0, 1fr); }
  .hero-shot { justify-self: center; }
  .proof .figs { grid-template-columns: minmax(0, 1fr); }
  .track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split.rev > :first-child { order: 0; }
  .comp-head p + p { grid-column: 1; margin-top: 0; }
  .comp-head .sec-h { grid-row: auto; }
  .chat { justify-self: start; }
  .close h2 { grid-row: auto; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .b-in, .b-out, .ms-in, .ms-out { padding: 20px; }
  .ms-row { grid-template-columns: minmax(0, 1fr); }
  .ms-chart { height: 96px; gap: 2px; }
  .b-plans { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .seg2 button { font-size: 16px; }
  .br-d { display: none; }
  .bar-in { height: 64px; gap: 12px; }
  .lockup { font-size: 15px; height: 36px; padding-left: 11px; }
  .lockup .tk { width: 24px; height: 24px; }
  .bar .btn-sm { height: 38px; padding: 0 12px; font-size: 14px; }
  .drops .tbl th:nth-child(2), .drops .tbl td:nth-child(2) { display: none; }
  .lede { margin-top: 24px; }
  .cta { margin-top: 28px; gap: 20px; }
  .btn { height: 52px; font-size: 17px; }
  .field { height: 64px; padding-left: 18px; gap: 10px; }
  .field .knob { width: 46px; height: 46px; }
  .field .clock { font-size: 16px; }
  .fig-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .fig-side > div { padding: 18px 16px; }
  .track { grid-template-columns: minmax(0, 1fr); }
  .track li { min-height: 0; }
  .split > div > p, .sec-lede, .comp-head p, .close p { font-size: 18px; }
  .disc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .disc > div { padding: 14px 12px; }
  .node.acc .lbl { margin-left: 44px; width: 100%; }
  .tbl th, .tbl td { padding-left: 14px; padding-right: 14px; }
  .plans .len { display: block; }
  .plans .rec { margin-left: 8px; font-size: 12.5px; }
  .plans th:nth-child(4), .plans td:nth-child(4), .plans th:nth-child(2), .plans td:nth-child(2), .plans th:nth-child(5), .plans td:nth-child(5), .plans th:nth-child(6), .plans td:nth-child(6) { display: none; }
  .drops .tbl th:nth-child(4), .drops .tbl td:nth-child(4) { display: none; }
  summary { font-size: 17.5px; }
  .foot-name { letter-spacing: -0.05em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .rise, .js .rise.in { opacity: 1; transition: none; }
  .field.done .knob svg path { animation: none; }
  .tbl tr.new td, details[open] p { animation: none; }
  .replay figcaption { transition: none; }
  .stream.live .sdot, .stream.enter { animation: none; }
}

/* =====================================================================================
   THE CAROUSEL (v3, 2026-10-29 — the mock-up "A" look the owner chose): everything from the proof to
   the invite as FULL-WIDTH SLIDES on one pinned stage under the hero. Vertical scroll reads down a
   slide (only if it is taller than the stage), then moves the track sideways to the next one
   (site.js carousel()). Transform/opacity only. No JS or reduced motion: the slides are ordinary
   sections, one under the other. The card-ring version: cyberredeem-backups/landing-card-ring-2026-10-29.
   ===================================================================================== */
:root { --bar: 72px; }
@media (max-width: 640px) { :root { --bar: 64px; } }
.tour { position: relative; }
.tour + section { margin-top: var(--gap); }
.a-top { display: none; }
/* static (no JS, reduced motion): each slide is a section */
.slide + .slide { margin-top: var(--gap); }

/* pinned: a stage the height of the screen (toolbar-safe svh), slides side by side, moved by transform */
.tour.pinned .a-pin {
  position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); height: calc(100svh - var(--bar));
  display: flex; flex-direction: column; overflow: hidden; overflow: clip;   /* clip: focus can never scroll it sideways */
}
.tour.pinned .a-top { display: flex; }
.tour.pinned .a-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; overflow: clip; }
.tour.pinned .a-track { display: flex; height: 100%; will-change: transform; }
.tour.pinned .slide { flex: 0 0 100%; min-width: 0; width: 100%; height: 100%; margin: 0; display: flex; flex-direction: column; justify-content: center; }
.tour.pinned .slide-in { min-width: 0; width: 100%; }   /* a wide table must never widen its slide (it scrolls in its own box, as before) */
.tour.pinned .slide.tall { justify-content: flex-start; }
.tour.pinned .slide-in { padding: 20px 0 36px; }
.a-snap { position: absolute; left: 0; width: 1px; height: 1px; scroll-snap-align: start; pointer-events: none; }
html.snap-tour { scroll-snap-type: y proximity; }

/* the top strip: where am I */
.a-top {
  flex: none; position: relative; z-index: 2; align-items: center; gap: 18px; width: 100%;
  max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding: 16px var(--gut) 8px;
}
.a-count { font-weight: 700; font-size: 16px; white-space: nowrap; color: var(--ink-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.a-count b { color: var(--ink); }
.a-name { display: inline-block; margin-left: 10px; color: var(--ink); }
.a-name.swap { animation: namein 200ms var(--ease) both; }
@keyframes namein { from { opacity: 0; transform: translateY(5px); } }
.a-dots { display: flex; gap: 2px; margin-left: auto; flex: none; }
.a-dots button { position: relative; width: 24px; height: 28px; border: 0; padding: 0; background: transparent; cursor: pointer; }
.a-dots button::before, .a-dots button::after { content: ""; position: absolute; left: 3px; right: 3px; top: 12px; height: 4px; border-radius: 2px; }
.a-dots button::before { background: var(--s3); }
.a-dots button::after { background: var(--ink); transform-origin: left center; transform: scaleX(var(--f, 0)); }
.a-dots button:focus-visible { outline: 3px solid var(--yellow); outline-offset: -2px; }
.a-hint { font-size: 14.5px; color: var(--ink-3); white-space: nowrap; transition: opacity 300ms ease; }
.tour.moved .a-hint { opacity: 0; }
@media (max-width: 899px) {
  .a-hint { display: none; }
  .a-top { padding: 12px var(--gut) 6px; gap: 10px; }
  .a-count { font-size: 14.5px; }
  .a-name { margin-left: 6px; }
  .a-dots button { width: 13px; }
  .a-dots button::before, .a-dots button::after { left: 2px; right: 2px; }
  .tour.pinned .slide-in { padding: 12px 0 28px; }
}

/* the companion board on phones: the picture, a "Tap to use the demo" button, and a sheet */
@media (max-width: 899px), (pointer: coarse) {
  .demo[data-desktop-only] .try { display: grid; }
  .demo[data-desktop-only] .try .t-fine { display: none; }
  .demo[data-desktop-only] .try .t-touch { display: inline; }
}
.board-sheet { position: fixed; inset: 0; z-index: 70; display: flex; flex-direction: column; justify-content: flex-end; }
.board-sheet[hidden] { display: none; }
.bs-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 240ms ease-out; }
.bs-panel {
  position: relative; height: calc(100svh - 24px); background: #161616; border-radius: 16px 16px 0 0; overflow: hidden;
  transform: translateY(100%); transition: transform 320ms cubic-bezier(0.32, 0.72, 0, 1); display: flex; flex-direction: column;
}
.board-sheet.open .bs-scrim { opacity: 1; }
.board-sheet.open .bs-panel { transform: none; }
.board-sheet.closing .bs-scrim { transition-duration: 180ms; }
.board-sheet.closing .bs-panel { transition: transform 200ms var(--ease); }
.bs-hd { flex: none; display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 18px; }
.bs-hd p { flex: 1; font-size: 14.5px; color: var(--ink-2); }
.bs-hd p b { color: var(--ink); }
.bs-frame { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.bs-frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; background: #161616; }
@media (prefers-reduced-motion: reduce) { .bs-scrim, .bs-panel, .board-sheet.closing .bs-panel { transition: opacity 120ms ease; transform: none; } }

/* desktop slides: the phone pictures fit the stage, so the slide reads at a glance (no reading down) */
@media (min-width: 900px) {
  .tour.pinned .shot, .tour.pinned .cashfig { width: auto; justify-self: center; }
  .tour.pinned .shot .phone { height: min(868px, calc(100svh - var(--bar) - 170px)); aspect-ratio: 414 / 868; }
  .tour.pinned .cashfig .phone { height: min(868px, calc(100svh - var(--bar) - 330px)); aspect-ratio: 414 / 868; }
  .tour.pinned .cashout .co-row { margin-top: 36px; }
}

/* live drops: a new row's highlight fades (opacity only); the line that says how fresh the table is */
.tbl td { position: relative; }
.tbl tr.fresh td::after { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.09); pointer-events: none; animation: freshfade 1600ms ease-out forwards; }
@keyframes freshfade { from { opacity: 1; } to { opacity: 0; } }
.drops .drops-live { margin-top: 12px; }
.drops .drops-live + .note { margin-top: 6px; }
.tour { overflow-anchor: none; }   /* the carousel keeps the visitor's place itself */

/* pictures in the carousel: the phone's screen colour is there from the first frame; a picture that is
   still loading stays invisible (never drawn top-down) and fades in once decoded */
.tour .phone img, .tour .screen img, .tour .shot img { background-color: #121212; }
.tour img { transition: opacity 160ms ease-out; }
.tour img.ld { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .tour img { transition: none; } }

/* =====================================================================================
   LEGAL (/legal/, /legal/privacy/, /legal/terms/ — built from src/legal/ by build.py, 2026-10-30).
   The landing's ground, type and tone steps as a reading page: a ~68ch column, the contents beside
   it (sticky on desktop, a card on top on phones), numbered sections. No JS; nothing here touches
   the landing (every class is lg-*).
   ===================================================================================== */
.lg { padding: clamp(40px, 6vw, 88px) 0 clamp(96px, 11vw, 168px); }
.lg-crumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: 15.5px; font-weight: 600; color: var(--ink-3); }
.lg-crumb li + li::before { content: "/"; margin-right: 8px; color: var(--ink-3); }
.lg-crumb a { color: var(--ink-2); text-decoration: none; transition: color 150ms ease; }
@media (hover: hover) { .lg-crumb a:hover { color: var(--ink); } }
.lg-h1 { margin-top: 20px; font-size: clamp(46px, 6.6vw, 104px); line-height: 0.95; letter-spacing: -0.04em; font-weight: 700; max-width: 14ch; }
.lg-head > .lg-h1:first-child { margin-top: 0; }
.lg-meta { margin-top: 28px; font-size: 15.5px; color: var(--ink-3); }
.lg-meta time { color: var(--ink); font-weight: 600; }
.lg-lede { margin-top: 20px; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.45; max-width: 44ch; }

.lg-body { display: grid; grid-template-columns: minmax(220px, 3fr) minmax(0, 8fr); gap: clamp(40px, 6vw, 120px); align-items: start; margin-top: clamp(56px, 7vw, 104px); }
.lg-toc { position: sticky; top: calc(var(--bar) + 24px); max-height: calc(100vh - var(--bar) - 48px); max-height: calc(100svh - var(--bar) - 48px); overflow-y: auto; overscroll-behavior: contain; padding: 4px 4px 4px 0; }
.lg-toc-h { font-size: 14.5px; font-weight: 600; color: var(--ink-3); margin-bottom: 10px; }
.lg-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: lgt; }
.lg-toc a { display: flex; gap: 12px; padding: 7px 0; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 15.5px; line-height: 1.35; transition: color 150ms ease; }
.lg-toc a::before { counter-increment: lgt; content: counter(lgt); flex: none; min-width: 1.4em; color: var(--ink-3); }
@media (hover: hover) { .lg-toc a:hover { color: var(--ink); } }

.lg-doc { min-width: 0; max-width: 68ch; counter-reset: lgs; }
.lg-doc section { scroll-margin-top: calc(var(--bar) + 24px); }
.lg-doc section + section { margin-top: 64px; }
.lg-doc h2 { font-size: clamp(26px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -0.025em; font-weight: 700; }
.lg-doc section > h2 { display: flex; gap: 0.35em; align-items: baseline; }
.lg-doc section > h2::before { counter-increment: lgs; content: counter(lgs); flex: none; min-width: 1.15em; color: var(--ink-3); transition: color 200ms ease; }
.lg-doc section:target > h2::before { color: var(--yellow); }
.lg-doc section > * + * { margin-top: 18px; }
.lg-doc section > h2 + * { margin-top: 22px; }
.lg-doc p, .lg-doc li, .lg-doc dd { color: var(--ink-2); font-size: 18px; line-height: 1.65; text-wrap: pretty; }
.lg-doc strong { color: var(--ink); font-weight: 700; }
.lg-doc a, .lg-help a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; text-decoration-color: var(--ink-3); transition: text-decoration-color 160ms ease; }
@media (hover: hover) { .lg-doc a:hover, .lg-help a:hover { text-decoration-color: var(--yellow); } }
.lg-doc ul { list-style: none; margin-bottom: 0; padding: 0; display: grid; gap: 12px; }
.lg-doc ul li { position: relative; padding-left: 26px; }
.lg-doc ul li::before { content: ""; position: absolute; left: 2px; top: calc(0.825em - 3.5px); width: 7px; height: 7px; border-radius: 1.5px; background: var(--ink-3); }
.lg-data { margin-bottom: 0; display: grid; gap: 4px; }
.lg-data > div { background: var(--s1); border-radius: 6px; padding: 18px 22px 20px; }
.lg-data dt { font-weight: 700; font-size: 18px; color: var(--ink); }
.lg-data dd { margin: 4px 0 0; font-size: 17px; line-height: 1.6; }
.lg-sum { background: var(--s1); border-radius: 6px; padding: 28px 28px 30px; margin-bottom: 64px; }
.lg-sum h2 { font-size: 20px; letter-spacing: -0.01em; }
.lg-sum ul { margin-top: 18px; }
.lg-sum li { color: var(--ink); }
.lg-sum ul li::before { background: var(--ink); }

/* /legal/: the two documents */
.lg-cards { list-style: none; margin: clamp(48px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.lg-card {
  display: flex; flex-direction: column; gap: 14px; height: 100%; min-height: 300px; padding: 28px; border-radius: 6px; background: var(--s1); text-decoration: none;
  transition: background-color 160ms ease, transform 140ms var(--ease); -webkit-tap-highlight-color: transparent;
}
.lg-card:focus-visible { border-radius: 6px; }   /* the global focus rule would square the corners */
.lg-card h2 { font-size: clamp(32px, 3.4vw, 52px); line-height: 1; letter-spacing: -0.035em; font-weight: 700; }
.lg-card p { color: var(--ink-2); font-size: 17px; max-width: 42ch; }
.lg-card-ft { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 24px; font-size: 15px; color: var(--ink-3); }
.lg-card-ft time { color: var(--ink-2); font-weight: 600; }
.lg-arr { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--ink); color: var(--bg); flex: none; }
.lg-arr svg { transition: transform 200ms var(--ease); }
.lg-card:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .lg-card:hover { background: var(--s2); } .lg-card:hover .lg-arr svg { transform: translateX(3px); } }
.lg-help { margin-top: 32px; color: var(--ink-2); font-size: 17px; }

.foot nav a[aria-current="page"] { color: var(--ink); }

@media (max-width: 1080px) {
  .lg-body { grid-template-columns: minmax(0, 1fr); }
  .lg-toc { position: static; max-height: none; overflow: visible; background: var(--s1); border-radius: 6px; padding: 22px 24px; }
  .lg-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
}
@media (max-width: 640px) {
  .lg-toc { padding: 18px 20px; }
  .lg-toc ol { grid-template-columns: minmax(0, 1fr); }
  .lg-doc p, .lg-doc li, .lg-doc dd { font-size: 17px; }
  .lg-data dd { font-size: 16.5px; }
  .lg-data > div { padding: 16px 18px 18px; }
  .lg-sum { padding: 22px 20px 24px; margin-bottom: 56px; }
  .lg-doc section + section { margin-top: 56px; }
  .lg-cards { grid-template-columns: minmax(0, 1fr); }
  .lg-card { min-height: 0; padding: 24px 20px 20px; }
}
@media (prefers-reduced-motion: reduce) { .lg-card, .lg-arr svg { transition: none; } .lg-card:active { transform: none; } }
@media print {
  .lg-page { --bg: #fff; --ink: #000; --ink-2: #222; --ink-3: #555; --s1: #fff; }
  .lg-page .bar, .lg-page .skiplink, .lg-page .lg-toc, .lg-page .foot { display: none; }
  .lg { padding: 0; }
  .lg-body { display: block; margin-top: 32px; }
  .lg-doc { max-width: none; }
  .lg-data > div, .lg-sum { padding: 8px 0; }
  .lg-doc h2 { break-after: avoid; }
  .lg-data > div, .lg-doc li { break-inside: avoid; }
}

/* footer: independence, help lines and copyright (owner 2026-10-30) */
.foot-row { align-items: flex-start; }
.foot-legal { display: flex; flex-direction: column; gap: 6px; max-width: 64ch; font-size: 14.5px; line-height: 1.5; color: var(--ink-3); }
.foot-legal a { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color 150ms ease; }
@media (hover: hover) { .foot-legal a:hover { color: var(--ink); } }