/* 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-body);
  font-weight: 600;
  font-size: 1.0625rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  text-decoration: none;
  /* Match the nav-link hit area so the hover pill has the same shape
   * as Products / Pricing / Docs. */
  padding: 8px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.landing-page .topbar__brand-mark {
  display: block;
  width: 22px;
  height: 22px;
}
body.landing-page .topbar__brand:hover {
  text-decoration: none;
  color: #333;
  background: rgba(110, 110, 110, 0.08);
}

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="events"] .screen--events,
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="events"] .screen--events,
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-columns: minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  position: relative;
}
/* Full-bleed map background — the map is the hero. Sits in row 1
 * alongside .stage__grid (both stack in the same cell) so copy floats
 * on top, while the trust strip below stays clear. */
body.landing-page .demo--hero {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}
body.landing-page .demo--hero .fly-property,
body.landing-page .demo--hero .fly__dots {
  pointer-events: auto;
}
body.landing-page .screen--landing .stage__grid {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  z-index: 2;
}
body.landing-page .screen--landing .trust-strip {
  grid-row: 2;
  position: relative;
  z-index: 2;
}
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--events,
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--events > *,
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="events"] .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="events"] .screen--events,
body.landing-page .stage__slider[data-view="pricing"] .screen--pricing {
  transform: translateX(0);
}

body.landing-page .stage__grid {
  display: grid;
  /* Widened from 620 → 780 so the hero headline lands on two lines
   * instead of three ("The unified API for how to spend your free time"
   * is 48 chars and needs the extra width to break cleanly). */
  grid-template-columns: minmax(0, 780px);
  grid-template-rows: minmax(0, 1fr);
  gap: 0;
  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: 780px;
  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;
  /* Let the browser balance the two lines so we don't get an orphan
   * "free time." on its own — widely supported (Chrome/Safari/Firefox). */
  text-wrap: balance;
}

body.landing-page .stage__subhead {
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  /* Narrower than the headline so it breaks earlier and reads more
   * like a couplet — plus text-wrap: balance for even line lengths. */
  max-width: 560px;
  text-wrap: balance;
}

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: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  overflow: visible;
  min-height: 0;
  padding: 0;
  box-sizing: border-box;
}

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;
  /* No margin-bottom — vertical rhythm comes from the .product-view__left
   * flex `gap` so every stack element sits on the same cadence. */
  margin-bottom: 0;
}
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 10px;
}
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: 16px;
  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;
}
/* Buttons sit on the product-view's dark backdrop — the default
 * white-page styles (dark ink text, deep-blue primary) blend into the
 * background. Override to a cleaner inverse pair: bright-white filled
 * primary, subtle outlined secondary. */
body.landing-page .product-view__ctas .button-primary,
body.landing-page .product-view__ctas .button-secondary {
  padding: 12px 22px;
  font-weight: 500;
  letter-spacing: 0.005em;
  transition: background 0.18s ease, color 0.18s ease,
    border-color 0.18s ease, transform 0.18s ease;
}
body.landing-page .product-view__ctas .button-primary {
  background: #fff;
  color: #0d1b3d;
  border: 1px solid #fff;
}
body.landing-page .product-view__ctas .button-primary:hover {
  background: rgba(255, 255, 255, 0.92);
  color: #0d1b3d;
  border-color: rgba(255, 255, 255, 0.92);
  transform: translateY(-1px);
}
body.landing-page .product-view__ctas .button-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.28);
}
body.landing-page .product-view__ctas .button-secondary:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}

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-x: hidden;
  overflow-y: 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;
  /* Wrap long lines (curl URLs, deep JSON strings) instead of showing
   * a horizontal scrollbar. `break-word` keeps token integrity where
   * possible; `anywhere` on `overflow-wrap` breaks unbroken URLs. */
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
@media (min-width: 1100px) {
  .api-example__body {
    /* Request is short (curl + a few flags); response is long JSON.
     * Give the response two-thirds of the width so the payload doesn't
     * wrap awkwardly and the request pane stops eating whitespace. */
    grid-template-columns: minmax(220px, 1fr) 2fr;
    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;
}

/* Real listing screenshot with the Chora widget floating in the corner.
 * Renders on the "Embeddable widget" product screen — one composed frame
 * that lets a visitor see the actual widget on top of a real booking-
 * platform listing. */
.widget-example--listing {
  padding: 0;
  overflow: hidden;
  background: transparent;
  border-radius: 12px;
}
.listing-frame {
  position: relative;
  /* Fill the demo container so the widget's bottom:20px anchors to
   * the visible frame edge — not a hard-coded 640 px block that would
   * float in the middle of a taller container. */
  flex: 1 1 auto;
  min-height: 640px;
  background: #f4f5f7;
  border: 1px solid rgba(17, 58, 144, 0.14);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 32px -12px rgba(17, 58, 144, 0.18);
}
.listing-frame__chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #ebedf1;
  border-bottom: 1px solid rgba(17, 58, 144, 0.08);
  font-family: var(--font-body);
  font-size: 12px;
  color: rgba(13, 27, 61, 0.65);
}
.listing-frame__dots {
  display: inline-flex;
  gap: 6px;
}
.listing-frame__dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(13, 27, 61, 0.22);
}
.listing-frame__dots span:nth-child(1) { background: #ff5f57; }
.listing-frame__dots span:nth-child(2) { background: #febc2e; }
.listing-frame__dots span:nth-child(3) { background: #28c840; }
.listing-frame__url {
  margin-left: 6px;
  padding: 3px 10px;
  background: #fff;
  border-radius: 6px;
  border: 1px solid rgba(17, 58, 144, 0.08);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.listing-frame__scroll {
  height: calc(100% - 40px);
  overflow-y: auto;
  background: #fff;
  position: relative;
}
.listing-frame__shot {
  display: block;
  width: 100%;
  height: auto;
}
/* When the frame is marked focused (a moment after the widget loads),
 * lay a soft dark scrim over the listing screenshot so the visitor's
 * eye is pulled from the underlying booking page to the widget. The
 * scrim is on the scroll pane, not the frame, so the widget's corner
 * iframe stays crisp. */
.listing-frame__scroll::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(6, 14, 38, 0.55);
  opacity: 0;
  transition: opacity 600ms ease-out;
  pointer-events: none;
}
.listing-frame.is-focused .listing-frame__scroll::after {
  opacity: 1;
}
.widget-embed {
  border: 0;
  display: block;
  background: transparent;
}
.widget-embed--corner {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 360px;
  height: 480px;
  border-radius: 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  overflow: hidden;
  opacity: 1;
  transition: opacity 220ms ease-out;
}
.widget-embed--corner.is-loading {
  opacity: 0;
}

/* Loading skeleton that occupies the same corner slot as the widget.
 * Shows immediately (server-static markup, no network), fades out via
 * `.is-gone` once the iframe fires its load event. Layout mirrors the
 * corner widget: header, weather-day strip, three summary rows. */
.widget-skeleton {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 360px;
  height: 480px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 1;
  transition: opacity 300ms ease-out;
  pointer-events: none;
  z-index: 1;
}
.widget-skeleton.is-gone { opacity: 0; }

.widget-skeleton__head { display: flex; flex-direction: column; gap: 8px; }
.widget-skeleton__strip { display: flex; gap: 10px; }
.widget-skeleton__rows { display: flex; flex-direction: column; gap: 12px; }

.widget-skeleton__line,
.widget-skeleton__pill,
.widget-skeleton__row {
  background: linear-gradient(
    90deg,
    rgba(17, 58, 144, 0.06) 0%,
    rgba(17, 58, 144, 0.12) 50%,
    rgba(17, 58, 144, 0.06) 100%
  );
  background-size: 200% 100%;
  border-radius: 6px;
  animation: widget-skeleton-shimmer 1.5s ease-in-out infinite;
}
.widget-skeleton__line { height: 12px; }
.widget-skeleton__line--sm { width: 55%; height: 10px; }
.widget-skeleton__line--lg { width: 80%; height: 18px; }
.widget-skeleton__pill { flex: 1; height: 56px; border-radius: 12px; }
.widget-skeleton__row { height: 42px; border-radius: 10px; }

@keyframes widget-skeleton-shimmer {
  0%   { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

.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;
}
/* "+ N more" chip — visually a chip so it belongs in the row, but
 * marked as an outbound link (no active state, subtle border) so a
 * visitor understands clicking it leaves the demo and lands in docs. */
.api-chip--more {
  background: transparent;
  border-style: dashed;
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.api-chip--more:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.28);
  text-decoration: none;
}

.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: hidden;
  padding: 20px 8vw 20px;
  gap: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

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

/* Monthly / Annual toggle above the pricing grid. Segmented control
 * with the active state as a light pill on the dark hero. */
body.landing-page .pricing-view__billing {
  display: flex;
  width: -moz-fit-content;
  width: fit-content;
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  gap: 2px;
  margin: 0 auto 16px;
}
body.landing-page .pricing-billing__btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 8px 20px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.landing-page .pricing-billing__btn:hover {
  color: rgba(255, 255, 255, 0.95);
}
body.landing-page .pricing-billing__btn.is-active {
  background: rgba(255, 255, 255, 0.92);
  color: #0f130f;
}
body.landing-page .pricing-billing__save {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: #7ac57e;
  letter-spacing: 0.02em;
}
body.landing-page .pricing-billing__btn.is-active .pricing-billing__save {
  color: #1f6b2e;
}

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

body.landing-page .pricing-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  padding: 22px 26px;
  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: 14px;
}
body.landing-page .pricing-card__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.375rem;
  letter-spacing: -0.005em;
  color: #fff;
  margin: 0 0 4px;
}
body.landing-page .pricing-card__blurb {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.4;
  margin: 0;
}

body.landing-page .pricing-card__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
  /* Reserve the headline height even for the Enterprise card
   * ("Custom" is smaller) so the note + CTA below line up. */
  min-height: 2.5rem;
}
body.landing-page .pricing-card__amount {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.5rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #fff;
}
body.landing-page .pricing-card__amount--custom {
  font-size: 1.875rem;
}
body.landing-page .pricing-card__period {
  font-size: 0.9375rem;
  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 14px;
  /* Reserve one line's height even when the note is toggled off
   * (annual/monthly swap) so the CTA below stays vertically aligned
   * across both cards. */
  min-height: 1.5em;
}
body.landing-page .pricing-card__note[hidden] {
  display: block;
  visibility: hidden;
}
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: 6px;
  padding: 10px 20px;
  font-size: 0.9375rem;
}
body.landing-page .pricing-card__reassure {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.45);
  text-align: center;
  margin: 0 0 14px;
}

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 8px;
}
body.landing-page .pricing-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
body.landing-page .pricing-card__list li {
  position: relative;
  padding-left: 22px;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
}
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;
  }
}

