/* Wildlife API — landing page
 * Palette + layout inspired by editorial incubator sites:
 *   cream #f2f2ed, gray #6e6e6e, accent blue #4285f4
 * Hero blue reads best as a soft radial gradient (#0084f5 core).
 */

:root {
  --cream: #f2f2ed;
  --ink: #6e6e6e;
  --link: #4285f4;
  --blue: #0084f5;
  --blue-deep: #113a90;
  --blue-hi: #a9c6ff;
  --peach: #f2d4b3;

  --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;

  --gutter: 20px;
  --container-max: 1440px;

  --header-h-mobile: 60px;
  --header-h-desktop: 70px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--link);
  text-decoration: none;
}
a:hover,
a:focus {
  text-decoration: underline;
}

p {
  margin: 0 0 1.25rem;
}
p:last-child {
  margin-bottom: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
}
.skip-link:focus {
  left: 20px;
  top: 20px;
  padding: 8px 12px;
  background: var(--cream);
  color: var(--ink);
  z-index: 200;
}

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

.header {
  height: 0;
  position: relative;
}

.header__bar {
  background: var(--cream);
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 20px;
  width: 100%;
  z-index: 100;
  position: fixed;
  top: 0;
  left: 0;
  transform: translate3d(0, -100%, 0);
  transition: transform 0.4s ease;
  will-change: transform;
}

.header__bar.is-visible {
  transform: translate3d(0, 0, 0);
}

.header__logo {
  display: block;
  height: 20px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.header__logo:hover {
  text-decoration: none;
}
.header__logo-mark {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.header__links {
  display: flex;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.header__links a {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ink);
  text-decoration: none;
}
.header__links a:hover {
  text-decoration: underline;
}

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

.hero {
  background: var(--blue);
  color: var(--cream);
  position: relative;
}
.hero.is-sticky {
  height: 100vh;
  position: sticky;
  top: 0;
  width: 100%;
}

.hero__background {
  inset: 0;
  position: absolute;
  z-index: 0;
  overflow: hidden;
}

/* Soft blurry blue gradient — approximates the editorial hero look.
 * Animated: two blurred layers drift slowly at different rates so the
 * highlights never quite repeat.
 */
.hero__background {
  isolation: isolate;
}

.hero__gradient,
.hero__gradient::before {
  content: "";
  position: absolute;
  inset: -10%;
  background:
    radial-gradient(55% 40% at 22% 28%, rgba(200, 220, 255, 0.85), transparent 60%),
    radial-gradient(40% 35% at 72% 22%, rgba(245, 214, 180, 0.75), transparent 65%),
    radial-gradient(45% 35% at 85% 70%, rgba(255, 220, 200, 0.5), transparent 65%),
    radial-gradient(65% 55% at 50% 82%, #0a4bb5 0%, #0a4bb5 25%, transparent 70%),
    linear-gradient(180deg, #7ab0ee 0%, #1a53c0 55%, #082a78 100%);
  filter: blur(14px);
  transform-origin: 50% 50%;
  animation: heroDrift 42s ease-in-out infinite alternate;
  will-change: transform;
}

.hero__gradient::before {
  inset: -15%;
  background:
    radial-gradient(45% 35% at 78% 62%, rgba(200, 220, 255, 0.55), transparent 65%),
    radial-gradient(50% 40% at 25% 78%, rgba(245, 214, 180, 0.45), transparent 70%),
    radial-gradient(55% 50% at 55% 18%, rgba(10, 75, 181, 0.7), transparent 70%);
  mix-blend-mode: screen;
  filter: blur(22px);
  animation: heroDriftAlt 58s ease-in-out infinite alternate;
  opacity: 0.85;
}

.hero__gradient--soft {
  filter: blur(46px);
}

@keyframes heroDrift {
  0% {
    transform: scale(1.08) translate3d(-2%, -1%, 0);
  }
  50% {
    transform: scale(1.14) translate3d(2%, 1.5%, 0) rotate(1.5deg);
  }
  100% {
    transform: scale(1.1) translate3d(1%, -2%, 0) rotate(-1deg);
  }
}

@keyframes heroDriftAlt {
  0% {
    transform: scale(1.15) translate3d(2%, 2%, 0) rotate(-2deg);
  }
  50% {
    transform: scale(1.2) translate3d(-2%, -1%, 0) rotate(2deg);
  }
  100% {
    transform: scale(1.12) translate3d(-1%, 2%, 0) rotate(-1deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__gradient,
  .hero__gradient::before {
    animation: none;
  }
}

.hero__foreground {
  position: relative;
  z-index: 1;
  height: 100vh;
  padding: 60px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.hero__content {
  margin: 0 auto;
  max-width: 732px;
  text-align: center;
}

.hero__content p {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
}

.hero__logo {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(3rem, 10vw, 7rem);
  letter-spacing: -0.02em;
  color: var(--cream);
  margin: 0;
  line-height: 0.95;
  white-space: nowrap;
}

/* down-arrow jump button */
.hero__jumplink {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--cream);
  border-radius: 100px;
  background: transparent;
  color: var(--cream);
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.hero__jumplink:hover {
  background: var(--cream);
  color: var(--ink);
  text-decoration: none;
}
.hero__jumplink-arrow {
  font-size: 1.1rem;
  line-height: 1;
}

/* ---------- letter section ---------- */

#letter {
  padding: 120px 0;
  background: var(--cream);
  position: relative;
  z-index: 2;
  min-height: 100vh;
  display: flex;
  align-items: center;
}

#letter p {
  font-size: 1.0625rem;
  line-height: 1.55;
}

#letter a {
  color: var(--link);
}

/* ---------- grid ---------- */

.grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-column-gap: 20px;
  margin: 0 20px;
}

.grid__col {
  grid-column: 1 / -1;
}

/* ---------- our-work / cards ---------- */

#our-work {
  padding: 100px 0 120px;
  background: var(--cream);
  position: relative;
  z-index: 2;
}

.carousel__header {
  margin-bottom: 40px;
}

.heading-3 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  color: var(--ink);
}

.cards {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(1, 1fr);
  list-style: none;
  padding: 0;
  margin: 0;
}

.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 100%;
  color: inherit;
  text-decoration: none;
}
.card:hover {
  text-decoration: none;
}

.card__media img,
.card__placeholder {
  aspect-ratio: 16 / 9;
  display: block;
  width: 100%;
  height: auto;
}

