/* leveledmeetings.com — design tokens + shared components.
   Palette family ported from nate-land.com (sibling site, same studio):
   cream base, forest/teal/navy dark bands, gold accent. Fonts: Libre
   Baskerville (display) + Inter (body), same pairing as nate-land.

   Contrast note (2026-07-18): the brief's default instruction was "focus
   ring = --gold", mirroring inpursuit-life-site's --focus token idiom. Gold
   (#C8A96E) on cream (#F5F0E8) measures ~1.98:1 — nowhere near the 3:1 a
   focus ring/UI component needs (WCAG 1.4.11), let alone 4.5:1 for body
   text. So --focus defaults to --teal (#1D4241) on cream — 9.71:1, huge
   margin — and is re-pointed to --gold inside dark sections/cards/footer,
   where gold measures 4.90:1 (vs --teal bg, the tightest of the three dark
   bands) to 6.59:1 (vs --forest) — comfortably clears 3:1 for a ring and
   4.5:1 for normal text besides. Full relative-luminance math for every
   shipped pair is in planB-task-2-report.md. Same reasoning is why --gold
   never carries body text on --cream anywhere below: it's reserved for
   large text (stat numbers, big headings) and decorative use (borders,
   underlines, chips with dark ink) on light backgrounds, and promoted to a
   safe normal-text accent only once the background is dark. */

