/* ═══ Milka Coins ══════════════════════════════════════════════════════════
   Standalone landing. Deliberately shares nothing with MilkaTools' stylesheet:
   its own palette, its own type scale, its own components. Editing one must
   never move the other.

   Look: 8-bit, but restrained. Dark plum ground, pastel purple and pastel
   yellow, with the gold kept from before. Everything is square and framed with
   notched pixel borders.

   WEIGHTS ARE DELIBERATELY LIGHT. Frames are 2px and their notches 2px, table
   rules 1px, hard shadows offset 2-3px, and the uppercase sans runs at 700.
   The first cut used 3-4px everywhere and 800 throughout, which read as bulky
   rather than retro: at that weight the frames compete with what they frame,
   and a ledger looks like a grid of boxes instead of a table. The arcade voice
   comes from the square corners, the hard offsets and the palette, none of
   which need to be thick to land.

   Texture stays on the ground: the scanlines and the tilemap grid paint BEHIND
   the content, never across a button face or a line of text.

   The bitmap face is reserved for BIG DISPLAY TEXT ONLY: h1, h2, the wordmark,
   the headline price, and standalone numerals in badges. Buttons, subtitles,
   labels, table headers and every form field use the system sans - at button
   and input sizes a bitmap face is illegible, and the retro feel is carried by
   the square frames, the hard shadows and the palette instead. Uppercase and
   heavy weights keep the sans from reading as generic.
   ════════════════════════════════════════════════════════════════════════ */

:root {
  --bg:         #15111f;
  --bg-2:       #1b1529;
  --surface:    #201a30;
  --card:       #29203d;
  --card-2:     #322747;
  --ink:        #0c0912;   /* outlines and hard shadows */

  --border:     #4c3b73;
  --border-lit: #6f57ab;

  --text:       #f7eedd;
  --muted:      #c2b0e2;
  --muted-2:    #9382ba;

  --gold:       #f5c95a;
  --gold-lit:   #ffe9a8;
  --gold-dim:   #b8801f;

  --purple:     #cbb8f2;
  --purple-dim: #8f76cc;

  --good:       #a9e6a4;
  --bad:        #f2a9a0;

  --maxw:       1080px;

  --display: "Press Start 2P", ui-monospace, "Courier New", monospace;
  --body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Ambient glow, plus a faint grid so the ground reads as a tilemap. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 50% -10%, rgba(203,184,242,.13), transparent 70%),
    radial-gradient(760px 460px at 85% 6%, rgba(245,201,90,.09), transparent 72%),
    repeating-linear-gradient(to right,  rgba(255,255,255,.015) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, rgba(255,255,255,.015) 0 1px, transparent 1px 32px);
}

/* Scanlines, on the GROUND ONLY.

   These used to sit at z-index 3 - above everything - so a dark stripe was
   drawn across every button face, every badge and every line of body text. At
   13px that is not texture, it is eye strain, and it is the first thing the
   owner asked to be rid of.

   .wrap is z-index 1, so z-index 0 keeps the whole overlay underneath the
   content: it textures the plum ground and stops at the edge of anything
   opaque. Never raise this above .wrap. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,.35) 0 1px, transparent 1px 4px);
}

.wrap { position: relative; z-index: 1; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-lit); }

img { image-rendering: pixelated; }

h1, h2 { margin: 0; font-family: var(--display); font-weight: 400; letter-spacing: 0; }
h3 { margin: 0; font-family: var(--body); }
p { margin: 0; }

/* ── Header ──────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--bg-2);
  border-bottom: 2px solid var(--border);
}
.header-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand img { width: 32px; height: 32px; display: block; }
.brand-name { font-family: var(--display); font-size: 13px; line-height: 1.4; color: var(--text); }
.brand-name span { color: var(--gold); }

.header-nav { margin-left: auto; display: flex; gap: 20px; align-items: center; }
.header-nav a {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding: 6px 0; border-bottom: 2px solid transparent;
}
.header-nav a:hover { color: var(--gold-lit); border-bottom-color: var(--gold); }

/* ── Tab bar ─────────────────────────────────────────────────────────────── */
/* Two products, so the switch has to be the loudest control on the page and
   survive to mobile, where the header nav is dropped. */
