/* Scroll animation */
.flow-cards article,
.macro-lead,
.macro-mini,
.audience-card,
.section-header,
.highlight,
.video-shell,
.form-card,
.inquiry-copy {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 600ms cubic-bezier(0.22, 1, 0.36, 1), transform 600ms cubic-bezier(0.22, 1, 0.36, 1);
}

.flow-cards article.is-visible,
.macro-lead.is-visible,
.macro-mini.is-visible,
.audience-card.is-visible,
.section-header.is-visible,
.highlight.is-visible,
.video-shell.is-visible,
.form-card.is-visible,
.inquiry-copy.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .flow-cards article,
  .macro-lead,
  .macro-mini,
  .audience-card,
  .section-header,
  .highlight,
  .video-shell,
  .form-card,
  .inquiry-copy {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Accessibility: clearly visible keyboard focus on the dark theme.
   Scoped to :focus-visible so it only shows for keyboard users, not on click. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid #6ea8ff;
  outline-offset: 2px;
}

:root {
  --font-display: "ABC Arizona Mix", Georgia, serif;
  --font-body: "Space Grotesk", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
  --font-utility: Inter, Arial, sans-serif;

  --page-width: 1912px;
  --content-width: min(1600px, calc(100vw - 312px));
  --gutter: 156px;
  --section-y: 92px;
  --section-gap: 52px;
  --hero-height: 832px;
  --hero-padding-top: 120px;
  --hero-padding-bottom: 80px;
  --hero-padding-x: 60px;
  --hero-content-height: 630px;
  --hero-copy-width: 690px;
  --hero-dashboard-width: 784px;
  --hero-gap: 126px;
  --nav-height: 60px;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 28px;
  --space-10: 32px;
  --space-11: 40px;
  --space-12: 42px;
  --space-13: 48px;
  --space-14: 56px;
  --space-15: 60px;
  --space-16: 64px;
  --space-17: 78px;
  --space-18: 80px;
  --space-19: 100px;
  --space-20: 122px;

  --radius-0: 0;
  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-5: 16px;
  --radius-6: 20px;
  --radius-7: 24px;
  --radius-8: 32px;
  --radius-pill: 999px;

  --color-ink: #1a1a1a;
  --color-soft: #f8f8f6;
  --color-paper: #ffffff;
  --color-muted: #88837f;
  --color-line: #e1deda;
  --color-hero-a: #1f3a6e;
  --color-hero-b: #023b4f;
  --color-deep: #0a1628;
  --color-blue: #006aff;
  --color-blue-soft: #e8f3ff;
  --color-green: #bde6ae;
  --color-green-soft: #eff8e8;
  --color-panel: rgba(255, 255, 255, 0.95);
  --color-glass: rgba(255, 255, 255, 0.16);
  --color-glass-line: rgba(255, 255, 255, 0.25);
  --color-shadow: rgba(20, 27, 36, 0.08);

  --display-2xl: 72px;
  --display-xl: 56px;
  --display-lg: 52px;
  --display-sm: 44px;
  --display-stat-lg: 28px;
  --heading-xl: 28px;
  --heading-sm: 17px;
  --heading-xs: 16px;
  --body-lg: 18px;
  --body-md: 16px;
  --body-sm: 15px;
  --body-xs: 13px;
  --label-md: 12px;
  --label-xs: 10px;
  --mono-lg: 15px;
  --mono-xs: 11px;
  --mono-4xs: 8.5px;

  --lh-display-2xl: 72px;
  --lh-display-xl: 70.4px;
  --lh-display-lg: 52.96px;
  --lh-display-sm: 43.12px;
  --lh-stat-lg: 27.44px;
  --lh-heading-xl: 28px;
  --lh-heading-sm: 25.5px;
  --lh-heading-xs: 24px;
  --lh-body-lg: 30.6px;
  --lh-body-md: 27.2px;
  --lh-body-sm: 24px;
  --lh-body-xs: 20.8px;
  --lh-label-md: 12px;
  --lh-label-xs: 10px;

  --ls-display-2xl: -1.92px;
  --ls-display-xl: -1.28px;
  --ls-display-lg: -1.04px;
  --ls-display-sm: -0.88px;
  --ls-tight: -0.32px;
  --ls-label: 0.96px;
  --ls-label-xs: 0.8px;
  --ls-none: 0;

  --btn-height: 54px;
  --btn-radius: 6px;
  --btn-padding-y: 10px;
  --btn-padding-x: 16px;
  --hero-card-radius: 20px;
  --hero-card-padding-x: 24px;
  --hero-card-padding-y: 20px;
}