:root {
  --cream: #F5F0E8;        /* page base */
  --cream-deep: #F1E9DA;   /* panels/cards on cream */
  --edge: #EBE2D4;         /* hairlines/borders on cream — re-pointed to a
                               light rgba in dark contexts, see below */
  --forest: #1A2B28;       /* darkest green: bands, headline ink */
  --teal: #1D4241;         /* teal band */
  --navy: #1D3040;         /* navy band */
  --ink: #1A2B28;          /* body text on cream — 13.03:1, see report */
  --gold: #C8A96E;         /* accent — decorative/large-text on cream ONLY
                               (1.98:1 there); safe as normal-text accent on
                               any dark band (4.90–6.59:1), see report */
  --gold-deep: #947438;    /* darker gold for large/bold accents on cream
                               (3.85:1 — passes the 3:1 large-text minimum,
                               NOT 4.5:1 normal text; used only where the
                               brief's large-text carve-out applies) */
  --paper: #FFFFFF;        /* stat-card fill on cream */
  --btn-ink: #F5F0E8;      /* theme-invariant .btn label — passes AA against
                               every fill .btn uses, rest and hover alike */
  --focus: var(--teal);    /* focus ring + skip-link chip on cream/light
                               context; re-pointed to --gold in dark
                               sections/cards/footer below */
  --focus-ink: var(--cream); /* label color on top of the --focus chip */
  --display: "Libre Baskerville", Georgia, serif;
  --body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

/* Dark-context re-points: custom properties cascade by inheritance, so
   these two lines alone flip focus color and hairline color correctly for
   *any* descendant that references var(--focus) / var(--edge) — no
   competing selector, so nothing can lose a specificity fight over it
   (see the .card--dark note further down for the fight this sidesteps). */
.section--dark, .card--dark, .site-footer, .hero-media {
  --focus: var(--gold);
  --edge: rgba(245, 240, 232, .16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Base image reset: without this, an <img> with explicit width/height
   attributes (kept for layout-shift prevention) renders at its intrinsic
   HTML width even inside a narrower grid track/flex item, forcing that
   track to overflow instead of sharing space evenly with its sibling. */
img { max-width: 100%; height: auto; display: block; }

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--cream);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.25; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ---- a11y (verbatim idiom from inpursuit-life-site, focus color adjusted
   per the contrast note above) ---- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--focus); color: var(--focus-ink); padding: .6rem 1rem; z-index: 100; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---- header / nav ---- */
.site-header { background: var(--cream); border-bottom: 1px solid var(--edge); }
.site-header .wrap {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-top: 20px; padding-bottom: 20px;
}
.brand {
  /* 1.25rem (20px) + font-weight 700 clears the WCAG large-text threshold
     (14pt/18.66px bold), so --gold-deep on .brand-accent only needs 3:1
     here — it clears that at 3.85:1. See report. */
  font-family: var(--display); font-weight: 700; font-size: 1.25rem;
  color: var(--forest); text-decoration: none; letter-spacing: .01em;
  margin-right: auto; display: inline-flex; align-items: center;
}
.brand-accent { color: var(--gold-deep); }
.site-nav { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-size: .92rem; color: var(--ink); }
.site-nav a:hover { color: var(--teal); }
.site-nav a[aria-current="page"] { color: var(--teal); font-weight: 600; }

/* ---- buttons ----
   Dedicated fill tokens + a theme-invariant label ink (--btn-ink), learned
   from inpursuit-life-site rather than nate-land's gold/gold-deep .btn,
   which only reaches 3.85:1 with cream text on hover (fails 4.5:1 normal
   text — see report). --forest (rest) and --teal (hover) both clear
   9–13:1 against --btn-ink, so the button is comfortably AA at rest AND
   hover with a single ink color that never needs to change. */
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: .95rem;
  padding: 12px 26px; border-radius: 999px; margin: 0 12px 12px 0;
  background: var(--forest); color: var(--btn-ink); border: 1.5px solid var(--forest);
  transition: background .15s ease, border-color .15s ease;
}
.btn:hover { background: var(--teal); border-color: var(--teal); }
.btn--outline {
  background: transparent; color: var(--teal); border: 1.5px solid var(--teal);
}
.btn--outline:hover { background: var(--teal); color: var(--btn-ink); }
/* Dark sections: --teal-on-dark-bg measures ~1.3:1 (both are near-black),
   so the outline button re-points to --gold, which clears 4.90–6.59:1
   against forest/teal/navy alike — see report. */
.section--dark .btn--outline, .card--dark .btn--outline {
  color: var(--gold); border-color: var(--gold);
}
.section--dark .btn--outline:hover, .card--dark .btn--outline:hover {
  background: var(--gold); color: var(--forest);
}

/* ---- sections ---- */
.section { padding: 84px 0; }
.section--dark { background: var(--forest); color: var(--cream); }
.section--dark.section--navy { background: var(--navy); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: var(--cream); }
.section--dark a:not(.btn):not(.btn--outline) { color: var(--gold); }
/* Deliberately no ".section--dark p" color rule: cream text comes from
   inheriting .section--dark's own `color: var(--cream)`, not from a
   competing per-tag selector. A blanket ".section--dark p" rule bit us
   during verification — it silently overrode .stat p's color even though
   .stat always renders on a white --paper card (light-on-white, ~1:1,
   invisible) regardless of which section it's nested in. Components that
   need a fixed color on any background (.card p, .stat p below) set it
   explicitly instead of relying on ancestor context. */

/* ---- hero ---- */
.hero { padding: 96px 0 90px; }
.hero h1 { font-size: clamp(2rem, 5vw, 2.9rem); color: var(--forest); max-width: 750px; margin-bottom: 24px; }
.hero p { max-width: 640px; margin-bottom: 18px; }
.section--dark .hero h1 { color: var(--cream); }
/* Two-column hero variant: copy column + companion image column (home
   page). Not to be confused with a full photo-background hero — that
   idiom, if this site ever needs it, should follow inpursuit-life-site's
   `.hero-media` (photo background + ::before scrim) and get a distinct
   name so the two don't collide. */
.hero-visual { align-items: center; }
.hero-visual img { width: 100%; height: auto; border-radius: 14px; display: block; }
.hero-note { font-size: .85rem; opacity: .75; margin-top: 6px; }

/* ---- full-bleed photo hero (Trust & Security page) ----
   The distinct idiom flagged in the comment above: a fixed ::before scrim
   over a cover-sized background photo, rather than the two-column
   .hero-visual pairing or .section-photo's per-instance inline gradient.
   Combine as class="hero hero-media" (keeps .hero's padding/h1 sizing,
   adds the photo + scrim); nest content in .wrap > .section-photo-content
   to reuse the same centered-copy treatment as the CTA bands. */
.hero-media { position: relative; background-size: cover; background-position: center; overflow: hidden; }
.hero-media::before {
  content: ""; position: absolute; inset: 0;
  /* Darker than the .section-photo CTA-band scrim (.82/.93) — this photo
     (trust-shield.webp) has light blueprint-style linework that bled
     through at the CTA-band opacity and washed out the .btn--outline
     "Request a DPA" button's gold text/border against it. Verified at
     1280px: this depth keeps the shield motif faintly visible while
     giving both buttons and body copy solid, legible contrast. */
  background: linear-gradient(180deg, rgba(26, 43, 40, .92), rgba(26, 43, 40, .97));
}
.hero-media .wrap { position: relative; z-index: 1; }
.hero-media h1 { color: var(--cream); }
.hero-media p { color: var(--cream); }
/* .btn--outline is transparent by design (see the "buttons" block above) —
   fine over a flat dark section, but over a *photo* the underlying pixels
   aren't guaranteed dark even under the ::before scrim (trust-shield.webp
   has light blueprint linework that showed through right behind the
   button at 1280px). A translucent forest backing gives the outline
   button its own guaranteed contrast floor independent of what's under it. */
.hero-media .btn--outline { background: rgba(26, 43, 40, .55); color: var(--gold); border-color: var(--gold); }
.hero-media .btn--outline:hover { background: var(--gold); }

/* ---- eyebrow labels (section kickers, ported from nate-land-site) ---- */
.eyebrow {
  display: inline-block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 4px; margin-bottom: 20px;
  background: var(--cream-deep); color: var(--ink);
}
.section--dark .eyebrow {
  background: rgba(245, 240, 232, .12); color: var(--cream);
  border: 1px solid rgba(245, 240, 232, .3);
}
/* Optional inline icon inside an .eyebrow chip (How It Works page label
   badges — replaces the hotlinked pictographic.ai icons from the Gamma
   export with inline SVG, same visual language as the home page's 9
   inline icons). Plain-text eyebrows elsewhere have no svg child, so this
   rule is inert for them. */
.eyebrow svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; }

