/* ==========================================================================
   ADAReady — marketing site
   --------------------------------------------------------------------------
   Design thesis: this site sells evidence, not reassurance. Competitors in
   this category lead with badge walls and certainty claims. We lead with the
   artifact we actually produce — a dated finding with its WCAG criterion,
   measured value, and the scan that verified the fix.

   Signature: the focus indicator. It is the most visible and most-deleted
   artifact in web accessibility, so it is the thing this site is built
   around — a double ring (dark inner, chartreuse outer) that clears 3:1
   against any background it can land on.

   Type: Public Sans, the U.S. Web Design System face drawn for federal
   digital accessibility. Chosen because of what it is, not how it looks.
   Data uses the system monospace stack — zero bytes, and mono is utility
   here rather than identity.
   ========================================================================== */

@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/PublicSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/PublicSans-SemiBold.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/static/fonts/PublicSans-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

:root {
  --ink:       #101413;
  --ink-soft:  #46514c;
  --paper:     #ffffff;
  --wash:      #f2f4f2;
  --rule:      #d6dbd7;
  --pine:      #0e3b2a;
  --pine-lift: #17513a;
  --signal:    #cfe84a;

  /* Severity — functional, only ever used on finding artifacts */
  --sev-critical: #b3261e;
  --sev-serious:  #a85408;
  --sev-moderate: #7a6000;
  --sev-verified: #1b6b3a;

  --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --measure: 62ch;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --band: clamp(3rem, 6vw, 5rem);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-underline-offset: .2em;
}

/* --- The signature ------------------------------------------------------ */
/* Double ring so the indicator holds >=3:1 (WCAG 2.4.11) whether it lands
   on paper, wash, or pine. Never removed, never replaced with a shadow. */
:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--signal);
  border-radius: 3px;
}
.on-dark :focus-visible { outline-color: var(--paper); }

/* --- Type --------------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.08; font-weight: 900; letter-spacing: -.025em; }
h1 { font-size: clamp(2.5rem, 6.2vw, 4.25rem); letter-spacing: -.035em; }
h2 { font-size: clamp(1.85rem, 4vw, 2.75rem); letter-spacing: -.03em; }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); letter-spacing: -.015em; }
p  { margin: 0 0 1.1em; max-width: var(--measure); }
a  { color: inherit; text-decoration-thickness: 1.5px; }
a:hover { text-decoration-thickness: 3px; }
strong { font-weight: 600; }

.eyebrow {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 1.25rem;
  display: block;
}
.lede { font-size: clamp(1.1rem, 1.8vw, 1.3rem); color: var(--ink-soft); }

/* --- Layout ------------------------------------------------------------- */
.wrap { width: min(1180px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.band { padding-block: var(--band); }
.band--wash { background: var(--wash); }
.band--pine { background: var(--pine); color: var(--paper); }
.band--pine .eyebrow, .band--pine .lede { color: #b9cfc4; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: .85rem 1.25rem; font-weight: 600;
}
.skip:focus { left: var(--gutter); top: .5rem; }

/* --- Header + mega menu -------------------------------------------------- */
/* The blur lives on a pseudo-element, not on .site-head itself.
   `backdrop-filter` makes an element the containing block for every
   fixed-position descendant — the same rule that bites `transform` — and the
   mobile nav overlay is `position: fixed; inset: 68px 0 0` *inside* this
   header. With the filter on .site-head the overlay resolved against the
   header instead of the viewport and rendered as a 158x65 box near the middle
   of the screen rather than a full-screen menu. A pseudo-element is not an
   ancestor of .nav, so the effect survives and the overlay resolves correctly. */
.site-head { border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: transparent; z-index: 60; }
.site-head::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
}
/* Three columns so the menu centers against the header itself, not against
   whatever space the brand and actions leave over. */
.site-head__in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; min-height: 68px; }
.brand { justify-self: start; }
.nav__actions { justify-self: end; display: flex; align-items: center; gap: .3rem; }
.brand { font-weight: 900; font-size: 1.15rem; letter-spacing: -.04em; text-decoration: none; display: flex; align-items: center; gap: .5rem; flex: none; }
.brand__mark { width: 24px; height: 24px; flex: none; }

