/* === 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(1.75rem, 3.5vw, 2.5rem);
  --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;
}

/* Attributed pull-quotes (see the .post-body > blockquote:has(.testimonial-attr)
   block below) keep the curly quote marks that plain report-citation
   blockquotes deliberately drop above. :not(.quote-carousel-title) excludes
   the optional section-tie-in title, which is also a <p> (not a heading —
   see STYLE_GUIDE.md) sharing the same blockquote. */
.post-body > blockquote:has(.testimonial-attr) p:not(.quote-carousel-title)::before {
  content: "\201C";
}

.post-body > blockquote:has(.testimonial-attr) p:not(.quote-carousel-title)::after {
  content: "\201D";
}

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

/* `.post-body img` (below) resets all in-body images with a card
   shadow/radius; the testimonial logo needs to stay a plain, borderless
   mark like it is on industry pages, so re-assert with higher specificity. */
.post-body .testimonial-logo {
  width: auto;
  border-radius: 0;
  box-shadow: none;
  margin: 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;
}

/* Below 768px the footer stacks (logo above, text below, full width) via
   flex-wrap — flex-grow there would trick the wrap algorithm into keeping
   the logo and text squeezed onto one row instead. Above that, grow to
   fill the row next to the logo so long attribution text isn't forced
   onto its own line under the logo before it needs to be. */
@media (min-width: 769px) {
  .testimonial-attr {
    flex: 1 1 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.
   This is a showcase treatment for a page-level section, not for inline use. */
.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);
}

/* Attributed pull-quotes (logo + org + name footer) inside post bodies get
   their own, more compact treatment — deliberately NOT the industry-section
   sizing above. A blog quote sits inline among a lot of other running text,
   so keep it at body-copy scale (default blockquote/logo sizing) rather than
   the bigger standalone-showcase scale; :has(.testimonial-attr) excludes
   plain report-citation blockquotes and simple "— Name" attributions, which
   don't use the structured logo + org + name pattern. */
.post-body > blockquote:has(.testimonial-attr) {
  max-width: fit-content;
  margin-inline: auto;
}

.post-body > blockquote:has(.testimonial-attr) .quote-carousel-title {
  margin-bottom: var(--space-sm);
}

/* --- 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);
}

.section-light--accent .checklist-check {
  color: #fff;
}

/* --- 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);
  }
}

/* Two-stat variant: a 3-column grid leaves an empty third column when there
   are only two values, so center the pair instead of stretching them left. */
.stat-row--center {
  display: flex;
  justify-content: center;
  gap: var(--space-2xl);
}

@media (max-width: 768px) {
  .stat-row--center {
    flex-direction: column;
    align-items: center;
    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;
}

/* --- Checkmark checklist (promoted from Lens's request-proposal page) ---
   Use for "what's included" style lists. --grid lays items out 2-up on
   wide screens (e.g. a short list of call agenda items). */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.checklist li {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-sm);
}

.checklist-check {
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.checklist--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-xl);
}

@media (max-width: 600px) {
  .checklist--grid {
    grid-template-columns: 1fr;
  }
}

/* --- 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);
}

/* Split layout: message left, actions right — for a banner offering a
   secondary path (e.g. "read more" + a lower-commitment CTA) instead of
   a single centered button. */
.cta-banner--split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  text-align: left;
}

.cta-banner--split p {
  margin: 0;
}

.cta-banner--split .cta-banner-title {
  font-size: var(--text-body);
  font-weight: 700;
  margin-bottom: var(--space-xs);
}

.cta-banner--split .cta-banner-desc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.cta-banner--split .cta-banner-actions {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .cta-banner--split {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  .cta-banner--split .cta-banner-actions {
    justify-content: center;
  }
}

/* --- 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);
}

/* === lens/style.css === */
/* ============================================================
   Lens by Upstream Tech  —  Warm light theme
   ============================================================ */




/* --- Lens-specific overrides below --- */

.typed-text {
  text-decoration: underline;
  text-decoration-color: #fff;
  text-decoration-thickness: 1px;
  text-underline-offset: 6px;
}

.typed-cursor {
  animation: blink 0.7s step-end infinite;
}

@keyframes blink {
  50% {
    opacity: 0;
  }
}

.hero-attribution {
  position: absolute;
  z-index: 2;
  bottom: var(--space-sm);
  right: var(--space-md);
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
}

.hero.hero-no-overlay::after {
  content: none;
}

.hero.hero-no-overlay {
  --hero-overlay-w: min(30vw, 520px);
}

.hero.hero-no-overlay .hero-bg {
  transform: scale(1.15);
  transform-origin: right center;
}

.hero.hero--utilities .hero-bg {
  transform: rotate(180deg);
}

.hero.hero--utilities.hero-no-overlay .hero-bg {
  transform: rotate(180deg) scale(1.15);
  transform-origin: right center;
}

.hero-right-overlay {
  position: absolute;
  right: calc(max(0px, (100vw - var(--max-width)) / 2) + var(--space-xl));
  bottom: calc(var(--space-3xl) * 2.5);
  z-index: 1;
  width: var(--hero-overlay-w);
}

.hero.hero-no-overlay .hero-text {
  padding-right: calc(var(--hero-overlay-w) + var(--space-2xl));
}

/* --- Lens-specific list idioms --- */
main li {
  margin-bottom: 0.4em;
}

li img {
  display: inline-block;
  vertical-align: middle;
  width: 80px;
  height: 40px;
  object-fit: contain;
  border-radius: var(--radius);
  margin: 0.25rem 0.75rem 0.25rem 0;
  border: none;
  background: var(--color-bg);
  padding: 4px;
}

/* Data partners & customers — grid layout for image lists */
main > h2 + ul {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
}

main > h2 + ul > li {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition:
    box-shadow var(--transition),
    transform var(--transition);
}

main > h2 + ul > li:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-1px);
}

main > h2 + ul > li img {
  margin: 0;
  border: none;
  background: none;
  padding: 0;
  width: 48px;
  height: 32px;
  opacity: 0.7;
}

/* --- Table link buttons (Lens-specific) --- */
td a {
  font-size: var(--text-sm);
  padding: 0.35rem 1rem;
  background: var(--color-accent);
  color: var(--color-bg);
  border: none;
  border-radius: var(--radius);
  font-weight: 700;
  display: inline-block;
  transition: background var(--transition);
}

td a:hover {
  background: var(--color-accent-hover);
  opacity: 1;
}

/* --- Articles (resources / case studies listing) --- */
article:not(.resource-card):not(.ms-outcome-card):not(.ms-case-study-card) {
  padding: 1.5rem 0;
}

article h2,
article h3 {
  margin-bottom: 0.4rem;
}

article h2 a,
article h3 a {
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}

article h2 a:hover,
article h3 a:hover {
  border-bottom-color: var(--color-accent);
  opacity: 1;
}

article + hr {
  margin: 0;
}

/* Post / Case Study article detail */
article > h1 {
  margin-bottom: 0.5rem;
}

article > h1 + p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* --- Select / Form elements --- */
label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  margin-right: 0.5rem;
}

select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-sm) var(--space-xl) var(--space-sm) var(--space-sm);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  margin-right: 1.5rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236a6a6a' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  transition: border-color var(--transition);
}

select:hover,
select:focus {
  border-color: var(--color-border-strong);
}

/* --- Pagination nav --- */
main > nav,
nav:not(header nav) {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  padding: 2rem 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

main > nav a,
nav:not(header nav) a {
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: var(--text-sm);
}

main > nav a:hover,
nav:not(header nav) a:hover {
  border-color: var(--color-text);
  background: rgba(0, 0, 0, 0.03);
  opacity: 1;
}

/* --- Back links --- */
main > p:last-child:not(.data-section-link) > a[href*="resources"],
main > p:last-child:not(.data-section-link) > a[href*="case-studies"] {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: 2rem;
}

/* --- Lens feature-text heading override --- */
.feature-text h3 {
  margin-top: 0;
  margin-bottom: 0.75rem;
}

.features-ctas {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-top: var(--space-lg);
}

.features-ctas .btn-secondary {
  background: var(--color-bg);
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.features-ctas .btn-secondary:hover {
  background: var(--color-accent);
  color: var(--color-bg);
  border-color: var(--color-accent);
}

/* --- Features page: wider visual column + colored eyebrow ---
   The composite app-UI visuals need more room than a plain screenshot
   half, so this page overrides the shared .feature-row split. */
.features-page .feature-row {
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--space-3xl);
}

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

.feature-eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}

/* --- Features page: Lens app-chrome composites ---
   Each visual recreates a piece of the real Lens app (nav rails, panels,
   charts) as a designed, screenshot-like graphic. Per the design handoff,
   in-chrome UI text intentionally runs at fixed 10-13px sizes (mimicking
   real app chrome) rather than the page type scale — a deliberate, approved
   exception to the token checklist for this decorative content only.

   Each visual behaves like a single static image: it's built at a fixed
   616px "native" width (the .feature-row visual column's width at the
   site's --max-width), then the whole thing is scaled as one unit to fit
   its actual column width via a container query. Nothing inside ever
   reflows — that's what keeps the nav rail, chips, and panels pinned in
   place at any screen size instead of wrapping or stacking. --native-h is
   set per feature via an inline custom property in features.njk (measured
   from the card's actual rendered height at 616px, transform removed), so
   the aspect-ratio box matches the scaled card exactly. min-height:0
   overrides the grid item's automatic min-size: a transform doesn't shrink
   what a scaled child contributes to a min-content calculation, so without
   this the unscaled card height floors .feature-visual's height at any
   scale below 1 and leaves a tall gap below the visibly-scaled card.
   overflow: clip catches sub-pixel spill at fractional scales, and is the
   safety net in browsers that don't support the scale math below; the clip
   margin keeps the card's own box-shadow, which paints outside its border
   box, from being cut off. */
