/* ==========================================================================
   VolleySheet marketing site
   Tokens are documented in docs/design.md. Do not introduce a value here that
   isn't in that file.
   ========================================================================== */

/* --- Font ---------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;              /* variable: only 400 and 700 are used */
  font-display: swap;
  src: url('../fonts/inter-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  --c-primary:       #16a34a;
  --c-primary-hover: #15803d;
  --c-accent-text:   #166534;  /* AA on white AND on --c-surface-alt */
  --c-link-blue:     #1f5edc;  /* the hero's inline brand emphasis (5.7:1) */
  --c-navy:          #0f172a;

  --c-ink:           #2b2b2b;
  --c-body:          #272727;
  --c-muted:         #6b7280;

  --c-surface:       #ffffff;
  --c-surface-alt:   #f2f2f2;
  --c-border:        #e2dbdb;

  --w-content: 1200px;
  --w-prose:   68ch;
  --w-phone-fig: 360px; /* display width of phone-format screenshots */
  --c-utility: #000000; /* utility bar; black, per the reference design */
  --radius:    12px;
  /* Sticky header height, and the value every anchor offsets against. The nav
     sits under the logo below lg and wraps to fewer rows as the viewport grows,
     so this steps down at the named breakpoints — see § 3. It is deliberately
     the worst case at each step: too much offset drops a heading lower than it
     needs to be, too little hides it under the bar. */
  --h-header:  80px;    /* base: one row — logo + the nav toggle */
  --h-header-pad: 18px; /* centres a 44px row in the 80px desktop bar */

  --space-section: clamp(3rem, 8vw, 6rem);
  --space-gutter:  clamp(1rem, 4vw, 2rem);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', sans-serif;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: clamp(1rem, 0.5vw + 0.9rem, 1.125rem);
  line-height: 1.6;
  color: var(--c-body);
  background: var(--c-surface);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { color: var(--c-ink); font-weight: 700; line-height: 1.15; margin: 0 0 0.5em; }
h1 { font-size: clamp(2rem, 5vw + 1rem, 3.5rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.5rem, 3vw + 0.75rem, 2.25rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.25rem, 2vw + 0.5rem, 1.5rem); }
p  { margin: 0 0 1rem; max-width: var(--w-prose); }
ul { margin: 0 0 1rem; padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }
a  { color: var(--c-accent-text); }
:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 3px; border-radius: 4px; }

/* The header is sticky, so an in-page anchor would otherwise land its heading
   underneath it. Offset every anchor target by the header height plus a gap. */
/* With JS off the panel never collapses, so below sm the header is the full
   two-row nav rather than logo + toggle, and anchors must clear that instead.
   A class, not html.no-js, so it stays at :root's specificity and the
   breakpoint overrides below still win at sm and up. */
.no-js { --h-header: 176px; }

[id] { scroll-margin-top: calc(var(--h-header) + 1rem); }