@font-face {
  font-family: "ABC Arizona Mix";
  src: url("../fonts/abc-arizona-mix-variable.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Space Grotesk";
  src: url("data:font/woff2;base64,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") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --page-width: 1912px;
  --content-width: min(1600px, calc(100vw - 312px));
  --gutter: 156px;
  --section-y: 92px;
  --section-gap: 52px;
  --header-height: 60px;
  --header-offset: 0px;
  --hero-height: 832px;
  --hero-padding-top: 120px;
  --hero-padding-bottom: 80px;
  --hero-padding-x: 60px;
  --hero-content-height: 630px;
  --hero-copy-width: 690px;
  --hero-dashboard-width: 784px;
  --hero-gap: 126px;

  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 14px;
  --space-6: 16px;
  --space-7: 20px;
  --space-8: 24px;
  --space-9: 28px;
  --space-10: 32px;
  --space-11: 40px;
  --space-12: 48px;
  --space-13: 56px;
  --space-14: 60px;
  --space-15: 64px;
  --space-16: 72px;
  --space-17: 80px;
  --space-18: 100px;

  --radius-1: 4px;
  --radius-2: 6px;
  --radius-3: 8px;
  --radius-4: 12px;
  --radius-5: 16px;
  --radius-6: 20px;
  --radius-7: 24px;
  --radius-8: 32px;
  --radius-pill: 999px;

  --color-ink: #181818;
  --color-ink-soft: #68645f;
  --color-paper: #ffffff;
  --color-panel: rgba(255, 255, 255, 0.96);
  --color-soft: #f8f8f6;
  --color-line: #ddd8d0;
  --color-line-light: #ece8e1;
  --color-blue: #005eff;
  --color-blue-soft: #edf4ff;
  --color-blue-mid: #4e84be;
  --color-hero-a: #20406f;
  --color-hero-b: #05465a;
  --color-deep: #101c31;
  --color-green-1: #dff4d5;
  --color-green-2: #d0edc4;
  --color-green-3: #bde6ae;
  --color-gray-1: #e5e8ee;
  --color-blue-1: #dce2ec;
  --color-blue-2: #cdd5e1;
  --color-blue-3: #bac4d4;
  --color-blue-4: #a8b5cb;
  --color-rich-bg: #f0d4df;
  --color-rich-text: #d90032;
  --color-cheap-bg: #d4e8fb;
  --color-cheap-text: #0067c8;
  --color-glass: rgba(255, 255, 255, 0.16);
  --color-glass-line: rgba(255, 255, 255, 0.22);
  --color-shadow: rgba(20, 27, 36, 0.08);
  --color-shadow-strong: rgba(8, 16, 31, 0.2);
  --color-overlay: rgba(10, 22, 40, 0.58);

  --display-xl: 56px;
  --display-lg: 54px;
  --display-md: 44px;
  --display-sm: 28px;
  --body-lg: 18px;
  --body-md: 16px;
  --body-sm: 15px;
  --body-xs: 13px;
  --label-md: 12px;
  --label-xs: 10px;
  --mono-xs: 11px;

  --lh-display-xl: 70px;
  --lh-display-lg: 58px;
  --lh-display-md: 44px;
  --lh-display-sm: 30px;
  --lh-body-lg: 31px;
  --lh-body-md: 27px;
  --lh-body-sm: 24px;
  --lh-body-xs: 20px;
  --lh-label-md: 12px;
  --lh-label-xs: 10px;

  --ls-display: -1.2px;
  --ls-tight: -0.24px;
  --ls-label: 0.96px;
  --ls-label-xs: 0.8px;

  --hero-button-height: 54px;
  --hero-button-icon: 40px;
  --button-radius: 6px;
  --button-padding-x: 20px;

  --surface-tab-height: 56px;
  --surface-panel-height: 645px;
  --surface-grid-label: 210px;
  --surface-grid-cell-height: 94px;

  --flow-card-height: 214px;
  --flow-icon-size:240px;
  --flow-arrow-size: 18px;

  --macro-lead-height: 612px;
  --macro-mini-height: 292px;
  --macro-chart-height: 217px;
  --macro-stat-height: 84px;

  --video-height: 750px;
  --video-visual-height: 550px;
  --video-visual-radius: 30px;
  --video-play-size: 86px;

  --audience-tab-height: 66px;
  --audience-image-height: 350px;
  --audience-card-height: 590px;

  --inquiry-height: 884px;
  --inquiry-shell-width: 1164px;
  --inquiry-card-height: 656px;
  --inquiry-pill-height: 104px;

  --footer-height: 131px;

  --bar-3m: 54%;
  --bar-6m: 68%;
  --bar-1y: 84%;
  --bar-2y: 61%;
  --bar-5y: 47%;
}

html {
  scroll-behavior: smooth;
  /* Offset anchor jumps so section headings clear the fixed ~61px header. */
  scroll-padding-top: 80px;
}

body {
  margin: var(--space-0);
  background: var(--color-soft);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--body-lg);
  line-height: var(--lh-body-lg);
  letter-spacing: var(--ls-tight);
}

body.is-menu-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

img {
  display: block;
  max-width: 100%;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-size: var(--body-md);
  font-style: normal;
  font-weight: normal;
  line-height: 1;
  white-space: nowrap;
  direction: ltr;
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

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

.figma-page {
  max-width: var(--page-width);
  margin-inline: auto;
  overflow: hidden;
  background: var(--color-soft);
}

.site-header {
  position: fixed;
  inset: var(--header-offset) 0 auto 0;
  z-index: 20;
  pointer-events: auto;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.nav-shell {
  width: min(var(--content-width), calc(100vw - (var(--gutter) * 2)));
  margin-inline: auto;
}

.nav-shell {
  height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-paper);
  transition: background-color 180ms ease, color 180ms ease, box-shadow 180ms ease, backdrop-filter 180ms ease, padding 180ms ease, width 180ms ease;
}

.site-header.is-scrolled {
  border-bottom: 1px solid var(--color-line-light);
  box-shadow: 0 1px 16px rgba(0, 0, 0, 0.08);
}

.site-header.is-scrolled .nav-shell {
  width: 100%;
  height: var(--header-height);
  max-width: none;
  padding: 0 var(--gutter);
  background: rgba(255, 255, 255, 0.97);
  color: var(--color-ink);
  box-shadow: none;
  backdrop-filter: blur(16px);
}

.nav-group,
.nav-actions,
.nav-menu {
  display: flex;
  align-items: center;
}

.nav-group {
  gap: 46px;
}

.nav-actions {
  gap: var(--space-6);
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
}
.logo-color {
  display: none;
}

.site-header.is-scrolled .logo-default {
  display: none;
}

.site-header.is-scrolled .logo-color {
  display: block;
}

.logo-word {
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 37px;
  letter-spacing: var(--ls-tight);
}

.logo-mark {
  width: 25px;
  height: 37px;
  border-radius: var(--radius-pill);
  background: linear-gradient(150deg, #83d350, #24a9a7 42%, #2b78a7 76%, #3b5b91);
  transform: skewX(-12deg);
}

.nav-menu {
  gap: 30px;
}

.nav-menu a,
.nav-cta,
.mobile-links a,
.mobile-cta {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.32px;
}

.nav-menu a {
  opacity: 0.9;
}

.nav-cta {
  min-width: 138px;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-5);
  border-radius: var(--button-radius);
}

.site-header.is-scrolled .nav-cta {
  background: transparent;
}

.nav-toggle,
.nav-close {
  width: 44px;
  height: 44px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--button-radius);
  background: transparent;
  color: inherit;
}

