/* === shared/tokens.css === */
/* ============================================================
   Shared Design Tokens — Upstream Tech sites
   ============================================================ */

:root {
  --color-bg: #ffffff;
  --color-surface: #f5f8fa;
  --color-border: #e0e0e0;
  --color-border-strong: #ccc;
  --color-text: #272123;
  --color-text-muted: #555555;
  --color-text-dim: #888;
  --color-accent: #177860;
  --color-accent-hover: #1a8d70;
  --color-teal: #004c5c;
  --color-teal-hover: #005d70;
  --color-burnt-orange: #d9593d;
  --color-aqua: #72e3c7;
  --font-sans: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Typography scale */
  --text-sm: 0.875rem;
  --text-body: 1rem;
  --text-lg: 1.25rem;
  --text-h3: clamp(1.375rem, 2.5vw, 1.75rem);
  --text-h2: clamp(2rem, 4vw, 3rem);
  --text-h1: clamp(2.5rem, 5vw, 3.75rem);
  --text-display: clamp(3rem, 6vw, 4.5rem);
  --text-display-sm: clamp(2rem, 3.5vw, 2.75rem);

  /* Line-height scale */
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* Spacing scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Layout */
  --max-width: 1200px;
  --width-narrow: 700px;
  --width-content: 940px;
  --header-height: 64px;
  --radius: 4px;
  --overlay-dark: rgba(0, 0, 0, 0.45);
  --shadow-card: 0 0 4px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 2px 12px rgba(0, 0, 0, 0.18);
  --shadow-nav: 0 1px 2px rgba(0, 0, 0, 0.08), 0 4px 18px rgba(0, 0, 0, 0.04);
  --transition: 0.2s ease;
}

/* === shared/reset.css === */
/* ============================================================
   Shared Reset — Upstream Tech sites
   ============================================================ */

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 5rem;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: var(--leading-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  overflow-x: hidden;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

/* === shared/base.css === */
/* ============================================================
   Shared Base Styles — Upstream Tech sites
   Typography, links, buttons, heroes, sections, cards, grids,
   carousels, footer, animations
   ============================================================ */

/* --- Typography --- */
h1,
h2,
h3 {
  font-weight: 400;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: 0.75em;
}

h4,
h5,
h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  margin-bottom: 0.75em;
}

h1 {
  font-size: var(--text-h1);
  letter-spacing: -0.03em;
  margin-bottom: 1rem;
}

h2 {
  font-size: var(--text-h2);
  margin-top: 0.5em;
}

h3 {
  font-size: var(--text-h3);
}

/* Global max-width caps every <p> at a readable measure (~75ch). Override per-component only when a paragraph legitimately needs to span wider (rare). */
p {
  margin-bottom: 1em;
  color: var(--color-text-muted);
  max-width: var(--width-narrow);
}

strong {
  font-weight: 700;
}

/* Utility: color a word/phrase with the site accent colour */
.text-accent {
  color: var(--color-accent);
}

/* --- Links --- */
a {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  transition:
    border-color var(--transition),
    opacity var(--transition);
}

a:hover {
  border-bottom-color: var(--color-accent);
  opacity: 0.85;
}

/* --- Header / Navigation --- */
header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: none;
  box-shadow: var(--shadow-nav);
}

header nav {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: var(--header-height);
  gap: var(--space-xl);
}

.nav-logo {
  border-bottom: none;
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 28px;
  width: auto;
  margin: 0;
  border: none;
  border-radius: 0;
}

.nav-logo:hover {
  opacity: 0.8;
}

header nav ul {
  list-style: none;
  display: flex;
  align-items: center;
  align-content: center;
  gap: var(--space-xs);
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
}

header nav ul li {
  display: flex;
  align-items: center;
}

header nav ul li a {
  display: block;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  border-bottom: none;
  border-radius: var(--radius);
  transition:
    color var(--transition),
    background var(--transition);
}

header nav ul li a:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
  opacity: 1;
}

/* Nav action buttons */
header nav ul li:has(a.btn-contact) {
  margin-left: 0.5rem;
}

header nav ul li a.btn-contact,
header nav ul li a.btn-login {
  color: var(--color-bg);
  font-weight: 700;
  padding: var(--space-xs) var(--space-md);
}

header nav ul li a.btn-contact:hover,
header nav ul li a.btn-login:hover {
  color: var(--color-bg);
  opacity: 1;
}

header nav ul li a.btn-contact {
  background: var(--color-accent);
}
header nav ul li a.btn-contact:hover {
  background: var(--color-accent-hover);
}

header nav ul li a.btn-login {
  background: var(--color-teal);
}
header nav ul li a.btn-login:hover {
  background: var(--color-teal-hover);
}

/* --- Main Content --- */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-xl) 6rem;
}

/* --- Utilities --- */
.text-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* --- Card hover effect --- */
.card-hover {
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--transition),
    transform var(--transition);
}
.card-hover:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-4px);
}

/* Anchor used as a card wrapper: kill the default underline + inline baseline gap. */
a.card-hover {
  display: block;
  border-bottom: none;
}
a.card-hover:hover {
  border-bottom: none;
  opacity: 1;
}
/* Specificity (0,1,1): high enough to beat the global `img { margin: 1.5rem 0 }`
   baseline (which otherwise insets card-wrapper images by 24px top/bottom),
   low enough to tie with card-specific rules like `.dataset-card > img` —
   and those rules live in per-site stylesheets concatenated after base.css,
   so they win on source order. `height: auto` is the <img> default. */
.card-hover > img {
  display: block;
  width: 100%;
  margin: 0;
}

/* --- Buttons --- */
.btn-primary,
.btn-secondary {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--text-sm);
  font-weight: 700;
  border-radius: var(--radius);
  border: none;
  transition:
    background var(--transition),
    transform var(--transition);
  text-align: center;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-bg);
}

.btn-primary:hover {
  background: var(--color-accent-hover);
  transform: translateY(-1px);
  opacity: 1;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-border-strong);
}

.btn-secondary:hover {
  border-color: var(--color-text);
  background: rgba(0, 0, 0, 0.03);
  transform: translateY(-1px);
  opacity: 1;
}

/* --- Hero --- */
.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 580px;
  margin-bottom: var(--space-2xl);
  overflow: hidden;
}

/* Full-bleed escape: the image .hero (photo + overlay) and the HydroForecast
   post heroes (.post-hero-full, .post-hero-product) span the full viewport.
   Split heroes (.industry-hero-split, .ms-hero-split) have a white background
   and constrained content, so they stay within the shell width. */
main > .hero,
main > .post-hero-full,
main > .post-hero-product {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
}

/* Cancel <main>'s top padding so the hero sits flush with the nav.
   .industry-page has no top padding, so its heroes already sit flush.
   Mobile override below matches main's reduced top padding at ≤768px. */
main:not(.industry-page) > .hero,
main:not(.industry-page) > .post-hero-full,
main:not(.industry-page) > .post-hero-product {
  margin-top: calc(-1 * var(--space-3xl));
}

/* On home-hero-nav pages the nav is transparent and overlaps the hero,
   so pull the hero up an extra header-height and reserve that space as
   padding-top — otherwise the white area behind the transparent nav shows. */
body.home-hero-nav main:not(.industry-page) > .hero {
  margin-top: calc(-1 * (var(--space-3xl) + var(--header-height)));
  padding-top: var(--header-height);
  min-height: calc(580px + var(--header-height));
}

/* Bottom-align hero text — used on industry pages where the imagery
   pulls the eye up and the headline reads better anchored at the base. */
.hero--bottom {
  align-items: flex-end;
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--overlay-dark);
  pointer-events: none;
}

.hero-text {
  position: relative;
  z-index: 2;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  width: 100%;
}

.hero-text h1 {
  color: #fff;
  max-width: var(--width-narrow);
}

.hero-text p {
  font-size: var(--text-lg);
  color: rgba(255, 255, 255, 0.9);
}

.hero-ctas {
  display: flex;
  gap: var(--space-md);
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.hero .btn-primary {
  background: #fff;
  color: var(--color-text);
  mix-blend-mode: screen;
}

.hero .btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
}

.hero .btn-secondary {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.6);
}

.hero .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #fff;
}

/* --- Horizontal rules --- */
hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2xl) 0;
}

hr.hr-compact {
  margin: 3rem 0;
}

/* --- Sections --- */
section {
  margin-bottom: 3rem;
}

section h2 {
  margin-bottom: 1.25rem;
}

section h3 {
  margin-bottom: 0.5em;
}

/* --- Images --- */
img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin: 1.5rem 0;
  border: none;
}

/* --- Lists --- */
ul,
ol {
  padding-left: 1.25em;
  margin-bottom: 1.5em;
}

/* --- Blockquotes (Testimonials) --- */
blockquote {
  position: relative;
  margin: 0;
  padding: var(--space-lg);
  background: var(--color-bg);
  border: none;
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  quotes: none;
}

blockquote::before,
blockquote::after {
  content: none;
}