.tabbar {
  position: sticky; top: 68px; z-index: 40;
  background: var(--bg-2);
  border-bottom: 2px solid var(--border);
}
.tabbar-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 12px 20px;
  display: flex; gap: 12px;
}
.tab {
  flex: 1;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; text-align: left; cursor: pointer;
  background: var(--card); color: var(--muted);
  border: 2px solid var(--border); border-radius: 0;
  font-family: inherit;
  transition: none;
}
.tab:hover { border-color: var(--purple-dim); color: var(--text); }
.tab.active {
  background: var(--card-2); border-color: var(--gold);
  color: var(--text);
  box-shadow: inset 0 -3px 0 var(--gold);
}
.tab-icon { font-size: 22px; line-height: 1; flex-shrink: 0; }
.tab-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tab-body b {
  font-size: 14.5px; font-weight: 700; line-height: 1.2;
  text-transform: uppercase; letter-spacing: .04em;
}
.tab.active .tab-body b { color: var(--gold-lit); }
.tab-body span { font-size: 12.5px; font-weight: 500; color: var(--muted-2); line-height: 1.3; }

@media (max-width: 620px) {
  .tabbar { top: 62px; }
  .tabbar-inner { padding: 10px 14px; gap: 8px; }
  .tab { padding: 11px 12px; gap: 9px; }
  .tab-icon { font-size: 19px; }
  .tab-body b { font-size: 12.5px; }
  .tab-body span { display: none; }
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
/* Solid outline plus a hard drop, so it physically depresses when clicked. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 20px;
  font-size: 14px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .05em; text-align: center;
  border: 2px solid var(--ink); border-radius: 0;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--ink);
  transition: transform .06s steps(2), box-shadow .06s steps(2), background .1s;
}
.btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }

.btn-gold { background: var(--gold); color: #2a1c02; }
.btn-gold:hover { background: var(--gold-lit); color: #2a1c02; }

.btn-ghost { background: var(--card-2); color: var(--purple); }
.btn-ghost:hover { background: var(--border); color: var(--text); }

.btn-lg { padding: 16px 26px; font-size: 14.5px; }
.btn-block { width: 100%; }

/* ── Sections ────────────────────────────────────────────────────────────── */
section { padding: 74px 0; }
.section-head { max-width: 660px; margin-bottom: 34px; }
.eyebrow {
  display: inline-block; margin-bottom: 18px; padding: 7px 10px;
  font-size: 11.5px; font-weight: 700; line-height: 1; letter-spacing: .09em;
  text-transform: uppercase; color: var(--bg); background: var(--purple);
}
.section-head h2 {
  font-size: clamp(16px, 2.8vw, 24px); line-height: 1.6;
  margin-bottom: 18px; color: var(--gold-lit);
}
.section-head p { color: var(--muted); font-size: 15.5px; }
.section-head strong { color: var(--gold-lit); }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 72px 0 60px; }
.hero h1 {
  font-size: clamp(18px, 3.3vw, 31px);
  line-height: 1.75;
  margin-bottom: 28px;
  color: var(--gold-lit);
  max-width: 22ch;
  /* One hard offset, no blur and no second layer. Stacking a purple shadow
     under the black one turned the letterforms to mush at desktop sizes. */
  text-shadow: 2px 2px 0 var(--ink);
}
.hero-lead { font-size: clamp(16px, 2.1vw, 18.5px); color: var(--muted); max-width: 620px; margin-bottom: 34px; }
.hero-lead strong { color: var(--gold-lit); font-weight: 600; }
.hero-cta { display: flex; gap: 16px; flex-wrap: wrap; }

/* ── Cards ───────────────────────────────────────────────────────────────── */
/* Notched pixel frame: four offset shadows leave the corners open, which is how
   a bitmap UI draws a rounded box. */
.card {
  background: var(--card);
  padding: 26px;
  box-shadow:
     0 -2px 0 var(--border), 0 2px 0 var(--border),
     -2px 0 0 var(--border), 2px 0 0 var(--border);
}
.card-gold {
  background: var(--card-2);
  box-shadow:
     0 -2px 0 var(--gold-dim), 0 2px 0 var(--gold-dim),
     -2px 0 0 var(--gold-dim), 2px 0 0 var(--gold-dim);
}

