/* ============================================================
   NetPerHash — site stylesheet (v1 design)
   Direction (Simon, 2026-08-30): dark. The rest: sober
   research-lab — flat surfaces, whitespace, mono figures,
   amber accent used sparingly, green/red only as verdicts.
   No external fonts, no frameworks, no tracking. Offline-safe.
   ============================================================ */

:root {
  --bg:         #131519;   /* page */
  --bg-raised:  #191c22;   /* boxes, table heads */
  --bg-inset:   #0e1014;   /* inputs, wells */
  --text:       #e7eaf0;
  --text-dim:   #a6aeba;
  --text-faint: #707988;
  --hairline:   #262b33;
  --hairline-2: #39414e;
  --accent:     #eda63d;   /* warm amber, Bitcoin-adjacent, desaturated */
  --accent-ink: #191307;   /* text on amber */
  --accent-dim: rgba(237, 166, 61, .13);
  --ok:         #4cc38a;
  --ok-dim:     rgba(76, 195, 138, .12);
  --warn:       #e0a24a;
  --bad:        #ef6a6a;
  --bad-dim:    rgba(239, 106, 106, .12);
  --maxw:       800px;
}

* { box-sizing: border-box; }

html { color-scheme: dark; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 2.2rem 1.2rem 3rem;
  line-height: 1.6;
  font-size: 16.5px;
}

/* ---------- header ---------- */

header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .9rem;
  margin-bottom: .9rem;
}
.brand {
  font-size: 1.22rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  text-decoration: none;
}
.brand em { font-style: normal; color: var(--accent); }
.brand .hash { color: var(--text-faint); font-weight: 400; }
header.site .tagline {
  margin: 0;
  color: var(--text-faint);
  font-size: .86rem;
  letter-spacing: .02em;
}
.chip.freshness {
  margin-left: auto;
  font-size: .8rem;
  color: var(--text-dim);
  border: 1px solid var(--hairline-2);
  border-radius: 999px;
  padding: .12rem .65rem;
  white-space: nowrap;
}
.chip.freshness strong { color: var(--text); font-weight: 600; }

/* ---------- nav tabs ---------- */

nav.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .15rem;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 0;
  margin: 0 0 1.9rem;
}
nav.tabs a {
  color: var(--text-dim);
  text-decoration: none;
  font-size: .93rem;
  padding: .42rem .85rem .5rem;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  border-radius: 6px 6px 0 0;
}
nav.tabs a:hover { color: var(--text); background: var(--bg-raised); }
nav.tabs a.here,
nav.tabs .navhere {
  color: var(--accent);
  border-bottom-color: var(--accent);
  font-weight: 600;
}
nav.backlink { margin: 2.6rem 0 .6rem; }
nav.backlink a { color: var(--accent); text-decoration: none; }
nav.backlink a:hover { text-decoration: underline; }

/* ---------- headings & copy ---------- */

h1 {
  font-size: 1.72rem;
  line-height: 1.22;
  letter-spacing: -.01em;
  margin: 1.4rem 0 .9rem;
}
h1 + p { font-size: 1.05em; }
h2 {
  font-size: 1.16rem;
  margin-top: 2.5rem;
  margin-bottom: .7rem;
  padding-bottom: .35rem;
  border-bottom: 1px solid var(--hairline);
}
h2 + p, h2 + ol, h2 + ul, h2 + table { margin-top: .8rem; }
p { margin: .75rem 0; }
strong { font-weight: 650; }
a { color: var(--accent); }
a:hover { text-decoration-thickness: 1.5px; }
.src { color: var(--text-faint); font-size: .8rem; }
.skel { color: var(--text-faint); font-style: italic; }
code, pre {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .88em;
  background: var(--bg-inset);
  border: 1px solid var(--hairline);
  border-radius: 5px;
}
code { padding: .06em .35em; }
pre { padding: .55rem .75rem; overflow-x: auto; }

/* ---------- numbers ---------- */

.num, .gmt, td, th, .chip {
  font-variant-numeric: tabular-nums;
}
.gmt {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: .93em;
}
td .num, td.num { color: var(--text); }

/* ---------- tables ---------- */

table { border-collapse: collapse; margin: .7rem 0; width: 100%; }
td, th {
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: .45rem .6rem;
  text-align: left;
  vertical-align: top;
  font-size: .93rem;
}
thead th, tr:first-child th {
  color: var(--text-dim);
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  background: var(--bg-raised);
  border-bottom: 1px solid var(--hairline-2);
}
tbody tr:nth-child(even), tr:nth-child(even):not(:has(th)) { background: var(--bg-raised); }
tr:hover td { background: var(--accent-dim); }