/* =============================================================
 * Hero UK flyover — replaces the "Widget" demo tab. Illustrated
 * GB outline with pinned property listings, camera zooms into
 * each pin in sequence. First-pass Path B; real MapLibre tiles
 * come later.
 * ============================================================= */

.fly {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 460px;
  background: transparent;
  overflow: hidden;
}
/* Fade the map into the left half of the hero so the headline + CTAs
 * on the LHS aren't fighting coastlines and water for legibility. Mask
 * only the map div (canvas + markers) — the widget card and dots are
 * siblings and stay fully opaque. */
body.landing-page .demo--hero .fly__map {
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    transparent 22%,
    rgba(0, 0, 0, 0.85) 48%,
    #000 60%,
    #000 100%);
  mask-image: linear-gradient(to right,
    transparent 0%,
    transparent 22%,
    rgba(0, 0, 0, 0.85) 48%,
    #000 60%,
    #000 100%);
}
/* MapLibre container fills the flyover panel. Attribution is compacted
 * into a small button that expands on click — required for OSM/OFM
 * licence, but visually tiny. */
.fly__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.fly .maplibregl-canvas {
  outline: none;
  background: transparent;
}
.fly .maplibregl-map {
  background: transparent;
}
.fly .maplibregl-ctrl-attrib.maplibregl-compact {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.fly .maplibregl-ctrl-bottom-right { z-index: 3; }

/* Property pins as HTML markers — MapLibre positions them via
 * translate3d each frame so they stay glued to their lat/lng as the
 * map animates. Only the active pin is visible; others are hidden.
 *
 * MapLibre v5 writes `style.opacity` inline on marker elements, which
 * beats any CSS rule on the same element. So instead of hiding
 * `.fly-marker`, hide its inner __dot / __ring — MapLibre never
 * touches those. */
.fly-marker {
  appearance: none;
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 0;
  width: 24px;
  height: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.fly-marker__dot {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35), 0 2px 10px rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: background 0.2s ease, transform 0.2s ease, opacity 320ms ease-out;
}
.fly-marker__ring {
  position: absolute;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  opacity: 0;
  transform: scale(0.6);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.fly-marker.is-active .fly-marker__dot {
  background: #d43a3a;
  transform: scale(1.15);
  box-shadow: 0 0 0 2px #fff, 0 2px 12px rgba(212, 58, 58, 0.55);
  opacity: 1;
}
.fly-marker.is-active .fly-marker__ring {
  border-color: #d43a3a;
  opacity: 0.6;
  transform: scale(1);
  animation: fly-pulse 1.6s ease-out infinite;
}
@keyframes fly-pulse {
  0%   { opacity: 0.6; transform: scale(0.7); }
  100% { opacity: 0;   transform: scale(2.2); }
}

/* ---------------- Property listing card ------------------------
 * The card sits at each holiday-let's lat/lng, driven by MapLibre
 * Marker. Wrapping the card in `.fly-property-anchor` sinks MapLibre's
 * inline `opacity: 1` onto the anchor and leaves the card's own
 * opacity free to drive the fade-in.
 * -------------------------------------------------------------- */
.fly-property-anchor {
  pointer-events: none;
  width: 190px;
  height: auto;
}
.fly-property {
  width: 190px;
  background: rgba(14, 22, 44, 0.7);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 10px;
  overflow: hidden;
  color: #fff;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 480ms ease-out, transform 480ms cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: auto;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4);
  position: relative;
}
.fly-property.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.fly-property__photo {
  aspect-ratio: 16 / 10;
  background: #2a3350 center / cover no-repeat;
}
.fly-property__meta {
  padding: 8px 12px 10px;
}
.fly-property__usecase {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.96);
}
.fly-property__dates {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.7);
  font-variant-numeric: tabular-nums;
  margin-top: 3px;
  letter-spacing: 0.01em;
}
/* Tiny pin nub under the card so it visually anchors to a point on
 * the map. */
.fly-property__pin {
  position: absolute;
  left: 50%;
  bottom: -7px;
  transform: translateX(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: rgba(14, 22, 44, 0.85);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* ---------------- API response pane ----------------------------
 * Floating monospace card in the top-right of the map that shows the
 * request URL and the response body building up as routes complete.
 * Reinforces the "this is an API" message without stealing focus
 * from the property + POI scene.
 * -------------------------------------------------------------- */
.fly-json {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 340px;
  max-width: calc(100% - 48px);
  padding: 12px 14px;
  margin: 0;
  background: rgba(12, 20, 40, 0.68);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  font-size: 11.5px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  opacity: 0;
  transition: opacity 480ms ease-out;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.32);
}
.fly-json.is-visible {
  opacity: 1;
}
.fly-json__meta {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  padding-bottom: 6px;
  margin-bottom: 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 11px;
  letter-spacing: 0.01em;
}
.fly-json__key   { color: #93b7ff; }
.fly-json__str   { color: #a5e6a1; }
.fly-json__num   { color: #f6c874; }
.fly-json__punct { color: rgba(255, 255, 255, 0.55); }
.fly-json__line {
  display: block;
  opacity: 0;
  transform: translateX(6px);
  transition: opacity 300ms ease-out, transform 320ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fly-json__line.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.fly-json__body {
  display: block;
}

/* ---------------- POI dot + label ------------------------------
 * Each POI is a small colored dot with a text label to its right.
 * Fades in via `.is-visible` which is added on the frame after the
 * marker is created so the CSS transition runs cleanly.
 * -------------------------------------------------------------- */
.fly-poi {
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 340ms ease-out, transform 340ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.fly-poi.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.fly-poi__dot {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #444;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35), 0 3px 10px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}
.fly-poi__label {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(14, 22, 44, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 11px;
  line-height: 1.25;
  white-space: nowrap;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fly-poi__kind {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-right: 2px;
}

/* Bottom dot navigation */
.fly__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 16px;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 5;
}
.fly-dot {
  appearance: none;
  cursor: pointer;
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.32);
  transition: background 0.2s ease, transform 0.2s ease;
}
.fly-dot.is-active {
  background: #fff;
  transform: scale(1.3);
}
.fly-dot:hover { background: rgba(255, 255, 255, 0.55); }

@media (prefers-reduced-motion: reduce) {
  .fly__card { transition: opacity 200ms ease-out; }
  .fly-marker__ring { animation: none; }
}

/* -------------------------------------------------------------------
 * Contact page — /contact.html
 * Inherits the standard landing topbar (cream bg, ink text) and adds
 * a two-column form + info-panel below.
 * ------------------------------------------------------------------- */
/* Contact page inherits the landing hero background + dark scrim
 * topbar — no overrides needed except the current-page pill. */
body.landing-page.contact-page .topbar__link--current {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

/* Split layout — copy pane left, form pane right. The shell fills
 * the initial viewport under the topbar; the page scrolls to reveal
 * the footer beneath. */
body.landing-page.contact-page {
  overflow-y: auto;
}
.contact-shell {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 4fr);
  gap: 64px;
  align-items: center;
  max-width: 1240px;
  width: 100%;
  margin: 0 auto;
  padding: 32px 40px;
  box-sizing: border-box;
  min-height: 0;
}
@media (max-width: 900px) {
  .contact-shell {
    grid-template-columns: 1fr;
    align-items: start;
    gap: 32px;
    overflow-y: auto;
  }
}

.contact-copy { max-width: 520px; }
.contact-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(169, 198, 255, 0.85);
  margin: 0 0 14px;
}
.contact-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;
  margin: 0 0 14px;
  color: #fff;
}
.contact-lede {
  font-size: 1rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0 0 22px;
}
.contact-copy__mail {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}
.contact-mail {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(169, 198, 255, 0.55);
  text-underline-offset: 3px;
}
.contact-mail:hover { text-decoration-color: rgba(169, 198, 255, 1); }

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 16px;
  padding: 24px;
  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%);
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.contact-field--message { flex: 1 1 auto; min-height: 0; }
.contact-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  letter-spacing: 0.01em;
}
.contact-optional {
  color: rgba(255, 255, 255, 0.45);
  font-weight: 400;
}
.contact-input {
  appearance: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 8px;
  padding: 9px 12px;
  font: inherit;
  font-family: var(--font-body);
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.95);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  min-width: 0;
  width: 100%;
  box-sizing: border-box;
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
}
.contact-input:hover { border-color: rgba(255, 255, 255, 0.28); }
.contact-input:focus {
  outline: none;
  border-color: rgba(169, 198, 255, 0.55);
  background: rgba(255, 255, 255, 0.09);
  box-shadow: 0 0 0 3px rgba(169, 198, 255, 0.14);
}
.contact-input::placeholder { color: rgba(255, 255, 255, 0.4); }
.contact-input--textarea {
  resize: none;
  min-height: 110px;
  font-family: var(--font-body);
  line-height: 1.5;
}
select.contact-input {
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.6) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.6) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) center,
    calc(100% - 10px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
select.contact-input option {
  color: #1a1a1a;
  background: #fff;
}
.contact-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.contact-form__foot {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.contact-submit {
  padding: 10px 22px;
  font-size: 0.9375rem;
  flex: 0 0 auto;
}
.contact-note {
  margin: 0;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.8125rem;
  line-height: 1.45;
  flex: 1 1 auto;
  min-width: 200px;
}
.contact-note--pending {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.85);
}
.contact-note--ok {
  background: rgba(30, 140, 90, 0.1);
  color: rgb(20, 100, 60);
  border: 1px solid rgba(30, 140, 90, 0.28);
}
.contact-note--err {
  background: rgba(200, 60, 60, 0.08);
  color: rgb(150, 40, 40);
  border: 1px solid rgba(200, 60, 60, 0.28);
}


/* =============================================================
 * Events view — London events table (screen--events)
 *
 * Follows the pricing-view visual language: glass card on the dark
 * hero, DM Sans body, Space Grotesk display, segmented pill control
 * for the range filter. Table itself uses the site's cream ink
 * treatment inverted onto a translucent panel so the same nav bar +
 * hero backdrop stay coherent when the visitor lands on Events.
 * ============================================================= */

/* Events screen paints its own white background — sits on top of the
 * shared dark hero backdrop and overrides the .screen--events colour
 * inherited from the multi-screen block rule above. */
body.landing-page .screen--events {
  background: #fff;
  color: var(--ink);
  /* Slim the shared 64px inline gutters down to 24px so the table can
   * stretch to the same outer edge as the top nav bar (both cap at
   * 1440px). Vertical padding is unchanged. */
  padding-left: 24px;
  padding-right: 24px;
}

body.landing-page .events-view__head {
  max-width: 720px;
  margin: 0 auto 14px;
  text-align: center;
}
body.landing-page .events-view__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 6px;
}
body.landing-page .events-view__sub {
  font-size: 0.9375rem;
  color: rgba(30, 34, 32, 0.62);
  margin: 0;
  line-height: 1.45;
}

/* Filter row — single line of thin, low-radius, white controls,
 * all right-aligned above the table. */
body.landing-page .events-view__controls {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  max-width: 1440px;
  margin: 6px auto 12px;
  flex-wrap: wrap;
}
body.landing-page .events-view__filter-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Segmented control (view-mode toggle) — connected pair of icon
 * buttons with a shared border and a single vertical divider. */
body.landing-page .events-view__seg {
  display: inline-flex;
  background: #fff;
  border: 1px solid rgba(15, 20, 12, 0.14);
  border-radius: 6px;
  overflow: hidden;
}
body.landing-page .events-view__seg-btn {
  appearance: none;
  background: transparent;
  border: 0;
  border-right: 1px solid rgba(15, 20, 12, 0.14);
  padding: 5px 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: rgba(30, 34, 32, 0.55);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
body.landing-page .events-view__seg-btn:last-child {
  border-right: 0;
}
body.landing-page .events-view__seg-btn:hover {
  color: var(--ink);
  background: rgba(15, 20, 12, 0.03);
}
body.landing-page .events-view__seg-btn.is-active {
  color: var(--link);
  background: rgba(66, 133, 244, 0.08);
}
body.landing-page .events-view__seg-btn svg {
  display: block;
}
body.landing-page .events-view__filter-spacer {
  flex: 1 1 auto;
}
body.landing-page .events-view__select,
body.landing-page .events-view__search {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(15, 20, 12, 0.14);
  padding: 5px 12px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(30, 34, 32, 0.72);
  cursor: pointer;
  transition: border-color 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
body.landing-page .events-view__select:hover,
body.landing-page .events-view__search:hover {
  border-color: rgba(15, 20, 12, 0.28);
  color: var(--ink);
}
body.landing-page .events-view__select:focus,
body.landing-page .events-view__search:focus {
  outline: none;
  border-color: rgba(66, 133, 244, 0.55);
  color: var(--ink);
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.12);
}
body.landing-page .events-view__select {
  padding-right: 28px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%234f5b52' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}
body.landing-page .events-view__search {
  cursor: text;
  min-width: 240px;
}
body.landing-page .events-view__search::placeholder {
  color: rgba(30, 34, 32, 0.4);
}
body.landing-page .events-filter__btn {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(15, 20, 12, 0.14);
  padding: 5px 12px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(30, 34, 32, 0.72);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
body.landing-page .events-filter__btn:hover {
  color: var(--ink);
  border-color: rgba(15, 20, 12, 0.28);
}
body.landing-page .events-filter__btn.is-active {
  color: var(--link);
  border-color: rgba(66, 133, 244, 0.55);
  background: rgba(66, 133, 244, 0.05);
}

/* Added-column sort button — sits inside the <th>, inherits the
 * uppercase caption styling from its parent, adds a small arrow
 * indicator that fills in when the sort is active. Off state is a
 * neutral triangle so the affordance is discoverable. */
body.landing-page .events-view__sort-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: color 0.15s ease;
}
body.landing-page .events-view__sort-btn:hover {
  color: var(--ink);
}
body.landing-page .events-view__sort-indicator {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(30, 34, 32, 0.3);
  border-bottom: 0;
  transition: transform 0.15s ease, border-top-color 0.15s ease;
}
body.landing-page .events-view__sort-btn[data-sort="desc"] {
  color: var(--link);
}
body.landing-page .events-view__sort-btn[data-sort="desc"] .events-view__sort-indicator {
  border-top-color: var(--link);
}
body.landing-page .events-view__sort-btn[data-sort="asc"] {
  color: var(--link);
}
body.landing-page .events-view__sort-btn[data-sort="asc"] .events-view__sort-indicator {
  border-top-color: var(--link);
  transform: rotate(180deg);
}

/* Table panel — soft cream card on the white screen with a subtle
 * hairline border, matching the marketing site's other tabular
 * surfaces (sightings, datasets). */
body.landing-page .events-view__table-wrap,
body.landing-page .events-view__calendar-wrap {
  max-width: 1440px;
  margin: 0 auto;
  width: 100%;
  background: #fff;
  border: 1px solid rgba(15, 20, 12, 0.1);
  border-radius: 14px;
  overflow: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(15, 20, 12, 0.03);
}
body.landing-page .events-view__calendar-wrap[hidden],
body.landing-page .events-view__table-wrap[hidden] {
  display: none;
}

/* Calendar view — month-grid layout with day cells that show event
 * cover images as circular avatars. Overflow ("+N") appears when a
 * day has more events than CAL_MAX_CIRCLES. */
body.landing-page .events-calendar {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
body.landing-page .events-cal__weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 1px solid rgba(15, 20, 12, 0.08);
  background: #fff;
}
body.landing-page .events-cal__weekday {
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(30, 34, 32, 0.55);
}
body.landing-page .events-cal__grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: minmax(110px, 1fr);
  overflow-y: auto;
}
body.landing-page .events-cal__day {
  border-right: 1px solid rgba(15, 20, 12, 0.06);
  border-bottom: 1px solid rgba(15, 20, 12, 0.06);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
body.landing-page .events-cal__day:nth-child(7n) {
  border-right: 0;
}
body.landing-page .events-cal__day--out {
  background: rgba(15, 20, 12, 0.02);
}
body.landing-page .events-cal__day--out .events-cal__daynum {
  color: rgba(30, 34, 32, 0.28);
}
body.landing-page .events-cal__daynum {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgba(30, 34, 32, 0.7);
}
body.landing-page .events-cal__day--today .events-cal__daynum {
  color: var(--link);
  font-weight: 600;
}
body.landing-page .events-cal__circles {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
body.landing-page .events-cal__circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  background: #fafaf5;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px rgba(15, 20, 12, 0.08);
  text-decoration: none;
  color: var(--ink);
  flex: 0 0 auto;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
body.landing-page .events-cal__circle:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.55), 0 2px 6px rgba(15, 20, 12, 0.12);
}
body.landing-page .events-cal__circle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.landing-page .events-cal__circle--noimg {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgba(30, 34, 32, 0.55);
}
body.landing-page .events-cal__overflow {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(30, 34, 32, 0.55);
  padding: 0 6px;
}
body.landing-page .events-view__table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: rgba(30, 34, 32, 0.9);
  table-layout: fixed;
}
body.landing-page .events-view__table thead {
  position: sticky;
  top: 0;
  background: #ffffff;
  z-index: 1;
}
body.landing-page .events-view__table thead th {
  text-align: left;
  padding: 12px 16px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(30, 34, 32, 0.55);
  border-bottom: 1px solid rgba(15, 20, 12, 0.1);
  white-space: nowrap;
}
body.landing-page .events-view__table tbody {
  display: block;
  /* Fill the viewport down to the bottom edge. Budget accounts for:
   * topbar (~70px) + screen-events padding (40px top + 32px bottom)
   * + filter row (~30px + margins ~20px) + thead (~40px) ≈ 232px.
   * Uses 100dvh so the mobile URL bar doesn't clip the last row.
   * A small min-height keeps at least a few rows visible on very
   * short viewports. */
  max-height: calc(100dvh - 232px);
  min-height: 260px;
  overflow-y: auto;
}
body.landing-page .events-view__table thead,
body.landing-page .events-view__table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
body.landing-page .events-view__table tbody tr {
  border-bottom: 1px solid rgba(15, 20, 12, 0.06);
  transition: background 0.15s ease;
}
body.landing-page .events-view__table tbody tr:hover {
  background: rgba(15, 20, 12, 0.02);
}
body.landing-page .events-view__table tbody td {
  padding: 12px 16px;
  vertical-align: top;
  color: rgba(30, 34, 32, 0.88);
  border-bottom: 1px solid rgba(15, 20, 12, 0.06);
}

/* Column widths — date/time compact, event wide (fills remaining
 * space), source/cat/venue trimmed to hand the Event column enough
 * room to render long titles without truncating. */
body.landing-page .events-view__col-date   { width: 110px; }
body.landing-page .events-view__col-time   { width: 70px;  color: rgba(30, 34, 32, 0.62); font-variant-numeric: tabular-nums; }
body.landing-page .events-view__col-added  { width: 105px; }
body.landing-page .events-view__col-name   { width: auto; }
body.landing-page .events-view__col-cat    { width: 130px; color: rgba(30, 34, 32, 0.62); font-size: 0.8125rem; }
body.landing-page .events-view__col-venue  { width: 180px; color: rgba(30, 34, 32, 0.68); font-size: 0.8125rem; }
body.landing-page .events-view__col-source { width: 130px; overflow: hidden; }

/* "Added" cell — relative-time label. Anything observed in the last
 * 24 hours gets the fresh-lead treatment (green pill) because that's
 * the timeliness signal event suppliers care about. Older listings
 * render as plain muted text — same footprint, no visual noise. */
body.landing-page .events-view__added {
  font-family: var(--font-body);
  font-size: inherit;
  color: inherit;
  letter-spacing: 0;
}
body.landing-page .events-view__added--fresh {
  /* No pill / chip — the "fresh" state now inherits the plain
   * Added-column look. Keep the class so JS + sorting can still
   * flag freshness for other affordances if we want them later. */
}

body.landing-page .events-view__col-name a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
}
body.landing-page .events-view__col-name a:hover {
  text-decoration: underline;
  text-decoration-color: rgba(15, 20, 12, 0.35);
  text-underline-offset: 3px;
}