.mobile-menu {
  position: fixed;
  inset: var(--header-height) 0 0;
  width: 100vw;
  height: calc(100dvh - var(--header-height));
  max-width: none;
  margin: 0;
  padding: 28px 24px 40px;
  border-radius: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  box-shadow: none;
  overflow-y: auto;
  z-index: 99;
}

.mobile-menu-head {
  display: none;
}

.mobile-links {
  display: grid;
}

.mobile-links {
  margin-top: var(--space-8);
  border-top: 1px solid var(--color-line-light);
}

.mobile-links a {
  padding: var(--space-8) var(--space-0);
  border-bottom: 1px solid var(--color-line-light);
}

.mobile-cta {
  width: 100%;
  margin-top: var(--space-8);
}

.mobile-links {
  margin-top: 0;
  border-top: none;
}

.hero {
  min-height: var(--hero-height);
  padding: calc(var(--hero-padding-top) + var(--header-height)) var(--hero-padding-x) var(--hero-padding-bottom);
  color: var(--color-paper);
  background: linear-gradient(120deg, var(--color-hero-a), var(--color-hero-b));
}

.hero-content,
.section-header,
.flow-cards,
.macro-grid,
.audience-cards,
.inquiry-shell {
  width: var(--content-width);
  margin-inline: auto;
}

.hero-content {
  min-height: var(--hero-content-height);
  display: grid;
  grid-template-columns: var(--hero-copy-width) var(--hero-dashboard-width);
  gap: var(--hero-gap);
  align-items: center;
}

.hero-copy {
  display: flex;
  flex-direction: column;
}

.badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
  border-radius: var(--radius-1);
  background: rgba(0, 0, 0, 0.06);
  color: #4a4b46;
  font-size: var(--label-md);
  font-weight: 500;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.badge-hero,
.badge-access {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--color-paper);
  padding: 7px 10px;
  font-size: var(--label-xs);
  letter-spacing: var(--ls-label-xs);
}

h1,
h2 {
  margin: var(--space-0);
  font-family: var(--font-display);
  font-weight: 500;
}

.hero h1 {
  margin-top: var(--space-11);
  font-size: var(--display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display-xl);
}

.hero-copy p {
  margin: var(--space-11) 0 var(--space-0);
  max-width: 640px;
  font-weight: 500;
}

.hero-actions {
  display: flex;
  gap: var(--space-6);
  margin-top: var(--space-11);
}

.hero-button,
.submit-button {
  min-height: var(--hero-button-height);
  border-radius: var(--button-radius);
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.submit-button {
  border: 0;
  cursor: pointer;
  font-family: inherit;
  color: #fff;
  min-width: 267px;
}

.hero-button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 16px 10px 20px;
  transition: background 180ms ease;
  text-decoration: none;
  color: inherit;
}

.hero-button .material-symbols-outlined,
.submit-button .material-symbols-outlined {
  width: var(--hero-button-icon);
  height: calc(var(--hero-button-icon) - var(--space-2));
  display: grid;
  place-items: center;
  border-radius: var(--radius-1);
  flex-shrink: 0;
  transition: transform 200ms ease;
}

.hero-button:hover .material-symbols-outlined {
  transform: translateX(5px);
}

.hero-button-primary {
  background: rgba(82, 133, 188, 1);
  color: #fff;
  border: 1px solid rgba(12, 51, 92, 0.6);
}

.hero-button-primary:hover {
  background: rgba(62, 108, 162, 1);
}

.hero-button-primary .material-symbols-outlined {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.hero-button-secondary {
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.hero-button-secondary:hover {
  background: rgba(255, 255, 255, 0.28);
}

.hero-button-secondary .material-symbols-outlined {
  background: rgba(255, 255, 255, 0.18);
}

.hero-line {
  height: 1px;
  margin-top: var(--space-13);
  background: var(--color-glass-line);
}

.hero-metrics {
  display: flex;
  gap: 32px;
  margin-top: var(--space-10);
}

.hero-metrics article {
  display: grid;
  gap: 8px;
}

.hero-metrics strong,
.hero-metrics small {
  font-weight: 500;
}

.hero-metrics strong {
  font-size: 16px;
  line-height: 1.5;
}

.hero-metrics small {
  font-size: 10px;
  line-height: 1;
  letter-spacing: var(--ls-label-xs);
}

.hero-dashboard {
  height: auto;
  display: block;
}

.hero-dashboard-image {
  width: 100%;
  height: auto;
}

.hero-card,
.data-panel,
.highlight,
.flow-cards article,
.macro-lead,
.macro-mini,
.audience-card,
.form-card {
  background: var(--color-panel);
  border-radius: var(--radius-7);
}

.inquiry-points div {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 16px;
}

.hero-card {
  color: var(--color-ink);
  overflow: hidden;
}

.surface-card,
.table-card,
.mini-chart-card {
  padding: var(--space-7) var(--space-8);
}

.surface-card {
  height: 598px;
}

.table-card {
  height: 316px;
}

.mini-chart-card {
  position: relative;
  height: 266px;
}

.side-cards {
  display: grid;
  gap: var(--space-6);
}

.card-heading,
.panel-top,
.section-header,
.macro-card-head,
.footer {
  display: flex;
  justify-content: space-between;
}

.card-heading {
  align-items: flex-start;
  gap: var(--space-4);
}

.card-heading h2,
.flow-cards h3,
.macro-grid h3 {
  color: #4a5772;
}

.video-oriel {
  color: #1f3a6e;
}

.video-copy h2 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: var(--ls-tight);
}

.panel-top h3,
.audience-card h3 {
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: -0.32px;
}

.card-heading h2 {
  font-size: var(--body-sm);
  line-height: var(--lh-label-md);
}

.card-heading span,
.card-heading em,
.axis-label {
  font-size: var(--label-xs);
  font-weight: 500;
  line-height: var(--lh-label-xs);
  letter-spacing: var(--ls-label-xs);
}

.card-heading span,
.axis-label {
  color: var(--color-blue);
}

.card-heading em,
.micro-badge {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-1);
  background: rgba(0, 0, 0, 0.06);
  color: #4a4b46;
  font-size: var(--label-md);
  font-style: normal;
  font-weight: 500;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 5px var(--space-3);
  border-radius: var(--radius-1);
  font-size: var(--label-xs);
}