.card__placeholder {
  border-radius: 0;
}
.card__placeholder--1 {
  background: linear-gradient(135deg, #9dbfe8, #3a6bbf);
}
.card__placeholder--2 {
  background: linear-gradient(135deg, #c9d7c1, #6b8e6b);
}
.card__placeholder--3 {
  background: linear-gradient(135deg, #e6c9a8, #a67849);
}
.card__placeholder--4 {
  background: linear-gradient(135deg, #d5c9e0, #7a6b95);
}
.card__placeholder--5 {
  background: linear-gradient(135deg, #a8d5d1, #3f7b74);
}
.card__placeholder--6 {
  background: linear-gradient(135deg, #e9c9c1, #a45b53);
}

.card__content {
  padding-block-start: 20px;
  width: 80%;
}
.card__heading {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 1rem;
  color: var(--ink);
}
.card__subheading {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0;
  color: var(--ink);
}
.card__actions {
  padding-block-start: 24px;
}
.card__cta {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  color: var(--ink);
}
.card:hover .card__cta {
  text-decoration: none;
}

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

.footer {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  display: flow-root;
}

.footer__background {
  align-items: center;
  display: flex;
  inset: 0;
  height: 100vh;
  justify-content: center;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.footer__background .hero__gradient {
  position: absolute;
  inset: 0;
}

.footer__container {
  align-items: flex-end;
  background: transparent;
  color: var(--cream);
  display: flex;
  gap: 40px;
  justify-content: space-between;
  padding: 40px 20px;
  position: relative;
  z-index: 1;
}

.footer__menu {
  display: flex;
  flex: 0 0 30%;
  gap: 20px;
}
.footer__links {
  display: flex;
  flex-direction: column;
  flex: 1;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer__legal {
  align-items: start;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 0 auto;
  white-space: nowrap;
}
.footer a {
  color: inherit;
  text-decoration: none;
}
.footer a:hover {
  text-decoration: underline;
}

/* ---------- playground ---------- */

/* Playground uses a static header bar. The .header wrapper is height:0
 * by design (from the marketing site's animated-header pattern), which
 * means a fixed/sticky bar renders *over* subsequent content. Making
 * the bar position: sticky top:0 keeps it visible, and .playground
 * carries top padding equal to the bar's height so the mode toggle
 * isn't hidden underneath it. */
.header__bar.is-static {
  position: sticky;
  top: 0;
  transform: none;
  transition: none;
}

.playground {
  /* 88px top clears the ~70px sticky header + small breathing room. */
  padding: 88px 32px 80px;
  background: var(--cream);
}

.playground-app {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
  margin: 0;
}

.pane {
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
  min-height: 0;
  min-width: 0;
}

.pane__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 20px;
}

.pane--raw {
  background: transparent;
  color: var(--ink);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.raw-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 14px;
}

.raw-filter button {
  background: transparent;
  border: 1px solid rgba(110, 110, 110, 0.2);
  padding: 5px 10px;
  border-radius: 100px;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.raw-filter button:hover {
  border-color: var(--ink);
  color: #333;
}

.raw-filter button.is-active {
  background: #1e2a1e;
  border-color: #1e2a1e;
  color: #f4ecd8;
}

.pane--raw pre {
  flex: 1;
  margin: 0;
  overflow: auto;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  line-height: 1.6;
  color: #333;
  white-space: pre;
}

.pane--raw .placeholder {
  color: var(--ink);
  opacity: 0.5;
  font-style: italic;
}

.search {
  position: relative;
  margin: 0 0 28px;
}

.search__input {
  width: 100%;
  padding: 14px 48px 14px 18px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333;
  background: #fff;
  border: 1px solid rgba(110, 110, 110, 0.2);
  border-radius: 100px;
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.search__input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(66, 133, 244, 0.12);
}

.search__submit {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 100px;
  background: var(--blue-deep);
  color: var(--cream);
  cursor: pointer;
  font-size: 0.9375rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.18s ease;
}

.search__submit:hover {
  background: var(--blue);
}

.search__submit:disabled {
  opacity: 0.5;
  cursor: wait;
}

.tiles-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 12px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.tile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  border: none;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: transform 0.18s ease;
  width: 100%;
}

.tile:hover {
  transform: translateY(-2px);
}

.tile__swatch {
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  width: 100%;
  background-size: cover;
  background-position: center;
  transition: background-image 0.35s ease;
}

.tile__caption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.tile__common {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.8125rem;
  line-height: 1.15;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile__scientific {
  font-size: 0.6875rem;
  font-style: italic;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tile[aria-pressed="true"] .tile__common {
  color: var(--blue);
}

/* Tile gradients — hand-picked per species */
.tile--elephant  { background: linear-gradient(135deg, #e9d3ac, #a17c4c); }
.tile--tiger     { background: linear-gradient(135deg, #f2b06e, #7a3a10); }
.tile--panda     { background: linear-gradient(135deg, #f2ede0, #262626); }
.tile--snowleo   { background: linear-gradient(135deg, #cfd8e0, #4b5766); }
.tile--whale     { background: linear-gradient(135deg, #7ea5d0, #113a90); }
.tile--turtle    { background: linear-gradient(135deg, #a8d5c1, #2f6a55); }
.tile--glowworm  { background: linear-gradient(135deg, #1b3a1b, #b9e15b); }
.tile--eagle     { background: linear-gradient(135deg, #d9c9a7, #4a3418); }
.tile--lion      { background: linear-gradient(135deg, #e8b979, #7d4d1a); }
.tile--cheetah   { background: linear-gradient(135deg, #efd9a8, #a67a3f); }
.tile--kakapo    { background: linear-gradient(135deg, #b0c48a, #3a5a2b); }
.tile--komodo    { background: linear-gradient(135deg, #cbb28a, #574326); }

/* Location tiles — biome-themed gradients */
.tile--savanna    { background: linear-gradient(135deg, #e8c580, #a3792d); }
.tile--rainforest { background: linear-gradient(135deg, #4b8f4a, #1a3d1a); }
.tile--reef       { background: linear-gradient(135deg, #7cc7d5, #08344a); }
.tile--desert     { background: linear-gradient(135deg, #e9c179, #a45620); }
.tile--tundra     { background: linear-gradient(135deg, #dce7ec, #6d8494); }
.tile--wetland    { background: linear-gradient(135deg, #a3c9a3, #24594c); }
.tile--montane    { background: linear-gradient(135deg, #b1a894, #4b3d2b); }
.tile--boreal     { background: linear-gradient(135deg, #7ea08a, #244228); }
.tile--islands    { background: linear-gradient(135deg, #b9dbe9, #1e6376); }
.tile--mangrove   { background: linear-gradient(135deg, #7d8f4b, #2c4227); }
.tile--cloudforest { background: linear-gradient(135deg, #b8ccb3, #3d6350); }
.tile--arctic     { background: linear-gradient(135deg, #f0f4f7, #a4bcc9); }

/* Mode toggle at top of controls pane */
.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: rgba(110, 110, 110, 0.08);
  border-radius: 100px;
  margin-bottom: 24px;
}

.mode-toggle button {
  padding: 8px 12px;
  border: none;
  background: transparent;
  border-radius: 100px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}

.mode-toggle button.is-active {
  background: var(--cream);
  color: #333;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.mode-panel[hidden] { display: none; }

/* Coord input group for custom location entry */
.coord-input {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  margin-bottom: 12px;
}

.coord-input input {
  padding: 10px 12px;
  border: 1px solid rgba(110, 110, 110, 0.2);
  border-radius: 6px;
  background: #fff;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: #333;
  outline: none;
}

.coord-input input:focus {
  border-color: var(--blue);
}

.coord-input button {
  border: none;
  background: var(--blue-deep);
  color: var(--cream);
  padding: 0 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.8rem;
}

.coord-hint {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink);
  margin: 0 0 16px;
  opacity: 0.7;
}

/* Response */

.response {
  min-height: 40px;
}

.response__empty {
  padding: 60px 0;
  text-align: center;
  color: var(--ink);
  font-size: 0.9375rem;
}

.response__loading {
  padding: 60px 0;
  text-align: center;
  color: var(--ink);
  font-size: 0.9375rem;
}

.response__loading::after {
  content: "…";
  animation: loadingDots 1.4s steps(3, end) infinite;
}

@keyframes loadingDots {
  0%   { content: "."; }
  33%  { content: ".."; }
  66%  { content: "..."; }
  100% { content: "."; }
}

.result {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.result__header {
  padding: 0;
  border: none;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.result__banner {
  aspect-ratio: 4 / 3;
  width: 112px;
  flex-shrink: 0;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
}

.result__description {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

.result__description-attrib {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
}

.result__description-attrib a {
  color: var(--link);
}

.result__header-text {
  flex: 1;
  min-width: 0;
}

.result__scientific {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 0 0 4px;
}

.result__common {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.05;
  color: #333;
  margin: 0 0 12px;
}

.result__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.iucn-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
}

.iucn-badge--lc { background: #6a9c48; }
.iucn-badge--nt { background: #b5a742; }
.iucn-badge--vu { background: #d4923a; }
.iucn-badge--en { background: #c95a2d; }
.iucn-badge--cr { background: #9a3325; }
.iucn-badge--ex { background: #333; }
.iucn-badge--unk { background: #999; }

.cites-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 100px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #fff;
}

.cites-badge--I   { background: #7a3a10; }
.cites-badge--II  { background: #b78040; }
.cites-badge--III { background: #c0a95b; }

/* Rich status blocks (Conservation Status, Trade Regulation) —
 * consistent editorial format for classification-based data. */
.status-block__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.status-block__summary {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: #333;
  margin: 0;
}

.status-block__summary + .status-block__summary {
  margin-top: 10px;
}

.status-block__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.status-block__meta span::before {
  content: "· ";
  color: rgba(110, 110, 110, 0.5);
}

.status-block__meta span:first-child::before {
  content: "";
}

.status-block__link {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--link);
}

/* CITES listing breakdown: each entry is a mini-card with appendix,
 * effective date, party (if country-specific), and the annotation text. */
.listing-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 20px;
}

.listing-entry {
  padding: 12px 14px;
  border: 1px solid rgba(110, 110, 110, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
}

.listing-entry__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.listing-entry__appendix {
  padding: 2px 8px;
  border-radius: 100px;
  font-weight: 600;
  color: #fff;
}

.listing-entry__appendix--I   { background: #7a3a10; }
.listing-entry__appendix--II  { background: #b78040; }
.listing-entry__appendix--III { background: #c0a95b; }

.listing-entry__party {
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(66, 133, 244, 0.1);
  color: #333;
}

.listing-entry__annotation {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #333;
  margin: 0;
}

/* Compact enforcement summary */
.enforcement {
  display: flex;
  gap: 24px;
  margin-top: 20px;
  padding: 12px 14px;
  background: rgba(110, 110, 110, 0.06);
  border-radius: 6px;
  font-size: 0.8125rem;
}

.enforcement__cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.enforcement__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
}

.enforcement__value {
  color: #333;
  font-weight: 500;
}

.enforcement__value strong {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #333;
  font-weight: 500;
}

/* GBIF descriptive prose — one row per subject with a small label. */
.descriptions {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.descriptions__block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.descriptions__subject {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0;
}

.descriptions__text {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
}

.descriptions__source {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  opacity: 0.7;
  margin: 0;
}

/* Recent sightings list */
.sightings {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sightings__row {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(110, 110, 110, 0.08);
  align-items: baseline;
  font-size: 0.875rem;
}

.sightings__row:last-child { border-bottom: none; }

.sightings__date {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--ink);
}

.sightings__country {
  color: #333;
}

.sightings__coords {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink);
  white-space: nowrap;
}

.sightings__dataset {
  grid-column: 2 / 4;
  font-size: 0.75rem;
  color: var(--ink);
  opacity: 0.75;
  margin-top: -2px;
}

/* Nomenclatural byline in taxonomy section */
.taxonomy-byline {
  font-size: 0.8125rem;
  color: var(--ink);
  margin-top: 14px;
}

.taxonomy-byline em {
  font-style: italic;
}

/* Traits: stat cards for biological facts (Wikidata) */
.traits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 14px;
}

@media (min-width: 900px) {
  .traits { grid-template-columns: repeat(4, 1fr); }
}

.trait__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 4px;
}

.trait__value {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.trait__unit {
  font-size: 0.8rem;
  color: var(--ink);
  font-weight: 400;
  margin-left: 4px;
}

.ext-ids {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.ext-id {
  padding: 4px 10px;
  border-radius: 100px;
  background: rgba(66, 133, 244, 0.08);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: #333;
  text-decoration: none;
}

.ext-id:hover {
  background: rgba(66, 133, 244, 0.16);
  text-decoration: none;
}

.ext-id__src {
  color: var(--ink);
  margin-right: 4px;
}

/* Photo gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

@media (min-width: 640px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

.gallery__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-decoration: none;
  color: inherit;
}

.gallery__item:hover { text-decoration: none; }

.gallery__image {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  background-color: rgba(110, 110, 110, 0.1);
}

.gallery__caption {
  font-size: 0.7rem;
  color: var(--ink);
  line-height: 1.35;
}

.gallery__licence {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.65rem;
}

.result__pill {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink);
  padding: 6px 10px;
  border: 1px solid rgba(110, 110, 110, 0.2);
  border-radius: 100px;
}

.result__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.result__section {
  padding: 0;
  border: none;
}

.result__section-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink);
  margin: 0 0 14px;
}

.taxonomy {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.taxonomy__pill {
  font-size: 0.8125rem;
  color: #333;
  padding: 4px 10px;
  background: rgba(66, 133, 244, 0.08);
  border-radius: 100px;
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.stat__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 4px;
}

.stat__value {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.countries {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.country {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 0.9375rem;
}

.country__name {
  color: #333;
}

.country__count {
  font-family: var(--font-mono);
  color: var(--ink);
  font-size: 0.8125rem;
}

.vernacular__grid {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: 12px 24px;
}

.vernacular__lang {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 4px;
}

.vernacular__names {
  font-size: 0.875rem;
  color: #333;
  margin: 0;
}

.sources {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}

.source__provider {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  color: #333;
}

.source__licence {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink);
  margin-left: 8px;
}

/* Error */
.result--error .result__common {
  font-size: 1.25rem;
  color: #c95a2d;
}

.result--error p {
  color: var(--ink);
}

/* Encounter-mode middle-pane presentation */

.enc-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.enc-header__place {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.1;
  color: #333;
  margin: 0;
}

.enc-header__coords {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink);
}

.enc-header__meta {
  font-size: 0.8125rem;
  color: var(--ink);
  margin-top: 8px;
}

.when-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 20px;
  padding: 16px;
  border: 1px solid rgba(110, 110, 110, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
}

@media (min-width: 900px) {
  .when-strip { grid-template-columns: repeat(4, 1fr); }
}

.when-strip__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink);
  margin: 0 0 4px;
}

.when-strip__value {
  font-family: var(--font-display);
  font-size: 1rem;
  color: #333;
  margin: 0;
}

.when-strip__value--range {
  font-family: var(--font-mono);
  font-size: 0.85rem;
}

.candidate-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.candidate {
  display: flex;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(110, 110, 110, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  text-align: left;
  width: 100%;
  font-family: inherit;
  font-size: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.candidate:hover {
  border-color: var(--blue);
  background: rgba(66, 133, 244, 0.05);
  text-decoration: none;
}

.candidate__image {
  aspect-ratio: 4 / 3;
  width: 96px;
  flex-shrink: 0;
  border-radius: 4px;
  background-size: cover;
  background-position: center;
  background-color: rgba(110, 110, 110, 0.1);
}

.candidate__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.candidate__top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.candidate__names {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.candidate__common {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: #333;
}

.candidate__scientific {
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--ink);
}

.candidate__badges {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}

.candidate__confidence {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--ink);
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(110, 110, 110, 0.1);
}

.candidate__meta {
  margin-top: 8px;
  font-size: 0.8rem;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}

.candidate__meta span::before {
  content: "· ";
  color: rgba(110, 110, 110, 0.4);
}

.candidate__meta span:first-child::before { content: ""; }

.candidate__flag {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 100px;
  background: rgba(201, 90, 45, 0.12);
  color: #7a3a10;
}

.candidate__flag--seasonal {
  background: rgba(106, 156, 72, 0.15);
  color: #3d5c3f;
}

.class-breakdown {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.class-breakdown__pill {
  padding: 4px 12px;
  border-radius: 100px;
  background: rgba(66, 133, 244, 0.08);
  font-size: 0.8125rem;
  color: #333;
}

.class-breakdown__pill strong {
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  margin-right: 4px;
}

/* Protected areas list */
.pa-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pa-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(110, 110, 110, 0.12);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  font-size: 0.875rem;
  flex-wrap: wrap;
}

.pa-row__distance {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink);
  min-width: 60px;
}

.pa-row__name {
  color: #333;
  font-family: var(--font-display);
  font-weight: 500;
  flex: 1;
  min-width: 0;
}

.pa-row__cat {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(106, 156, 72, 0.15);
  color: #3d5c3f;
}

.pa-row__wdpa {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink);
  opacity: 0.7;
}

/* Empty state — used in the middle pane before a query */
.empty-state {
  color: var(--ink);
  font-size: 0.9375rem;
  padding: 40px 0;
  text-align: center;
}

/* Sequential reveal animations
 * Each element with .reveal or .raw-line uses its --i inline var to
 * stagger. Middle sections do a slide-up fade; JSON lines just fade in
 * (inline elements don't transform gracefully). */

.reveal {
  opacity: 0;
  transform: translateY(8px);
  animation: reveal-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i, 0) * 80ms);
}

@keyframes reveal-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.raw-line {
  opacity: 0;
  animation: raw-line-in 0.3s ease-out forwards;
  animation-delay: calc(var(--i, 0) * 10ms + 120ms);
}

@keyframes raw-line-in {
  to {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .raw-line {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ---------- breakpoints ---------- */

@media (min-width: 640px) {
  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 900px) {
  .playground-app {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 40px;
  }

  .tiles {
    grid-template-columns: repeat(3, 1fr);
  }

  .result__body {
    grid-template-columns: 1fr 1fr;
  }

  .result__section--wide {
    grid-column: 1 / -1;
  }

  .vernacular__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Raw JSON pane: stick to the top and scroll its own body so the page
   * doesn't grow just because the JSON is long. */
  .pane--raw {
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    align-self: start;
  }

  .pane--raw pre {
    min-height: 0;
  }
}

@media (min-width: 768px) {
  .header__logo {
    height: 30px;
  }
  .header__logo-mark {
    font-size: 1.0625rem;
  }
  .header__links {
    gap: 24px;
  }
  .header__links a {
    font-size: 1rem;
  }

  .hero__foreground {
    padding: 240px 60px;
  }
  .hero__content p {
    font-size: 2.25rem;
  }

  #letter {
    padding: 160px 0;
  }
  #letter .grid__col {
    grid-column: 2 / span 4;
  }
  #letter p {
    font-size: 1.25rem;
    line-height: 1.5;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .card__heading {
    font-size: 1.25rem;
  }
  .card__subheading,
  .card__cta {
    font-size: 1rem;
  }

  .heading-3 {
    font-size: 2rem;
  }

  .footer {
    font-size: 1rem;
  }
}

@media (min-width: 1024px) {
  .hero__foreground {
    padding: 60px;
  }
  .hero__content {
    max-width: 1072px;
  }
  .hero__content p {
    font-size: 3.375rem;
    line-height: 1.15;
  }
  .hero__logo {
    font-size: clamp(4.5rem, 9vw, 8.5rem);
  }

  #letter .grid__col {
    grid-column: 3 / span 2;
  }

  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---------- sources ---------- */
/* See STYLEGUIDE.md — restrained: one dominant font, no chips as
 * labels, sentence case, no eyebrows above headings. */

/* Homepage strip (index.html #sources) */

.sources-strip {
  background: var(--cream);
  padding: 80px 0 120px;
  position: relative;
  z-index: 2;
}
.sources-strip__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.sources-strip__head {
  max-width: 640px;
}
.sources-strip__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #333;
  margin: 0 0 16px;
}
.sources-strip__lede {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
}
.sources-strip__list {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Source card — same shell for homepage strip and /sources.html grid */

.sources-grid > li,
.sources-strip__list > li {
  display: flex;
}

.source-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: #fff;
  border: 1px solid rgba(110, 110, 110, 0.18);
  border-radius: 6px;
  color: inherit;
  text-decoration: none;
  width: 100%;
  height: 100%;
  transition: border-color 0.2s ease, transform 0.15s ease,
    box-shadow 0.2s ease;
}
.source-card:hover {
  border-color: rgba(17, 58, 144, 0.45);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(17, 58, 144, 0.06);
  text-decoration: none;
}
.source-card:focus-visible {
  outline: 2px solid #113a90;
  outline-offset: 2px;
}
.source-card--button {
  appearance: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  width: 100%;
}
.source-card__logo {
  height: 26px;
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.source-card__logo img {
  height: 100%;
  width: auto;
  max-width: 160px;
  object-fit: contain;
  object-position: left center;
}

.source-card__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.source-card__name {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.25;
  color: #333;
  margin: 0;
}
.source-card__sub {
  font-size: 0.9375rem;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}
.source-card__role {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  flex: 1;
}
.source-card__foot-line {
  font-size: 0.8125rem;
  color: var(--ink);
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid rgba(110, 110, 110, 0.12);
}

.sources-strip__cta {
  display: flex;
}
.sources-strip__button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.sources-strip__button:hover {
  background: #113a90;
  border-color: #113a90;
  color: var(--cream);
  text-decoration: none;
}

/* /sources.html page */

.sources-page {
  background: var(--cream);
  padding-top: 120px;
  padding-bottom: 120px;
}
.sources-page__intro {
  padding-bottom: 64px;
}
.sources-page__intro-col {
  max-width: 720px;
}
.sources-page__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 3.25rem);
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: #333;
  margin: 0 0 28px;
}
.sources-page__lede {
  font-size: 1.125rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 16px;
}
.sources-page__lede-sub {
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 0;
}
.sources-page__lede-sub a,
.sources-page__lede a {
  color: #113a90;
}

.sources-page__grid-section {
  padding-bottom: 48px;
}
.sources-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  list-style: none;
  padding: 0;
  margin: 0;
}

.sources-page__foot {
  padding-top: 72px;
  border-top: 1px solid rgba(110, 110, 110, 0.18);
  margin-top: 24px;
}
.sources-page__foot-col {
  max-width: 720px;
}
.sources-page__foot-title {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 500;
  color: #333;
  margin: 0 0 12px;
}
.sources-page__foot-prose {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 0;
}
.sources-page__foot-prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 2px 6px;
  background: rgba(17, 58, 144, 0.08);
  color: #113a90;
  border-radius: 4px;
}

/* Side panel */

.panel-scrim {
  position: fixed;
  inset: 0;
  background: rgba(20, 20, 30, 0);
  z-index: 400;
  transition: background 0.25s ease;
}
body.panel-open .panel-scrim {
  background: rgba(20, 20, 30, 0.4);
}

.panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100dvh;
  width: min(480px, 100vw);
  background: var(--cream);
  border-left: 1px solid rgba(110, 110, 110, 0.15);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.12);
  z-index: 500;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}
body.panel-open .panel {
  transform: translateX(0);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 20px 4px;
  flex-shrink: 0;
}
.panel__close {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(110, 110, 110, 0.25);
  border-radius: 100px;
  width: 34px;
  height: 34px;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.panel__close:hover {
  background: #113a90;
  border-color: #113a90;
  color: var(--cream);
}
.panel__close:focus-visible {
  outline: 2px solid #113a90;
  outline-offset: 2px;
}

.panel__body {
  padding: 8px 28px 40px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.panel__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.panel__logo {
  height: 36px;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}
.panel__logo img {
  height: 100%;
  width: auto;
  max-width: 220px;
  object-fit: contain;
  object-position: left center;
}
.panel__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #333;
  margin: 0;
}
.panel__sub {
  font-size: 1rem;
  font-style: italic;
  color: var(--ink);
  margin: 0;
}
.panel__meta-line {
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 8px 0 0;
}

.panel__section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.panel__section-heading {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333;
  margin: 0;
}
.panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.9375rem;
  color: #333;
  line-height: 1.5;
}
.panel__list li {
  padding-left: 16px;
  position: relative;
}
.panel__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.65em;
  width: 6px;
  height: 1px;
  background: var(--ink);
}
.panel__prose {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: #333;
  margin: 0;
}
.panel__prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 2px 6px;
  background: rgba(17, 58, 144, 0.08);
  color: #113a90;
  border-radius: 4px;
}
.panel__prose a {
  color: #113a90;
}

.panel__section--caveat {
  border-left: 2px solid rgba(193, 155, 82, 0.6);
  padding-left: 16px;
}

.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding-top: 4px;
}
.panel__link {
  font-size: 0.9375rem;
  color: #113a90;
  text-decoration: none;
  border-bottom: 1px solid rgba(17, 58, 144, 0.35);
  padding-bottom: 2px;
}
.panel__link:hover {
  border-bottom-color: #113a90;
  text-decoration: none;
}

body.panel-open {
  overflow: hidden;
}

@media (min-width: 640px) {
  .sources-grid,
  .sources-strip__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 768px) {
  .sources-strip__title {
    font-size: 2.25rem;
  }
}
@media (min-width: 1280px) {
  .sources-grid,
  .sources-strip__list {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* ---------- hero subhead ---------- */

.hero__subhead {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--cream);
  opacity: 0.85;
  margin: 24px auto 0;
  max-width: 480px;
  text-align: center;
}

@media (min-width: 768px) {
  .hero__subhead {
    font-size: 1.0625rem;
    max-width: 620px;
    margin-top: 28px;
  }
}

/* ---------- widget demo ---------- */

.widget-demo {
  background: var(--cream);
  padding: 100px 0;
  position: relative;
  z-index: 2;
}

.widget-demo__inner {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1024px;
}

.widget-demo__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #333;
  margin: 0;
}

.widget-demo__lede {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 640px;
}

.widget-demo__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  border-bottom: 1px solid rgba(110, 110, 110, 0.18);
}

.widget-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 12px 0;
  margin-bottom: -1px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.widget-tab:hover {
  color: #333;
}
.widget-tab.is-active {
  color: #113a90;
  border-bottom-color: #113a90;
}
.widget-tab:focus-visible {
  outline: 2px solid #113a90;
  outline-offset: 4px;
  border-radius: 2px;
}

.widget {
  background: #fff;
  border: 1px solid rgba(110, 110, 110, 0.15);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(17, 58, 144, 0.06);
  overflow: hidden;
}

.w-inner {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: relative;
}

.w-brand {
  position: absolute;
  top: 20px;
  right: 24px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.6;
}

.w-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.w-location {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #333;
  margin: 0;
}

.w-season {
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 0;
}

.w-panel-label {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.w-species-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 24px 40px;
  grid-template-columns: 1fr;
}

.w-species {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.w-species__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.w-species__common {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: #333;
  margin: 0;
  line-height: 1.25;
}

.w-species__scientific {
  font-size: 0.8125rem;
  color: var(--ink);
  margin: 2px 0 0;
  line-height: 1.3;
}

.w-species__note {
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

.w-attrib {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--ink);
  opacity: 0.7;
  margin: 12px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(110, 110, 110, 0.12);
}

.widget-demo__foot {
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 0;
}

@media (min-width: 640px) {
  .w-species-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  .w-inner {
    padding: 40px 44px;
    gap: 28px;
  }
  .w-brand {
    top: 24px;
    right: 28px;
  }
  .w-location {
    font-size: 1.875rem;
  }
}

/* ---------- how it works ---------- */

.how-it-works {
  background: var(--cream);
  padding: 80px 0 120px;
  position: relative;
  z-index: 2;
  border-top: 1px solid rgba(110, 110, 110, 0.14);
}

.how-it-works__inner {
  display: flex;
  flex-direction: column;
  gap: 48px;
  max-width: 1024px;
}

.how-it-works__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #333;
  margin: 0;
}

.how-it-works__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 40px;
  grid-template-columns: 1fr;
}

.step {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 20px;
  align-items: start;
}

.step__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2.5rem;
  line-height: 1;
  color: #113a90;
  opacity: 0.65;
}

.step__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.step__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1.125rem;
  color: #333;
  margin: 0;
  line-height: 1.3;
}

.step__text {
  font-size: 0.9375rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0;
}

.step__text code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 2px 6px;
  background: rgba(17, 58, 144, 0.08);
  color: #113a90;
  border-radius: 4px;
}

@media (min-width: 900px) {
  .how-it-works__steps {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
  .step {
    grid-template-columns: 1fr;
  }
  .step__num {
    font-size: 3rem;
    margin-bottom: 4px;
  }
}

/* ---------- CTA band ---------- */

.cta-band {
  background: var(--cream);
  padding: 96px 0 120px;
  border-top: 1px solid rgba(110, 110, 110, 0.14);
}

.cta-band__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  max-width: 720px;
}

.cta-band__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #333;
  margin: 0;
}

.cta-band__lede {
  font-size: 1.0625rem;
  color: var(--ink);
  line-height: 1.55;
  margin: 0 0 8px;
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.button-primary,
.button-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  border-radius: 100px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.button-primary {
  background: #113a90;
  color: var(--cream);
  border: 1px solid #113a90;
}
.button-primary:hover {
  background: #0d2f76;
  border-color: #0d2f76;
  color: var(--cream);
  text-decoration: none;
}

.button-secondary {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}
.button-secondary:hover {
  background: var(--ink);
  color: var(--cream);
  text-decoration: none;
}

/* ---------- GBIF upstream datasets ---------- */

.datasets-section {
  padding: 96px 0;
  border-top: 1px solid rgba(110, 110, 110, 0.18);
}

.datasets-section__inner {
  max-width: 960px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.datasets-section__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: #333;
  margin: 0;
}

.datasets-section__lede {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  margin: 0;
  max-width: 720px;
}

.datasets-section__sub {
  font-size: 0.9375rem;
  color: var(--ink);
  margin: 4px 0 12px;
}

.datasets-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  grid-template-columns: 1fr;
  border-top: 1px solid rgba(110, 110, 110, 0.14);
}

.dataset-card {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  column-gap: 16px;
  row-gap: 2px;
  align-items: baseline;
  padding: 16px 0;
  border-bottom: 1px solid rgba(110, 110, 110, 0.14);
}

.dataset-card__rank {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink);
  opacity: 0.55;
  margin: 0;
  grid-row: 1;
  grid-column: 1;
}

.dataset-card__title {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.3;
  color: #333;
  margin: 0;
  grid-row: 1;
  grid-column: 2;
}

.dataset-card__pub {
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.4;
  margin: 0;
  grid-row: 2;
  grid-column: 2;
}

.dataset-card__count {
  font-size: 0.8125rem;
  color: var(--ink);
  margin: 0;
  white-space: nowrap;
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
  padding-left: 12px;
}

.datasets-section__foot {
  margin: 20px 0 0;
  font-size: 0.9375rem;
}

.datasets-section__foot a {
  color: #113a90;
  text-decoration: none;
  border-bottom: 1px solid rgba(17, 58, 144, 0.35);
  padding-bottom: 2px;
}
.datasets-section__foot a:hover {
  border-bottom-color: #113a90;
  text-decoration: none;
}

@media (min-width: 900px) {
  .datasets-grid {
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }
}

/* ============================================================ */
/* Landing page (index.html) — single-viewport, split stage.    */
/* Gated on body.landing-page so other pages are unaffected.    */
/* ============================================================ */

body.landing-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ---------- topbar ---------- */

body.landing-page .topbar {
  flex: 0 0 auto;
  background: var(--cream);
  border-bottom: 1px solid rgba(110, 110, 110, 0.14);
  z-index: 50;
}
body.landing-page .topbar__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 14px 24px;
  max-width: 1440px;
  margin: 0 auto;
}
body.landing-page .topbar__brand {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
}
body.landing-page .topbar__brand:hover {
  text-decoration: none;
  color: #333;
}

body.landing-page .topbar__nav {
  display: flex;
  gap: 4px;
  align-items: center;
}
body.landing-page .topbar__link {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 12px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  text-decoration: none;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
body.landing-page .topbar__link:hover {
  color: #333;
  background: rgba(110, 110, 110, 0.08);
  text-decoration: none;
}
body.landing-page .topbar__link--menu {
  position: relative;
}
body.landing-page .topbar__caret {
  font-size: 0.7em;
  opacity: 0.7;
  transition: transform 0.15s ease;
}
body.landing-page .topbar__group.is-open .topbar__caret {
  transform: rotate(180deg);
}
body.landing-page .topbar__group {
  position: relative;
}

body.landing-page .topbar__menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 320px;
  background: #fff;
  border: 1px solid rgba(110, 110, 110, 0.18);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(17, 58, 144, 0.08);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 100;
}
body.landing-page .topbar__menu-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-radius: 6px;
  color: #333;
  text-decoration: none;
}
body.landing-page .topbar__menu-item:hover {
  background: rgba(17, 58, 144, 0.06);
  text-decoration: none;
}
body.landing-page .topbar__menu-name {
  font-weight: 500;
  font-size: 0.9375rem;
  color: #333;
}
body.landing-page .topbar__menu-sub {
  font-size: 0.8125rem;
  color: var(--ink);
  line-height: 1.4;
}

body.landing-page .topbar__actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
body.landing-page .topbar__signin {
  padding: 8px 12px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-radius: 6px;
}
body.landing-page .topbar__signin:hover {
  color: #333;
  background: rgba(110, 110, 110, 0.08);
  text-decoration: none;
}
body.landing-page .topbar__cta {
  padding: 8px 16px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--cream);
  background: #113a90;
  border: 1px solid #113a90;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.15s ease;
}
body.landing-page .topbar__cta:hover {
  background: #0d2f76;
  text-decoration: none;
  color: var(--cream);
}

/* ---------- stage ---------- */

body.landing-page .stage {
  flex: 1 1 auto;
  min-height: 0;
  background: var(--cream);
  overflow: hidden;
  position: relative;
}

/* Multi-screen slider using absolute positioning — deterministic at
 * any viewport width. Each screen fills the stage; transforms swap
 * them. Belt-and-braces: overflow: hidden on the slider clips any
 * transformed-off screens whose parent .stage overflow: hidden might
 * miss on ultra-wide displays where sub-pixel rounding leaks. */
body.landing-page .stage__slider {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
body.landing-page .screen {
  position: absolute;
  /* Explicit left/right/width instead of `inset: 0` — inset combined
   * with min-width:0 was allowing the screen to render at a negative
   * left offset on some viewports. Pinning left+width guarantees the
   * screen fills its containing block, no matter what. */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  min-width: 0;
  transition: transform 520ms cubic-bezier(0.4, 0.05, 0.15, 1);
  will-change: transform;
  /* Off-view screens are fully hidden. Visibility flips *with* the
   * transform, so we can't see the wrong view even if a transform is
   * dropped or the browser skips the transition for any reason. */
  visibility: hidden;
  pointer-events: none;
}
body.landing-page .stage__slider[data-view="landing"] .screen--landing,
body.landing-page .stage__slider[data-view="datasets"] .screen--datasets,
body.landing-page .stage__slider[data-view="api"] .screen--api,
body.landing-page .stage__slider[data-view="mcp"] .screen--mcp,
body.landing-page .stage__slider[data-view="widget"] .screen--widget,
body.landing-page .stage__slider[data-view="sightings"] .screen--sightings,
body.landing-page .stage__slider[data-view="pricing"] .screen--pricing {
  visibility: visible;
  pointer-events: auto;
  z-index: 1;
}
/* Keep the outgoing screen visible for the duration of the transition
 * — otherwise it would pop out immediately. */
body.landing-page .screen {
  transition: transform 520ms cubic-bezier(0.4, 0.05, 0.15, 1),
              visibility 0s linear 520ms;
}
body.landing-page .stage__slider[data-view="landing"] .screen--landing,
body.landing-page .stage__slider[data-view="datasets"] .screen--datasets,
body.landing-page .stage__slider[data-view="api"] .screen--api,
body.landing-page .stage__slider[data-view="mcp"] .screen--mcp,
body.landing-page .stage__slider[data-view="widget"] .screen--widget,
body.landing-page .stage__slider[data-view="sightings"] .screen--sightings,
body.landing-page .stage__slider[data-view="pricing"] .screen--pricing {
  transition: transform 520ms cubic-bezier(0.4, 0.05, 0.15, 1),
              visibility 0s;
}
body.landing-page .screen--landing {
  transform: translateX(0);
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
}
body.landing-page .screen--datasets,
body.landing-page .screen--api,
body.landing-page .screen--mcp,
body.landing-page .screen--widget,
body.landing-page .screen--sightings,
body.landing-page .screen--pricing {
  transform: translateX(100%);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px 64px 32px;
  color: rgba(255, 255, 255, 0.9);
  overflow: hidden;
}
body.landing-page .screen--datasets > *,
body.landing-page .screen--api > *,
body.landing-page .screen--mcp > *,
body.landing-page .screen--widget > *,
body.landing-page .screen--sightings > *,
body.landing-page .screen--pricing > * {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  box-sizing: border-box;
}

/* Any non-landing view: landing slides left, target view slides to 0 */
body.landing-page .stage__slider[data-view="datasets"] .screen--landing,
body.landing-page .stage__slider[data-view="api"] .screen--landing,
body.landing-page .stage__slider[data-view="mcp"] .screen--landing,
body.landing-page .stage__slider[data-view="widget"] .screen--landing,
body.landing-page .stage__slider[data-view="sightings"] .screen--landing,
body.landing-page .stage__slider[data-view="pricing"] .screen--landing {
  transform: translateX(-100%);
}
body.landing-page .stage__slider[data-view="datasets"] .screen--datasets,
body.landing-page .stage__slider[data-view="api"] .screen--api,
body.landing-page .stage__slider[data-view="mcp"] .screen--mcp,
body.landing-page .stage__slider[data-view="widget"] .screen--widget,
body.landing-page .stage__slider[data-view="sightings"] .screen--sightings,
body.landing-page .stage__slider[data-view="pricing"] .screen--pricing {
  transform: translateX(0);
}

body.landing-page .stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  grid-template-rows: minmax(0, 1fr);
  gap: 96px;
  padding: 40px 64px;
  max-width: 1440px;
  width: 100%;
  margin: 0 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

body.landing-page .stage__left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  max-width: 620px;
  min-width: 0;
}

body.landing-page .stage__pre {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: #113a90;
  margin: 0;
}

body.landing-page .stage__headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #333;
  margin: 0;
}

body.landing-page .stage__subhead {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
}

body.landing-page .stage__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}
body.landing-page .stage__ctas .button-primary,
body.landing-page .stage__ctas .button-secondary {
  padding: 12px 20px;
  font-size: 0.9375rem;
}

body.landing-page .stage__right {
  display: flex;
  align-items: stretch;
  min-height: 0;
  min-width: 0;
  max-height: 100%;
}

/* ---------- demo card ---------- */

body.landing-page .demo {
  width: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(110, 110, 110, 0.15);
  border-radius: 10px;
  box-shadow: 0 16px 40px rgba(17, 58, 144, 0.08);
  overflow: hidden;
  min-height: 0;
}

body.landing-page .demo__chrome {
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(110, 110, 110, 0.12);
  padding: 8px 12px;
  background: #fafaf5;
}

body.landing-page .demo__tabs {
  display: flex;
  gap: 4px;
}

body.landing-page .demo-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 14px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  border-radius: 6px;
  transition: color 0.15s ease, background 0.15s ease;
}
body.landing-page .demo-tab:hover {
  color: #333;
}
body.landing-page .demo-tab.is-active {
  background: #fff;
  color: #113a90;
  box-shadow: 0 1px 2px rgba(17, 58, 144, 0.08);
}

body.landing-page .demo__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  padding: 0;
}

/* ---------- demo: REST ---------- */

.demo-rest {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
}
.demo-rest__pane {
  padding: 16px 20px;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}
.demo-rest__pane > * + * {
  margin-top: 8px;
}
.demo-rest__pane--req {
  background: #fafaf5;
  border-bottom: 1px solid rgba(110, 110, 110, 0.12);
}
.demo-rest__pane--res {
  background: #fff;
}
.demo-rest__label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0;
}
.demo-rest__code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: #333;
  margin: 0;
  white-space: pre;
}

@media (min-width: 900px) {
  .demo-rest {
    grid-template-rows: 1fr;
    grid-template-columns: 1fr 1fr;
  }
  .demo-rest__pane--req {
    border-bottom: 0;
    border-right: 1px solid rgba(110, 110, 110, 0.12);
  }
}

/* ---------- demo: Widget (mock browser + real iframe) ---------- */

.demo-widget {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 0;
}
.demo-widget__browser {
  border: 1px solid rgba(110, 110, 110, 0.18);
  border-radius: 10px;
  background: #fafaf6;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, 0.2);
}
.demo-widget__chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 12px;
  background: #efeee8;
  border-bottom: 1px solid rgba(110, 110, 110, 0.15);
}
.demo-widget__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d5d3ca;
}
.demo-widget__url {
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(110, 110, 110, 0.12);
  font-size: 0.75rem;
  color: var(--ink);
  flex: 1;
  max-width: 320px;
  text-align: center;
}
.demo-widget__page {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 20px;
  padding: 24px;
  overflow: auto;
}
.demo-widget__page-col--embed {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.demo-widget__eyebrow {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.75rem;
  color: #234e2e;
  margin: 0 0 8px;
  letter-spacing: 0.02em;
}
.demo-widget__heading {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 600;
  color: #2b2b2b;
  line-height: 1.15;
  margin: 0 0 12px;
  letter-spacing: -0.01em;
}
.demo-widget__body {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 12px;
}
.demo-widget__iframe {
  width: 100%;
  max-width: 420px;
  height: 560px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 8px 24px -14px rgba(0, 0, 0, 0.25);
}
.demo-widget__caption {
  font-size: 0.8125rem;
  color: var(--ink);
  margin: 0;
  padding: 0 4px;
  text-align: center;
}
.demo-widget__caption code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 1px 5px;
  background: rgba(17, 58, 144, 0.08);
  color: #113a90;
  border-radius: 3px;
}

@media (max-width: 720px) {
  .demo-widget__page {
    grid-template-columns: 1fr;
  }
  .demo-widget__iframe {
    height: 520px;
  }
}

/* ---------- demo: MCP chat ---------- */

.demo-mcp {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  overflow: auto;
}
.demo-mcp__msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 90%;
}
.demo-mcp__msg p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: #333;
}
.demo-mcp__msg--user {
  align-self: flex-end;
  background: rgba(17, 58, 144, 0.08);
  padding: 12px 16px;
  border-radius: 14px 14px 4px 14px;
}
.demo-mcp__msg--assistant {
  align-self: flex-start;
  background: #fafaf5;
  padding: 14px 18px;
  border-radius: 14px 14px 14px 4px;
  gap: 10px;
}
.demo-mcp__tool {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink);
  padding: 6px 10px;
  background: rgba(110, 110, 110, 0.08);
  border-radius: 6px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.demo-mcp__tool-icon {
  color: #113a90;
}
.demo-mcp__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.demo-mcp__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  font-size: 0.875rem;
  color: #333;
}
.demo-mcp__list li em {
  color: var(--ink);
  font-size: 0.8125rem;
}
.demo-mcp__list li span:first-child {
  font-weight: 500;
}
.demo-mcp__attrib {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink);
  opacity: 0.7;
  margin: 6px 0 0;
}

/* ---------- trust strip ---------- */

body.landing-page .trust-strip {
  flex: 0 0 auto;
  border-top: 1px solid rgba(110, 110, 110, 0.14);
  background: var(--cream);
}
body.landing-page .trust-strip__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 14px 64px;
  max-width: 1440px;
  margin: 0 auto;
}
body.landing-page .trust-strip__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  opacity: 0.7;
}
body.landing-page .trust-strip__logos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 24px;
}
body.landing-page .trust-strip__logos img {
  height: 22px;
  width: auto;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: opacity 0.15s ease, filter 0.15s ease;
}
body.landing-page .trust-strip__logos li:hover img {
  filter: grayscale(0);
  opacity: 1;
}
body.landing-page .trust-strip__logos--text {
  flex-wrap: wrap;
  gap: 8px 10px;
}
body.landing-page .trust-strip__pill {
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid rgba(17, 58, 144, 0.18);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: #113a90;
  background: rgba(17, 58, 144, 0.04);
  opacity: 0.85;
  transition: opacity 0.15s ease, background 0.15s ease;
}
body.landing-page .trust-strip__logos--text li:hover .trust-strip__pill {
  opacity: 1;
  background: rgba(17, 58, 144, 0.08);
}
body.landing-page .trust-strip__link {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(17, 58, 144, 0.35);
  padding: 0 0 1px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: #113a90;
  text-decoration: none;
  cursor: pointer;
  margin-left: auto;
}
body.landing-page .trust-strip__link:hover {
  border-bottom-color: #113a90;
  text-decoration: none;
}

/* ---------- mobile stack ---------- */

@media (max-width: 900px) {
  body.landing-page {
    overflow: auto;
    height: auto;
    min-height: 100vh;
  }
  body.landing-page .topbar__inner {
    padding: 12px 16px;
    gap: 12px;
    grid-template-columns: auto 1fr;
  }
  body.landing-page .topbar__nav {
    display: none;
  }
  body.landing-page .topbar__actions {
    justify-content: flex-end;
  }
  body.landing-page .stage {
    display: block;
  }
  body.landing-page .stage__grid {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 32px 20px;
    overflow: visible;
  }
  body.landing-page .stage__left {
    max-width: none;
    gap: 16px;
  }
  body.landing-page .stage__right {
    height: 520px;
  }
  body.landing-page .demo__body {
    overflow: auto;
  }
  body.landing-page .trust-strip__inner {
    padding: 16px 20px;
    gap: 16px;
  }
  body.landing-page .trust-strip__link {
    margin-left: 0;
  }
  .demo-widget__list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  body.landing-page .stage__ctas {
    flex-direction: column;
    align-items: stretch;
  }
  body.landing-page .stage__ctas .button-primary,
  body.landing-page .stage__ctas .button-secondary {
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================ */
/* Landing page — dark full-bleed backdrop + adjustments        */
/* ============================================================ */

body.landing-page {
  background:
    linear-gradient(rgba(10, 14, 12, 0.55), rgba(8, 12, 10, 0.78)),
    url("./assets/backgrounds/hero.jpg") center 30% / cover no-repeat fixed,
    #0d1310;
  color: rgba(255, 255, 255, 0.9);
}

/* Topbar over dark image */
body.landing-page .topbar {
  background: rgba(10, 14, 12, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.landing-page .topbar__brand,
body.landing-page .topbar__link,
body.landing-page .topbar__signin {
  color: rgba(255, 255, 255, 0.88);
}
body.landing-page .topbar__brand:hover,
body.landing-page .topbar__link:hover,
body.landing-page .topbar__signin:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
body.landing-page .topbar__cta {
  background: #fff;
  color: #0d1310;
  border-color: #fff;
}
body.landing-page .topbar__cta:hover {
  background: #e8ede6;
  border-color: #e8ede6;
  color: #0d1310;
}

/* Products dropdown — force hidden state when [hidden] attr is present.
 * The default .topbar__menu display: flex was overriding the attribute. */
body.landing-page .topbar__menu[hidden] {
  display: none;
}

/* Stage over dark image */
body.landing-page .stage {
  background: transparent;
}
body.landing-page .stage__pre {
  color: #a9c6ff;
}
body.landing-page .stage__headline {
  color: #fff;
}
body.landing-page .stage__subhead {
  color: rgba(255, 255, 255, 0.72);
}
body.landing-page .stage__ctas .button-primary {
  background: #113a90;
  border-color: #113a90;
  color: #fff;
}
body.landing-page .stage__ctas .button-primary:hover {
  background: #0d2f76;
  border-color: #0d2f76;
}
body.landing-page .stage__ctas .button-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
}
body.landing-page .stage__ctas .button-secondary:hover {
  background: #fff;
  color: #0d1310;
  border-color: #fff;
}

/* Trust strip over dark image */
body.landing-page .trust-strip {
  background: rgba(10, 14, 12, 0.55);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  border-top-color: rgba(255, 255, 255, 0.08);
}
body.landing-page .trust-strip__label {
  color: rgba(255, 255, 255, 0.55);
}
body.landing-page .trust-strip__logos img {
  filter: brightness(0) invert(1);
  opacity: 0.7;
}
body.landing-page .trust-strip__pill {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
}
body.landing-page .trust-strip__logos--text li:hover .trust-strip__pill {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

/* Per-logo sizes — each source has a different native aspect ratio, so
 * one uniform height crushes the tall marks (IUCN, CITES) and dwarfs
 * the short wordmarks (Wikipedia). Sizes tuned so each mark reads with
 * roughly equal visual weight in the strip. */
body.landing-page .trust-strip__logos li:nth-child(1) img { /* GBIF */
  height: 26px;
  max-width: 100px;
}
body.landing-page .trust-strip__logos li:nth-child(2) img { /* IUCN Red List */
  height: 34px;
  max-width: 80px;
}
body.landing-page .trust-strip__logos li:nth-child(3) img { /* Wikipedia */
  height: 20px;
  max-width: 130px;
}
body.landing-page .trust-strip__logos li:nth-child(4) img { /* CITES */
  height: 34px;
  max-width: 80px;
}
body.landing-page .trust-strip__link {
  color: #a9c6ff;
  border-bottom-color: rgba(169, 198, 255, 0.35);
}
body.landing-page .trust-strip__link:hover {
  border-bottom-color: #a9c6ff;
}

/* Demo card — fills the right column exactly, no min-height floor
 * so it can't push past the viewport on short screens. */
body.landing-page .demo {
  height: 100%;
  min-height: 0;
}

/* ============================================================ */
/* Datasets modal                                               */
/* ============================================================ */

.datasets-modal[hidden] {
  display: none;
}
.datasets-modal {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.datasets-modal__scrim {
  position: absolute;
  inset: 0;
  background: rgba(5, 8, 6, 0.75);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.datasets-modal__card {
  position: relative;
  width: 100%;
  max-width: 720px;
  height: min(760px, calc(100vh - 48px));
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.datasets-modal__head {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 28px 16px;
  border-bottom: 1px solid rgba(110, 110, 110, 0.14);
}
.datasets-modal__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.01em;
  color: #333;
  margin: 0 0 4px;
}
.datasets-modal__sub {
  font-size: 0.875rem;
  color: var(--ink);
  margin: 0;
}
.datasets-modal__close {
  appearance: none;
  background: transparent;
  border: 1px solid rgba(110, 110, 110, 0.25);
  border-radius: 100px;
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.datasets-modal__close:hover {
  background: #113a90;
  border-color: #113a90;
  color: #fff;
}
.datasets-modal__search {
  flex: 0 0 auto;
  padding: 16px 28px;
  border-bottom: 1px solid rgba(110, 110, 110, 0.12);
}
.datasets-modal__search input {
  width: 100%;
  padding: 10px 14px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: #333;
  background: #fafaf5;
  border: 1px solid rgba(110, 110, 110, 0.2);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease;
}
.datasets-modal__search input:focus {
  border-color: #113a90;
}
.datasets-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 8px 28px 24px;
}
.datasets-modal__group-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 16px 0 4px;
}
.datasets-modal__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.datasets-modal__row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  column-gap: 16px;
  row-gap: 2px;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid rgba(110, 110, 110, 0.1);
}
.datasets-modal__row-rank {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink);
  opacity: 0.55;
  grid-row: 1;
  grid-column: 1;
}
.datasets-modal__row-title {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: #333;
  grid-row: 1;
  grid-column: 2;
}
.datasets-modal__row-pub {
  font-size: 0.8125rem;
  color: var(--ink);
  line-height: 1.4;
  grid-row: 2;
  grid-column: 2;
}
.datasets-modal__row-count {
  font-size: 0.8125rem;
  color: var(--ink);
  white-space: nowrap;
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
}
.datasets-modal__empty {
  padding: 32px 0;
  color: var(--ink);
  font-size: 0.9375rem;
  text-align: center;
}

body.modal-open {
  overflow: hidden;
}

/* ============================================================ */
/* Landing page — glass demo card                               */
/* Overrides the solid-white card look with a frosted material  */
/* so the demo reads as part of the atmosphere, not stuck on it.*/
/* ============================================================ */

body.landing-page .demo {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
}

/* Chrome + tabs */
body.landing-page .demo__chrome {
  background: rgba(255, 255, 255, 0.03);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.landing-page .demo-tab {
  color: rgba(255, 255, 255, 0.6);
}
body.landing-page .demo-tab:hover {
  color: rgba(255, 255, 255, 0.9);
}
body.landing-page .demo-tab.is-active {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  box-shadow: none;
}

/* REST panes over glass */
body.landing-page .demo-rest__pane--req {
  background: rgba(0, 0, 0, 0.12);
  border-bottom-color: rgba(255, 255, 255, 0.08);
}
body.landing-page .demo-rest__pane--res {
  background: transparent;
}
@media (min-width: 900px) {
  body.landing-page .demo-rest__pane--req {
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
}
body.landing-page .demo-rest__label {
  color: rgba(255, 255, 255, 0.5);
}
body.landing-page .demo-rest__code {
  color: rgba(255, 255, 255, 0.9);
}

/* Widget inside the glass card */
body.landing-page .demo-widget__frame {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}
body.landing-page .demo-widget__brand {
  color: rgba(255, 255, 255, 0.55);
}
body.landing-page .demo-widget__location {
  color: #fff;
}
body.landing-page .demo-widget__season,
body.landing-page .demo-widget__caption {
  color: rgba(255, 255, 255, 0.65);
}
body.landing-page .demo-widget__caption code {
  background: rgba(169, 198, 255, 0.15);
  color: #a9c6ff;
}
body.landing-page .demo-widget__panel-label {
  color: rgba(255, 255, 255, 0.9);
}
body.landing-page .demo-widget .w-species__common {
  color: #fff;
}
body.landing-page .demo-widget .w-species__scientific,
body.landing-page .demo-widget .w-species__note {
  color: rgba(255, 255, 255, 0.65);
}

/* MCP chat over glass */
body.landing-page .demo-mcp__msg p {
  color: rgba(255, 255, 255, 0.92);
}
body.landing-page .demo-mcp__msg--user {
  background: rgba(169, 198, 255, 0.15);
}
body.landing-page .demo-mcp__msg--assistant {
  background: rgba(255, 255, 255, 0.06);
}
body.landing-page .demo-mcp__tool {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.75);
}
body.landing-page .demo-mcp__tool-icon {
  color: #a9c6ff;
}
body.landing-page .demo-mcp__list li {
  color: rgba(255, 255, 255, 0.92);
}
body.landing-page .demo-mcp__list li em {
  color: rgba(255, 255, 255, 0.6);
}
body.landing-page .demo-mcp__attrib {
  color: rgba(255, 255, 255, 0.55);
}

/* Scrollbar polish inside the glass card */
body.landing-page .demo__body::-webkit-scrollbar,
body.landing-page .demo-rest__pane::-webkit-scrollbar,
body.landing-page .demo-mcp::-webkit-scrollbar,
body.landing-page .demo-widget__frame::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
body.landing-page .demo__body::-webkit-scrollbar-thumb,
body.landing-page .demo-rest__pane::-webkit-scrollbar-thumb,
body.landing-page .demo-mcp::-webkit-scrollbar-thumb,
body.landing-page .demo-widget__frame::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 100px;
}
body.landing-page .demo__body::-webkit-scrollbar-track,
body.landing-page .demo-rest__pane::-webkit-scrollbar-track,
body.landing-page .demo-mcp::-webkit-scrollbar-track,
body.landing-page .demo-widget__frame::-webkit-scrollbar-track {
  background: transparent;
}

/* ============================================================ */
/* Datasets slide-in view                                       */
/* ============================================================ */

body.landing-page .datasets-view__head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex: 0 0 auto;
}
body.landing-page .datasets-view__back {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 100px;
  padding: 8px 16px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  flex-shrink: 0;
  margin-top: 4px;
}
body.landing-page .datasets-view__back:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.25);
}
body.landing-page .datasets-view__title-block {
  min-width: 0;
}
body.landing-page .datasets-view__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 6px;
}
body.landing-page .datasets-view__sub {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 720px;
  line-height: 1.5;
}
body.landing-page .datasets-view__search {
  flex: 0 0 auto;
}
body.landing-page .datasets-view__search input {
  width: 100%;
  padding: 12px 18px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s ease, background 0.15s ease;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
body.landing-page .datasets-view__search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
body.landing-page .datasets-view__search input:focus {
  border-color: rgba(169, 198, 255, 0.5);
  background: rgba(255, 255, 255, 0.09);
}
body.landing-page .datasets-view__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0 4px;
}

/* Dataset rows */
body.landing-page .dataset-group-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 12px 0 8px;
}
body.landing-page .dataset-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
body.landing-page .dataset-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  column-gap: 16px;
  row-gap: 2px;
  align-items: baseline;
  padding: 14px 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.landing-page .dataset-row__rank {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
  grid-row: 1;
  grid-column: 1;
}
body.landing-page .dataset-row__title {
  font-weight: 500;
  font-size: 0.9375rem;
  line-height: 1.3;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  grid-row: 1;
  grid-column: 2;
}
body.landing-page .dataset-row__pub {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.4;
  margin: 0;
  grid-row: 2;
  grid-column: 2;
}
body.landing-page .dataset-row__count {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap;
  grid-row: 1 / span 2;
  grid-column: 3;
  align-self: center;
}
body.landing-page .dataset-empty {
  padding: 32px 0;
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.9375rem;
  text-align: center;
}

/* Scrollbar polish in datasets view */
body.landing-page .datasets-view__body::-webkit-scrollbar {
  width: 6px;
}
body.landing-page .datasets-view__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 100px;
}
body.landing-page .datasets-view__body::-webkit-scrollbar-track {
  background: transparent;
}

/* Two-column dataset grid on wider viewports */
@media (min-width: 1100px) {
  body.landing-page .dataset-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
}
@media (max-width: 900px) {
  body.landing-page .screen--datasets {
    padding: 24px 20px;
  }
  body.landing-page .datasets-view__head {
    flex-direction: column;
    gap: 16px;
  }
}

/* ============================================================ */
/* Sightings view — dark-themed table of live sightings data    */
/* ============================================================ */

body.landing-page .sightings-view__head {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  flex: 0 0 auto;
}
body.landing-page .sightings-view__title-block { min-width: 0; }
body.landing-page .sightings-view__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 6px;
}
body.landing-page .sightings-view__sub {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  max-width: 720px;
  line-height: 1.5;
}

body.landing-page .sightings-view__tabs {
  display: flex;
  gap: 4px;
  margin-top: 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  flex-basis: 100%;
}
body.landing-page .sightings-view__tabs button {
  appearance: none;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: rgba(255, 255, 255, 0.55);
  padding: 10px 4px;
  margin-right: 24px;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
body.landing-page .sightings-view__tabs button:hover {
  color: rgba(255, 255, 255, 0.85);
}
body.landing-page .sightings-view__tabs button.is-active {
  color: #fff;
  border-bottom-color: #fff;
}
body.landing-page .sightings-view__tabs button:focus-visible {
  outline: none;
  color: #fff;
}

body.landing-page .sightings-panel {
  display: block;
}
body.landing-page .sightings-panel[hidden] {
  display: none;
}
body.landing-page .sightings-panel__heading {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.75);
  margin: 28px 0 8px;
}
body.landing-page .sightings-panel__heading:first-child {
  margin-top: 8px;
}
body.landing-page .sightings-panel__headline {
  display: flex;
  gap: 32px;
  padding: 12px 0 4px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 0.9375rem;
}
body.landing-page .sightings-panel__headline strong {
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  display: block;
  line-height: 1.15;
}
body.landing-page .sightings-panel__headline span > span {
  display: block;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;
  margin-top: 2px;
}
body.landing-page .sightings-panel__controls {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 8px 0 4px;
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.8125rem;
}
body.landing-page .sightings-panel__controls label {
  display: flex;
  align-items: center;
  gap: 8px;
}

body.landing-page .sightings-agg-table {
  table-layout: auto;
}
body.landing-page .sightings-agg-table .col-rank {
  width: 44px;
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-mono);
}
body.landing-page .sightings-agg-table .col-count {
  width: 120px;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.landing-page .sightings-agg-table .col-bar {
  width: 30%;
}
body.landing-page .sightings-agg-bar {
  display: block;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  overflow: hidden;
}
body.landing-page .sightings-agg-bar > span {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 2px;
}
body.landing-page .sightings-agg-table .col-count strong {
  color: #fff;
}
body.landing-page .sightings-agg-table td .sci {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
}

body.landing-page .sightings-view__table tbody tr[data-clickable] {
  cursor: pointer;
}
body.landing-page .sightings-view__table tbody tr[data-clickable].is-active td {
  background: rgba(255, 255, 255, 0.08);
}

body.landing-page .sightings-detail {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(460px, 92vw);
  background: #0d0d0e;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -20px 0 60px rgba(0, 0, 0, 0.4);
  /* Sit above the topbar (which is ~z-index 100) and the slider. */
  z-index: 10000;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  color: rgba(255, 255, 255, 0.85);
  will-change: transform;
}
body.landing-page .sightings-detail.is-open {
  transform: translateX(0);
  pointer-events: auto;
}
body.landing-page .sightings-detail__close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 0;
  background: rgba(0, 0, 0, 0.35);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(4px);
}
body.landing-page .sightings-detail__close:hover {
  background: rgba(0, 0, 0, 0.6);
}
body.landing-page .sightings-detail__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000 center / cover no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.landing-page .sightings-detail__photo.is-empty {
  aspect-ratio: 16 / 5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8125rem;
}
body.landing-page .sightings-detail__body {
  padding: 20px 24px 32px;
}
body.landing-page .sightings-detail__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  line-height: 1.15;
  color: #fff;
  margin: 0 0 4px;
}
body.landing-page .sightings-detail__sci {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 20px;
}
body.landing-page .sightings-detail__meta {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 8px 16px;
  margin: 0 0 20px;
  font-size: 0.875rem;
}
body.landing-page .sightings-detail__meta dt {
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-display);
  font-weight: 500;
}
body.landing-page .sightings-detail__meta dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}
body.landing-page .sightings-detail__meta dd .muted {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.8125rem;
}
body.landing-page .sightings-detail__links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
body.landing-page .sightings-detail__links a {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.8125rem;
  text-decoration: none;
}
body.landing-page .sightings-detail__links a:hover {
  border-color: rgba(255, 255, 255, 0.4);
}

body.landing-page .sightings-view__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  flex: 0 0 auto;
}
body.landing-page .sightings-view__search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  flex: 1 1 280px;
  min-width: 200px;
}
body.landing-page .sightings-view__search svg {
  width: 16px; height: 16px;
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
body.landing-page .sightings-view__search input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  padding: 12px 0;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.95);
}
body.landing-page .sightings-view__search input::placeholder {
  color: rgba(255, 255, 255, 0.4);
}
body.landing-page .sightings-view__select {
  padding: 12px 14px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  outline: 0;
  cursor: pointer;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  flex: 0 1 180px;
  min-width: 140px;
}
body.landing-page .sightings-view__select option {
  background: #0d1310;
  color: rgba(255, 255, 255, 0.95);
}

body.landing-page .sightings-view__check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  user-select: none;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  flex: 0 0 auto;
}
body.landing-page .sightings-view__check input {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: background 0.15s ease, border-color 0.15s ease;
  margin: 0;
}
body.landing-page .sightings-view__check input:checked {
  background: rgba(169, 198, 255, 0.9);
  border-color: rgba(169, 198, 255, 0.9);
}
body.landing-page .sightings-view__check input:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 5px;
  height: 9px;
  border: solid #0d1310;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

body.landing-page .sightings-view__status {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 4px 2px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
  flex: 0 0 auto;
}
body.landing-page .sightings-view__reset {
  background: transparent;
  border: 0;
  padding: 0;
  color: rgba(169, 198, 255, 0.9);
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  cursor: pointer;
}
body.landing-page .sightings-view__reset:hover { text-decoration: underline; }

body.landing-page .sightings-view__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 4px;
}
body.landing-page .sightings-view__body::-webkit-scrollbar { width: 8px; }
body.landing-page .sightings-view__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 100px;
}
body.landing-page .sightings-view__body::-webkit-scrollbar-track { background: transparent; }

body.landing-page .sightings-view__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
  table-layout: fixed;
}
body.landing-page .sightings-view__table thead th {
  text-align: left;
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: transparent;
}
body.landing-page .sightings-view__table tbody td {
  padding: 12px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  vertical-align: top;
  color: rgba(255, 255, 255, 0.85);
  overflow: hidden;
  text-overflow: ellipsis;
}
body.landing-page .sightings-view__table tbody tr:hover td {
  background: rgba(255, 255, 255, 0.03);
}

body.landing-page .sightings-view__table .col-when     { width: 130px; }
body.landing-page .sightings-view__table .col-species  { width: auto; }
body.landing-page .sightings-view__table .col-where    { width: 200px; }
body.landing-page .sightings-view__table .col-observer { width: 220px; }
body.landing-page .sightings-view__table .col-link     { width: 90px; text-align: right; }

body.landing-page .sightings-cell-when strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  margin-bottom: 2px;
}
body.landing-page .sightings-cell-when span {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.5);
}

body.landing-page .sightings-cell-species {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
body.landing-page .sightings-cell-species__thumb {
  width: 40px; height: 40px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06) center/cover no-repeat;
  flex: 0 0 auto;
}
body.landing-page .sightings-cell-species__names { min-width: 0; }
body.landing-page .sightings-cell-species__common {
  display: block;
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.landing-page .sightings-cell-species__sci {
  display: block;
  font-style: italic;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.landing-page .sightings-iucn-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 500;
  vertical-align: middle;
  font-family: var(--font-body);
  font-style: normal;
}
body.landing-page .sightings-iucn-en { background: rgba(163, 90, 0, 0.35); color: #f5c891; }
body.landing-page .sightings-iucn-vu { background: rgba(138, 109, 0, 0.35); color: #f0d47a; }
body.landing-page .sightings-iucn-cr { background: rgba(161, 41, 15, 0.4);  color: #f2a08c; }
body.landing-page .sightings-iucn-lc { background: rgba(31, 107, 46, 0.3);  color: #a2d6ac; }
body.landing-page .sightings-iucn-nt { background: rgba(106, 122, 74, 0.3); color: #c8d69f; }

body.landing-page .sightings-cell-where strong {
  display: block;
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  margin-bottom: 2px;
}
body.landing-page .sightings-cell-where span {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
}
body.landing-page .sightings-cell-observer {
  color: rgba(255, 255, 255, 0.65);
  font-size: 0.875rem;
}
body.landing-page .sightings-cell-link a {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(169, 198, 255, 0.9);
  text-decoration: none;
}
body.landing-page .sightings-cell-link a:hover { text-decoration: underline; }

body.landing-page .sightings-view__empty {
  padding: 60px 20px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}
body.landing-page .sightings-view__spinner {
  width: 22px; height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.15);
  border-top-color: rgba(169, 198, 255, 0.9);
  border-radius: 50%;
  animation: sightings-spin 800ms linear infinite;
  margin: 0 auto 12px;
}
@keyframes sightings-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  body.landing-page .screen--sightings { padding: 24px 20px; }
  body.landing-page .sightings-view__toolbar {
    grid-template-columns: 1fr 1fr;
  }
}

/* ============================================================ */
/* Product views — shared template for API / MCP / Widget       */
/* ============================================================ */

body.landing-page .product-view {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 96px;
  height: 100%;
  min-height: 0;
}

body.landing-page .product-view__head {
  flex: 0 0 auto;
  margin-bottom: 12px;
}
body.landing-page .product-view__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 8px;
}
body.landing-page .product-view__lede {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
}
body.landing-page .product-view__lede code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 1px 5px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.95);
  border-radius: 3px;
}

body.landing-page .product-view__left {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
body.landing-page .product-view__prose {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
body.landing-page .product-view__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.landing-page .product-view__list li {
  padding-left: 20px;
  position: relative;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.82);
}
body.landing-page .product-view__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 10px;
  height: 1px;
  background: rgba(169, 198, 255, 0.55);
}
body.landing-page .product-view__list li code,
body.landing-page .product-view__prose code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 1px 5px;
  background: rgba(169, 198, 255, 0.12);
  color: #a9c6ff;
  border-radius: 3px;
}
body.landing-page .product-view__snippet {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  padding: 14px 16px;
  margin: 0;
  overflow-x: auto;
  white-space: pre;
}
body.landing-page .product-view__snippet code {
  font: inherit;
  color: inherit;
  background: none;
  padding: 0;
}
body.landing-page .product-view__ctas {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}

body.landing-page .product-view__right {
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: stretch;
}

/* Shared glass example base */
body.landing-page .product-example {
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
  color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(24px) saturate(140%);
  -webkit-backdrop-filter: blur(24px) saturate(140%);
  overflow: hidden;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/* API example — code editor style split */
.api-example__chrome {
  flex: 0 0 auto;
  padding: 10px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  gap: 10px;
}
.api-example__dots {
  display: inline-flex;
  gap: 6px;
}
.api-example__dot {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.16);
}
.api-example__path {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.6);
  margin-left: 8px;
}
.api-example__body {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
}
.api-example__pane {
  padding: 14px 18px;
  overflow: auto;
  min-height: 0;
  min-width: 0;
}
.api-example__pane--req {
  background: rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.api-example__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.45);
  margin: 0 0 8px;
}
.api-example__code {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.92);
  margin: 0;
  white-space: pre;
}
@media (min-width: 1100px) {
  .api-example__body {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
  }
  .api-example__pane--req {
    border-bottom: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.08);
  }
}

/* MCP example — chat transcript */
.mcp-example {
  padding: 24px;
  gap: 14px;
  overflow-y: auto;
}
.mcp-example__msg {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 82%;
}
.mcp-example__msg p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.92);
}
.mcp-example__msg--user {
  align-self: flex-end;
  background: rgba(169, 198, 255, 0.15);
  padding: 12px 16px;
  border-radius: 14px 14px 4px 14px;
}
.mcp-example__msg--assistant {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.06);
  padding: 14px 18px;
  border-radius: 14px 14px 14px 4px;
}
.mcp-example__tool {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.75);
  padding: 6px 10px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mcp-example__tool-icon {
  color: #a9c6ff;
}
.mcp-example__list {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mcp-example__list li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: baseline;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
}
.mcp-example__list li em {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.8125rem;
}
.mcp-example__list li span:first-child {
  font-weight: 500;
}
.mcp-example__attrib {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.5);
  margin: 6px 0 0;
}

/* Widget example — mock browser chrome + itinerary page */
.widget-example {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: auto;
}
/* Live species-sightings iframe embed. Fills the .product-example
 * container so the widget looks natural inside its host demo card.
 * Background is transparent — the widget draws its own card panels
 * and shows through to whatever the parent surface is. */
.widget-example--iframe {
  padding: 0;
  overflow: hidden;
  border-radius: 10px;
  background: transparent;
}
.widget-example__iframe {
  width: 100%;
  height: 100%;
  min-height: 520px;
  border: 0;
  display: block;
}

/* --- "During your stay" widget mock -------------------------------
 * Renders inline in the Widget product screen. Self-contained: no
 * iframe, no runtime data fetches. Design intent is to feel like a
 * real embed that a booking platform would drop into a listing page.
 */
.widget-example--stay {
  padding: 0;
  overflow: hidden;
  background: transparent;
  border-radius: 12px;
}
.stay-widget {
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(17, 58, 144, 0.14);
  box-shadow: 0 8px 32px -12px rgba(17, 58, 144, 0.18);
  font-family: var(--font-body);
  color: #0d1b3d;
  overflow: hidden;
}
.stay-widget__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid rgba(17, 58, 144, 0.08);
  background: linear-gradient(180deg, rgba(17, 58, 144, 0.03), rgba(17, 58, 144, 0));
}
.stay-widget__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #113a90;
  opacity: 0.7;
  margin-bottom: 4px;
}
.stay-widget__property {
  font-family: var(--font-head, var(--font-body));
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 2px;
  color: #0d1b3d;
}
.stay-widget__location {
  font-size: 0.8125rem;
  color: rgba(13, 27, 61, 0.65);
}
.stay-widget__dates {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(17, 58, 144, 0.06);
  color: #113a90;
  font-size: 0.75rem;
  font-weight: 500;
  white-space: nowrap;
}
.stay-widget__arrow {
  opacity: 0.5;
}
.stay-widget__foot {
  padding: 12px 20px 14px;
  font-size: 0.6875rem;
  color: rgba(13, 27, 61, 0.5);
  border-top: 1px solid rgba(17, 58, 144, 0.06);
  background: rgba(17, 58, 144, 0.02);
}

.stay-module {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(17, 58, 144, 0.06);
}
.stay-module:last-of-type {
  border-bottom: 0;
}
.stay-module__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.stay-module__title {
  font-family: var(--font-head, var(--font-body));
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin: 0;
  color: #0d1b3d;
}
.stay-module__caption {
  font-size: 0.75rem;
  color: rgba(13, 27, 61, 0.6);
  text-align: right;
}

/* Weather strip */
.stay-weather {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.stay-weather__day {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  border-radius: 8px;
  background: rgba(17, 58, 144, 0.03);
}
.stay-weather__label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(13, 27, 61, 0.7);
}
.stay-icon {
  width: 32px;
  height: 32px;
  color: #113a90;
  opacity: 0.85;
}
.stay-weather__temp {
  font-size: 0.9375rem;
  font-weight: 600;
  color: #0d1b3d;
}
.stay-weather__lo {
  font-weight: 400;
  color: rgba(13, 27, 61, 0.55);
  margin-left: 2px;
}
.stay-weather__rain {
  font-size: 0.6875rem;
  color: rgba(13, 27, 61, 0.55);
}

/* Feature module rows (tides / dark sky / transit) */
.stay-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(17, 58, 144, 0.08);
  font-size: 0.8125rem;
}
.stay-row:last-child {
  border-bottom: 0;
}
.stay-row__label {
  color: rgba(13, 27, 61, 0.6);
  font-weight: 500;
}
.stay-row__value {
  color: #0d1b3d;
  text-align: right;
}

/* Events list */
.stay-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.stay-event {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(17, 58, 144, 0.03);
}
.stay-event__title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #0d1b3d;
  margin-bottom: 2px;
}
.stay-event__meta {
  font-size: 0.6875rem;
  color: rgba(13, 27, 61, 0.6);
}