/* ---------- boxes ---------- */

.box {
  border: 1px solid var(--hairline-2);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--bg-raised);
  padding: .85rem 1.1rem;
  margin: 1.2rem 0;
}
.disclosure {
  border: 1px solid rgba(239, 106, 106, .45);
  border-left: 3px solid var(--bad);
  border-radius: 8px;
  background: var(--bad-dim);
  padding: .7rem 1rem;
  margin: 0 0 1.4rem;
  font-size: .95rem;
}

/* ---------- forms ---------- */

form fieldset {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--bg-raised);
  padding: .9rem 1.1rem 1.05rem;
  margin: .8rem 0;
}
fieldset legend {
  color: var(--text-dim);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: 0 .45rem;
}
label { display: inline-block; margin: .3rem .55rem .3rem 0; }
input[type="number"], select {
  background: var(--bg-inset);
  color: var(--text);
  border: 1px solid var(--hairline-2);
  border-radius: 6px;
  padding: .32rem .5rem;
  font: inherit;
  font-variant-numeric: tabular-nums;
  width: 9.5em;
}
input:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.adv { display: none; }
.adv.open { display: block; }

button {
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  border-radius: 7px;
  padding: .5rem 1.15rem;
  border: 1px solid transparent;
}
#run {
  background: var(--accent);
  color: var(--accent-ink);
  margin-top: .6rem;
}
#run:hover { filter: brightness(1.08); }
#advToggle {
  background: transparent;
  color: var(--text-dim);
  border-color: var(--hairline-2);
  font-weight: 400;
  font-size: .9rem;
}
#advToggle:hover { color: var(--text); border-color: var(--text-faint); }

/* ---------- results, chips, verdicts ---------- */

#results h3 { margin: 1.6rem 0 .4rem; }
#results table td:first-child { font-weight: 600; }
.ok   { color: var(--ok); }
.warn { color: var(--warn); }
.bad  { color: var(--bad); }
.err  { color: var(--bad); }
.chip {
  display: inline-block;
  border: 1px solid var(--hairline-2);
  border-radius: 4px;
  padding: .05rem .4rem;
  font-size: .8em;
  color: var(--text-dim);
  background: var(--bg-inset);
}

/* ---------- details / self-test / FAQ ---------- */

details {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--bg-raised);
  padding: .55rem .95rem;
  margin: .55rem 0;
}
details[open] { padding-bottom: .8rem; }
details > summary { cursor: pointer; color: var(--text); }
details[open] > summary { margin-bottom: .45rem; }
details p:last-child { margin-bottom: .2rem; }
#testlist li, ol li, ul li { margin: .28rem 0; }

/* ---------- footer ---------- */

footer {
  margin-top: 3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--hairline);
}
footer p { font-size: .8rem; }

/* ---------- landing canvas: depth glows + dot grid ---------- */

body.landing {
  max-width: 1040px;
  position: relative;
}
body.landing::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(700px 420px at 12% -4%, rgba(237, 166, 61, .075), transparent 65%),
    radial-gradient(640px 400px at 88% 6%, rgba(96, 130, 255, .05), transparent 60%);
  z-index: -2;
}
body.landing::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(231, 234, 240, .05) 1px, transparent 1.2px);
  background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 46%);
  mask-image: linear-gradient(180deg, rgba(0,0,0,.5), transparent 46%);
  z-index: -1;
}
body.landing header.site { padding-top: .6rem; }

/* ---------- eyebrow overlines ---------- */

.overline {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 3.2rem 0 .2rem;
}
.overline::before {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* ---------- hero v2 ---------- */

.hero { margin-top: 2.2rem; }
.hero h1 {
  font-size: 2.5rem;
  line-height: 1.14;
  letter-spacing: -.02em;
  max-width: 21em;
}
.hero-sub { font-size: 1.06rem; margin-top: .9rem; }

.hero-widget {
  margin: 1.8rem 0 0;
  padding: 1.5rem 1.6rem 1.3rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(25, 28, 34, .92), rgba(19, 21, 25, .96)) padding-box,
    linear-gradient(135deg, rgba(237, 166, 61, .55), rgba(237, 166, 61, .1) 38%, rgba(237, 166, 61, .28)) border-box;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.hero-q { font-size: 1.22rem; }
.hero-figure {
  font-size: 3.1rem;
  text-shadow: 0 0 34px rgba(237, 166, 61, .28);
}
.hero-note { max-width: 46em; }

/* ---------- CTA buttons v2 ---------- */

button, a.cta { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
a.cta.gold, #run {
  background: linear-gradient(180deg, #f2b455, #e29a2c);
  box-shadow: 0 6px 18px rgba(237, 166, 61, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}
a.cta.gold:hover, #run:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 9px 22px rgba(237, 166, 61, .3), inset 0 1px 0 rgba(255, 255, 255, .25);
}
a.cta.gold:active, #run:active { transform: translateY(0); filter: brightness(.97); }

/* ---------- tiles / cards v2 ---------- */

.tile, .way {
  transition: border-color .15s ease, transform .15s ease;
}
.tile:hover, .way:hover {
  border-color: rgba(237, 166, 61, .35);
  transform: translateY(-2px);
}
.tile { position: relative; overflow: hidden; }
.tile::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(237, 166, 61, .5), transparent 55%);
}

