/* Design tokens + shared primitives (#850).
   Generated from the design_handoff_v2 bundle, namespaced under `.scanpage` so the
   handoff CSS cannot collide with styles.css — 25 class names overlap, among
   them `brand`, `btn`, `nav`, `wrap`, `chip`, and single letters like `g`/`n`.
   Tokens live on `.scanpage` rather than `:root` for the same reason: the handoff
   lowers `--muted` to #666e80 for AA, which must not change the whole site.
   Prototype scaffolding (.frame/.fr-label/.ann) is dropped; the handoff
   container query is a viewport media query here, per its own guidance. */
/* --- from redesign-tokens.css --- */
.scanpage {
  --bg: #fff;
  --bg-soft: #f6f7fb;
  --bg-soft-2: #eef0f6;
  --line: #e7e9f0;
  --line-soft: #eef0f4;
  --hair: #dfe3ec;
  --ink: #1e293b;
  --body: #475063;
  --muted: #666e80;
  --muted-soft: #8c9196;
  --indigo-1: #6366f1;
  --indigo-2: #4338ca;
  --indigo-soft: #eef0ff;
  --accent: oklch(0.74 0.135 213);
  --accent-deep: oklch(0.62 0.13 221);
  --accent-soft: oklch(0.95 0.04 211);
  --grad: linear-gradient(135deg, #6366f1, #4338ca);
  --bad: #c53b3b;
  --bad-soft: #fdf1f1;
  --warn: #a5761a;
  --warn-soft: #fdf6e7;
  --good: #1c7f5a;
  --good-soft: #eaf6f1;
  --warn-ink: #8a6216;
  --good-ink: #186b4d;
  --sans:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* The real site nav is `position: fixed` (styles.css) and this page opens on
     a full-bleed meta strip, so without this the strip slides underneath it.
     `--header-height` is the site's own token for exactly this, and it already
     accounts for the narrower nav below 760px. */
  padding-top: var(--header-height);
}
.scanpage,
.scanpage *,
.scanpage::before,
.scanpage *::before,
.scanpage::after,
.scanpage *::after {
  box-sizing: border-box;
}
.scanpage .wrap {
  width: min(1160px, 100% - 48px);
  margin: 0 auto;
}
.scanpage .mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}
.scanpage .eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--indigo-2);
}
.scanpage .sec-h {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.9px;
  margin: 0;
}
.scanpage .sec-sub {
  font-size: 16px;
  color: var(--body);
  margin: 8px 0 0;
  max-width: 640px;
}
.scanpage .btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 22px;
  border-radius: 9px;
  border: 1px solid transparent;
  cursor: pointer;
  letter-spacing: -0.1px;
}
.scanpage .btn-pri {
  background: var(--grad);
  color: #fff;
  box-shadow: 0 10px 24px -12px rgba(67, 56, 202, 0.55);
}
.scanpage .btn-pri:hover {
  color: #fff;
  text-decoration: none;
}
.scanpage .btn-gho {
  background: #fff;
  border-color: var(--hair);
  color: var(--ink);
}
.scanpage .btn-gho:hover {
  border-color: var(--indigo-1);
  color: var(--indigo-2);
  text-decoration: none;
}
.scanpage .btn-sm {
  font-size: 13.5px;
  padding: 9px 16px;
  border-radius: 8px;
}
.scanpage .nav {
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.9);
}
.scanpage .nav-in {
  width: min(1160px, 100% - 48px);
  margin: 0 auto;
  height: 70px;
  display: flex;
  align-items: center;
  gap: 36px;
}
.scanpage .brand {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink);
}
.scanpage .brand:hover {
  text-decoration: none;
  color: var(--ink);
}
.scanpage .brand svg {
  width: 30px;
  height: 30px;
}
.scanpage .brand i {
  font-style: normal;
  color: var(--indigo-2);
}
.scanpage .nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 28px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--body);
}
.scanpage .nav-links a:not(.btn) {
  color: var(--body);
}
.scanpage .nav-links a:not(.btn):hover {
  color: var(--indigo-2);
  text-decoration: none;
}
.scanpage .mlab {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.3px;
  text-transform: uppercase;
  color: var(--muted);
}
.scanpage .gauge {
  position: relative;
  flex: none;
}
.scanpage .gauge svg {
  display: block;
  transform: rotate(-90deg);
}
.scanpage .g-track {
  fill: none;
  stroke: #e9ecf3;
  stroke-width: 15;
}
.scanpage .g-ghost {
  fill: none;
  stroke: #dfe3f7;
  stroke-width: 15;
  stroke-linecap: round;
  stroke-dasharray: 552.9;
  stroke-dashoffset: calc(552.9 - 552.9 * var(--ghost, 0) / 100);
  animation: gDraw 1.5s 0.15s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.scanpage .g-val {
  fill: none;
  stroke: var(--gcol, var(--indigo-1));
  stroke-width: 15;
  stroke-linecap: round;
  stroke-dasharray: 552.9;
  stroke-dashoffset: calc(552.9 - 552.9 * var(--pct, 0) / 100);
  animation: gDraw 1.25s 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes gDraw {
  from {
    stroke-dashoffset: 552.9;
  }
}
.scanpage .g-mid {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.scanpage .g-num {
  font-family: var(--mono);
  font-size: 66px;
  font-weight: 700;
  letter-spacing: -3px;
  line-height: 1;
  color: var(--ink);
}
.scanpage .g-den {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--muted);
  margin-top: 6px;
}
.scanpage .bands {
  display: flex;
  flex-direction: column;
  gap: 7px;
  width: 100%;
}
.scanpage .bands-bar {
  display: grid;
  /* Set per-render from the bands' real widths, so the scale cannot misstate
     its own tiers. Falls back to an even split if the variable is missing. */
  grid-template-columns: var(--bands-cols, repeat(4, 1fr));
  gap: 3px;
  position: relative;
}
.scanpage .bands-bar i {
  height: 7px;
  border-radius: 2px;
  background: #e9ecf3;
  display: block;
}
.scanpage .bands-bar i.on {
  background: var(--gcol, var(--bad));
}
/* Boundary ticks. Absolutely positioned off the same proportions as the bar,
   so a number always sits over the edge it marks. */
.scanpage .bands-ax {
  position: relative;
  height: 15px;
}
.scanpage .bands-ax span {
  position: absolute;
  top: 0;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  transform: translateX(-50%);
  white-space: nowrap;
}
.scanpage .bands-ax span:first-child {
  transform: none;
}
.scanpage .bands-now {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.scanpage .bands-now b {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
}
.scanpage .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  padding: 5px 11px;
  border-radius: 6px;
  white-space: nowrap;
}
.scanpage .chip.bad {
  background: var(--bad-soft);
  color: var(--bad);
}
.scanpage .chip.warn {
  background: var(--warn-soft);
  color: var(--warn-ink);
}
.scanpage .chip.good {
  background: var(--good-soft);
  color: var(--good-ink);
}
.scanpage .chip.neu {
  background: var(--bg-soft-2);
  color: var(--body);
}
.scanpage .chip.ind {
  background: var(--indigo-soft);
  color: var(--indigo-2);
}
.scanpage .ft {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding: 44px 0 34px;
  margin-top: 0;
}
.scanpage .ft-in {
  width: min(1160px, 100% - 48px);
  margin: 0 auto;
  display: flex;
  gap: 70px;
  align-items: flex-start;
}
.scanpage .ft h5 {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 12px;
}
.scanpage .ft ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 14px;
}
.scanpage .ft ul a {
  color: var(--body);
}
.scanpage .ft-note {
  width: min(1160px, 100% - 48px);
  margin: 32px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}
.scanpage .meth {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 54px 0;
}
.scanpage .meth-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  margin-top: 26px;
}
.scanpage .meth-grid h4 {
  font-size: 15.5px;
  font-weight: 700;
  margin: 0 0 8px;
  letter-spacing: -0.2px;
}
.scanpage .meth-grid p {
  font-size: 14px;
  color: var(--body);
  margin: 0;
  line-height: 1.6;
}
.scanpage .meth-grid .n {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 700;
  color: var(--indigo-2);
  display: block;
  margin-bottom: 10px;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---------------------------------------------------------------------------
   Middle range (761-1207px) — authored here, NOT in the handoff.

   The handoff designs two endpoints, 1440 and 390, and lists the range between
   them as an open question. Left alone the page breaks rather than degrades:
   every page wrapper was a FIXED 1160px that only went fluid at the mobile
   breakpoint, so a 900px viewport scrolled sideways. Two changes fix it:

     1. Wrappers are `min(1160px, 100% - 48px)` — byte-identical to the
        handoff at >=1208px, fluid with 24px gutters below.
     2. The designed mobile breakpoint moved 520 -> 760. The stacked-card
        table treatment is already designed; below ~760px a six-to-eight
        column table cannot work, so it starts earlier rather than inventing
        a third treatment.

   Below: the fixed two-column grids collapse. Needs design sign-off.
   --------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  .scanpage .sa-hero-in {
    grid-template-columns: 1fr;
    gap: 34px;
    justify-items: start;
  }
  .scanpage .sa-twoup {
    grid-template-columns: 1fr;
    gap: 26px;
  }
  .scanpage .share,
  .scanpage .fixband-in,
  .scanpage .lbexp-top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .scanpage .exp-panel {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .scanpage .ogcard {
    width: 100%;
    max-width: 420px;
  }
  .scanpage .lb-summary {
    grid-template-columns: repeat(3, 1fr);
  }
  .scanpage .lb-summary > *:nth-child(3) {
    border-right: 0;
  }
  .scanpage .qa-grid {
    grid-template-columns: 1fr;
  }
}

/* ---------------------------------------------------------------------------
   Integration with the shared site chrome — not part of the handoff.

   The handoff prototypes draw their own static nav inside the frame; the real
   one is `position: fixed` (styles.css). The page's own clearance for it is
   the `padding-top` on `.scanpage` at the top of this file, kept there so the
   page root is declared exactly once.
   --------------------------------------------------------------------------- */

/* Answers the handoff's open question 3: any in-page anchor (#how-we-score is
   linked from the nav, the footer and the table foot) must clear the fixed nav. */
.scanpage [id] {
  scroll-margin-top: calc(var(--header-height) + 12px);
}

/* Elements this build introduces that the handoff CSS has no rule for. */
.scanpage .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* "Re-run this scan" is a real <button> (it performs an action, it is not a
   link), styled to match the anchors beside it in the meta strip. */
.scanpage .rpt-rescan,
.scanpage [data-pages-toggle] {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--indigo-2);
  cursor: pointer;
}
.scanpage .rpt-rescan:hover,
.scanpage [data-pages-toggle]:hover {
  text-decoration: underline;
}
.scanpage .rpt-rescan[disabled] {
  opacity: 0.55;
  cursor: default;
  text-decoration: none;
}