/* Walkable amenities */
.stay-pois {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.stay-poi {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(17, 58, 144, 0.03);
  font-size: 0.75rem;
}
.stay-poi__min {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  background: #113a90;
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 600;
}
.stay-poi__name {
  flex-grow: 1;
  color: #0d1b3d;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stay-poi__type {
  color: rgba(13, 27, 61, 0.5);
  font-size: 0.6875rem;
}

/* Wildlife */
.stay-list--wildlife .stay-wild {
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(17, 58, 144, 0.03);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.stay-wild__name {
  font-size: 0.8125rem;
  font-weight: 500;
  color: #0d1b3d;
}
.stay-wild__note {
  font-size: 0.6875rem;
  color: rgba(13, 27, 61, 0.6);
}
.widget-example__browser {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.widget-example__chrome {
  flex: 0 0 auto;
  padding: 10px 14px;
  background: rgba(255, 255, 255, 0.04);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  gap: 12px;
}
.widget-example__dots {
  display: inline-flex;
  gap: 6px;
}
.widget-example__dot {
  width: 10px;
  height: 10px;
  border-radius: 100px;
  background: rgba(255, 255, 255, 0.16);
}
.widget-example__address {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.2);
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.widget-example__page {
  flex: 1 1 auto;
  min-height: 0;
  padding: 24px 28px;
  overflow-y: auto;
  background: rgba(0, 0, 0, 0.08);
}
.widget-example__brand {
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  margin: 0 0 8px;
}
.widget-example__page-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1.2;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 6px;
}
.widget-example__page-sub {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 20px;
}
.widget-example__widget {
  border: 1px solid rgba(169, 198, 255, 0.28);
  border-radius: 8px;
  padding: 20px;
  background: rgba(255, 255, 255, 0.04);
  position: relative;
}
.widget-example__widget-mark {
  position: absolute;
  top: 14px;
  right: 18px;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
}
.widget-example__widget-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 14px;
}
.widget-example__species {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px 24px;
  grid-template-columns: 1fr 1fr;
}
.widget-example__species li {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.widget-example__species-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
}
.widget-example__species-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.widget-example__species-sci {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}
.widget-example__caption {
  flex: 0 0 auto;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.6);
  margin: 0;
  padding: 0 8px;
}
.widget-example__caption code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  padding: 1px 5px;
  background: rgba(169, 198, 255, 0.12);
  color: #a9c6ff;
  border-radius: 3px;
}