.chip-blue {
  background: #dcecff;
}

.curve-shell {
  position: relative;
  height: 452px;
  margin-top: var(--space-10);
  padding-left: 28px;
}

.curve-y,
.curve-x,
.heatmap span,
.heatmap strong,
.video-copy li span {
  font-family: var(--font-mono);
}

.curve-y {
  position: absolute;
  top: var(--space-0);
  left: var(--space-0);
  height: 390px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: #90a0b7;
  font-size: 9px;
}

.curve-svg {
  width: 292px;
  height: 390px;
  margin-left: var(--space-8);
}

.curve-x {
  width: 292px;
  margin-left: var(--space-8);
  display: flex;
  justify-content: space-between;
  color: #90a0b7;
  font-size: 10px;
}

.band-1 { fill: rgba(0, 133, 212, 0.34); }
.band-2 { fill: rgba(63, 174, 226, 0.3); }
.band-3 { fill: rgba(125, 203, 235, 0.32); }
.line,
.grid,
.mini-line,
.mini-dash,
.curve-grid,
.curve-line-primary,
.curve-line-secondary,
.distribution-line,
.macro-line {
  fill: none;
}

.line { stroke-width: 2px; }
.line-main { stroke: #20a6b3; }
.line-dash { stroke: #6f89ff; stroke-dasharray: 4 4; }

.mini-table {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-7);
}

.mini-table > div {
  min-height: 36px;
  display: grid;
  grid-template-columns: 1fr 58px 64px;
  align-items: center;
  gap: var(--space-2);
  padding-inline: var(--space-4);
  border-radius: var(--radius-3);
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 10px 20px var(--color-shadow);
  font-size: var(--label-xs);
  font-weight: 500;
}

.mini-table .table-head {
  min-height: 18px;
  background: transparent;
  box-shadow: none;
  color: #6f7680;
}

.mini-table b {
  min-height: 19px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-1);
  font-size: 11px;
}

.rich {
  color: var(--color-rich-text);
  background: var(--color-rich-bg);
}

.cheap {
  color: var(--color-cheap-text);
  background: var(--color-cheap-bg);
}

.mini-chart-card svg {
  width: 280px;
  height: 130px;
  margin: var(--space-2) 0 0 var(--space-1);
}

.grid,
.curve-grid {
  stroke: #e1e8f1;
}

.mini-line,
.curve-line-primary,
.distribution-line,
.macro-line {
  stroke: var(--color-blue);
  stroke-width: 3px;
}

.mini-dash,
.curve-line-secondary {
  stroke: #b7c9e5;
  stroke-dasharray: 4 4;
  stroke-width: 2px;
}

.mini-chart-card circle,
.curve-dot {
  fill: var(--color-blue);
}

.rich-cheap {
  position: absolute;
  top: 92px;
  right: 20px;
  display: grid;
  gap: var(--space-7);
  color: var(--color-blue);
  font-size: 11px;
  font-weight: 600;
}

.data-section {
  padding: var(--section-y) var(--gutter);
}

.macro-section {
  padding: var(--section-y) var(--gutter) 48px;
}

.platform-section {
  padding: var(--section-y) var(--gutter);
}

.steps-section {
  padding: 0 var(--gutter) 56px;
}

.section-header {
  align-items: flex-end;
  gap: var(--space-14);
}

.section-header > div {
  max-width: 560px;
}

.section-header p {
  max-width: 720px;
  margin: var(--space-0);
}

.section-header h2 {
  margin-top: var(--space-7);
  font-size: 38px;
  line-height: 40px;
  letter-spacing: -0.76px;
}


.tabs {
  width: min(820px, 100%);
  height: var(--surface-tab-height);
  margin: var(--space-14) auto var(--space-0);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--color-ink);
  background: transparent;
  color: var(--color-ink);
  font-size: var(--body-sm);
  font-weight: 500;
  line-height: 20px;
  position: relative;
}

/* Countdown that traces the active tab's rectangle edge (drawn by script.js). */
.tab-edge {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  overflow: visible;
}
.tab.is-active .tab-edge {
  opacity: 1;
}
.tab-edge rect {
  fill: none;
  stroke: #6ea8ff;
  stroke-width: 2px;
}

.tab:first-child {
  border-radius: var(--radius-3) 0 0 var(--radius-3);
}

.tab:last-child {
  border-radius: 0 var(--radius-3) var(--radius-3) 0;
}

.tab.is-active {
  background: var(--color-ink);
  color: var(--color-paper);
}

.tab[aria-selected="true"] {
  background: var(--color-ink);
  color: var(--color-paper);
}
.tab:hover:not(.is-active):not([aria-selected="true"]) {
  background: rgba(0, 0, 0, 0.06);
}

.tab .material-symbols-outlined {
  font-size: 24px;
}

.surface-panels {
  width: var(--content-width);
  margin: var(--space-6) auto var(--space-0);
}

