/* ==========================================================================
   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 -------------------------------------------------- */
.site-head { border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: rgba(255,255,255,.96); backdrop-filter: blur(10px); z-index: 60; }
/* Three columns so the menu centres 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; }
.nav__cta { margin-left: .3rem; padding: .6rem 1.1rem; font-size: .93rem; }

/* 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 {
    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 { display: none; }
  .nav__cta { margin: 0; }
  .nav__cta { margin: 1.25rem 0 0; justify-content: center; padding: .85rem 1.2rem; }
  .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; }
.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="url"] {
  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="url"]::placeholder { color: #8fae9f; }
.scan input[type="url"]: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; }

/* 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 grey) 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 colour AND the existing background and
   chevron rotation — never by colour 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
   grey 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); }