/* Product view responsive */
@media (max-width: 1000px) {
  body.landing-page .product-view {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .widget-example__species {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 900px) {
  body.landing-page .screen--api,
  body.landing-page .screen--mcp,
  body.landing-page .screen--widget {
    padding: 24px 20px;
  }
}

/* ============================================================ */
/* MCP example — sequenced reveal to signal AI agent interaction */
/* ============================================================ */

.mcp-example > * {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.mcp-example > *.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Tool call "thinking" state — pulses while the agent is executing */
.mcp-example__tool-icon {
  display: inline-block;
  transition: transform 200ms ease;
}
.mcp-example__tool.is-thinking {
  color: rgba(255, 255, 255, 0.55);
}
.mcp-example__tool.is-thinking .mcp-example__tool-icon {
  animation: mcp-tool-pulse 900ms ease-in-out infinite;
}
@keyframes mcp-tool-pulse {
  0%, 100% { opacity: 0.35; transform: translateX(0); }
  50% { opacity: 1; transform: translateX(2px); }
}

/* Streaming caret at the end of assistant text */
.mcp-example__msg--assistant.is-streaming > p:last-of-type::after,
.mcp-example__msg--assistant.is-streaming > .mcp-example__attrib::after {
  content: "";
}
.mcp-example__msg--assistant.is-streaming::after {
  content: "▍";
  display: inline-block;
  color: #a9c6ff;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  margin-left: 2px;
  animation: mcp-caret 900ms steps(2) infinite;
  vertical-align: baseline;
}
@keyframes mcp-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mcp-example > * {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .mcp-example__tool.is-thinking .mcp-example__tool-icon,
  .mcp-example__msg--assistant.is-streaming::after {
    animation: none;
  }
}

/* MCP scenarios — chip row + transcript container */
.mcp-scenarios {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.mcp-scenarios__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.mcp-chip {
  appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 7px 14px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.mcp-chip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.mcp-chip.is-active {
  background: rgba(169, 198, 255, 0.16);
  color: #fff;
  border-color: rgba(169, 198, 255, 0.4);
}
.mcp-chip:focus-visible {
  outline: 2px solid rgba(169, 198, 255, 0.5);
  outline-offset: 2px;
}

.mcp-scenarios .mcp-example {
  flex: 1 1 auto;
  min-height: 0;
}

/* Assistant strong tags — used in the education scenario */
.mcp-example__msg--assistant strong {
  color: rgba(255, 255, 255, 0.98);
  font-weight: 600;
}

/* ============================================================ */
/* API scenarios — chip row + pane fade animation               */
/* ============================================================ */

.api-scenarios {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.api-scenarios__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.api-chip {
  appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 7px 14px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.api-chip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.api-chip.is-active {
  background: rgba(169, 198, 255, 0.16);
  color: #fff;
  border-color: rgba(169, 198, 255, 0.4);
}
.api-chip:focus-visible {
  outline: 2px solid rgba(169, 198, 255, 0.5);
  outline-offset: 2px;
}

.api-scenarios .api-example {
  flex: 1 1 auto;
  min-height: 0;
}

/* Pane fade — request appears first, then response after implied
 * network delay. Both start hidden inside the parent .api-example. */
.api-example .api-example__pane {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms ease, transform 400ms ease;
}
.api-example.is-req-visible .api-example__pane--req {
  opacity: 1;
  transform: translateY(0);
}
.api-example.is-res-visible .api-example__pane--res {
  opacity: 1;
  transform: translateY(0);
}

/* Chrome path fades in with the request */
.api-example .api-example__path {
  opacity: 0.4;
  transition: opacity 300ms ease;
}
.api-example.is-req-visible .api-example__path {
  opacity: 1;
}

/* Response label pulses while waiting for response */
.api-example.is-req-visible:not(.is-res-visible) .api-example__pane--res {
  opacity: 0.35;
  transform: translateY(0);
}
.api-example.is-req-visible:not(.is-res-visible) .api-example__pane--res .api-example__label {
  animation: api-waiting 1s ease-in-out infinite;
}
.api-example.is-req-visible:not(.is-res-visible) .api-example__pane--res .api-example__code {
  visibility: hidden;
}
@keyframes api-waiting {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .api-example .api-example__pane,
  .api-example .api-example__path {
    opacity: 1 !important;
    transform: none !important;
    transition: none;
  }
  .api-example.is-req-visible:not(.is-res-visible) .api-example__pane--res .api-example__label {
    animation: none;
  }
  .api-example.is-req-visible:not(.is-res-visible) .api-example__pane--res .api-example__code {
    visibility: visible;
  }
}

/* ============================================================ */
/* Widget scenarios — three interactive modes                   */
/* ============================================================ */

.widget-scenarios {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
  min-width: 0;
  width: 100%;
}
.widget-scenarios__chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
.widget-chip {
  appearance: none;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 100px;
  padding: 7px 14px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.widget-chip:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.22);
}
.widget-chip.is-active {
  background: rgba(169, 198, 255, 0.16);
  color: #fff;
  border-color: rgba(169, 198, 255, 0.4);
}
.widget-chip:focus-visible {
  outline: 2px solid rgba(169, 198, 255, 0.5);
  outline-offset: 2px;
}

.widget-scenarios .widget-example {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}

/* ---------- Map mode ---------- */

.widget-example.w-mode--map {
  display: flex;
  flex-direction: row;
}
.w-map {
  position: relative;
  flex: 1 1 58%;
  min-width: 0;
  overflow: hidden;
  background: rgba(10, 20, 30, 0.4);
}
.w-map__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.w-map__pin {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -30px);
  opacity: 0;
  transition: transform 550ms cubic-bezier(0.4, 0.6, 0.4, 1.4), opacity 300ms ease;
  z-index: 3;
  filter: drop-shadow(0 6px 8px rgba(0, 0, 0, 0.5));
}
.widget-example.is-pin-dropping .w-map__pin {
  transform: translate(-50%, -18px);
  opacity: 1;
}
.w-map__ripple {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 60px;
  height: 60px;
  border-radius: 100px;
  border: 2px solid rgba(169, 198, 255, 0.7);
  transform: translate(-50%, -50%) scale(0.2);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}
.w-map__pin-label {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -66px);
  padding: 5px 12px;
  background: rgba(15, 25, 40, 0.85);
  border: 1px solid rgba(169, 198, 255, 0.35);
  border-radius: 100px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
  opacity: 0;
  z-index: 4;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
  transition: opacity 300ms ease 600ms, transform 300ms ease 600ms;
}
.w-map__pin-label::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -5px;
  transform: translateX(-50%) rotate(45deg);
  width: 8px;
  height: 8px;
  background: rgba(15, 25, 40, 0.85);
  border-right: 1px solid rgba(169, 198, 255, 0.35);
  border-bottom: 1px solid rgba(169, 198, 255, 0.35);
}
.widget-example.is-pin-dropping .w-map__pin-label {
  opacity: 1;
  transform: translate(-50%, -58px);
}
.widget-example.is-pin-dropping .w-map__ripple {
  animation: w-ripple 1400ms ease-out 500ms;
}
@keyframes w-ripple {
  0% { transform: translate(-50%, -50%) scale(0.15); opacity: 0.75; }
  100% { transform: translate(-50%, -50%) scale(3.2); opacity: 0; }
}
.w-map__label {
  position: absolute;
  left: 18px;
  bottom: 16px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.72);
  background: rgba(0, 0, 0, 0.35);
  padding: 5px 10px;
  border-radius: 100px;
  z-index: 4;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 400ms ease 400ms, transform 400ms ease 400ms;
}
.widget-example.is-pin-dropping .w-map__label {
  opacity: 1;
  transform: translateY(0);
}

.w-panel {
  flex: 0 0 42%;
  min-width: 0;
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(15, 25, 40, 0.35);
  border-left: 1px solid rgba(255, 255, 255, 0.06);
  transform: translateX(30px);
  opacity: 0;
  transition: transform 500ms ease, opacity 500ms ease;
}
.widget-example.is-panel-revealed .w-panel {
  transform: translateX(0);
  opacity: 1;
}
.w-panel__location {
  font-family: var(--font-display);
  font-size: 1.125rem;
  font-weight: 500;
  color: #fff;
  margin: 0;
}
.w-panel__meta {
  font-family: var(--font-body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 4px;
}
.w-panel__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.w-panel__attrib {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 6px 0 0;
  letter-spacing: 0.04em;
}

.w-species-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms ease, transform 350ms ease;
}
.w-species-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.w-species-row__thumb {
  width: 44px;
  height: 44px;
  border-radius: 100px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.w-species-row__body {
  flex: 1;
  min-width: 0;
}
.w-species-row__name {
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.2;
}
.w-species-row__sci {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 2px 0 0;
}
.w-species-row__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.w-species-row__count {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.55);
}

/* ---------- Search mode ---------- */

.widget-example.w-mode--search {
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}
.w-search {
  width: 100%;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.w-search__label {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
  text-align: center;
}
.w-search__box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  transition: border-color 0.2s ease;
}
.widget-example.is-typing .w-search__box {
  border-color: rgba(169, 198, 255, 0.45);
}
.w-search__icon {
  color: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}
.w-search__typed {
  flex: 1;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.95);
  min-height: 1.2em;
}
.w-search__caret {
  width: 2px;
  height: 18px;
  background: #a9c6ff;
  animation: w-caret 900ms steps(2) infinite;
}
@keyframes w-caret {
  0%, 50% { opacity: 1; }
  50.01%, 100% { opacity: 0; }
}

.w-search__results {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 10px;
  padding: 6px;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 300ms ease, transform 300ms ease;
  max-height: 0;
  overflow: hidden;
}
.widget-example.is-results-shown .w-search__results {
  opacity: 1;
  transform: translateY(0);
  max-height: 400px;
}
.w-search__result {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease, transform 300ms ease, background 0.15s ease;
  cursor: pointer;
}
.w-search__result.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.w-search__result:hover,
.w-search__result.is-selected {
  background: rgba(169, 198, 255, 0.12);
}
.w-search__result-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.w-search__result-body {
  flex: 1;
  min-width: 0;
}
.w-search__result-title {
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
  line-height: 1.2;
}
.w-search__result-sub {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 2px 0 0;
}

/* ---------- Report mode ---------- */

.widget-example.w-mode--panel {
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  overflow-y: auto;
}
.w-report {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 500ms ease, transform 500ms ease;
}
.widget-example.is-report-shown .w-report {
  opacity: 1;
  transform: translateY(0);
}

.w-report__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.w-report__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(169, 198, 255, 0.7);
  margin: 0;
}
.w-report__location {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.w-report__coord {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0;
}

.w-report__stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.w-report__stat {
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms ease, transform 350ms ease;
}
.w-report__stat.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.w-report__num {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
}
.w-report__lbl {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.6);
}

