/* ==========================================================================
   myGreenAgent — Global Stylesheet
   Dark, premium aesthetic for a cannabis-industry AI advisory firm.
   This file contains ONLY the global system: reset, variables, typography,
   nav, footer, buttons, cards, and spacing utilities. No page-specific
   content styles live here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CSS Reset
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  cursor: pointer;
  background: none;
  border: none;
}

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

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

p,
h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

#root,
#__next {
  isolation: isolate;
}

/* --------------------------------------------------------------------------
   2. CSS Variables
   -------------------------------------------------------------------------- */

:root {
  /* Colors */
  --color-bg: #16181C;
  --color-bg-alt: #1C1F24;      /* slightly raised surface, e.g. cards/nav */
  --color-bg-alt-2: #22262C;    /* hover/active surface */
  --color-border: #2E3238;

  --color-text: #F0F4E8;        /* primary off-white */
  --color-text-slate: #CBD5C0;  /* secondary slate */
  --color-text-muted: #8A9384;  /* tertiary / disabled */

  --color-accent: #97BC62;      /* lime green */
  --color-accent-hover: #A9CC7A;
  --color-accent-active: #85A854;
  --color-accent-contrast: #14170F; /* text on top of accent-colored bg */

  --color-overlay: rgba(22, 24, 28, 0.9);
  --color-callout-bg: #1E3A1E;  /* deep forest green, used by the callout bar component */

  /* Category accents (used by the "Who We Serve" cards and pricing tiers) */
  --color-blue: #5B8FE0;
  --color-amber: #E0A458;
  --color-teal: #4FBFA5;
  --color-violet: #9B84E0;

  --color-cta-bg: #0F1A0F;  /* near-black deep green, used by the closing CTA section */

  /* Typography */
  --font-body: Arial, Helvetica, sans-serif;
  --font-heading: Georgia, "Times New Roman", serif;

  --fs-base: 1rem;
  --fs-sm: 0.875rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-2xl: 1.75rem;
  --fs-3xl: 2.25rem;
  --fs-4xl: 3rem;

  --lh-tight: 1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.7;

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

  /* Layout */
  --container-max: 1200px;
  --container-padding: 1.5rem;
  --nav-height: 76px;

  /* Effects */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);

  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
}

/* --------------------------------------------------------------------------
   3. Base Typography & Body
   -------------------------------------------------------------------------- */

body {
  background-color: var(--color-bg);
  color: var(--color-text-slate);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--color-text);
  line-height: var(--lh-tight);
  font-weight: 400;
  letter-spacing: 0.01em;
}

h1 { font-size: var(--fs-4xl); margin-bottom: var(--space-md); }
h2 { font-size: var(--fs-3xl); margin-bottom: var(--space-md); }
h3 { font-size: var(--fs-2xl); margin-bottom: var(--space-sm); }
h4 { font-size: var(--fs-xl); margin-bottom: var(--space-sm); }
h5 { font-size: var(--fs-lg); margin-bottom: var(--space-xs); }
h6 { font-size: var(--fs-base); margin-bottom: var(--space-xs); }

p {
  margin-bottom: var(--space-sm);
  color: var(--color-text-slate);
}

p:last-child {
  margin-bottom: 0;
}

a {
  transition: color var(--transition-fast);
}

strong, b {
  color: var(--color-text);
  font-weight: 700;
}

small {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-lg) 0;
}

::selection {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

/* Focus visibility for accessibility */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   4. Layout Helpers
   -------------------------------------------------------------------------- */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: 800px;
}

.container--wide {
  max-width: 1440px;
}

/* --------------------------------------------------------------------------
   5. Navigation Bar
   -------------------------------------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background-color: rgba(22, 24, 28, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--color-border);
}

.navbar__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.navbar__logo {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--color-text);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

.navbar__logo-icon {
  height: 38px;
  width: 38px;
  display: block;
  border-radius: var(--radius-sm);
}

.navbar__logo-accent {
  color: var(--color-accent);
}

.navbar__logo:hover {
  opacity: 0.85;
}

.navbar__links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.navbar__link {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-slate);
  padding: var(--space-2xs) 0;
  position: relative;
}

.navbar__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 0;
  height: 2px;
  background-color: var(--color-accent);
  transition: width var(--transition-base);
}

.navbar__link:hover,
.navbar__link--active {
  color: var(--color-text);
}

.navbar__link:hover::after,
.navbar__link--active::after {
  width: 100%;
}

.navbar__cta {
  flex-shrink: 0;
}

/* Hamburger toggle button (mobile) */
.navbar__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
}