.feature-visual {
  container-type: inline-size;
  min-height: 0;
  overflow: clip;
  overflow-clip-margin: var(--space-md);
}

.feature-visual > .app-card {
  width: 616px;
  transform-origin: top left;
}

/* tan(atan2(a, b)) is the unitless ratio a / b. The obvious spelling is
   scale(calc(100cqw / 616px)), but length-by-length division in calc() is
   Chromium-only today: Firefox and Safari drop the whole declaration, which
   left the card unscaled at its native 616px and spilling over the next
   feature row on narrow and phone widths. Both halves are behind @supports
   so a browser that can't compute the ratio gets the native-size card
   clipped to its column (no aspect-ratio box to overflow) instead. */
@supports (transform: scale(tan(atan2(2px, 1px)))) {
  .feature-visual {
    aspect-ratio: 616 / var(--native-h);
  }

  .feature-visual > .app-card {
    transform: scale(tan(atan2(100cqw, 616px)));
  }

  .feature-visual > .app-card.card-hover:hover {
    transform: scale(tan(atan2(100cqw, 616px))) translateY(-4px);
  }
}

.app-card {
  display: block;
  background: var(--color-bg);
  border-radius: var(--radius);
  overflow: hidden;
  color: inherit;
}

/* .card-hover already supplies the resting + hover shadow for link-wrapped
   cards; non-link cards (Notes, Teams and settings) need the resting shadow
   supplied here instead, per the "card-hover only on whole-card links" rule. */
.app-card:not(.card-hover) {
  box-shadow: var(--shadow-card);
}

.app-frame {
  position: relative;
  overflow: hidden;
}

.app-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.app-credit {
  position: absolute;
  bottom: 8px;
  font-size: var(--text-sm);
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  z-index: 3;
}

.app-credit--left {
  left: 56px;
  color: rgba(0, 0, 0, 0.55);
}

.app-credit--right {
  right: 10px;
}

/* Left nav rail (logo + labelled items) — Library, Portfolio, Teams */
.app-nav-rail {
  width: 126px;
  flex: none;
  border-right: 1px solid var(--color-border);
  padding: 12px 0;
  background: var(--color-bg);
}

.app-nav-logo {
  padding: 0 12px 14px;
}

.app-nav-logo img {
  height: 16px;
  display: block;
  margin: 0;
}

.app-nav-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.app-nav-item svg {
  flex: none;
}

.app-nav-item--active {
  font-weight: 700;
  color: var(--color-accent);
  background: rgba(23, 120, 96, 0.08);
}

.app-nav-item--sub {
  padding-left: 24px;
}

.app-nav-item--sub.app-nav-item--active {
  box-shadow: inset 2px 0 0 var(--color-accent);
}

/* Icon-only rail (44px) overlaid on a map frame — Analysis, Alerts */
.app-icon-rail {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 44px;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  z-index: 2;
}

.app-icon-rail-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 0;
  color: var(--color-text-muted);
  font-size: 8px;
}

.app-icon-rail-item--active {
  background: var(--color-surface);
  color: var(--color-accent);
  font-weight: 700;
}

/* Toolbar strip: title + meta, bottom border */
.app-toolbar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.app-toolbar-title {
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.app-toolbar-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Floating panel over a map/image */
.app-panel {
  position: absolute;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  z-index: 3;
}

.app-panel-body {
  padding: 11px;
}

.app-panel-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  font-weight: 700;
}

/* Chip / tag */
.app-chip {
  display: inline-flex;
  align-items: center;
  border-radius: 12px;
  padding: 3px 11px;
  font-size: 11.5px;
}

.app-chip--accent {
  background: rgba(23, 120, 96, 0.1);
  color: var(--color-accent);
  border-radius: 3px;
  padding: 2px 8px;
  font-weight: 700;
  font-size: 12px;
}

/* Small pill button inside chrome (Edit chart, Add note, Dismiss, Copy…) */
.app-btn {
  display: inline-block;
  border-radius: var(--radius);
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.app-btn--outline {
  border: 1px solid var(--color-border);
  color: var(--color-text);
}

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

.app-btn--text {
  color: var(--color-accent);
  font-weight: 700;
}

/* Round initial avatar (note authors, team members) */
.app-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  color: var(--color-bg);
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* Toggle switch (Lookout policy rows) */
.app-toggle {
  width: 24px;
  height: 14px;
  border-radius: 7px;
  background: #dcdcdc;
  position: relative;
  flex: none;
}

.app-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-bg);
}

.app-toggle--on {
  background: var(--color-accent);
}

.app-toggle--on::after {
  left: auto;
  right: 2px;
}

/* Member table (Teams and settings) */
.app-table-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 44px;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--color-border);
}

.app-table-row:last-child {
  border-bottom: none;
}

.app-table-row--head {
  font-size: 11.5px;
  color: var(--color-text-dim);
  background: var(--color-surface);
  padding: 8px 16px;
}

.app-table-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.app-table-person-text {
  min-width: 0;
}

.app-table-person-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-table-person-email {
  display: block;
  font-size: 11.5px;
  color: var(--color-text-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- Library visual --- */
/* Specificity note: this card is an <a>, and base.css's `a.card-hover`
   (element + class = 0,1,1) otherwise beats a plain `.feature-library-card`
   (0,1,0) and silently wins the `display` cascade regardless of source
   order, forcing the rail to stack above the content instead of beside it.
   `.app-card.feature-library-card` (0,2,0) outranks it outright. */
.app-card.feature-library-card {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
}

.feature-library-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
}

.feature-library-search-field {
  display: flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 5px 10px;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  font-size: 12px;
  color: var(--color-text-dim);
}

.feature-library-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--color-border);
}

.feature-library-section-title {
  padding: 16px 14px 4px;
  font-size: 13px;
  font-weight: 700;
}

.feature-library-section-title:first-child {
  padding-top: 12px;
}

.feature-library-hero {
  position: relative;
  height: 172px;
  margin: 0 14px;
}

.feature-library-hero-card {
  position: absolute;
  left: 12px;
  top: 12px;
  width: 216px;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  padding: 12px;
}

.feature-library-hero-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: var(--leading-tight);
}