/* ---- grids ---- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

/* ---- cards ----
   Base .card is light-on-cream. .card--dark is a modifier meant to be
   combined as class="card card--dark" (never bare card--dark — see
   CLAUDE.md's existing lesson from inpursuit). Deliberately no
   `.section--dark .card` context rule exists anywhere in this file: that's
   the exact shape of the inpursuit specificity bug (two 0,2,0 selectors —
   a context rule and a modifier rule — racing on source order, so the
   modifier silently lost inside a matching context). Skipping the context
   rule entirely means there is nothing for `.card.card--dark` to lose to;
   dark-card styling is opt-in via the modifier class only, never implied
   by nesting. */
.card {
  background: var(--cream-deep); border: 1px solid var(--edge); border-radius: 12px;
  padding: 28px 26px; color: var(--ink);
}
.card h3 { color: var(--forest); font-size: 1.15rem; margin-bottom: 10px; }
.card p { font-size: .95rem; }
.card.card--dark {
  background: var(--forest); border-color: rgba(245, 240, 232, .16); color: var(--cream);
}
.card.card--dark h3 { color: var(--cream); }
.card.card--dark p { color: rgba(245, 240, 232, .85); }
.card.card--dark ul { padding-left: 1.1em; font-size: .95rem; }
.card.card--dark li { margin-bottom: 8px; }
.card.card--dark li:last-child { margin-bottom: 0; }
/* Generalized to any .card (not just the dark modifier) — Pricing page's
   plain-.card Lite plan needs the same bullet-list rhythm as the
   .card--dark Pro plan. More specific ".card.card--dark ul" above still
   wins inside dark cards, but the values are identical either way, so
   there's no visual difference — this just extends the same list styling
   to light cards, which previously had none (no plain .card shipped a
   <ul> before this page). */