/* ── TC purchase bar ─────────────────────────────────────────────────────── */
.buy-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 26px; align-items: start; }

.qty-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.qty-label {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.qty-input {
  margin-left: auto;
  display: flex; align-items: center; gap: 9px;
  border: 2px solid var(--border-lit);
  padding: 8px 12px; background: var(--bg);
}
.qty-input input {
  width: 96px; border: none; background: none; outline: none;
  color: var(--gold-lit); font-size: 21px; font-weight: 700;
  font-variant-numeric: tabular-nums; font-family: inherit;
  text-align: right; -moz-appearance: textfield;
}
.qty-input input::-webkit-outer-spin-button,
.qty-input input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty-input .unit { font-size: 12.5px; font-weight: 700; color: var(--purple); }

/* Range track, styled per engine because the pseudo-elements do not merge. */
.slider { width: 100%; margin: 8px 0 10px; -webkit-appearance: none; appearance: none; background: none; }
.slider:focus { outline: none; }
.slider::-webkit-slider-runnable-track {
  height: 14px;
  background: linear-gradient(90deg, var(--gold) var(--fill, 0%), var(--bg) var(--fill, 0%));
  border: 2px solid var(--ink);
}
.slider::-moz-range-track { height: 14px; background: var(--bg); border: 2px solid var(--ink); }
.slider::-moz-range-progress { height: 14px; background: var(--gold); }
.slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 26px; margin-top: -9px;
  border-radius: 0; cursor: pointer;
  background: var(--purple);
  border: 2px solid var(--ink);
  box-shadow: inset 0 -4px 0 var(--purple-dim);
}
.slider::-moz-range-thumb {
  width: 18px; height: 24px; border-radius: 0; cursor: pointer;
  background: var(--purple); border: 2px solid var(--ink);
}
.slider-ends {
  display: flex; justify-content: space-between;
  font-size: 11.5px; font-weight: 700; color: var(--muted-2);
}

.chips { display: flex; flex-wrap: wrap; gap: 9px; margin: 22px 0; }
.chip {
  padding: 10px 12px; cursor: pointer; border-radius: 0;
  border: 2px solid var(--border); background: var(--surface);
  color: var(--muted); font-size: 12.5px; font-weight: 700; line-height: 1;
}
.chip:hover { border-color: var(--purple-dim); color: var(--text); }
.chip.active { background: var(--purple); border-color: var(--ink); color: var(--bg); }

.quote {
  border-top: 1px solid var(--border);
  margin-top: 6px; padding-top: 22px;
  display: flex; align-items: flex-end; gap: 18px; flex-wrap: wrap;
}
.quote-total {
  font-family: var(--display); font-size: clamp(18px, 3.2vw, 26px); line-height: 1.35;
  color: var(--gold-lit); text-shadow: 2px 2px 0 var(--ink);
  margin-bottom: 8px;
}
.quote-meta { font-size: 13px; color: var(--muted); }
.quote-meta b { color: var(--gold-lit); font-weight: 600; }
.save-badge {
  margin-left: auto; padding: 9px 11px;
  background: var(--good); color: #10301a;
  font-size: 12px; font-weight: 700; line-height: 1.4;
  white-space: nowrap;
}

/* ── Tier table ──────────────────────────────────────────────────────────── */
.tiers { width: 100%; border-collapse: collapse; font-size: 14px; }
.tiers th {
  text-align: left; padding: 0 10px 12px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2);
}
.tiers th:last-child, .tiers td:last-child { text-align: right; }
.tiers td { padding: 13px 10px; border-top: 1px solid var(--border); color: var(--muted); }
.tiers tr.on td { background: var(--surface); color: var(--gold-lit); }
.tiers tr.on td:first-child { box-shadow: inset 3px 0 0 var(--gold); }