.feature-library-hero-card-source {
  font-size: 11.5px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.feature-library-hero-card-tags {
  display: flex;
  gap: 5px;
  margin-bottom: 8px;
}

.feature-library-hero-card-tags span {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 10.5px;
}

.feature-library-hero-card-desc {
  font-size: 10.5px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.feature-library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  padding: 0 14px 16px;
}

.feature-library-grid-thumb {
  height: 78px;
}

.feature-library-grid-meta {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.feature-library-grid-name {
  font-size: 11.5px;
  font-weight: 700;
}

.feature-library-grid-res {
  background: var(--color-surface);
  border-radius: 10px;
  padding: 1px 7px;
  font-size: 10px;
}

.feature-library-grid-provider {
  font-size: 10.5px;
  color: var(--color-text-muted);
}

/* --- Analysis + Alerts visuals share a map + rail + panel layout --- */
.feature-analysis-frame {
  height: 430px;
}

.feature-alerts-frame {
  height: 400px;
}

.feature-map-outline {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.feature-analysis-panel {
  left: 56px;
  top: 12px;
  width: 236px;
}

.feature-analysis-panel-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.feature-analysis-panel-row {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  margin-bottom: 6px;
}

.feature-analysis-panel-row-label {
  font-size: 11px;
  font-weight: 700;
}

.feature-analysis-panel-row-value {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 3px 7px;
  font-size: 11px;
  color: var(--color-text);
}

.feature-analysis-panel-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid var(--color-border);
  margin-top: 8px;
  padding-top: 9px;
}

.feature-analysis-legend {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 186px;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  padding: 8px 10px;
}

.feature-analysis-legend-title {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
}

.feature-analysis-legend-bar {
  height: 10px;
  border-radius: 2px;
  background: linear-gradient(90deg, #b07a32, #d8c24a, #8fb33f, #1f5b3e);
}

.feature-analysis-legend-scale {
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.feature-alerts-panel {
  left: 56px;
  top: 12px;
  width: 252px;
  background: rgba(255, 255, 255, 0.95);
  padding: 11px;
}

.feature-alerts-panel-new {
  display: inline-block;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-bg);
  margin-bottom: 11px;
}

.feature-alerts-toggle-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.feature-alerts-toggle-row + .feature-alerts-toggle-row {
  margin-top: 8px;
}

.feature-alerts-toggle-row span:last-child {
  font-size: 11px;
  color: var(--color-text-muted);
}

.feature-alerts-toggle-row:has(.app-toggle--on) span:last-child {
  color: var(--color-text);
}

.feature-alerts-notifications-title {
  border-top: 1px solid var(--color-border);
  margin-top: 11px;
  padding-top: 9px;
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
}

.feature-alerts-notification {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 7px 9px;
}

.feature-alerts-notification + .feature-alerts-notification {
  margin-top: 7px;
}

.feature-alerts-notification-meta {
  font-size: 10px;
  color: var(--color-text-dim);
  margin-bottom: 3px;
}

.feature-alerts-notification-desc {
  font-size: 11px;
  color: var(--color-text);
  line-height: 1.35;
  margin-bottom: 5px;
}

.feature-alerts-notification-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.feature-alerts-notification-actions span:first-child {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-accent);
}

.feature-alerts-notification-actions span:last-child {
  font-size: 10.5px;
  color: var(--color-text-muted);
}

/* --- Agent visual --- */
.feature-agent-toolbar-actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.feature-agent-toolbar-tab {
  font-size: 11px;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 2px 8px;
}

.feature-agent-toolbar-tab--active {
  font-weight: 700;
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.feature-agent-summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  border-bottom: 1px solid var(--color-border);
}

.feature-agent-summary-meta {
  font-size: 11.5px;
  color: var(--color-text-muted);
}

.feature-agent-summary-badge {
  margin-left: auto;
  white-space: nowrap;
}

.feature-agent-frame {
  height: 300px;
}

.feature-agent-split {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.feature-agent-split > div {
  position: relative;
  min-width: 0;
  overflow: hidden;
}

.feature-agent-divider {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: rgba(255, 255, 255, 0.9);
  pointer-events: none;
}

.feature-agent-handle {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-radius: 50%;
  background: var(--color-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.feature-agent-highlight {
  position: absolute;
  left: 32%;
  top: 24%;
  width: 36%;
  height: 52%;
  border: 2px solid #a78be0;
  border-radius: 2px;
  pointer-events: none;
}

.feature-agent-panel {
  left: 14px;
  top: 14px;
  width: 250px;
  padding: 11px;
}

.feature-agent-panel-site {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 7px;
  font-size: 11px;
  color: var(--color-text-dim);
}

.feature-agent-panel-desc {
  font-size: 12.5px;
  color: var(--color-text);
  line-height: 1.45;
}

.feature-agent-panel-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 11px;
}

.feature-agent-captures {
  position: absolute;
  left: 14px;
  bottom: 14px;
  display: flex;
  gap: 10px;
  font-size: 11px;
}

.feature-agent-captures span {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 3px;
  padding: 2px 8px;
}

/* --- Portfolio visual --- */
/* See the specificity note on .feature-library-card above — same fix. */
.app-card.feature-portfolio-card {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
}

.feature-portfolio-dashboard {
  background: var(--color-surface);
  position: relative;
  display: grid;
  gap: 10px;
  padding: 10px;
}

.feature-portfolio-widget {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.feature-portfolio-widget-header {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface);
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
}

.feature-portfolio-widget-title {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.25;
}

.feature-portfolio-widget-icons {
  margin-left: auto;
  display: flex;
  gap: 8px;
  flex: none;
}

.feature-portfolio-widget-body {
  padding: 9px 10px;
}

.feature-portfolio-widget-meta {
  font-size: 11.5px;
  color: var(--color-text-muted);
  line-height: 1.45;
}

.feature-portfolio-widget-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 12px;
  margin-top: 6px;
}

.feature-portfolio-widget-legend span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: var(--color-text-muted);
}

.feature-portfolio-widget-legend-swatch {
  width: 7px;
  height: 7px;
  border-radius: 50%;
}

/* --- Notes visual --- */
.feature-notes-frame {
  height: 300px;
}

.feature-notes-panel {
  right: 16px;
  top: 16px;
  width: 270px;
  padding: 14px;
}

.feature-notes-panel-author {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.feature-notes-panel-author-name {
  font-size: 13px;
  font-weight: 700;
}

.feature-notes-panel-date {
  font-size: 12px;
  color: var(--color-text-dim);
  margin-left: auto;
}

.feature-notes-panel-text {
  font-size: 13px;
  color: var(--color-text);
  line-height: var(--leading-normal);
}

.feature-notes-panel-tags {
  display: flex;
  gap: 6px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.feature-notes-panel-footer {
  border-top: 1px solid var(--color-border);
  margin-top: 12px;
  padding-top: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.feature-notes-footer {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.feature-notes-footer-title {
  font-size: 13px;
  font-weight: 700;
}

.feature-notes-footer-meta {
  font-size: 13px;
  color: var(--color-text-muted);
}

.feature-notes-footer-cta {
  margin-left: auto;
}

/* --- Sharing visual --- */
.feature-sharing-toolbar img {
  height: 14px;
  display: block;
  margin: 0;
}

.feature-sharing-body {
  display: grid;
  grid-template-columns: 196px minmax(0, 1fr);
}

.feature-sharing-rail {
  border-right: 1px solid var(--color-border);
  padding: 12px;
  background: var(--color-surface);
}

.feature-sharing-rail-label {
  font-size: 11px;
  font-weight: 700;
  margin-bottom: 6px;
}

.feature-sharing-link {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 5px 7px;
  background: var(--color-bg);
  margin-bottom: 10px;
}

.feature-sharing-link-url {
  font-size: 10.5px;
  color: var(--color-text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.feature-sharing-link-copy {
  margin-left: auto;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

.feature-sharing-note {
  font-size: 10.5px;
  color: var(--color-text-muted);
  line-height: 1.45;
  margin-bottom: 10px;
}

.feature-sharing-cta {
  display: block;
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--radius);
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}

.feature-sharing-detail-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

.feature-sharing-detail-label {
  font-size: 10.5px;
  font-weight: 700;
  white-space: nowrap;
}

.feature-sharing-detail-value {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--color-text-muted);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.feature-sharing-detail-value--link {
  color: var(--color-accent);
}

.feature-sharing-stream {
  border-top: 1px solid var(--color-border);
  margin: 11px 0;
  padding-top: 11px;
}

.feature-sharing-frame {
  position: relative;
  min-height: 340px;
}

.feature-sharing-panel {
  right: 12px;
  top: 12px;
  width: 250px;
  padding: 14px;
}

/* --- Teams and settings visual --- */
.feature-teams-card {
  display: grid;
  grid-template-columns: 126px minmax(0, 1fr);
}

.feature-teams-content {
  background: var(--color-surface);
}

.feature-teams-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px 10px;
}

.feature-teams-header-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-teal);
}

.feature-teams-header-meta {
  font-size: 12px;
  color: var(--color-text-dim);
}

.feature-teams-header-cta {
  margin-left: auto;
  white-space: nowrap;
  flex: none;
}

.feature-teams-table {
  background: var(--color-bg);
  margin: 0 12px 12px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.feature-teams-table-role {
  font-size: 12px;
  color: var(--color-text-muted);
}

.feature-teams-table-edit {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
}

.feature-teams-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 16px 14px;
  flex-wrap: wrap;
}

.feature-teams-footer-note {
  font-size: 12px;
  color: var(--color-text-muted);
}

.feature-teams-footer-mfa {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  white-space: nowrap;
}

/* --- Transcript Widget (webinar chapters) --- */
.transcript-widget details {
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 0;
}

.transcript-widget summary {
  font-size: var(--text-lg);
  font-weight: 700;
  cursor: pointer;
  color: var(--color-text);
  list-style: none;
}

.transcript-widget summary::-webkit-details-marker {
  display: none;
}

.transcript-widget summary::after {
  content: "+";
  float: right;
  font-weight: 900;
  font-size: var(--text-body);
  color: var(--color-text);
}

.transcript-widget details[open] summary::after {
  content: "\2013";
}

.transcript-widget summary .timestamp {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: var(--space-xs);
}

.transcript-widget .transcript {
  margin-top: 0.75rem;
  font-size: var(--text-body);
  color: var(--color-text-dim);
  line-height: var(--leading-normal);
}

.transcript-widget .transcript p {
  margin: 0 0 0.75rem 0;
}

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

  .hero.hero-no-overlay {
    --hero-overlay-w: min(32vw, 360px);
  }

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

@media (max-width: 768px) {
  .hero-right-overlay {
    display: none;
  }

  .hero.hero-no-overlay .hero-text {
    padding-right: var(--space-xl);
  }
}

/* Data carousel specifics */
.data-section > p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

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

.data-logo-carousel-track img {
  height: 40px;
  max-width: 140px;
}

.dataset-grid,
.dataset-carousel {
  --dataset-card-width: 270px;
}

.dataset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--dataset-card-width), 1fr));
  gap: var(--space-md);
  text-align: left;
}

.dataset-filters {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}

.dataset-filters > div {
  display: flex;
  flex-direction: column;
}

/* Both production usages also carry .card-hover, which provides the shadow
   + accent border-bottom hover. Keep this rule focused on layout. */
.dataset-card {
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--color-bg);
  text-decoration: none;
  color: inherit;
  display: block;
}

.dataset-card > img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
  margin: 0;
  border: none;
  border-bottom: 1px solid var(--color-border);
  border-radius: 0;
}

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

.dataset-name {
  display: block;
  margin: 0 0 0.25rem;
  color: var(--color-text);
}

.dataset-card-body .dataset-meta {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: 0.5rem;
}

.dataset-card-body .dataset-desc {
  font-size: var(--text-sm);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

/* --- Dataset Carousel (homepage) --- */
.dataset-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 2rem 0 0;
}

.dataset-carousel-viewport {
  overflow: hidden;
  flex: 1;
  padding: 4px 0;
}

.dataset-carousel-track {
  display: flex;
  gap: var(--space-md);
  width: max-content;
  padding: 0 4px;
}

.dataset-carousel .dataset-card {
  flex-shrink: 0;
  width: var(--dataset-card-width);
}

/* --- Dataset Detail Page --- */
.back-link {
  margin-bottom: 1.5rem;
}

.back-link a {
  color: var(--color-accent);
  font-size: var(--text-sm);
  font-weight: 400;
  border-bottom: 1px solid var(--color-accent);
}

.dataset-detail {
  max-width: none;
}

.dataset-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.dataset-detail-image img {
  width: 100%;
  border-radius: var(--radius);
  margin: 0;
  object-fit: cover;
}

.dataset-detail-content h1 {
  margin-bottom: 0.25rem;
}

.dataset-detail-vendor {
  font-size: var(--text-lg);
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.dataset-detail-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: 1rem;
}

.dataset-tag {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-sm);
  background: var(--color-surface);
  border-radius: 100px;
  color: var(--color-text);
}

.dataset-detail-resolution,
.dataset-detail-price {
  margin-bottom: 1rem;
}