.data-panel {
  display: none;
  padding: var(--space-8);
  border: 1px solid var(--color-ink);
}

.data-panel.is-active {
  display: block;
}

.panel-tags {
  display: flex;
  gap: var(--space-2);
}

.panel-tags span {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border-radius: var(--radius-1);
  background: rgba(0, 0, 0, 0.06);
  color: #4a4b46;
  font-size: var(--label-md);
  font-weight: 500;
  line-height: var(--lh-label-md);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}

.surface-graphic {
  margin-top: var(--space-11);
}

.surface-graphic img {
  width: 100%;
  height: auto;
}

.panel-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-8);
  margin-top: var(--space-6);
}

.panel-top h3 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  flex: 1;
}

.scale {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #6f86aa;
  font-size: var(--body-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.scale i {
  width: 120px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: linear-gradient(90deg, #8fc97d, #eef2f6, #3e6cb3);
}

.legend {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  flex-shrink: 0;
}

.legend span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--body-sm);
  color: #6f86aa;
  white-space: nowrap;
}

.legend-line {
  display: inline-block;
  width: 24px;
  height: 2px;
  border-radius: var(--radius-pill);
}

.legend-oriel  { background: #3e6cb3; }
.legend-cpi    { background: #3e6cb3; }
.legend-gdp    { background: #f97316; }
.legend-policy { background: #14b8a6; }
.legend-kalshi { background: #3e6cb3; }

.heatmap {
  margin-top: var(--space-11);
  display: grid;
  grid-template-columns: var(--surface-grid-label) repeat(6, 1fr);
  gap: var(--space-1);
  align-items: center;
}

.heatmap span,
.heatmap strong {
  font-size: var(--mono-xs);
  font-weight: 400;
}

.heatmap span {
  text-align: center;
  color: #536177;
}

.heatmap b {
  height: var(--surface-grid-cell-height);
  display: grid;
  place-items: center;
  border-radius: var(--radius-1);
  background: #eef7ea;
  color: #11334b;
  font-family: var(--font-mono);
  font-size: var(--label-md);
  font-weight: 500;
}

.v-green { background: var(--color-green-1) !important; }
.v-green-2 { background: var(--color-green-2) !important; }
.v-green-3 { background: var(--color-green-3) !important; }
.v-gray { background: var(--color-gray-1) !important; }
.v-blue { background: var(--color-blue-1) !important; }
.v-blue-2 { background: var(--color-blue-2) !important; }
.v-blue-3 { background: var(--color-blue-3) !important; }
.v-blue-4 { background: var(--color-blue-4) !important; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-11);
}

.stat-row div,
.macro-stats div,
.macro-row div {
  min-height: 136px;
  padding: var(--space-8);
  display: grid;
  align-content: center;
  gap: var(--space-2);
  border-radius: var(--radius-5);
  background: #f4f4f1;
}


.macro-row div {
  min-height: auto !important;
  padding: var(--space-4);
  display: grid;
  align-content: center;
  gap: var(--space-0);
  border-radius: var(--radius-5);
  background: #f4f4f1;
}

.stat-row strong,
.distribution-stats strong,
.macro-row strong {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: 500;
  line-height: 1.15;
}

.macro-row strong {
  font-size: var(--display-sm);
}

.stat-row span,
.macro-row span,
.distribution-stats span {
  font-size: var(--label-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label-xs);
  text-transform: uppercase;
}

.curve-panel,
.distribution-shell {
  display: grid;
  gap: var(--space-11);
  margin-top: var(--space-11);
}

.curve-panel {
  grid-template-columns: 300px 1fr;
  align-items: center;
}

.curve-panel-copy p {
  margin: var(--space-0);
}

.curve-notes {
  display: grid;
  gap: var(--space-4);
  margin-top: var(--space-8);
}

.curve-notes span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--body-sm);
}

.curve-notes i {
  width: 28px;
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--color-blue);
}

.curve-notes .secondary {
  background: #b7c9e5;
}

.curve-panel-graphic,
.distribution-graphic {
  width: 100%;
  height: 320px;
}

.distribution-fill {
  fill: rgba(0, 94, 255, 0.08);
}

.distribution-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}

.distribution-stats div {
  min-height: 136px;
  padding: var(--space-8);
  display: grid;
  align-content: center;
  gap: var(--space-4);
  border-radius: var(--radius-5);
  background: #f4f4f1;
}

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

.stat-row-compact div {
  min-height: 110px;
}

.tenor-bars {
  height: 400px;
  margin-top: var(--space-11);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-6);
  align-items: end;
}

.tenor-bars article {
  height: 100%;
  display: grid;
  align-content: end;
  gap: var(--space-6);
}

.tenor-bars span,
.tenor-bars small {
  font-size: var(--body-sm);
  font-weight: 500;
}

.tenor-bars b {
  height: var(--bar-size);
  border-radius: var(--radius-5);
  background: linear-gradient(180deg, rgba(0, 94, 255, 0.2), rgba(0, 94, 255, 0.8));
}

.highlight {
  width: var(--content-width);
  min-height: 494px;
  margin-inline: auto;
  padding: var(--space-16) var(--space-17);
  display: flex;
  align-items: center;
  background: linear-gradient(90deg, var(--color-deep), var(--color-overlay)), url("../images/highlight_bg.png") center / cover no-repeat;
  color: var(--color-paper);
}

.highlight-text {
  width: 100%;
}

.highlight h3 {
  margin: var(--space-0);
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 38px;
  letter-spacing: -0.68px;
}

.highlight h2 {
  margin-top: var(--space-8);
  font-size: 48px;
  line-height: 50px;
  letter-spacing: -1.3px;
}

.highlight p {
  max-width: 567px;
  margin: var(--space-11) 0 var(--space-0);
  font-size: var(--body-md);
  line-height: var(--lh-body-md);
}