blockquote p {
  flex: 1;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

blockquote p::before {
  content: "\201C";
}

blockquote p::after {
  content: "\201D";
}

blockquote footer {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 0.75rem;
  background: none;
}

/* --- Post-body blockquote + inline CTA overrides --- */
.post-body > .btn-primary,
.post-body > .btn-secondary {
  display: inline-block;
  margin-bottom: 1.25rem;
  border-bottom: none;
}

.post-body blockquote {
  margin: 0 0 1.25rem;
  min-height: auto;
}

.post-body blockquote p {
  margin-bottom: 0.75rem;
}

.post-body blockquote p::before,
.post-body blockquote p::after {
  content: none;
}

.post-body blockquote p:last-child {
  margin-bottom: 0;
}

/* Browser default puts ~40px side margins on <figure>; reset so figures
   align with surrounding paragraphs in the post body. */
.post-body figure {
  margin: 0;
}

.post-body figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  text-align: center;
  margin-top: -0.625rem;
  margin-bottom: 1.25rem;
}

.post-body blockquote hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0.75rem 0;
}

.testimonial-logo {
  display: block;
  max-height: 52px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  flex-shrink: 0;
  border: none;
  border-radius: 0;
  margin: 0;
}

.testimonial-attr {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
}

.testimonial-org {
  font-weight: 700;
  color: var(--color-text);
}

.testimonial-name {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Quotes Row --- */
.quotes-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  align-items: stretch;
}

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

/* Single standalone testimonial — keep card chrome but scale up type and logo */
.industry-section > blockquote {
  max-width: fit-content;
  margin-inline: auto;
  border-left-width: 5px;
}

.industry-section > blockquote p {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  margin-bottom: var(--space-lg);
}

.industry-section > blockquote footer {
  padding-top: var(--space-md);
  gap: var(--space-md) var(--space-lg);
}

.industry-section > blockquote .testimonial-logo {
  max-height: 80px;
  max-width: 200px;
}

.industry-section > blockquote .testimonial-org {
  font-size: var(--text-base);
}

/* --- Logo Carousels --- */
.logo-carousel,
.data-logo-carousel {
  overflow: hidden;
  position: relative;
}

.logo-carousel::before,
.logo-carousel::after,
.data-logo-carousel::before,
.data-logo-carousel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4rem;
  z-index: 2;
  pointer-events: none;
}

.logo-carousel::before,
.data-logo-carousel::before {
  left: 0;
  background: linear-gradient(to right, var(--color-bg), transparent);
}

.logo-carousel::after,
.data-logo-carousel::after {
  right: 0;
  background: linear-gradient(to left, var(--color-bg), transparent);
}

.logo-carousel {
  margin: 2rem 0 3rem;
  margin-left: calc(-50vw + 50%);
  width: 100vw;
}

.logo-carousel-track,
.data-logo-carousel-track {
  display: flex;
  align-items: center;
  gap: var(--space-3xl);
  width: max-content;
}

.logo-carousel-track,
.data-logo-carousel-track {
  animation: scroll-logos calc(var(--logo-count, 15) * 8s) linear infinite;
}

.logo-carousel-track:hover,
.data-logo-carousel-track:hover {
  animation-play-state: paused;
}

.logo-carousel-track img,
.data-logo-carousel-track img {
  width: auto;
  object-fit: contain;
  margin: 0;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
}

.logo-carousel-track img {
  height: auto;
  max-height: 52px;
  max-width: 120px;
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* --- Quote Carousel (homepage) --- */
.quote-carousel {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.quote-carousel-viewport {
  flex: 1;
  overflow: hidden;
  padding: var(--space-sm) 0;
}

.quote-carousel-track {
  display: flex;
  gap: var(--space-md);
  transition: transform 0.4s ease;
  padding: 0 0.25rem;
}

.quote-carousel-card {
  flex: 0 0 calc((100% - 2rem) / 3);
  min-width: 20rem;
}

.quote-carousel-title {
  color: var(--color-accent);
  margin: 0 0 var(--space-xs);
}

/* Prev/next buttons used inside .quote-carousel (and .dataset-carousel on Lens) */
.dataset-carousel-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    border-color var(--transition),
    background var(--transition);
}

.dataset-carousel-btn:hover {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg);
}

/* --- Tables --- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--text-sm);
}

thead {
  border-bottom: 2px solid var(--color-border-strong);
}

th {
  text-align: left;
  padding: var(--space-md);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
}

td {
  padding: var(--space-md);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}

tbody tr {
  transition: background var(--transition);
}

tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

/* --- Focus indicators (accessibility) --- */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

select:focus-visible {
  outline-offset: 0;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* --- Mobile Nav Toggle --- */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-sm);
  flex-direction: column;
  gap: var(--space-xs);
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition:
    transform var(--transition),
    opacity var(--transition);
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Footer --- */
footer:not(blockquote footer) {
  background: var(--color-surface);
  padding: var(--space-3xl) var(--space-xl) 0;
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.footer-top {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-2xl);
  padding-bottom: 3rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.footer-newsletter-section {
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  width: 100%;
}

.footer-newsletter-logo {
  height: 32px;
  margin: 0;
}

.footer-newsletter-text {
  margin: 0 0 var(--space-sm);
  color: var(--color-text-muted);
}

.footer-newsletter-btn {
  border-bottom: none;
}

.footer-logo {
  border-bottom: none;
  display: inline-block;
  align-self: start;
}

.footer-logo:hover {
  opacity: 0.8;
}

.footer-logo img {
  height: 32px;
  width: auto;
  margin: 0;
  border: none;
  border-radius: 0;
}

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

.footer-col strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 0.5rem;
}

.footer-col a {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-bottom: none;
  transition: color var(--transition);
}

.footer-col a:hover {
  color: var(--color-accent);
  opacity: 1;
}

.footer-bottom {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-border);
}

.footer-bottom p {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-dim);
}

.footer-bottom-right {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.footer-bottom-right a {
  color: var(--color-text-dim);
  border-bottom: none;
  font-size: var(--text-sm);
  transition: color var(--transition);
}

.footer-bottom-right a:hover {
  color: var(--color-text);
  opacity: 1;
}

.footer-social svg {
  display: block;
  width: 20px;
  height: 20px;
}

/* --- Newsletter Page --- */
.newsletter-page {
  max-width: var(--width-narrow);
  margin: 0 auto;
  padding: var(--space-3xl) var(--space-lg);
}

/* --- Breadcrumb --- */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-size: var(--text-lg);
  margin-bottom: 1rem;
}

.breadcrumb a {
  color: var(--color-teal);
  border-bottom: none;
  font-weight: 400;
}

.breadcrumb a:hover {
  opacity: 0.7;
}

.breadcrumb-sep {
  color: var(--color-text-dim);
}

.breadcrumb-current {
  color: var(--color-teal);
}

/* --- Page Header --- */
.page-header {
  padding-bottom: var(--space-2xl);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--color-border);
}

.page-header > * {
  max-width: var(--width-narrow);
}

.page-header > .resource-filter-bar {
  max-width: none;
  margin-top: var(--space-lg);
  margin-bottom: 0;
}

.page-header h1 {
  margin-bottom: 0.75rem;
}

.page-header p:last-child {
  margin-bottom: 0;
}

/* --- Grid layouts --- */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
}

/* --- Callout card title (semantic class, not a heading scope) --- */
.callout-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}

/* --- Logo bar label --- */
.logo-bar-label {
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-tight);
  margin-bottom: var(--space-md);
}

/* --- Feature row heading (semantic class, not a heading scope) --- */
.feature-text-title {
  font-size: var(--text-h3);
  line-height: var(--leading-tight);
  font-weight: 700;
  margin-top: 0;
  margin-bottom: var(--space-md);
}

/* --- FAQ list --- */
.faq-list {
  max-width: var(--width-narrow);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) 0;
}

.faq-item summary {
  cursor: pointer;
  font-size: var(--text-lg);
  font-weight: 700;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-item summary::after {
  content: "+";
  font-size: var(--text-lg);
  font-weight: 400;
  color: var(--color-text-muted);
  flex-shrink: 0;
  margin-left: var(--space-md);
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-answer {
  padding-top: var(--space-md);
  color: var(--color-text-muted);
}

/* --- Case study grid --- */
.case-study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--space-lg);
}

.case-study-card {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg);
}

.case-study-card a {
  display: block;
  border-bottom: none;
  color: inherit;
}

.case-study-card a:hover {
  opacity: 1;
}

.case-study-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.case-study-card-body {
  padding: var(--space-md);
}

.case-study-card-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

.case-study-location {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-sm);
}

.case-study-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.case-study-tag {
  font-size: var(--text-sm);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, transparent);
  padding: 0.15em 0.5em;
  border-radius: 3px;
}

/* --- Resource filter bar / button (base) --- */
.resource-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: 3rem;
}

.resource-filter-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.resource-search-wrap {
  position: relative;
  flex: 0 1 260px;
  display: flex;
}