.nav { justify-self: center; display: flex; align-items: center; gap: .25rem; }
.nav__group { position: static; }
.nav__trigger, .nav__flat, .nav__signin {
  font: inherit; font-weight: 600; font-size: .93rem;
  background: none; border: 0; cursor: pointer; color: inherit;
  padding: .55rem .7rem; border-radius: var(--r-sm); text-decoration: none;
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
}
.nav__trigger:hover, .nav__flat:hover, .nav__signin:hover { background: var(--wash); }
.nav__trigger.is-active, .nav__flat[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
.nav__chev { width: 10px; height: 6px; transition: transform .15s ease; }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__trigger[aria-expanded="true"] { background: var(--wash); }
.nav__signin--menu { display: none; }

/* One control, two lines, centred: "Sign in /" over "Sign up". Two separate
   links here read as two competing decisions in a space that has room for
   neither; one control that asks the question and then splits is calmer, and it
   leaves the primary call to action as the only thing shaped like a button.

   Tight leading is the point of the two lines — at the default 1.6 they read as
   two unrelated items rather than one label. Still >=24x24 overall (WCAG 2.2
   SC 2.5.8), which the two-line stack clears comfortably. */
.nav__account {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0; min-height: 40px; padding: .25rem .5rem;
  font: inherit; font-weight: 600; font-size: .8rem; line-height: 1.15;
  text-align: center; color: inherit; white-space: nowrap;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer;
}
.nav__account__l { display: block; }
.nav__account:hover { background: var(--wash); }
.nav__account[aria-expanded="true"] { background: var(--wash); }

/* The chooser. `popover` puts it in the top layer, so it is never clipped by
   the header and needs no z-index arms race with the sticky bar. */
.account-pop {
  position: fixed; inset: 0; margin: auto;
  width: min(34rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem);
  padding: 1.6rem; border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 60px rgb(0 0 0 / 22%);
  overflow: auto;
}
.account-pop::backdrop { background: rgb(12 22 18 / 45%); }
.account-pop__h { margin: 0 0 1.1rem; font-size: 1.15rem; letter-spacing: -.02em; text-align: center; }

/* The split. Two equal halves side by side; one column below 30rem, because two
   half-width cards at 320px are narrower than their own labels. */
.account-pop__split { display: grid; grid-template-columns: 1fr 1fr; gap: .85rem; }
@media (max-width: 30rem) { .account-pop__split { grid-template-columns: 1fr; } }

.account-opt {
  display: flex; flex-direction: column; gap: .3rem;
  padding: 1rem; border: 2px solid var(--rule); border-radius: var(--r-sm);
  text-decoration: none; color: inherit; background: var(--paper);
}
.account-opt:hover { border-color: var(--pine); background: var(--wash); }
.account-opt__t { font-weight: 700; font-size: 1rem; }
.account-opt__d { font-size: .85rem; color: var(--ink-soft); line-height: 1.45; }

.account-pop__x {
  display: block; margin: 1.1rem auto 0; min-height: 44px; padding: .5rem 1.1rem;
  font: inherit; font-weight: 600; font-size: .9rem;
  background: none; border: 1px solid var(--rule); border-radius: var(--r-sm);
  color: inherit; cursor: pointer;
}
.account-pop__x:hover { background: var(--wash); }

/* `.btn.nav__cta`, not `.nav__cta`: `.btn` is declared later in this file with
   the same specificity, so every size the old single-class rule set here — its
   padding and its font-size — was silently losing to it. The header button had
   been rendering at full body-button size the whole time.

   `white-space: nowrap` is the other half: at the widths where the header gets
   tight this was breaking into "Free" / "scan", two stacked words in a pill. A
   primary call to action that reflows onto two lines reads as broken. */
.btn.nav__cta {
  margin-left: .55rem;
  padding: .55rem 1.1rem;
  font-size: .88rem;
  white-space: nowrap;
  flex: none;
}

/* Mega panel: multi-column links plus a feature card. Anchored to the header
   rather than the trigger so wide panels cannot run off the viewport. */
.nav__panel {
  /* Anchored to .site-head (sticky, so it is the positioned ancestor), not to
     the trigger. top:100% therefore means "the bottom edge of the header", and
     every panel gets the same width and the same left edge as the page
     container — so all four line up with each other and with the content. */
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  /* The wrap's *content* box, so the panel's edges line up with the logo
     and the CTA rather than with the wrap's outer padding edge. */
  width: calc(min(1180px, 100vw) - 2 * var(--gutter));
  background: var(--paper);
  border: 1px solid var(--rule); border-top: 0;
  border-radius: 0 0 var(--r-lg) var(--r-lg);
  box-shadow: 0 26px 60px -26px rgba(16,20,19,.34), 0 2px 6px rgba(16,20,19,.06);
  padding: 1.6rem; z-index: 70;
}
.nav__panel[hidden] { display: none; }
.nav__panelin { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 1041px) { .nav__panelin { grid-template-columns: 1fr 268px; gap: 2rem; } }

.nav__cols { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); align-content: start; }
.nav__colhead {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-soft);
  margin: 0 0 .5rem; padding: 0 .55rem;
}
.nav__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.nav__panel a { display: grid; gap: .08rem; padding: .55rem; border-radius: var(--r-sm); text-decoration: none; }
.nav__panel a:hover { background: var(--wash); }
.nav__label { font-weight: 600; font-size: .93rem; }
.nav__desc { font-size: .8rem; color: var(--ink-soft); line-height: 1.35; }

.nav__feature {
  display: block; background: var(--wash); border-radius: var(--r-md);
  padding: 0 0 .9rem !important; overflow: hidden; align-self: start;
}
.nav__feature:hover { background: #e7ebe6 !important; }
.nav__feature img { width: 100%; height: 140px; object-fit: cover; display: block; margin-bottom: .7rem; }
.nav__fkick { display: block; padding: 0 .9rem; font-family: var(--mono); font-size: .64rem; letter-spacing: .11em; text-transform: uppercase; color: var(--ink-soft); }
.nav__ftitle { display: block; padding: .15rem .9rem 0; font-weight: 600; font-size: .92rem; line-height: 1.3; }
.nav__fcta { display: block; padding: .5rem .9rem 0; font-size: .85rem; font-weight: 600; }
.nav__fcta::after { content: " \2192"; }

.nav-toggle { display: none; }
@media (max-width: 1040px) {
  .nav {
    /* `justify-self: center` from the desktop rule still applies here, and for
       an inset-positioned box that means shrink-to-fit-and-centre rather than
       stretch: the overlay came out 158px wide in the middle of the screen
       even with left and right both at 0. */
    justify-self: stretch;
    position: fixed; inset: 68px 0 0; overflow-y: auto;
    background: var(--paper); border-top: 1px solid var(--rule);
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 1rem var(--gutter) 3rem;
  }
  .nav[hidden] { display: none; }
  .nav__group { position: static; }
  .nav__trigger { width: 100%; justify-content: space-between; padding: .95rem .25rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav__panel { position: static; transform: none; left: auto; width: auto; border: 0; border-radius: 0; box-shadow: none; padding: .25rem 0 .75rem; }
  .nav__panelin { grid-template-columns: 1fr; gap: .75rem; }
  .nav__cols { grid-template-columns: 1fr; gap: .75rem; }
  .nav__feature { display: none; }
  .nav__flat, .nav__signin { padding: .95rem .25rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
  .nav__signin--menu { display: block; }
  .nav__signin--bar, .nav__account--bar { display: none; }
  /* The chooser is a header affordance; the overlay lists both routes itself. */
  .account-pop { display: none; }
  /* The CTA sits in the header bar, not inside the overlay, so the top margin
     this used to carry pushed it below the bar and stretched the header from
     68px to 78px. */
  .btn.nav__cta { margin: 0; justify-content: center; padding: .5rem .9rem; font-size: .85rem; }
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem; margin-left: auto;
    background: none; border: 1px solid var(--rule); border-radius: var(--r-sm);
    padding: .55rem .85rem; font: inherit; font-weight: 600; font-size: .92rem; cursor: pointer;
  }
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font: inherit; font-weight: 600; font-size: 1rem;
  padding: .8rem 1.4rem; border-radius: var(--r-sm);
  text-decoration: none; cursor: pointer;
  border: 2px solid transparent;
  transition: background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--pine); color: var(--paper); }
.btn--primary:hover { background: var(--pine-lift); }
.btn--ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
.btn--onpine { background: var(--signal); color: var(--pine); }
.btn--onpine:hover { background: #dcf06e; }
.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 2rem; }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(2.5rem, 5vw, 4rem) var(--band); }
.hero__grid { display: grid; gap: clamp(2.5rem, 5vw, 4rem); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .hero__grid { grid-template-columns: 1.05fr .95fr; } }
.hero h1 { text-wrap: balance; }
.hero .lede { max-width: 48ch; }
.hero__evidence { display: grid; gap: 1.9rem; align-content: start; }
.hero__caption { font-size: .85rem; color: var(--ink-soft); margin: .4rem 0 0; max-width: 42ch; }