.card ul { padding-left: 1.1em; font-size: .95rem; }
.card li { margin-bottom: 8px; }
.card li:last-child { margin-bottom: 0; }

/* ---- gold card variant (How It Works "Cheeky Mechanic") ----
   Dark ink on a solid gold fill — 6.57:1 contrast (--ink #1A2B28 on
   --gold #C8A96E), comfortably AA for normal text. This is a different
   pairing from the "gold text on cream" rule documented at the top of
   this file (that one is light-bg text-color, capped at large-text/
   decorative use); here gold is the solid background and ink sits on
   top of it, which is a much higher-contrast combination. */
.card.card--gold {
  background: var(--gold); border-color: var(--gold); color: var(--ink);
}
.card.card--gold h3, .card.card--gold p { color: var(--ink); }

/* ---- inline icons (minimal, hand-drawn — never hotlinked Gamma/pictographic
   assets, see tools/check.sh) ---- */
.icon { display: block; margin-bottom: 14px; color: var(--forest); }
.card.card--dark .icon { color: var(--cream); }
.icon svg { display: block; }

/* ---- numbered step list (hand-built replacement for the Gamma "bubble
   steps" diagram — see home page "How It Works" teaser) ---- */
.steps { list-style: none; counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step);
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; margin-bottom: 16px; border-radius: 50%;
  background: var(--forest); color: var(--cream);
  font-family: var(--display); font-size: 1rem;
}

/* ---- stats ---- */
.stat {
  background: var(--paper); border: 1px solid var(--edge); border-radius: 10px; padding: 26px 24px;
  /* .stat always renders on the fixed --paper (white) fill above, so it
     needs its own explicit `color`, same as .card does — this is what
     .stat p was missing before the fix (see the .section--dark note
     above): without it, text silently inherited translucent cream from a
     dark ancestor section and went near-invisible on the white card. */
  color: var(--ink);
}
.stat .num {
  /* 2.3rem (36.8px) is well past the 24px large-text threshold, so
     --gold-deep only needs 3:1 here — it clears 4.36:1 against --paper
     (#FFFFFF). See report. */
  font-family: var(--display); font-size: 2.3rem; color: var(--gold-deep);
  display: block; margin-bottom: 8px;
}
.stat h3 { font-family: var(--body); font-weight: 700; font-size: 1rem; margin-bottom: 8px; color: var(--forest); }
.stat p { font-size: .9rem; }

/* ---- pull-quote + companion image (home page "Why It Works" close) ---- */
.quote-media { align-items: center; }
.quote-media img { width: 100%; height: auto; border-radius: 14px; display: block; }
.quote-media blockquote { margin: 0; padding-left: 26px; border-left: 3px solid var(--gold); }
.quote-media blockquote h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin-bottom: 16px; }

/* ---- section on a photo (final CTA bands) ----
   The scrim is baked into each page's inline `background-image` (a
   linear-gradient layered over the photo url) rather than a shared
   ::before rule, so the gradient's rgba can match whichever dark token
   the section is using without a second class. This class only owns the
   things every instance shares: cover/center sizing and centered CTA
   copy. */
.section-photo { background-size: cover; background-position: center; }
.section-photo-content { text-align: center; max-width: 640px; margin: 0 auto; }

/* ---- prose (72ch reading column — legal/reading-heavy pages) ----
   h2 styling below is dormant on Terms (its numbered articles sit one
   level deeper, at h3, so "Full Terms of Service" itself can be the
   section's own h2 without a level skip) but kept for any future .prose
   consumer that needs a top-level heading inside the column itself.
   h3 carries the numbered-article weight Terms actually uses; h4 covers
   its subsections (3.1, 3.2, ...); blockquote/ul get minimal treatment
   so the legal callouts (Acceptable Use Standard, Limitation of
   Liability) read as intentional, not bare browser defaults. */