/* ---------- pros & cons ---------- */

.pc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.plist, .clist { list-style: none; margin: .4rem 0 0; padding: 0; }
.plist li, .clist li {
  position: relative;
  padding: .38rem 0 .38rem 2rem;
  border-bottom: 1px solid var(--hairline);
  font-size: .95rem;
}
.plist li:last-child, .clist li:last-child { border-bottom: none; }
.plist li::before, .clist li::before {
  position: absolute;
  left: 0;
  top: .38rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace;
  font-weight: 700;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.plist li::before { content: "+"; background: var(--ok-dim); color: var(--ok); }
.clist li::before { content: "−"; background: var(--bad-dim); color: var(--bad); }

/* ---------- compare table v2 ---------- */

table.cmp { margin-top: .6rem; }
table.cmp td:first-child { font-weight: 650; white-space: nowrap; }
.tbl-note { margin-top: .45rem; }

/* ---------- FAQ v2 ---------- */

details.faq { border: none; border-bottom: 1px solid var(--hairline); border-radius: 0; background: transparent; padding: .65rem .2rem; }
details.faq > summary { font-weight: 650; list-style-position: outside; }
details.faq[open] { padding-bottom: .9rem; }

/* ---------- responsive ---------- */

@media (max-width: 760px) {
  .pc-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.9rem; }
  .hero-figure { font-size: 2.5rem; }
}

/* ============================================================ 
   DESIGN v2 — Professional layer (Landing only)
   ============================================================ */

/* --- hero v2: tighter claim, benefit-first, bigger digits --- */
body.landing .hero h1 {
  font-size: 2.6rem;
  line-height: 1.08;
  letter-spacing: -.025em;
  max-width: 19em;
}
body.landing .hero h1 strong {
  color: var(--accent);
  font-weight: 750;
}
.hero-sub { max-width: 54em; font-size: 1.08rem; margin-top: 1rem; }

/* --- icons (inline SVG, one accent color) --- */
.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: 8px;
  background: var(--accent-dim);
  color: var(--accent);
  border: 1px solid rgba(237, 166, 61, .25);
  margin-bottom: .55rem;
}
.icon-chip svg { width: 1.15rem; height: 1.15rem; }

/* --- icon-aware tiles & ways --- */
.tile .icon-chip { margin-bottom: .45rem; }
.tile strong { font-size: .98rem; }
.way .icon-chip { margin-bottom: .6rem; }

/* --- cards with consistent rhythm --- */
.way {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.05rem 1.1rem 1.15rem;
}
.way h3 { font-size: 1.05rem; margin: 0; }
.way p { font-size: .93rem; }
.way .way-sub { margin-bottom: .35rem; }
.way p:last-child { margin-top: auto; }
.tile {
  padding: .95rem 1rem 1rem;
  gap: .3rem;
}

/* --- comparison card group (replaces table look on landing) --- */
.cmp-card {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-raised);
  overflow: hidden;
  margin: 1rem 0;
}
.cmp-card table { margin: 0; }
.cmp-card td, .cmp-card th {
  padding: .65rem .9rem;
  font-size: .92rem;
}
.cmp-card tbody tr:first-child {
  background: var(--accent-dim);
}
.cmp-card tbody tr:first-child td:first-child { color: var(--accent); font-weight: 700; }
.tbl-badge {
  display: inline-block;
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  border: 1px solid var(--hairline-2);
  color: var(--text-dim);
  border-radius: 999px;
  padding: .1rem .55rem;
  margin-right: .35rem;
}