/* Price chip inline with the event name. Higher-contrast values so
 * the chip pops on the white row background. */
body.landing-page .events-view__price {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 0.75rem;
  vertical-align: middle;
  letter-spacing: 0;
}
body.landing-page .events-view__price--free {
  background: rgba(31, 107, 46, 0.1);
  color: #1f6b2e;
  border: 1px solid rgba(31, 107, 46, 0.22);
}
body.landing-page .events-view__price--paid {
  background: rgba(15, 20, 12, 0.05);
  color: rgba(30, 34, 32, 0.72);
  border: 1px solid rgba(15, 20, 12, 0.1);
}

/* Source attribution — favicon + platform name inline, no chip
 * surround. Text inherits the table's body colour so the column
 * doesn't compete with the CTA column; the favicon alone carries the
 * brand signal. Logo removes itself onerror so a favicon 404
 * degrades to text-only cleanly. */
body.landing-page .events-view__source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  letter-spacing: 0;
  white-space: nowrap;
  color: inherit;
}
body.landing-page .events-view__source-logo {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  object-fit: contain;
  display: block;
  flex: 0 0 auto;
}

body.landing-page .events-view__empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 0.9375rem;
  color: rgba(30, 34, 32, 0.5);
}

/* Event thumbnail + name cell layout — image sits inline with the
 * event title so the table stays compact without a dedicated image
 * column. Fallback tile picks up the source's badge colour so a
 * missing image still renders a coloured square, not empty space. */
