@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-Medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Geist";
  src: url("/fonts/Geist-SemiBold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("/fonts/Lora-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "Geist Mono";
  src: url("/fonts/GeistMono-Regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

:root {
  color-scheme: light;
  --slate-950: #020617;
  --slate-900: #0f172a;
  --slate-800: #1e293b;
  --slate-700: #334155;
  --slate-600: #475569;
  --slate-500: #64748b;
  --slate-400: #94a3b8;
  --slate-300: #cbd5e1;
  --slate-200: #e2e8f0;
  --slate-100: #f1f5f9;
  --slate-50: #f8fafc;
  --teal-700: #0f766e;
  --teal-500: #14b8a6;
  --teal-400: #2dd4bf;
  --teal-300: #5eead4;
  --amber-800: #92400e;
  --amber-400: #fbbf24;
  --rose-700: #be123c;
  --rose-500: #f43f5e;
  --radius: 1rem;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.08), 0 1px 3px rgb(15 23 42 / 0.05);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--slate-50);
  color: var(--slate-950);
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

button, select, input { font: inherit; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3 { margin: 0; }
[hidden] { display: none !important; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 100;
  translate: 0 -200%;
  border-radius: 0.5rem;
  background: white;
  padding: 0.65rem 0.9rem;
  box-shadow: var(--shadow);
  font-weight: 600;
}

.skip-link:focus { translate: 0; }
.shell { width: min(100% - 2.5rem, 80rem); margin-inline: auto; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid rgb(226 232 240 / 0.8);
  background: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(14px);
}

.header-inner {
  position: relative;
  width: min(100% - 2.5rem, 80rem);
  min-height: 69px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.875rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 0.625rem;
  color: var(--slate-950);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.brand-mark { width: 2.25rem; height: 2.25rem; flex: 0 0 auto; }

.header-actions { display: flex; align-items: center; flex: 0 0 auto; gap: 0.5rem; }
.header-menu { position: relative; }
.language-menu-button, .site-menu-button {
  position: relative;
  display: inline-flex;
  height: 2rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--slate-200);
  border-radius: 0.5rem;
  background: white;
  color: var(--slate-700);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
}
.language-menu-button { min-width: 4.65rem; padding: 0 0.65rem; }
.site-menu-button { width: 2rem; padding: 0; }
.language-menu-button > svg:first-child { width: 1rem; height: 1rem; color: var(--slate-500); }
.language-menu-button .chevron { width: 0.875rem; height: 0.875rem; color: var(--slate-500); }
.site-menu-button svg { width: 1rem; height: 1rem; }
.language-menu-button svg, .site-menu-button svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.language-menu-button:hover, .site-menu-button:hover { border-color: var(--slate-300); background: var(--slate-50); color: var(--slate-950); }
.language-menu-button:focus-visible, .site-menu-button:focus-visible { outline: 2px solid rgb(13 148 136 / 0.25); outline-offset: 2px; }

.popover {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  z-index: 70;
  border: 1px solid var(--slate-200);
  border-radius: 0.65rem;
  background: white;
  box-shadow: 0 18px 40px -18px rgb(15 23 42 / 0.35);
}

.language-popover { width: 12.125rem; padding: 0.35rem; }
.language-popover button {
  display: grid;
  width: 100%;
  min-height: 2.45rem;
  grid-template-columns: 2rem 1fr 1.1rem;
  align-items: center;
  border: 0;
  border-radius: 0.45rem;
  background: transparent;
  padding: 0 0.45rem;
  color: var(--slate-900);
  cursor: pointer;
  text-align: left;
}
.language-popover button:hover, .language-popover button:focus-visible { background: var(--slate-100); outline: none; }
.language-popover button > span { color: var(--slate-500); font-size: 0.75rem; font-weight: 600; }
.language-popover button > strong { font-size: 0.875rem; font-weight: 400; }
.language-popover button > i { visibility: hidden; color: var(--slate-800); font-style: normal; text-align: center; }
.language-popover button[aria-checked="true"] > i { visibility: visible; }

.site-menu { width: 18rem; padding: 0.45rem; }
.site-menu a { display: flex; min-height: 2.35rem; align-items: center; border-radius: 0.45rem; padding: 0 0.7rem; color: var(--slate-700); font-size: 0.875rem; }
.site-menu a:hover, .site-menu a:focus-visible { background: var(--slate-100); color: var(--slate-950); outline: none; }
.site-menu .site-menu-cta { justify-content: space-between; margin-top: 0.35rem; border-top: 1px solid var(--slate-200); border-radius: 0; padding-top: 0.35rem; color: var(--slate-950); font-weight: 600; }

.popover[hidden] { display: none; }

.open-platform {
  display: inline-flex;
  min-height: 2rem;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  padding: 0 0.75rem;
  color: var(--slate-700);
  font-size: 0.875rem;
  font-weight: 500;
}
.open-platform:hover { background: var(--slate-100); color: var(--slate-950); }

.hero {
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid var(--slate-800);
  background: var(--slate-950);
  color: white;
}

.hero-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 18% 0%, rgb(20 184 166 / 0.18), transparent 38%), radial-gradient(circle at 90% 35%, rgb(59 130 246 / 0.10), transparent 35%);
  pointer-events: none;
}