.w-report__species {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.w-report__species-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms ease, transform 350ms ease;
}
.w-report__species-row.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.w-report__species-thumb {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.w-report__species-body {
  flex: 1;
  min-width: 0;
}
.w-report__species-name {
  font-size: 0.95rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
  margin: 0;
}
.w-report__species-sci {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 2px 0 0;
}
.w-report__species-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  flex-shrink: 0;
}
.w-report__species-count {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
}
.w-report__attrib {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 4px 0 0;
  letter-spacing: 0.04em;
  text-align: center;
}

@media (max-width: 720px) {
  .widget-example.w-mode--map {
    flex-direction: column;
  }
  .w-map {
    flex: 0 0 55%;
  }
  .w-panel {
    flex: 1 1 auto;
    border-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }
  .w-report__stats {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-map__pin,
  .w-map__label,
  .w-panel,
  .w-species-row,
  .w-search__results,
  .w-search__result,
  .w-report,
  .w-report__stat,
  .w-report__species-row {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .w-map__ripple,
  .w-search__caret {
    animation: none;
  }
}

/* ============================================================ */
/* Widget: recent-sightings feed + species profile              */
/* ============================================================ */

.w-panel__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 6px;
}

.w-sighting {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 350ms ease, transform 350ms ease;
}
.w-sighting.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.w-sighting__thumb {
  width: 52px;
  height: 52px;
  border-radius: 100px;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.w-sighting__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.w-sighting__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.w-sighting__name {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  margin: 0;
  line-height: 1.2;
}
.w-sighting__meta {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  line-height: 1.4;
}
.w-sighting__when {
  color: #a9c6ff;
  font-weight: 500;
}
.w-sighting__where {
  color: rgba(255, 255, 255, 0.75);
}

/* Full-word IUCN status pill — shared across sightings, search
 * results, and the profile. Subtle colour tint per category. */
.w-status {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.14);
  white-space: nowrap;
  letter-spacing: 0.01em;
}
.w-status--lc {
  color: #b8e0a3;
  background: rgba(120, 175, 90, 0.14);
  border-color: rgba(120, 175, 90, 0.35);
}
.w-status--nt {
  color: #e6d97a;
  background: rgba(200, 175, 60, 0.14);
  border-color: rgba(200, 175, 60, 0.35);
}
.w-status--vu {
  color: #f0b17a;
  background: rgba(220, 145, 70, 0.14);
  border-color: rgba(220, 145, 70, 0.4);
}
.w-status--en {
  color: #f0946e;
  background: rgba(215, 100, 55, 0.14);
  border-color: rgba(215, 100, 55, 0.4);
}
.w-status--cr {
  color: #f47960;
  background: rgba(190, 70, 55, 0.14);
  border-color: rgba(190, 70, 55, 0.4);
}

/* Search phase overlays profile phase — both absolute in the mode
 * container, faded between via .is-profile-shown. */
.widget-example.w-mode--search {
  position: relative;
  padding: 0;
  overflow: hidden;
}
.widget-example.w-mode--search .w-search {
  position: absolute;
  inset: 0;
  padding: 40px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
  transition: opacity 400ms ease, transform 400ms ease;
}
.widget-example.w-mode--search.is-profile-shown .w-search {
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
}
.widget-example.w-mode--search .w-profile {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 500ms ease, transform 500ms ease;
  pointer-events: none;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.widget-example.w-mode--search.is-profile-shown .w-profile {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Species profile */
.w-profile__hero {
  position: relative;
  height: 180px;
  overflow: hidden;
  flex-shrink: 0;
}
.w-profile__hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.w-profile__hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(10, 15, 25, 0.15) 30%,
    rgba(10, 15, 25, 0.9) 100%
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px 22px;
}
.w-profile__common {
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 500;
  color: #fff;
  margin: 0;
  letter-spacing: -0.01em;
}
.w-profile__sci {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 2px 0 0;
}
.w-profile__body {
  padding: 18px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.w-profile__meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.w-profile__meta.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.w-profile__meta-item {
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 4px 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 100px;
  color: rgba(255, 255, 255, 0.6);
}
.w-profile__meta-item strong {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 500;
}
.w-profile__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.86);
  margin: 0;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.w-profile__desc.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.w-profile__section {
  display: flex;
  flex-direction: column;
  gap: 4px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 300ms ease, transform 300ms ease;
}
.w-profile__section.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.w-profile__label {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  margin: 0;
  letter-spacing: 0;
}
.w-profile__text {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.85);
  margin: 0;
}
.w-profile__risks {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.w-profile__risks li {
  padding-left: 16px;
  position: relative;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.45;
}
.w-profile__risks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 8px;
  height: 1px;
  background: rgba(169, 198, 255, 0.6);
}
.w-profile__attrib {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  margin: 8px 0 0;
  letter-spacing: 0;
}

@media (prefers-reduced-motion: reduce) {
  .w-sighting,
  .w-profile__meta,
  .w-profile__desc,
  .w-profile__section,
  .widget-example.w-mode--search .w-search,
  .widget-example.w-mode--search .w-profile {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* =============================================================
 * Pricing screen — Terra-inspired two-tier layout
 * ============================================================= */

body.landing-page .screen--pricing {
  overflow-x: hidden;
  overflow-y: auto;
  padding: 48px 8vw 80px;
  gap: 0;
}

body.landing-page .pricing-view__head {
  max-width: 720px;
  margin: 0 auto 48px;
  text-align: center;
}
body.landing-page .pricing-view__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.75rem, 3.2vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 12px;
}
body.landing-page .pricing-view__sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  line-height: 1.5;
}

body.landing-page .pricing-view__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 1080px;
  margin: 0 auto 64px;
}