body.landing-page .events-view__name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
body.landing-page .events-view__name-text {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow-wrap: anywhere;
}
body.landing-page .events-view__thumb {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  object-fit: cover;
  background: #fafaf5;
  border: 1px solid rgba(15, 20, 12, 0.08);
  display: block;
}
body.landing-page span.events-view__thumb--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1rem;
  color: rgba(30, 34, 32, 0.7);
  letter-spacing: 0;
}
body.landing-page .events-view__thumb--ticketmaster {
  background: rgba(0, 90, 200, 0.09);
  border-color: rgba(0, 90, 200, 0.22);
  color: #024fb0;
}
body.landing-page .events-view__thumb--luma {
  background: rgba(255, 140, 60, 0.12);
  border-color: rgba(255, 140, 60, 0.28);
  color: #b85a15;
}
body.landing-page .events-view__thumb--unknown {
  background: rgba(15, 20, 12, 0.05);
  border-color: rgba(15, 20, 12, 0.1);
  color: rgba(30, 34, 32, 0.6);
}

/* Organiser column — the "who to pitch" cell for event-supplier
 * users. Renders the primary host / attraction / calendar name on
 * the first line and a row of clickable social icons below when the
 * organiser has surfaced any handles.
 *
 * Icon colour = platform brand tint so a caterer scanning the column
 * for "who has Instagram?" can eyeball it at a glance without
 * hovering. Hover state darkens for feedback. */