.navbar__toggle-bar {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-text);
  border-radius: var(--radius-full);
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* Toggle state: when nav is open, add .navbar--open on .navbar via JS,
   and toggle aria-expanded on .navbar__toggle */
.navbar--open .navbar__toggle-bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.navbar--open .navbar__toggle-bar:nth-child(2) {
  opacity: 0;
}

.navbar--open .navbar__toggle-bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 860px) {
  /* backdrop-filter on .navbar creates a containing block for its
     position:fixed descendants, which would break the full-screen
     mobile menu below (it'd position relative to the navbar's 76px
     bar instead of the viewport). Disable it at this breakpoint. */
  .navbar {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-color: var(--color-bg);
  }

  .navbar__toggle {
    display: flex;
  }

  .navbar__links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background-color: var(--color-bg-alt);
    overflow-y: auto;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity var(--transition-base),
                transform var(--transition-base),
                visibility 0s linear var(--transition-base);
  }

  .navbar--open .navbar__links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--transition-base),
                transform var(--transition-base),
                visibility 0s linear 0s;
  }

  .navbar__links .navbar__link {
    padding: var(--space-sm) var(--container-padding);
    width: 100%;
    border-bottom: 1px solid var(--color-border);
  }

  .navbar__links .navbar__link::after {
    display: none;
  }

  .navbar__links .navbar__cta {
    padding: var(--space-sm) var(--container-padding);
  }

  .navbar__links .navbar__cta .btn {
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */

.footer {
  background-color: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
  padding-block: var(--space-2xl) var(--space-lg);
  margin-top: var(--space-3xl);
}

.footer__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--space-lg);
}

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

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

/* Live icon + wordmark lockup — replaces the old flat logo-full.png image
   so the footer brand mark can never again fail to load as a broken
   image. Reuses the same logo-icon.png as the navbar. */
.footer__brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin-bottom: var(--space-sm);
}