.resource-search {
  width: 100%;
  padding: var(--space-xs) calc(var(--space-md) + 1.5rem) var(--space-xs)
    calc(var(--space-md) + 1.5rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='2' stroke='%23666'><path stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z'/></svg>")
    no-repeat left var(--space-sm) center / 1rem 1rem;
  color: var(--color-text);
  font-size: var(--text-sm);
  font-family: inherit;
}

.resource-search:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Hide the browser's native search clear button — we render our own
   clear button so it can match the brand color. */
.resource-search::-webkit-search-cancel-button,
.resource-search::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.resource-search-clear {
  position: absolute;
  right: var(--space-sm);
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-bg);
  cursor: pointer;
  transition: background var(--transition);
}

.resource-search-clear:hover {
  background: var(--color-accent-hover);
}

.resource-search-clear[hidden] {
  display: none;
}

.resource-section-label {
  font-size: var(--text-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted, var(--color-text));
  margin: 0 0 var(--space-md);
}

.load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

/* Narrowed to the natural width of a 3-card row so the header, filter
   bar, section labels and grid all share the same right edge. */
.resources-main {
  max-width: calc(340px * 3 + var(--space-md) * 2 + var(--space-xl) * 2);
}

.resource-filter-btn {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition),
    border-color var(--transition);
}

.resource-filter-btn:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.resource-filter-btn.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-bg);
}

#load-more-wrap {
  margin-top: 2rem;
}

.resource-featured {
  margin-bottom: 0;
}

.resource-featured .resource-grid {
  justify-content: flex-start;
}

.data-section .resource-grid,
.industry-section .resource-grid,
.post-section .resource-grid {
  justify-content: center;
}

.data-section-link a::after {
  content: "→";
  display: inline-block;
  margin-left: 0.3em;
  transform: translateY(-0.06em);
}

/* --- Data section (centered section wrapper) --- */
.data-section {
  text-align: center;
}

.data-section > p {
  max-width: var(--width-narrow);
  margin-left: auto;
  margin-right: auto;
}

/* --- Section link (centered link below a section) --- */
.data-section-link {
  margin: 1.5rem auto 0;
  text-align: center;
}

.data-section-link a {
  color: var(--color-accent);
}

/* --- Nav Dropdown (base) --- */
.nav-dropdown-wrap {
  position: relative;
}

.nav-dropdown-trigger {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    color var(--transition),
    background var(--transition);
}

.nav-dropdown-trigger:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
}

.nav-chevron {
  vertical-align: middle;
}

.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: var(--space-sm);
  z-index: 200;
}

.nav-dropdown-wrap.open .nav-dropdown,
.nav-dropdown-wrap:hover .nav-dropdown {
  display: block;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm);
  border-radius: var(--radius);
  border-bottom: none;
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text);
  transition: background var(--transition);
}

.nav-dropdown-item:hover {
  background: var(--color-surface);
  opacity: 1;
}

/* --- Resources wide dropdown (featured post + browse columns) --- */
.nav-dropdown--wide {
  width: 560px;
  padding: 0;
  overflow: hidden;
}

.nav-dropdown-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.nav-dropdown-col--browse {
  border-left: 1px solid var(--color-border);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
}

.nav-featured-carousel {
  padding: var(--space-md);
  display: grid;
}

article.nav-featured-post {
  grid-area: 1 / 1;
  width: auto;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.4s ease,
    visibility 0.4s ease;
  animation: none;
}

.nav-featured-post.active {
  opacity: 1;
  visibility: visible;
}

.nav-featured-post a {
  padding: 0;
}

.nav-featured-post .resource-date {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-featured-title {
  font-size: var(--text-sm);
  color: var(--color-text);
  margin: 0 0 0.4rem;
  display: block;
  -webkit-line-clamp: unset;
  overflow: visible;
}

.nav-dropdown-explore-all {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
  padding: var(--space-sm);
  border-radius: var(--radius);
  border-bottom: none;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  transition: background var(--transition);
}

.nav-dropdown-explore-all:hover {
  background: var(--color-surface);
  opacity: 1;
}

.industry-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-accent);
}

/* --- Resource Grid --- */
.resource-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.resource-grid.resource-grid--row {
  display: flex;
  flex-wrap: wrap;
  padding: 8px;
  margin: -8px;
}

.resource-card {
  width: 340px;
  overflow: hidden;
  border: none;
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
}

/* Between mobile and full-desktop, 340px-wide cards only fit 2 per row,
   leaving an empty column. Force 3-up via grid in this range. */
@media (min-width: 769px) and (max-width: 1100px) {
  .resource-grid,
  .resource-grid.resource-grid--row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .resource-card {
    width: auto;
  }
}

.resource-card a {
  display: block;
  border-bottom: none;
  color: inherit;
}

.resource-card a:hover {
  opacity: 1;
}

.resource-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: left top;
  display: block;
  margin: 0;
  padding: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

.resource-card-body {
  padding: var(--space-md);
  text-align: left;
}

.resource-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: block;
  margin-bottom: 0.4rem;
}

.resource-card-body h3,
.resource-card-title {
  font-size: var(--text-body);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.resource-card-body p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: 0;
}

/* --- Use Case Grid --- */
.use-case-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin: 1.5rem 0;
}

.use-case-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: none;
  border-radius: var(--radius);
  background: var(--color-bg);
  box-shadow: var(--shadow-card);
  text-decoration: none;
}

.use-case-card-image {
  position: relative;
  overflow: hidden;
}

.use-case-card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  margin: 0;
  border: none;
  border-radius: 0;
  display: block;
}

.use-case-card-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-dark);
  color: #fff;
  font-size: var(--text-h3);
  font-weight: 700;
  margin: 0;
}

.use-case-card-body {
  padding: 0.75rem 1.25rem 1rem;
}

.use-case-card-body p {
  margin: 0.25rem 0 0;
}

/* --- Feature Rows --- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

/* Variant: text paired with a compact resource-card (text gets more room). */
.feature-row--text-wide {
  grid-template-columns: 2fr 1fr;
}

.feature-image img {
  width: 100%;
  border-radius: var(--radius);
  margin: 0;
  box-shadow: var(--shadow-card);
}

.feature-image-empty {
  min-height: 100px;
}

.features-cta {
  background: var(--color-accent);
  color: var(--color-bg);
  padding: var(--space-2xl);
  border-radius: var(--radius);
  margin-top: 2rem;
}

.features-cta h2 {
  color: var(--color-bg);
  margin-top: 0;
}

.features-cta p {
  color: rgba(255, 255, 255, 0.85);
  max-width: var(--width-narrow);
}

.features-cta .btn-primary {
  background: var(--color-bg);
  color: var(--color-accent);
  border: 1px solid var(--color-bg);
}

.features-cta .btn-primary:hover {
  background: transparent;
  color: var(--color-bg);
  border-color: var(--color-bg);
}

/* --- Industry Page Shell ---
   The shell itself is the single source of max-width and horizontal
   padding for *all* in-flow content (sections, hrs, CTA banner). Inner
   blocks (.industry-section, hr, .cta-banner, .section-light) inherit
   the constrained width and don't re-declare it, so every edge aligns.
   Heroes opt out via the .hero / .industry-hero-split full-bleed escape
   declared above. */
.industry-page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-xl) var(--space-3xl);
}

.industry-page > .cta-banner {
  margin-bottom: 3rem;
}

/* --- Light grey section wrapper --- */
.section-light {
  background: var(--color-surface);
  padding: 2rem 3rem;
  border-radius: var(--radius);
  max-width: var(--max-width);
  margin: 1.5rem auto;
}

/* Accent-tinted variant. Same shape as .section-light, but on the site's
   brand accent (teal on HF/Upstream, sea-green on Lens) with light text.
   Inner .btn-primary inverts to stay readable on the accent background. */
.section-light--accent {
  background: var(--color-accent);
}

.section-light--accent,
.section-light--accent h2,
.section-light--accent h3,
.section-light--accent h4,
.section-light--accent p,
.section-light--accent a:not(.btn-primary) {
  color: #fff;
}

.section-light--accent .btn-primary {
  background: #fff;
  color: var(--color-accent);
  border: 1px solid #fff;
}

.section-light--accent .btn-primary:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

.section-light--accent .stat-block dt {
  color: #fff;
}

.section-light--accent .stat-block dd {
  color: rgba(255, 255, 255, 0.85);
}

/* --- Stat row (display numbers + label) ---
   Use for proof-points where a bulleted list would under-sell the numbers.
   Built on <dl> so each number/label is semantically paired. */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
  margin: var(--space-lg) 0;
  padding: 0;
}

.stat-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.stat-block dt {
  font-size: var(--text-display);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--color-accent);
}

/* Stat rows inside a narrow .text-and-media column don't have room for
   the full display-size numbers (three across, half the page wide).
   Step down to the compact stat size. */
.text-and-media .stat-row {
  gap: var(--space-md);
}

.text-and-media .stat-block dt {
  font-size: var(--text-display-sm);
}