body.landing-page .events-view__col-organiser {
  width: 200px;
  font-size: 0.8125rem;
  color: rgba(30, 34, 32, 0.85);
  vertical-align: top;
  background: rgba(66, 133, 244, 0.05);
  border-left: 1px solid rgba(66, 133, 244, 0.18);
}
body.landing-page .events-view__table thead th.events-view__col-organiser {
  background: rgba(66, 133, 244, 0.08);
  border-left: 1px solid rgba(66, 133, 244, 0.18);
  color: rgba(30, 34, 32, 0.7);
}
body.landing-page .events-view__organiser {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.landing-page .events-view__organiser-name,
body.landing-page a.events-view__organiser-name {
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}
body.landing-page a.events-view__organiser-name:hover {
  text-decoration: underline;
  text-decoration-color: rgba(15, 20, 12, 0.35);
  text-underline-offset: 3px;
}
body.landing-page .events-view__organiser-empty {
  color: rgba(30, 34, 32, 0.4);
}

body.landing-page .events-view__organiser-socials {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
body.landing-page .events-view__organiser-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  color: rgba(30, 34, 32, 0.5);
  background: rgba(15, 20, 12, 0.04);
  border: 1px solid transparent;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
  cursor: pointer;
}
body.landing-page .events-view__organiser-social:hover {
  border-color: rgba(15, 20, 12, 0.12);
}

/* Platform brand tints — hover only, so a full row scans neutral
 * until the user reaches for one. */
body.landing-page .events-view__organiser-social--instagram:hover {
  background: rgba(228, 64, 95, 0.08);
  color: #d62b6f;
}
body.landing-page .events-view__organiser-social--linkedin:hover {
  background: rgba(0, 119, 181, 0.09);
  color: #0a66c2;
}
body.landing-page .events-view__organiser-social--tiktok:hover {
  background: rgba(15, 20, 12, 0.08);
  color: #010101;
}
body.landing-page .events-view__organiser-social--twitter:hover {
  background: rgba(15, 20, 12, 0.08);
  color: #010101;
}
body.landing-page .events-view__organiser-social--facebook:hover {
  background: rgba(24, 119, 242, 0.08);
  color: #1877f2;
}
body.landing-page .events-view__organiser-social--homepage:hover {
  background: rgba(31, 107, 46, 0.08);
  color: #1f6b2e;
}

/* Venue cell button — reads as plain venue text with a subtle
 * hover underline hinting it's clickable. No pill, no chip; the
 * behaviour is discovered on hover the same way link text is. */
body.landing-page .events-view__venue-btn {
  appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-bottom: 1px dotted rgba(15, 20, 12, 0.28);
  transition: color 0.12s ease, border-color 0.12s ease;
}
body.landing-page .events-view__venue-btn:hover,
body.landing-page .events-view__venue-btn:focus-visible {
  color: var(--link);
  border-bottom-color: var(--link);
  outline: none;
}

/* Venue map slideout — fixed-position aside sliding in from the
 * right, backed by a soft dim overlay so the underlying table stays
 * legible-but-recessed. Uses a keyless Google Maps iframe centred on
 * the venue coordinates (see openVenueMap() in index.html). */
body.landing-page .venue-map-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 12, 0.25);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0s linear 0.2s;
  z-index: 90;
}
body.landing-page .venue-map-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s linear 0s;
}