.footer__brand-row {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.footer__brand-icon {
  width: 36px;
  height: 36px;
  display: block;
}

.footer__brand-name {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.footer__brand-accent {
  color: var(--color-accent);
}

.footer__tagline {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  max-width: 32ch;
}

.footer__heading {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

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

.footer__list a {
  color: var(--color-text-slate);
  font-size: var(--fs-sm);
}

.footer__list a:hover {
  color: var(--color-accent);
}

.footer__bottom {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.footer__copyright {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

.footer__social {
  display: flex;
  gap: var(--space-sm);
}

.footer__social a {
  color: var(--color-text-muted);
}

.footer__social a:hover {
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   7. Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.85em 1.75em;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background-color var(--transition-fast),
              border-color var(--transition-fast),
              color var(--transition-fast),
              transform var(--transition-fast);
}

.btn:active {
  transform: translateY(1px);
}

/* Primary — filled lime green CTA */
.btn--primary {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  border-color: var(--color-accent);
}

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

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

/* Secondary — outline */
.btn--secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-text-slate);
}

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

.btn--secondary:active {
  border-color: var(--color-accent-active);
  color: var(--color-accent-active);
}

/* Ghost — text-only, minimal */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text-slate);
  border-color: transparent;
  padding-inline: 0.5em;
}

.btn--ghost:hover {
  color: var(--color-accent);
}

/* Size modifiers */
.btn--sm {
  font-size: 0.75rem;
  padding: 0.6em 1.25em;
}

.btn--lg {
  font-size: var(--fs-base);
  padding: 1em 2.25em;
}

.btn--full {
  width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   8. Cards
   -------------------------------------------------------------------------- */

.card {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.card--hover:hover {
  border-color: var(--color-accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.card__icon {
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.card__title {
  font-size: var(--fs-lg);
  color: var(--color-text);
  margin-bottom: var(--space-2xs);
}

/* Cards whose icon sits to the right of the title instead of stacked above
   it. Scoped to .card__header so it doesn't affect icon-only or
   title-only cards elsewhere that reuse .card__icon / .card__title. */
.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}

.card__header .card__title {
  margin-bottom: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.card__header .card__icon {
  margin-bottom: 0;
  flex-shrink: 0;
}

.card__body {
  color: var(--color-text-slate);
  font-size: var(--fs-sm);
}

/* Checklist-style card (About page differentiation grid): icon sits to the
   left of the text, top-aligned like a bullet point, instead of stacked
   above it. Scoped to .card--checklist so the default icon-above-text
   layout used elsewhere is unaffected. */
.card--checklist {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
}

.card--checklist .card__icon {
  margin-bottom: 0;
  margin-top: 2px;
  flex-shrink: 0;
}

.card--checklist .card__body {
  margin: 0;
}

.card__footer {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

/* Flat variant — no border, for use on already-bordered containers */
.card--flat {
  background-color: transparent;
  border: none;
  padding: 0;
}

/* Accent-bordered variant */
.card--accent {
  border-color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   9. Section Spacing Utilities
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--space-2xl);
}

.section--sm {
  padding-block: var(--space-xl);
}

.section--lg {
  padding-block: var(--space-3xl);
}

.section--alt {
  background-color: var(--color-bg-alt);
}

/* Margin utilities */
.mt-0 { margin-top: 0; }
.mt-xs { margin-top: var(--space-xs); }
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.mt-xl { margin-top: var(--space-xl); }

.mb-0 { margin-bottom: 0; }
.mb-xs { margin-bottom: var(--space-xs); }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

/* Padding utilities */
.p-0 { padding: 0; }
.p-sm { padding: var(--space-sm); }
.p-md { padding: var(--space-md); }
.p-lg { padding: var(--space-lg); }

/* Centers a block element with a max-width (e.g. .lead) within its parent */
.mx-auto { margin-inline: auto; }

/* --------------------------------------------------------------------------
   10. Generic Layout & Text Utilities
   -------------------------------------------------------------------------- */

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.flex-wrap { flex-wrap: wrap; }
.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.grid { display: grid; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 860px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
}

.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.text-accent { color: var(--color-accent); }
.text-muted { color: var(--color-text-muted); }
.text-white { color: var(--color-text); }

.fw-normal { font-weight: 400; }
.fw-bold { font-weight: 700; }

/* Prose lead-in — a slightly larger, roomier paragraph (mission statements,
   section intros) */
.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-slate);
  max-width: 70ch;
}

.eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}

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

.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-block: var(--space-lg);
}

/* --------------------------------------------------------------------------
   11. Responsive Type Scale (mobile adjustments)
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  :root {
    --fs-4xl: 2.25rem;
    --fs-3xl: 1.75rem;
    --fs-2xl: 1.5rem;
    --fs-xl: 1.2rem;
  }

  .container {
    --container-padding: 1.25rem;
  }

  .section {
    padding-block: var(--space-xl);
  }

  .section--lg {
    padding-block: var(--space-2xl);
  }
}

/* ==========================================================================
   PAGE-SPECIFIC STYLES BELOW
   Everything above this line is the shared global system (reset, variables,
   typography, nav, footer, buttons, cards, spacing/layout utilities) and
   applies across the whole site. Everything below is scoped to one page's
   content and named accordingly — new pages should add their own clearly
   commented block rather than growing the global section above.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared — Interior Page Hero
   A shorter, centered hero used at the top of interior pages (What We Do,
   How It Works, Pricing, About, Contact) — distinct from the full-height,
   left-aligned homepage .hero above.
   -------------------------------------------------------------------------- */

.page-hero {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--nav-height));
  padding-block: var(--space-3xl) var(--space-2xl);
  text-align: center;
}

@supports (min-height: 100dvh) {
  .page-hero {
    min-height: calc(100dvh - var(--nav-height));
  }
}

.page-hero__inner {
  width: 100%;
  max-width: 46rem;
  margin-inline: auto;
}

.page-hero__accent {
  display: block;
  width: 64px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--color-accent);
  margin: 0 auto var(--space-md);
}

.page-hero__headline {
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  margin-bottom: var(--space-md);
}

.page-hero__subheadline {
  font-size: var(--fs-lg);
  color: var(--color-text-slate);
  max-width: 60ch;
  margin-inline: auto;
}

/* Wider variant for longer subheadlines (e.g. Pricing) so the text settles
   into three balanced lines instead of wrapping into a short orphan line. */
.page-hero__subheadline--wide {
  max-width: 74ch;
}

/* Keeps a single sentence on one line (e.g. How It Works) instead of the
   browser wrapping it mid-sentence — reverts to normal wrapping on narrow
   viewports so it doesn't overflow the screen. */
.page-hero__subheadline-line {
  display: inline-block;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .page-hero__subheadline-line {
    display: inline;
    white-space: normal;
  }
}