.dataset-detail-desc {
  margin-top: 0.5rem;
}

/* --- Plans Grid --- */

.plans-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-bottom: 1rem;
  padding-top: var(--space-md);
}

.plan-card {
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 1.75rem 1.5rem;
}

.plan-card-highlight {
  background: var(--color-accent);
  box-shadow: var(--shadow-card);
  color: #fff;
}

.plan-card-highlight .plan-desc {
  color: rgba(255, 255, 255, 0.85);
}

.plan-card-highlight .plan-features li {
  color: rgba(255, 255, 255, 0.85);
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

.plan-card-highlight .plan-cta .btn-primary {
  background: #fff;
  color: var(--color-accent);
  border: 1px solid #fff;
}

.plan-card-highlight .plan-cta .btn-primary:hover {
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-accent);
  transform: translateY(-1px);
}

.plan-card-alt {
  background: var(--color-surface);
}

.plan-card-alt .plan-cta .btn-primary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
}

.plan-card-alt .plan-cta .btn-primary:hover {
  background: transparent;
  color: var(--color-accent);
  border-color: var(--color-accent);
  transform: translateY(-1px);
}

.plan-header {
  margin-bottom: 1.25rem;
}

.plan-header h3 {
  margin: 0 0 0.5rem;
}

.plan-features {
  flex: 1;
  margin-bottom: 1rem;
}

.plan-features ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.plan-features li {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.plan-features li:last-child {
  border-bottom: none;
}

.plan-seats {
  margin: 0;
  font-size: var(--text-base);
  line-height: 1.5;
}

.plan-card-highlight .plan-seats {
  color: #fff;
}

.plan-cta {
  margin-top: auto;
}

.plan-cta .btn-primary {
  display: block;
  width: 100%;
  text-align: center;
  padding: var(--space-sm) var(--space-lg);
  border-bottom: none;
}

.plan-checklist {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  font-size: var(--text-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.plan-checklist li {
  padding: 0;
  border-bottom: none;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.plan-checklist-intro {
  font-weight: 600;
  color: var(--color-text) !important;
  margin-bottom: var(--space-2xs);
}

.plan-card-highlight .plan-checklist {
  border-top-color: rgba(255, 255, 255, 0.25);
}

.plan-card-highlight .plan-checklist li {
  color: rgba(255, 255, 255, 0.85);
}

.plan-card-highlight .plan-checklist-intro {
  color: #fff !important;
}

/* --- Pricing Page --- */

.pricing-toggle-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-xl);
}

.pricing-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  background: var(--color-surface);
  border-radius: 999px;
}

.pricing-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition);
}

.pricing-toggle-btn:hover {
  color: var(--color-text);
}

.pricing-toggle-btn.active {
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: var(--shadow-card);
}

.pricing-toggle-save {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-accent);
}

.pricing-toggle-btn.active .pricing-toggle-save {
  color: var(--color-accent);
}

.pricing-card {
  position: relative;
  padding: var(--space-xl) var(--space-lg);
}

.pricing-card-badge {
  position: absolute;
  top: calc(-1 * var(--space-sm) - 2px);
  left: 50%;
  transform: translateX(-50%);
  display: inline-block;
  padding: 0.25rem 0.75rem;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  background: var(--color-bg);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
  white-space: nowrap;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.15rem;
  margin-top: var(--space-sm);
}

.pricing-currency {
  font-size: var(--text-lg);
  font-weight: 700;
  color: inherit;
}

.pricing-amount {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: inherit;
}

.pricing-amount--text {
  font-size: var(--text-h3);
  font-weight: 700;
}

.pricing-period {
  font-size: var(--text-body);
  color: var(--color-text-muted);
}

.plan-card-highlight .pricing-period {
  color: rgba(255, 255, 255, 0.85);
}

.pricing-bill-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 var(--space-md);
}

.plan-card-highlight .pricing-bill-note {
  color: rgba(255, 255, 255, 0.85);
}

.pricing-seats {
  margin: 0 0 var(--space-lg);
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--text-body);
  color: var(--color-text);
}

.plan-card-highlight .pricing-seats {
  color: #fff;
  border-top-color: rgba(255, 255, 255, 0.25);
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* --- Pricing comparison table --- */

.pricing-compare {
  margin-top: 3rem;
}

.pricing-compare > h2 {
  text-align: center;
}

.pricing-compare > p {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.pricing-compare-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-top: var(--space-xl);
}

.pricing-compare-table {
  margin: 0;
}

.pricing-compare-table thead th {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text);
  text-align: center;
  padding: var(--space-md);
}

.pricing-compare-table thead th:first-child {
  text-align: left;
  width: 40%;
}

.pricing-compare-table th[scope="row"] {
  color: var(--color-text);
  font-size: var(--text-body);
  font-weight: 400;
  border-bottom: 1px solid var(--color-border);
}

.pricing-compare-table td {
  text-align: center;
  color: var(--color-text);
}

.pricing-compare-table td[aria-label="Not included"] {
  color: var(--color-text-dim);
}

.pricing-compare-table td[aria-label="Included"] {
  color: var(--color-accent);
  font-weight: 700;
}

.pricing-compare-table .pricing-col-highlight {
  background: color-mix(in srgb, var(--color-accent) 6%, transparent);
}

.pricing-compare-table thead .pricing-col-highlight {
  background: var(--color-accent);
  color: var(--color-bg);
  border-radius: var(--radius) var(--radius) 0 0;
}

.pricing-compare-table tbody tr:hover {
  background: rgba(0, 0, 0, 0.02);
}

.pricing-compare-table tbody tr:hover .pricing-col-highlight {
  background: color-mix(in srgb, var(--color-accent) 10%, transparent);
}

/* --- Request a Proposal page --- */

.proposal-intro {
  max-width: 600px;
}

.proposal-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--space-2xl);
  align-items: start;
  margin-bottom: var(--space-3xl);
}

.proposal-card-sticky {
  position: sticky;
  top: calc(var(--header-height) + var(--space-lg));
}

.proposal-service-card {
  background: var(--color-bg);
  border: 1.5px solid var(--color-accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-xl);
}

.proposal-service-card h3 {
  margin: 0 0 var(--space-sm);
}

.proposal-service-desc {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-lg);
}

.proposal-service-scope {
  font-size: var(--text-lg);
  margin: 0 0 var(--space-xs);
}

.proposal-service-retainer {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  margin: 0 0 var(--space-lg);
}

/* Divider above the shared .checklist when it sits under the service-scope text */
.proposal-service-card .checklist {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}

.proposal-plans-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: var(--space-lg) 0 0;
}

.proposal-form-card {
  min-width: 0;
}

.proposal-form-card .hs-form-wrap {
  margin: 0;
}

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

  .proposal-card-sticky {
    position: static;
  }
}

/* --- Monitoring Services section --- */

.monitoring-services-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-2xl);
}

.monitoring-services-eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}

.monitoring-services-text h2 {
  margin-top: 0;
  margin-bottom: var(--space-md);
}

.monitoring-services-text p {
  max-width: none;
}

.monitoring-services-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
}

.monitoring-services-list li {
  padding: var(--space-sm) 0;
  color: var(--color-text);
}

.monitoring-services-list strong {
  color: var(--color-text);
}

@media (max-width: 768px) {
  .monitoring-services-card {
    padding: var(--space-xl) var(--space-lg);
  }

  .pricing-toggle-btn {
    padding: var(--space-sm) var(--space-md);
  }

  .pricing-toggle-save {
    display: none;
  }
}

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

.demo-form-intro {
  color: var(--color-text-muted);
  margin-bottom: var(--space-lg);
}

/* Caps the inline HubSpot form to a comfortable reading width — it's a
   handful of short fields, not a full-width layout. No height cap, so an
   open multi-select dropdown has room to show all its options instead of
   being clipped. */
.demo-form-embed {
  max-width: 32rem;
}

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

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

/* "Who you'll meet" panel sits as the second column of the hero
   .text-and-media grid, so it can't take .section-light's own
   center-and-cap-width margin — that's sized for a top-level section. */
.demo-team-panel {
  margin: 0;
  max-width: none;
}

.demo-team-panel h3 {
  margin-bottom: var(--space-lg);
}

.demo-team-member {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  color: inherit;
  border-bottom: none;
  transition: transform var(--transition);
}

.demo-team-member:hover {
  border-bottom: none;
  opacity: 1;
  transform: translateY(-2px);
}

.demo-team-member:hover .demo-team-name {
  color: var(--color-accent);
}

.demo-team-member + .demo-team-member {
  margin-top: var(--space-lg);
}

/* Specificity beats `.text-and-media img`'s border-radius/object-fit —
   these photos live in the grid's second column, so they'd otherwise
   inherit a 4px card radius instead of a circular crop. */
.demo-team-panel .demo-team-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.demo-team-name {
  font-weight: 700;
  margin: 0;
}

.demo-team-role {
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  margin: 0;
}

.demo-expertise-box h2 {
  margin-bottom: var(--space-lg);
}

.demo-expertise-pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
}

.demo-pill {
  background: #fff;
  box-shadow: var(--shadow-card);
  border-radius: 999px;
  padding: var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text);
  white-space: nowrap;
}

/* ============================================================
   Industry Pages
   ============================================================ */

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

.text-with-gif {
  min-width: 0;
}

.text-with-gif h2 {
  margin-bottom: 1rem;
}

.bordered-media {
  border-radius: var(--radius);
  max-width: 85%;
  display: block;
  object-fit: cover;
  margin-left: auto;
  min-width: 0;
}

/* Use-case button grid (conservation) */
.industry-button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: 1.5rem;
  justify-content: center;
  padding: 1rem 0;
}