.stat-block dd {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 768px) {
  .stat-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* --- Rich-text block for section intros above card grids --- */
.industry-intro {
  margin-bottom: var(--space-xl);
}

.industry-intro h2 {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.industry-intro p {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

/* --- Text + media two-column (industry narrative with imagery) --- */
.text-and-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.text-and-media--media-left {
  direction: rtl;
}
.text-and-media--media-left > * {
  direction: ltr;
}

.text-and-media--top {
  align-items: flex-start;
}

.text-and-media--bottom {
  align-items: flex-end;
}

.text-and-media > div {
  min-width: 0;
}

.text-and-media img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
  object-fit: cover;
}

.stacked-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.text-and-media img.media-contain {
  border-radius: 0;
  object-fit: contain;
  max-height: 440px;
  margin: 0 auto;
}

/* --- Logo Bar --- */
.logo-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3xl);
}

.logo-bar img {
  height: 60px;
  max-width: 160px;
  object-fit: contain;
  border-radius: var(--radius);
}

.logo-bar--lg img {
  height: 90px;
  max-width: 220px;
}

/* --- Blog Post Layout --- */
.post-section {
  padding: 3.75rem 1.25rem;
  position: relative;
}

.post-section:first-child {
  padding-top: 0;
}

.post-section.no-bottom-padding {
  padding-bottom: 0;
}

.post-container {
  max-width: var(--max-width);
  margin: 0 auto;
}

.post-hero-split {
  display: grid;
  grid-template-columns: minmax(auto, var(--width-narrow)) 1fr;
  gap: var(--space-2xl);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}

.post-hero-split h1 {
  margin-bottom: var(--space-md);
}

.post-hero-summary {
  font-size: var(--text-lg);
}

.post-hero-media {
  min-width: 0;
}

.post-hero {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  object-fit: cover;
}

.post-video {
  position: relative;
  padding-bottom: 56.25%;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.post-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.post-two-col {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: var(--space-3xl);
}

.post-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: sticky;
  top: 2.5rem;
  align-self: start;
}