.flow-header {
  margin-top: var(--section-gap);
}

.flow-cards {
  margin-top: var(--space-14);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

.flow-cards article {
  min-height: var(--flow-card-height);
  padding: 18px 22px 20px;
  border-radius: var(--radius-5);
  background: var(--color-panel);
  border: 1px solid var(--color-line-light);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.flow-cards article:hover {
  border-color: var(--color-ink);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.flow-cards span {
  color: #7e9cbf;
  margin-bottom: 12px;
  font-weight: 600;
}

.flow-cards img {
  width: var(--flow-icon-size);
  height: var(--flow-icon-size);
  object-fit: contain;
}

.flow-cards h3 {
  margin: var(--space-8) 0 var(--space-0);
  font-size: var(--body-md);
  line-height: var(--lh-body-md);
}

.flow-cards p,
.macro-grid p,
.video-copy p,
.audience-card p,
.inquiry-copy p {
  margin: 0;
  color: var(--color-ink-soft);
  font-size: var(--body-sm);
  line-height: var(--lh-body-sm);
}

.flow-arrow {
  display: grid;
  place-items: center;
  color: var(--color-blue);
  font-size: 16px;
}


.macro-grid {
  margin-top: var(--space-14);
  display: grid;
  grid-template-columns: 626px 1fr 1fr;
  gap: 24px;
}

.macro-lead,
.macro-mini {
  display: flex;
  flex-direction: column;
  padding: var(--space-8);
  border: 1px solid var(--color-line-light);
  background: var(--color-paper);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.macro-lead:hover,
.macro-mini:hover {
  border-color: var(--color-ink);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.macro-lead {
  grid-row: span 2;
}

.macro-mini {
  min-height: var(--macro-mini-height);
}

.macro-card-head {
  align-items: center;
  gap: var(--space-5);
  padding-bottom: 16px;
  margin-bottom: 20px;
  border-bottom: 1px solid rgba(225, 222, 218, 1);
}

.macro-card-head h3 {
  margin: var(--space-0);
  font-size: var(--body-lg);
  line-height: var(--lh-body-lg);
}

.macro-chart {
  height: var(--macro-chart-height);
  margin-top: 24px;
  padding: var(--space-4);
  border: 1px solid var(--color-line-light);
  border-radius: var(--radius-4);
  background: linear-gradient(180deg, rgba(0, 94, 255, 0.02), rgba(0, 94, 255, 0.01));
}

.macro-chart svg {
  width: 100%;
  height: 100%;
}

.macro-tags {
  display: grid;
  gap: 24px;
  margin-top: 24px;
}

.macro-tags div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-3);
  padding: 10px 12px;
  border: 1px solid rgba(0, 102, 255, 0.1);
  border-radius: var(--radius-2);
}

.macro-pill {
  display: inline-flex;
  align-items: center;
  padding: 0px 8px;
  border-radius: var(--radius-1);
  font-size: var(--label-xs);
  font-weight: 600;
}

.macro-pill-rich {
  background: var(--color-rich-bg);
  color: var(--color-rich-text);
  max-height: 22px;
  text-transform: uppercase;
}

.macro-pill-cheap {
  background: var(--color-cheap-bg);
  color: var(--color-cheap-text);
  max-height: 22px;
  text-transform: uppercase;
}

.macro-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: auto;
}

.macro-stats div {
  min-height: 0;
  padding: 16px;
  background: var(--color-panel);
}

.macro-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-top: var(--space-11);
}

.macro-stats strong {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.48px;
}

.macro-stats span {
  font-size: var(--label-xs);
  font-weight: 500;
  letter-spacing: var(--ls-label-xs);
  text-transform: uppercase;
  color: var(--color-ink-soft);
}

.macro-mini footer {
  margin-top: auto;
  padding: 0;
  height: 36px;
  display: flex;
  align-items: center;
  border-top: 1px solid var(--color-line-light);
  color: var(--color-ink-soft);
  font-size: var(--body-xs);
}

.video-section {
  min-height: var(--video-height);
  padding: var(--section-y) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  gap: var(--space-15);
  align-items: center;
  background: var(--color-paper);
}

.video-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.video-oriel {
  color: #1f3a6e;
}

.video-copy h2 {
  margin-top: 12px;
  font-size: 38px;
  line-height: 40px;
  letter-spacing: -0.76px;
}

.audience-card h3 {
  margin: 0;
  font-size: 28px;
  line-height: 28px;
}

.video-copy p {
  margin-top: 16px;
}

.video-section .video-playlist {
  margin-top: 22px;
}

.video-playlist,
.audience-card ul {
  display: grid;
  gap: 0;
  padding: var(--space-0);
  margin-top: 0; margin-bottom: 0;
  list-style: none;
}

.video-playlist li {
  min-height: 32px;
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: var(--space-5);
  padding: 8px 0;
  border-top: 1px solid var(--color-line-light);
}

.video-playlist li:last-child {
  border-bottom: 1px solid var(--color-line-light);
}

.video-playlist li span {
  color: var(--color-ink-soft);
  font-size: var(--body-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
}

.video-playlist strong {
  font-size: var(--body-md);
  font-weight: 500;
}

.video-visual {
  position: relative;
  aspect-ratio: 978 / 550;
  border: 0;
  border-radius: var(--video-visual-radius);
  background: transparent;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.24), 0 28px 90px 0 rgba(4,18,42,0.42);
}

.video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  cursor: pointer;
}

.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.22);
  transition: opacity 0.3s;
}

.video-overlay.is-hidden {
  opacity: 0;
  pointer-events: none;
}

.video-overlay-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: var(--video-play-size);
  height: var(--video-play-size);
  display: grid;
  place-items: center;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: 56px;
  cursor: pointer;
  z-index: 2;
  transition: transform 0.2s, opacity 0.3s;
}

.play-btn:hover {
  transform: translate(-50%, -50%) scale(1.06);
}