@media (max-width: 640px) {
  .page-hero {
    padding-block: var(--space-2xl) var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   Shared — Section Eyebrow
   Small uppercase accent label introducing a section headline (e.g. the
   Agent Layer on What We Do).
   -------------------------------------------------------------------------- */

.section-eyebrow {
  display: block;
  font-size: var(--fs-3xl);
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   What We Do — Agent Layer
   Four-across cards, each an agent with a title, a short role tagline, and
   a bulleted list of what it actually does. A bordered "flow" strip above
   the grid shows how the four agents hand work off to one another.
   -------------------------------------------------------------------------- */

.agents-headline,
.intelligence-headline {
  max-width: none;
  white-space: nowrap;
  margin-bottom: var(--space-md);
}

@media (max-width: 640px) {
  .agents-headline,
  .intelligence-headline {
    white-space: normal;
  }
}

.agents-flow {
  display: flex;
  align-items: stretch;
  background-color: var(--color-callout-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: var(--space-lg);
}

.agents-flow__step {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--color-text-slate);
}

.agents-flow__arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-xs);
  font-style: normal;
  font-size: var(--fs-base);
  color: var(--color-accent);
}

.agent-cards {
  align-items: stretch;
}

/* The agent card titles use white-space: nowrap, so this range needs to
   collapse to 2 columns earlier than the generic .grid-4 breakpoint (860px)
   — otherwise between ~860–1100px each of the 4 columns is too narrow and
   the titles clip. */
@media (min-width: 561px) and (max-width: 1100px) {
  .agent-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Client-type cards (Pricing page) reuse the .agent-card look, but unlike
   the Agent Layer grid these have no list body and short, uneven title
   lengths ("Retailer — Independent" vs "Brand — National"). Stretching
   them into equal grid columns left the short-title cards looking baggy
   and the long-title one looking squeezed, so instead each card sizes to
   its own content and the row wraps naturally at narrow widths. */
/* Shared label above the Client Type row and the Rate Card (Pricing page) —
   same font/case treatment as the "Intelligence Layer" / "Agent Layer"
   eyebrows (.section-eyebrow), just a step down in size. */
.pricing-label {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-2xl);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.client-type-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-lg);
}

.client-type-cards .agent-card {
  flex: 0 0 auto;
  width: auto;
}

.client-type-cards .agent-card__header {
  align-items: center;
  text-align: center;
}

.client-type-cards .agent-card__title-row {
  justify-content: center;
}

@media (max-width: 640px) {
  .client-type-cards {
    justify-content: center;
  }

  .client-type-cards .agent-card {
    width: 100%;
  }
}

.agent-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-cta-bg);
  border: 1px solid rgba(151, 188, 98, 0.25);
  border-radius: var(--radius-md);
  overflow: hidden;
  padding: 0;
}

.agent-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  background-color: var(--color-callout-bg);
  padding: var(--space-md);
}

.agent-card__title-row {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.agent-card__icon {
  flex-shrink: 0;
  color: #fff;
}

.agent-card__icon svg {
  display: block;
  width: 24px;
  height: 24px;
}

.agent-card__title {
  font-family: var(--font-heading);
  font-size: var(--fs-base);
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  margin-bottom: 0;
}

.agent-card__subtitle {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--color-accent-hover);
  margin: 0;
}

.agent-card__list {
  list-style: none;
  margin: 0;
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.agent-card__list li {
  position: relative;
  padding-left: var(--space-md);
  color: var(--color-text-slate);
  font-size: var(--fs-sm);
}

.agent-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

@media (max-width: 640px) {
  .agents-flow {
    flex-direction: column;
  }

  .agents-flow__step,
  .agents-flow__arrow {
    width: 100%;
  }

  .agents-flow__arrow {
    padding: var(--space-2xs) var(--space-md);
    transform: rotate(90deg);
  }
}

/* --------------------------------------------------------------------------
   Shared — Notice Box
   A bordered callout for a single important note (pricing caveats, policy
   asides, etc.) — distinct from the full-bleed homepage callout-bar.
   -------------------------------------------------------------------------- */

.notice-box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}

.notice-box__icon {
  color: var(--color-accent);
  flex-shrink: 0;
  margin-top: 0.15em;
}

.notice-box__text {
  color: var(--color-text-slate);
  margin: 0;
}

.notice-box--amber {
  border-left-color: var(--color-amber);
}

.notice-box--amber .notice-box__icon {
  color: var(--color-amber);
}

@media (max-width: 560px) {
  .notice-box {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* --------------------------------------------------------------------------
   Homepage — Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--nav-height));
  padding-block: clamp(4rem, 9vw, 7.5rem) clamp(3rem, 6vw, 5rem);
}

@supports (min-height: 100dvh) {
  .hero {
    min-height: calc(100dvh - var(--nav-height));
  }
}

/* Rounded green glows — ambient brand accent behind the hero copy.
   Hidden from assistive tech, never intercept clicks. */
