/* ============================================================================
   $KERMIT — 8-BIT POND
   Full pixel-game UI. Rules that keep it coherent:
     · NO border-radius anywhere — pixels have corners
     · borders are 4px solid ink + a HARD offset shadow (never a blur)
     · motion uses steps() so it reads as sprite animation, not CSS easing
     · every image is `image-rendering: pixelated`
   Sections: 1 tokens · 2 base · 3 panels · 4 buttons · 5 hud · 6 hero
             7 marquee · 8 stats · 9 lore · 10 rewards · 11 evolution
             12 pond · 13 sheet · 14 steps · 15 map · 16 faq · 17 footer · 18 rwd
   ========================================================================== */

/* ── 1. tokens ─────────────────────────────────────────────────────────── */
:root {
  --ink: #0a1710;
  --deep: #0d2b1e;
  --dark: #113524;
  --green: #3fa64a;
  --green-lt: #6ede5c;
  --green-dk: #24702f;
  --gold: #ffc531;
  --gold-dk: #e09a12;
  --cream: #f4f8dc;
  --sky: #6ec5e8;
  --sky-2: #a8e6f0;
  --red: #e5484d;

  --shadow: 6px 6px 0 var(--ink);
  --shadow-sm: 4px 4px 0 var(--ink);
  --wrap: 1180px;

  --display: "Press Start 2P", monospace;
  --body: "Pixelify Sans", "Courier New", monospace;
}

/* ── 2. base ───────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body {
  font-family: var(--body);
  font-size: 19px;
  line-height: 1.55;
  color: var(--cream);
  background: var(--deep);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
canvas { display: block; width: 100%; height: auto; }

/* every pixel asset, always crisp */
.px { image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges; }

/* CRT scanline veil — subtle, above everything, ignores pointers */
.scanlines {
  position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: .26;
  background: repeating-linear-gradient(180deg, rgba(0,0,0,.35) 0 1px, transparent 1px 3px);
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.wrap--narrow { max-width: 760px; }
.center { text-align: center; }

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; }
.section--dark { background: var(--deep); }
.section--green {
  background: var(--dark);
  border-block: 6px solid var(--ink);
  box-shadow: inset 0 6px 0 rgba(110, 222, 92, .12), inset 0 -6px 0 rgba(0, 0, 0, .25);
}

.h2 {
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.9vw, 1.9rem);
  line-height: 1.35;
  color: var(--gold);
  text-shadow: 4px 4px 0 var(--ink);
  margin-bottom: 1.6rem;
}
.h2--c { text-align: center; }

.lede {
  max-width: 68ch; margin: 0 auto 2.5rem; text-align: center;
  font-size: 1.05rem; letter-spacing: .3px; color: rgba(244, 248, 220, .78);
}

.reveal { opacity: 0; transform: translateY(14px); transition: opacity .35s steps(4), transform .35s steps(4); }
.reveal.in { opacity: 1; transform: none; }

.blink { animation: blink 1s steps(2, start) infinite; color: var(--green-lt); }
@keyframes blink { 50% { opacity: 0; } }