.post-sidebar-meta {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.post-author {
  font-size: var(--text-sm);
}

.post-date {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.share-dropdown {
  position: relative;
}

.share-dropdown-toggle {
  font-size: var(--text-sm);
  color: var(--color-burnt-orange);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
}

.share-dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  background: var(--color-bg);
  border: 1px solid var(--color-text);
  box-shadow: 2px 2px 0 0 var(--color-text);
  min-width: 180px;
}

.share-dropdown.open .share-dropdown-list {
  display: block;
}

.share-dropdown-link {
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  display: block;
}

.share-dropdown-link:hover {
  color: var(--color-accent);
  text-decoration: underline;
}

.post-toc {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.post-toc-heading {
  font-size: var(--text-lg);
}

.post-toc-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.post-toc-list a {
  font-weight: 400;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: none;
}

.post-toc-list a:hover {
  color: var(--color-accent);
  text-decoration: underline;
  border-bottom: none;
}

.post-body {
  max-width: var(--width-narrow);
  overflow-wrap: break-word;
}

.post-body h2 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.post-body h1 {
  border-bottom: 1px solid var(--color-text);
  margin-top: 2.5rem;
  margin-bottom: 1.25rem;
}

/* HubSpot's inline form embed wraps the form-title widget in `.hs-richtext`
   and renders it as an h1, which would otherwise pick up the section-divider
   styling above. Suppress it so embedded form titles don't grow a stray
   underline + 2.5rem top margin. */
.post-body .hs-richtext h1,
.post-body .hs-form-wrap h1 {
  border-bottom: none;
  margin-top: 0;
}

.post-body h3,
.post-body h4 {
  margin-top: 0;
  margin-bottom: 1.25rem;
}

.post-body h5,
.post-body h6 {
  margin-top: 1.25rem;
  margin-bottom: 1.25rem;
}

.post-body p {
  margin-bottom: 1.25rem;
}

.post-body ul {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-left: 1.25rem;
}

.post-body ol {
  margin-top: 0;
  margin-bottom: 1.25rem;
  padding-left: 2.5rem;
}

.hs-form-wrap {
  margin: 1.25rem 0;
  padding: 1rem;
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

/* Post-body media: full-bleed cards for inline images, videos, iframes,
   and Wistia players. The iframe rule additionally locks the embed to a
   16:9 aspect so YouTube/Vimeo/HubSpot-video embeds render at the right
   size without per-page width/height attributes. */
.post-body img,
.post-body video,
.post-body iframe,
.post-body wistia-player {
  width: 100%;
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin: 1.25rem 0;
  overflow: hidden;
  display: block;
}

/* Articles (blog + support) put full screenshots inside list steps. Site
   stylesheets size bare `li img` as decorative logo chips (Lens: 80×40 with
   padding + bg) — without this higher-specificity reset those rules squash
   article images into tiny letterboxed thumbnails. */
.post-body li img {
  height: auto;
  object-fit: initial;
  background: none;
  padding: 0;
}

/* Support articles render images at natural size (Help Scout parity): the
   blog's `width: 100%` upscales small UI screenshots (e.g. a 230px dialog
   blown up to column width). Wide screenshots still cap at the column. */
.post-body--support img {
  width: auto;
  max-width: 100%;
}

/* Lens's `td a` idiom (style.css "Table link buttons") renders every link in
   a table cell as a filled button — correct for marketing comparison tables,
   wrong for migrated support tables whose footnotes contain prose links.
   Restore the global link look (higher specificity than the bare `td a`). */
.post-body--support td a {
  font-size: inherit;
  padding: 0;
  background: none;
  color: var(--color-accent);
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
  font-weight: inherit;
  display: inline;
}

.post-body iframe {
  aspect-ratio: 16 / 9;
}

/* HubSpot's form embed lives inside an iframe that would otherwise
   inherit .post-body iframe's video-embed styling (16:9, shadow,
   radius). Selector specificity (0,0,2,1) beats .post-body iframe
   (0,0,1,1) so the form iframe stays clean inside .hs-form-wrap. */
.post-body .hs-form-wrap iframe {
  aspect-ratio: auto;
  box-shadow: none;
  margin: 0;
  border-radius: 0;
}

/* --- Blog post + feature-row responsive --- */
@media (max-width: 991px) {
  .post-hero-split {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .post-two-col {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .post-sidebar {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-md);
    align-items: center;
  }

  .post-sidebar-meta {
    flex-direction: row;
    gap: var(--space-sm);
  }

  .post-toc {
    display: none;
  }

  .post-section {
    padding: 2.5rem 1.25rem;
  }
}

@media (max-width: 768px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .grid-2,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  .case-study-grid {
    grid-template-columns: 1fr;
  }

  .logo-bar img {
    height: 40px;
    max-width: 100px;
  }

  .quote-carousel-card {
    flex: 0 0 100%;
  }

  .logo-carousel-track {
    gap: var(--space-xl);
  }

  .logo-carousel-track img {
    max-height: 36px;
    max-width: 80px;
    height: auto;
  }

  /* Tighten the industry-page horizontal padding on small screens. The hero
     inners inherit this from the shell — no separate override needed. */
  .industry-page {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

@media (max-width: 479px) {
  .post-section {
    padding: 1.25rem 0.9375rem;
  }
}

/* --- Callout cards --- */
.callout-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border-radius: var(--radius);
  padding: var(--space-xl);
  box-shadow: var(--shadow-card);
}

.callout-card h3 {
  margin-bottom: 0.5rem;
  color: var(--color-accent);
}

.callout-card p {
  font-size: var(--text-body);
}

.callout-card ul {
  margin-bottom: 0;
}

.callout-card > p:nth-last-child(2) {
  flex: 1;
}

.callout-card > p:last-child {
  margin-bottom: 0;
}

/* --- CTA Banner --- */
.cta-banner {
  background: var(--color-surface);
  color: var(--color-text);
  text-align: center;
  padding: var(--space-xl) var(--space-xl);
  border-radius: 12px;
  margin-top: 3rem;
}

.cta-banner p {
  font-size: var(--text-lg);
  margin: 0 auto 1.25rem;
}

.cta-banner-btn {
  display: inline-block;
  background: var(--color-accent);
  color: var(--color-bg);
  font-weight: 700;
  font-size: var(--text-lg);
  padding: 0.85rem 2.5rem;
  border-radius: 6px;
  transition:
    transform var(--transition),
    opacity var(--transition);
}

.cta-banner-btn:hover {
  transform: scale(1.05);
  background: var(--color-accent-hover);
}

/* --- Subtle animations --- */
@media (prefers-reduced-motion: no-preference) {
  main > section,
  blockquote,
  article:not(.card-hover):not(.nav-featured-post) {
    animation: fadeIn 0.4s ease both;
  }

  .card-hover {
    animation: fadeInOnly 0.4s ease both;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(8px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes fadeInOnly {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
}

/* --- Selection --- */
::selection {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  color: var(--color-text);
}

/* --- Scrollbar (webkit) --- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* --- Responsive --- */
@media (max-width: 960px) {
  .nav-toggle {
    display: flex;
  }

  header nav {
    flex-wrap: wrap;
    padding: 0 1.5rem;
    min-height: 56px;
  }

  header nav ul {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    gap: 0;
    padding: var(--space-sm) 0 var(--space-md);
    border-top: 1px solid var(--color-border);
    max-height: calc(100dvh - 56px);
    overflow-y: auto;
  }

  header nav ul.nav-open {
    display: flex;
  }

  header nav ul li {
    width: 100%;
    border-bottom: 1px solid var(--color-border);
    align-items: stretch;
  }

  header nav ul li:last-child {
    border-bottom: none;
  }

  header nav ul li a {
    display: block;
    font-size: var(--text-body);
    padding: var(--space-sm) 0;
    border-radius: 0;
    text-align: left;
  }

  header nav ul li a.btn-contact,
  header nav ul li a.btn-login {
    margin-top: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    text-align: center;
    border-radius: var(--radius);
    width: 100%;
    box-sizing: border-box;
  }

  header nav ul li:has(a.btn-contact),
  header nav ul li:has(a.btn-login) {
    border-bottom: none;
    margin-left: 0;
  }

  .nav-dropdown-wrap {
    flex-direction: column;
  }

  .nav-dropdown-trigger {
    padding: var(--space-sm) 0;
    width: 100%;
    justify-content: flex-start;
    font-size: var(--text-body);
  }

  .nav-dropdown {
    position: static;
    transform: none;
    width: 100%;
    box-shadow: none;
    padding: 0 0 var(--space-xs) 0;
  }

  .nav-dropdown-item {
    padding: var(--space-xs) var(--space-sm);
  }

  .nav-dropdown--wide {
    width: 100%;
    right: auto;
  }

  .nav-dropdown-cols {
    grid-template-columns: 1fr;
  }

  .nav-dropdown-col--featured {
    display: none;
  }

  .nav-dropdown-col--browse {
    border-left: none;
    border-top: none;
    padding-left: 0;
    padding-top: 0;
  }
}

@media (max-width: 768px) {
  .footer-top {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-columns {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-md);
    text-align: center;
  }

  .quotes-row {
    grid-template-columns: 1fr;
  }

  .text-and-media {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .text-and-media--media-left {
    direction: ltr;
  }

  .section-light {
    padding: 40px 1.5rem;
  }

  .hero {
    min-height: 360px;
  }

  .hero-text h1 {
    max-width: 100%;
  }

  main {
    padding: var(--space-xl) var(--space-md) var(--space-3xl);
  }

  /* Match the reduced main top padding at this breakpoint. */
  main:not(.industry-page) > .hero,
  main:not(.industry-page) > .post-hero-full,
  main:not(.industry-page) > .post-hero-product {
    margin-top: calc(-1 * var(--space-xl));
  }

  body.home-hero-nav main:not(.industry-page) > .hero {
    margin-top: calc(-1 * (var(--space-xl) + var(--header-height)));
  }

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

/* --- Team grid (about pages) --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 200px));
  justify-content: center;
  gap: var(--space-lg);
}

/* --- About page hero split (text + media side-by-side) --- */
.about-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
  max-width: none;
}

.about-hero-media img {
  max-height: 340px;
  width: auto;
  display: block;
}

@media (max-width: 768px) {
  .about-hero {
    grid-template-columns: 1fr;
  }
  .about-hero-media {
    display: none;
  }
}

/* --- Industry hero split (text + media side-by-side) ---
   Side-by-side variant of the full-bleed hero used when the imagery is
   a collage / illustrative panel rather than a single overlay photo.
   Constrained by the page shell (.industry-page / main); the inner just lays
   out the two columns and inherits the shell's width + padding. */
.industry-hero-split {
  padding: var(--space-xl) 0;
}

.industry-hero-split-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
}

.industry-hero-split-media img {
  max-height: 340px;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .industry-hero-split-inner {
    grid-template-columns: 1fr;
  }
}

/* --- Story layout: text + heading (left) + timeline (right) side-by-side --- */
.story-layout {
  display: grid;
  grid-template-columns: 1fr minmax(260px, 360px);
  gap: var(--space-2xl);
  align-items: start;
}

.story-text > :first-child {
  margin-top: 0;
}

.timeline {
  list-style: none;
  margin: 0;
  padding: 0 0 0 var(--space-lg);
  border-left: 2px solid var(--color-accent);
}

.timeline li {
  position: relative;
  padding: 0 0 var(--space-xl) var(--space-md);
}

.timeline li:last-child {
  padding-bottom: 0;
}

.timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--space-lg) - 7px);
  top: 0.4rem;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 2px solid var(--color-bg);
  box-shadow: 0 0 0 2px var(--color-accent);
}

.timeline-year {
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--color-accent);
  margin-bottom: 0.25rem;
}

.timeline li p {
  margin: 0;
}

@media (max-width: 768px) {
  .story-layout {
    grid-template-columns: 1fr;
  }
}

.team-card {
  display: block;
  text-align: center;
  color: inherit;
  border-bottom: none;
  transition: transform var(--transition);
}

a.team-card:hover {
  opacity: 1;
  transform: translateY(-4px);
}

a.team-card:hover .team-name {
  color: var(--color-accent);
}

.team-name {
  font-weight: 700;
  margin-bottom: 0.25rem;
  color: var(--color-text);
}

.team-title {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.team-card img {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
  margin-bottom: var(--space-sm);
  display: block;
}

/* Legal document lists (licenses page) */
.legal-doc-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.legal-doc-list li {
  padding: var(--space-xs) 0;
}

.legal-doc-list .legal-doc-date {
  margin-left: var(--space-sm);
}

.legal-doc-date {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ============================================================
   Home page — transparent nav over hero
   Activated when the page sets `bodyClass: home-hero-nav`. Each site's
   homepage opts in; sub-pages keep the default solid white nav.
   ============================================================ */

body.home-hero-nav header {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease,
    backdrop-filter 0.25s ease;
}

/* Tint only TOP-LEVEL nav links/triggers white. Dropdown anchors live deeper
   in the tree (.nav-dropdown a, .nav-dropdown-item, .nav-featured-post a) and
   sit on a white panel — leaving them alone keeps them dark and readable. */
body.home-hero-nav header nav > ul > li > a,
body.home-hero-nav header nav > ul > li > .nav-dropdown-trigger {
  color: rgba(255, 255, 255, 0.92);
}

body.home-hero-nav header nav > ul > li > a:hover,
body.home-hero-nav header nav > ul > li > .nav-dropdown-trigger:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
}

body.home-hero-nav .nav-logo img {
  filter: brightness(0) invert(1);
}

/* Hamburger spans default to var(--color-text) (dark) — invisible on the
   dark hero. Flip them white in the transparent state. */
body.home-hero-nav .nav-toggle span {
  background: #fff;
}

/* Once scrolled past the hero — OR when the mobile menu is open (the dropdown
   needs a solid background so the white text is readable) — fall back to the
   default solid nav appearance. */
body.home-hero-nav.nav-scrolled header,
body.home-hero-nav header:has(nav ul.nav-open) {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: var(--shadow-nav);
}

body.home-hero-nav.nav-scrolled header nav > ul > li > a,
body.home-hero-nav.nav-scrolled header nav > ul > li > .nav-dropdown-trigger,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > a,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > .nav-dropdown-trigger {
  color: var(--color-text-muted);
}

body.home-hero-nav.nav-scrolled header nav > ul > li > a:hover,
body.home-hero-nav.nav-scrolled header nav > ul > li > .nav-dropdown-trigger:hover,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > a:hover,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > .nav-dropdown-trigger:hover {
  color: var(--color-text);
  background: rgba(0, 0, 0, 0.05);
}

body.home-hero-nav.nav-scrolled .nav-logo img,
body.home-hero-nav header:has(nav ul.nav-open) .nav-logo img {
  filter: none;
}

body.home-hero-nav.nav-scrolled .nav-toggle span,
body.home-hero-nav header:has(nav ul.nav-open) .nav-toggle span {
  background: var(--color-text);
}

/* The Contact / Log in buttons keep their accent fill in every state —
   restore the original button text color (white) which the rules above
   otherwise tint. */
body.home-hero-nav header nav > ul > li > a.btn-contact,
body.home-hero-nav header nav > ul > li > a.btn-login,
body.home-hero-nav.nav-scrolled header nav > ul > li > a.btn-contact,
body.home-hero-nav.nav-scrolled header nav > ul > li > a.btn-login,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > a.btn-contact,
body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > a.btn-login {
  color: var(--color-bg);
}

/* --- Support: Pagefind search (landing page) --- */
/* Theme the Pagefind Component UI (<pagefind-searchbox>) with our tokens via
   its --pf-* custom properties. The component only renders on real builds
   (pagefind runs post-build), so these rules are inert under `--serve`. */
.support-search {
  margin-bottom: var(--space-xl);
}

/* Category cards on /support are whole-card anchors; a.card-hover's
   `display: block` would override .callout-card's flex column and break the
   bottom-aligned article counts across a row (same specificity — this rule
   wins on source order). */
a.callout-card {
  display: flex;
}

/* Support article listings: the default .resource-grid is flex-wrap around
   fixed 340px cards, which leaves a right-side gap at viewports between one
   and two columns. This modifier swaps to auto-fill grid tracks so the
   text-only cards always fill the row evenly — including the last row. */
.resource-grid--fill {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.resource-grid--fill .resource-card {
  width: auto;
}

.support-search pagefind-searchbox {
  --pf-font: inherit;
  --pf-text: var(--color-text);
  --pf-text-muted: var(--color-text-muted);
  --pf-background: var(--color-bg);
  --pf-border: var(--color-border);
  --pf-border-focus: var(--color-accent);
  --pf-border-radius: var(--radius);
  --pf-mark: var(--color-accent);
  --pf-searchbox-max-width: 100%;
}

.support-category-grid .callout-card p:last-child {
  color: var(--color-text-muted);
}

/* === hydroforecast/style.css === */



/* ── Announcement banner ── */
.hf-announcement {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #72e3c7;
  color: #000;
  text-decoration: none;
  padding: 9px 16px;
  font-family:
    "Lato",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    sans-serif;
  font-size: 0.875rem;
  line-height: 1.3;
  text-align: center;
  border: 0;
}
.hf-announcement strong {
  font-weight: 700;
}
.hf-announcement__cta {
  font-weight: 700;
  white-space: nowrap;
  border-bottom: 1px solid rgba(0, 0, 0, 0.45);
  transition:
    border-color 0.2s ease,
    opacity 0.2s ease;
}
.hf-announcement:hover .hf-announcement__cta {
  border-bottom-color: #000;
  opacity: 0.85;
}

/* HydroForecast token overrides — HF uses the Upstream teal as its
   single brand/product accent (no separate product color like Lens). */
:root {
  --color-accent: var(--color-teal);
  --color-accent-hover: var(--color-teal-hover);
}

/* HF's --color-accent == --color-teal, so a filled-teal .btn-login would
   collide with the filled-teal .btn-contact. Use a white-fill / teal-text /
   teal-border button in every state.

   The :is() wrapper bundles the four selectors needed to match base.css's
   home-hero-nav button-color rules (specificity 0,0,3,6 in the scrolled
   and mobile-menu-open states). Without the state-specific args, base.css's
   "restore button text to white" rule wins in scrolled state and the teal
   text turns white-on-white. */
:is(
  header nav > ul > li > a.btn-login,
  body.home-hero-nav header nav > ul > li > a.btn-login,
  body.home-hero-nav.nav-scrolled header nav > ul > li > a.btn-login,
  body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > a.btn-login
) {
  background: #fff;
  color: var(--color-teal);
  border: 1px solid var(--color-teal);
  padding: calc(var(--space-xs) - 1px) calc(var(--space-md) - 1px);
}

:is(
  header nav > ul > li > a.btn-login,
  body.home-hero-nav header nav > ul > li > a.btn-login,
  body.home-hero-nav.nav-scrolled header nav > ul > li > a.btn-login,
  body.home-hero-nav header:has(nav ul.nav-open) nav > ul > li > a.btn-login
):hover {
  background: var(--color-surface);
  color: var(--color-teal);
}

/* HF uses a tighter logo-bar than Lens's default */
.logo-bar {
  gap: var(--space-lg) var(--space-xl);
}

.business-outcomes-list li + li {
  margin-top: var(--space-sm);
}

/* HF now has 5 industries — matches the shared 5-column grid in base.css.
   Reduce card image height and label size to fit 5 cards comfortably. */
.use-case-card img {
  height: 130px;
}

.use-case-card-label {
  font-size: 1rem;
}

@media (max-width: 1100px) {
  .use-case-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .use-case-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Forecast products (home) ---
   Two-column editorial intro above a hydrograph chart with three product
   cards marking the short-term / seasonal / annual horizons. h2 anchors the
   left edge, body copy fills the right column, so neither side floats. */
.forecast-products-intro {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-2xl);
  align-items: start;
  margin: 0 0 var(--space-2xl);
}

.forecast-products-intro h2 {
  margin: 0;
}

.forecast-products-body p {
  margin: 0 0 1em;
  max-width: none;
}

.forecast-products-body p:last-child {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .forecast-products-intro {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* --- Hydrograph chart ---
   Three-peak layered wave visual (V3 from the Claude Design handoff).
   SVG has a 1200×250 viewBox matching the design; no fixed height so the
   element scales naturally as a responsive image with correct proportions.
   Markers are HTML so circles never deform and stay pixel-crisp at any width. */
.hydrograph {
  position: relative;
  width: 100%;
  /* No top margin so the guide lines meet the card bottoms directly. */
  margin: 0 0 var(--space-md);
}

.hydrograph-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

/* Three stacked area fills. #72E3C7 (aqua) on top; teal below.
   Drawing order back→front means lighter layer is the backdrop and the
   darker layers accumulate toward the bottom — light mint → dark teal. */
.hydrograph-fill--1 {
  fill: #72e3c7;
  opacity: 0.18;
}

.hydrograph-fill--2 {
  fill: var(--color-teal);
  opacity: 0.16;
}

.hydrograph-fill--3 {
  fill: var(--color-teal);
  opacity: 0.3;
}

/* Dashed flow line traces the top crest of the waves. */
.hydrograph-line {
  fill: none;
  stroke: #013b47;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
  vector-effect: non-scaling-stroke;
}

/* Vertical connector lines drop from the top edge to each crest node. */
.hz-guide {
  stroke: #cfd6d8;
  stroke-width: 1.5;
  stroke-dasharray: 2 5;
  vector-effect: non-scaling-stroke;
}

.hz-marker {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-bg);
  border: 2.5px solid var(--color-teal);
  transform: translate(-50%, -50%);
}

/* Label floats below each marker — cards are above the chart, so labels sit
   under the curve to avoid colliding with the card above. */
.hz-marker-label {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--color-teal);
  white-space: nowrap;
}

.forecast-horizon-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  text-align: left;
}

/* Home-only: horizon cards use the same left-accent treatment as blockquotes
   for visual consistency with other teal-bordered content. Icon + title sit
   on one row; description flows below. */
.forecast-horizon-cards .product-card {
  border-left: 3px solid var(--color-teal);
  padding: var(--space-md) var(--space-lg);
}

/* Tighter gap on the home horizon cards than the industry-page default. */
.forecast-horizon-cards .product-card-header {
  gap: var(--space-sm);
}

/* Home-only: tint the black line-art icons to match the teal accent.
   Filter values map pure black to #004C5C (verified with filter-generator
   tooling). Dimensions inherit from the shared .product-card-icon rule. */
.forecast-horizon-cards .product-card-icon {
  filter: brightness(0) saturate(100%) invert(19%) sepia(89%) saturate(1147%) hue-rotate(164deg)
    brightness(95%) contrast(101%);
}

.forecast-horizon-cards .callout-card-title {
  margin-bottom: 0;
}

.forecast-horizon-cards .product-card p {
  font-size: var(--text-sm);
  margin: 0;
}

/* Shared by home horizon cards + industry-page stacked product cards. */
.product-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.product-card-header h3 {
  margin: 0;
}

.product-card-icon {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin: 0;
  border: none;
  border-radius: 0;
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .hydrograph {
    display: none;
  }
  .forecast-horizon-cards {
    grid-template-columns: 1fr;
  }
}

/* --- Competition proof section (home) ---
   Grey surface block with stats + imagery, image on the right. */
.proof-accuracy {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-2xl);
}

.proof-accuracy-body h2 {
  margin-top: 0;
}

.proof-result-label {
  margin: var(--space-md) 0 var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-accent);
}

.proof-result-stat {
  margin: 0 0 var(--space-md);
  font-size: clamp(1.25rem, 2.5vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-accent);
}

.proof-accuracy-media a {
  display: block;
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
}

.proof-accuracy-media img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
}

@media (max-width: 900px) {
  .proof-accuracy {
    grid-template-columns: 1fr;
    padding: var(--space-xl);
  }

  .proof-accuracy-media {
    order: -1;
  }
}

.callout-card--accent {
  border-left: 3px solid var(--color-accent);
}

.quotes-row--two .callout-card--accent .stat-block {
  flex: 1;
  flex-direction: row;
  align-items: center;
  gap: var(--space-md);
}

.quotes-row--two .callout-card--accent .stat-block dt {
  flex-shrink: 0;
}

.quotes-row--two .callout-card--accent .stat-block dd {
  font-size: var(--text-body);
  color: var(--color-text);
}

blockquote .callout-card-title {
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.blockquote-cta::before,
.blockquote-cta::after {
  content: none;
}

.usbr-resource-links {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.usbr-resource-links > img {
  width: 88px;
  height: auto;
  flex-shrink: 0;
  margin: 0;
  border: none;
  border-radius: 0;
  object-fit: contain;
}

.usbr-resource-links-items {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.usbr-resource-links-items .usbr-links-row {
  display: flex;
  gap: var(--space-xl);
}

.usbr-resource-links-items h4 {
  margin: 0 0 var(--space-xs);
}

.usbr-resource-links-items p {
  margin: 0;
  max-width: none;
}

.usbr-resource-links-items a {
  white-space: nowrap;
}

.usbr-resource-links-items a::after {
  content: " →";
}

/* Two-agency SBIR row on /government-agencies/ — usbr-resource-links reused
   per agency; this wrapper puts them side-by-side and resets the top margin. */
.sbir-agencies {
  display: flex;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

.sbir-agencies .usbr-resource-links {
  margin-top: 0;
  flex: 1;
}

.logo-carousel--static::before,
.logo-carousel--static::after {
  display: none;
}

.logo-carousel-track--static {
  animation: none;
  width: 100%;
  justify-content: center;
  flex-wrap: wrap;
}

/* Intro paragraph spans full width to align with the agency items below it;
   overrides the global p max-width per the base CSS authoring note. */
.sbir-intro {
  max-width: none;
}

/* --- Business outcomes (home) ---
   Full-width rows: narrative text left, large stat right. */
.outcomes > h2 {
  margin-bottom: var(--space-lg);
}

/* Outcomes section with an intro block instead of a bare h2 — remove border from first row */
.outcomes > .industry-intro + .outcome-row {
  border-top: none;
}

.outcome-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0;
}

.outcomes > h2 + .outcome-row {
  border-top: none;
}

.outcome-eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-teal);
  margin: 0 0 var(--space-xs);
}

.outcome-row-text h3 {
  margin-top: 0;
}

.outcome-row-text p:last-child {
  margin-bottom: 0;
}

.outcome-row-stat {
  text-align: right;
}

.outcome-stat-number {
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-teal);
  margin: 0;
  overflow-wrap: break-word;
}

.outcome-stat-number--md {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.outcome-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 var(--space-sm);
}

.outcome-stat-link {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-teal);
}

@media (max-width: 768px) {
  .outcome-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .outcome-row-stat {
    text-align: left;
  }
}

/* --- Media-blurb row: fixed-width card beside a short text blurb ---
   Shared .text-and-media is a 1fr/1fr grid, which leaves the card floating
   when paired with a ~2-line blurb. Flex lets the card stay its natural
   width and the text sit close beside it. Used on the snow page's
   "Advancing snow intelligence" subsections. Site-local because Upstream
   has its own (incompatible) flex-wrap pattern under a different name. */
.media-blurb-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xl);
}