/* ── Steps ───────────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step {
  padding: 22px; background: var(--card);
  box-shadow:
     0 -2px 0 var(--border), 0 2px 0 var(--border),
     -2px 0 0 var(--border), 2px 0 0 var(--border);
}
.step .step-n,
.step-n {
  width: 38px; height: 38px; margin-bottom: 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--gold); color: #241800;
  font-size: 22px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 3px 0 var(--gold-dim);
}
.step h3 { font-size: 16.5px; font-weight: 700; line-height: 1.35; margin-bottom: 10px; color: var(--purple); }
.step p { font-size: 13.5px; color: var(--muted); line-height: 1.6; }

/* ── Figures and ledger ──────────────────────────────────────────────────── */
.figure-row { display: flex; flex-wrap: wrap; gap: 24px; row-gap: 20px; margin-bottom: 20px; }
.figure-label {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2);
  margin-bottom: 6px; line-height: 1.4;
}
.figure-value {
  font-size: 19px; font-weight: 700; line-height: 1.35;
  font-variant-numeric: tabular-nums; color: var(--text);
}
.figure-value.gold { color: var(--gold-lit); }
.figure-value.good { color: var(--good); }
.figure-value .muted { font-weight: 500; }

.ledger { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ledger th {
  text-align: left; padding: 0 8px 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted-2);
}
.ledger th:last-child, .ledger td:last-child { text-align: right; }
.ledger td { padding: 11px 8px; border-top: 1px solid var(--border); color: var(--text); }
.ledger td:first-child { color: var(--muted); }

/* ── Simulator ───────────────────────────────────────────────────────────── */
.sim-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; align-items: start; }

/* Coupon row. Deliberately quiet: a visitor without one should read past it. */
.coupon { margin: -6px 0 24px; }
.coupon > label {
  display: block; margin-bottom: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}
.coupon-row { display: flex; gap: 10px; }
.coupon-row input {
  flex: 1; min-width: 0;
  padding: 12px 14px;
  background: var(--bg); color: var(--text);
  border: 2px solid var(--border); border-radius: 0; outline: none;
  font-family: inherit; font-size: 14px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}
.coupon-row input::placeholder {
  color: var(--muted-2); font-weight: 600; letter-spacing: .04em; text-transform: none;
}
.coupon-row input:focus { border-color: var(--gold); }
.coupon-row .btn { padding: 11px 17px; font-size: 12px; box-shadow: 0 3px 0 var(--ink); }
.coupon-row .btn:active { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }
.coupon-msg { margin-top: 9px; font-size: 12.5px; font-weight: 700; line-height: 1.5; }
.coupon-msg.good { color: var(--good); }
.coupon-msg.bad  { color: var(--bad); }
/* A discounted rate should look like one, not like the number that was always
   there. */
.input-shell.locked.discounted { border-color: var(--good); border-style: solid; }
.input-shell.locked.discounted .locked-value { color: var(--good); }

/* Segmented switch, same square language as the tabs: the active half is gold
   and pressed in, the idle half sits flush. */
.sim-mode { display: flex; gap: 10px; margin-bottom: 22px; }
.sim-mode-btn {
  flex: 1;
  padding: 11px 12px; cursor: pointer;
  background: var(--surface); color: var(--muted);
  border: 2px solid var(--border); border-radius: 0;
  font-family: inherit; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; line-height: 1.3;
  transition: none;
}
.sim-mode-btn:hover { border-color: var(--purple-dim); color: var(--text); }
.sim-mode-btn.active {
  background: var(--gold); border-color: var(--ink); color: #241800;
  box-shadow: inset 0 -3px 0 var(--gold-dim);
}
/* .field sets no display of its own, so [hidden] would already win. Stated
   anyway: the next rule added here must not quietly resurrect the idle field. */
.field[hidden] { display: none; }

.sim-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; margin-bottom: 26px;
}
.field { min-width: 0; }
.field > label {
  /* Two lines' worth, bottom-aligned, so a label that wraps does not push its
     input out of line with the others. */
  display: flex; align-items: flex-end;
  min-height: 2.8em; margin-bottom: 9px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; line-height: 1.4; color: var(--muted);
}
.input-shell {
  display: flex; align-items: center; gap: 9px;
  border: 2px solid var(--border-lit);
  padding: 12px 13px; background: var(--bg);
}
.input-shell:focus-within { border-color: var(--gold); }
.input-shell input {
  width: 100%; min-width: 0; border: none; background: none; outline: none;
  color: var(--gold-lit); font-size: 21px; font-weight: 700;
  font-variant-numeric: tabular-nums; font-family: inherit;
  -moz-appearance: textfield;
}
.input-shell input::-webkit-outer-spin-button,
.input-shell input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.input-shell .unit { font-size: 12.5px; font-weight: 700; color: var(--purple); white-space: nowrap; }