.hero-grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-block: 3.5rem;
}

.hero-copy { max-width: 48rem; }
.eyebrow { color: var(--teal-700); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; }
.eyebrow.light { color: var(--teal-300); letter-spacing: 0.2em; }

h1, h2, .metric > strong {
  font-family: "Lora", ui-serif, Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: -0.025em;
}

.hero h1 { max-width: 48rem; margin-top: 1rem; font-size: clamp(2.25rem, 5vw, 3rem); line-height: 1.08; }
.hero-description { max-width: 42rem; margin-top: 1.25rem; color: var(--slate-300); font-size: 1rem; line-height: 1.75; }

.status-panel {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 1rem;
  background: rgb(255 255 255 / 0.06);
  padding: 1.25rem;
  backdrop-filter: blur(12px);
}

.status-summary { display: flex; align-items: center; gap: 0.75rem; }
.status-summary > div > strong { display: block; color: white; font-size: 1.125rem; line-height: 1.4; }
.status-summary > div > span { display: block; margin-top: 0.25rem; color: var(--slate-400); font-size: 0.875rem; line-height: 1.5; }
.observer-badge { display: flex; align-items: center; gap: 0.65rem; margin-top: 1rem; border-top: 1px solid rgb(255 255 255 / 0.1); padding-top: 0.9rem; }
.observer-badge-mark { width: 0.55rem; height: 0.55rem; flex: 0 0 auto; border-radius: 999px; background: var(--slate-400); box-shadow: 0 0 0 4px rgb(148 163 184 / 0.12); }
.observer-badge.operational .observer-badge-mark { background: var(--teal-400); box-shadow: 0 0 0 4px rgb(45 212 191 / 0.12); }
.observer-badge.degraded .observer-badge-mark, .observer-badge.outage .observer-badge-mark { background: var(--amber-400); box-shadow: 0 0 0 4px rgb(251 191 36 / 0.12); }
.observer-badge strong { display: block; color: var(--slate-200); font-size: 0.75rem; font-weight: 600; line-height: 1.4; }
.observer-badge span:not(.observer-badge-mark) { display: block; margin-top: 0.15rem; color: var(--slate-400); font-size: 0.6875rem; line-height: 1.45; }

.status-dot { position: relative; display: inline-flex; width: 0.75rem; height: 0.75rem; flex: 0 0 auto; border-radius: 999px; background: var(--slate-400); }
.status-summary > .status-dot { width: 1rem; height: 1rem; }
.status-dot.operational, .legend-dot.operational { background: var(--teal-400); }
.status-dot.degraded, .legend-dot.degraded { background: var(--amber-400); }
.status-dot.outage, .legend-dot.outage { background: var(--rose-500); }
.status-dot.unknown, .legend-dot.unknown { background: var(--slate-200); }
.status-dot.operational::after { position: absolute; inset: 0; border-radius: inherit; background: var(--teal-300); opacity: 0.3; content: ""; animation: pulse-ring 2s cubic-bezier(0,0,.2,1) infinite; }