.hero__decor {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--color-accent) 0%, rgba(151, 188, 98, 0.55) 35%, transparent 70%);
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}

/* Right glow: peak saturation sits right on the page's right edge. */
.hero__decor--right {
  top: -14rem;
  right: -23rem;
  width: 46rem;
  height: 46rem;
  opacity: 0.7;
}

/* Left glow: peak saturation sits right on the page's left edge, vertically
   centered on the bottom of the headline. */
.hero__decor--left {
  top: -0.625rem;
  left: -23rem;
  width: 46rem;
  height: 46rem;
  opacity: 0.55;
}

@media (max-width: 900px) {
  .hero__decor--right {
    top: -10rem;
    right: -15rem;
    width: 30rem;
    height: 30rem;
    opacity: 0.55;
  }

  .hero__decor--left {
    top: -1.19rem;
    left: -15rem;
    width: 30rem;
    height: 30rem;
    opacity: 0.45;
  }
}

@media (max-width: 560px) {
  .hero__decor--right {
    top: -8rem;
    right: -11rem;
    width: 22rem;
    height: 22rem;
    opacity: 0.4;
  }

  .hero__decor--left {
    top: 3.75rem;
    left: -11rem;
    width: 22rem;
    height: 22rem;
    opacity: 0.35;
  }
}

/* Subtle grain texture layered over the glow — adds tactile depth to the
   dark background. Purely ambient: hidden from assistive tech, never
   intercepts clicks. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.045;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.hero__eyebrow {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-md);
}

.hero__headline {
  font-size: clamp(2.25rem, 1.5rem + 3.5vw, 4rem);
  margin-bottom: var(--space-md);
}

.hero__subheadline {
  font-size: var(--fs-lg);
  color: var(--color-text-slate);
  max-width: 74ch;
  margin-bottom: var(--space-xl);
}

.hero__ctas {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

/* Secondary action as a plain text link rather than a second bordered
   pill button — two identical-shape buttons side by side reads as a
   generic template default. */
.hero__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.2em;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.hero__link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.hero__link-arrow {
  transition: transform var(--transition-fast);
}

.hero__link:hover .hero__link-arrow {
  transform: translateX(3px);
}

@media (max-width: 640px) {
  .hero {
    padding-block: var(--space-2xl) var(--space-xl);
  }
}

/* --------------------------------------------------------------------------
   Homepage — Callout Bar
   Full-width stat banner. Generic enough to reuse on other pages if needed.
   -------------------------------------------------------------------------- */

.callout-bar {
  background-color: var(--color-callout-bg);
  border-left: 3px solid var(--color-accent);
  padding-block: var(--space-lg);
}

.callout-bar__inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-md);
}

.callout-bar__stat {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(2.25rem, 1.75rem + 2vw, 3.25rem);
  color: var(--color-accent);
  line-height: 1;
  flex-shrink: 0;
  vertical-align: middle;
}

.callout-bar__text {
  color: var(--color-text);
  font-size: var(--fs-lg);
  margin: 0;
}

/* Keep the stat + text together on one line whenever there's room —
   the previous max-width on .callout-bar__text was capping it below the
   phrase's natural width and forcing an unnecessary wrap even on wide
   screens. Below this breakpoint there isn't enough width for the full
   phrase at a legible size, so it's allowed to wrap there instead of
   forcing an unreadably small font or a horizontal scrollbar. */
@media (min-width: 641px) {
  .callout-bar__inner {
    flex-wrap: nowrap;
  }

  .callout-bar__text {
    white-space: nowrap;
  }
}

/* Full-line variant: one centered lime statement instead of a stat + caption
   pair (e.g. "Typical AI implementation: 2–3 months · Our deployment: ..."). */
.callout-bar__statement {
  color: var(--color-accent);
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.375rem);
  text-align: center;
  max-width: 900px;
  margin-inline: auto;
}

.callout-bar__statement-highlight {
  display: block;
  margin-top: var(--space-2xs);
  font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
}

@media (max-width: 640px) {
  .callout-bar {
    padding-block: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   Homepage — Who We Serve
   -------------------------------------------------------------------------- */

.who-card {
  border-top-width: 3px;
  border-top-style: solid;
}

.who-card--retailers {
  border-top-color: var(--color-accent);
}

.who-card--brands {
  border-top-color: var(--color-teal);
}

/* --------------------------------------------------------------------------
   Homepage — Closing CTA
   -------------------------------------------------------------------------- */

.closing-cta {
  position: relative;
  overflow: hidden;
  background-color: var(--color-cta-bg);
  text-align: center;
}

/* Same rounded green-glow treatment as the homepage hero, scaled down to
   fit this shorter box. Hidden from assistive tech, never intercept clicks. */
.closing-cta__decor {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--color-accent) 0%, rgba(151, 188, 98, 0.55) 35%, transparent 70%);
  filter: blur(70px);
  z-index: 0;
  pointer-events: none;
}