body.landing-page .pricing-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
body.landing-page .pricing-card--primary {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 255, 255, 0.22);
  box-shadow: 0 12px 48px -16px rgba(0, 0, 0, 0.35);
}

body.landing-page .pricing-card__head {
  margin-bottom: 24px;
}
body.landing-page .pricing-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0 0 8px;
}
body.landing-page .pricing-card__blurb {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
  margin: 0;
}

body.landing-page .pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
body.landing-page .pricing-card__amount {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 3rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
body.landing-page .pricing-card__amount--custom {
  font-size: 2.25rem;
}
body.landing-page .pricing-card__period {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.55);
}
body.landing-page .pricing-card__note {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 24px;
}
body.landing-page .pricing-card__note strong {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
}

body.landing-page .pricing-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-bottom: 8px;
}
body.landing-page .pricing-card__reassure {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin: 0 0 28px;
}

body.landing-page .pricing-card__section-label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin: 0 0 12px;
}
body.landing-page .pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.landing-page .pricing-card__list li {
  position: relative;
  padding-left: 24px;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.4;
}
body.landing-page .pricing-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 12px;
  height: 6px;
  border-left: 1.5px solid rgba(255, 255, 255, 0.75);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.75);
  transform: rotate(-45deg);
}
body.landing-page .pricing-card__list li strong {
  color: #fff;
  font-weight: 500;
}
body.landing-page .pricing-card__list li code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.9);
}