.play-btn .material-symbols-outlined {
  font-size: 56px;
}

.play-btn.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* -10s / +10s skip buttons — appear on hover once the video has started. */
.video-skip {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(8, 17, 31, 0.55);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, background 0.2s ease, transform 0.15s ease;
  z-index: 3;
}

.video-skip .material-symbols-outlined {
  font-size: 28px;
}

.video-skip-back {
  left: 18%;
}

.video-skip-fwd {
  right: 18%;
}

.video-skip:hover {
  background: rgba(8, 17, 31, 0.82);
  transform: translateY(-50%) scale(1.06);
}

.video-visual.has-started:hover .video-skip {
  opacity: 1;
  pointer-events: auto;
}

.platform-section {
  padding-bottom: var(--section-y);
}

.audience-tagbar {
  width: var(--content-width);
  height: 78px;
  margin: var(--space-13) auto var(--space-0);
  display: flex;
  align-items: center;
  border: 1px solid var(--color-line-light);
  border-radius: var(--radius-5);
  background: var(--color-paper);
  overflow: hidden;
}

.audience-tagbar-label {
  flex: 0 0 273px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 100%;
  padding: 0 24px;
  font-size: var(--body-sm);
  font-weight: 600;
  color: var(--color-ink);
}

.audience-tagbar-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  height: 100%;
  padding: 0 12px;
  font-size: var(--body-xs);
  font-weight: 500;
  color: var(--color-ink);
  white-space: nowrap;
}

.audience-tagbar-item + .audience-tagbar-item {
  border-left: 1px solid var(--color-line-light);
}

.audience-tagbar-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-2);
  background: #e1deda;
}

.audience-tagbar-icon .material-symbols-outlined {
  font-size: 16px;
}

