/* IntegriMark — verifiable prize-draw integrity. Premium, governance-grade.
   Dark hero + bands, warm "paper" workspace. One gold accent. No frameworks. */

:root {
  --ink: #14161b;          /* dark sections */
  --ink-2: #1b1e26;
  --paper: #f6f4ef;        /* workspace */
  --card: #ffffff;
  --text: #1c1e22;
  --muted: #5f6772;
  --line: #e4dfd3;
  --gold: #bd932c;
  --gold-lite: #e3c268;
  --gold-deep: #a2761d;
  --gold-soft: #f4ecd6;
  --on-dark: #f4f1ea;
  --on-dark-mute: #a9adb8;
  --green: #1d7a4a;
  --green-soft: #e8f3ec;
  --red: #b23a2e;
  --red-soft: #f8ebe8;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --serif: "Iowan Old Style", Charter, Georgia, Cambria, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 44px); /* side padding: fixed-ish, never viewport-proportional-to-a-capped-box */
  --section-gap: clamp(38px, 4vw, 56px); /* uniform vertical rhythm between sections */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; letter-spacing: -0.015em; }
code { font-family: var(--mono); font-size: 0.84em; word-break: break-all; }
a { color: var(--gold-deep); }
.hidden { display: none !important; }
main { width: 100%; }

/* Centered content containers. A fixed gutter (never a viewport-proportional
   padding on a max-width-capped box) so content can't collapse on wide screens. */
.tiles, .contrast, .demo-lead, .demo, .receipts, .verify, .foot {
  width: 100%; margin-inline: auto; padding-inline: var(--gutter);
}