.media-blurb-row > .media-blurb-media {
  flex: 0 0 360px;
}

.media-blurb-row > .media-blurb-text {
  flex: 1 1 0;
}

@media (max-width: 768px) {
  .media-blurb-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-lg);
  }
  .media-blurb-row > .media-blurb-media {
    flex: 0 0 auto;
  }
}

.eco-flows-feature {
  align-items: start;
}

.eco-supports-tags {
  margin: 0 0 var(--space-lg);
  padding: 0;
  list-style: none;
}

.eco-reading-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Hero video has motion and high-frequency whitewater spray that competes
   with white headline text. A left-weighted horizontal scrim keeps the
   text area dark while letting the cinematography read through on the right.
   Overrides the shared flat --overlay-dark, which is tuned for still images. */
.hero::after {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.55) 40%,
    rgba(0, 0, 0, 0.3) 75%,
    rgba(0, 0, 0, 0.25) 100%
  );
}

.government-agencies-hero::after {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.66) 45%,
    rgba(0, 0, 0, 0.36) 100%
  );
}

/* Hero text spans full viewport width on mobile — restore an even, flat
   scrim so the wrapped headline doesn't run onto the lighter right edge. */
@media (max-width: 768px) {
  .hero::after {
    background: rgba(0, 0, 0, 0.55);
  }

  .government-agencies-hero::after {
    background: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.62) 50%,
      rgba(0, 0, 0, 0.38) 100%
    );
  }
}