.industry-button {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-sm);
  padding: 1rem 1.5rem;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  color: var(--color-teal);
  font-size: var(--text-sm);
  font-weight: 400;
  text-decoration: none;
  transition:
    box-shadow var(--transition),
    transform var(--transition);
}

.industry-button:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

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

/* Stats section */
.stats-side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.stats-grid {
  display: grid;
  gap: var(--space-lg);
}

.stats-grid--2col {
  grid-template-columns: 1fr 1fr;
  row-gap: var(--space-xl);
}

.stats-number {
  font-size: var(--text-display);
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.stats-grid p {
  margin: 0;
}

/* Featured content in green section */
.featured-two-col {
  display: flex;
  gap: var(--space-3xl);
  align-items: center;
  max-width: var(--max-width);
  margin: 0 auto;
}

.featured-two-col .featured-text {
  flex: 1;
}

.featured-two-col .featured-text h2 {
  margin-bottom: 0.75rem;
}

.featured-two-col .featured-text p {
  margin-bottom: 1.25rem;
}

.featured-two-col .featured-image {
  flex: 1;
}

.featured-two-col .featured-image img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: none;
}

/* Procurement section */
.procurement-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.procurement-list {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--text-lg);
  font-weight: 700;
}

.procurement-list li {
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.procurement-list li:last-child {
  border-bottom: none;
}

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

  .dataset-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .dataset-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

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

  table {
    font-size: var(--text-sm);
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    padding: var(--space-sm);
  }

  main > h2 + ul {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  main > section {
    padding: var(--space-lg);
  }

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

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

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

  .stats-side-by-side {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .featured-two-col {
    flex-direction: column;
    gap: var(--space-xl);
  }

  .procurement-layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .industry-section {
    padding: 1.25rem;
  }
}

@media (max-width: 479px) {
  main > h2 + ul {
    grid-template-columns: 1fr 1fr;
  }
}

/* --- Homepage workflow section --- */

.workflow-intro {
  max-width: var(--width-narrow);
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.workflow-intro p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

/* Pill toggle — shared by the workflow section and the ROI calculator.
   .roi-calc-tabs overrides only its margin below. */
.workflow-tabs,
.roi-calc-tabs {
  display: flex;
  width: fit-content;
  margin: 0 auto;
  padding: var(--space-xs);
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.workflow-tab,
.roi-tab {
  padding: var(--space-sm) var(--space-lg);
  font: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  transition:
    background var(--transition),
    color var(--transition);
}

.workflow-tab.is-active,
.roi-tab--active {
  background: var(--color-accent);
  color: var(--color-bg);
}

/* Both panels stack in the same grid cell so the section never changes height on tab switch */
.workflow-panels-wrapper {
  display: grid;
}

.workflow-panel {
  grid-column: 1;
  grid-row: 1;
}

.workflow-panel[hidden] {
  display: block;
  visibility: hidden;
  pointer-events: none;
}

.workflow-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--space-3xl);
  align-items: center;
}

.workflow-eyebrow {
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
}

.workflow-band-intro {
  font-size: var(--text-lg);
  margin-bottom: var(--space-xl);
}

.workflow-band-visual {
  position: relative;
  min-height: 520px;
  display: grid;
  align-items: center;
}

.workflow-band-image {
  position: absolute;
  left: -12%;
  top: 50%;
  transform: translateY(-50%);
  width: 82%;
  border-radius: var(--radius);
}

.workflow-band-cards {
  position: relative;
  z-index: 2;
  display: grid;
  gap: var(--space-md);
  margin-left: 41%;
}

.workflow-card {
  padding: var(--space-lg);
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.workflow-card-title {
  margin: 0 0 var(--space-sm);
  font-weight: 700;
  color: var(--color-accent);
}

.workflow-card p {
  margin: 0;
}

/* Faux Lens monitoring report — visual mockup behind the services-tab cards.
   Reads as a document thumbnail; sub-element sizes are intentionally small. */
.workflow-faux-report {
  position: absolute;
  left: -4%;
  top: 50%;
  transform: translateY(-50%);
  width: 62%;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  aspect-ratio: 8.5 / 11;
  overflow: hidden;
}

.workflow-faux-report-header,
.workflow-faux-report-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.workflow-faux-report-header {
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.workflow-faux-report-footer {
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-border);
}

.workflow-faux-report-title {
  font-size: var(--text-sm);
  font-weight: 700;
}

.workflow-faux-report-header svg {
  color: var(--color-accent);
}

.workflow-faux-report-imagery {
  width: 100%;
  height: 110px;
  border-radius: var(--radius);
  flex-shrink: 0;
}

.workflow-faux-report-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
}

.workflow-faux-stat {
  padding: var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--radius);
}

.workflow-faux-stat-num {
  display: block;
  font-size: var(--text-sm);
  font-weight: 900;
  color: var(--color-accent);
}

.workflow-faux-stat-label {
  display: block;
  margin-top: var(--space-xs);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.workflow-faux-report-findings {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.workflow-faux-finding {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.workflow-faux-tag {
  flex-shrink: 0;
  width: 26px;
  height: 8px;
  border-radius: 2px;
}

.workflow-faux-line {
  display: inline-block;
  height: 4px;
  background: var(--color-border);
  border-radius: 1px;
}

.workflow-faux-report-chart {
  width: 100%;
  height: 38px;
  margin-top: auto;
}

@media (max-width: 900px) {
  .workflow-panels-wrapper {
    display: block;
  }
  .workflow-panel[hidden] {
    display: none;
  }
  .workflow-band {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .workflow-band-visual {
    min-height: 0;
  }
  .workflow-band-image,
  .workflow-faux-report {
    position: static;
    transform: none;
    width: 100%;
    margin: 0 auto var(--space-md);
  }
  .workflow-band-image {
    max-width: 360px;
    display: block;
  }
  .workflow-faux-report {
    max-width: 280px;
  }
  .workflow-band-cards {
    margin-left: 0;
  }
}

/* ============================================================
   Home page — image-overlay components (industry cards + dataset picker)
   Each is a clickable card with a full-bleed image, a bottom dark scrim,
   and white text on top. Shared shape + image-fill rules live in the two
   grouped selectors below; per-component sizing/copy live in their blocks.
   ============================================================ */

.industry-card,
.dataset-picker-thumb,
.dataset-picker-detail {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-text); /* dark fallback while image loads */
}

.industry-card > img,
.dataset-picker-thumb > img,
.dataset-picker-panel > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
}

/* Bottom scrim — applied as ::after on each component so the gradient sits
   above the image but below the text overlay (z-index: 1 by default). */
.industry-card::after,
.dataset-picker-thumb::after,
.dataset-picker-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0) 65%);
  pointer-events: none;
}

/* --- Industry cards (5-up on home page) --- */

/* `a.industry-card` specificity (0,1,1) beats `a.card-hover { display: block }`
   (also 0,1,1 but earlier in source order) so flex layout is preserved. */
a.industry-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 320px;
  border-bottom: none;
}

.industry-card-body {
  position: relative;
  z-index: 2;
  padding: var(--space-md);
  color: #fff;
}

.industry-card-title {
  display: block;
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: var(--space-xs);
}

.industry-card-body p {
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-sm);
  line-height: 1.45;
  margin: 0;
}

@media (max-width: 1100px) {
  .industry-card {
    height: 260px;
  }
}

@media (max-width: 900px) {
  .industry-card {
    height: 220px;
  }
}

/* --- Dataset picker (thumbnail grid + detail panel) --- */

.dataset-picker {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--space-md);
  margin: var(--space-lg) 0;
  text-align: left;
}

.dataset-picker-thumbs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Fixed landscape rows; the picker's default `align-items: stretch`
     makes the detail panel beside this match the grid's total height. */
  grid-auto-rows: 120px;
  gap: var(--space-xs);
}

.dataset-picker-thumb {
  display: block;
  border-bottom: none;
  box-shadow: var(--shadow-card);
  transition:
    box-shadow var(--transition),
    transform var(--transition);
}

.dataset-picker-thumb:hover,
.dataset-picker-thumb:focus-visible {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}

.dataset-picker-thumb.is-active {
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
  box-shadow: var(--shadow-card-hover);
}

.dataset-picker-thumb-meta {
  position: absolute;
  left: var(--space-sm);
  right: var(--space-sm);
  bottom: var(--space-sm);
  z-index: 1;
  color: #fff;
  line-height: 1.2;
}

.dataset-picker-name {
  display: -webkit-box;
  font-size: var(--text-sm);
  font-weight: 700;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dataset-picker-vendor {
  display: block;
  margin-top: 2px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.75);
}

.dataset-picker-panel {
  position: absolute;
  inset: 0;
  display: block;
  border-bottom: none;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.dataset-picker-panel.is-active {
  opacity: 1;
  pointer-events: auto;
}

.dataset-picker-panel-overlay {
  position: absolute;
  left: var(--space-xl);
  right: var(--space-xl);
  bottom: var(--space-xl);
  z-index: 1;
  color: #fff;
}

.dataset-picker-panel-title {
  display: block;
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1.05;
  margin-bottom: 0.25rem;
}

.dataset-picker-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--text-sm);
}

.dataset-picker-meta-sep {
  color: rgba(255, 255, 255, 0.4);
}

.dataset-picker-meta-res {
  color: #fff;
  font-weight: 700;
}

@media (max-width: 800px) {
  .dataset-picker {
    grid-template-columns: 1fr;
  }
  .dataset-picker-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }
  /* No room for both panel + grid; show grid only. Hide a trailing odd
     thumb so the 2-col layout stays square. */
  .dataset-picker-detail {
    display: none;
  }
  .dataset-picker-thumb:nth-child(odd):last-child {
    display: none;
  }
}