/* Fixed figures read as values, not fields. */
.input-shell.locked { background: var(--surface); border-style: dashed; border-color: var(--border); }
.locked-value { flex: 1; font-size: 21px; font-weight: 700; color: var(--purple); }

#sim-figures { margin-bottom: 4px; }
#sim-note:empty { display: none; }
#sim-note { margin-top: 14px; }

/* ── Full terms ──────────────────────────────────────────────────────────── */
.contract-box {
  margin: 0;
  max-height: 460px;
  overflow: auto;
  padding: 20px;
  background: var(--bg);
  border: 2px solid var(--border);
  color: var(--muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}
.contract-box::-webkit-scrollbar { width: 12px; }
.contract-box::-webkit-scrollbar-track { background: var(--bg); }
.contract-box::-webkit-scrollbar-thumb { background: var(--border); border: 2px solid var(--bg); }

/* ── Terms ───────────────────────────────────────────────────────────────── */
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.term {
  display: flex; gap: 15px; align-items: flex-start;
  padding: 18px; background: var(--card);
  box-shadow:
     0 -2px 0 var(--border), 0 2px 0 var(--border),
     -2px 0 0 var(--border), 2px 0 0 var(--border);
}
.term .term-mark,
.term-mark {
  flex-shrink: 0; min-width: 30px; padding: 7px 6px;
  text-align: center;
  background: var(--purple); color: #1a1030;
  font-size: 15px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.term b {
  display: block; margin-bottom: 6px;
  font-size: 15.5px; font-weight: 700; line-height: 1.4; color: var(--gold);
}
/* Scoped to the text column on purpose: a bare ".term span" also matches
   .term-mark and outranks it, which painted the badge numeral muted purple on
   a light purple block, i.e. invisible. */
.term > div span { font-size: 13.5px; color: var(--muted); line-height: 1.6; }
.term.warn { background: var(--card-2); }
.term.warn .term-mark { background: var(--bad); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { display: grid; gap: 14px; }
details.qa {
  background: var(--card); padding: 0 20px;
  box-shadow:
     0 -2px 0 var(--border), 0 2px 0 var(--border),
     -2px 0 0 var(--border), 2px 0 0 var(--border);
}
details.qa[open] {
  box-shadow:
     0 -2px 0 var(--border-lit), 0 2px 0 var(--border-lit),
     -2px 0 0 var(--border-lit), 2px 0 0 var(--border-lit);
}
details.qa summary {
  cursor: pointer; list-style: none; padding: 19px 0;
  font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--text);
  display: flex; align-items: center; gap: 14px;
}
details.qa summary::-webkit-details-marker { display: none; }
details.qa summary::after {
  content: '+'; margin-left: auto; color: var(--gold);
  font-size: 22px; font-weight: 700; line-height: 1;
}
details.qa[open] summary::after { content: '-'; }
details.qa p { padding: 0 0 20px; color: var(--muted); font-size: 14px; max-width: 74ch; }

/* ── Testimonials ────────────────────────────────────────────────────────── */
/* One quote at a time. A card tall enough for the longest of them, so the
   section does not jump height as it advances. */
.testimonials-box { max-width: 720px; }
.tm-card {
  padding: 26px;
  background: var(--card);
  box-shadow:
     0 -2px 0 var(--border), 0 2px 0 var(--border),
     -2px 0 0 var(--border), 2px 0 0 var(--border);
}
.tm-card blockquote {
  margin: 0 0 18px;
  font-size: 16px; line-height: 1.7; color: var(--text);
  min-height: 5.1em;
}
.tm-card blockquote::before { content: '"'; color: var(--gold); }
.tm-card blockquote::after  { content: '"'; color: var(--gold); }
.tm-by { display: flex; align-items: center; gap: 11px; }
.tm-avatar {
  width: 30px; height: 30px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--purple); color: #1a1030;
  font-size: 14px; font-weight: 700; line-height: 1;
}
.tm-by cite {
  font-style: normal; font-size: 13px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--gold);
}