body.landing-page .venue-map-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(440px, 96vw);
  background: #fff;
  border-left: 1px solid rgba(15, 20, 12, 0.1);
  box-shadow: -8px 0 40px rgba(15, 20, 12, 0.08);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  z-index: 100;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
body.landing-page .venue-map-panel.is-open {
  transform: translateX(0);
}

body.landing-page .venue-map-panel__header {
  flex: 0 0 auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(15, 20, 12, 0.08);
}
body.landing-page .venue-map-panel__title-wrap {
  min-width: 0;
  flex: 1 1 auto;
}
body.landing-page .venue-map-panel__title {
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.25;
  word-break: break-word;
}
body.landing-page .venue-map-panel__sub {
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: rgba(30, 34, 32, 0.55);
  margin-top: 2px;
}
body.landing-page .venue-map-panel__close {
  appearance: none;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 6px;
  font-size: 1.5rem;
  line-height: 1;
  color: rgba(30, 34, 32, 0.55);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
body.landing-page .venue-map-panel__close:hover {
  background: rgba(15, 20, 12, 0.05);
  color: var(--ink);
}

/* Directions bar — sits between header and map. Compact input +
 * inline submit, with a "Use my location" secondary link beneath
 * for the one-tap case. When the form is submitted the iframe below
 * swaps from a pin to a route (both keyless embed URLs). */
body.landing-page .venue-map-panel__dir {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 20px 14px;
  border-bottom: 1px solid rgba(15, 20, 12, 0.08);
}
body.landing-page .venue-map-panel__dir-label {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(30, 34, 32, 0.55);
  letter-spacing: 0.01em;
}
body.landing-page .venue-map-panel__dir-row {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
body.landing-page .venue-map-panel__dir-input {
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(15, 20, 12, 0.14);
  background: #fff;
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--ink);
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
body.landing-page .venue-map-panel__dir-input::placeholder {
  color: rgba(30, 34, 32, 0.4);
}
body.landing-page .venue-map-panel__dir-input:focus {
  outline: none;
  border-color: rgba(66, 133, 244, 0.55);
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.12);
}
body.landing-page .venue-map-panel__dir-go {
  appearance: none;
  flex: 0 0 auto;
  padding: 0 14px;
  border-radius: 6px;
  border: 1px solid var(--link);
  background: var(--link);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
body.landing-page .venue-map-panel__dir-go:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}
body.landing-page .venue-map-panel__dir-loc {
  appearance: none;
  align-self: flex-start;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: var(--link);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.12s ease;
}
body.landing-page .venue-map-panel__dir-loc:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}
body.landing-page .venue-map-panel__dir-loc:disabled {
  color: rgba(30, 34, 32, 0.4);
  cursor: default;
  text-decoration: none;
}

body.landing-page .venue-map-panel__map {
  flex: 1 1 auto;
  min-height: 0;
  background: #f4f5f7;
}
body.landing-page .venue-map-panel__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* =============================================================
 * Agent-flow animation on the landing hero (events.trychora.com)
 * Right-hand panel that mimics a chat/phone UI where the agent
 * scans events, matches one, explains the fit, pulls organiser
 * details, and drafts an outreach message. Loops indefinitely.
 * ============================================================= */

body.landing-page .agent-anim {
  position: absolute;
  /* Align the panel's right edge with the nav bar's right-inner edge:
   * the topbar centres its content at max-width 1440px with 24px of
   * inline padding, so on wide viewports the right offset is the
   * gutter to that container's edge + 24px. Clamped to a minimum of
   * 24px so narrow viewports still keep breathing room. */
  right: max(24px, calc((100vw - 1440px) / 2 + 24px));
  top: 50%;
  transform: translateY(-50%);
  width: min(520px, 46vw);
  z-index: 3;
  pointer-events: none;
}
body.landing-page .agent-anim__phone {
  background: #ffffff;
  border: 1px solid rgba(15, 20, 12, 0.08);
  border-radius: 20px;
  box-shadow:
    0 30px 60px -20px rgba(15, 20, 60, 0.18),
    0 8px 24px -8px rgba(15, 20, 60, 0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 560px;
  max-height: 70vh;
  min-height: 0;
}

body.landing-page .agent-anim__phone-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(15, 20, 12, 0.06);
  background: #fff;
  flex: 0 0 auto;
}
body.landing-page .agent-anim__phone-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--link);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.875rem;
  flex: 0 0 auto;
}
body.landing-page .agent-anim__phone-name {
  font-family: var(--font-body);
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
body.landing-page .agent-anim__phone-sub {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(30, 34, 32, 0.55);
}
body.landing-page .agent-anim__phone-status {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(30, 34, 32, 0.55);
}
body.landing-page .agent-anim__phone-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #1f6b2e;
  box-shadow: 0 0 0 3px rgba(31, 107, 46, 0.18);
  animation: agent-anim-pulse 1.6s ease-in-out infinite;
}
@keyframes agent-anim-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

body.landing-page .agent-anim__phone-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px 18px;
  overflow-y: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  transition: opacity 0.4s ease;
}
body.landing-page .agent-anim__phone-body.is-fading {
  opacity: 0;
}

body.landing-page .agent-anim__row {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  color: var(--ink);
  line-height: 1.45;
  flex: 0 0 auto;
}
body.landing-page .agent-anim__row.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Scanning beat — thin ticker text with a spinner. */
body.landing-page .agent-anim__row--scan {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: rgba(30, 34, 32, 0.55);
}
body.landing-page .agent-anim__spinner {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(66, 133, 244, 0.2);
  border-top-color: var(--link);
  animation: agent-anim-spin 0.8s linear infinite;
}
@keyframes agent-anim-spin {
  to { transform: rotate(360deg); }
}