/* ROI stats section — V1 (title + subtitle + stats, centered, white bg) */
.roi-stats {
  padding: 0 var(--space-lg);
  max-width: var(--max-width);
  margin: 0 auto;
  text-align: center;
}

.roi-stats-intro {
  margin-bottom: var(--space-2xl);
}

.roi-stats-intro h2 {
  margin: 0 0 var(--space-md);
}

.roi-stats-intro p {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  max-width: var(--width-narrow);
  margin: 0 auto;
}

.roi-stats .stat-row {
  margin: 0;
}

.roi-stats .stat-block dt {
  margin-bottom: var(--space-sm);
}

/* Override shared .stat-block dd (sm/muted) → body/text for this section */
.roi-stats .stat-block dd {
  font-size: var(--text-body);
  color: var(--color-text);
  max-width: 220px;
  margin: 0 auto;
}

.roi-stats-footnote {
  text-align: center;
  color: var(--color-text-dim);
  font-size: var(--text-sm);
  max-width: var(--width-narrow);
  margin: var(--space-xl) auto 0;
}

.roi-stats-cta {
  display: block;
  width: fit-content;
  margin: var(--space-xl) auto 0;
}

/* --- ROI Calculator (homepage section) --- */

.roi-calc {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

.roi-calc-header {
  text-align: center;
  max-width: var(--width-narrow);
  margin: 0 auto var(--space-2xl);
}

.roi-calc-header h2 {
  margin: 0 0 var(--space-md);
}

.roi-calc-header p {
  color: var(--color-text-muted);
  font-size: var(--text-lg);
  line-height: 1.6;
}

/* Inside a blog post, the calculator's own header should read as just
   another left-aligned section of the post (matching .post-body's other
   headings and body copy) rather than the homepage's centered intro. */
.post-body .roi-calc-header {
  text-align: left;
  max-width: none;
  margin: 0 0 var(--space-2xl);
}

.post-body .roi-calc-header p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Inside a blog post, .roi-calc-source is a <p> and picks up .post-body p's
   margin-bottom on top of .roi-calc-footer's own bottom padding, doubling
   up the space under "Figures are estimates, results will vary." Zero the
   paragraph's own margin and trim the footer padding, then push the extra
   breathing room out to a margin below the whole component instead, so it
   reads as separation from the next paragraph rather than dead space
   inside the card. */
.post-body .roi-calc-source {
  margin-bottom: 0;
}

.post-body .roi-calc-footer {
  padding-bottom: var(--space-md);
}

.post-body .roi-calc {
  margin-bottom: var(--space-2xl);
}

/* Card shell */
.roi-calc-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Tab pill reuses .workflow-tabs/.workflow-tab above; only the margin differs. */
.roi-calc-tabs {
  margin: var(--space-xl) auto var(--space-md);
}

.roi-calc-caption {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 var(--space-xl) var(--space-md);
}

/* Two-column body. Outer gutter matches the caption/footer inset
   (--space-xl) so the results panel's edges line up with the footer below
   it; the inputs cell's horizontal gutter comes from this body padding. */
.roi-calc-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: var(--space-xl);
  padding: 0 var(--space-xl);
}

/* Match the results panel's top padding so "Your portfolio" lines up with
   "Estimated annual savings". */
.roi-calc-inputs {
  padding-top: var(--space-xl);
}

.roi-calc-group-label {
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
}

/* Inherits the base hr border; only the margin is tightened. */
.roi-calc-divider {
  margin: var(--space-lg) 0;
}

/* Input rows: label left, field right */
.roi-calc-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.roi-calc-row:last-child {
  margin-bottom: 0;
}

.roi-calc-row label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  flex: 1;
}

/* Number input field with optional prefix/suffix */
.roi-field {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
  flex: none;
  transition:
    border-color var(--transition),
    box-shadow var(--transition);
}

.roi-field:focus-within {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
}

.roi-field input[type="number"] {
  width: 76px;
  border: 0;
  outline: 0;
  padding: var(--space-sm);
  font-family: inherit;
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text);
  text-align: right;
  background: transparent;
  -moz-appearance: textfield;
}

.roi-field input[type="number"]::-webkit-outer-spin-button,
.roi-field input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

.roi-field-prefix {
  padding: 0 var(--space-xs) 0 var(--space-sm);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text-dim);
}

.roi-field-suffix {
  padding: 0 var(--space-sm) 0 var(--space-xs);
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-dim);
}

/* Read-only imagery cost field */
.roi-field--readonly {
  border-color: var(--color-border);
  background: var(--color-surface);
  cursor: not-allowed;
}

.roi-field-readonly-val {
  padding: var(--space-sm);
  font-size: var(--text-body);
  font-weight: 700;
  color: var(--color-text-dim);
}

/* Results panel */
.roi-calc-results {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-xl);
  display: flex;
  flex-direction: column;
}

.roi-calc-results .roi-calc-group-label {
  color: var(--color-accent);
  margin-bottom: var(--space-xs);
}

.roi-savings-value {
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  font-weight: 900;
  line-height: 1.05;
  color: var(--color-teal);
  margin: 0;
}

.roi-savings-sub {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  margin: var(--space-xs) 0 0;
}

.roi-bars {
  margin: var(--space-xl) 0 var(--space-sm);
}

.roi-bar-row {
  margin-bottom: var(--space-md);
}

.roi-bar-meta {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}

.roi-bar-meta span:last-child {
  font-weight: 700;
  color: var(--color-text);
}

.roi-bar-bg {
  background: var(--color-border);
  border-radius: var(--radius);
  height: 12px;
  overflow: hidden;
}

.roi-bar-fill {
  height: 12px;
  border-radius: var(--radius);
  transition: width 0.45s ease;
}

.roi-bar-fill--inperson {
  background: var(--color-teal);
}

.roi-bar-fill--remote {
  background: var(--color-accent);
}

.roi-metrics-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}

.roi-metric-label {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-dim);
  margin-bottom: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.roi-metric-big {
  font-size: clamp(1.75rem, 3.4vw, 2.25rem);
  font-weight: 900;
  line-height: 1.1;
  margin: 0;
}

.roi-metric-big--green {
  color: var(--color-accent);
}

.roi-metric-big--teal {
  color: var(--color-teal);
}

.roi-metric-sub {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  margin-top: var(--space-xs);
}

.roi-calc-cta {
  display: block;
  text-align: center;
  margin-top: auto;
}

/* Footer: formula + source */
.roi-calc-footer {
  padding: var(--space-xs) var(--space-xl) var(--space-xl);
}

.roi-calc-assumptions {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
  margin-top: var(--space-md);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.8;
}

.roi-assumptions-title {
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--space-xs);
  max-width: none;
}

.roi-calc-assumptions ul {
  margin: 0;
}

.roi-calc-assumptions li {
  margin-bottom: var(--space-xs);
}

.roi-calc-source {
  font-size: var(--text-sm);
  color: var(--color-text-dim);
  margin-top: var(--space-md);
  text-align: center;
  max-width: none;
}

@media (max-width: 768px) {
  /* Single column, full-bleed panels: zero the body gutter so the inputs
     and results span the card, and restore the inputs' own padding. */
  .roi-calc-body {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0;
  }

  .roi-calc-inputs {
    padding: var(--space-xl);
  }

  .roi-calc-results {
    border-radius: 0 0 var(--radius) var(--radius);
  }
}

@media (max-width: 480px) {
  /* Balanced two-segment toggle with breathing room from the card edges,
     instead of a fit-content pill that stretches lopsidedly. */
  .roi-calc-tabs {
    width: auto;
    margin-left: var(--space-lg);
    margin-right: var(--space-lg);
    gap: var(--space-xs);
  }

  .roi-tab {
    flex: 1;
    padding: var(--space-sm) var(--space-md);
  }

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

  /* Reclaim horizontal room so input labels aren't crushed into a sliver. */
  .roi-calc-inputs,
  .roi-calc-results {
    padding: var(--space-lg);
  }

  /* Stack each row: full-width label above a full-width field. */
  .roi-calc-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-xs);
  }

  .roi-calc-row label {
    flex: none;
  }

  .roi-field {
    width: 100%;
  }

  .roi-field input[type="number"] {
    flex: 1;
    width: auto;
  }
}

/* --- Monitoring Services Page --- */

/* Hero: custom 2-col split (1.1fr 1fr), white bg, constrained by the page
   shell (not a full-bleed industry hero). */
.ms-hero-split {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.ms-hero-text h1 {
  margin-bottom: var(--space-md);
}

.ms-hero-sub {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 540px;
  margin-bottom: var(--space-lg);
}

.ms-hero-checks {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.ms-hero-checks li {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--color-accent);
  margin-bottom: 0;
}

.ms-hero-card-wrap {
  display: flex;
  justify-content: center;
}

/* Report card mockup — a decorative HTML rendering of a product UI. Its
   compact <14px micro-typography is intentional illustration and is exempt
   from the --text-* scale; do not "tokenize" the font-sizes below. */
.ms-report-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
  width: 100%;
  max-width: 460px;
  font-family: var(--font-sans);
}

.ms-report-card-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fafafa;
}

.ms-report-card-header-left {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-accent);
}

.ms-report-card-header-left strong {
  font-size: 13px;
  color: var(--color-text);
}

.ms-report-card-date {
  font-size: 12px;
  color: var(--color-text-dim);
}

.ms-report-card-inbox {
  font-size: 11px;
  color: var(--color-text-dim);
}

.ms-report-card-imagery {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.ms-report-card-imagery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  border-radius: 0;
  border: none;
}

.ms-report-anomaly-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.ms-report-attribution {
  position: absolute;
  bottom: 6px;
  right: 8px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 10px;
}

.ms-report-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-bottom: 1px solid var(--color-border);
}