.tm-nav { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.tm-arrow {
  width: 38px; height: 34px; cursor: pointer;
  background: var(--surface); color: var(--purple);
  border: 2px solid var(--border); border-radius: 0;
  font-family: inherit; font-size: 12px; line-height: 1;
}
.tm-arrow:hover { border-color: var(--purple-dim); color: var(--text); }
.tm-dots { display: flex; gap: 8px; margin-left: auto; }
.tm-dot {
  width: 10px; height: 10px; padding: 0; cursor: pointer;
  background: var(--border); border: 0; border-radius: 0;
}
.tm-dot[aria-selected="true"] { background: var(--gold); }

@media (max-width: 620px) {
  .tm-card blockquote { min-height: 7.5em; }
}

/* ── Closing CTA ─────────────────────────────────────────────────────────── */
.closer {
  text-align: center; padding: 52px 26px;
  background: var(--card-2);
  box-shadow:
     0 -2px 0 var(--gold-dim), 0 2px 0 var(--gold-dim),
     -2px 0 0 var(--gold-dim), 2px 0 0 var(--gold-dim);
}
.closer h2 {
  font-size: clamp(14px, 2.6vw, 21px); line-height: 1.75; margin-bottom: 20px;
  color: var(--gold-lit); text-shadow: 2px 2px 0 var(--ink);
}
.closer p { color: var(--muted); max-width: 520px; margin: 0 auto 30px; }

/* ── Discord ─────────────────────────────────────────────────────────────── */
.discord {
  display: flex; align-items: center; gap: 18px;
  padding: 22px 24px;
  background: var(--card-2);
  box-shadow:
     0 -2px 0 var(--border), 0 2px 0 var(--border),
     -2px 0 0 var(--border), 2px 0 0 var(--border);
  transition: background .1s, box-shadow .06s steps(2);
}
.discord:hover {
  background: var(--card);
  box-shadow:
     0 -2px 0 var(--gold-dim), 0 2px 0 var(--gold-dim),
     -2px 0 0 var(--gold-dim), 2px 0 0 var(--gold-dim);
}
.discord-mark { width: 34px; height: 34px; flex-shrink: 0; color: var(--purple); }
.discord:hover .discord-mark { color: var(--gold); }

.discord-text { display: block; flex: 1; min-width: 0; }
.discord-text b {
  display: block; margin-bottom: 6px;
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold-lit);
}
.discord-text span { display: block; color: var(--muted); font-size: 14.5px; }

.discord-go {
  flex-shrink: 0; padding: 11px 16px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; white-space: nowrap;
  color: var(--purple); background: var(--card);
  border: 2px solid var(--ink); box-shadow: 0 3px 0 var(--ink);
}
.discord:hover .discord-go { background: var(--gold); color: #2a1c02; }
.discord:active .discord-go { transform: translateY(3px); box-shadow: 0 0 0 var(--ink); }

.footer-discord {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--muted); font-size: 13px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
}
.footer-discord svg { width: 16px; height: 16px; }
.footer-discord:hover { color: var(--gold); }

@media (max-width: 620px) {
  .discord { flex-wrap: wrap; gap: 14px; padding: 20px; }
  .discord-text { flex-basis: 100%; order: 2; }
  .discord-go { order: 3; width: 100%; text-align: center; }
}

/* ── Footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  border-top: 2px solid var(--border);
  padding: 30px 0 44px;
  color: var(--muted-2); font-size: 13px;
}
.footer-inner { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.footer-inner .sep { margin-left: auto; }
.disclaimer { margin-top: 16px; font-size: 12px; color: var(--muted-2); max-width: 78ch; line-height: 1.7; }

/* ── Shared bits ─────────────────────────────────────────────────────────── */
.toolbar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); }
.hint { font-weight: 500; color: var(--muted-2); font-size: 11.5px; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .buy-grid, .sim-grid { grid-template-columns: 1fr; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .terms { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sim-fields { grid-template-columns: 1fr; }
  .coupon-row { flex-wrap: wrap; }
  .coupon-row .btn { width: 100%; }
  .field > label { min-height: 0; }
  section { padding: 54px 0; }
  .header-nav { display: none; }
  .steps { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; }
  .save-badge { margin-left: 0; }
  .card { padding: 20px; }
  .hero h1 { text-shadow: 2px 2px 0 var(--ink); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}