/* ── 3. panels ─────────────────────────────────────────────────────────── */
.panel {
  background: var(--dark);
  border: 4px solid var(--ink);
  box-shadow: var(--shadow);
  padding: 1.5rem;
  position: relative;
}
.panel--light { background: rgba(244, 248, 220, .07); }
.panel--gold { background: linear-gradient(180deg, var(--gold) 0%, var(--gold-dk) 100%); color: var(--ink); }
.panel--console { background: #071a12; padding: 0; overflow: hidden; }

/* ── 4. buttons ────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--display); font-size: .72rem; line-height: 1;
  padding: 1rem 1.4rem; border: 4px solid var(--ink); background: var(--cream); color: var(--ink);
  box-shadow: var(--shadow-sm); cursor: pointer; text-transform: uppercase;
  transition: transform .08s steps(2), box-shadow .08s steps(2);
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
.btn:active { transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); }
.btn--gold { background: var(--gold); }
.btn--green { background: var(--green-lt); }
.btn--outline { background: transparent; color: var(--cream); border-color: var(--cream); box-shadow: 4px 4px 0 rgba(0,0,0,.45); }
.btn--lg { font-size: .85rem; padding: 1.15rem 1.7rem; }
.btn--sm { font-size: .6rem; padding: .6rem .8rem; }

/* ── 5. HUD nav ────────────────────────────────────────────────────────── */
.hud {
  position: fixed; inset: 0 0 auto 0; z-index: 500;
  display: flex; align-items: center; gap: 1.2rem;
  padding: .7rem clamp(.9rem, 2.5vw, 1.6rem);
  background: var(--ink); border-bottom: 4px solid var(--green-dk);
}
.hud__brand { display: flex; align-items: center; gap: .6rem; font-family: var(--display); font-size: .85rem; color: var(--gold); }
.hud__brand .px { width: 34px; height: 34px; }
.hud__nav { display: flex; gap: 1.1rem; margin-left: auto; font-family: var(--display); font-size: .58rem; }
.hud__nav a { color: var(--cream); opacity: .72; padding: .35rem 0; border-bottom: 3px solid transparent; }
.hud__nav a:hover { opacity: 1; color: var(--green-lt); border-color: var(--gold); }
.hud__cta { padding: .7rem 1rem; font-size: .6rem; }
.hud__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: .35rem; }
.hud__burger span { width: 26px; height: 4px; background: var(--cream); }
.hud.open .hud__burger span:nth-child(2) { opacity: 0; }

/* ── 6. hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative; min-height: 100svh; display: grid; align-items: center;
  padding: 7rem 0 4rem;
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 45%, #7fd0a0 62%, var(--green) 63%, var(--green-dk) 100%);
  border-bottom: 6px solid var(--ink);
  overflow: hidden;
}

.hero__grid { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr .9fr; gap: 2.5rem; align-items: center; }
.tag {
  display: inline-block; font-family: var(--display); font-size: .58rem; color: var(--gold);
  background: var(--ink); padding: .6rem .9rem; border: 4px solid var(--ink); margin-bottom: 1.2rem;
}
.tag--blink { animation: blink 1.6s steps(2, start) infinite; }
.hero__title {
  font-family: var(--display); font-size: clamp(2.1rem, 7.5vw, 4.6rem); line-height: 1; color: var(--cream);
  text-shadow: 5px 5px 0 var(--ink), 10px 10px 0 rgba(10,23,16,.3); letter-spacing: 2px;
}
.hero__sub { font-family: var(--display); font-size: clamp(.85rem, 2.4vw, 1.4rem); color: var(--gold); text-shadow: 3px 3px 0 var(--ink); margin-top: .7rem; }
.hero__tag { margin-top: 1.1rem; font-size: 1.1rem; letter-spacing: .5px; color: var(--ink); font-weight: 600; max-width: 30ch; }
.hero__tag b { color: var(--cream); text-shadow: 2px 2px 0 var(--ink); }

.terminal { margin-top: 1.5rem; border: 4px solid var(--ink); background: #071a12; box-shadow: var(--shadow-sm); max-width: 480px; }
.terminal__bar { display: flex; align-items: center; gap: .4rem; background: var(--ink); color: var(--green-lt); font-family: var(--display); font-size: .5rem; padding: .5rem .6rem; }
.terminal__bar i { width: 8px; height: 8px; background: var(--green-dk); }
.terminal__bar i:first-of-type { margin-left: auto; }
.terminal__body { display: flex; align-items: center; gap: .6rem; padding: .7rem; }
.terminal__body code { font-family: var(--body); font-size: .82rem; color: var(--green-lt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }

.hero__right { display: grid; place-items: center; gap: 1rem; }
.hero__frog { width: min(78%, 300px); filter: drop-shadow(8px 8px 0 rgba(10,23,16,.28)); }
.hero__chip {
  display: inline-flex; align-items: center; gap: .7rem; background: var(--ink); color: var(--cream);
  border: 4px solid var(--ink); box-shadow: var(--shadow-sm); padding: .6rem 1rem; font-family: var(--display); font-size: .6rem;
}
.hero__chip-k { color: rgba(244,248,220,.6); }
.hero__chip-v { color: var(--green-lt); }

/* ── 7. marquee ────────────────────────────────────────────────────────── */
.marquee { background: var(--gold); border-bottom: 6px solid var(--ink); overflow: hidden; padding: .65rem 0; }
.marquee__track { display: flex; gap: 2rem; width: max-content; animation: scroll 24s linear infinite; }
.marquee__track span { display: inline-flex; align-items: center; gap: .8rem; font-family: var(--display); font-size: .72rem; color: var(--ink); white-space: nowrap; }
.marquee__track span::after { content: ""; width: 22px; height: 22px; background: url("../pixel/tier-frog.png") center/contain no-repeat; image-rendering: pixelated; }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ── 8. HUD stats + XP bar ─────────────────────────────────────────────── */
.statgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.statbox { background: var(--ink); border: 4px solid var(--green-dk); padding: 1.1rem .9rem; text-align: center; }
.statbox__k { font-family: var(--display); font-size: .52rem; color: rgba(244,248,220,.6); letter-spacing: 1px; }
.statbox__v { font-family: var(--display); font-size: clamp(.75rem, 1.9vw, 1.05rem); color: var(--green-lt); margin-top: .7rem; }