.audience-cards {
  margin-top: var(--space-13);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.audience-card {
  overflow: hidden;
  border: 1px solid var(--color-line-light);
  background: var(--color-paper);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

.audience-card:hover {
  border-color: var(--color-ink);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.audience-card img {
  width: 100%;
  height: var(--audience-image-height);
  object-fit: cover;
}

.audience-card-body {
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}



.audience-card ul {
  margin-top: auto;
  padding-top: 0;
}

.audience-card li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: center;
}

.audience-card li {
  color: var(--color-ink);
  font-size: var(--body-sm);
  font-weight: 500;
}

.audience-card li .material-symbols-outlined {
  color: rgba(205, 199, 195, 1);
  font-size: 18px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 200, "GRAD" 0, "opsz" 24;
}

.inquiry-points .material-symbols-outlined {
  color: var(--color-ink);
  font-size: 20px;
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

/* ── Access / Inquiry section ─────────────────────────────────── */
.access-section {
  padding: 122px var(--gutter);
  background: #003959 url("../images/inquiry_bg.png") center / cover no-repeat;
}

.access-grid {
  width: 1164px;
  max-width: 100%;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 384px 1fr;
  gap: 32px;
  align-items: stretch;
}

/* Left column — stacked cards */
.access-left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}

.access-top-card {
  flex: 1;
}

.access-top-card {
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.access-top-card h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
  color: var(--color-ink);
}

.access-top-card p {
  margin: 0;
  font-size: var(--body-sm);
  line-height: var(--lh-body-sm);
  color: var(--color-ink-soft);
}

.access-bullet {
  background: rgba(255, 255, 255, 1);
  border-radius: 16px;
  padding: 28px 32px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: var(--body-sm);
  font-weight: 500;
  color: var(--color-ink);
}

.access-bullet .material-symbols-outlined {
  font-size: 22px;
  color: var(--color-ink-soft);
  flex-shrink: 0;
}

/* Right card */
.access-card {
  background: var(--color-paper);
  border-radius: 20px;
  padding: 48px 48px 0;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.access-card-title {
  margin: 0 0 28px;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  color: var(--color-ink);
}

/* Form */
.access-form {
  display: flex;
  flex-direction: column;
  gap: 27px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

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

.form-field > span:first-child {
  font-size: var(--body-xs);
  font-weight: 600;
  color: var(--color-ink);
}

.form-field input,
.form-field select,
.form-field textarea {
  width: 100%;
  border: 1.5px solid var(--color-line);
  border-radius: var(--radius-3);
  background: var(--color-paper);
  padding: 10px 14px;
  color: var(--color-ink);
  font-size: var(--body-sm);
  line-height: var(--lh-body-sm);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  appearance: none;
  -webkit-appearance: none;
}

.form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234a5772' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 36px;
  cursor: pointer;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
}

.form-field input::placeholder,
.form-field textarea::placeholder {
  color: var(--color-ink-muted, rgba(74, 87, 114, 0.4));
}

.form-field textarea {
  resize: none;
}

.form-field .form-error {
  display: none;
  font-size: var(--body-xs);
  color: #c0392b;
}

.form-field.is-invalid .form-error {
  display: block;
}

.form-field.is-invalid input,
.form-field.is-invalid select,
.form-field.is-invalid textarea {
  border-color: #c0392b;
}

/* Submit button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 24px;
  border: 0;
  border-radius: var(--radius-3);
  font-size: var(--body-sm);
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.2s;
}

.btn:hover { opacity: 0.88; }

.btn-accent {
  background: var(--color-ink);
  color: #fff;
}

.btn-block {
  width: 100%;
  justify-content: space-between;
}

.btn-arrow {
  font-size: 18px;
}

.form-fineprint {
  margin: 0;
  font-size: var(--body-xs);
  color: var(--color-ink-soft);
  line-height: var(--lh-body-xs);
  text-align: center;
}

.form-fineprint a {
  color: var(--color-accent);
  text-decoration: underline;
}

.form-status {
  font-size: var(--body-sm);
  text-align: center;
  min-height: 1.5em;
}

.footer {
  min-height: var(--footer-height);
  padding: 37px var(--gutter);
  align-items: center;
  background: var(--color-paper);
}

.logo-footer {
  color: var(--color-hero-a);
}

.footer-meta {
  display: flex;
  gap: var(--space-12);
  align-items: center;
  color: var(--color-ink-soft);
  font-size: var(--body-sm);
  font-weight: 500;
}

.footer-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.footer-link .material-symbols-outlined {
  font-size: 18px;
}

@media (max-width: 1760px) {
  :root {
    --hero-gap: 60px;
    --hero-copy-width: minmax(0, 580px);
    --hero-dashboard-width: minmax(0, 1fr);
  }
}

@media (max-width: 1280px) {
  :root {
    --content-width: calc(100vw - 120px);
    --gutter: 60px;
    --hero-gap: 48px;
    --hero-copy-width: minmax(0, 1fr);
    --hero-dashboard-width: minmax(0, 1fr);
    --display-xl: 56px;
    --lh-display-xl: 60px;
  }

  .hero-content,
  .section-header,
  .video-section,
  .access-grid {
    grid-template-columns: 1fr;
  }

  .hero-dashboard {
    width: 100%;
    height: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .surface-card {
    grid-column: 1 / -1;
    height: auto;
  }

  .curve-panel {
    grid-template-columns: 1fr;
  }

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

  .macro-lead {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .video-section {
    gap: var(--space-12);
  }

  .audience-tagbar {
    overflow: hidden;
    flex-wrap: wrap;
    height: auto;
  }

  .audience-tagbar-icon {
    display: none;
  }

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

@media (max-width: 1024px) {
  :root {
    --content-width: calc(100vw - 80px);
    --gutter: 40px;
    --section-y: 84px;
    --section-gap: 44px;
    --hero-height: auto;
    --hero-padding-top: 92px;
    --hero-padding-bottom: 72px;
    --hero-padding-x: 40px;
    --display-xl: 48px;
    --lh-display-xl: 52px;
    --display-md: 36px;
    --lh-display-md: 38px;
    --hero-button-width: 232px;
  }

  .nav-menu,
  .nav-cta {
    display: none;
  }

  .nav-toggle {
    display: inline-flex;
  }

  .hero-dashboard,
  .stat-row,
  .tenor-bars,
  .distribution-stats,
  .audience-cards,
  .macro-grid {
    grid-template-columns: 1fr;
  }

  .flow-cards {
    grid-template-columns: 1fr;
  }

  .audience-tagbar {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    border-radius: var(--radius-5);
  }

  .audience-tagbar-label {
    flex: none;
    height: 54px;
    border-bottom: 1px solid var(--color-line-light);
  }

  .audience-tagbar-item {
    flex: none;
    justify-content: flex-start;
    padding: 0 20px;
    height: 44px;
  }

  .audience-tagbar-item + .audience-tagbar-item {
    border-left: none;
    border-top: 1px solid var(--color-line-light);
  }

  .flow-arrow {
    transform: rotate(90deg);
  }

  .tabs {
    grid-template-columns: repeat(2, 1fr);
    height: auto;
    gap: var(--space-2);
  }

  .tab,
  .tab:first-child,
  .tab:last-child {
    min-height: var(--surface-tab-height);
    border-radius: var(--radius-3);
  }

  .heatmap {
    grid-template-columns: 120px repeat(6, 120px);
    overflow-x: auto;
  }


  .footer,
  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-6);
  }
}

@media (max-width: 720px) {
  :root {
    --content-width: calc(100vw - 40px);
    --gutter: 20px;
    --section-y: 64px;
    --hero-padding-top: 84px;
    --hero-padding-bottom: 56px;
    --hero-padding-x: 20px;
    --display-xl: 42px;
    --lh-display-xl: 46px;
    --display-md: 30px;
    --lh-display-md: 32px;
    --body-lg: 16px;
    --lh-body-lg: 27px;
    --video-visual-height: 320px;
  }

  .site-header {
    inset: 0 0 auto 0;
  }

  .nav-shell {
    width: calc(100vw - 40px);
    min-height: 64px;
    padding: var(--space-4) var(--space-5);
  }

  .hero-actions,
  .hero-metrics,
  .form-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions {
    flex-direction: column;
  }

  .hero-button,
  .submit-button {
    width: 100%;
  }

  .hero-dashboard {
    grid-template-columns: 1fr;
  }

  .table-card,
  .mini-chart-card {
    height: auto;
  }

  .section-header,
  .panel-top,
  .footer,
  .footer-meta {
    flex-direction: column;
    align-items: flex-start;
  }

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

  .video-playlist li {
    grid-template-columns: 56px 1fr;
  }

  .highlight h3 {
    font-size: 22px;
    line-height: 28px;
    letter-spacing: -0.4px;
  }

  .highlight h2 {
    font-size: 28px;
    line-height: 34px;
    letter-spacing: -0.5px;
  }

  .highlight {
    padding: 24px 20px;
    min-height: unset;
  }

  /* Tile padding */
  .flow-cards article {
    padding: 14px 16px 16px;
  }

  .macro-lead,
  .macro-mini {
    padding: var(--space-6);
  }

  .audience-card-body {
    padding: 18px 20px;
    gap: 14px;
  }

  /* Form card */
  .access-section {
    padding: 48px var(--gutter);
  }

  .access-card {
    padding: 24px 20px 0;
  }

  .access-card-title {
    margin-bottom: 18px;
    font-size: 22px;
  }

  .access-form {
    gap: 16px;
  }

  /* Keep 2 fields per row on mobile */
  .form-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .form-field input,
  .form-field select,
  .form-field textarea {
    padding: 8px 10px;
    font-size: 13px;
  }

  /* Stack access grid vertically */
  .access-grid {
    grid-template-columns: 1fr;
  }

  .access-left {
    display: none;
  }
}