.closing-cta__decor--right {
  top: -12rem;
  right: -14rem;
  width: 32rem;
  height: 32rem;
  opacity: 0.6;
}

.closing-cta__decor--left {
  bottom: -12rem;
  left: -14rem;
  width: 32rem;
  height: 32rem;
  opacity: 0.5;
}

@media (max-width: 900px) {
  .closing-cta__decor--right,
  .closing-cta__decor--left {
    width: 22rem;
    height: 22rem;
  }

  .closing-cta__decor--right {
    top: -9rem;
    right: -10rem;
  }

  .closing-cta__decor--left {
    bottom: -9rem;
    left: -10rem;
  }
}

@media (max-width: 560px) {
  .closing-cta__decor--right,
  .closing-cta__decor--left {
    width: 16rem;
    height: 16rem;
    opacity: 0.45;
  }

  .closing-cta__decor--right {
    top: -6rem;
    right: -7rem;
  }

  .closing-cta__decor--left {
    bottom: -6rem;
    left: -7rem;
  }
}

.closing-cta .container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.closing-cta__headline {
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  max-width: 20ch;
  margin-bottom: var(--space-md);
}

/* Wider variant for a full closing sentence/statement rather than a short question */
.closing-cta__headline--wide {
  max-width: 40ch;
}

.closing-cta__text {
  max-width: 58ch;
  margin-bottom: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Pricing — Rate Card
   A single detailed rate card: eyebrow + segment title + descriptor badges,
   a module-by-module table (green), and a separate amber-bordered add-on
   block for ad placement with its warning footnote attached directly below.
   -------------------------------------------------------------------------- */

.rate-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
  padding: var(--space-lg);
}

.rate-card__heading-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}

.rate-card__title {
  margin-bottom: 0;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
}

.rate-card__tier-badge {
  flex-shrink: 0;
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--color-text);
  background-color: var(--color-accent-active);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
  white-space: nowrap;
}

.rate-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-bottom: var(--space-lg);
}

.rate-card__badge {
  font-size: var(--fs-sm);
  color: var(--color-text-slate);
  background-color: var(--color-bg-alt-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-2xs) var(--space-sm);
}

.rate-card__table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-sm);
  background-color: var(--color-callout-bg);
}

.rate-card__table {
  width: 100%;
  min-width: 600px;
  table-layout: fixed;
  border-collapse: collapse;
}

.rate-card__table col.col-module  { width: 38%; }
.rate-card__table col.col-setup   { width: 19%; }
.rate-card__table col.col-monthly { width: 24%; }
.rate-card__table col.col-status  { width: 19%; }

.rate-card__table th,
.rate-card__table td {
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid rgba(151, 188, 98, 0.18);
  vertical-align: middle;
}

.rate-card__table thead th {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  border-bottom: 1px solid rgba(151, 188, 98, 0.18);
}

.rate-card__table tbody th {
  color: var(--color-text);
  font-weight: 700;
}

.rate-card__table tbody td {
  color: var(--color-text-slate);
  font-weight: 700;
}

.rate-card__table tbody tr:last-child th,
.rate-card__table tbody tr:last-child td {
  border-bottom: none;
}