/* Event card — image + name + meta + match badge. */
body.landing-page .agent-anim__row--event {
  padding: 0;
}
body.landing-page .agent-anim__event {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(66, 133, 244, 0.28);
  background: rgba(66, 133, 244, 0.04);
  border-radius: 12px;
}
body.landing-page .agent-anim__event-img {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  flex: 0 0 auto;
}
body.landing-page .agent-anim__event-body {
  min-width: 0;
  flex: 1 1 auto;
}
body.landing-page .agent-anim__event-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.2;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.landing-page .agent-anim__event-meta {
  font-size: 0.75rem;
  color: rgba(30, 34, 32, 0.55);
}
body.landing-page .agent-anim__event-badge {
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--link);
  background: #fff;
  border: 1px solid rgba(66, 133, 244, 0.4);
  flex: 0 0 auto;
}

/* Reasoning / draft-message beats. */
body.landing-page .agent-anim__row--msg,
body.landing-page .agent-anim__row--draft {
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(15, 20, 12, 0.04);
  border: 1px solid rgba(15, 20, 12, 0.06);
}
body.landing-page .agent-anim__msg-label {
  display: block;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(30, 34, 32, 0.5);
  margin-bottom: 4px;
}
body.landing-page .agent-anim__row--draft {
  background: rgba(66, 133, 244, 0.05);
  border-color: rgba(66, 133, 244, 0.2);
}
body.landing-page .agent-anim__draft-text {
  color: var(--ink);
  font-size: 0.8125rem;
  line-height: 1.45;
  margin-top: 4px;
}
body.landing-page .agent-anim__draft-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}
body.landing-page .agent-anim__draft-btn {
  appearance: none;
  border: 0;
  padding: 6px 14px;
  border-radius: 6px;
  background: var(--link);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 500;
  cursor: default;
}
body.landing-page .agent-anim__draft-review {
  font-family: var(--font-body);
  font-size: 0.75rem;
  color: rgba(30, 34, 32, 0.55);
}

/* Organiser card — avatar + name + role. */
body.landing-page .agent-anim__person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(15, 20, 12, 0.08);
  border-radius: 12px;
  background: #fff;
}
body.landing-page .agent-anim__person-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, #b6c9ff, #4285f4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.8125rem;
  flex: 0 0 auto;
}
body.landing-page .agent-anim__person-body {
  min-width: 0;
  flex: 1 1 auto;
}
body.landing-page .agent-anim__person-name {
  font-weight: 600;
  color: var(--ink);
  font-size: 0.875rem;
  line-height: 1.2;
}
body.landing-page .agent-anim__person-role {
  font-size: 0.75rem;
  color: rgba(30, 34, 32, 0.55);
}

/* Hide the animation on narrow viewports — the hero copy takes the
 * whole width and this decorative panel would only clutter. */
@media (max-width: 900px) {
  body.landing-page .agent-anim {
    display: none;
  }
}

/* =============================================================
 * events.trychora.com theme override — light blue→purple gradient
 * backdrop + glass-effect on the RHS agent animation panel.
 * Placed at the end so it wins the cascade over the base styles
 * inherited from the main marketing site.
 * ============================================================= */