.skip-link {
  /* fixed, not absolute: an absolutely-positioned skip link lands at the top of
     the document and stays off-screen when the page is already scrolled */
  position: fixed; left: 0; top: -100%;
  background: var(--c-navy); color: #fff; padding: 0.75rem 1.25rem;
  z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip-link:focus { top: 0; }

/* --- Layout -------------------------------------------------------------- */
.container {
  max-width: var(--w-content);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}
.section { padding-block: var(--space-section); }
.section--alt  { background: var(--c-surface-alt); }
.section--navy { background: var(--c-navy); color: #e2e8f0; }
.section--navy h2, .section--navy h3 { color: #fff; }
/* Green link text is unreadable on navy; links in dark bands are white. */
.section--navy a { color: #fff; }
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.center { text-align: center; }
.text-left { text-align: left; }
.mt-xl { margin-top: clamp(2rem, 5vw, 3rem); }
.figure-plain { margin: 0; }
.center p { margin-inline: auto; }
.lead {
  font-size: clamp(1.125rem, 1vw + 1rem, 1.375rem);
  color: var(--c-body);
}
.section--navy .lead { color: #cbd5e1; }
.eyebrow {
  font-size: 0.875rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--c-accent-text); margin-bottom: 0.75rem;
}

/* --- Buttons ------------------------------------------------------------- */
/* 20px/700 keeps white-on-green inside the WCAG large-text threshold.
   Do not reduce the size or weight — see docs/design.md § 1. */
.btn {
  display: inline-block;
  font: inherit; font-size: 1.25rem; font-weight: 700;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  text-decoration: none;
  min-height: 44px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.btn--primary { background: var(--c-primary); color: #fff; border: 1.5px solid var(--c-primary); }
.btn--primary:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.btn--secondary { background: #fff; color: var(--c-ink); border: 1.5px solid var(--c-border); }
.btn--secondary:hover { border-color: var(--c-ink); }
.btn-row {
  display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem;
}
.center .btn-row { justify-content: center; }

/* --- Utility bar --------------------------------------------------------- */
/* A thin black strip above the header for the things that aren't the pitch:
   signing in, and the social accounts. Deliberately NOT sticky — it is chrome
   you see on arrival, and keeping it out of the sticky bar is what lets the
   sticky part stay short on a phone. */
.utility-bar { background: var(--c-utility); }
.utility-bar .container {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 0.5rem;
}
.utility-bar a {
  color: #e2e8f0; text-decoration: none;
  font-size: 0.75rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.06em;
  /* 44px minimum tap target in BOTH axes (docs/design.md § 3), even though the
     bar reads thin — the text is small, the target is not. "Login" only measures
     40px wide at 0.75rem, so the width has to be asserted, not assumed. */
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.375rem; min-height: 44px; min-width: 44px;
}
.utility-bar a:hover { color: #fff; text-decoration: underline; }
.utility-bar svg { width: 14px; height: 14px; flex: none; }
/* Icon-only: the accessible name lives on the <a>, the glyph is aria-hidden. */
.utility-bar a.social svg { width: 17px; height: 17px; }

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--c-navy);
  padding-block: var(--h-header-pad);
}
/* Three children: logo, nav, CTA. The CTA is a sibling of the logo rather than
   a child of <nav> so the two can share the top row while the links take a row
   of their own on phones — docs/patterns.md § Header nav.

   Base is the phone layout: two rows, nothing hidden, no menu.

   The nav takes order:3 to reach the second row, so on phones the CTA is
   painted on the first row while still following the links in the DOM. Tab and
   screen-reader order stay logo -> links -> CTA, which is the order that reads
   correctly; only the CTA's position moves. */
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 0.5rem; row-gap: 0.25rem;
}
/* 44px minimum tap target (docs/design.md § 3) */
.site-header .container > a { display: inline-flex; align-items: center; min-height: 44px; }
.site-header img { width: 110px; }
/* Below sm the nav and the CTA collapse behind the toggle. Three items will not
   share a 320px row — logo, CTA and toggle measure 304px before gaps — so the
   CTA comes down into the panel rather than the header keeping two rows. */
.nav-toggle {
  order: 1;
  display: inline-flex; align-items: center; gap: 0.5rem;
  min-height: 44px; padding: 0.5rem 0.25rem;
  background: none; border: 0; cursor: pointer;
  color: #e2e8f0; font: inherit;
  font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.nav-toggle:hover { color: #fff; }
.nav-toggle svg { width: 22px; height: 22px; }

.site-nav {
  order: 3; width: 100%;
  display: flex; align-items: center; flex-wrap: wrap;
  /* Grouped from the left rather than spread edge to edge: when the row wraps,
     space-between strands two items at opposite sides and they stop reading as
     one menu. */
  justify-content: flex-start; gap: 0.25rem 1.125rem;
}
/* Collapsed by default below sm; the markup still carries every link. */
.site-header[data-nav="closed"] .site-nav,
.site-header[data-nav="closed"] .btn { display: none; }
.site-header[data-nav="open"] .site-nav {
  flex-direction: column; align-items: stretch; gap: 0;
}
.site-header[data-nav="open"] .btn {
  order: 4; width: 100%; justify-content: center; margin-block: 0.5rem 0.25rem;
}
/* No JS, no toggle — so the panel must not stay collapsed. The header ships
   data-nav="closed" (that is the state at first paint, which is what keeps the
   collapse off the CLS budget), and these put it back when the class-flip in
   <head> never ran. */
.no-js .nav-toggle { display: none; }
.no-js .site-header[data-nav="closed"] .site-nav { display: flex; }
.no-js .site-header[data-nav="closed"] .btn { display: inline-flex; }
.site-nav a {
  color: #e2e8f0; text-decoration: none; font-size: 0.8125rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.04em;
  padding-block: 0.5rem;
  /* 44px minimum tap target (docs/design.md § 3) */
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-nav a:hover { color: #fff; text-decoration: underline; }
/* The page you are on. Weight and colour carry it — no underline, which would
   compete with the hover affordance, and no highlight. 700 is one of the two
   weights the font ships with (docs/design.md § 2). */
.site-nav a[aria-current] { color: #fff; font-weight: 700; }
.site-header .btn {
  font-size: 0.875rem; padding: 0.5rem 0.75rem; min-height: 44px; color: #fff;
}
/* At 16px the button text loses the large-text contrast exemption, so the
   header CTA uses the darker green (5.0:1 with white) — docs/design.md § 1. */
.site-header .btn--primary {
  background: var(--c-primary-hover); border-color: var(--c-primary-hover);
}
.site-header .btn--primary:hover { text-decoration: underline; }

/* sm and up: no disclosure — the links show, and the toggle goes away. Hiding
   four links that fit behind a tap trades one-tap access for about 40px; see
   docs/patterns.md § Header nav.

   --h-header steps with the rows below. It is the worst case at each tier: over-
   offsetting an anchor drops a heading lower than needed, under-offsetting hides
   it under the sticky bar. Only the sticky header counts — the utility bar
   scrolls away. */
@media (min-width: 480px) {
  /* At 480 itself the four labels still need two lines: they want about 469px
     and have 448. One line only from roughly 530. */
  :root { --h-header: 176px; }
  .nav-toggle { display: none; }
  .site-header[data-nav="closed"] .site-nav,
  .site-header[data-nav="closed"] .btn { display: flex; }
  .site-header[data-nav="closed"] .btn { display: inline-flex; }
}
@media (min-width: 768px) { :root { --h-header: 128px; } }  /* nav on one row */

/* lg and up: the whole header fits one row — logo | links | CTA. Four uppercase
   labels led by "Automatic Scoresheets" need about 830px alongside the logo and
   the CTA, so lg is the first named breakpoint that holds them. */
@media (min-width: 1024px) {
  :root { --h-header: 80px; }
  .site-header .container { flex-wrap: nowrap; gap: 1rem; }
  .site-header img { width: 130px; }
  .site-nav {
    order: 0; width: auto;
    justify-content: flex-end; gap: clamp(0.75rem, 1.6vw, 1.5rem);
  }
  .site-nav a { font-size: 0.875rem; padding-inline: 0.125rem; }
  .site-header .btn { font-size: 1rem; padding: 0.5rem 1rem; }
}

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 7vw, 5rem) clamp(2rem, 5vw, 3.5rem); }
.hero .lead { margin-bottom: 0; }
.hero-figure { margin: clamp(2rem, 5vw, 3rem) auto 0; max-width: 900px; }
.hero-figure img { border-radius: var(--radius); box-shadow: 0 10px 40px rgb(15 23 42 / 0.15); }

/* --- Contrast band ------------------------------------------------------- */
.compare {
  display: grid; gap: clamp(2rem, 5vw, 3rem);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) { .compare { grid-template-columns: 1fr 1fr; } }
.compare figure { margin: 0; text-align: center; }
.compare img { border-radius: var(--radius); margin-inline: auto; }
.compare figcaption {
  margin-top: 1.25rem; font-size: 1.125rem; font-weight: 700; color: #fff;
}
.compare .mark { display: block; font-size: 1.75rem; line-height: 1; margin-top: 1rem; }
.mark--no  { color: #f87171; }
.mark--yes { color: #4ade80; }

/* --- Steps --------------------------------------------------------------- */
.steps { display: grid; gap: 2rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: step; }
.step::before {
  content: counter(step);
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; margin-bottom: 1rem;
  background: var(--c-primary); color: #fff;
  font-weight: 700; border-radius: 50%;
}
.step h3 { margin-bottom: 0.35rem; }
.step p { margin: 0; }

/* --- Feature cards ------------------------------------------------------- */
.cards { display: grid; gap: clamp(1.5rem, 3vw, 2rem); grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, 1fr); } }
.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column;
}
.card img { width: 100%; border-bottom: 1px solid var(--c-border); }
.card-body { padding: 1.25rem; }
.card h3 { font-size: 1.125rem; margin-bottom: 0.35rem; }
.card p { font-size: 0.9375rem; color: var(--c-body); margin-bottom: 0.75rem; }
.note {
  font-size: 0.9375rem; font-weight: 700; color: var(--c-accent-text);
  display: flex; gap: 0.5rem; align-items: flex-start; margin: 0;
}
.note::before { content: '✓'; flex: none; }

/* --- Split (audience) ---------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 3.5rem); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } }
.split img { border-radius: var(--radius); box-shadow: 0 8px 30px rgb(15 23 42 / 0.12); }
.ticks { list-style: none; padding: 0; }
.ticks li { display: flex; gap: 0.6rem; align-items: flex-start; }
.ticks li::before { content: '✓'; color: var(--c-accent-text); font-weight: 700; flex: none; }

/* Phone-format screenshots read as phones, not half-page figures */
.figure-phone { max-width: var(--w-phone-fig); margin-inline: auto; }

/* --- Quote --------------------------------------------------------------- */
.quote {
  border-left: 4px solid var(--c-primary);
  padding: 0.5rem 0 0.5rem 1.5rem;
  margin: 0 auto;
  max-width: var(--w-prose);
  font-size: clamp(1.125rem, 1vw + 1rem, 1.375rem);
}
.quote p:last-child { margin-bottom: 0; }
.quote cite { display: block; margin-top: 0.75rem; font-size: 1rem; font-style: normal; color: var(--c-muted); }

/* --- Pricing ------------------------------------------------------------- */
.tiers { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
@media (min-width: 640px) { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .tiers { grid-template-columns: repeat(4, 1fr); } }
.tier {
  border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 1.5rem; background: var(--c-surface); text-align: center;
}
.tier .price { font-size: 2rem; font-weight: 700; color: var(--c-ink); line-height: 1.1; }
.tier .price span { font-size: 1rem; font-weight: 400; color: var(--c-muted); }
.tier .size { margin: 0.5rem 0 0; color: var(--c-body); font-size: 0.9375rem; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--c-navy); color: #cbd5e1; padding-block: clamp(2.5rem, 6vw, 4rem); }
.site-footer img { width: 150px; margin-bottom: 1rem; }
.site-footer a {
  color: #e2e8f0;
  display: inline-flex; align-items: center; min-height: 44px;
}
.site-footer p { font-size: 0.9375rem; }
.footer-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-grid h2 { font-size: 1rem; color: #fff; margin-bottom: 0.75rem; }
.footer-grid ul { list-style: none; padding: 0; }
.footer-grid li { margin-bottom: 0.5rem; font-size: 0.9375rem; }
.footer-bottom {
  border-top: 1px solid #1e293b; margin-top: 2.5rem; padding-top: 1.5rem;
  font-size: 0.875rem; color: #94a3b8;
}
.footer-bottom p { margin: 0; max-width: none; }

/* --- Motion -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Classic layout — a faithful port of the live volleysheet.com page.
   Measurements taken from the running site; see docs/reference-current-site.md.
   Deviations are limited to accessibility fixes, noted inline.
   ========================================================================== */

/* Hero: 102px block padding, 51.2px heading, 16px subhead — all as measured */
.classic-hero { padding-block: clamp(3rem, 8vw, 6.4rem); text-align: center; }
.classic-hero h1 {
  font-size: clamp(2rem, 4vw + 1rem, 3.2rem);
  margin-bottom: 0.625rem;
}
.classic-sub {
  font-size: 1rem;
  /* Live site uses #797979 (4.35:1) which fails AA. --c-muted is 4.83:1. */
  color: var(--c-muted);
  /* Wider than --w-prose so it holds one line at desktop, as on the live site */
  max-width: 64rem;
  margin: 0 auto;
}
.classic-sub b { color: var(--c-link-blue); font-weight: 700; }
.classic-hero .btn-row { margin-top: 3.75rem; justify-content: center; }

/* Contrast band: image, then mark, then caption */
.compare-classic { display: grid; gap: clamp(2.5rem, 6vw, 4rem); grid-template-columns: 1fr; }
@media (min-width: 768px) { .compare-classic { grid-template-columns: 1fr 1fr; } }
.compare-classic figure { margin: 0; text-align: center; }
/* Live site sizes both band images to a matched 250px height, not a matched
   width, so the two captions line up. A fixed-height box holds that alignment
   even at tablet widths, where the images become width-constrained instead and
   would otherwise end up different heights. */
.compare-classic picture {
  display: flex; align-items: center; justify-content: center;
  height: 250px;
}
.compare-classic img {
  max-height: 250px;
  width: auto;
  max-width: 100%;
  margin-inline: auto;
  border-radius: 4px;
}
.compare-classic .mark { display: block; margin: 1.5rem auto 1rem; width: 34px; height: 34px; }
.compare-classic figcaption {
  color: #fff; font-size: 1.125rem; font-weight: 700;
  max-width: 26ch; margin-inline: auto;
}

/* Feature rows: 38px block padding, 500px image, centred text */
.feature-row { padding-block: clamp(2rem, 4vw, 2.4rem); text-align: center; }
.feature-row--alt { background: var(--c-surface-alt); }
.feature-row img { max-width: min(500px, 100%); margin-inline: auto; border-radius: 4px; }
.feature-row h3 {
  font-size: clamp(1.25rem, 1.5vw + 0.8rem, 1.44rem);
  margin: 1.75rem 0 0.5rem;
}
.feature-row p { font-size: 1rem; margin: 0 auto 0.5rem; max-width: 46ch; }
.note-line {
  display: flex; gap: 0.5rem; align-items: center; justify-content: center;
  /* Live site uses #18a050 at 16px (3.4:1) which fails AA. */
  color: var(--c-accent-text);
  font-weight: 600; font-size: 1rem; margin: 0 auto;
}
.note-line svg { width: 1.15em; height: 1.15em; flex: none; }
.section-title { text-align: center; padding-block: clamp(2rem, 5vw, 3rem) 0; }

/* ==========================================================================
   Guides — the /guides section, generated by scripts/build_guides.py.
   Long-form reading rather than a landing page: one narrow column, generous
   heading rhythm, figures that break the text rather than decorate it.
   ========================================================================== */

/* A prose-width container. The gutter is added on top of --w-prose so the
   text column measures 68ch, rather than 68ch minus the padding. */
.container--prose {
  max-width: calc(var(--w-prose) + 2 * var(--space-gutter));
}

.guide { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(2.5rem, 6vw, 4rem); }

.breadcrumb { font-size: 0.875rem; color: var(--c-muted); margin-bottom: 0.5rem; }
.breadcrumb a {
  /* 44px minimum tap target (docs/design.md § 3) */
  display: inline-flex; align-items: center; min-height: 44px;
}
.breadcrumb span { padding-inline: 0.35rem; }

/* Article titles sit one step below the hero scale: a guide headline is a
   sentence to read, not a banner. Documented in docs/design.md § 2. */
.guide h1 {
  font-size: clamp(1.875rem, 3.5vw + 0.9rem, 2.75rem);
  margin-bottom: 0.35rem;
}
/* Caption size is the floor in docs/design.md § 2 — nothing smaller ships. */
.guide-meta { font-size: 0.875rem; color: var(--c-muted); margin-bottom: 2rem; }

/* Section headings inside an article sit a step below the landing-page scale
   too, so the h1 -> h2 -> body hierarchy stays legible over 900 words.
   Documented in docs/design.md § 2. */
.prose h2 { font-size: clamp(1.375rem, 2vw + 0.75rem, 1.75rem); margin-top: 2.5rem; }
.prose h3 { font-size: clamp(1.125rem, 1.5vw + 0.6rem, 1.375rem); margin-top: 2rem; }
.prose > *:first-child { margin-top: 0; }
.prose ol { margin: 0 0 1rem; padding-left: 1.25rem; }
.prose li { max-width: var(--w-prose); }
.prose .quote { margin-block: 2rem; }

.prose-figure { margin: 2rem 0; }
.prose-figure img {
  border-radius: var(--radius);
  border: 1px solid var(--c-border);
  margin-inline: auto;
}

/* Guide cards: the hub listing and the "keep reading" block. Same .card as
   the feature grids, minus the image. */
.card h3 a { color: var(--c-accent-text); text-decoration: underline; text-underline-offset: 2px; }
.card h3 a:hover { color: var(--c-primary-hover); }
.card .eyebrow { font-size: 0.875rem; margin-bottom: 0.5rem; }
.card .guide-meta { margin-bottom: 0; }