.scanpage .statusband-act {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.scanpage .sa-crawl .cr.cr-note {
  background: #fcfcfe;
  display: block;
  padding-top: 14px;
  padding-bottom: 14px;
}
.scanpage .sa-crawl .cr.cr-note span {
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.55;
  display: block;
}
.scanpage .sa-crawl .cr.cr-note b {
  color: var(--body);
}

.scanpage .sa-pg.sa-pg-note {
  background: #fcfcfe;
  color: var(--muted);
  font-size: 12.5px;
}
.scanpage .sa-pg.sa-pg-note .u {
  color: var(--muted);
}

.scanpage .exp-none {
  color: var(--muted);
  font-size: 13.5px;
  margin: 8px 0 0;
}

.scanpage .fixrow.fixrow-total {
  background: #fcfcfe;
}
.scanpage .fixrow.fixrow-total .fx-p {
  color: var(--ink);
}

/* Focus is undesigned in the handoff; every interactive element needs one. */
.scanpage a:focus-visible,
.scanpage button:focus-visible,
.scanpage input:focus-visible,
.scanpage select:focus-visible,
.scanpage [tabindex]:focus-visible {
  outline: 2px solid var(--indigo-1);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .scanpage .g-val,
  .scanpage .g-ghost {
    animation: none;
  }
  .scanpage .spin,
  .scanpage .skel {
    animation: none;
  }
}

/* Defect in the handoff CSS, not a porting slip: `.sa-bar` is a <span> and the
   handoff sets width/height on it without a `display`, so the ledger's "Earned"
   bar collapsed to a 0x0 box and never rendered (its inner fill measured 0px
   tall). Same fix would be needed in the prototype. */
.scanpage .sa-bar {
  display: inline-block;
  vertical-align: middle;
}

/* Last-scan cell. The prototype styles this inline; a class keeps the value
   out of the markup so the renderer emits no presentational style attribute. */
.scanpage .la-when {
  font-size: 13px;
  color: var(--muted);
}

/* Ledger group headers (#850 follow-up). The six categories do not carry equal
   meaning — access is a gate, comprehension decides whether an assistant can
   recommend a product, and search/sharing is neither — so the table groups them
   and states each group's own earned/possible. */
.scanpage .sa-tbl tr.grp > td {
  padding: 26px 0 10px;
  border-bottom: 1px solid var(--line);
}
.scanpage .sa-tbl tbody tr.grp:first-child > td {
  padding-top: 6px;
}
.scanpage .grp-l {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin-right: 10px;
}
.scanpage .grp-p {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
}
.scanpage .grp-b {
  display: block;
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 4px;
  max-width: 620px;
  line-height: 1.5;
}
@media (max-width: 760px) {
  .scanpage .sa-tbl tr.grp > td {
    padding: 22px 0 8px;
  }
  .scanpage .grp-b {
    max-width: none;
  }
}