.rate-card__row-note {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* Best-value row (Full Engine bundle): tinted background + left accent bar. */
.rate-card__table tbody tr.is-best-value {
  background-color: rgba(151, 188, 98, 0.14);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.rate-card__table tbody tr.is-best-value th,
.rate-card__table tbody tr.is-best-value td {
  color: var(--color-accent-hover);
}

/* Required-layer row (Revenue Intelligence): same tinted background + left
   accent bar as the best-value row, but text stays the default white/slate
   instead of shifting to the accent color — a quieter version of the same
   "this row is different" treatment. */
.rate-card__table tbody tr.is-required-layer {
  background-color: rgba(151, 188, 98, 0.14);
  box-shadow: inset 3px 0 0 var(--color-accent);
}

.status-pill {
  display: inline-block;
  font-size: var(--fs-sm);
  font-weight: 700;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.status-pill--neutral {
  background-color: var(--color-bg-alt-2);
  color: var(--color-text-slate);
  border: 1px solid var(--color-border);
}

.status-pill--required {
  background-color: var(--color-accent-active);
  color: var(--color-text-slate);
}

.status-pill--best {
  background-color: var(--color-accent);
  color: var(--color-accent-contrast);
  font-style: italic;
}

.status-pill--addon {
  background-color: transparent;
  color: var(--color-amber);
  border: 1px solid var(--color-amber);
}

/* Ad Placement add-on block: separate amber-bordered container that sits
   directly beneath the main table, with its warning footnote fused on. */
.rate-card__addon {
  margin-top: var(--space-lg);
  border: 1px solid var(--color-amber);
  border-radius: var(--radius-sm);
  background-color: rgba(224, 164, 88, 0.08);
  overflow: hidden;
}

.rate-card__addon .rate-card__table th,
.rate-card__addon .rate-card__table td {
  border-bottom: none;
}

.rate-card__addon .rate-card__table tbody th {
  color: var(--color-amber);
}

.rate-card__addon-note {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid rgba(224, 164, 88, 0.35);
  font-size: var(--fs-sm);
  color: var(--color-text-slate);
}

.rate-card__addon-note svg {
  flex-shrink: 0;
  color: var(--color-amber);
  margin-top: 2px;
}

@media (max-width: 640px) {
  .rate-card {
    padding: var(--space-md);
  }

  /* Below 640px there isn't room for four table columns side by side, so
     each row becomes a stacked mini-card: module name + note on top, then
     labelled Setup/Monthly/Status lines underneath (label via data-label). */
  .rate-card__table-wrap {
    overflow-x: visible;
  }

  .rate-card__table {
    display: block;
    min-width: 0;
    table-layout: auto;
  }

  .rate-card__table col {
    width: auto !important;
  }

  .rate-card__table thead {
    display: none;
  }

  .rate-card__table tbody {
    display: block;
    width: 100%;
  }

  .rate-card__table tbody tr {
    display: block;
    width: 100%;
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid rgba(151, 188, 98, 0.18);
  }

  .rate-card__table tbody tr:last-child {
    border-bottom: none;
  }

  .rate-card__table th[scope="row"] {
    display: block;
    padding: 0 0 var(--space-xs);
    border: none;
  }

  .rate-card__table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-3xs) 0;
    border: none;
    font-size: var(--fs-sm);
  }

  .rate-card__table tbody td::before {
    content: attr(data-label);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
  }

  .rate-card__addon .rate-card__table tbody tr {
    padding: var(--space-sm) var(--space-md) var(--space-2xs);
  }
}

/* --------------------------------------------------------------------------
   How It Works — Timeline
   Vertical stepped list with numbered circles connected by a single line.
   The line is one continuous pseudo-element on the list itself (not per
   step) so it stays correct regardless of how tall each step's text is —
   circles sit on top with an opaque fill so the line appears to run
   behind them.
   -------------------------------------------------------------------------- */

.timeline {
  position: relative;
  list-style: none;
  max-width: 760px;
}

.timeline::before {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 23px;
  width: 2px;
  background-color: var(--color-border);
}

.timeline__step {
  position: relative;
  display: flex;
  gap: var(--space-md);
}

.timeline__step + .timeline__step {
  margin-top: var(--space-xl);
}

.timeline__number {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-bg-alt);
  border: 2px solid var(--color-accent);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--fs-lg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.timeline__content {
  padding-top: 0.4rem;
}

.timeline__title {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-2xs);
}

.timeline__desc {
  color: var(--color-text-slate);
  margin-bottom: 0;
}

@media (max-width: 480px) {
  .timeline__number {
    width: 40px;
    height: 40px;
    font-size: var(--fs-base);
  }

  .timeline::before {
    left: 19px;
  }

  .timeline__step + .timeline__step {
    margin-top: var(--space-lg);
  }
}

/* --------------------------------------------------------------------------
   About — Founder Section
   Two-column bio block: fixed-size photo placeholder + text. Stacks on
   mobile with the photo centered above the bio.
   -------------------------------------------------------------------------- */

.founder-section {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xl);
}

.founder-section__photo {
  flex-shrink: 0;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background-color: var(--color-bg-alt);
}

.founder-section__photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-section__content {
  flex: 1;
  min-width: 0;
}

.founder-section__name {
  margin-bottom: var(--space-3xs);
}

.founder-section__title {
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-md);
}

.founder-section__bio {
  color: var(--color-text-slate);
}

@media (max-width: 640px) {
  .founder-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-md);
  }
}