@keyframes pulse-ring { 75%, 100% { scale: 2; opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .status-dot.operational::after { animation: none; } }

.notice { margin-top: 1rem; border: 1px solid #fcd34d; border-radius: 0.75rem; background: #fffbeb; padding: 0.9rem 1rem; color: #92400e; font-size: 0.875rem; line-height: 1.55; }
.notice.critical { border-color: #fecdd3; background: #fff1f2; color: #9f1239; }

.subscription-band { border-bottom: 1px solid var(--slate-200); background: white; }
.subscription-card { display: grid; gap: 1.25rem; padding-block: 1.5rem; }
.subscription-copy h2 { margin-top: 0.35rem; font-size: 1.35rem; line-height: 1.25; }
.subscription-copy > p:last-child { margin-top: 0.45rem; color: var(--slate-600); font-size: 0.875rem; line-height: 1.5; }
.subscription-form { min-width: 0; }
.subscription-fields { display: flex; flex-direction: column; gap: 0.65rem; }
.subscription-email { flex: 1; }
.subscription-email input { width: 100%; min-height: 2.75rem; border: 1px solid var(--slate-300); border-radius: 0.7rem; background: white; padding: 0.65rem 0.8rem; color: var(--slate-950); outline: none; }
.subscription-email input:focus { border-color: var(--teal-500); box-shadow: 0 0 0 3px rgb(20 184 166 / 0.14); }
.subscription-fields button { min-height: 2.75rem; border: 0; border-radius: 0.7rem; background: var(--teal-700); padding: 0.65rem 1rem; color: white; font-weight: 600; cursor: pointer; }
.subscription-fields button:hover { background: #115e59; }
.subscription-fields button:disabled { cursor: wait; opacity: 0.65; }
.subscription-preferences { display: flex; flex-wrap: wrap; gap: 0.7rem 1.25rem; margin-top: 0.75rem; color: var(--slate-700); font-size: 0.8125rem; }
.subscription-preferences label { display: inline-flex; align-items: center; gap: 0.45rem; cursor: pointer; }
.subscription-preferences input { width: 1rem; height: 1rem; accent-color: var(--teal-700); }
.subscription-privacy { margin-top: 0.65rem; color: var(--slate-500); font-size: 0.72rem; line-height: 1.5; }
.subscription-privacy a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }
.subscription-message { min-height: 1.25rem; margin-top: 0.45rem; font-size: 0.78rem; line-height: 1.45; }
.subscription-message.success { color: var(--teal-700); }
.subscription-message.error { color: var(--rose-700); }
.subscription-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.subscription-action-shell { display: grid; min-height: calc(100vh - 70px); place-items: center; padding: 2rem 1.25rem; }
.subscription-action-card { width: min(100%, 40rem); border: 1px solid var(--slate-200); border-radius: 1rem; background: white; padding: clamp(1.5rem, 5vw, 3rem); box-shadow: var(--shadow); }
.subscription-action-card h1 { margin-top: 0.65rem; font-family: "Lora", Georgia, serif; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; }
.subscription-action-card > p:nth-of-type(2) { margin-top: 1rem; color: var(--slate-600); line-height: 1.65; }
.subscription-action-card button { margin-top: 1.5rem; border: 0; border-radius: 0.7rem; background: var(--teal-700); padding: 0.75rem 1rem; color: white; font-weight: 600; cursor: pointer; }
.subscription-action-card button:disabled { cursor: wait; opacity: 0.65; }
#action-message { min-height: 1.5rem; margin-top: 1rem; font-size: 0.875rem; line-height: 1.5; }
#action-message.success { color: var(--teal-700); }
#action-message.error { color: var(--rose-700); }
.subscription-action-privacy { margin-top: 1.5rem; font-size: 0.75rem; }
.subscription-action-privacy a { color: var(--teal-700); text-decoration: underline; text-underline-offset: 2px; }

.section { padding-block: 3rem; }
.section-heading { max-width: 48rem; }
.section-heading h2 { margin-top: 0.5rem; font-size: 1.875rem; line-height: 1.25; }
.section-heading h2:first-child { margin-top: 0; }
.section-heading > p:last-child:not(.eyebrow) { margin-top: 0.75rem; color: var(--slate-600); font-size: 1rem; line-height: 1.5; }
.split-heading { display: flex; flex-direction: column; gap: 0.75rem; max-width: none; }
.split-heading > p { max-width: 36rem; color: var(--slate-600); font-size: 0.875rem; line-height: 1.5; }

.metrics { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.75rem; }
.metric { min-width: 0; border: 1px solid var(--slate-200); border-radius: 1rem; background: white; padding: 1.25rem; box-shadow: var(--shadow); }
.metric.primary { border-color: var(--teal-300); box-shadow: var(--shadow), 0 0 0 1px #ccfbf1; }
.metric-label { display: flex; align-items: center; gap: 0.5rem; color: var(--slate-500); font-size: 0.875rem; }
.metric-label svg { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: var(--teal-700); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.metric > strong { display: block; margin-top: 1rem; font-size: 2.25rem; line-height: 1; }
.metric > small { display: block; margin-top: 0.5rem; color: var(--slate-500); font-size: 0.75rem; line-height: 1.6; }

.method-card { display: grid; gap: 1rem; margin-top: 1.5rem; border: 1px solid var(--slate-200); border-radius: 1rem; background: white; padding: 1.25rem; box-shadow: var(--shadow); }
.method-card strong { font-size: 0.875rem; }
.method-card code { display: block; margin-top: 0.75rem; border-radius: 0.75rem; background: var(--slate-950); padding: 0.75rem 1rem; color: #99f6e4; font-family: "Geist Mono", ui-monospace, monospace; font-size: 0.8125rem; line-height: 1.6; }
.method-card p { align-self: center; color: var(--slate-600); font-size: 0.875rem; line-height: 1.5; }

.exclusions-card { margin-top: 1rem; border: 1px solid var(--slate-200); border-radius: 1rem; background: white; padding: 1.25rem; box-shadow: var(--shadow); }
.exclusions-title { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; }
.exclusions-title > span { color: var(--teal-700); }
#approved-exclusions > p { margin-top: 0.5rem; color: var(--slate-500); font-size: 0.875rem; }
.exclusion-grid { display: grid; gap: 0.75rem; margin-top: 1rem; }
.exclusion-item { border: 1px solid #fde68a; border-radius: 0.75rem; background: rgb(255 251 235 / 0.7); padding: 1rem; }
.exclusion-item header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; color: var(--slate-500); font-size: 0.75rem; }
.exclusion-item header strong { color: var(--amber-800); text-transform: uppercase; }
.exclusion-item p { margin-top: 0.5rem; color: var(--slate-700); font-size: 0.875rem; line-height: 1.5; }

.white-band { border-block: 1px solid var(--slate-200); background: white; }
.component-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-top: 1.75rem; }
.component { border: 1px solid var(--slate-200); border-radius: 1rem; background: white; padding: 1.25rem; box-shadow: var(--shadow); }
.component.contractual { border-color: var(--teal-300); box-shadow: var(--shadow), 0 0 0 1px #ccfbf1; }
.component-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.component-name { display: flex; min-width: 0; align-items: center; gap: 0.75rem; font-weight: 600; line-height: 1.35; }
.role { flex: 0 0 auto; border-radius: 999px; background: var(--slate-100); padding: 0.3rem 0.625rem; color: var(--slate-600); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.role.contractual-draft { border: 1px solid #fde68a; background: #fffbeb; color: var(--amber-800); }
.component-status { margin-top: 0.75rem; color: var(--slate-700); font-size: 0.875rem; font-weight: 500; }
.component-description { min-height: 3rem; margin-top: 0.5rem; color: var(--slate-500); font-size: 0.875rem; line-height: 1.5; }
.component-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; border-top: 1px solid var(--slate-100); padding-top: 1rem; font-size: 0.75rem; }
.component-meta span { display: block; color: var(--slate-400); }
.component-meta strong { display: block; margin-top: 0.25rem; color: var(--slate-700); font-weight: 500; }

.history-card { margin-top: 1.75rem; border: 1px solid var(--slate-200); border-radius: 1rem; background: white; padding: 1.25rem; box-shadow: var(--shadow); }
.history-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 0.25rem; }
.history-bar { height: 2.25rem; border-radius: 0.125rem; background: var(--slate-200); }
.history-bar.operational { background: var(--teal-500); }
.history-bar.degraded { background: var(--amber-400); }
.history-bar.outage { background: var(--rose-500); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; margin-top: 1rem; color: var(--slate-500); font-size: 0.75rem; }
.legend > span { display: inline-flex; align-items: center; gap: 0.5rem; }
.legend-dot { width: 0.625rem; height: 0.625rem; border-radius: 999px; }
.legend-window { margin-left: auto; }
.observer-history-card { display: grid; gap: 1.25rem; margin-top: 1rem; border: 1px solid var(--slate-200); border-radius: 1rem; background: white; padding: 1.25rem; box-shadow: var(--shadow); }
.observer-history-copy h3 { margin-top: 0.45rem; font-size: 1rem; font-weight: 600; }
.observer-history-copy > p:last-child { margin-top: 0.45rem; color: var(--slate-500); font-size: 0.8125rem; line-height: 1.5; }
.observer-history-bars { display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); align-items: end; gap: 0.22rem; height: 3.25rem; }
.observer-history-bar { min-height: 0.35rem; border-radius: 0.15rem 0.15rem 0 0; background: var(--slate-200); }
.observer-history-bar.operational { background: var(--teal-500); }
.observer-history-bar.degraded { background: var(--amber-400); }
.observer-history-bar.outage { background: var(--rose-500); }
.observer-legend { display: flex; flex-wrap: wrap; gap: 0.45rem 1rem; margin-top: 0.7rem; color: var(--slate-500); font-size: 0.6875rem; }
.observer-legend > span { display: inline-flex; align-items: center; gap: 0.4rem; }

.communication-grid { display: grid; gap: 2.5rem; }
.section-heading.compact h2 { margin-top: 0.5rem; }
.feed { display: grid; gap: 1rem; margin-top: 1.5rem; }
.empty-state { display: flex; min-height: 9rem; align-items: center; border: 1px dashed var(--slate-300); border-radius: 1rem; background: var(--slate-50); padding: 1.25rem; color: var(--slate-600); font-size: 0.875rem; line-height: 1.5; }
.feed-card { border: 1px solid var(--slate-200); border-radius: 1rem; padding: 1.25rem; }
.feed-card h3 { margin-top: 0.75rem; font-size: 1rem; }
.feed-card p { margin-top: 0.5rem; color: var(--slate-600); font-size: 0.875rem; line-height: 1.5; }
.feed-card time { display: block; margin-top: 1rem; color: var(--slate-500); font-size: 0.75rem; }
.feed-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.feed-tag { border-radius: 999px; background: var(--slate-100); padding: 0.3rem 0.625rem; color: var(--slate-600); font-size: 0.75rem; }
.feed-tag.alert { background: #fff1f2; color: var(--rose-700); font-weight: 600; }

.terms-section { border-top: 1px solid var(--slate-800); background: var(--slate-950); color: white; }
.terms-copy { max-width: 58rem; padding-block: 3rem; }
.terms-copy h2 { font-size: 1.875rem; line-height: 1.25; }
.terms-copy p { margin-top: 1rem; color: var(--slate-300); font-size: 0.9375rem; line-height: 1.7; }

.site-footer { border-top: 1px solid var(--slate-200); background: white; padding-block: 3rem 2rem; }
.footer-grid { display: flex; flex-direction: column; gap: 2rem; justify-content: space-between; }
.footer-grid p { max-width: 26rem; margin-top: 1rem; color: var(--slate-500); font-size: 0.875rem; line-height: 1.5; }
.footer-links { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; color: var(--slate-600); font-size: 0.875rem; }
.copyright { margin-top: 2rem; border-top: 1px solid var(--slate-200); padding-top: 1.5rem; color: var(--slate-500); font-size: 0.875rem; }

@media (min-width: 640px) {
  .shell, .header-inner { width: min(100% - 4rem, 80rem); }
  .hero-grid { padding-block: 5rem; }
  .hero h1 { font-size: 3rem; }
  .hero-description { font-size: 1.125rem; }
  .section { padding-block: 4rem; }
  .metrics { grid-template-columns: repeat(2, 1fr); }
  .component-grid { grid-template-columns: repeat(2, 1fr); }
  .history-card { padding: 1.5rem; }
  .footer-grid { flex-direction: row; }
  .subscription-fields { flex-direction: row; }
}

@media (min-width: 1024px) {
  .hero-grid { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .status-panel { min-width: 22rem; }
  .split-heading { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .method-card { grid-template-columns: 0.8fr 1.2fr; padding: 1.5rem; }
  .exclusion-grid, .communication-grid { grid-template-columns: repeat(2, 1fr); }
  .terms-copy { padding-block: 4rem; }
  .observer-history-card { grid-template-columns: 0.75fr 1.25fr; align-items: center; padding: 1.5rem; }
  .subscription-card { grid-template-columns: 0.8fr 1.2fr; align-items: center; gap: 3rem; }
}

@media (min-width: 1280px) {
  .metrics { grid-template-columns: repeat(4, 1fr); }
  .component-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .wordmark > span { display: none; }
  .open-platform { display: none; }
  .legend-window { width: 100%; margin-left: 0; }
  .language-popover { right: -2.5rem; }
  .site-menu { width: min(18rem, calc(100vw - 2.5rem)); }
}