.how-it-works-section > h2 {
  margin-bottom: var(--space-xl);
}

/* ── Event Hero ─────────────────────────────────────────────────────────── */
.event-hero {
  background: var(--color-teal);
  align-items: flex-start; /* override .hero center-align so content stays top */
  min-height: 0; /* override .hero's fixed min-height; let content dictate height */
}

/* Suppress the dark photo overlay that .hero::after adds — not needed on solid teal */
.event-hero::after {
  display: none;
}

.event-hero-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-xl);
  width: 100%;
}

.event-hero-layout--with-form {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: var(--space-3xl);
  align-items: start;
}

.event-hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* White breadcrumbs over teal */
.breadcrumb--hero,
.breadcrumb--hero a {
  color: rgba(255, 255, 255, 0.8);
}

.breadcrumb--hero a:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.6);
}

.breadcrumb--hero .breadcrumb-sep {
  color: rgba(255, 255, 255, 0.45);
}

.breadcrumb--hero .breadcrumb-current {
  color: rgba(255, 255, 255, 0.65);
}

/* Aqua pill */
.event-type-pill {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--color-aqua);
  color: #000;
  font-size: var(--text-sm);
  font-weight: 700;
  line-height: 1.4;
  width: fit-content;
}

/* White title */
.event-hero-title {
  color: #fff;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}

/* Metadata row */
.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-sm);
}

.event-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-body);
}

.event-meta-icon {
  color: var(--color-aqua);
  flex-shrink: 0;
}

/* Partner cobrand lockup */
.event-cobrand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-md);
}

.event-cobrand-hf {
  height: 28px;
  /* invert to white */
  filter: brightness(0) invert(1);
}

.event-cobrand-divider {
  display: block;
  width: 1px;
  height: 32px;
  background: rgba(255, 255, 255, 0.35);
}

.event-cobrand-partner {
  height: 28px;
  max-width: 140px;
  object-fit: contain;
  /* invert to white */
  filter: brightness(0) invert(1);
}

/* Multi-tone logos lose all detail when flattened to a solid white silhouette
   (the invert filter can't preserve more than one color) — render these at
   native color instead, sized up since they read smaller without the white fill. */
.event-cobrand-partner--native {
  filter: none;
  height: 64px;
  max-width: 220px;
}

@media (max-width: 479px) {
  .event-cobrand-partner--native {
    height: 34px;
    max-width: 120px;
  }
}

/* Form panel embedded over the teal hero */
.event-hero-form-wrap {
  padding-top: var(--space-xl);
}

.event-hero-form {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
  padding: var(--space-lg);
  overflow: hidden;
}

/* HubSpot iframe inherits .post-body iframe shadow/radius rules but the hero
   form lives outside .post-body — reset to clean. */
.event-hero-form iframe {
  border-radius: 0;
  box-shadow: none;
  width: 100% !important;
}

@media (max-width: 900px) {
  .event-hero-layout--with-form {
    grid-template-columns: 1fr;
  }

  .event-hero-form-wrap {
    padding-top: 0;
  }

  .event-hero-title {
    max-width: none;
  }
}

/* --- Book a Demo Page --- */
.demo-subtitle {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  margin-bottom: var(--space-sm);
}

.demo-fallback {
  color: var(--color-text-muted);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.demo-fallback a {
  color: var(--color-accent);
}

.demo-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-xl);
}

.demo-card {
  text-align: left;
  padding: 0;
  flex: 0 1 24rem;
}

.demo-headshot {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius);
  object-fit: cover;
  margin-bottom: 1rem;
}

.demo-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-bottom: 1.25rem;
  border-bottom: none;
}

.demo-meet {
  margin-bottom: 0.5rem;
}

/* ── Blog / Research Post Hero ──────────────────────────────────────────────
   Full-bleed teal hero for non-event resource posts on HydroForecast.
   Mirrors the event hero structure but without the form panel.
   When a heroImage is supplied via frontmatter, the image is set as
   background-image via inline style; the ::after overlay darkens it.        */

/* Full-bleed escape (width + top pull-up) is handled by the shared
   `main > .hero, main > .post-hero-full, main > .post-hero-product` rule in
   base.css, which also matches main's reduced top padding at ≤768px. */

.post-hero-full {
  position: relative;
  background: var(--color-teal);
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 480px;
}

/* Dark overlay when a background image is used */
.post-hero-full--image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.58) 0%,
    rgba(0, 0, 0, 0.22) 35%,
    rgba(0, 0, 0, 0.48) 100%
  );
  pointer-events: none;
}

/* max-width + margin auto come from the shared .post-container on this element */
.post-hero-full-inner {
  position: relative;
  z-index: 1;
  padding: var(--space-2xl) var(--space-xl);
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: var(--space-2xl);
}

.post-hero-full-title {
  color: #fff;
  margin: 0;
  max-width: 18ch;
  text-wrap: balance;
  text-shadow: 0 1px 24px rgba(0, 0, 0, 0.35);
}

.post-hero-full-sub {
  color: rgba(255, 255, 255, 0.92);
  font-size: var(--text-lg);
  max-width: 60ch;
  margin: 0;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}

.post-hero-full-credit {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-xl);
  left: var(--space-xl);
  text-align: right;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Product hero title is already in a constrained 1fr column — 18ch causes
   aggressive wrapping at desktop width. Remove the cap inside that context. */