/* --- The finding card: the product, shown rather than described --------- */
.finding {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden;
  box-shadow: 0 1px 2px rgba(16,20,19,.04);
}
.finding__head {
  display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .9rem 1.15rem; border-bottom: 1px solid var(--rule); background: var(--wash);
}
.finding__id { font-family: var(--mono); font-size: .85rem; font-weight: 600; }
.finding__level { font-family: var(--mono); font-size: .72rem; color: var(--ink-soft); }
.chip {
  font-family: var(--mono); font-size: .68rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .25rem .5rem; border-radius: 999px; border: 1px solid currentColor;
  margin-left: auto;
}
.chip--critical { color: var(--sev-critical); }
.chip--serious  { color: var(--sev-serious); }
.chip--moderate { color: var(--sev-moderate); }
.chip--verified { color: var(--sev-verified); }

.finding__body { padding: 1.15rem; }
.finding__body p { margin: 0 0 1rem; font-size: .98rem; }
.finding__measure {
  font-family: var(--mono); font-size: .9rem;
  background: var(--wash); border-radius: var(--r-sm);
  padding: .7rem .85rem; margin: 0 0 1rem;
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
}
.finding__measure b { font-weight: 600; }
.finding__meta {
  list-style: none; margin: 0; padding: .9rem 1.15rem 0;
  border-top: 1px solid var(--rule);
  font-size: .85rem; color: var(--ink-soft);
  display: grid; gap: .3rem;
}
.finding__meta { padding-bottom: 1.15rem; }
.finding__meta span { font-family: var(--mono); color: var(--ink); }

/* The chartreuse earns its place here: a solid marker against the one state
   the whole product exists to produce. Decorative alongside the text label,
   so it carries no contrast burden of its own. */
.chip--verified::before,
.chip--critical::before,
.chip--serious::before {
  content: ""; display: inline-block; vertical-align: baseline;
  width: 7px; height: 7px; border-radius: 2px; margin-right: .4rem;
  background: currentColor;
}
.chip--verified { border-color: var(--sev-verified); }
.chip--verified::before { background: var(--signal); box-shadow: 0 0 0 1px var(--sev-verified); }

.finding + .finding { margin-top: 1.25rem; }
.finding--open { border-left: 3px solid var(--sev-serious); }

/* --- Generic grids ------------------------------------------------------ */
.grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }

.card { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 1.6rem; background: var(--paper); }
.card h3 { margin-bottom: .4rem; }
.card p { font-size: .97rem; color: var(--ink-soft); margin-bottom: 0; }
.band--pine .card { background: var(--pine-lift); border-color: #2b6b50; }
.band--pine .card p { color: #c3d8cd; }

/* --- Step list: order genuinely carries meaning here -------------------- */
.steps { list-style: none; counter-reset: s; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 0; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 3.25rem 1fr; gap: 1.25rem; padding: 1.6rem 0; border-top: 1px solid var(--rule); }
.steps li:last-child { border-bottom: 1px solid var(--rule); }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  font-family: var(--mono); font-size: .95rem; font-weight: 600; color: var(--ink-soft);
  padding-top: .15rem;
}
.steps h3 { margin-bottom: .3rem; }
.steps p { margin: 0; color: var(--ink-soft); }

/* --- Comparison --------------------------------------------------------- */
.table-scroll { overflow-x: auto; margin-top: 2.5rem; }
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .97rem; }
caption { text-align: left; color: var(--ink-soft); font-size: .9rem; margin-bottom: .85rem; }
th, td { text-align: left; padding: .9rem 1rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
thead th { font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; font-family: var(--mono); font-weight: 600; color: var(--ink-soft); }
tbody th { font-weight: 600; }

/* --- Pricing ------------------------------------------------------------ */
.plans { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 228px), 1fr)); margin-top: 2.5rem; align-items: stretch; }
.plan { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 1.6rem; display: flex; flex-direction: column; gap: .85rem; background: var(--paper); }
.plan--featured { border: 2px solid var(--pine); position: relative; }
.plan__name { font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: -.2rem; }
.plan__price { font-size: 2.35rem; font-weight: 900; letter-spacing: -.035em; line-height: 1; }
.plan__price small { font-size: .95rem; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.plan ul { list-style: none; margin: .35rem 0 0; padding: .95rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: .6rem; font-size: .94rem; }
.plan li { display: grid; grid-template-columns: 1.1rem 1fr; gap: .6rem; align-items: start; color: var(--ink-soft); }
.plan li::before { content: ""; width: 8px; height: 8px; margin-top: .55rem; border-radius: 2px; background: var(--sev-verified); }
.plan .btn { margin-top: auto; }
.plan__tag {
  position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
  white-space: nowrap;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
  text-transform: uppercase; font-weight: 600;
  color: #fff; background: var(--pine); border: 0;
  border-radius: 999px; padding: .3rem .7rem;
}

/* --- FAQ ---------------------------------------------------------------- */
.faq { margin-top: 2.5rem; border-top: 1px solid var(--rule); }
details { border-bottom: 1px solid var(--rule); }
summary { cursor: pointer; padding: 1.25rem 0; font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; gap: 1rem; align-items: baseline; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; margin-left: auto; font-family: var(--mono); font-weight: 400; font-size: 1.3rem; color: var(--ink-soft); }
details[open] summary::after { content: "\2013"; }
details > :not(summary) { margin-bottom: 1.25rem; color: var(--ink-soft); }

/* --- Disclosure: the honesty block, deliberately not hidden ------------- */
.disclosure { border-left: 3px solid var(--sev-moderate); padding: .25rem 0 .25rem 1.15rem; margin: 2.5rem 0 0; font-size: .95rem; color: var(--ink-soft); }
.disclosure p:last-child { margin-bottom: 0; }

/* --- Placeholder image slots (filled later) ----------------------------- */
.imgslot {
  border: 1px dashed var(--rule); border-radius: var(--r-md);
  background: var(--wash); color: var(--ink-soft);
  display: grid; place-content: center; text-align: center;
  padding: 2rem; min-height: 220px;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .06em;
}

/* --- Prose pages -------------------------------------------------------- */
.prose { max-width: var(--measure); }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; }
.prose ul, .prose ol { padding-left: 1.25rem; color: var(--ink-soft); }
.prose li { margin-bottom: .5rem; }
.prose dl { display: grid; gap: .35rem 1rem; grid-template-columns: max-content 1fr; font-size: .97rem; }
.prose dt { font-weight: 600; }
.prose dd { margin: 0; color: var(--ink-soft); }