/* --- stat band under hero (the "proof rail") --- */
.statband {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: 12px;
  overflow: hidden;
  margin: 1.6rem 0 .2rem;
}
.statband .cell {
  background: var(--bg-raised);
  padding: .9rem 1rem .95rem;
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.statband .cell strong {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 1.35rem;
  color: var(--text);
  letter-spacing: -.01em;
}
.statband .cell span { font-size: .8rem; color: var(--text-dim); line-height: 1.4; }

/* --- section shells: breathing room --- */
body.landing .overline { margin-top: 3.8rem; }
body.landing section.final { margin-top: 3.2rem; }

/* --- mobile-friendly hero --- */
@media (max-width: 760px) {
  body.landing .hero h1 { font-size: 1.95rem; }
  .hero-figure { font-size: 2.6rem; }
}

/* ============================================================ 
   v3 — FOLD (accordion) sections: page stays short, content folds
   ============================================================ */

details.fold {
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-raised);
  margin: .8rem 0;
  overflow: hidden;
}
details.fold > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: 1.05rem 1.2rem;
  user-select: none;
}
details.fold > summary::-webkit-details-marker { display: none; }
details.fold > summary:hover { background: rgba(237, 166, 61, .05); }
.fold-title {
  font-size: 1.04rem;
  font-weight: 650;
  color: var(--text);
}
.fold-teaser {
  color: var(--text-faint);
  font-size: .82rem;
  flex: 1;
  text-align: right;
}
.fold-arrow {
  width: .65rem;
  height: .65rem;
  border-right: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
  transition: transform .18s ease;
  margin-right: .25rem;
  flex-shrink: 0;
}
details.fold[open] > summary { border-bottom: 1px solid var(--hairline); }
details.fold[open] .fold-arrow { transform: rotate(-135deg); }
details.fold[open] > summary { background: var(--accent-dim); }
.fold-body { padding: 1.1rem 1.2rem 1.25rem; }
.fold-body h2 { display: none; }      /* H2 steckt im summary, nicht doppelt */
.fold-body > p:first-of-type { margin-top: 0; }

/* the visible honest-catch box between folds stays slightly emphasized */
@media (max-width: 760px) {
  .fold-title { font-size: .96rem; display: block; }
  .fold-teaser { display: none; }
}

/* ============================================================ 
   v4 — RADICAL MINIMAL LANDING (Simon-Spezifikation)
   - 3 Abschnitte: Frage+Rechner | 3 Proof-Points | 2 Links + Disclosure
   - Gelb NUR für die Ergebniszahl; H1/Logo weiß; Buttons outline
   - 63-Tage-Chart als schlichte Linie statt Coin-Bild
   ============================================================ */

body.landing .hero h1 { color: var(--text); font-weight: 700; }
body.landing .hero h1 strong { color: var(--text); }        /* kein Gelb mehr in der Headline */
.hero-figure { color: var(--accent); text-shadow: 0 0 30px rgba(237,166,61,.25); }
.brand em { color: var(--text); font-weight: 750; border-bottom: 2px solid var(--accent); }  /* Logo weiß, Unterstreichung amber */

.sparkline {
  width: 100%;
  height: 120px;
  color: #eda63d;
  opacity: .92;
  margin: 1rem 0 .9rem;      /* mehr Luft zu $-Zahl und Text */
}
.sparkline .ax {
  fill: var(--text-dim);
  font-family: ui-monospace, Menlo, monospace;
  font-size: 11.5px;
  letter-spacing: .02em;
}
.sparkline .ax.end { text-anchor: end; }
.hero-answer { margin: 1rem 0 .9rem; }
.hero-figure { font-size: 2.9rem; margin-right: .5rem; }

/* outline buttons statt gefüllt */
a.cta.outline, .codebox button {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--hairline-2);
}
a.cta.outline:hover {
  border-color: var(--accent);
  color: var(--accent);
  transform: translateY(-1px);
}
.codebox button {
  color: var(--text-dim);
  border-radius: 6px;
  padding: .25rem .7rem;
}
.codebox button:hover { color: var(--accent); border-color: var(--accent); background: transparent; }

/* srcline auf normaler Textfarbe statt muted */
.hero-widget .srcline {
  color: var(--text-dim);
  font-size: .88rem;
}

/* home footnote mit Links statt Kachel-Rester */
.home-foot { margin-top: 1.4rem; max-width: 52em; }
.home-foot a { color: var(--text); text-decoration: underline; text-decoration-color: var(--hairline-2); }
.home-foot a:hover { text-decoration-color: var(--accent); }

/* strip-Kacheln: noch ruhiger (keine Amber-Akzente, kein Hover-Lift) */
body.landing .strip .tile strong { color: var(--text); }
body.landing .tile:hover { transform: none; border-color: var(--hairline); }
body.landing .tile::after { display: none; }

