/* PageRanker shared styles.
   Shape rule, kept everywhere: controls (inputs, buttons) are 10px,
   panels and tables are 16px, chips and badges are fully round.
   Color lives in tokens only. light-dark() carries both themes in one
   declaration, so a new token can never ship with its dark half missing. */

:root {
  color-scheme: light dark;
  interpolate-size: allow-keywords;

  --bg: light-dark(#f3f5f4, #0b1114);
  --surface: light-dark(#ffffff, #11191e);
  --surface-2: light-dark(#e9eeec, #172228);
  --ink: light-dark(#0f1a22, #e3eaed);
  --ink-2: light-dark(#45535d, #a2b0b8);
  --ink-3: light-dark(#5d6b74, #8a99a2);
  --line: light-dark(#d3dbd8, #233139);
  --line-strong: light-dark(#a9b5b1, #3a4b55);
  --accent: light-dark(#2140d0, #8fa7ff);
  --accent-hover: light-dark(#1832ad, #b0c1ff);
  --accent-ink: light-dark(#ffffff, #0a0f2c);
  --accent-soft: light-dark(#e2e7fb, #18224a);
  --good: light-dark(#14704a, #5fd39b);
  --good-soft: light-dark(#dcf1e6, #10301f);
  --warn: light-dark(#8f5400, #f0b24f);
  --warn-soft: light-dark(#f8ead2, #33250c);
  --bad: light-dark(#b02a20, #ff8c80);
  --bad-soft: light-dark(#f8e0dd, #3a1714);
  --bezel: light-dark(#1b252c, #2b3841);
  --deck-1: light-dark(#dde3e1, #3d4b54);
  --deck-2: light-dark(#b3bdba, #26333b);
  --shadow: light-dark(0 1px 2px rgb(15 26 34 / .06), 0 1px 2px rgb(0 0 0 / .4));
  --shadow-lg: light-dark(0 24px 60px -20px rgb(17 35 70 / .28), 0 24px 60px -20px rgb(0 0 0 / .7));

  --font-head: "Red Hat Display", system-ui, sans-serif;
  --font-body: "Red Hat Text", system-ui, sans-serif;
  --r: 10px;
  --r-lg: 16px;
  --wrap: 1180px;
  --gutter: 16px;
}

@media (min-width: 720px) { :root { --gutter: 28px; } }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--font-body);
  font-feature-settings: "tnum" 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}
main { flex: 1; }

h1, h2, h3, h4 { font-family: var(--font-head); line-height: 1.12; margin: 0 0 .5em; text-wrap: balance; letter-spacing: -.012em; }
h1 { font-weight: 800; }
h2 { font-weight: 800; font-size: clamp(1.75rem, 3.6vw, 2.55rem); letter-spacing: -.02em; }
h3 { font-weight: 700; font-size: 1.15rem; }
p, li, dd { text-wrap: pretty; }
p { margin: 0 0 1em; }
a { color: var(--accent); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-hover); text-decoration-thickness: 2px; }
img, svg { max-width: 100%; }
.num, td.n, .tile-v, .ring-v { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.narrow { max-width: 760px; }
.muted { color: var(--ink-2); }
.small { font-size: .9rem; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip { position: absolute; left: 8px; top: -60px; z-index: 30; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: var(--r); }
.skip:focus { top: 8px; }

/* ───────── header ───────── */

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--line);
  view-transition-name: site-header;
}
.header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font: 800 1.2rem/1 var(--font-head); letter-spacing: -.02em; }
.brand:hover { color: var(--ink); }
.mark { width: 30px; height: 30px; flex: none; view-transition-name: brand-mark; }
.site-nav { display: flex; align-items: center; gap: 4px; }
.site-nav a, .nav-btn {
  font: 500 .95rem/1 var(--font-body); color: var(--ink); text-decoration: none;
  padding: 12px 10px; border-radius: var(--r); background: none; border: 0; cursor: pointer; min-height: 44px; display: inline-flex; align-items: center;
}
.site-nav a:hover, .nav-btn:hover { background: var(--surface-2); color: var(--ink); }
.site-nav a[aria-current="page"] { color: var(--accent); }
.nav-btn.solid { border: 1px solid var(--line-strong); margin-left: 4px; }
@media (max-width: 420px) { .site-nav a.hide-sm { display: none; } }
/* Page checker made it four links. At phone width the labels wrapped onto
   two lines and pushed Sign in 8px off screen, so Enterprise goes first,
   then the spacing tightens. Same rules as page-checker.css, so that page
   and this header match. */
@media (max-width: 520px) { .site-nav a.pc-hide-md { display: none; } }
@media (max-width: 440px) {
  .site-header .header-row { gap: 6px; }
  .site-header .brand { gap: 7px; font-size: 1.05rem; }
  .site-header .mark { width: 26px; height: 26px; }
  .site-nav { gap: 0; }
  .site-nav a, .site-nav .nav-btn { padding-inline: 7px; font-size: .9rem; white-space: nowrap; }
  /* Signed in, the wider Account button still overflowed. Someone with an
     account has seen the prices; Account is the link they need. */
  .site-nav:has([data-auth="in"]:not([hidden])) a[href="/pricing/"] { display: none; }
}
/* Even tightened, four items ran 20px into the right gutter at 375px.
   The mark stays and the link keeps its aria-label. */
@media (max-width: 400px) { .site-header .brand span { display: none; } }

/* ───────── buttons and fields ───────── */

.btn {
  --b: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; border-radius: var(--r);
  font: 700 1rem/1 var(--font-body); white-space: nowrap;
  background: var(--b); color: var(--accent-ink); border: 1px solid var(--b);
  cursor: pointer; text-decoration: none; text-box: trim-both cap alphabetic;
  transition: background-color .15s, transform .1s, box-shadow .15s;
}
.btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .6; cursor: progress; }
.btn.quiet { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn.quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn.danger { background: transparent; color: var(--bad); border-color: currentColor; }
.btn.danger:hover { background: var(--bad-soft); color: var(--bad); }
.btn.small { min-height: 40px; padding: 0 14px; font-size: .92rem; }
.btn.block { width: 100%; }
.linkish { background: none; border: 0; padding: 0; color: var(--accent); font: inherit; text-decoration: underline; text-underline-offset: .18em; cursor: pointer; min-height: 32px; }

label, .label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
.field { margin-bottom: 16px; }
.hint { display: block; font-weight: 400; color: var(--ink-2); font-size: .88rem; margin-top: 4px; }
input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input:not([type]), textarea, select {
  width: 100%; min-height: 48px; padding: 10px 14px;
  font: 400 1rem/1.4 var(--font-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r);
  transition: border-color .15s, box-shadow .15s;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 30%, transparent); }
input[aria-invalid="true"] { border-color: var(--bad); }
textarea { field-sizing: content; min-block-size: 4lh; max-block-size: 14lh; resize: vertical; }
.check { display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; font-weight: 400; font-size: .95rem; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--accent); }
.err { color: var(--bad); font-size: .93rem; font-weight: 500; margin: 8px 0 0; }
.err:empty, .ok-msg:empty { display: none; }
.ok-msg { color: var(--good); font-weight: 500; margin: 8px 0 0; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.grid-2 { display: grid; gap: 0 14px; }
@media (min-width: 560px) { .grid-2 { grid-template-columns: 1fr 1fr; } }

.notice { border-radius: var(--r-lg); padding: 14px 16px; background: var(--surface); border: 1px solid var(--line); }
.notice.warn { background: var(--warn-soft); border-color: color-mix(in oklab, var(--warn) 35%, transparent); }
.notice.bad { background: var(--bad-soft); border-color: color-mix(in oklab, var(--bad) 35%, transparent); }
.notice.good { background: var(--good-soft); border-color: color-mix(in oklab, var(--good) 35%, transparent); }
.notice p:last-child { margin-bottom: 0; }

.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow); }
@media (min-width: 720px) { .panel { padding: 28px; } }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font: 700 .78rem/1.5 var(--font-body); background: var(--surface-2); color: var(--ink-2); white-space: nowrap; }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.warn { background: var(--warn-soft); color: var(--warn); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }
.chip.accent { background: var(--accent-soft); color: var(--accent); }

/* ───────── page sections ───────── */

.section { padding-block: clamp(56px, 8vw, 104px); }
.section + .section { padding-top: 0; }
.section-head { max-width: 660px; margin-bottom: clamp(32px, 4vw, 48px); }
.section-head p { color: var(--ink-2); font-size: 1.08rem; margin: 0; }
.page-head { padding-block: clamp(40px, 6vw, 72px) 24px; }
.page-head h1 { font-size: clamp(2.2rem, 5vw, 3.5rem); letter-spacing: -.025em; line-height: 1.04; }
.page-head .lede { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; }

/* ───────── home hero and the score scale ───────── */

.hero { padding-block: clamp(28px, 6vw, 72px) 8px; }
.hero h1 { font-size: clamp(2.5rem, 6.6vw, 4.75rem); line-height: 1; letter-spacing: -.03em; margin-bottom: 20px; }
.hero h1 span { display: block; }

/* The form keeps the left column and comes first in the source, so on a
   phone it sits above the fold and the laptop falls below it. */
.hero-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 980px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 56px; }
  .hero h1 { font-size: clamp(2.9rem, 4.7vw, 4.2rem); }
}
.hero-shot { margin: 0; position: relative; isolation: isolate; }
.hero-shot::before {
  content: ""; position: absolute; z-index: -1; inset: 14% 0 6% 14%;
  border-radius: var(--r-lg); background: var(--accent-soft);
}
@media (min-width: 980px) { .hero-shot::before { inset: 12% -3% 4% 18%; } }
.hero-shot figcaption, .intro figcaption, .shot-cap { margin-top: 14px; font-size: .88rem; color: var(--ink-2); text-align: center; }
.hero .lede { font-size: clamp(1.08rem, 2vw, 1.25rem); color: var(--ink-2); max-width: 46ch; margin-bottom: 28px; }

.audit-form { max-width: 720px; }
.audit-row {
  display: grid; gap: 8px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: calc(var(--r) + 6px);
  padding: 6px; box-shadow: var(--shadow-lg);
  transition: border-color .15s, box-shadow .15s;
}
.audit-row:focus-within { border-color: var(--accent); }
.audit-row input {
  border: 0; background: transparent; min-height: 56px; font: 500 1.2rem/1.2 var(--font-body); padding-inline: 12px;
}
.audit-row input:focus-visible { box-shadow: none; }
.audit-row .btn { min-height: 56px; font-size: 1.05rem; padding-inline: 26px; }
@media (min-width: 600px) { .audit-row { grid-template-columns: 1fr auto; } }
.audit-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px; font-size: .95rem; color: var(--ink-2); }
.audit-meta strong { color: var(--ink); }
.audit-msg { margin-top: 14px; }

.scale-wrap { margin-top: clamp(40px, 6vw, 64px); }
.scale {
  position: relative; height: 56px; color: var(--line-strong);
  border-bottom: 2px solid var(--ink);
  background:
    repeating-linear-gradient(90deg, currentColor 0 1px, transparent 1px 5%) bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--ink) 0 2px, transparent 2px 25%) bottom / 100% 26px no-repeat;
}
.scale::after { content: ""; position: absolute; right: 0; bottom: 0; width: 2px; height: 26px; background: var(--ink); }
.scale-fill {
  position: absolute; left: 0; bottom: 0; height: 100%; width: 100%;
  background: linear-gradient(90deg, transparent, color-mix(in oklab, var(--accent) 22%, transparent));
  border-right: 3px solid var(--accent);
  transform-origin: left; scale: 0 1; opacity: 0;
}
.scale-labels { position: relative; height: 28px; font: 700 .85rem/1 var(--font-head); color: var(--ink-2); font-variant-numeric: tabular-nums; }
.scale-labels span { position: absolute; top: 10px; translate: -50% 0; }
.scale-labels span:first-child { translate: 0 0; }
.scale-labels span:last-child { translate: -100% 0; }
.scale-cap { margin-top: 18px; max-width: 62ch; color: var(--ink-2); }
.scale-cap strong { color: var(--ink); }

.running .scale-fill { opacity: 1; scale: .94 1; transition: scale 11s cubic-bezier(.15, .7, .25, 1), opacity .2s; }
.running .audit-row { border-color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .running .scale-fill { transition: none; scale: .5 1; } }

/* ───────── what the audit checks ───────── */

.checks-grid { display: grid; gap: 14px; }
@media (min-width: 760px) { .checks-grid { grid-template-columns: repeat(2, 1fr); } .checks-grid > .check-wide { grid-column: 1 / -1; } }
.check-cell { border-radius: var(--r-lg); padding: 24px; background: var(--surface); border: 1px solid var(--line); display: grid; grid-template-rows: auto auto 1fr; gap: 6px; }
@media (min-width: 720px) { .check-cell { padding: 28px 30px; } }
.check-cell:nth-child(1) { background: var(--accent-soft); border-color: transparent; }
.check-cell:nth-child(4) { background: var(--surface-2); border-color: transparent; }
.check-cell h3 { margin: 6px 0 0; font-size: 1.2rem; }
.check-cell p { margin: 0; color: var(--ink-2); max-width: 52ch; }
.check-wide { grid-template-rows: none; gap: 24px; align-items: center; overflow: hidden; }
@media (min-width: 900px) {
  .check-wide { grid-template-columns: minmax(0, .75fr) minmax(0, 1.4fr); gap: 40px; padding: 36px 0 0 30px; align-items: end; }
  .check-wide-text { align-self: center; padding-bottom: 36px; }
  .check-wide .frame-browser { border-right: 0; border-bottom: 0; border-radius: var(--r-lg) 0 0 0; box-shadow: var(--shadow); }
}
.glyph { height: 64px; display: flex; align-items: end; gap: 6px; }
.glyph-bars i { display: block; width: 14px; border-radius: 3px 3px 0 0; background: var(--accent); }
.glyph-sev { flex-direction: column; align-items: stretch; justify-content: end; gap: 5px; width: 140px; }
.glyph-sev i { display: block; height: 10px; border-radius: 3px; }

/* ───────── device frames around the real screenshots ─────────
   Every picture inside these is a 2x capture of a live report. The frames
   are CSS so they follow the theme; the captures stay light on purpose,
   because that is how the report prints. */

.laptop { padding-inline: 6%; }
.laptop-screen { background: var(--bezel); padding: 2.2% 2.2% 2.8%; border-radius: 18px 18px 4px 4px; box-shadow: var(--shadow-lg); }
.laptop-screen img { display: block; width: 100%; height: auto; border-radius: 3px; }
.laptop-base {
  position: relative; height: 14px; margin-inline: -6.5%;
  background: linear-gradient(var(--deck-1), var(--deck-2));
  border-radius: 2px 2px 14px 14px; box-shadow: 0 12px 24px -12px rgb(17 35 70 / .35);
}
.laptop-base::before { content: ""; position: absolute; left: 50%; top: 0; translate: -50% 0; width: 15%; height: 5px; border-radius: 0 0 6px 6px; background: var(--deck-2); }

.frame-browser { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.frame-browser img, .frame-browser video { display: block; width: 100%; height: auto; }
.chrome { display: flex; align-items: center; gap: 12px; height: 34px; padding: 0 12px; background: var(--surface-2); border-bottom: 1px solid var(--line); }
.chrome::before { content: ""; flex: none; width: 40px; height: 10px; background: radial-gradient(circle at 5px 5px, var(--line-strong) 4.5px, transparent 5px) 0 0 / 15px 10px repeat-x; }
.url { flex: 0 1 300px; min-width: 0; margin-inline: auto; translate: -26px 0; height: 22px; border-radius: 999px; background: var(--surface); color: var(--ink-2); font: 500 .74rem/22px var(--font-body); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-inline: 10px; }

.phone { position: relative; margin: 0 auto; width: min(280px, 76%); padding: 30px 9px 9px; border-radius: 44px; background: var(--bezel); box-shadow: var(--shadow-lg); }
.phone::before { content: ""; position: absolute; top: 10px; left: 50%; translate: -50% 0; width: 26%; height: 12px; border-radius: 999px; background: var(--bezel); }
.phone img { display: block; width: 100%; height: auto; border-radius: 6px 6px 34px 34px; }

.paper { position: relative; margin: 0 auto; width: min(440px, 78%); background: #fff; rotate: -1.6deg; box-shadow: 0 1px 2px rgb(15 26 34 / .1), 0 30px 60px -24px rgb(17 35 70 / .4); }
.paper::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fbfcfc; rotate: 4deg; box-shadow: 0 20px 40px -24px rgb(17 35 70 / .35); }
.paper img { display: block; width: 100%; height: auto; }

/* ───────── how an audit works: the walkthrough ───────── */

.walk-section { overflow-x: clip; }
.intro { margin: 0 0 clamp(48px, 7vw, 88px); max-width: 960px; }
.walk { list-style: none; margin: 0; padding: 0; position: relative; display: grid; gap: clamp(64px, 9vw, 128px); counter-reset: walk; }
.walk > li { counter-increment: walk; display: grid; gap: 28px; min-width: 0; }
.walk-text { position: relative; padding-left: 62px; min-height: 44px; }
.walk-text::before {
  content: counter(walk); position: absolute; left: 0; top: 0; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ink); color: var(--bg); font: 800 1.1rem/1 var(--font-head);
  box-shadow: 0 0 0 6px var(--bg);
}
.walk-text h3 { font-size: clamp(1.3rem, 2.3vw, 1.65rem); line-height: 1.15; margin: 8px 0 10px; }
.walk-text p { color: var(--ink-2); margin: 0; max-width: 40ch; }
.walk-media { min-width: 0; }
@media (min-width: 900px) {
  .walk > li { grid-template-columns: minmax(250px, .78fr) minmax(0, 1.6fr); gap: 64px; align-items: start; }
  .walk-text { position: sticky; top: 112px; }
  /* The rail the numbers sit on. Its blue half is drawn by scroll below. */
  .walk::before, .walk::after { content: ""; position: absolute; left: 21px; top: 22px; bottom: 0; width: 2px; background: var(--line); }
  .walk::after { background: var(--accent); transform-origin: top; display: none; }
}
.walk-phone { background: var(--accent-soft); border-radius: var(--r-lg); padding: 40px 16px 0; max-height: 540px; overflow: hidden; }
.walk-phone .phone { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.walk-pair { position: relative; padding-bottom: 14%; }
.walk-pair .back { width: 88%; }
.walk-pair .front { position: absolute; right: 0; bottom: 0; width: 64%; }
.walk-pair .front.short { width: 70%; }
@media (max-width: 560px) { .walk-pair .front { width: 78%; } .walk-pair .front.short { width: 86%; } .walk-pair { padding-bottom: 26%; } }
.walk-paper .paper { width: min(360px, 72%); }
.walk-paper { isolation: isolate; background: var(--surface-2); border-radius: var(--r-lg); padding: 44px 0; }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .walk-media { animation: lift linear both; animation-timeline: view(); animation-range: entry 0% cover 28%; }
    .walk-pair .front { animation: tuck linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    @keyframes lift { from { opacity: 0; translate: 0 48px; } }
    @keyframes tuck { from { translate: 6% 10%; } }
    @media (min-width: 900px) {
      .walk::after { display: block; animation: rail linear both; animation-timeline: view(); animation-range: cover 0% cover 75%; }
      @keyframes rail { from { scale: 1 0; } }
    }
  }
}

/* ───────── pricing and enterprise imagery ───────── */

.split-head { display: grid; gap: 32px; align-items: center; }
@media (min-width: 900px) { .split-head { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 56px; } }
.split-head .paper { width: min(320px, 70%); }
.every { display: grid; gap: 40px; align-items: center; margin-top: clamp(56px, 8vw, 96px); padding: clamp(24px, 4vw, 48px); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 900px) { .every { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }
.every h2 { margin-bottom: 12px; }
.every p { color: var(--ink-2); max-width: 46ch; }
.every ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.every li { padding-left: 24px; position: relative; }
.every li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); rotate: -45deg; }
.every-shots { position: relative; isolation: isolate; padding: 8px 18% 24px 0; }
.every-shots .paper { width: 100%; max-width: 380px; margin: 0; }
.every-shots .phone { position: absolute; right: 0; bottom: 0; width: 38%; padding: 18px 6px 6px; border-radius: 28px; }
.every-shots .phone::before { top: 6px; height: 7px; }
.every-shots .phone img { border-radius: 4px 4px 22px 22px; }

/* ───────── price strip (home) ───────── */

.price-strip { display: grid; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
.price-strip > div { padding: 22px 24px; border-bottom: 1px solid var(--line); }
.price-strip > div:last-child { border-bottom: 0; }
@media (min-width: 760px) { .price-strip { grid-template-columns: repeat(5, 1fr); } .price-strip > div { border-bottom: 0; border-right: 1px solid var(--line); } .price-strip > div:last-child { border-right: 0; } }
.price-strip .p-name { font: 700 1rem/1.2 var(--font-head); }
.price-strip .p-price { font: 800 1.9rem/1.1 var(--font-head); margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.price-strip .p-price small { font: 500 .9rem var(--font-body); color: var(--ink-2); }
.price-strip .p-note { color: var(--ink-2); font-size: .92rem; margin: 0; }
.price-strip .p-ent { background: var(--surface-2); }

/* ───────── FAQ: exclusive accordion ───────── */

.faq-layout { display: grid; gap: 28px; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 1fr 1.7fr; gap: 56px; } .faq-layout .section-head { position: sticky; top: 96px; align-self: start; } }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-child { border-top: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative;
  font: 700 1.1rem/1.35 var(--font-head);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 8px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); rotate: 45deg; transition: rotate .25s, margin .25s;
}
.faq details[open] summary::after { rotate: 225deg; margin-top: -2px; }
.faq summary:hover { color: var(--accent); }
.faq details > div { padding: 0 0 20px; color: var(--ink-2); max-width: 64ch; }
.faq details > div p:last-child { margin: 0; }
details::details-content { block-size: 0; overflow: clip; transition: block-size .3s ease, content-visibility .3s allow-discrete; }
details[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) { details::details-content { transition: none; } }

/* ───────── footer ───────── */

.site-footer { border-top: 1px solid var(--line); padding-block: 40px 48px; margin-top: 40px; font-size: .92rem; color: var(--ink-2); }
.foot-top { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.foot-links a { color: var(--ink); text-decoration: none; padding: 10px 8px; min-height: 44px; display: inline-flex; align-items: center; }
.foot-links a:hover { text-decoration: underline; }
.foot-note { margin: 0 0 6px; }
.foot-op { margin: 0; color: var(--ink-3); }

/* ───────── dialogs ───────── */

dialog.modal {
  width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px);
  padding: 0; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg);
  opacity: 0; translate: 0 14px;
  transition: opacity .2s ease, translate .25s ease, display .25s allow-discrete, overlay .25s allow-discrete;
}
dialog.modal.wide { width: min(880px, calc(100vw - 24px)); }
dialog.modal[open] { opacity: 1; translate: 0 0; }
@starting-style { dialog.modal[open] { opacity: 0; translate: 0 14px; } }
dialog.modal::backdrop { background: rgb(8 14 20 / 0); transition: background-color .25s, display .25s allow-discrete, overlay .25s allow-discrete; }
dialog.modal[open]::backdrop { background: rgb(8 14 20 / .55); }
@starting-style { dialog.modal[open]::backdrop { background: rgb(8 14 20 / 0); } }
@media (prefers-reduced-motion: reduce) { dialog.modal, dialog.modal::backdrop { transition: none; } }
.modal-body { padding: 22px; }
@media (min-width: 600px) { .modal-body { padding: 30px; } }
.modal-head { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.modal-head h2 { font-size: 1.5rem; margin: 6px 0 0; }
.x { flex: none; width: 44px; height: 44px; border-radius: var(--r); border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-size: 1.4rem; line-height: 1; }
.x:hover { background: var(--surface-2); }
.modal hr { border: 0; border-top: 1px solid var(--line); margin: 24px 0; }
.mini-plans { display: grid; gap: 10px; margin: 18px 0 10px; }
@media (min-width: 640px) { .mini-plans { grid-template-columns: repeat(3, 1fr); } }
.mini-plan { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.mini-plan.rec { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.mini-plan b { font: 700 1.05rem var(--font-head); }
.mini-plan .mp-price { font: 800 1.6rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.mini-plan .mp-price small { font: 500 .85rem var(--font-body); color: var(--ink-2); }
.mini-plan ul { margin: 0 0 8px; padding-left: 18px; font-size: .9rem; color: var(--ink-2); }
.mini-plan .btn { margin-top: auto; }
.inline-form { display: grid; gap: 8px; }
@media (min-width: 520px) { .inline-form { grid-template-columns: 1fr auto; } }

/* ───────── rings and tiles (report, compare, account) ───────── */

.ring { position: relative; display: inline-grid; place-items: center; }
.ring svg { display: block; rotate: -90deg; }
.ring .trk { stroke: var(--surface-2); }
.ring .val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dasharray 1.1s cubic-bezier(.2, .8, .2, 1); }
@starting-style { .ring .val { stroke-dasharray: 0 100; } }
.ring.good .val { stroke: var(--good); }
.ring.warn .val { stroke: var(--warn); }
.ring.bad .val { stroke: var(--bad); }
.ring.none .val { stroke: transparent; }
.ring-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.ring-v { font: 800 1em/1 var(--font-head); letter-spacing: -.03em; }
.ring-l { font: 500 .78rem/1.2 var(--font-body); color: var(--ink-2); margin-top: 4px; }
@media (prefers-reduced-motion: reduce) { .ring .val { transition: none; } }

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
@media (min-width: 760px) { .tiles { grid-template-columns: repeat(5, 1fr); } }
.tile { background: var(--surface); padding: 16px 18px; }
.tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 760px) { .tile:last-child:nth-child(odd) { grid-column: auto; } }
.tile-l { font-size: .86rem; color: var(--ink-2); display: block; }
.tile-v { font: 800 clamp(1.4rem, 3vw, 1.85rem)/1.15 var(--font-head); letter-spacing: -.02em; display: block; margin-top: 4px; }

/* ───────── report ───────── */

.r-head { padding-block: 28px 20px; }
.r-top { display: grid; gap: 24px; align-items: center; }
@media (min-width: 900px) { .r-top { grid-template-columns: 1fr auto; } }
.r-domain { font-size: clamp(1.9rem, 5vw, 3.1rem); letter-spacing: -.025em; word-break: break-word; margin-bottom: 6px; }
.r-date { color: var(--ink-2); margin: 0 0 16px; }
.r-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.r-gauges { display: flex; gap: 20px; flex-wrap: wrap; }
.r-gauge { display: grid; justify-items: center; gap: 8px; text-align: center; }
.r-gauge .cap { font: 700 .92rem/1.2 var(--font-head); }
.r-gauge .sub { font-size: .82rem; color: var(--ink-2); max-width: 18ch; }

.r-nav { position: sticky; top: 64px; z-index: 10; background: color-mix(in oklab, var(--bg) 92%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.r-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.r-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--ink-2); font-weight: 500; white-space: nowrap; border-radius: var(--r); }
.r-nav a:hover { color: var(--ink); background: var(--surface-2); }

.r-sec { padding-block: 40px 8px; scroll-margin-top: 120px; }
.r-sec > h2 { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.verdict { font-size: 1.1rem; max-width: 70ch; padding: 14px 18px; border-left: 4px solid var(--accent); background: var(--surface); border-radius: 0 var(--r) var(--r) 0; margin-bottom: 24px; }
.verdict.good { border-color: var(--good); }
.verdict.warn { border-color: var(--warn); }
.verdict.bad { border-color: var(--bad); }
.verdict strong { font-weight: 700; }
.r-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .r-grid.two { grid-template-columns: 1fr 1fr; } .r-grid.wide-left { grid-template-columns: 1.4fr 1fr; } }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px; min-width: 0; box-shadow: var(--shadow); }
.card h3 { font-size: 1.05rem; margin-bottom: 14px; }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 20px; margin: 0; }
.stats div { min-width: 0; }
.stats dt { font-size: .85rem; color: var(--ink-2); }
.stats dd { margin: 2px 0 0; font: 700 1.25rem/1.2 var(--font-head); font-variant-numeric: tabular-nums; }

/* Result cards enter one after another. sibling-index() reads each card's
   place among its siblings, so no inline --i is needed in the markup. */
@media (prefers-reduced-motion: no-preference) {
  .stagger > * { animation: rise .5s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(sibling-index() * 70ms); }
  @keyframes rise { from { opacity: 0; translate: 0 10px; } }
}

.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th, td { text-align: left; padding: 11px 14px; vertical-align: top; }
thead th { font: 700 .82rem/1.3 var(--font-body); color: var(--ink-2); background: var(--surface-2); white-space: nowrap; position: sticky; top: 0; }
tbody tr + tr td, tbody tr + tr th { border-top: 1px solid var(--line); }
td.n, th.n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.url { max-width: 340px; overflow-wrap: anywhere; }
.long-list tbody tr { content-visibility: auto; contain-intrinsic-size: auto 46px; }
th button { all: unset; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; min-height: 28px; }
th button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
th[aria-sort="ascending"] button::after { content: "\2191"; }
th[aria-sort="descending"] button::after { content: "\2193"; }

.bars { display: grid; gap: 8px; }
.bar-row { display: grid; grid-template-columns: 64px 1fr 64px; gap: 10px; align-items: center; font-size: .92rem; }
.bar-row .bar { height: 16px; border-radius: 0 4px 4px 0; background: var(--accent); min-width: 2px; }
.bar-row .bar.zero { background: var(--line-strong); }
.bar-row .n { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

.mix { display: flex; height: 22px; border-radius: 6px; overflow: hidden; gap: 2px; margin-bottom: 12px; }
.mix i { display: block; height: 100%; background: var(--accent); }
.legend { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .9rem; }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; background: var(--accent); }

.moves { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.moves div { background: var(--surface-2); border-radius: var(--r); padding: 12px 6px; }
.moves b { display: block; font: 800 1.35rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.moves span { font-size: .82rem; color: var(--ink-2); }

.sev-group + .sev-group { margin-top: 22px; }
.sev-group h3 { display: flex; align-items: center; gap: 10px; }
.issue { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.issue + .issue { margin-top: 6px; }
.issue summary { cursor: pointer; list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 12px 14px; min-height: 48px; }
.issue summary::-webkit-details-marker { display: none; }
.issue summary .cnt { font: 700 .95rem var(--font-head); font-variant-numeric: tabular-nums; }
.issue summary:hover { background: var(--surface-2); border-radius: var(--r); }
.issue ul { margin: 0; padding: 0 14px 14px 32px; font-size: .9rem; color: var(--ink-2); overflow-wrap: anywhere; }

.passfail { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.passfail li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.pf { display: inline-grid; place-items: center; min-width: 58px; padding: 2px 8px; border-radius: 999px; font: 700 .75rem/1.6 var(--font-body); }
.pf.pass { background: var(--good-soft); color: var(--good); }
.pf.fail { background: var(--bad-soft); color: var(--bad); }
.pf.warn { background: var(--warn-soft); color: var(--warn); }
.pf.na { background: var(--surface-2); color: var(--ink-2); }

.progress { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; margin: 12px 0; }
.progress i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .6s ease; }
.skel { border-radius: var(--r); background: linear-gradient(90deg, var(--surface-2), color-mix(in oklab, var(--surface-2) 50%, var(--surface)), var(--surface-2)); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .skel { animation: shimmer 1.4s linear infinite; } @keyframes shimmer { to { background-position: -200% 0; } } }

.rings-row { display: flex; flex-wrap: wrap; gap: 18px 24px; }
.r-foot { margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .9rem; }
.print-head { display: none; }

/* compare */
.cmp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cmp-col { text-align: center; padding: 20px 10px; }
.cmp-col h2 { font-size: clamp(1.1rem, 3.4vw, 1.6rem); word-break: break-word; }
.cmp td.win { background: var(--good-soft); font-weight: 700; }
.cmp td.win::after { content: " \2713"; color: var(--good); }
.cmp th[scope="row"] { font-weight: 500; color: var(--ink); background: none; position: static; font-size: .93rem; }
.cmp td { width: 32%; }

/* ───────── pricing ───────── */

.bill-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); margin: 8px 0 32px; }
.bill-toggle label { margin: 0; padding: 10px 18px; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: .95rem; min-height: 44px; display: inline-flex; align-items: center; gap: 8px; }
.bill-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.bill-toggle label:has(input:checked) { background: var(--surface); box-shadow: var(--shadow); color: var(--ink); }
.bill-toggle label:has(input:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.bill-toggle .chip { font-size: .72rem; }

.plans { display: grid; gap: 14px; }
@media (min-width: 760px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px 24px 24px; display: flex; flex-direction: column; position: relative; box-shadow: var(--shadow); transition: box-shadow .2s, translate .2s; }
.plan:hover { box-shadow: var(--shadow-lg); }
@media (prefers-reduced-motion: no-preference) { .plan:hover { translate: 0 -2px; } }
.plan.rec { border: 2px solid var(--accent); padding: 25px 23px 23px; background: linear-gradient(var(--accent-soft), var(--surface) 160px); }
.plan .rec-tag { position: absolute; top: -12px; left: 22px; }
.plan h2 { font-size: 1.35rem; margin-bottom: 4px; }
.plan .price { font: 800 2.6rem/1 var(--font-head); letter-spacing: -.03em; margin: 12px 0 2px; font-variant-numeric: tabular-nums; }
.plan .price small { font: 500 1rem var(--font-body); color: var(--ink-2); letter-spacing: 0; }
.plan .per { color: var(--ink-2); font-size: .9rem; min-height: 1.5em; margin: 0 0 16px; }
.plan ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; font-size: .95rem; }
.plan li { padding-left: 24px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: .45em; width: 10px; height: 6px; border-left: 2px solid var(--good); border-bottom: 2px solid var(--good); rotate: -45deg; }
.plan .fair { font-size: .86rem; color: var(--ink-2); margin: -10px 0 18px; }
.plan .btn { margin-top: auto; }
.ent-band { margin-top: 14px; display: grid; gap: 16px; align-items: center; background: var(--ink); color: var(--bg); border-radius: var(--r-lg); padding: 24px; }
.ent-band h2 { font-size: 1.4rem; margin: 0 0 4px; }
.ent-band p { margin: 0; color: color-mix(in oklab, var(--bg) 78%, var(--ink)); }
.ent-band .btn { background: var(--bg); color: var(--ink); border-color: var(--bg); }
.ent-band .btn:hover { background: var(--surface-2); color: var(--ink); }
@media (min-width: 760px) { .ent-band { grid-template-columns: 1fr auto; padding: 28px 32px; } }

/* ───────── checkout ───────── */

.co-layout { display: grid; gap: 20px; align-items: start; }
@media (min-width: 900px) { .co-layout { grid-template-columns: 1.3fr 1fr; gap: 32px; } .co-summary { position: sticky; top: 88px; } }
.co-summary dl { display: grid; grid-template-columns: 1fr auto; gap: 10px 0; margin: 0 0 12px; }
.co-summary dd.total { padding-left: 12px; }
.co-summary dt { color: var(--ink-2); }
.co-summary dd { margin: 0; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.co-summary .total { border-top: 1px solid var(--line); padding-top: 12px; font-size: 1.15rem; }
.secure-note { display: flex; gap: 8px; align-items: start; font-size: .88rem; color: var(--ink-2); margin-top: 12px; }
.card-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 12px; }
@media (max-width: 400px) { .card-row { grid-template-columns: 1fr 1fr; } .card-row .field:last-child { grid-column: 1 / -1; } }

/* ───────── account ───────── */

.acct-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .acct-grid { grid-template-columns: 1fr 1fr; } .acct-grid .span { grid-column: 1 / -1; } }
.meter { height: 12px; border-radius: 6px; background: var(--surface-2); overflow: hidden; margin: 10px 0 6px; }
.meter i { display: block; height: 100%; background: var(--accent); }
.meter.warn i { background: var(--warn); }
.meter.bad i { background: var(--bad); }
.list-rows { list-style: none; margin: 0; padding: 0; }
.list-rows li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 0; }
.list-rows li + li { border-top: 1px solid var(--line); }
.list-rows .dom { font-weight: 700; overflow-wrap: anywhere; }
.list-rows .acts { display: flex; gap: 6px; }
.history li { content-visibility: auto; contain-intrinsic-size: auto 52px; }
.banner { margin-top: 20px; }

/* ───────── legal pages ───────── */

.legal { max-width: 760px; }
.legal h2 { font-size: 1.4rem; margin-top: 2.2em; }
.legal h3 { font-size: 1.08rem; margin-top: 1.6em; }
.legal p, .legal li { color: var(--ink); }
.legal ul { padding-left: 1.2em; }
.legal li + li { margin-top: .4em; }
.legal .eff { color: var(--ink-2); }
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 16px 20px; margin: 24px 0; }
.toc ol { margin: 0; padding-left: 1.3em; columns: 2 220px; column-gap: 32px; }
.toc li { break-inside: avoid; }

/* ───────── enterprise ───────── */

.ent-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .ent-list { grid-template-columns: repeat(2, 1fr); } }
.ent-list li { padding: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ent-list li:first-child { background: var(--accent-soft); border-color: transparent; }
.ent-list h3 { margin-bottom: 4px; }
.ent-list p { margin: 0; color: var(--ink-2); }
#booking iframe { width: 100%; min-height: 700px; border: 0; border-radius: var(--r-lg); background: var(--surface); display: block; }

/* ───────── view transitions and prerender ───────── */

@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .18s; }
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
}

/* ───────── print: the PDF report ───────── */

@media print {
  :root { color-scheme: light; }
  @page { margin: 14mm 12mm; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body { background: #fff; font-size: 10.5pt; }
  .site-header, .r-nav, .r-actions, .no-print, .skip, .site-footer .foot-top, dialog, .show-more { display: none !important; }
  .print-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 2px solid #0f1a22; padding-bottom: 10px; margin-bottom: 14px; }
  .print-head img { max-height: 44px; max-width: 200px; object-fit: contain; }
  .print-head .ph-co { font: 700 13pt var(--font-head); }
  .print-head .ph-by { font-size: 9pt; color: #45535d; }
  .r-sec { break-before: auto; padding-top: 18px; }
  .card, .tbl-wrap, .verdict, .issue, .tile, .r-gauge, .moves div { break-inside: avoid; box-shadow: none; }
  .tbl-wrap { overflow: visible; }
  thead th { position: static; }
  .long-list tbody tr { content-visibility: visible; }
  .stagger > * { animation: none !important; }
  .ring .val { transition: none; }
  a { color: inherit; text-decoration: none; }
  .site-footer { margin-top: 12px; padding-top: 8px; border-top: 1px solid #ccc; }
}

/* Rankings (admin). The score bar sits beside the number so the eye can
   run down the column and see the gaps, not just read digits. */
.rk-tools { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: end; margin: 0 0 16px; }
.rk-score { display: inline-flex; align-items: center; gap: 8px; justify-content: flex-end; }
.rk-bar { display: inline-block; width: 64px; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.rk-bar i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
#rk-table tbody tr { content-visibility: auto; contain-intrinsic-size: auto 44px; }
#rk-table th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }

.paper-fig { margin: 0; isolation: isolate; }