/* --- Forms -------------------------------------------------------------- */
.field { display: grid; gap: .4rem; margin-bottom: 1.25rem; max-width: 32rem; }
.field label { font-weight: 600; font-size: .95rem; }
.field .hint { font-size: .85rem; color: var(--ink-soft); }
input[type="text"], input[type="email"], input[type="url"], textarea, select {
  font: inherit; padding: .7rem .85rem;
  border: 1px solid var(--ink-soft); border-radius: var(--r-sm);
  background: var(--paper); color: var(--ink); width: 100%;
}
textarea { min-height: 8rem; resize: vertical; }

/* --- Footer ------------------------------------------------------------- */
.site-foot { background: var(--pine); color: #c3d8cd; padding-block: var(--band) 3rem; }
.site-foot a { color: var(--paper); text-decoration: none; }
.site-foot a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.foot__grid { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.foot__grid h2 { font-size: .78rem; font-family: var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8fae9f; margin-bottom: 1rem; font-weight: 600; }
.foot__grid ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; font-size: .95rem; }
.foot__bottom { margin-top: 3.5rem; padding-top: 1.75rem; border-top: 1px solid #2b6b50; display: flex; flex-wrap: wrap; gap: 1rem 2rem; font-size: .88rem; }
.foot__bottom p { margin: 0; max-width: none; }
.foot__note { max-width: 58ch; color: #8fae9f; font-size: .88rem; }

/* --- Utility ------------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The second spam trap. Taken out of view by position rather than by the
   `hidden` attribute the first one uses, because the two catch different
   bots: the crude ones fill every input they can see, and the ones that were
   actually reaching our inbox parse the DOM and skip `[hidden]` containers.
   `aria-hidden` keeps it out of the accessibility tree and `tabindex="-1"`
   out of the tab order, so no one using this site ever meets it. Offset to
   the left, never the right — a positive offset would widen the page. */
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.stack > * + * { margin-top: 1.5rem; }
.center { text-align: center; margin-inline: auto; }
.center p { margin-inline: auto; }

/* --- Imagery ------------------------------------------------------------
   Photography is used as material evidence of the work, never as decoration
   and never as stock-photo reassurance. Every image is textless on purpose:
   a site arguing for rigour cannot carry invented lettering. */

.figure { margin: 0; }
.figure img { display: block; width: 100%; height: auto; border-radius: var(--r-md); background: var(--wash); }
.figure figcaption { font-size: .85rem; color: var(--ink-soft); margin-top: .75rem; max-width: 52ch; }
.band--pine .figure figcaption { color: #8fae9f; }

/* Full-bleed band: breaks the page rhythm once, right after the hero. */
.bleed { position: relative; margin-block: 0; }
.bleed img { display: block; width: 100%; height: clamp(300px, 46vh, 520px); object-fit: cover; }
.bleed__over {
  position: absolute; inset: auto 0 0 0;
  background: linear-gradient(to top, rgba(6,20,14,.92) 12%, rgba(6,20,14,.55) 55%, rgba(6,20,14,0));
  color: #fff; padding: 3.5rem 0 1.75rem;
}
.bleed__over p { margin: 0; max-width: 46ch; font-size: clamp(1rem, 1.5vw, 1.15rem); color: #dfeae3; }
.bleed__over .eyebrow { color: var(--signal); margin-bottom: .5rem; }

/* Media + prose pair */
.media { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; }
@media (min-width: 880px) {
  .media { grid-template-columns: 1fr 1fr; }
  .media--flip .media__text { order: 2; }
}
.media__text > :last-child { margin-bottom: 0; }

/* --- Hero, rebuilt ------------------------------------------------------
   A homepage hero has one job: orient a stranger in about three seconds and
   give them something to do. The previous version led with a WCAG finding
   card, which assumed the visitor already spoke the jargon. The artifact is
   still on the page — further down, where it can be explained. */

.hero2 { position: relative; background: #06140e; color: #fff; overflow: hidden; }
.hero2__bg { position: absolute; inset: 0; }
.hero2__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .95; object-position: 68% 50%; }
.hero2__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, #06140e 12%, rgba(6,20,14,.88) 38%, rgba(6,20,14,.34) 66%, rgba(6,20,14,.06) 100%);
}
.hero2__in { position: relative; padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); }
.hero2__copy { max-width: 40rem; }
.hero2 .eyebrow { color: var(--signal); }
.hero2 h1 { color: #fff; font-size: clamp(2.4rem, 5.6vw, 4rem); text-wrap: balance; margin-bottom: .35em; }
.hero2 .lede { color: #cfdcd4; max-width: 34rem; font-size: clamp(1.05rem, 1.7vw, 1.25rem); }

/* Scan form — the primary conversion, in the hero where it belongs. */
.scan { margin-top: 2.25rem; max-width: 34rem; }
.scan__row { display: flex; flex-wrap: wrap; gap: .6rem; }
.scan__field { flex: 1 1 16rem; min-width: 0; }
.scan input[type="text"] {
  width: 100%; font: inherit; font-size: 1rem;
  padding: .9rem 1rem; border-radius: var(--r-sm);
  border: 1px solid #4d6b5c; background: #0c2119; color: #fff;
}
.scan input[type="text"]::placeholder { color: #8fae9f; }
.scan input[type="text"]:hover { border-color: #6f8d7e; }
.scan .btn { padding: .9rem 1.5rem; }
.scan__hint { font-size: .87rem; color: #a9c2b5; margin: .7rem 0 0; }
.scan__hint strong { color: #dfeae3; font-weight: 600; }

/* The self-check line under the scan form. Separated by a rule rather than by
   more space: it is a different offer, not a continuation of the form's small
   print, and at this size the two grey paragraphs would otherwise read as one.
   The link is signal-on-pine at 9.4:1, and underlined, because a colour
   difference alone is not a link. */
.scan__self {
  font-size: .87rem;
  color: #a9c2b5;
  margin: 1rem 0 0;
  padding-top: .9rem;
  border-top: 1px solid #2a5844;
  max-width: 34rem;
}
.scan__self a { color: var(--signal); font-weight: 600; text-underline-offset: .18em; }
.scan__self a:hover { color: #fff; }

/* The scan dialog every call to action opens. Sized in rem against a viewport
   cap so it is a card on a desktop and very nearly the full screen on a phone,
   where a centred box with margins on all four sides wastes the only space
   there is.

   The whole form is meant to fit without scrolling on an ordinary laptop:
   five fields paired onto three rows, and spacing tight enough that the submit
   button is visible the moment the dialog opens. `overflow:auto` is the safety
   net for a landscape phone or a large text-size setting, not the normal case. */
.scanbox {
  width: min(40rem, calc(100vw - 1.5rem));
  max-height: min(94vh, 54rem);
  padding: 0; overflow: auto;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper); color: var(--ink);
  box-shadow: 0 24px 60px rgb(0 0 0 / 26%);
}
.scanbox::backdrop { background: rgb(12 22 18 / 55%); }
.scanbox__form { padding: 1.1rem clamp(1.15rem, 4vw, 1.75rem) 0; }
.scanbox__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.scanbox__h { font-size: clamp(1.3rem, 3.2vw, 1.6rem); letter-spacing: -.02em; margin: .1rem 0 .3rem; }
/* Full width. Capping the measure at 46ch inside a 40rem box left a ragged
   column of text with empty space beside it and cost a whole line of height
   for nothing — the constraint that helps a page of prose hurts here. */
.scanbox__lede { font-size: .92rem; line-height: 1.5; color: var(--ink-soft); max-width: none; margin-bottom: 1rem; }

/* 44px so it is a real touch target, and a visible border rather than a bare
   glyph — an unbordered × is the control people miss. */
.scanbox__x {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; margin: -.35rem -.35rem 0 0;
  border: 1px solid var(--rule); border-radius: var(--r-sm);
  background: none; color: var(--ink-soft); cursor: pointer;
}
.scanbox__x:hover { background: var(--wash); color: var(--ink); }
.scanbox__x svg { width: 15px; height: 15px; }

/* Two fields to a row: the site and what it runs on, then the person. Below
   34rem they stack, because two half-width fields at 360px are narrower than
   what goes in them. */
.scanbox__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; align-items: start; }
@media (max-width: 34rem) { .scanbox__pair { grid-template-columns: 1fr; } }
/* `.field` is a grid, and a grid stretches its rows to fill the height it is
   given. Side by side, that made the name input grow to cover the space taken
   by the email's hint below it — two inputs on one row at two different
   heights. The rows are content-sized instead. */
.scanbox .field { max-width: none; margin-bottom: .7rem; gap: .3rem; align-content: start; }
.scanbox .field label { font-size: .9rem; }
.scanbox .hint { font-size: .8rem; line-height: 1.4; }
.scanbox input, .scanbox select, .scanbox textarea { padding: .55rem .75rem; }
/* A select sizes itself from the option text and came out 6px shorter than the
   input beside it. An explicit height on both is the only thing that keeps two
   controls on one row looking like one row. */
.scanbox input, .scanbox select { height: 2.8rem; }
.scanbox textarea { min-height: 3rem; }
/* Sticky as a fallback: on the rare viewport where this does scroll, a submit
   button below the fold of a dialog is a submit button people do not find. */
.scanbox__foot {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; flex-wrap: wrap; gap: .6rem;
  margin-top: .15rem; padding-block: .75rem clamp(1.1rem, 3.5vw, 1.4rem);
  background: var(--paper);
}
.scanbox__foot .btn { padding: .6rem 1.1rem; }

/* Honest proof: what we test against and with. No invented client logos —
   with one client, borrowed credibility is the FTC endorsement problem. */
.proof { border-top: 1px solid rgba(255,255,255,.16); margin-top: 2.5rem; padding-top: 1.4rem; max-width: 31rem; }
.proof__label { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: #8fae9f; margin: 0 0 .85rem; }
.proof__list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem .55rem; }
.proof__list li {
  font-family: var(--mono); font-size: .78rem; color: #dfeae3;
  border: 1px solid rgba(255,255,255,.22); border-radius: 999px; padding: .35rem .7rem;
}

/* Artifact explainer — the finding cards, now with context around them. */
.artifact { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: start; }
@media (min-width: 940px) { .artifact { grid-template-columns: .85fr 1.15fr; } }
.artifact__key { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .8rem; font-size: .93rem; }
.artifact__key li { display: grid; grid-template-columns: 5.5rem 1fr; gap: .8rem; }
.artifact__key dt, .artifact__key b { font-family: var(--mono); font-size: .82rem; color: var(--ink); }
.artifact__key span { color: var(--ink-soft); }

/* --- Contrast checker --------------------------------------------------- */
.cc { display: grid; gap: 2rem; }
@media (min-width: 900px) { .cc { grid-template-columns: 22rem 1fr; align-items: start; } }
.cc__controls { display: grid; gap: 0; align-content: start; }
.cc__input { display: flex; gap: .5rem; align-items: center; }
.cc__input input[type="color"] { width: 46px; height: 46px; padding: 2px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--paper); cursor: pointer; flex: none; }
.cc__input input[type="text"] { font-family: var(--mono); text-transform: uppercase; }
.cc__result { display: grid; gap: 1.25rem; }
.cc__preview { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 1.75rem; }
.cc__preview p { margin: 0 0 .5rem; max-width: none; }
.cc__preview p:last-child { margin-bottom: 0; }
.cc__sample-lg { font-size: 24px; font-weight: 600; }
.cc__sample-sm { font-size: 16px; }
.cc__ratio { font-size: clamp(2.5rem, 6vw, 3.75rem); font-weight: 900; letter-spacing: -.04em; line-height: 1; margin: 0; }
.cc__ratio small { font-size: .35em; font-weight: 400; color: var(--ink-soft); letter-spacing: 0; }
.cc__verdicts { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cc__verdicts li { display: flex; flex-wrap: wrap; gap: .5rem; align-items: baseline; font-size: .95rem; padding: .6rem .85rem; border: 1px solid var(--rule); border-radius: var(--r-sm); }
.cc__verdicts b { font-family: var(--mono); font-size: .8rem; }
.cc__verdicts span { margin-left: auto; font-family: var(--mono); font-size: .82rem; }
.cc__verdicts li[data-pass="yes"] { border-color: var(--sev-verified); color: var(--sev-verified); }
.cc__verdicts li[data-pass="no"] { border-color: var(--sev-critical); color: var(--sev-critical); }

/* ==========================================================================
   Section archetypes
   --------------------------------------------------------------------------
   The page previously had one archetype (eyebrow + heading + white cards)
   repeated seven times, which is why it read as undesigned. These are the
   alternatives, meant to be rotated so no two adjacent sections share a shape.
   ========================================================================== */

/* --- Icons -------------------------------------------------------------- */
.ico { width: 24px; height: 24px; flex: none; }
.ico--lg { width: 32px; height: 32px; }
.icobox {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 1.1rem;
  background: var(--pine); color: var(--signal);
}
.band--pine .icobox { background: var(--signal); color: var(--pine); }
.icobox--soft { background: #e6ecdd; color: var(--pine); }

/* --- Stat band: big numerals, the pattern every competitor uses ---------- */
.stats { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.stat__n {
  font-size: clamp(2.75rem, 6vw, 4.25rem); font-weight: 900;
  letter-spacing: -.05em; line-height: .95; margin: 0 0 .4rem;
  color: var(--signal);
}
.band--wash .stat__n, .band .stat__n { color: var(--pine); }
.band--pine .stat__n { color: var(--signal); }
.stat__l { margin: 0; font-size: .97rem; max-width: 30ch; }
.band--pine .stat__l { color: #c3d8cd; }
.stat__src { font-family: var(--mono); font-size: .72rem; letter-spacing: .06em; color: var(--ink-soft); margin-top: .6rem; display: block; }
.band--pine .stat__src { color: #8fae9f; }

/* --- Split: asymmetric image/UI + text, alternating ---------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1.15fr; }
  .split--flip > :first-child { order: 2; }
  .split--flip { grid-template-columns: 1.15fr 1fr; }
}
.split__text > :last-child { margin-bottom: 0; }
.split__text h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); }

/* --- Product UI mockups: built in CSS, so they are real, not stock ------- */
.ui {
  border: 1px solid var(--rule); border-radius: var(--r-lg);
  background: var(--paper); overflow: hidden;
  box-shadow: 0 24px 50px -28px rgba(16,20,19,.34);
}
.ui__bar { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; background: var(--wash); border-bottom: 1px solid var(--rule); }
.ui__dot { width: 9px; height: 9px; border-radius: 50%; background: #cfd6d1; }
.ui__url { font-family: var(--mono); font-size: .74rem; color: var(--ink-soft); margin-left: .4rem; }
.ui__body { padding: 1.25rem; }
.ui__row { display: flex; align-items: baseline; gap: .6rem; padding: .7rem 0; border-bottom: 1px solid var(--rule); font-size: .9rem; }
.ui__row:last-child { border-bottom: 0; }
.ui__sc { font-family: var(--mono); font-weight: 600; font-size: .82rem; min-width: 3.2rem; }
.ui__name { color: var(--ink-soft); }
.ui__sev { margin-left: auto; font-family: var(--mono); font-size: .7rem; letter-spacing: .06em; text-transform: uppercase; padding: .18rem .45rem; border-radius: 999px; border: 1px solid currentColor; }
.sev-c { color: var(--sev-critical); } .sev-s { color: var(--sev-serious); }
.sev-m { color: var(--sev-moderate); } .sev-v { color: var(--sev-verified); }

.ui__summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border-bottom: 1px solid var(--rule); }
.ui__cell { background: var(--paper); padding: 1rem 1.1rem; }
.ui__cell b { display: block; font-size: 1.75rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.ui__cell span { font-size: .76rem; color: var(--ink-soft); font-family: var(--mono); letter-spacing: .04em; }

/* Sparkline-ish scan history bars */
.ui__hist { display: flex; align-items: flex-end; gap: 5px; height: 68px; padding: 1.1rem 1.25rem 0; }
.ui__hist i { flex: 1; background: #dfe6e0; border-radius: 2px 2px 0 0; }
.ui__hist i.up { background: var(--pine); }
.ui__hist i.now { background: var(--signal); }

/* --- Comparison: two columns, one clearly ours -------------------------- */
.vs { display: grid; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 820px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs__col { border: 1px solid var(--rule); border-radius: var(--r-md); padding: 1.6rem; background: var(--paper); }
.vs__col--ours { border: 2px solid var(--pine); }
.vs__h { display: flex; align-items: center; gap: .6rem; font-family: var(--mono); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.1rem; }
.vs__col--ours .vs__h { color: var(--pine); }
.vs ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; font-size: .96rem; }
.vs li { display: grid; grid-template-columns: 20px 1fr; gap: .7rem; align-items: start; color: var(--ink-soft); }
.vs li .ico { width: 18px; height: 18px; margin-top: .18rem; }
.vs__col--ours li .ico { color: var(--sev-verified); }
.vs__col--them li .ico { color: var(--sev-critical); }

/* --- Pull quote: our proof is a citation, not a fake testimonial --------- */
.pull { max-width: 46rem; margin-inline: auto; text-align: center; }
.pull blockquote {
  margin: 0; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 600;
  letter-spacing: -.02em; line-height: 1.32; text-wrap: balance;
}
.pull blockquote::before { content: "\201C"; color: var(--signal); }
.pull blockquote::after { content: "\201D"; color: var(--signal); }
.pull cite { display: block; margin-top: 1.5rem; font-style: normal; font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; color: #8fae9f; }
.pull cite a { color: inherit; }

/* --- Process rail: numbered, with a real vertical line ------------------- */
.rail { list-style: none; margin: 2.5rem 0 0; padding: 0; position: relative; }
.rail::before { content: ""; position: absolute; left: 17px; top: 12px; bottom: 12px; width: 2px; background: var(--rule); }
.rail li { position: relative; padding: 0 0 2rem 3.5rem; }
.rail li:last-child { padding-bottom: 0; }
.rail__n {
  position: absolute; left: 0; top: 0; width: 36px; height: 36px;
  border-radius: 50%; display: grid; place-items: center;
  background: var(--pine); color: var(--signal);
  font-family: var(--mono); font-size: .82rem; font-weight: 600;
}
.rail h3 { margin-bottom: .35rem; }
.rail p { color: var(--ink-soft); margin-bottom: 0; }

/* --- Card refinements: icons, and a hover that implies depth ------------- */
.card--icon h3 { margin-bottom: .4rem; }
.card--link { transition: border-color .15s ease, transform .15s ease; }
.card--link:hover { border-color: var(--pine); transform: translateY(-2px); }
.card__more { display: inline-flex; align-items: center; gap: .35rem; margin-top: 1rem; font-weight: 600; font-size: .92rem; text-decoration: none; }
.card__more::after { content: "\2192"; }
.card__more:hover { text-decoration: underline; text-decoration-thickness: 2px; }

/* --- Section heading block: give headings somewhere to sit -------------- */
.shead { max-width: 44rem; }
.shead h2 { margin-bottom: .5rem; }
.shead p { color: var(--ink-soft); font-size: clamp(1rem, 1.6vw, 1.15rem); }
.shead--center { margin-inline: auto; text-align: center; }
.shead--center p { margin-inline: auto; }

/* --- Widget panel mockup: the real thing, drawn in CSS ------------------- */
.wpanel { max-width: 22rem; border: 1px solid var(--rule); border-radius: var(--r-lg); background: var(--paper); box-shadow: 0 24px 50px -28px rgba(16,20,19,.34); overflow: hidden; }
.wpanel__head { display: flex; align-items: center; gap: .6rem; padding: .9rem 1.1rem; border-bottom: 1px solid var(--rule); font-weight: 600; }
.wpanel__head .ico { color: var(--pine); }
.wpanel__x { margin-left: auto; color: var(--ink-soft); font-family: var(--mono); }
.wpanel__grp { padding: 1rem 1.1rem; border-bottom: 1px solid var(--rule); }
.wpanel__grp:last-child { border-bottom: 0; }
.wpanel__lab { font-family: var(--mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 .7rem; }
.wpanel__opts { display: flex; flex-wrap: wrap; gap: .4rem; }
.wpanel__opt { font-size: .82rem; padding: .35rem .7rem; border: 1px solid var(--rule); border-radius: 999px; }
.wpanel__opt.on { background: var(--pine); color: #fff; border-color: var(--pine); }
.wpanel__sw { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; font-size: .9rem; }
.wpanel__sw i { margin-left: auto; width: 34px; height: 20px; border-radius: 999px; background: #d6dbd7; position: relative; flex: none; }
.wpanel__sw i::after { content: ""; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.wpanel__sw.on i { background: var(--pine); }
.wpanel__sw.on i::after { left: 17px; }
.wpanel__foot { padding: .8rem 1.1rem; background: var(--wash); font-size: .78rem; color: var(--ink-soft); display: flex; gap: .75rem; }

/* --- Figure spacing fixes ----------------------------------------------- */
/* Inline margins on figures left captions colliding with the next heading,
   and full-column photos were dominating the pages they illustrate. */
/* Only the flow cases: a figure sitting above a heading or a following block
   in prose. `.figure + div` used to be in this list and was far too greedy —
   in .split--flip the figure is the sibling column, so .split__text matched
   and picked up a top margin that knocked it out of vertical centring. */
.figure + h2,
.figure + h3,
.figure + .disclosure,
.figure + .grid,
.figure + ol {
  margin-top: 2.75rem;
}

/* Belt and braces: inside a two-column layout a figure is a column, never a
   block above something, so nothing beside it should gain flow spacing. */
.split > .figure + *,
.media > .figure + *,
.artifact > .figure + * { margin-top: 0; }
.figure figcaption { margin-bottom: 0; }
.wrap > .figure img, .wrap > div > .figure img { max-height: 460px; object-fit: cover; }
.split .figure img, .media .figure img { max-height: none; }

/* --- Fixes -------------------------------------------------------------- */
/* .shead p inherited --ink-soft (dark gray) and was being placed on pine,
   giving roughly 1.6:1. Caught in review; this is exactly the failure we
   charge clients to find. */
.band--pine .shead p,
.band--pine .split__text p,
.band--pine p { color: #c3d8cd; }
.band--pine .shead h2, .band--pine h2, .band--pine h3 { color: #fff; }

/* Percentage heights on flex children were not resolving against the
   container, so the history bars rendered at zero height. Explicit pixel
   heights via a modifier class instead. */
.ui__hist { align-items: flex-end; }
.ui__hist i { min-width: 6px; }
.h-95 { height: 46px } .h-88 { height: 43px } .h-80 { height: 39px }
.h-74 { height: 36px } .h-72 { height: 35px } .h-58 { height: 28px }
.h-44 { height: 21px } .h-36 { height: 18px } .h-34 { height: 17px }
.h-30 { height: 15px } .h-22 { height: 11px } .h-18 { height: 9px }
.shead--center .btn-row, .center .btn-row { justify-content: center; }

/* --- Split hero: solid panel + photo, no text over imagery ---------------
   Overlaying white text on a photograph forced the photo to stay dark to hold
   contrast. Copy on a solid pine panel frees the photograph to be bright and
   realistic, and removes the contrast risk rather than managing it.

   The grid is on the section, not inside .wrap, so the photograph bleeds to
   the viewport edge while the copy still lines up with every other section. */
.hero3 { background: var(--pine); color: #fff; display: grid; grid-template-columns: 1fr; }
@media (min-width: 940px) { .hero3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); } }

.hero3__pane { display: flex; justify-content: flex-end; padding-inline: var(--gutter); }
@media (min-width: 940px) {
  /* Zero right padding so the copy box is a full 590px — half of the 1180px
     wrap — which puts its left edge exactly on the wrap's, aligning the hero
     with every section below it. Breathing room comes from the copy's own
     padding instead. */
  .hero3__pane { padding-right: 0; }
}
.hero3__copy { width: min(590px, 100%); padding-block: clamp(2.5rem, 4.5vw, 3.75rem); align-self: center; }
@media (min-width: 940px) { .hero3__copy { padding-right: clamp(1.5rem, 3.5vw, 3.5rem); } }

.hero3 .eyebrow { color: var(--signal); }
.hero3 h1 { color: #fff; font-size: clamp(2.2rem, 4.4vw, 3.4rem); text-wrap: balance; margin-bottom: .35em; }
.hero3 .lede { color: #cfdcd4; max-width: 34rem; }

.hero3__media { position: relative; min-height: 300px; }
.hero3__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 40%; }
@media (max-width: 939px) { .hero3__media { min-height: 240px; order: -1; } }

/* --- Menu item states ----------------------------------------------------
   Clicking a menu item turns it green: both the moment it is pressed and,
   for the dropdowns, for as long as the panel stays open. Pine on white is
   ~11:1, so the state is carried by color AND the existing background and
   chevron rotation — never by color alone. */
.nav__trigger[aria-expanded="true"] { color: var(--pine); background: var(--wash); }
.nav__trigger[aria-expanded="true"] .nav__chev { color: var(--pine); }

.nav__trigger:active,
.nav__flat:active,
.nav__signin:active,
.nav__panel a:active .nav__label { color: var(--pine); }

/* The page you are currently on stays green in the menu too. */
.nav__trigger.is-active,
.nav__flat[aria-current="page"] { color: var(--pine); }
.nav__panel a[aria-current="page"] .nav__label { color: var(--pine); }

/* --- Pricing: billing-cycle toggle ---------------------------------------
   Real radio inputs, visually hidden but focusable, driving the prices with a
   sibling selector. No JavaScript at all, so the page still works with JS off
   (annual is the default and stays shown). */
.cycle-in { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.cycle {
  display: inline-flex; gap: .25rem; padding: .3rem;
  border: 1px solid var(--rule); border-radius: 999px; background: var(--paper);
  margin-top: 2rem;
}
.cycle label {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem 1.1rem; border-radius: 999px; cursor: pointer;
  font-weight: 600; font-size: .95rem; color: var(--ink-soft);
}
.cycle label:hover { color: var(--ink); }
.cycle .save {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  padding: .12rem .4rem; border-radius: 999px;
  background: var(--signal); color: var(--pine);
}
#cycle-year:checked  ~ .cycle label[for="cycle-year"],
#cycle-month:checked ~ .cycle label[for="cycle-month"] { background: var(--pine); color: #fff; }
#cycle-year:focus-visible  ~ .cycle label[for="cycle-year"],
#cycle-month:focus-visible ~ .cycle label[for="cycle-month"] {
  outline: 3px solid var(--ink); outline-offset: 2px; box-shadow: 0 0 0 6px var(--signal);
}
.p-month { display: none; }
#cycle-month:checked ~ .plans .p-year,
#cycle-month:checked ~ .compare .p-year { display: none; }
#cycle-month:checked ~ .plans .p-month,
#cycle-month:checked ~ .compare .p-month { display: inline; }

.plan__note { font-size: .85rem; color: var(--ink-soft); margin: -.35rem 0 0; }
/* The traffic allowance is what a buyer actually uses to choose a plan, so it
   gets chip treatment and sits directly under the plan name — not set as a
   gray mono footnote under the price where it read as a caveat. */
.plan__visits {
  align-self: flex-start;
  display: inline-flex; align-items: baseline; gap: .4rem;
  margin: 0; padding: .42rem .75rem;
  border-radius: 999px; background: #e7eee1; color: var(--pine);
  font-size: .8rem; font-weight: 600; letter-spacing: 0;
}
.plan__visits b { font-family: var(--mono); font-size: 1rem; font-weight: 700; letter-spacing: -.02em; }
.plan__visits--free { background: var(--wash); color: var(--ink-soft); }
.plan--featured .plan__visits { background: var(--pine); color: #fff; }
.plan--featured .plan__visits b { color: var(--signal); }

/* Comparison table */
.compare { margin-top: 3rem; }
.compare td.us { font-weight: 600; color: var(--pine); }
.compare td.them { color: var(--ink-soft); text-decoration: line-through; }
.compare td.save { font-family: var(--mono); font-size: .82rem; color: var(--sev-verified); }

/* Layout utilities.
   These exist because the site sends `style-src 'self'` with no
   'unsafe-inline', which means every `style="..."` attribute in the markup was
   being refused by the browser. The declarations below are the ones that were
   inline; as classes they actually apply. Keeping the strict CSP is the point —
   we tell clients the widget needs no 'unsafe-inline', and the site should be
   able to say the same. */
.u-mt-0   { margin-top: 0; }
.u-mt-sm  { margin-top: 1.5rem; }
.u-mt     { margin-top: 2rem; }
.u-mt-lg  { margin-top: 2.5rem; }
.u-mt-xl  { margin-top: 3rem; }
.u-m-0    { margin: 0; }
.u-block-lg { margin: 2.5rem 0 0; }
.u-block-y  { margin: 2.5rem 0; }
.u-pt-sm  { padding-top: .75rem; }
.u-measure       { max-width: 62ch; }
.u-measure-tight { max-width: 56ch; }
.u-measure-narrow{ max-width: 44rem; }
.u-measure-form  { max-width: 34rem; }
.u-center-row { justify-content: center; }
.u-list-inset { margin: 0; padding-inline-start: 1.2rem; }
/* An outlined button on a pine band, where the default ghost border vanishes. */
.u-onpine-outline { border: 2px solid #8fae9f; color: #fff; }
.u-normal-weight { font-weight: 400; }
.u-mb-0 { margin-bottom: 0; }
.u-meta-first { border-top: 0; padding-top: 1.15rem; }
/* A heading inside a .disclosure block, which is smaller than the band around it. */
.disclosure h2 { font-size: 1.05rem; margin: 0 0 .5rem; }
/* The icon sprite is injected into every page and must take up no space. This
   was an inline style, which `style-src 'self'` refused on every pageview. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; }