body.landing-page {
  /* Very-light diagonal gradient: cool blue → soft lilac. Fixed to
   * the viewport so scrolling never leaves the atmosphere. */
  background:
    linear-gradient(135deg, #eaf1ff 0%, #f2ecff 55%, #fbf1ff 100%);
  background-attachment: fixed;
}

/* Overrides for the shared shell so the beige (var(--cream)) doesn't
 * bleed through on the events landing. Nav bar is fully transparent —
 * nav text sits directly on the gradient. */
body.landing-page .topbar {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.landing-page .stage {
  background: transparent;
}
body.landing-page .screen--landing {
  background: transparent;
}

/* Glass panel — matches the "frosted material" the chora demo card
 * uses on the main site, but tuned for a light backdrop: higher-
 * opacity white so the panel reads as solid glass, softer shadow
 * with a subtle purple undertone to pick up the gradient. */
body.landing-page .agent-anim__phone {
  background: rgba(255, 255, 255, 0.32);
  border: 1px solid rgba(255, 255, 255, 0.75);
  box-shadow:
    0 30px 70px -20px rgba(80, 60, 160, 0.22),
    0 10px 24px -10px rgba(80, 60, 160, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(28px) saturate(150%);
  -webkit-backdrop-filter: blur(28px) saturate(150%);
}

body.landing-page .agent-anim__phone-header {
  background: rgba(255, 255, 255, 0.18);
  border-bottom-color: rgba(15, 20, 60, 0.06);
}

/* The inner beat cards keep more solid backgrounds so they lift off
 * the glass surface. Tighten borders + soften shadows to feel airy. */
body.landing-page .agent-anim__event {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(66, 133, 244, 0.28);
}
body.landing-page .agent-anim__row--msg,
body.landing-page .agent-anim__row--draft {
  background: rgba(255, 255, 255, 0.55);
  border-color: rgba(15, 20, 60, 0.06);
}
body.landing-page .agent-anim__row--draft {
  background: rgba(66, 133, 244, 0.08);
  border-color: rgba(66, 133, 244, 0.22);
}
body.landing-page .agent-anim__person {
  background: rgba(255, 255, 255, 0.7);
  border-color: rgba(15, 20, 60, 0.06);
}

/* Text contrast overrides — the shared marketing stylesheet ships
 * white nav + white hero text tuned for a dark-image backdrop; on
 * this pale-gradient landing that reads as invisible. Force darker
 * ink so headline / subhead / nav all clear WCAG AA against the
 * gradient. */
body.landing-page .stage__headline {
  color: #1a3fa6;
}
body.landing-page .stage__subhead {
  color: #1a3fa6;
}
body.landing-page .topbar__brand,
body.landing-page .topbar__link,
body.landing-page .topbar__signin {
  color: #1a3fa6;
}
body.landing-page .topbar__brand:hover,
body.landing-page .topbar__link:hover,
body.landing-page .topbar__signin:hover {
  color: #113a90;
  background: rgba(26, 63, 166, 0.06);
}
body.landing-page .button-secondary {
  color: #1a3fa6;
}
body.landing-page .button-secondary:hover {
  color: #113a90;
}
/* CTA gets the site's blue-deep instead of white-on-white — reads as
 * a proper button against the light glass topbar. */
body.landing-page .topbar__cta {
  background: #1a3fa6;
  border-color: #1a3fa6;
  color: #fff;
}
body.landing-page .topbar__cta:hover {
  background: #113a90;
  border-color: #113a90;
  color: #fff;
}

/* Primary CTA in the hero — same darker blue for punchy contrast. */
body.landing-page .button-primary {
  background: #1a3fa6;
  border-color: #1a3fa6;
  color: #fff;
}
body.landing-page .button-primary:hover {
  background: #113a90;
  border-color: #113a90;
  color: #fff;
}
body.landing-page .button-secondary {
  color: #1a1c33;
  border-color: rgba(15, 20, 60, 0.25);
  background: rgba(255, 255, 255, 0.7);
}
body.landing-page .button-secondary:hover {
  background: #fff;
  border-color: rgba(15, 20, 60, 0.4);
  color: #000;
}

/* Event list layout. During the "scanning" phase the list stretches
 * to fill the phone body (flex: 1 on the row + cards so 5 tiles
 * divide the space evenly). Once the agent picks + focuses, the
 * .is-focused class resets flex to natural size so subsequent beats
 * (reasoning / person / draft) have room below. */
body.landing-page .agent-anim__row--event-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  background: transparent;
  border: 0;
  flex: 1 1 0;
  min-height: 0;
  transition: flex-grow 0.4s ease;
}
body.landing-page .agent-anim__row--event-list.is-focused {
  flex: 0 0 auto;
}
body.landing-page .agent-anim__event--mini {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border: 1px solid rgba(15, 20, 60, 0.08);
  background: rgba(255, 255, 255, 0.7);
  border-radius: 10px;
  flex: 1 1 0;
  min-height: 0;
  transition: opacity 0.32s ease, transform 0.32s ease,
              border-color 0.32s ease, background 0.32s ease,
              flex-grow 0.4s ease, padding 0.4s ease;
}
body.landing-page .agent-anim__row--event-list.is-focused .agent-anim__event--mini {
  flex: 0 0 auto;
}
body.landing-page .agent-anim__event--mini.is-dimmed {
  opacity: 0.35;
  filter: grayscale(0.6);
}
body.landing-page .agent-anim__event--mini.is-picked {
  border-color: rgba(66, 133, 244, 0.65);
  background: rgba(66, 133, 244, 0.08);
  box-shadow: 0 6px 16px -8px rgba(66, 133, 244, 0.4);
}

/* Image wrapper — small rounded square. The <img> fills it; if it
 * 404s the onerror handler replaces the image with a gradient tile
 * (see the .agent-anim__event-img rule already in the file). */
body.landing-page .agent-anim__event-img-wrap {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(15, 20, 60, 0.06);
}
body.landing-page .agent-anim__event-img-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Fallback tile keeps the same footprint as the wrapper. */
body.landing-page .agent-anim__event-img-wrap .agent-anim__event-img {
  width: 100%;
  height: 100%;
  border-radius: 0;
  font-size: 0.75rem;
}

/* Tighter typography on the mini cards so 5 fit vertically without
 * overflowing the phone body. */
body.landing-page .agent-anim__event--mini .agent-anim__event-name {
  font-size: 0.8125rem;
  font-weight: 600;
}
body.landing-page .agent-anim__event--mini .agent-anim__event-meta {
  font-size: 0.6875rem;
}
body.landing-page .agent-anim__event--mini .agent-anim__event-badge {
  font-size: 0.65rem;
  padding: 2px 6px;
}

/* Chat exchange — agent and founder trade bubbles after the event
 * is picked. Agent bubbles are left-aligned neutral; founder bubbles
 * are right-aligned in the primary blue. Typing indicator uses three
 * animated dots and self-removes when the reply is about to land. */
body.landing-page .agent-anim__row--chat {
  background: transparent;
  border: 0;
  padding: 0;
  display: flex;
}
body.landing-page .agent-anim__row--chat-agent {
  justify-content: flex-start;
}
body.landing-page .agent-anim__row--chat-founder {
  justify-content: flex-end;
}
body.landing-page .agent-anim__row--chat-typing {
  justify-content: flex-end;
}
body.landing-page .agent-anim__chat-bubble {
  max-width: 82%;
  padding: 9px 12px;
  border-radius: 14px;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.4;
  word-wrap: break-word;
}
body.landing-page .agent-anim__chat-bubble--agent {
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(15, 20, 60, 0.08);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
body.landing-page .agent-anim__chat-bubble--agent b {
  color: #1a3fa6;
  font-weight: 600;
}
body.landing-page .agent-anim__chat-bubble--founder {
  background: #1a3fa6;
  color: #fff;
  border-bottom-right-radius: 4px;
}
body.landing-page .agent-anim__chat-typing {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  border-radius: 14px;
  border-bottom-right-radius: 4px;
  background: rgba(66, 133, 244, 0.15);
}
body.landing-page .agent-anim__chat-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #1a3fa6;
  opacity: 0.4;
  animation: agent-anim-typing 1.2s ease-in-out infinite;
}
body.landing-page .agent-anim__chat-typing span:nth-child(2) {
  animation-delay: 0.18s;
}
body.landing-page .agent-anim__chat-typing span:nth-child(3) {
  animation-delay: 0.36s;
}
@keyframes agent-anim-typing {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* Phone header avatar — hosts the Chora logo SVG rather than a
 * plain letter. currentColor keeps the dots white on the blue
 * background. */
body.landing-page .agent-anim__phone-avatar svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* Organiser card avatar — real headshot instead of initials. The
 * wrapper keeps the circle mask; the <img> fills it. Onerror in JS
 * swaps the <img> for a styled div with initials, matching the
 * existing .agent-anim__person-avatar footprint. */
body.landing-page .agent-anim__person-avatar-wrap {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(15, 20, 60, 0.06);
}
body.landing-page .agent-anim__person-avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Phone header avatar override — remove the solid blue circle so
 * the Chora logo sits directly on the glass, then swap the icon
 * colour to the navy blue for proper contrast against the light
 * translucent header background. */
body.landing-page .agent-anim__phone-avatar {
  background: transparent;
  color: #1a3fa6;
  width: auto;
  height: auto;
}
body.landing-page .agent-anim__phone-avatar svg {
  width: 26px;
  height: 26px;
}

/* Jamie's incoming reply — left-aligned like an agent message but
 * with her mini avatar + name label above the bubble, and a soft
 * green tint on the bubble to visually signal a positive response
 * distinct from the neutral agent bubbles. */
body.landing-page .agent-anim__row--chat-jamie {
  justify-content: flex-start;
}
body.landing-page .agent-anim__jamie-reply {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 82%;
}
body.landing-page .agent-anim__jamie-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(30, 34, 32, 0.55);
  padding-left: 2px;
}
body.landing-page .agent-anim__jamie-avatar-wrap {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background: rgba(15, 20, 60, 0.06);
}
body.landing-page .agent-anim__jamie-avatar-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
body.landing-page .agent-anim__jamie-avatar {
  width: 100%;
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #b6c9ff, #4285f4);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.6rem;
}
body.landing-page .agent-anim__chat-bubble--jamie {
  background: rgba(46, 155, 92, 0.12);
  border: 1px solid rgba(46, 155, 92, 0.28);
  color: #14532d;
  border-bottom-left-radius: 4px;
}

/* Simulated Send-click on the draft card. The button briefly gets
 * a pressed state, then the whole container transitions to a
 * "sent" confirmation: label swaps to "Sent, just now" with a
 * check icon, the actions row collapses away. */
body.landing-page .agent-anim__draft-btn {
  transition: transform 0.14s ease, background 0.14s ease, filter 0.14s ease;
}
body.landing-page .agent-anim__draft-btn.is-pressed {
  transform: scale(0.92);
  filter: brightness(0.85);
}
body.landing-page .agent-anim__row--draft.is-sent {
  border-color: rgba(46, 155, 92, 0.35);
  background: rgba(46, 155, 92, 0.08);
  transition: background 0.35s ease, border-color 0.35s ease;
}
body.landing-page .agent-anim__row--draft.is-sent .agent-anim__msg-label {
  color: #14532d;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
body.landing-page .agent-anim__sent-check {
  color: #14532d;
  display: inline-block;
}