.ms-report-stat {
  padding: 14px 16px;
  text-align: left;
}

.ms-report-stat + .ms-report-stat {
  border-left: 1px solid var(--color-border);
}

.ms-report-stat-value {
  font-size: 22px;
  font-weight: 900;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 4px;
}

.ms-report-stat-value--anomaly {
  color: #b57eeb;
}

.ms-report-stat-label {
  font-size: 11px;
  color: var(--color-text-muted);
}

.ms-report-findings {
  padding: 12px 16px;
}

.ms-report-findings-title {
  font-size: 11px;
  color: var(--color-text-dim);
  margin-bottom: 8px;
  font-weight: 700;
}

.ms-report-finding {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  font-size: 13px;
  border-top: 1px solid #f0f0f0;
}

.ms-report-finding:first-of-type {
  border-top: none;
}

.ms-report-tag {
  flex-shrink: 0;
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius);
  font-weight: 700;
}

.ms-report-tag--anomaly {
  background: rgba(181, 126, 235, 0.14);
  color: #8a4fd1;
}

.ms-report-tag--positive {
  background: rgba(23, 120, 96, 0.1);
  color: var(--color-accent);
}

.ms-report-finding-loc {
  color: var(--color-text);
  flex: 1;
}

.ms-report-finding-link {
  color: var(--color-accent);
  font-weight: 700;
  font-size: 12px;
  border-bottom: none;
  flex-shrink: 0;
}

.ms-report-finding-link:hover {
  opacity: 0.8;
  border-bottom: none;
}

/* Section wrapper — vertical padding only (max-width inherited from the page shell, main) */
.ms-section {
  padding-top: 0;
  padding-bottom: 0;
}

/* Centered section header */
.ms-section-header {
  text-align: center;
  max-width: var(--width-narrow);
  margin: 0 auto var(--space-2xl);
}

.ms-section-header h2 {
  margin-bottom: var(--space-md);
}

.ms-section-header > p {
  font-size: var(--text-lg);
  margin-left: auto;
  margin-right: auto;
}

/* Eyebrow labels — shared type; per-use color + margin below. Sentence-case
   accent kicker, distinct from the uppercase shared .resource-section-label. */
.ms-section-eyebrow,
.ms-program-eyebrow,
.ms-case-study-eyebrow {
  font-size: var(--text-sm);
  font-weight: 700;
}

.ms-section-eyebrow {
  color: var(--color-accent);
  margin: 0 0 var(--space-sm);
}

/* Outcomes grid — 4-up responsive */
.ms-outcomes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

/* Shared card surface — elevation + rounding for the four MS card types */
.ms-outcome-card,
.ms-program-card,
.ms-team-card,
.ms-case-study-card {
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
}

.ms-outcome-card {
  padding: var(--space-lg);
}

.ms-outcome-card h4 {
  margin: 0 0 var(--space-sm);
}

.ms-outcome-card p {
  margin: 0;
  font-size: var(--text-body);
  max-width: none;
}

/* Rounded accent-tinted icon badge — shared by outcome + program cards */
.ms-outcome-icon,
.ms-program-icon {
  border-radius: var(--radius);
  background: rgba(23, 120, 96, 0.1);
  color: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-md);
}

.ms-outcome-icon {
  width: 44px;
  height: 44px;
}

/* ROI strip */
.ms-roi-strip {
  background: rgba(23, 120, 96, 0.08);
  border: 1px solid rgba(23, 120, 96, 0.18);
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-lg);
}

.ms-roi-strip .stat-row {
  margin: 0;
}

.ms-roi-strip .stat-block {
  text-align: center;
}

.ms-roi-strip .stat-block dt {
  color: var(--color-accent);
}

.ms-roi-strip .stat-block dd {
  font-size: var(--text-body);
  color: var(--color-text);
  font-weight: 700;
  max-width: none;
}

.ms-roi-footnote {
  text-align: center;
  margin: var(--space-lg) 0 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-style: italic;
  max-width: none;
}

/* Blog-post stat strips sit directly between paragraphs rather than inside
   a page section, so give them their own vertical rhythm and a tighter
   padding instead of touching the surrounding copy and next heading. */
.post-body .ms-roi-strip {
  margin: var(--space-lg) 0 var(--space-2xl);
  padding: var(--space-lg);
}

/* The post's narrow column (--width-narrow) gives each stat far less room
   than the homepage/managed-monitoring sections .stat-block was designed
   for, so a value with a space or dash (e.g. "180+ hrs", "90–95%") wraps
   mid-word. Shrink to the existing --text-display-sm variant and keep each
   value on one line. */
.post-body .stat-block dt {
  font-size: var(--text-display-sm);
  white-space: nowrap;
}

/* Programs grid — 2×2 */
.ms-programs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.ms-program-card {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  border: 1px solid transparent;
}

.ms-program-card--custom {
  background: rgba(23, 120, 96, 0.06);
  border: 1px dashed rgba(23, 120, 96, 0.35);
  box-shadow: none;
}

.ms-program-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
}

.ms-program-eyebrow {
  color: var(--color-accent);
  margin: 0 0 6px;
}

.ms-program-card h3 {
  margin: 0 0 var(--space-md);
}

/* The description grows to push the link to the card bottom; the eyebrow stays its natural height */
.ms-program-card p:not(.ms-program-eyebrow) {
  margin: 0 0 var(--space-lg);
  font-size: var(--text-body);
  flex: 1;
  max-width: none;
}

/* Card CTA link — shared by program + case-study cards. margin-top:auto is a
   no-op when a sibling paragraph has flex:1, so it's safe for both. */
.ms-card-link {
  color: var(--color-accent);
  font-weight: 700;
  font-size: var(--text-sm);
  border-bottom: none;
  align-self: flex-start;
  margin-top: auto;
}

.ms-card-link:hover {
  opacity: 0.8;
  border-bottom: none;
}

/* Case study grid — 3-up responsive */
.ms-case-study-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-lg);
}

.ms-case-study-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.ms-case-study-card-img {
  position: relative;
  height: 160px;
  overflow: hidden;
  flex-shrink: 0;
}

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

.ms-case-study-card-label {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius);
}

.ms-case-study-card-body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ms-case-study-eyebrow {
  color: var(--color-text-muted);
  margin: 0 0 var(--space-xs);
}

.ms-case-study-card-body h4 {
  margin: 0 0 var(--space-sm);
}

/* The description grows to push the link to the card bottom; the eyebrow stays its natural height */
.ms-case-study-card-body p:not(.ms-case-study-eyebrow) {
  margin: 0 0 var(--space-md);
  font-size: var(--text-body);
  flex: 1;
  max-width: none;
}

/* Team section */
.ms-team-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-2xl);
  align-items: center;
}

.ms-team-text p {
  font-size: var(--text-lg);
  margin-bottom: var(--space-lg);
  max-width: none;
}

.ms-team-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-sm);
}

.ms-team-points li {
  font-size: var(--text-body);
  color: var(--color-text-muted);
  margin-bottom: 0;
}

.ms-team-points strong {
  color: var(--color-text);
}

.ms-team-cards {
  display: grid;
  gap: var(--space-md);
}

.ms-team-card {
  padding: var(--space-lg);
}

.ms-team-card-role {
  display: block;
  margin-bottom: var(--space-xs);
}

.ms-team-card p {
  margin: 0 0 var(--space-md);
  font-size: var(--text-body);
  max-width: none;
}

.ms-headshots {
  display: flex;
  align-items: center;
}

.ms-headshot {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
}

.ms-headshot + .ms-headshot {
  margin-left: -10px;
}

.ms-headshot svg,
.ms-headshot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

/* --- MS Subpages (recurring, one-time, agentic) --- */
.ms-subpage-hero {
  padding: 0;
  max-width: 860px;
}

.ms-subpage-hero h1 {
  margin-bottom: var(--space-md);
}

.ms-subpage-hero > p {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  max-width: 720px;
  margin-bottom: var(--space-lg);
}

/* "How it might look" band — constrained by the page shell (no full-bleed
   escape); just provides vertical spacing. */
.ms-subpage-band {
  padding: 0 0 var(--space-2xl);
}

.ms-howlooks-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.ms-howlooks-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--space-md);
}

.ms-howlooks-bullet {
  display: flex;
  gap: var(--space-md);
}

.ms-howlooks-bullet-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-accent);
  margin-top: 9px;
  flex-shrink: 0;
}

.ms-howlooks-note {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-style: italic;
  max-width: 660px;
  margin: var(--space-2xl) auto;
  text-align: center;
}

/* "What's included" section */
.ms-included-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: 0 0 var(--space-2xl);
}

.ms-included-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-lg);
}

.ms-included-item {
  display: flex;
  gap: var(--space-sm);
  align-items: baseline;
  color: var(--color-text);
  font-size: var(--text-sm);
}

.ms-included-item-dot {
  color: var(--color-accent);
  font-weight: 700;
  flex-shrink: 0;
}

.ms-best-for {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

/* Green closing CTA — constrained, rounded accent card (mirrors
   .section-light--accent; no full-bleed escape). */
.ms-subpage-cta {
  background: var(--color-accent);
  border-radius: var(--radius);
  padding: var(--space-2xl);
  margin-top: var(--space-2xl);
}

.ms-subpage-cta-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}

.ms-subpage-cta h3 {
  color: #fff;
  margin: 0;
}

.ms-subpage-cta p {
  color: rgba(255, 255, 255, 0.85);
  margin: var(--space-xs) 0 0;
}

.ms-subpage-cta .btn-primary {
  background: #fff;
  color: var(--color-accent);
  border-color: #fff;
  white-space: nowrap;
}

.ms-subpage-cta .btn-primary:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateY(-1px);
}

/* --- MS Case Studies --- */

