:root {
  color-scheme: light;
  --ink: #153d2c;
  --pond: #1b6a55;
  --leaf: #78a848;
  --gold: #f3bf45;
  --cream: #fff7df;
  --mist: #e9f7ef;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  color: var(--ink);
  background: linear-gradient(150deg, #d8f1e3, #eff9f2 48%, #fff3c9);
  font-family: ui-rounded, "Avenir Next Rounded", "Nunito", system-ui, sans-serif;
  line-height: 1.58;
}

a { color: #0f6751; font-weight: 800; }

.hero {
  padding: 54px 22px 46px;
  color: var(--cream);
  background: radial-gradient(circle at 83% 8%, #f8cf62 0 6%, transparent 6.4%), linear-gradient(135deg, #125742, #23775d);
}

.hero-inner, main, footer {
  width: min(860px, calc(100% - 40px));
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 18px;
  font-weight: 900;
  letter-spacing: .02em;
}

.frog { font-size: 2rem; }

h1, h2, h3 { line-height: 1.12; }
h1 { margin: 0; font-size: clamp(2.1rem, 7vw, 3.7rem); letter-spacing: -.04em; }
h2 { margin-top: 0; font-size: 1.42rem; }
p { margin: 0 0 1rem; }

.subtitle { max-width: 620px; margin: 14px 0 0; font-size: 1.08rem; font-weight: 650; }

nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 25px;
}

nav a {
  padding: 9px 14px;
  color: var(--cream);
  border: 1px solid rgba(255,255,255,.45);
  border-radius: 999px;
  text-decoration: none;
}

main { padding: 30px 0 18px; }

.card {
  margin: 16px 0;
  padding: clamp(20px, 4vw, 34px);
  background: rgba(255,255,255,.91);
  border: 1px solid rgba(21,61,44,.08);
  border-radius: 26px;
  box-shadow: 0 10px 26px rgba(27,92,69,.10);
}

.callout {
  border-left: 6px solid var(--gold);
  background: var(--cream);
}

ul { margin: .2rem 0 1.1rem; padding-left: 1.3rem; }
li { margin: .5rem 0; }

.tiny { font-size: .88rem; color: #476959; }

footer { padding: 24px 0 44px; font-size: .9rem; color: #416653; }

@media (max-width: 560px) {
  .hero { padding-top: 38px; }
  .hero-inner, main, footer { width: min(100% - 28px, 860px); }
}