/* --------------------------------------------------------------------------
   About — Testimonials
   Eyebrow + headline (matches the Agent Layer / Intelligence Layer pattern),
   then a grid of pull-quote cards. Grid is auto-fit so it reads as one
   centered wide card today and reflows cleanly once more testimonials
   are added.
   -------------------------------------------------------------------------- */

.testimonials-headline {
  max-width: 60ch;
  margin-inline: auto;
  margin-bottom: var(--space-xl);
}

.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
  text-align: left;
}

.testimonial {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-xl);
}

.testimonial__mark {
  display: block;
  font-family: var(--font-heading);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--color-accent);
  margin-bottom: var(--space-2xs);
}

.testimonial__quote {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.testimonial__attribution {
  display: block;
  font-style: normal;
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Contact — Form
   -------------------------------------------------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.form-field__label {
  font-size: var(--fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
}

.form-field__required {
  color: var(--color-accent);
  margin-left: 0.2em;
}

.form-field input[type="text"],
.form-field input[type="email"],
.form-field textarea {
  background-color: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-sm);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  transition: border-color var(--transition-fast);
}

.form-field input[type="text"]::placeholder,
.form-field input[type="email"]::placeholder,
.form-field textarea::placeholder {
  color: var(--color-text-muted);
}

.form-field input[type="text"]:focus,
.form-field input[type="email"]:focus,
.form-field textarea:focus {
  border-color: var(--color-accent);
}

.form-field textarea {
  min-height: 180px;
  resize: vertical;
  font-family: inherit;
}

.contact-form__submit {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.contact-form__note {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-lg);
}

.contact-form__note a {
  color: var(--color-accent);
}

.contact-form__note a:hover {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .contact-form__submit {
    align-self: stretch;
  }
}

/* --------------------------------------------------------------------------
   Blog — Index & Post Pages
   Listing cards on blog.html, plus post meta/prose refinements for the
   individual blog-*.html post pages. Reuses .page-hero, .card, .card--hover,
   .section, .container--narrow, .eyebrow, and .closing-cta from the global
   system above — only the pieces unique to blog content live here.
   -------------------------------------------------------------------------- */

/* Listing grid card — built on top of .card / .card--hover rather than
   duplicating their border/background/hover behavior. */
.blog-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.blog-card__tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

.blog-card__title {
  font-size: var(--fs-lg);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.blog-card__excerpt {
  color: var(--color-text-slate);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-md);
  flex: 1;
}

.blog-card__meta {
  color: var(--color-text-muted);
  font-size: 0.75rem;
  margin-bottom: var(--space-sm);
}

/* Same visual language as .hero__link (arrow shifts right on hover) but
   named for this component per this file's own convention of scoping new
   page additions to their own block instead of reusing another
   component's BEM element. */
.blog-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text);
  font-weight: 700;
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 0.2em;
  align-self: flex-start;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.blog-card__link:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
}

.blog-card__link-arrow {
  transition: transform var(--transition-fast);
}

.blog-card__link:hover .blog-card__link-arrow {
  transform: translateX(3px);
}

/* Individual post page — header block above the .container--narrow prose
   body (title, meta row, optional back-to-blog link). */
.blog-post__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--space-lg);
}

.blog-post__back:hover {
  color: var(--color-accent);
}

.blog-post__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--fs-sm);
  margin-bottom: var(--space-lg);
}

.blog-post__meta-divider {
  width: 3px;
  height: 3px;
  border-radius: var(--radius-full);
  background-color: var(--color-text-muted);
}

/* Prose refinements for post bodies — headings/paragraphs/links already
   inherit correct styling from the global typography rules; this only adds
   the handful of elements posts need that the rest of the site doesn't
   (blockquotes, a labeled list style, inline emphasis on stat callouts). */
.blog-post__body h2 {
  margin-top: var(--space-xl);
}

.blog-post__body h3 {
  margin-top: var(--space-lg);
}

.blog-post__body p {
  color: var(--color-text-slate);
}

.blog-post__body ul,
.blog-post__body ol {
  margin: 0 0 var(--space-sm) var(--space-md);
  color: var(--color-text-slate);
}

.blog-post__body ul {
  list-style: disc;
}

.blog-post__body ol {
  list-style: decimal;
}

.blog-post__body li {
  margin-bottom: var(--space-xs);
}

.blog-post__body blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
  color: var(--color-text);
  font-family: var(--font-heading);
  font-size: var(--fs-lg);
}

.blog-post__body a {
  color: var(--color-accent);
  border-bottom: 1px solid transparent;
}

.blog-post__body a:hover {
  border-bottom-color: var(--color-accent);
}