.prose { max-width: 72ch; margin: 0 auto; }
.prose h2 { margin-top: 40px; font-size: 1.3rem; }
.prose h2:first-of-type { margin-top: 0; }
.prose h3 { margin-top: 40px; font-size: 1.3rem; color: var(--forest); }
.prose h3:first-of-type { margin-top: 0; }
.prose h4 { margin-top: 24px; margin-bottom: 8px; font-size: 1.02rem; color: var(--forest); }
.prose blockquote {
  margin: 20px 0; padding: 4px 22px; border-left: 3px solid var(--gold);
  background: var(--cream-deep); border-radius: 0 8px 8px 0;
}
.prose blockquote p:last-child { margin-bottom: 0; }
.prose ul { padding-left: 1.3em; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose li:last-child { margin-bottom: 0; }

/* ---- gallery photo ---- */
.gallery-photo {
  width: 100%; height: auto; display: block; border-radius: 12px;
  border: 1px solid var(--edge);
}

/* ---- credits table ----
   Real <table>, not a div grid — border-collapse + hairlines that follow
   --edge (already re-pointed for dark contexts above), so the same markup
   reads correctly on cream and inside .section--dark/.card--dark without a
   second ruleset. */
.credits-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.credits-table caption { text-align: left; font-family: var(--display); margin-bottom: 12px; caption-side: top; }
.credits-table th, .credits-table td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--edge); }
.credits-table th { font-weight: 700; color: var(--forest); }
.section--dark .credits-table th, .card--dark .credits-table th { color: var(--cream); }

/* ---- plan/pack price display + "Most Popular" badge (Pricing page) ----
   .price reuses the .stat .num idiom (--gold-deep on a light card, large
   font clears the 3:1 large-text threshold — see the contrast note at the
   top of this file) and flips to --gold inside .card--dark per the
   established dark-card re-point. The "Most Popular" badge sidesteps the
   whole light/dark-card question by using the *same* solid-gold-fill +
   dark-ink pairing as .card--gold (already verified 6.57:1 above) as its
   own self-contained background, so it reads correctly whether it sits on
   a light .card (Lite) or a .card--dark (Pro).
   Selectors are written as "p.price" / ".card--dark p.price" (element +
   class, not class alone) so their specificity ties the pre-existing
   ".card p" (0,1,1) and ".card.card--dark p" (0,2,1) font-size/color
   rules instead of losing to them outright — a bare ".price" class
   selector is lower-specificity than either and silently lost the
   font-size (and, on the dark card, the color too) to those rules during
   verification. Source order then breaks the tie in this block's favor
   since it's declared after both. */
p.price { font-family: var(--display); font-size: 2.3rem; line-height: 1.1; color: var(--gold-deep); margin-bottom: 6px; }
.card--dark p.price { color: var(--gold); }
.price .per { font-family: var(--body); font-weight: 400; font-size: 1rem; color: var(--ink); }
.card--dark .price .per { color: rgba(245, 240, 232, .85); }
.plan-sub { font-size: .85rem; opacity: .8; margin-bottom: 16px; }
.plan-card .eyebrow, .plan-card .badge { margin-bottom: 14px; }
.badge {
  display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; padding: 5px 12px; border-radius: 999px;
  background: var(--gold); color: var(--ink); margin-left: 8px;
}

/* ---- footer ---- */
.site-footer { background: var(--forest); color: var(--cream); padding: 80px 0 40px; }
.site-footer h2 { color: var(--cream); font-size: clamp(1.6rem, 4vw, 2.2rem); margin-bottom: 16px; }
/* No ".site-footer p" color rule either — same reasoning as .section--dark
   above; cream text comes from inheriting .site-footer's own color. */
.site-footer a:not(.btn):not(.btn--outline) { color: var(--gold); text-decoration: none; }
.site-footer a:not(.btn):not(.btn--outline):hover { text-decoration: underline; }
.footer-meta {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid rgba(245, 240, 232, .2); margin-top: 56px; padding-top: 26px; font-size: .9rem;
}
.footer-meta .name { font-family: var(--display); color: var(--cream); margin-right: auto; }
.copyright { margin-top: 22px; font-size: .8rem; color: rgba(245, 240, 232, .55); }

@media (max-width: 900px) {
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 60px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}