.ms-cs-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
  margin-bottom: var(--space-2xl);
}

.ms-cs-stat {
  text-align: center;
  border-left: 1px solid var(--color-border);
  padding-left: var(--space-lg);
  /* Center each stat in the equal-height row so a value that wraps to two
     lines (e.g. "Land trust standards") stays balanced with single-line ones. */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ms-cs-stat:first-child {
  border-left: none;
  padding-left: 0;
}

.ms-cs-stat-value {
  font-size: var(--text-display-sm);
  font-weight: 900;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: 6px;
}

.ms-cs-stat-label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.ms-cs-narrative {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}

.ms-cs-narrative-section h3 {
  margin-bottom: var(--space-sm);
}

.ms-cs-narrative-section p {
  color: var(--color-text-muted);
  margin: 0;
}

.ms-cs-narrative-num {
  font-size: var(--text-sm);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

/* "Read the full story" / playbook — constrained, rounded tinted card
   (mirrors .section-light; no full-bleed escape). */
.ms-cs-playbook {
  background: var(--color-surface);
  border-radius: var(--radius);
  padding: var(--space-2xl);
  margin: var(--space-2xl) 0;
}

.ms-cs-playbook-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.ms-cs-playbook-desc {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  margin: 0;
}

.ms-cs-playbook-card {
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--space-lg);
  display: grid;
  gap: var(--space-sm);
}

/* Playbook "report preview" mockup — like .ms-report-card, a decorative
   product-UI rendering. Its <14px micro-typography is intentional and exempt
   from the --text-* scale; do not tokenize the font-sizes in .ms-cs-playbook-cover-*. */
.ms-cs-playbook-cover {
  display: flex;
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  background: rgba(23, 120, 96, 0.06);
  border-radius: var(--radius);
  border: 1px solid rgba(23, 120, 96, 0.18);
}

.ms-cs-playbook-cover img {
  width: 88px;
  height: auto;
  border-radius: 4px;
  box-shadow:
    0 4px 14px rgba(0, 0, 0, 0.18),
    0 1px 3px rgba(0, 0, 0, 0.1);
  transform: rotate(-2deg);
  flex-shrink: 0;
}

.ms-cs-playbook-cover-label {
  font-size: 11px;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin: 0 0 4px;
}

.ms-cs-playbook-cover-title {
  font-size: var(--text-body);
  display: block;
  margin-bottom: 4px;
}

.ms-cs-playbook-cover-sub {
  font-size: 11px;
  color: var(--color-text-muted);
}

@media (max-width: 900px) {
  .ms-cs-playbook-inner {
    grid-template-columns: 1fr;
  }

  .ms-cs-narrative {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

@media (max-width: 600px) {
  .ms-cs-stats {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .ms-cs-stat {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-lg);
  }

  .ms-cs-stat:first-child {
    border-top: none;
    padding-top: 0;
  }
}

/* Annual report card (recurring subpage) */
.ms-month-strip {
  padding: 14px 16px;
}

.ms-month-strip-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.ms-month-strip-label {
  font-size: 11px;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
}

.ms-month-strip-legend {
  display: flex;
  gap: 12px;
  font-size: 10px;
  color: var(--color-text-muted);
}

.ms-month-strip-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.ms-month-strip-legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

.ms-month-grid {
  display: flex;
  gap: 4px;
}

.ms-month-cell {
  flex: 1;
  text-align: center;
  padding: 8px 4px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ms-month-cell--clean {
  background: rgba(23, 120, 96, 0.12);
  color: var(--color-accent);
}

.ms-month-cell--flagged {
  background: rgba(181, 126, 235, 0.18);
  color: #8a4fd1;
}

.ms-month-cell--note {
  background: rgba(242, 201, 76, 0.22);
  color: #946b00;
}

.ms-month-cell--pending {
  background: #eee;
  color: #888;
  outline: 2px solid var(--color-accent);
  outline-offset: -2px;
}

/* Annual easement review report card (recurring subpage) */
.ms-annual-badge {
  font-size: 10px;
  padding: 3px 8px;
  border-radius: var(--radius);
  font-weight: 700;
  letter-spacing: 0.2px;
  background: rgba(181, 126, 235, 0.14);
  color: #8a4fd1;
  white-space: nowrap;
}

.ms-annual-img-pair {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ms-annual-img {
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  background: #1a1f1c;
}

.ms-annual-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
}

.ms-annual-img-label {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 7px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.ms-annual-img-meta {
  display: flex;
  justify-content: space-between;
  padding: 0 16px 12px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.ms-annual-obs {
  padding: 14px 16px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.ms-annual-obs-eyebrow {
  font-size: 11px;
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 6px;
}

.ms-annual-obs p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
}

.ms-annual-history {
  padding: 14px 16px;
}

.ms-annual-history-label {
  font-size: 11px;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 8px;
}

.ms-annual-history-years {
  display: flex;
  gap: 8px;
}

.ms-annual-year {
  flex: 1;
  text-align: center;
  padding: 8px 6px;
  border-radius: var(--radius);
}

.ms-annual-year-num {
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
}

.ms-annual-year-status {
  font-size: 9px;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
}

.ms-annual-year--clean {
  background: rgba(23, 120, 96, 0.1);
  color: var(--color-accent);
}

.ms-annual-year--observed {
  background: rgba(242, 201, 76, 0.2);
  color: #946b00;
}

.ms-annual-year--flagged {
  background: rgba(181, 126, 235, 0.14);
  color: #8a4fd1;
}

/* Observation report card (one-time subpage) */
.ms-report-obs-pair {
  padding: 14px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.ms-report-obs-img {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  background: #222;
}

.ms-report-obs-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ms-report-obs-img-label {
  position: absolute;
  left: 8px;
  top: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
}

.ms-report-obs-img-attr {
  position: absolute;
  right: 6px;
  bottom: 4px;
  color: rgba(255, 255, 255, 0.75);
  font-size: 9px;
}

.ms-report-obs-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 0 14px 12px;
  gap: 10px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.ms-report-obs-meta-key {
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  font-size: 10px;
  margin-bottom: 2px;
}

.ms-report-interpretation {
  border-top: 1px solid var(--color-border);
  background: #fafafa;
  padding: 14px 16px;
}

.ms-report-interp-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-accent);
  margin-bottom: 10px;
}

.ms-report-interp-fields {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 10px;
}

.ms-report-interp-key {
  font-size: 10px;
  color: var(--color-text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 700;
  margin-bottom: 2px;
}

.ms-report-interp-val {
  font-size: 12px;
  color: var(--color-text);
}

/* Compliance report card (agentic subpage) */
.ms-report-comply-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--color-border);
}

.ms-report-comply-stat {
  padding: 14px 16px;
  border-left: 1px solid var(--color-border);
}

.ms-report-comply-stat:first-child {
  border-left: none;
}

.ms-report-comply-stat-value {
  font-size: 20px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 4px;
}

.ms-report-comply-stat-label {
  font-size: 11px;
  color: var(--color-text-muted);
}

.ms-report-comply-findings {
  padding: 12px 16px;
}

.ms-report-comply-findings-title {
  font-size: 11px;
  color: var(--color-text-dim);
  font-weight: 700;
  margin-bottom: 8px;
}

.ms-report-comply-finding {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px solid #f0f0f0;
  font-size: 13px;
}

.ms-report-comply-finding:first-child {
  border-top: none;
}

.ms-report-comply-tag {
  font-size: 10px;
  padding: 2px 7px;
  border-radius: var(--radius);
  font-weight: 700;
  white-space: nowrap;
}

.ms-report-comply-tag--flagged {
  background: rgba(181, 126, 235, 0.14);
  color: #8a4fd1;
}

.ms-report-comply-tag--ok {
  background: rgba(23, 120, 96, 0.1);
  color: var(--color-accent);
}

.ms-report-comply-finding-label {
  color: var(--color-text);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Responsive overrides for Monitoring Services page */
@media (max-width: 900px) {
  .ms-team-grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .ms-howlooks-grid,
  .ms-included-grid {
    grid-template-columns: 1fr;
  }

  .ms-subpage-cta-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

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

  .ms-hero-card-wrap {
    width: 100%;
  }

  .ms-report-card {
    max-width: 100%;
  }

  .ms-programs-grid {
    grid-template-columns: 1fr;
  }

  .ms-outcomes-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .ms-roi-strip .stat-row {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

@media (max-width: 600px) {
  .ms-included-list {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .ms-outcomes-grid {
    grid-template-columns: 1fr;
  }
}

/* --- Pricing page: feature info popovers --- */
.feat-trigger {
  display: inline;
}
.info-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0 0 0 5px;
  border: 0;
  background: none;
  color: var(--color-text-dim);
  cursor: pointer;
  border-radius: 50%;
  vertical-align: middle;
  position: relative;
  top: -1px;
  transition: color var(--transition);
}
.info-btn:hover,
.info-btn[aria-expanded="true"] {
  color: var(--color-accent);
}
.info-btn svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* JS moves popovers to <body> and sets position:fixed + coordinates at open time
   so they escape the table wrapper's overflow:auto clipping */
.popover {
  z-index: 200;
  width: 280px;
  background: #fff;
  border-radius: var(--radius);
  box-shadow: var(--shadow-card-hover);
  padding: var(--space-md);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--transition),
    transform var(--transition),
    visibility var(--transition);
}
.popover.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.popover::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 18px;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: rotate(45deg);
  box-shadow: -1px -1px 2px rgba(0, 0, 0, 0.06);
}
.popover p {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin: 0 0 var(--space-sm);
  line-height: var(--leading-normal);
  font-weight: 400;
}
.popover-cta {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-accent);
}
.popover-cta:hover {
  opacity: 0.85;
}