.xp { margin-top: 1.6rem; background: var(--ink); border: 4px solid var(--green-dk); padding: 1.1rem; }
.xp__head { display: flex; justify-content: space-between; gap: 1rem; font-family: var(--display); font-size: .55rem; color: var(--cream); }
.xp__pct { color: var(--gold); }
.xp__bar { margin-top: .8rem; height: 26px; background: #061810; border: 4px solid var(--green-dk); padding: 3px; }
.xp__fill { height: 100%; width: 0%; background: repeating-linear-gradient(90deg, var(--green-lt) 0 10px, var(--green) 10px 20px); transition: width .5s steps(10); }
.xp__note { margin-top: .7rem; font-size: .9rem; color: rgba(244,248,220,.5); }

/* ── 9. lore ───────────────────────────────────────────────────────────── */
.lore { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.6rem; align-items: start; }
.lore__art { display: grid; place-items: center; padding: 2.5rem 1rem; background: radial-gradient(circle at 50% 45%, #2f8a4a 0%, #1c5c33 70%, #123d22 100%); }
.lore__frog { width: min(72%, 220px); filter: drop-shadow(6px 6px 0 rgba(10,23,16,.35)); animation: bob 1.6s steps(2) infinite; }
@keyframes bob { 50% { transform: translateY(-10px); } }
.lore__copy { display: grid; gap: 1.2rem; }
.lore__copy p + p { margin-top: .9rem; }
.lore__copy b { color: var(--green-lt); }
.checklist { list-style: none; display: grid; gap: .7rem; }
.checklist li {
  position: relative; padding: .85rem .9rem .85rem 3rem;
  background: rgba(10,23,16,.5); border: 4px solid var(--ink);
  font-family: var(--display); font-size: .56rem; line-height: 1.7; color: var(--cream);
}
.checklist li::before {
  content: ""; position: absolute; left: .8rem; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; background: url("../pixel/tier-frog.png") center/contain no-repeat; image-rendering: pixelated;
}

/* ── 10. rewards ───────────────────────────────────────────────────────── */
.rewards { display: grid; grid-template-columns: .85fr 1.15fr; gap: 1.6rem; align-items: start; }
.chest { text-align: center; }
.chest__k { font-family: var(--display); font-size: .58rem; letter-spacing: 1px; }
.chest__v { font-family: var(--display); font-size: clamp(1.2rem, 4vw, 2rem); margin: .9rem 0 .4rem; text-shadow: 3px 3px 0 rgba(10,23,16,.25); }
.chest__sub { font-size: 1rem; font-weight: 600; }
.chest__bar { margin: 1.1rem 0; padding: .7rem; background: var(--ink); color: var(--gold); font-family: var(--display); font-size: .55rem; line-height: 1.6; }
.quests { display: grid; gap: 1rem; }
.quest { display: flex; gap: 1.1rem; align-items: center; background: var(--dark); border: 4px solid var(--ink); box-shadow: var(--shadow-sm); padding: 1.1rem; }
.quest__icon { width: 52px; height: 52px; flex-shrink: 0; }
.quest h3 { font-family: var(--display); font-size: .68rem; color: var(--gold); margin-bottom: .45rem; }
.quest p { font-size: 1rem; color: rgba(244,248,220,.8); }
.quest b { color: var(--green-lt); }

/* ── 11. evolution ─────────────────────────────────────────────────────── */
.evo { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr; gap: .8rem; align-items: center; }
.evo__card { background: var(--deep); border: 4px solid var(--ink); box-shadow: var(--shadow); padding: 1.4rem 1rem; text-align: center; }
.evo__card .px { width: 72px; height: 72px; margin: 0 auto .8rem; }
.evo__card h3 { font-family: var(--display); font-size: .7rem; color: var(--green-lt); }
.evo__req { font-family: var(--display); font-size: .5rem; color: var(--ink); background: var(--gold); padding: .35rem .5rem; margin: .6rem auto; display: inline-block; }
.evo__card p { font-size: .95rem; color: rgba(244,248,220,.72); }
.evo__card--king { background: linear-gradient(180deg, #3d2f00, #241c00); border-color: var(--gold); }
.evo__card--king h3 { color: var(--gold); }
.evo__arrow { font-size: 1.5rem; color: var(--gold); text-align: center; animation: blink 1.4s steps(2,start) infinite; }

/* ── 11b. arcade ───────────────────────────────────────────────────────── */
.arcade { display: grid; grid-template-columns: auto 1fr; gap: 1.6rem; align-items: start; justify-content: center; }
.cabinet {
  background: linear-gradient(180deg, #1b4230, #0d2b1e);
  border: 6px solid var(--ink); box-shadow: var(--shadow); padding: 14px;
  position: relative;
}
.cabinet::before {
  content: ""; position: absolute; inset: 6px; border: 3px solid rgba(110,222,92,.25); pointer-events: none; z-index: 2;
}
#game {
  display: block; width: 360px; max-width: 100%; height: auto;
  image-rendering: pixelated; image-rendering: crisp-edges;
  background: #6ec5e8; border: 4px solid var(--ink); touch-action: none; cursor: pointer;
}
.arcade__side { display: grid; gap: 1rem; align-content: start; max-width: 340px; }
.arcade__h { font-family: var(--display); font-size: .6rem; color: var(--gold); margin-bottom: .8rem; }
.keys { list-style: none; display: grid; gap: .6rem; font-size: .98rem; color: rgba(244,248,220,.82); }
.keys li { display: flex; align-items: center; gap: .5rem; }
.keys li .px { width: 26px; height: 26px; }
.keys b { font-family: var(--display); font-size: .55rem; color: var(--green-lt); }
.arcade__note { font-size: .9rem; color: rgba(244,248,220,.5); }

/* ── 12. live pond ─────────────────────────────────────────────────────── */
.pondgrid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1.4rem; }
.console__head { display: flex; justify-content: space-between; align-items: center; background: var(--ink); color: var(--green-lt); font-family: var(--display); font-size: .55rem; padding: .7rem .9rem; }
.console__chg { color: var(--gold); }
#spark { padding: .8rem; }
.feed { max-height: 260px; overflow-y: auto; }
.feed__row { display: grid; grid-template-columns: auto 1fr auto; gap: .6rem; align-items: center; padding: .6rem .9rem; border-bottom: 2px solid rgba(244,248,220,.08); font-size: .95rem; }
.feed__side { font-family: var(--display); font-size: .5rem; padding: .3rem .45rem; color: var(--ink); }
.feed__side--buy { background: var(--green-lt); }
.feed__side--sell { background: var(--red); color: #fff; }
.feed__who { color: rgba(244,248,220,.6); }
.feed__amt { color: var(--gold); font-weight: 600; }
.feed__empty { padding: 2rem 1rem; text-align: center; color: rgba(244,248,220,.45); font-size: .95rem; }

/* chart embed */
.chartwrap { max-width: 980px; margin-inline: auto; }
.chartbox { min-height: 380px; background: #071a12; display: grid; place-items: center; }
.chartbox iframe { width: 100%; height: 460px; border: 0; display: block; }
.chart__empty { text-align: center; padding: 3rem 1rem; color: rgba(244,248,220,.5); }
.chart__empty .px { width: 54px; height: 54px; margin: 0 auto 1rem; }

/* ── 13. stat sheet ────────────────────────────────────────────────────── */
.sheet { display: grid; gap: .7rem; max-width: 860px; margin-inline: auto; }
.sheet__row { display: grid; grid-template-columns: 44px 1fr auto; gap: 1rem; align-items: center; background: var(--deep); border: 4px solid var(--ink); box-shadow: var(--shadow-sm); padding: .9rem 1.1rem; }
.sheet__row .px { width: 36px; height: 36px; }
.sheet__k { font-family: var(--display); font-size: .58rem; color: rgba(244,248,220,.75); }
.sheet__v { font-family: var(--display); font-size: .6rem; color: var(--green-lt); text-align: right; }
.fine { max-width: 66ch; margin: 1.8rem auto 0; text-align: center; font-size: .95rem; color: rgba(244,248,220,.55); }

/* ── 14. steps ─────────────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 2.2rem; }
.step__n { font-family: var(--display); font-size: 1.5rem; color: var(--gold); text-shadow: 3px 3px 0 var(--ink); }
.step h3 { font-family: var(--display); font-size: .64rem; color: var(--green-lt); margin: .8rem 0 .5rem; }
.step p { font-size: .98rem; color: rgba(244,248,220,.78); }

/* ── 15. world map ─────────────────────────────────────────────────────── */
.levels { display: grid; gap: 1rem; max-width: 820px; margin-inline: auto; }
.level { display: flex; gap: 1.2rem; align-items: center; background: var(--deep); border: 4px solid var(--ink); box-shadow: var(--shadow-sm); padding: 1.2rem; }
.level .px { width: 54px; height: 54px; flex-shrink: 0; }
.level__n { font-family: var(--display); font-size: .62rem; color: var(--gold); margin-bottom: .5rem; }
.level p { font-size: .98rem; color: rgba(244,248,220,.78); }

/* ── 16. faq ───────────────────────────────────────────────────────────── */
.faq { background: var(--dark); border: 4px solid var(--ink); box-shadow: var(--shadow-sm); margin-bottom: .8rem; }
.faq summary {
  cursor: pointer; list-style: none; padding: 1.1rem 1.2rem;
  font-family: var(--display); font-size: .62rem; color: var(--gold); line-height: 1.6;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--green-lt); font-size: 1rem; }
.faq[open] summary::after { content: "–"; }
.faq p { padding: 0 1.2rem 1.2rem; font-size: 1rem; color: rgba(244,248,220,.8); }

/* ── 17. footer ────────────────────────────────────────────────────────── */
.footer { background: var(--ink); border-top: 6px solid var(--green-dk); padding-top: 3rem; }
.footer__grid { display: grid; grid-template-columns: 1.7fr .8fr; gap: 2rem; padding-bottom: 2.2rem; }
.footer__brand { display: flex; align-items: center; gap: .7rem; font-family: var(--display); font-size: 1rem; color: var(--gold); }
.footer__brand .px { width: 40px; height: 40px; }
.footer__note { margin-top: 1rem; font-size: .92rem; color: rgba(244,248,220,.5); max-width: 60ch; }
.footer__links { display: grid; gap: .55rem; align-content: start; font-family: var(--display); font-size: .58rem; }
.footer__lt { color: var(--gold); margin-bottom: .3rem; }
.footer__links a { color: rgba(244,248,220,.75); }
.footer__links a:hover { color: var(--green-lt); }
.footer__bar {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  border-top: 4px solid rgba(244,248,220,.12); padding: 1rem; text-align: center;
  font-family: var(--display); font-size: .52rem; color: rgba(244,248,220,.5);
}
.footer__bar .px { width: 20px; height: 20px; }

/* ── 18. responsive ────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hud__nav { display: none; }
  .hud__burger { display: flex; order: 3; }
  .hud__cta { margin-left: auto; order: 2; }
  .hud.open .hud__nav {
    display: flex; flex-direction: column; gap: 0; order: 4;
    position: fixed; inset: 62px 0 auto 0; background: var(--ink); border-bottom: 4px solid var(--green-dk); padding: .5rem 0;
  }
  .hud.open .hud__nav a { padding: .9rem 1.3rem; font-size: .62rem; }
  .evo { grid-template-columns: repeat(2, 1fr); }
  .evo__arrow { display: none; }
  .pondgrid, .lore, .rewards, .arcade { grid-template-columns: 1fr; }
  .arcade { justify-items: center; }
  .arcade__side { max-width: 100%; }
  .hero__grid { grid-template-columns: 1fr; text-align: center; }
  .hero__right { order: -1; }
  .hero__tag { margin-inline: auto; }
  .hero__cta { justify-content: center; }
  .terminal { margin-inline: auto; }
  .statgrid, .steps { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  body { font-size: 17px; }
  .statgrid, .steps, .evo { grid-template-columns: 1fr; }
  .sheet__row { grid-template-columns: 36px 1fr; }
  .sheet__v { grid-column: 2; text-align: left; }
  .footer__grid { grid-template-columns: 1fr; }
    .hero__title { letter-spacing: 0; }
  .checklist li { font-size: .5rem; padding-left: 2.7rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}


/* ── 19. your-rewards claim panel ───────────────────────────────────────── */
.claim { margin-top: 1.6rem; }
.claim__head { display: flex; align-items: center; gap: .8rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.claim__head .px { width: 34px; height: 34px; }
.claim__head h3 { font-family: var(--display); font-size: .72rem; color: var(--gold); }
.claim__state {
  margin-left: auto; font-family: var(--display); font-size: .5rem; color: var(--green-lt);
  background: var(--ink); border: 3px solid var(--green-dk); padding: .4rem .6rem;
}
.claim__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.claim__cell { background: var(--ink); border: 3px solid var(--green-dk); padding: .9rem .8rem; text-align: center; }
.claim__cell--hi { border-color: var(--gold); }
.claim__k { font-family: var(--display); font-size: .46rem; color: rgba(244,248,220,.55); letter-spacing: .5px; }
.claim__v { font-family: var(--display); font-size: .68rem; color: var(--green-lt); margin-top: .6rem; word-break: break-word; }
.claim__cell--hi .claim__v { color: var(--gold); }
.claim__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.claim__actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.claim__note { margin-top: .9rem; font-size: .95rem; color: rgba(244,248,220,.6); }
@media (max-width: 900px) { .claim__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .claim__grid { grid-template-columns: 1fr; } }




/* ── 20. hero scene: sky over a real pond ───────────────────────────────────
   Layout is split at 58% — sky above, water below — so the frog reads as
   sitting ON the pond rather than floating over a gradient. Every decorative
   layer is pointer-events:none and aria-hidden.
   -------------------------------------------------------------------------- */
.hero {
  isolation: isolate;
  background: linear-gradient(180deg, #4fb3e0 0%, #7fd0ee 34%, #b9e9f7 56%, #b9e9f7 58%, #2c8f63 58%, #1d6e4c 100%);
}
.hero__sky { position: absolute; inset: 0 0 42% 0; pointer-events: none; z-index: 0; overflow: hidden; }
.hero__left, .hero__grid { position: relative; z-index: 3; }

.pxsun { position: absolute; top: 6%; right: 8%; width: 92px; animation: sunspin 8s steps(8) infinite; }
@keyframes sunspin { 50% { transform: scale(1.08); } }

.cloud { position: absolute; width: 150px; opacity: .95; }
.cloud--1 { top: 14%; left: -20%; animation: drift 48s linear infinite; }
.cloud--2 { top: 30%; left: -35%; width: 108px; opacity: .85; animation: drift 66s linear infinite 9s; }
.cloud--3 { top: 5%;  left: -55%; width: 196px; opacity: .75; animation: drift 82s linear infinite 22s; }
@keyframes drift { to { transform: translateX(200vw); } }

/* ── the pond ───────────────────────────────────────────────────────────── */
.pond { position: absolute; inset: 58% 0 0 0; pointer-events: none; z-index: 1; }
.pond__shore {
  position: absolute; inset: 0 0 auto 0; height: 26px; background: #3fa64a;
  border-bottom: 5px solid #17532f;
  box-shadow: inset 0 -8px 0 rgba(10,23,16,.12);
}
.pond__water { position: absolute; inset: 26px 0 0 0; overflow: hidden; background: linear-gradient(180deg, #2a86b8 0%, #14587f 60%, #0e3f5e 100%); }

/* horizontal wave rows — pure CSS, stepped so they read as pixel animation */
.wave {
  position: absolute; left: -12%; width: 124%; height: 5px;
  background: repeating-linear-gradient(90deg,
    rgba(255,255,255,.22) 0 10px, transparent 10px 26px,
    rgba(255,255,255,.12) 26px 34px, transparent 34px 58px);
}
.wave--a { top: 22px; animation: rowa 7s steps(12) infinite; }
.wave--b { top: 70px; opacity: .7; animation: rowb 9s steps(12) infinite; }
.wave--c { top: 128px; opacity: .45; animation: rowa 12s steps(12) infinite; }
@keyframes rowa { to { transform: translateX(34px); } }
@keyframes rowb { to { transform: translateX(-34px); } }

.sparkle { position: absolute; width: 6px; height: 6px; background: rgba(255,255,255,.85); }
.s1 { top: 34px; left: 18%; animation: twinkle 2.4s steps(2) infinite; }
.s2 { top: 78px; left: 42%; animation: twinkle 3.1s steps(2) infinite .5s; }
.s3 { top: 52px; left: 66%; animation: twinkle 2.8s steps(2) infinite 1.1s; }
.s4 { top: 104px; left: 28%; animation: twinkle 3.6s steps(2) infinite .8s; }
.s5 { top: 90px; left: 82%; animation: twinkle 2.2s steps(2) infinite 1.6s; }
@keyframes twinkle { 50% { opacity: 0; } }

/* shore + water props */
.prop { position: absolute; filter: drop-shadow(3px 4px 0 rgba(10,23,16,.28)); }
.reeds { width: 132px; top: -104px; transform-origin: bottom center; z-index: 2; }
.reeds--l { left: 1%;  animation: sway 4s steps(3) infinite; }
.reeds--r { right: 2%; transform: scaleX(-1); animation: sway 5.2s steps(3) infinite .6s; }
@keyframes sway { 50% { transform: rotate(-3deg); } }
.reeds--r { animation-name: swayflip; }
@keyframes swayflip { 0%,100% { transform: scaleX(-1) rotate(0); } 50% { transform: scaleX(-1) rotate(-3deg); } }
.cattail { width: 52px; top: -78px; transform-origin: bottom center; z-index: 2; }
.cattail--1 { left: 13%; animation: sway 5.6s steps(3) infinite .3s; }
.cattail--2 { right: 15%; animation: sway 6.4s steps(3) infinite 1s; }
.rock { width: 78px; top: -40px; z-index: 2; }
.rock--1 { left: 22%; }
.rock--2 { right: 30%; width: 58px; top: -30px; }
.pad { opacity: .96; z-index: 1; }
.pad--1 { width: 96px; top: 42px;  left: 6%;  animation: bobpad 5s steps(4) infinite; }
.pad--2 { width: 66px; top: 96px;  left: 44%; animation: bobpad 6.4s steps(4) infinite 1.2s; }
.pad--3 { width: 118px; top: 128px; right: 8%; animation: bobpad 7s steps(4) infinite .5s; }
@keyframes bobpad { 50% { transform: translate(6px, -5px); } }

/* ── stage: frog seated on a pad, flies orbiting ─────────────────────────── */
.stage { position: relative; width: min(100%, 400px); }
.stage__inner { position: relative; display: grid; place-items: center; padding-bottom: 34px; }
.hero__frog {
  position: relative; z-index: 3; width: min(72%, 260px); grid-area: 1 / 1;
  transform: translateY(28px);
  filter: drop-shadow(6px 8px 0 rgba(10,23,16,.3));
  animation: hover 2.4s steps(2) infinite;
}
@keyframes hover { 50% { transform: translateY(20px); } }
.stage__pad {
  grid-area: 1 / 1; z-index: 2; width: min(86%, 300px);
  align-self: end; transform: translateY(52px);
  filter: drop-shadow(0 6px 0 rgba(10,23,16,.25));
}
.stage__ripple {
  grid-area: 1 / 1; z-index: 1; align-self: end; justify-self: center;
  width: min(94%, 330px); height: 20px; transform: translateY(66px);
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.35) 0 12px, transparent 12px 30px);
  animation: rowa 6s steps(10) infinite;
}
.hero__chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; margin-top: 3.2rem; }

.fly { position: absolute; width: 30px; z-index: 4; pointer-events: none; }
.fly--1 { top: 8%;  left: 2%;  animation: buzz1 6s steps(8) infinite; }
.fly--2 { top: 30%; right: 0%; animation: buzz2 7.5s steps(8) infinite; }
.fly--3 { top: 0%;  right: 26%; width: 26px; animation: buzz3 9s steps(8) infinite; }
@keyframes buzz1 { 25% { transform: translate(40px, 26px); } 50% { transform: translate(96px, -6px); } 75% { transform: translate(30px, -18px); } }
@keyframes buzz2 { 25% { transform: translate(-46px, 22px); } 50% { transform: translate(-18px, 56px); } 75% { transform: translate(-74px, 8px); } }
@keyframes buzz3 { 33% { transform: translate(-34px, 44px); } 66% { transform: translate(26px, 16px); } }

/* scroll cue */
.scrollcue {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 4;
  width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--ink); border: 4px solid var(--gold); color: var(--gold);
  font-size: .9rem; animation: cue 1.6s steps(2) infinite;
}
@keyframes cue { 50% { transform: translate(-50%, 8px); } }
.scrollcue:hover { background: var(--gold); color: var(--ink); }

/* ── hero responsive ─────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .hero { background: linear-gradient(180deg, #4fb3e0 0%, #7fd0ee 30%, #b9e9f7 50%, #b9e9f7 52%, #2c8f63 52%, #1d6e4c 100%); }
  .hero__sky { inset: 0 0 48% 0; }
  .pond { inset: 52% 0 0 0; }
  .reeds { width: 100px; top: -78px; }
  .cattail { width: 40px; top: -60px; }
  .rock--2 { display: none; }
  .stage { width: min(100%, 330px); margin-inline: auto; }
  .hero__chips { margin-top: 2.4rem; }
}
@media (max-width: 620px) {
  .hero { padding: 6rem 0 3rem; }
  .pxsun { width: 62px; right: 5%; top: 4%; }
  .cloud--1 { width: 104px; } .cloud--2 { width: 78px; } .cloud--3 { display: none; }
  .reeds { width: 78px; top: -60px; }
  .cattail--2 { display: none; }
  .rock--1 { width: 54px; top: -28px; left: 14%; }
  .pad--2 { display: none; }
  .pad--1 { width: 70px; } .pad--3 { width: 84px; }
  .fly { width: 22px; }
  .fly--3 { display: none; }
  .stage { width: min(100%, 260px); }
  .scrollcue { display: none; }
}


/* ── 21. hero stacking order (explicit, so nothing drifts) ──────────────────
   0  sky gradient (the .hero background itself)
   1  pond water + floating pads
   2  shore props (reeds, cattails, rocks) — stand ABOVE the waterline
   3  content grid (copy, terminal, CTAs, frog stage)
   4  flies + scroll cue
   The pond container must NOT clip: props are positioned with negative tops so
   they rise above the shore. Only .pond__water clips, to contain the waves.
   -------------------------------------------------------------------------- */
.hero__sky   { z-index: 0; }
.pond        { z-index: 1; }
.pond__shore { z-index: 2; }
.prop        { z-index: 2; }
.pad         { z-index: 1; }
.hero__grid  { z-index: 3; }
.scrollcue   { z-index: 4; }
.fly         { z-index: 4; }

.h2__ico { width: 34px; height: 34px; display: inline-block; vertical-align: -6px; margin-right: .4rem; }