.post-hero-product .post-hero-full-title {
  max-width: none;
}

@media (max-width: 768px) {
  .post-hero-full {
    min-height: 320px;
  }

  .post-hero-full-title {
    max-width: none;
  }
}

/* ── Product Post Hero ───────────────────────────────────────────────────────
   Split layout: text left, optional image right, on a solid teal background.
   Add `productHeroImage: /images/your-image.webp` to frontmatter to populate
   the right-hand image panel.                                                */

.post-hero-product {
  background: var(--color-teal);
  min-height: 480px;
  display: flex;
  align-items: stretch;
}

/* max-width + margin auto come from the shared .post-container on this element */
.post-hero-product-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--space-3xl);
  width: 100%;
}

.post-hero-product-text {
  padding: var(--space-2xl) 0 var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.post-hero-full-bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.post-hero-product-media {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 480px;
  padding: var(--space-xl);
}

.post-hero-product-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

@media (max-width: 768px) {
  .post-hero-product-inner {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .post-hero-product-text {
    padding: var(--space-xl) var(--space-lg);
  }

  .post-hero-product-media {
    min-height: 240px;
  }
}

/* extreme-events hero image is a taller collage — lift the shared 340px cap */
.extreme-events-hero .industry-hero-split-media img {
  max-height: 480px;
}

/* Extreme events outcome rows — remove the first row's top border so the
   section flows directly from the intro copy without a leading hairline */
.ewe-outcomes > .outcome-row:first-child {
  border-top: none;
  padding-top: 0;
}

/* CTA link list used in the Operational Resilience text-and-media section */
.ewe-cta-list {
  list-style: none;
  padding: 0;
  margin: var(--space-lg) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

/* Chart figure in the Early Warning section — border + caption frames the
   data viz as a chart rather than a photo */
.ewe-chart-figure {
  margin: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: #fff;
}

.ewe-chart-figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: none;
  border-radius: 0;
}

.ewe-chart-figure figcaption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--color-border);
}

.ewe-chart-figure figcaption .ewe-cta-list {
  font-style: normal;
  margin-top: var(--space-sm);
}

/* Two inline stats below body text in the Early Warning section */
.ewe-inline-stats {
  display: flex;
  gap: var(--space-2xl);
  margin-top: var(--space-xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
}

.ewe-inline-stats .outcome-stat-number {
  margin: 0 0 var(--space-xs);
}

.ewe-inline-stats .outcome-stat-label {
  margin: 0 0 var(--space-xs);
}

/* Resource cards: photo redesign for /resources/ (HydroForecast only —
   Lens keeps the original .resource-card via the shared include). Adds
   onto the shared .resource-card/.card-hover rules rather than replacing
   them, since resources-page.njk's filter/search script still targets
   .resource-card and .resource-card-title. */
.resource-card-photo {
  position: relative;
  aspect-ratio: 3 / 2;
  /* .resource-grid is a flex row with the default align-items: stretch,
     which would silently override this aspect-ratio for any card sharing a
     row with a taller/shorter sibling. All .resource-card-photo variants
     use the same 3/2 ratio today so it's not currently visible, but keep
     this so a future aspect-ratio variant doesn't reintroduce the bug. */
  align-self: flex-start;
}

.resource-card-photo a {
  position: absolute;
  inset: 0;
}

.resource-card-photo-media {
  position: absolute;
  inset: 0;
  background: var(--color-teal);
}

.resource-card-photo-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border: none;
  border-radius: 0;
}

.resource-card-photo-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.82) 0%,
    rgba(0, 0, 0, 0.4) 26%,
    rgba(0, 0, 0, 0) 55%
  );
}

.resource-card-photo-tags {
  position: absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.resource-card-photo-body {
  position: absolute;
  left: var(--space-md);
  right: var(--space-md);
  bottom: var(--space-md);
}

.resource-card-photo-date {
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
  display: block;
}

/* Event cards: same date/time/location row as the event hero
   (.event-meta/.event-meta-item/.event-meta-icon), sized down for the
   thumbnail footprint. */
.resource-card-photo-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.8);
}

.resource-card-photo-meta-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

.resource-card-photo-meta-icon {
  color: var(--color-aqua);
  flex-shrink: 0;
}

.resource-card-photo-title {
  font-size: var(--text-lg);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.01em;
  color: #fff;
  margin: 6px 0 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Logo card (press + conference variants): same tag/text placement as the
   photo card, but a white field for the outlet/partner logo instead of a
   photo + scrim, and a fundamentally different layout underneath. The
   plain photo card stacks tags/body as absolutely-positioned overlays on
   top of a full-bleed image, which works because the image fills the
   whole card regardless of content — there's no "leftover space" to
   manage. A logo card's field is only PART of the card, sized by
   whatever's left after the date/title text, and that text's height
   varies (1 vs 2-line meta, 1 vs 2-line title) — so absolute positioning
   with a fixed reserve forces a choice between the text sitting flush
   with the card bottom (leftover space stacks above the text, between it
   and the logo, reading as the logo sitting too high for short titles —
   common for conference names) or flush with the logo (leftover space
   stacks below short text instead, as empty card at the bottom). Neither
   fixed reserve is right for every content length.
   Flexbox instead: `<a>` becomes a column flex container, the media field
   is `flex: 1` (fills whatever space the text doesn't use) and the body
   keeps its natural content height. The text is always exactly as tall
   as its content and anchored at the true card bottom (no dead space
   below, ever); the logo is always centered within whatever's left above
   it (no dead space lopsided to one side, ever). Both without needing a
   hand-tuned reserve number to keep in sync with text length. */
.resource-card-press a,
.resource-card-conference a {
  display: flex;
  flex-direction: column;
}

.resource-card-photo-media.resource-card-logo-media {
  position: static;
  flex: 1 1 auto;
  min-height: 0;
  background: none;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Logo sizing spec (padding + caps) is fixed pixel values from the brand
     logo-delivery guidelines, not part of the general spacing scale. */
  padding: 20px;
}

.resource-card-photo-media.resource-card-logo-media img {
  position: static;
  width: auto;
  height: auto;
  /* Brand logo-delivery caps (300 × 110) are the ceiling on a full-width
     card; the `100%` floor lets them shrink with the card in the 769–1100px
     "force 3-up" grid range, where cards drop to ~240px and a fixed 300px
     logo would overflow the field and clip into the date/title text. */
  max-width: min(300px, 100%);
  max-height: min(110px, 100%);
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}

/* Conference cards carry a taller event-meta row (date/time/location,
   which can wrap to 2 lines) than press cards' single-line date, so a
   height-bound logo at press's 110px cap would leave less headroom above
   it before the tag pill. Capping shorter keeps that headroom comparable. */
.resource-card-photo-media.resource-card-conference-media img {
  max-height: min(86px, 100%);
}

.resource-card-press .resource-card-photo-body,
.resource-card-conference .resource-card-photo-body {
  position: static;
  flex: 0 0 auto;
  padding: 0 var(--space-md) var(--space-md);
}

.resource-card-press .resource-card-photo-date,
.resource-card-conference .resource-card-photo-meta {
  color: var(--color-text-dim);
}

.resource-card-conference .resource-card-photo-meta-icon {
  color: var(--color-teal);
}

.resource-card-press .resource-card-photo-title,
.resource-card-conference .resource-card-photo-title {
  color: var(--color-text);
}

/* Teal field (`logoField: "teal"`): for a white/reversed/mono logo that
   would disappear on the white field above. Card background flips to
   teal (the logo-media's own background stays `none`, so it inherits
   this) and text reverts to the photo card's white defaults — declared
   after the white-field rules above so it wins on source order at equal
   specificity. Shared modifier for both press and conference cards. */
.resource-card-logo-card--teal {
  background: var(--color-teal);
}

.resource-card-logo-card--teal .resource-card-photo-date,
.resource-card-logo-card--teal .resource-card-photo-meta {
  color: rgba(255, 255, 255, 0.7);
}

.resource-card-logo-card--teal .resource-card-photo-meta-icon {
  color: var(--color-aqua);
}

.resource-card-logo-card--teal .resource-card-photo-title {
  color: #fff;
}

/* Product variant (`imageType: product`): same full-bleed cover + overlay
   structure and 3/2 aspect ratio as the photo card above (this modifier
   changes only scrim color), for dashboard/chart screenshots composed as
   teal hero graphics — a teal-tinted scrim (vs. the photo card's black one)
   blends with a teal-background source image instead of vignetting it.
   Deliberately the same aspect ratio as every other card on the grid —
   an earlier wider 12/7 ratio made product cards visibly shorter than
   their row-mates. */
.resource-card-product .resource-card-photo-scrim {
  background: linear-gradient(
    to top,
    var(--color-teal) 0%,
    color-mix(in srgb, var(--color-teal) 90%, transparent) 35%,
    color-mix(in srgb, var(--color-teal) 45%, transparent) 55%,
    transparent 80%
  );
}

.page-header--wide > * {
  max-width: none;
}