/* kompaktere codebox (kein gelber dashed-Block, dezenter) */
.codebox {
  border: 1px solid var(--hairline-2);
  background: transparent;
}
.codebox code { color: var(--text); }


/* --- v4.1: headline weiß (auch .h1b), Chart-Farbe fix --- */
body.landing h1, body.landing h1 strong, body.landing h1 .h1b {
  color: var(--text);
}
.hero-widget .srcline { color: var(--text-dim); }
.sparkline { color: #eda63d; }

/* older breakpoints stay last */
@media (max-width: 560px) {
  body { padding: 1.4rem .85rem 2.4rem; font-size: 15.5px; }
  .chip.freshness { margin-left: 0; }
  table { display: block; overflow-x: auto; }
}

/* ============================================================
   Landing page (index.html) — hero widget, tiles, grids
   ============================================================ */

.hero { margin-top: 1.2rem; }
.hero h1 { font-size: 2.05rem; margin-bottom: .8rem; }
.hero-sub { color: var(--text-dim); max-width: 40em; }
.hero-note { margin-top: .5rem; }

.hero-widget { margin: 1.4rem 0 0; padding: 1.2rem 1.3rem 1.1rem; }
.hero-q { font-size: 1.18rem; }
.hero-q input {
  width: 5.2em;
  font-size: 1.15em;
  font-weight: 650;
  text-align: center;
  padding: .28rem .4rem;
}
.hero-answer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .9rem;
  margin: .8rem 0 .6rem;
}
.hero-figure {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
  line-height: 1.1;
}
.hero-unit { color: var(--text-dim); }
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem .9rem;
  margin-top: 1rem;
}
.adlabel {
  display: block;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-faint);
  margin-top: .25rem;
}
.cta-row .adlabel { display: block; width: 100%; }

a.cta {
  display: inline-block;
  text-decoration: none;
  font-weight: 650;
  border-radius: 8px;
  padding: .6rem 1.3rem;
}
a.cta.gold {
  background: var(--accent);
  color: var(--accent-ink);
}
a.cta.gold:hover { filter: brightness(1.08); }
a.cta.ghost {
  border: 1px solid var(--hairline-2);
  color: var(--text);
  background: transparent;
}
a.cta.ghost:hover { border-color: var(--text-faint); }

.strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: .7rem;
  margin: 1.3rem 0 .3rem;
}
.tile {
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--bg-raised);
  padding: .7rem .85rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.tile strong {
  color: var(--accent);
  font-size: 1.02rem;
  letter-spacing: .01em;
}
.tile span { color: var(--text-dim); font-size: .84rem; line-height: 1.45; }

.grid3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: .8rem;
  margin: 1rem 0;
}
.grid2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: .8rem;
  margin: 1rem 0;
}
.way {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--bg-raised);
  padding: .9rem 1rem 1rem;
}
.way h3 { margin: 0 0 .45rem; font-size: 1.02rem; }
.way h3, .way p { overflow-wrap: anywhere; }
.way-sub { color: var(--text-dim); font-size: .93rem; margin: 0 0 .5rem; }
.way p:last-child { margin-bottom: .15rem; }

.gloss { margin: .9rem 0; }
.gloss dt { color: var(--text); font-weight: 650; margin-top: .7rem; }
.gloss dd { margin: .15rem 0 0 0; color: var(--text-dim); font-size: .95rem; }
.gloss dd + dt { margin-top: .8rem; }

.final .way p { display: flex; flex-direction: column; gap: .5rem; }
.final .cta { align-self: flex-start; }

/* ---------- referral offer block (hero) ---------- */

.refbanner {
  display: block;
  width: 300px;
  max-width: 70%;
  height: auto;
  margin: 1.1rem 0 .4rem;
  opacity: .95;
}
.codebox {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  margin: 1rem 0 .6rem;
  padding: .6rem .85rem;
  border: 1px dashed rgba(237, 166, 61, .5);
  border-radius: 8px;
  background: var(--accent-dim);
}
.codelabel { font-size: .9rem; color: var(--text-dim); }
.codebox code {
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--accent);
  background: transparent;
  border: none;
  padding: 0;
}
.codebox button {
  font-size: .82rem;
  font-weight: 600;
  padding: .3rem .8rem;
  background: transparent;
  color: var(--accent);
  border: 1px solid rgba(237, 166, 61, .55);
}
.codebox button:hover { background: var(--accent); color: var(--accent-ink); }
.copied { color: var(--ok); font-size: .85rem; }
#ctaGoMining { font-size: 1.05rem; }