/* Add-ons block */
body.landing-page .pricing-view__addons,
body.landing-page .pricing-view__meter,
body.landing-page .pricing-view__faq {
  max-width: 1080px;
  margin: 0 auto 56px;
}
body.landing-page .pricing-view__addons-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0 0 20px;
}
body.landing-page .pricing-view__addons-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
body.landing-page .pricing-addon {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body.landing-page .pricing-addon__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: #fff;
}
body.landing-page .pricing-addon__desc {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
}
body.landing-page .pricing-addon__price {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.85);
}

/* Meter explainer */
body.landing-page .pricing-view__meter-lede {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
  margin: 0 0 24px;
  max-width: 720px;
}
body.landing-page .pricing-view__meter-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
body.landing-page .pricing-meter {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 14px;
  padding: 22px 22px 20px;
}
body.landing-page .pricing-meter__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 8px;
}
body.landing-page .pricing-meter__value {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 4px;
}
body.landing-page .pricing-meter__sub {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

/* FAQ */
body.landing-page .pricing-faq {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 32px;
  margin: 0;
}
body.landing-page .pricing-faq__item {
  border-top: 1px solid rgba(255, 255, 255, 0.09);
  padding-top: 16px;
}
body.landing-page .pricing-faq__item dt {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9375rem;
  color: #fff;
  margin-bottom: 6px;
}
body.landing-page .pricing-faq__item dd {
  margin: 0;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}
body.landing-page .pricing-faq__item dd code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: rgba(255, 255, 255, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
  color: rgba(255, 255, 255, 0.85);
}

/* Mobile */
@media (max-width: 800px) {
  body.landing-page .screen--pricing {
    padding: 32px 20px 60px;
  }
  body.landing-page .pricing-view__grid,
  body.landing-page .pricing-view__addons-grid,
  body.landing-page .pricing-view__meter-grid,
  body.landing-page .pricing-faq {
    grid-template-columns: 1fr;
  }
  body.landing-page .pricing-card {
    padding: 28px 22px;
  }
  body.landing-page .pricing-card__amount {
    font-size: 2.5rem;
  }
}