/* Entrance is a TRANSFORM-ONLY enhancement: content is never hidden by it, so a
   throttled renderer or old browser at worst shows it a few px offset, never
   invisible. (A separate keyframe fades opacity only where a stuck state is
   still fully readable.) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes slideUp { from { transform: translateY(15px); opacity: .55; } to { transform: none; opacity: 1; } }
  .hero-copy > *, .proof-card { animation: slideUp .6s cubic-bezier(.2,.7,.2,1) both; }
  .hero .eyebrow { animation-delay: .02s; }
  .hero h1 { animation-delay: .09s; }
  .hero .lede { animation-delay: .18s; }
  .hero-cta-row { animation-delay: .27s; }
  .hero .trust-strip { animation-delay: .36s; }
  .proof-card { animation-delay: .4s; }
}

/* ---------------- top bar ---------------- */
.topbar {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px var(--gutter); padding-top: max(12px, env(safe-area-inset-top));
  background: rgba(20,22,27,0.86); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand { display: flex; align-items: center; gap: 9px; color: var(--gold-lite); }
.mark { width: 22px; height: 22px; }
.brand-name { font-family: var(--serif); font-weight: 700; font-size: 19px; color: var(--on-dark); letter-spacing: -0.01em; }
.topbar-cta { font: 600 13.5px var(--sans); color: var(--on-dark); text-decoration: none; border: 1px solid rgba(255,255,255,0.22); padding: 7px 14px; border-radius: 999px; }
.topbar-cta:hover { background: rgba(255,255,255,0.08); }

/* ---------------- hero ---------------- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 82% -10%, rgba(189,147,44,0.22), transparent 55%),
    radial-gradient(90% 70% at 0% 0%, rgba(189,147,44,0.08), transparent 50%),
    linear-gradient(160deg, var(--ink), var(--ink-2));
  color: var(--on-dark);
  padding: clamp(44px, 6vw, 76px) var(--gutter) var(--section-gap);
}
.hero::after { /* fine hairline grid, very subtle */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 100% 34px; mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
}
.hero-inner { position: relative; z-index: 1; max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 34px; }
.hero-copy { position: relative; z-index: 1; }
.eyebrow { font: 600 12.5px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-lite); margin: 0 0 16px; }
.hero h1 { font-size: clamp(32px, 6.4vw, 54px); line-height: 1.05; margin: 0 0 18px; color: #fff; }
.hero h1 em { font-style: italic; color: var(--gold-lite); }
.lede { font-size: clamp(15.5px, 2.4vw, 18px); color: #d7d9df; margin: 0 0 26px; max-width: 54ch; }
.hero-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.trust-strip { font-size: 13px; color: var(--on-dark-mute); max-width: 52ch; border-left: 2px solid var(--gold); padding-left: 12px; margin: 0; }

/* proof card */
.proof-card {
  position: relative; z-index: 1;
  background: linear-gradient(180deg, #ffffff, #fbf9f3);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 18px 18px 16px;
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.55), 0 2px 0 rgba(255,255,255,0.06) inset;
  max-width: 420px;
}
.pc-head { display: flex; align-items: center; gap: 12px; padding-bottom: 13px; border-bottom: 1px dashed var(--line); }
.pc-shield { width: 34px; height: 34px; color: var(--green); flex-shrink: 0; }
.pc-title { font: 700 16px var(--sans); color: var(--text); }
.pc-sub { font: 12px var(--mono); color: var(--muted); }
.pc-rows { list-style: none; margin: 13px 0; padding: 0; display: grid; gap: 10px; }
.pc-rows li { font-size: 14px; color: #333941; display: flex; gap: 9px; align-items: flex-start; }
.pc-rows strong { color: var(--gold-deep); }
.pc-tick { color: #fff; background: var(--green); width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; margin-top: 1px; }
.pc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.pc-badge { font: 700 11px var(--sans); letter-spacing: 0.04em; color: var(--green); background: var(--green-soft); border: 1px solid #c6e3d2; padding: 5px 10px; border-radius: 999px; }
.pc-foot code { color: var(--muted); font-size: 11px; }

/* ---------------- buttons ---------------- */
.btn { appearance: none; border: 0; cursor: pointer; font: 600 15.5px var(--sans); border-radius: 11px; padding: 13px 20px; transition: transform .06s, background .15s, opacity .15s, box-shadow .2s; touch-action: manipulation; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
.btn-lg { padding: 15px 26px; font-size: 16px; min-height: 52px; }
.btn:active { transform: scale(.985); }
.btn:disabled { opacity: .45; cursor: default; transform: none; }
.btn-gold { background: linear-gradient(180deg, var(--gold-lite), var(--gold)); color: #2a2205; box-shadow: 0 10px 24px -10px rgba(189,147,44,0.7); }
.btn-gold:hover:not(:disabled) { background: linear-gradient(180deg, #ecca77, var(--gold-deep)); }
.btn-primary { background: var(--ink); color: #fff; }
.btn-primary:hover:not(:disabled) { background: #000; }
.btn-ghost { background: transparent; color: var(--on-dark); border: 1px solid rgba(255,255,255,0.28); }
.btn-ghost:hover { background: rgba(255,255,255,0.08); }
.btn-quiet { background: transparent; color: var(--text); border: 1px solid var(--line); }
.btn-sabotage { background: transparent; color: var(--red); border: 1.5px dashed #d59a8f; }
.btn-sabotage:hover:not(:disabled) { background: var(--red-soft); }
.btn-row { display: grid; gap: 10px; margin-top: 10px; }
.spinner { display: inline-block; width: 15px; height: 15px; vertical-align: -2px; margin-right: 8px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------------- bands (dark) ---------------- */
.band { color: var(--on-dark); padding: var(--section-gap) var(--gutter); }
/* A section right after a dark block: the block's own padding IS the gap, so
   don't add the section's top padding on top of it (that's what made the gaps
   at the bands twice as big as everywhere else). */
.hero + .band, .band + .tiles, .band + .foot { padding-top: 0; }
.band-now { background: linear-gradient(165deg, #1c1f27, #23262f); border-top: 1px solid rgba(189,147,44,0.25); border-bottom: 1px solid rgba(0,0,0,0.3); }
.band-close { background: radial-gradient(90% 120% at 50% 0%, rgba(189,147,44,0.16), transparent 60%), linear-gradient(160deg, var(--ink), var(--ink-2)); text-align: center; }
.band-inner { max-width: 860px; margin: 0 auto; }
.band h2 { font-size: clamp(22px, 4vw, 32px); line-height: 1.15; margin: 0 0 14px; color: #fff; }
.band p { color: #d7d9df; font-size: 15.5px; margin: 0; max-width: 64ch; }
.band-p2 { margin-top: 16px !important; }
.band-p2 strong { color: #fff; }
.band-now em, .band-close em { color: var(--gold-lite); font-style: italic; }
.band-close .btn { margin-top: 22px; }
.pill { display: inline-block; font: 700 12px var(--sans); letter-spacing: 0.05em; text-transform: uppercase; color: #2a2205; background: linear-gradient(180deg, var(--gold-lite), var(--gold)); padding: 6px 13px; border-radius: 999px; margin-bottom: 16px; }

/* ---------------- value tiles ---------------- */
.tiles { display: grid; grid-template-columns: 1fr; gap: 16px; padding-top: var(--section-gap); max-width: 1180px; }
.tile { background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 22px 20px; }
.tile-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--gold-soft); color: var(--gold-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.tile-icon svg { width: 24px; height: 24px; }
.tile h3 { font-size: 18px; margin: 0 0 8px; }
.tile p { font-size: 14.5px; color: var(--muted); margin: 0; }

/* ---------------- contrast ---------------- */
.contrast { max-width: 900px; padding-top: var(--section-gap); }
.contrast p { font-family: var(--serif); font-size: clamp(19px, 3.2vw, 25px); line-height: 1.4; color: var(--text); margin: 0; text-align: center; }
.contrast strong { color: var(--gold-deep); }

/* ---------------- demo lead ---------------- */
.demo-lead { max-width: 820px; text-align: center; padding-top: var(--section-gap); }
.demo-lead h2 { font-size: clamp(26px, 5vw, 38px); margin: 0 0 12px; }
.demo-lead p { color: #3d434c; font-size: 16px; max-width: 56ch; margin: 0 auto 22px; }
.demo-lead-note { font-size: 13px; color: var(--muted); margin-top: 12px; }

/* ---------------- demo / steps ---------------- */
.demo { max-width: 880px; padding-top: clamp(20px, 3vw, 28px); scroll-margin-top: 64px; }
.chapter-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; background: #ece9e1; border-radius: 11px; padding: 5px; margin: 6px 0 12px; position: sticky; top: calc(env(safe-area-inset-top) + 54px); z-index: 40; }
.tab { appearance: none; border: 0; cursor: pointer; font: 600 15px var(--sans); color: var(--muted); padding: 11px 8px; min-height: 44px; border-radius: 8px; background: transparent; }
.tab.active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.09); }
.chapter-blurb { font-size: 14px; color: var(--muted); margin: 0 0 18px; }
.steps { list-style: none; margin: 0; padding: 0; }
.step { position: relative; padding: 0 0 22px 40px; }
.step::before { content: ""; position: absolute; left: 13px; top: 32px; bottom: 0; width: 2px; background: var(--line); }
.step:last-child::before { display: none; }
.step-dot { position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); color: var(--muted); font: 700 13px var(--sans); display: flex; align-items: center; justify-content: center; }
.step.active .step-dot { border-color: var(--gold); color: var(--gold-deep); background: var(--gold-soft); }
.step.done .step-dot { border-color: var(--green); background: var(--green); color: #fff; }
.step h3 { margin: 3px 0 4px; font-size: 17px; }
.step .step-why { font-size: 13.5px; color: var(--muted); margin: 0 0 12px; }
.step.locked { opacity: .4; pointer-events: none; }
.rules-box { width: 100%; min-height: 250px; resize: vertical; font: 12.5px/1.6 var(--mono); color: var(--text); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; margin-bottom: 6px; white-space: pre-wrap; word-break: break-word; }
.rules-box:focus { outline: 2px solid var(--gold); outline-offset: 0; border-color: var(--gold); }
.rules-hint { font-size: 12px; color: var(--muted); margin: 0 0 12px; }
.stubs { display: flex; flex-wrap: wrap; gap: 7px; margin: 12px 0; }
.stub { border: 1.5px dashed var(--gold); background: var(--gold-soft); color: var(--gold-deep); font: 700 13px var(--mono); padding: 7px 11px; border-radius: 7px; }
.stub.stub-win { border-color: var(--green); background: var(--green-soft); color: var(--green); }
.stub.stub-lose { border-color: var(--line); background: #f0eee8; color: var(--muted); }
.stub.stub-winner { border-style: solid; box-shadow: inset 0 0 0 2px var(--gold); }
.winner-line { font-size: 15px; margin: 10px 0; }
.winner-line strong { font-family: var(--serif); font-size: 22px; color: var(--gold-deep); }
.flash { background: var(--red-soft); border: 1px solid #e5c1bb; color: var(--red); border-radius: 9px; padding: 10px 13px; font-size: 13.5px; margin: 10px 0; }
.flash.info { background: var(--gold-soft); border-color: #e0d0a4; color: #7a5c13; }

/* ---------------- section heads ---------------- */
.section-head { margin: 0 0 16px; }
.receipts, .verify { padding-top: var(--section-gap); }
.section-head h2 { font-size: clamp(23px, 4vw, 30px); margin: 0 0 6px; }
.section-head p { color: var(--muted); font-size: 14.5px; margin: 0; max-width: 56ch; }

/* ---------------- receipts ---------------- */
.receipts { max-width: 880px; }
.receipt { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 11px; margin-bottom: 12px; overflow: hidden; }
.receipt.r-refused { border-left-color: var(--red); }
.receipt.r-draw { border-left-color: var(--gold); }
.receipt.r-new { animation: rise .3s ease; }
@keyframes rise { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.r-body { padding: 13px 15px 11px; }
.r-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.r-title { font: 700 15.5px var(--sans); margin: 0; }
.r-stamp { flex-shrink: 0; font: 700 10px var(--sans); letter-spacing: .06em; padding: 3px 8px; border-radius: 4px; border: 1.5px solid; text-transform: uppercase; white-space: nowrap; }
.r-stamp.ok { color: var(--green); border-color: var(--green); }
.r-stamp.no { color: var(--red); border-color: var(--red); }
.r-stamp.draw { color: var(--gold-deep); border-color: var(--gold); }
.r-proves { font-size: 13.5px; color: #454b55; margin: 6px 0 10px; }
.r-links { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.r-explorer { display: inline-flex; align-items: center; gap: 5px; font: 600 13px var(--sans); color: #2a2205; background: linear-gradient(180deg, var(--gold-lite), var(--gold)); padding: 7px 12px; border-radius: 8px; text-decoration: none; }
.r-explorer:hover { background: var(--gold-deep); color: #fff; }
.r-time { font-size: 12px; color: var(--muted); }
.r-evidence { border-top: 1px dashed var(--line); }
.r-evidence summary { cursor: pointer; list-style: none; font: 600 12.5px var(--sans); color: var(--muted); padding: 9px 15px; }
.r-evidence summary::-webkit-details-marker { display: none; }
.r-evidence summary::before { content: "▸ "; color: var(--gold-deep); }
.r-evidence[open] summary::before { content: "▾ "; }
.ev-grid { padding: 0 15px 13px; display: grid; gap: 9px; }
.ev-label { font: 600 11px var(--sans); text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 3px; display: flex; align-items: center; gap: 8px; }
.ev-grid pre { margin: 0; padding: 9px 11px; background: #f3f1ea; border: 1px solid var(--line); border-radius: 7px; font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-all; max-height: 240px; overflow: auto; }
.copy-btn { appearance: none; border: 1px solid var(--line); background: var(--card); font: 600 11px var(--sans); color: var(--muted); border-radius: 5px; padding: 6px 12px; min-height: 32px; cursor: pointer; }
.copy-btn:active { background: var(--gold-soft); }

/* ---------------- verify ---------------- */
.verify { max-width: 880px; }
.verify-row { display: flex; gap: 11px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 13px; margin-bottom: 8px; }
.v-icon { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; }
.v-icon.pending { color: var(--muted); }
.v-icon.pass { background: var(--green); color: #fff; }
.v-icon.fail { background: var(--red); color: #fff; }
.v-text { flex: 1; min-width: 0; }
.v-title { font: 600 14.5px var(--sans); margin: 0; }
.v-sub { font-size: 13px; color: #4a515b; margin: 4px 0 0; line-height: 1.45; }
.v-onchain { display: inline-block; margin-top: 7px; font: 600 12.5px var(--sans); color: var(--gold-deep); text-decoration: none; }
.v-onchain:hover { text-decoration: underline; }
#verify-verdict { border-radius: 12px; padding: 18px; text-align: center; margin-top: 14px; }
#verify-verdict.pass { background: var(--green-soft); border: 1px solid #bfe0cd; }
#verify-verdict.fail { background: var(--red-soft); border: 1px solid #e5c1bb; }
#verify-verdict .vv-big { font: 700 22px var(--serif); }
#verify-verdict.pass .vv-big { color: var(--green); }
#verify-verdict.fail .vv-big { color: var(--red); }
#verify-verdict .vv-sub { font-size: 14px; color: #454b55; margin-top: 6px; }
.verify-note { font-size: 13px; color: var(--muted); margin-top: 14px; }

/* ---------------- faq ---------------- */

/* ---------------- footer ---------------- */
.foot { max-width: 880px; margin: 0 auto; padding-top: var(--section-gap); padding-bottom: 40px; }
.foot p { font-size: 13px; color: var(--muted); }
.foot-small { font-size: 12px; }

/* ---------------- confirmation modals ---------------- */
.modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(18,20,24,0.58); display: flex; align-items: flex-end; justify-content: center; }
@media (prefers-reduced-motion: no-preference) { .modal-overlay { animation: mfade .18s ease; } @keyframes mfade { from { opacity: 0; } to { opacity: 1; } } }
.modal-card { background: var(--card); width: 100%; max-width: 560px; max-height: 92vh; overflow-y: auto; border-radius: 18px 18px 0 0; box-shadow: 0 -12px 44px rgba(0,0,0,0.34); }
@media (prefers-reduced-motion: no-preference) { .modal-card { animation: mslide .26s cubic-bezier(.2,.7,.2,1); } @keyframes mslide { from { transform: translateY(28px); } to { transform: none; } } }
.modal-head { position: sticky; top: 0; z-index: 1; background: var(--card); display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.modal-title { font-size: 19px; margin: 0; }
.modal-x { appearance: none; border: 0; background: #efece5; width: 30px; height: 30px; border-radius: 50%; font-size: 13px; cursor: pointer; color: var(--muted); flex-shrink: 0; }
.modal-x:hover { background: #e6e2d8; }
.modal-body { padding: 16px 18px; }
.modal-intro { font-size: 14px; color: #454b55; margin: 0 0 15px; }
.modal-doc { margin-bottom: 13px; }
.modal-doc summary { cursor: pointer; font: 600 13px var(--sans); color: var(--gold-deep); list-style: none; }
.modal-doc summary::-webkit-details-marker { display: none; }
.modal-doc summary::before { content: "▸ "; }
.modal-doc[open] summary::before { content: "▾ "; }
.modal-doc pre { margin: 8px 0 0; padding: 10px 12px; background: #f3f1ea; border: 1px solid var(--line); border-radius: 8px; font: 12px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 200px; overflow: auto; }
.kv { margin-bottom: 13px; }
.kv-label { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; flex-wrap: wrap; }
.kv-name { font: 600 13px var(--sans); color: var(--text); }
.kv-val { display: flex; align-items: center; gap: 8px; }
.kv-val code { flex: 1; min-width: 0; background: #f3f1ea; border: 1px solid var(--line); border-radius: 7px; padding: 8px 10px; font: 11.5px/1.45 var(--mono); word-break: break-all; }
.kv-note { font-size: 12px; color: var(--muted); margin-top: 5px; line-height: 1.45; }
.tag { font: 700 10px var(--sans); letter-spacing: .04em; text-transform: uppercase; padding: 3px 7px; border-radius: 5px; white-space: nowrap; }
.tag-public { color: #4a3c12; background: #eee3c4; }
.tag-secret { color: #fff; background: var(--red); }
.tag-derived { color: var(--muted); background: #ece9e1; }
.tag-ledger { color: #fff; background: var(--green); }
.modal-eq { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; background: var(--gold-soft); border: 1px dashed #e0d0a4; border-radius: 8px; padding: 10px 12px; margin: 2px 0 13px; }
.eq-out { font: 700 12px var(--sans); color: var(--gold-deep); }
.eq-op { color: var(--muted); font-weight: 700; }
.eq-fn { font: 11.5px var(--mono); color: var(--text); }
.modal-storenote { font-size: 12.5px; color: #454b55; background: #f6f4ef; border: 1px solid var(--line); border-radius: 8px; padding: 11px 12px; margin-top: 6px; line-height: 1.5; }
.modal-outcome { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-radius: 10px; padding: 12px 14px; margin: 2px 0 13px; }
.modal-outcome.win { background: var(--green-soft); border: 1px solid #bfe0cd; }
.modal-outcome.lose { background: #f0eee8; border: 1px solid var(--line); }
.oc-label { font-size: 13px; color: var(--muted); }
.modal-outcome strong { font-family: var(--serif); font-size: 20px; }
.modal-outcome.win strong { color: var(--green); }
.modal-outcome.lose strong { color: var(--muted); }
.modal-foot { position: sticky; bottom: 0; background: var(--card); border-top: 1px solid var(--line); padding: 12px 18px; padding-bottom: max(12px, env(safe-area-inset-bottom)); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.modal-foot .r-explorer { flex: 1; justify-content: center; }
.modal-done { margin-left: auto; }
.v-intro { font-size: 13.5px; color: var(--muted); margin: 0 0 14px; }
.v-failmsg { color: var(--red); }

/* ---------------- responsive ---------------- */
@media (min-width: 640px) { .modal-overlay { align-items: center; padding: 24px; } .modal-card { border-radius: 16px; } }
@media (min-width: 860px) {
  .hero-inner { grid-template-columns: 1.08fr 0.92fr; align-items: center; gap: 48px; }
  .proof-card { justify-self: end; }
  .tiles { grid-template-columns: repeat(3, 1fr); gap: 20px; }
  .btn { width: auto; }
}
@media (max-width: 859px) {
  .btn-lg { width: 100%; }
  .hero-cta-row .btn { width: 100%; }
  .proof-card { max-width: 100%; margin-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }