/* ==========================================================================
   Appworthy — design system
   A single stylesheet. No frameworks, no build step. Light + dark themes.
   JS sets <html data-theme="light|dark"> on load, so CSS only needs the two
   token blocks below.
   ========================================================================== */

/* -- Tokens: light (default) --------------------------------------------- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, system-ui, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Neutrals / surfaces */
  --bg:            #F5F5F7;
  --bg-elev:       #FFFFFF;
  --surface:       #FFFFFF;
  --surface-2:     #F1F1F4;
  --surface-3:     #E9E9ED;
  --hairline:      rgba(0,0,0,0.10);
  --hairline-soft: rgba(0,0,0,0.06);

  /* Ink */
  --ink:        #1D1D1F;
  --ink-2:      #48484A;
  --ink-3:      #6E6E73;
  --ink-4:      #8E8E93;

  /* Brand / accent */
  --accent:      #0A84FF;
  --accent-ink:  #0060DF;
  --accent-tint: rgba(10,132,255,0.10);

  /* Band colors (Appworthy Score) */
  --band-exemplary: #1DA45B;  --band-exemplary-tint:#E4F6EC;
  --band-fair:      #0A84FF;  --band-fair-tint:     #E3F0FF;
  --band-mixed:     #C98A00;  --band-mixed-tint:    #FBF1D8;
  --band-aggressive:#E8630A;  --band-aggressive-tint:#FCE9DC;
  --band-predatory: #E1352B;  --band-predatory-tint:#FBE3E1;
  --band-untested:  #8E8E93;  --band-untested-tint: #ECECEF;

  /* Semantic flag colors */
  --good:  #1DA45B;  --good-tint:#E4F6EC;
  --warn:  #C98A00;  --warn-tint:#FBF1D8;
  --bad:   #E1352B;  --bad-tint: #FBE3E1;
  --info:  #0A84FF;  --info-tint:#E3F0FF;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-lg: 0 12px 40px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-accent: 0 8px 24px rgba(10,132,255,0.28);

  /* Geometry */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 22px; --r-xl: 30px; --r-pill: 999px;
  --maxw: 1180px;
  --header-h: 56px;

  /* Header glass */
  --glass-bg: rgba(245,245,247,0.72);
  --glass-brd: rgba(0,0,0,0.08);

  /* Brand seal (navy registry octagon) */
  --brand-ink:   #0A2540;
  --seal-fill:   #0A2540;
  --seal-stroke: #FFFFFF;

  color-scheme: light;
}

/* -- Tokens: dark -------------------------------------------------------- */
[data-theme="dark"] {
  --bg:            #000000;
  --bg-elev:       #1C1C1E;
  --surface:       #1C1C1E;
  --surface-2:     #2C2C2E;
  --surface-3:     #3A3A3C;
  --hairline:      rgba(255,255,255,0.14);
  --hairline-soft: rgba(255,255,255,0.08);

  --ink:        #F5F5F7;
  --ink-2:      #C7C7CC;
  --ink-3:      #98989D;
  --ink-4:      #7C7C82;

  --accent:      #0A84FF;
  --accent-ink:  #409CFF;
  --accent-tint: rgba(10,132,255,0.18);

  --band-exemplary:#30D97C; --band-exemplary-tint:rgba(48,217,124,0.16);
  --band-fair:     #4DA3FF; --band-fair-tint:     rgba(77,163,255,0.16);
  --band-mixed:    #F0B429; --band-mixed-tint:    rgba(240,180,41,0.16);
  --band-aggressive:#FF8A3D;--band-aggressive-tint:rgba(255,138,61,0.16);
  --band-predatory:#FF5C52; --band-predatory-tint:rgba(255,92,82,0.16);
  --band-untested: #98989D; --band-untested-tint: rgba(152,152,157,0.16);

  --good:#30D97C; --good-tint:rgba(48,217,124,0.16);
  --warn:#F0B429; --warn-tint:rgba(240,180,41,0.16);
  --bad: #FF5C52; --bad-tint: rgba(255,92,82,0.16);
  --info:#4DA3FF; --info-tint:rgba(77,163,255,0.16);

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 6px 20px rgba(0,0,0,0.5);
  --shadow-lg: 0 16px 48px rgba(0,0,0,0.6);
  --shadow-accent: 0 8px 24px rgba(10,132,255,0.4);

  --glass-bg: rgba(20,20,22,0.72);
  --glass-brd: rgba(255,255,255,0.10);

  /* Brand seal: reversed on dark — light octagon, navy W */
  --brand-ink:   #F5F5F7;
  --seal-fill:   #F5F5F7;
  --seal-stroke: #0A2540;

  color-scheme: dark;
}

/* -- Reset / base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,p,figure,dl,dd { margin: 0; }
ul,ol { margin: 0; padding: 0; list-style: none; }
img,svg { max-width: 100%; display: block; }
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
input,select,button { font-family: inherit; font-size: inherit; color: inherit; }
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
::selection { background: var(--accent-tint); }

/* -- Layout -------------------------------------------------------------- */
.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; }
.wrap--wide { max-width: 1320px; }
main { display: block; min-height: 60vh; }
.section { margin-top: 46px; }
.section:first-of-type { margin-top: 30px; }

/* -- Sample banner ------------------------------------------------------- */
.sample-banner {
  background: repeating-linear-gradient(45deg, var(--warn-tint), var(--warn-tint) 12px, transparent 12px, transparent 24px);
  border-bottom: 1px solid var(--hairline);
  color: var(--ink-2);
  font-size: 12.5px; font-weight: 500;
  text-align: center; padding: 7px 16px;
  letter-spacing: 0.01em;
}
.sample-banner strong { color: var(--ink); }

/* -- Header -------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--glass-bg);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--glass-brd);
}
.site-header__inner {
  max-width: var(--maxw); margin-inline: auto; padding: 0 22px;
  height: var(--header-h); display: flex; align-items: center; gap: 20px;
}
.wordmark {
  font-family: var(--font-display);
  font-weight: 700; font-size: 19px; letter-spacing: -0.02em;
  color: var(--brand-ink); display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }
.wordmark__seal { width: 26px; height: 26px; flex: none; }
.wordmark__seal .seal-oct { fill: var(--seal-fill); }
.wordmark__seal .seal-w   { stroke: var(--seal-stroke); }
.wordmark__seal .seal-tip { stroke: #1DA45B; }
.wordmark__plus {
  background: linear-gradient(135deg, var(--accent), #6C5CE7);
  color: #fff; font-size: 12px; font-weight: 800;
  padding: 2px 6px; border-radius: 7px; letter-spacing: 0;
}
.site-nav { display: flex; gap: 4px; align-items: center; }
.site-nav a {
  color: var(--ink-2); font-size: 14px; font-weight: 500;
  padding: 7px 12px; border-radius: var(--r-pill);
}
.site-nav a:hover { color: var(--ink); background: var(--surface-2); text-decoration: none; }
.site-nav a[aria-current="page"] { color: var(--accent-ink); background: var(--accent-tint); }
.header-spacer { flex: 1; }

.header-search {
  position: relative; display: flex; align-items: center;
  background: var(--surface-2); border: 1px solid transparent;
  border-radius: var(--r-pill); padding: 0 12px; height: 36px; width: 210px;
  transition: width .2s ease, background .2s ease, border-color .2s ease;
}
.header-search:focus-within { background: var(--surface); border-color: var(--hairline); width: 260px; }
.header-search svg { width: 15px; height: 15px; color: var(--ink-4); flex: none; }
.header-search input {
  border: 0; background: transparent; outline: none; width: 100%;
  font-size: 14px; padding-left: 8px;
}
.header-search input::placeholder { color: var(--ink-4); }

.theme-toggle {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  border: 1px solid var(--hairline); background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-2); flex: none;
}
.theme-toggle:hover { background: var(--surface-3); color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; }
.theme-toggle .icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

.menu-btn { display: none; }

/* -- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 0; border-radius: var(--r-pill); font-weight: 600; font-size: 14px;
  padding: 9px 18px; background: var(--surface-2); color: var(--ink);
  transition: transform .08s ease, background .15s ease, box-shadow .15s ease;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; background: var(--surface-3); }
.btn:active { transform: scale(0.97); }
.btn--accent { background: var(--accent); color: #fff; box-shadow: var(--shadow-accent); }
.btn--accent:hover { background: var(--accent-ink); color: #fff; }
.btn--ghost { background: transparent; border: 1px solid var(--hairline); }
.btn--ghost:hover { background: var(--surface-2); }
.btn--sm { padding: 6px 14px; font-size: 13px; }
.btn--lg { padding: 12px 26px; font-size: 15px; }
.btn--get { background: var(--accent-tint); color: var(--accent-ink); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; font-size: 13px; min-width: 74px; }
.btn--get:hover { background: var(--accent); color: #fff; }

.textlink { color: var(--accent-ink); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 4px; }
.textlink:hover { text-decoration: none; }
.chev { width: 15px; height: 15px; flex: none; }
.textlink .chev { transition: transform .15s ease; }
.textlink:hover .chev { transform: translateX(3px); }

/* -- Section header ------------------------------------------------------ */
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-head h2 {
  font-family: var(--font-display); font-size: 26px; font-weight: 700;
  letter-spacing: -0.02em; line-height: 1.15;
}
.section-head .sub { color: var(--ink-3); font-size: 14px; margin-top: 3px; font-weight: 400; }
.section-head__titles { min-width: 0; }

/* -- App icon (generated) ------------------------------------------------ */
.app-icon {
  border-radius: 22.6%; position: relative; overflow: hidden; flex: none;
  display: grid; place-items: center; color: #fff; font-weight: 700;
  box-shadow: inset 0 0 0 0.5px rgba(255,255,255,0.14), inset 0 -2px 6px rgba(0,0,0,0.18);
  font-family: var(--font-display);
}
.app-icon::after {
  content:""; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(255,255,255,0.28), rgba(255,255,255,0) 42%);
}
.app-icon span { position: relative; z-index: 1; line-height: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.22); }

/* -- Star rating --------------------------------------------------------- */
.stars { display: inline-flex; align-items: center; gap: 2px; color: var(--warn); }
.stars svg { width: 13px; height: 13px; }
.stars--muted { color: var(--ink-4); }

/* -- Appworthy Score badge ---------------------------------------------------- */
.trust-ring {
  --sz: 116px; --bw: 9px;
  width: var(--sz); height: var(--sz); border-radius: 50%; flex: none;
  display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--band) calc(var(--pct) * 1%), var(--surface-3) 0);
}
.trust-ring::before {
  content:""; position: absolute; inset: var(--bw); border-radius: 50%;
  background: var(--surface); box-shadow: var(--shadow-sm);
}
.trust-ring__inner { position: relative; text-align: center; z-index: 1; }
.trust-ring__num { font-family: var(--font-display); font-weight: 800; font-size: 34px; line-height: 1; color: var(--band); letter-spacing: -0.02em; }
.trust-ring__den { font-size: 12px; color: var(--ink-4); font-weight: 600; }
.trust-ring--sm { --sz: 76px; --bw: 6px; }
.trust-ring--sm .trust-ring__num { font-size: 22px; }
.trust-ring--lg { --sz: 150px; --bw: 11px; }
.trust-ring--lg .trust-ring__num { font-size: 46px; }
/* ONE RING FOR EVERY SCORE (18 §2 A4, owner decision 2026-09-01). The dashed /
   segmented SVG variant that used to mark an unaudited score (APP-35, and its
   `--tinted` follow-up) is gone: certification no longer restyles a score, so
   automated, review-only and certified scores all render the solid conic ring
   above, coloured by the number alone. The distinction lives in the words —
   the denominator slot below ("of 90" / "Preliminary" / "of 100"), the "not
   certified" note, and the seal badge.
   The small ring's denominator carries words, not just "of 100", so it needs
   the room; this used to hang off the dashed modifier. */
.trust-ring--sm .trust-ring__den { font-size: 9.5px; letter-spacing: .01em; }

.band-label { font-weight: 700; color: var(--band); }

/* verdict pill (cards + list rows — the one compact score representation) */
.verdict-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--r-pill); padding: 4px 12px;
  background: var(--band-tint); color: var(--band); font-weight: 700; font-size: 13px; white-space: nowrap; }
.verdict-pill svg { width: 14px; height: 14px; }

/* THE DASHED OUTLINE NOW MEANS "NO NUMBER", NOT "NOT CERTIFIED" (18 §2 A4,
   owner decision 2026-09-01). It used to mark every unaudited pill; under A4 a
   pill that carries a score is tinted by that score whoever produced it, so the
   dashed treatment is left to the word-only states — quiet, themes-only,
   withheld — which publish a sentence instead of a number and stay grey.
   (`--preliminary` is retained purely for the static score legend baked into
   index.html, which no longer matches the live pills; nothing in core.js emits
   it. Same declarations, one selector.) */
.verdict-pill--words { background: transparent; border: 1.5px dashed var(--ink-4); color: var(--ink-2); white-space: normal; }
/* A pill that carries a number wears the band tint from `.verdict-pill` above,
   exactly like an audited one; it only asks for figure alignment, since these
   are the pills that print digits. */
.verdict-pill--scored { font-variant-numeric: tabular-nums; }
/* In compact list rows the long qualified copy must wrap within a bounded
   width, not squeeze the name column into a many-line pill. Measured: at
   390px an unbounded pill collapses the name column (262px-tall rows).
   This bound is about ROW GEOMETRY, not about the tier, so it covers both
   halves of the A4 split — "Appworthy Score · 87/90" is longer than any band
   name and needs the same ceiling the word-only copy does. */
.app-row .verdict-pill--words,
.app-row .verdict-pill--scored { max-width: 170px; white-space: normal; }
@media (max-width: 480px) {
  .app-row .verdict-pill--words,
  .app-row .verdict-pill--scored { max-width: 120px; font-size: 11px; padding: 3px 8px; }
}
/* Below ~420px the four-column row cannot pay for both the name and the pill:
   the pill's `auto` track takes ~107px and the name is left with 53px, which
   wraps "WhatsApp Messenger" over four lines and makes a 232px-tall row.
   Drop to three columns and let the pill sit under the name instead — the
   name is what the row is for. See docs/analysis/12-mobile-frontend-audit.md §2.3a. */
@media (max-width: 420px) {
  .app-row { grid-template-columns: 22px 46px minmax(0, 1fr); row-gap: 5px; }
  .app-row > .verdict-pill { grid-column: 3; justify-self: start; }
  .app-row .verdict-pill--words,
  .app-row .verdict-pill--scored { max-width: none; }
}

.verdict-block--quiet { border: 1.5px dashed var(--ink-4); border-radius: var(--r-md); padding: 10px 14px; }
.verdict-block--quiet .verdict-block__band { color: var(--ink-2); font-size: 16px; }

/* Approved seal */
.seal { display: inline-flex; align-items: center; gap: 6px; border-radius: var(--r-pill); padding: 4px 12px;
  background: var(--good-tint); color: var(--good); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; }
.seal svg { width: 15px; height: 15px; }

/* verdict block (app-detail hero) */
.verdict-block { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; }
.verdict-block__band { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.01em; color: var(--band); line-height: 1; }
.verdict-block--prelim { align-items: flex-end; gap: 8px; }
.verdict-block__prelim-note { font-size: 11.5px; color: var(--ink-3); text-align: right; max-width: 190px; line-height: 1.35; }

/* real-cost token on cards/rows */
.cost { font-weight: 600; color: var(--ink-2); }

/* band context: set --band + --band-tint via modifier class */
.b-exemplary { --band: var(--band-exemplary); --band-tint: var(--band-exemplary-tint); }
.b-fair      { --band: var(--band-fair);      --band-tint: var(--band-fair-tint); }
.b-mixed     { --band: var(--band-mixed);     --band-tint: var(--band-mixed-tint); }
.b-aggressive{ --band: var(--band-aggressive);--band-tint: var(--band-aggressive-tint); }
.b-predatory { --band: var(--band-predatory); --band-tint: var(--band-predatory-tint); }
.b-untested  { --band: var(--band-untested);  --band-tint: var(--band-untested-tint); }

/* -- Attribute tags ------------------------------------------------------ */
.tags { display: flex; flex-wrap: wrap; gap: 7px; }
.tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-2); border: 1px solid transparent;
  white-space: nowrap;
}
.tag svg { width: 12px; height: 12px; flex: none; }
.tag--good { background: var(--good-tint); color: var(--good); }
.tag--warn { background: var(--warn-tint); color: var(--warn); }
.tag--bad  { background: var(--bad-tint);  color: var(--bad); }
.tag--info { background: var(--info-tint); color: var(--info); }
.tag--lg { font-size: 13.5px; padding: 6px 13px; }

/* -- Review excerpts under the theme chips they corroborate --------------- */
/* Quiet on purpose, but no longer for the reason this comment used to give.
   Until analysis 19 §4d the WHOLE findings block lived in a 320px sidebar
   panel deliberately de-emphasised — findings included. That intent is
   retired: evidence is the product, findings now live full-width in the main
   column. What stays subordinate is just this block — user reports are not
   audit evidence, so it must still read as supporting material for the
   findings above it, not as a finding itself; that is why it renders behind
   a subordinate block rather than inline. It sits inside a
   .panel (var(--surface)), so --surface-2 reads as a recess in both themes;
   the hairline vars carry the light/dark inversion. */
.rq-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--hairline-soft); }
.rq-block h3 { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.rq-note { font-size: 13px; color: var(--ink-3); margin: 0 0 12px; }
.rq-group h4 { font-size: 13px; font-weight: 700; color: var(--ink-2); margin: 12px 0 6px; }
.rq {
  margin: 0 0 8px; padding: 10px 12px;
  border-left: 3px solid var(--hairline); background: var(--surface-2);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
}
.rq p { margin: 0 0 4px; font-size: 14px; color: var(--ink); }
.rq footer { font-size: 12px; color: var(--ink-3); }

/* -- App card (grid) ----------------------------------------------------- */
.card {
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--hairline-soft);
}
.app-card {
  display: flex; flex-direction: column; gap: 12px; padding: 16px;
  background: var(--surface); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); border: 1px solid var(--hairline-soft);
  transition: transform .16s ease, box-shadow .16s ease; height: 100%;
}
.app-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.app-card__top { display: flex; gap: 13px; align-items: flex-start; }
.app-card__icon { width: 62px; height: 62px; font-size: 30px; }
.app-card__id { min-width: 0; flex: 1; padding-top: 2px; }
.app-card__name { font-weight: 650; font-size: 15.5px; color: var(--ink); line-height: 1.25; letter-spacing: -0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-card__dev { color: var(--ink-3); font-size: 12.5px; margin-top: 1px; }
.app-card__meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; font-size: 12px; color: var(--ink-3); }
.app-card__tagline { color: var(--ink-2); font-size: 13.5px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.app-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; }
.app-card__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-width: 0; }
.app-card__tags .verdict-pill { font-size: 12.5px; padding: 3px 10px; }
.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--ink-4); flex: none; }

/* compact list row */
.app-row {
  display: grid; grid-template-columns: 30px 58px 1fr auto; align-items: center; gap: 14px;
  padding: 12px 8px; border-radius: var(--r-md); transition: background .12s ease;
}
.app-row:hover { background: var(--surface-2); text-decoration: none; }
.app-row__rank { font-family: var(--font-display); font-weight: 700; font-size: 19px; color: var(--ink-4); text-align: center; }
.app-row__icon { width: 58px; height: 58px; font-size: 27px; }
.app-row__name { font-weight: 600; font-size: 15px; color: var(--ink); }
.app-row__sub { color: var(--ink-3); font-size: 12.5px; margin-top: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* -- Shelf (horizontal scroll) ------------------------------------------- */
.shelf {
  display: grid; grid-auto-flow: column; grid-auto-columns: 300px; gap: 16px;
  overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 2px 14px;
  margin-inline: -2px; scrollbar-width: thin;
}
.shelf > * { scroll-snap-align: start; }
.shelf::-webkit-scrollbar { height: 8px; }
.shelf::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: 99px; }
.shelf--narrow { grid-auto-columns: 260px; }

/* -- Grid ---------------------------------------------------------------- */
.grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

/* -- Hero ---------------------------------------------------------------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: 54px 44px;
  background:
    radial-gradient(1200px 400px at 12% -10%, rgba(108,92,231,0.22), transparent 60%),
    radial-gradient(900px 420px at 92% 0%, rgba(10,132,255,0.20), transparent 55%),
    linear-gradient(135deg, #0b1220, #131a2b);
  color: #fff;
}
[data-theme="light"] .hero { box-shadow: var(--shadow-lg); }
.hero h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(30px, 4.4vw, 50px); line-height: 1.05; max-width: 15ch;
}
.hero p { color: rgba(255,255,255,0.82); font-size: clamp(15px, 1.8vw, 19px); margin-top: 16px; max-width: 46ch; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.18); padding: 6px 14px; border-radius: var(--r-pill); margin-bottom: 20px; }
.hero__search { margin-top: 26px; display: flex; gap: 10px; max-width: 520px; }
.hero__search-field { position: relative; flex: 1; display: flex; align-items: center;
  background: rgba(255,255,255,0.96); border-radius: var(--r-pill); padding: 0 8px 0 16px; height: 50px; box-shadow: var(--shadow-md); }
.hero__search-field svg { width: 18px; height: 18px; color: #6E6E73; flex: none; }
.hero__search-field input { border: 0; outline: none; background: transparent; color: #1d1d1f; width: 100%; font-size: 15.5px; padding: 0 10px; }
.hero__chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 22px; }
.hero__chip { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 13px; font-weight: 500;
  padding: 7px 14px; border-radius: var(--r-pill); }
.hero__chip:hover { background: rgba(255,255,255,0.22); text-decoration: none; }

/* compact hero (home): the store is the pitch — keep apps above the fold */
.hero--compact { padding: 34px 40px 30px; }
.hero--compact h1 { font-size: clamp(26px, 3.4vw, 38px); max-width: none; }
.hero--compact .hero__eyebrow { margin-bottom: 14px; padding: 5px 12px; font-size: 12.5px; }
.hero--compact .hero__search { margin-top: 20px; }
.hero--compact .hero__search-field { height: 46px; }
.hero--compact .hero__chips { margin-top: 16px; }

/* trust strip: the method in one quiet line under the hero */
.trust-strip { display: flex; flex-wrap: wrap; gap: 8px 28px; justify-content: center;
  margin-top: 18px; padding: 10px 16px; color: var(--ink-3); font-size: 13px; font-weight: 500; }
.trust-strip span { display: inline-flex; align-items: center; gap: 7px; }
.trust-strip svg { width: 15px; height: 15px; color: var(--good); flex: none; }

/* -- Category tiles ------------------------------------------------------ */
.cat-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); }
.cat-tile {
  position: relative; overflow: hidden; border-radius: var(--r-md);
  padding: 18px; min-height: 88px; display: flex; flex-direction: column; justify-content: space-between;
  color: #fff; font-weight: 700; box-shadow: var(--shadow-sm);
  transition: transform .16s ease, box-shadow .16s ease;
}
.cat-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.cat-tile__glyph { font-size: 26px; opacity: 0.9; align-self: flex-end; }
.cat-tile__name { font-family: var(--font-display); font-size: 17px; letter-spacing: -0.01em; }
.cat-tile__count { font-size: 12px; font-weight: 500; opacity: 0.85; }

/* -- Browse layout ------------------------------------------------------- */
.browse { display: grid; grid-template-columns: 264px 1fr; gap: 28px; align-items: start; margin-top: 26px; }
.filters__backdrop { display: none; }
.filters { position: sticky; top: calc(var(--header-h) + 16px); align-self: start;
  background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm); padding: 6px 16px 16px; max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; }
.filters__head { display: flex; align-items: center; gap: 10px; position: sticky; top: 0;
  background: var(--surface); padding: 14px 0 10px; border-bottom: 1px solid var(--hairline-soft); z-index: 1; }
.filters__head h3 { font-size: 15px; font-weight: 700; margin-right: auto; }
/* Only meaningful when the panel is a full-screen overlay; as a desktop
   sidebar there is nothing to close. */
.filters__close { display: none; border: 0; background: transparent; color: var(--ink-3);
  border-radius: 50%; place-items: center; flex: none; }
.filters__close svg { width: 16px; height: 16px; }
.filters__close:hover { background: var(--surface-2); color: var(--ink); }
.filter-group { padding: 14px 0; border-bottom: 1px solid var(--hairline-soft); }
.filter-group:last-child { border-bottom: 0; }
.filter-group > h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-4); font-weight: 700; margin-bottom: 11px; }

/* switch row */
.switch-row { display: flex; align-items: center; gap: 10px; padding: 6px 0; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; pointer-events: none; }
.switch { width: 38px; height: 23px; border-radius: 99px; background: var(--surface-3); position: relative; flex: none; transition: background .18s ease; }
.switch::after { content:""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: transform .18s ease; }
.switch-row input:checked + .switch { background: var(--good); }
.switch-row input:checked + .switch::after { transform: translateX(15px); }
.switch-row input:focus-visible + .switch { outline: 2.5px solid var(--accent); outline-offset: 2px; }
.switch-row__label { font-size: 13.5px; color: var(--ink); font-weight: 500; line-height: 1.3; }
.switch-row__hint { display: block; font-size: 11.5px; color: var(--ink-4); font-weight: 400; margin-top: 1px; }
.switch-row:hover .switch-row__label { color: var(--ink); }

/* radio/check list */
.opt-row { display: flex; align-items: center; gap: 9px; padding: 5px 0; cursor: pointer; font-size: 13.5px; color: var(--ink-2); }
.opt-row input { accent-color: var(--accent); width: 16px; height: 16px; }
.opt-row:hover { color: var(--ink); }
.opt-row .count { margin-left: auto; font-size: 12px; color: var(--ink-4); }

/* range */
.range-val { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.range-val b { color: var(--band, var(--accent-ink)); font-weight: 800; font-size: 15px; }
input[type="range"] { width: 100%; accent-color: var(--accent); }

.select {
  width: 100%; border: 1px solid var(--hairline); background: var(--surface-2);
  border-radius: var(--r-sm); padding: 9px 12px; font-size: 13.5px; font-weight: 500;
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238E8E93' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center;
}

/* results header */
.results-bar { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 6px; }
.results-bar__count { font-size: 14px; color: var(--ink-3); }
.results-bar__count b { color: var(--ink); font-weight: 700; }
.results-tools { display: flex; align-items: center; gap: 10px; }
.results-tools .select { width: auto; min-width: 176px; }
.seg { display: inline-flex; background: var(--surface-2); border-radius: var(--r-sm); padding: 3px; }
.seg button { border: 0; background: transparent; padding: 6px 10px; border-radius: 9px; color: var(--ink-3); display: inline-grid; place-items: center; }
.seg button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-sm); }
.seg svg { width: 16px; height: 16px; }

.active-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.active-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-tint); color: var(--accent-ink);
  font-size: 12.5px; font-weight: 600; padding: 5px 6px 5px 12px; border-radius: var(--r-pill); }
.active-chip button { border: 0; background: rgba(0,0,0,0.06); color: inherit; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; line-height: 1; }
[data-theme="dark"] .active-chip button { background: rgba(255,255,255,0.14); }

.mobile-filter-btn { display: none; }

/* empty state */
.empty { text-align: center; padding: 64px 20px; color: var(--ink-3); }
.empty svg { width: 46px; height: 46px; color: var(--ink-4); margin: 0 auto 14px; }
.empty h3 { font-size: 18px; color: var(--ink); margin-bottom: 6px; }

/* -- App detail: screenshots and content columns ------------------------- */
/* screenshot gallery */
.shots { display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 14px; overflow-x: auto; padding: 4px 0 12px; scroll-snap-type: x proximity; }
.shot { scroll-snap-align: start; border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--hairline); background: var(--surface); aspect-ratio: 9 / 19.5; }

/* content columns */
.prose p { color: var(--ink-2); margin-bottom: 14px; line-height: 1.6; overflow-wrap: break-word; }
.panel { background: var(--surface); border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); padding: 20px; }
.panel + .panel { margin-top: 18px; }
.panel__title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-4); font-weight: 700; margin-bottom: 14px; }
.panel__title svg { display: inline-block; width: 15px; height: 15px; vertical-align: -3px; }

/* Provenance strip — how the number was produced, as chips under the catch box
   instead of a defensive paragraph inside it (18 §3). */
.provenance { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.provenance a.pill-note { color: var(--accent); text-decoration: none; }
/* Report foot stamp (16 §3.5): same chips, plus the signals named in full on
   their own line. `flex-basis: 100%` is what breaks that line — inside a wrap
   container a bare div would otherwise sit in the chip row as one more item. */
.provenance--stamp { margin-top: 0; }
.provenance__srcs { flex-basis: 100%; margin-top: 4px; }

/* --- automated Appworthy Score (plan v3) -----------------------------------
   No style of its own any more. Under 18 §2 A4 an automated score is drawn
   exactly like a certified one — same solid ring, same band tint on the pill,
   coloured by the number — and the tier is carried entirely by text: "of 90"
   in the denominator slot, "Not certified" in the provenance strip and the
   pill's title, and the absence of the seal. The class survives as a semantic
   hook for the markup and the guards; the old accent-ink border, the dashed
   stroke and the `--tinted` opt-in are deliberately gone. The band NAME is
   still never printed on this tier (16 §5 F6). */
/* A finding shown but not scored: real, single-sourced, and deliberately
   quieter than the ones that moved the number. */
.tag--unverified { opacity: .72; border-style: dashed; }
/* A ZERO-WEIGHT finding: published deliberately, worth no points, ever.
   `broad-permission-set` is weight 0 and kind "fact", so it IS `scored` (with a
   deduction of 0) and used to render as a solid red tag indistinguishable from
   a weight-18 charge — the muted style above keys off `scored === false`, which
   a zero-weight fact never is. Neutral ink rather than dashes: this is not a
   claim we are hedging, it is a measurement we are not charging for. */
.tag--context {
  color: var(--ink-2);
  border-color: var(--ink-4);
  background: var(--surface-2);
}
.tag--context svg { color: var(--ink-3); }
.themes .theme-row { flex-wrap: wrap; }

/* flags list */
.flaglist { display: flex; flex-direction: column; gap: 9px; }
.flag { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.4; }
.flag svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.flag--good svg { color: var(--good); }
.flag--bad svg { color: var(--bad); }

/* --- the automated findings component (18 §3) ----------------------------
   The demo's flag row, given the fields an automated finding actually carries:
   what it cost, how strongly it is supported, what agreed, and the line we
   read. Layout only — every judgement rendered here comes from the record. */
.findings { margin-top: 6px; }
.flaglist + .flags-h { margin-top: 18px; }
.flag__body { flex: 1; min-width: 0; }
.flag__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.flag__label { font-weight: 600; color: var(--ink); }
.flag__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 5px; }
/* THE FLAG'S OWN HEDGE (plan v3 §G5), between the meta line and the evidence:
   what this finding means, in the vocabulary's words. Slightly recessed from
   the evidence quote beneath it — the quote is what we saw, this is what the
   finding claims — but readable, because the hedges were written to be read. */
.flag__desc { margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--ink-3); }
.flag__ev { margin-top: 5px; font-size: 12.5px; line-height: 1.45; }
.flag__ref { font-size: 11.5px; color: var(--accent-ink); text-decoration: none; font-weight: 600; }
/* an artefact digest is provenance, not a destination — it must not look clickable */
.flag__ref--stamp { color: var(--ink-4); font-weight: 400; font-variant-numeric: tabular-nums; }
/* "Measured" and "corroborated" are different claims about how we know, so the
   row gives each its own chip rather than letting them read as one word. */
.strength { display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-3); }
.strength--measured { background: var(--info-tint); color: var(--info); }
.strength--tested { background: var(--info-tint); color: var(--info); }
.strength--contradicted { background: var(--surface-2); color: var(--ink-2); }
/* A contradicted finding is kept and not counted: neutral, never the red of a charge. */
.flag--contradicted svg { color: var(--ink-3); }
/* --- the human-review mark and what the test measured (28 §7.2, slice 7a) ----
   A block of its own, never inside a band row. Dated, no number, no expiry:
   nothing here greys, strikes or fades with age or with a newer build. */
.hr-marks { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
.hr-mark { border: 1px solid var(--good); background: var(--good-tint); border-radius: 12px; padding: 14px 16px; }
.hr-mark__head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: 14px; color: var(--ink); }
.hr-mark__word { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--good); }
.hr-mark__word svg { width: 17px; height: 17px; }
.hr-mark__line { color: var(--ink-2); }
.hr-mark__session { font-size: 12px; word-break: break-all; }
.hr-mark__facts, .hr-mark__moved, .hr-mark__other { margin-top: 6px; }
.hr-measured, .hr-not-observed, .hr-suppressions { margin-top: 18px; }
.hr-items { display: flex; flex-direction: column; gap: 10px; }
.hr-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 10px 0; border-top: 1px solid var(--hairline); }
.hr-item__label { font-weight: 600; color: var(--ink); }
.hr-item__value { font-variant-numeric: tabular-nums; color: var(--ink-2); text-align: right; }
.hr-frames { grid-column: 1 / -1; list-style: none; margin: 2px 0 0; padding: 0; font-size: 12px; color: var(--ink-3); }
.hr-frame__hash { display: block; font-size: 11px; color: var(--ink-4); word-break: break-all; }
.hr-skipped { margin: 8px 0 0 18px; font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.hr-cancel { margin-top: 8px; }
@media (max-width: 560px) { .hr-item { grid-template-columns: 1fr; } .hr-item__value { text-align: left; } }
/* Shown, not scored. Recessed on purpose: a real report we will not stand a
   number on has to be visible, and must not look like one that moved the score. */
.unscored { margin-top: 18px; padding-left: 14px; border-left: 2px dashed var(--hairline); }
.unscored__h { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--ink-4); margin-bottom: 10px; }
.unscored .flag { opacity: .84; }
.unscored .flag__label { font-weight: 600; color: var(--ink-2); }
/* The four finding sections (0.31.0, planning 27 §4.3): a count beside each
   heading and one line saying what the section is. None collapses. */
.finding-section + .finding-section { margin-top: 18px; }
.flags-h__n { font-weight: 600; color: var(--ink-3); margin-left: 4px; }
.flags-sub { margin: 2px 0 10px; }
/* /methodology/'s per-charge review-bar table. Scrolls inside itself on a
   phone rather than pushing the page sideways. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
table.doc { width: 100%; border-collapse: collapse; font-size: 14px; }
table.doc th, table.doc td { padding: 8px 10px; border-bottom: 1px solid var(--hairline); text-align: left; vertical-align: top; }
table.doc th { font-size: 12px; font-weight: 700; color: var(--ink-3); letter-spacing: .02em; }
table.doc .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* review scan */
.themes { display: flex; flex-direction: column; gap: 8px; }
.theme-row { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--ink-2); }
.theme-row .pol { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.theme-row .pol--pos { background: var(--good); }
.theme-row .pol--neg { background: var(--bad); }
.sentiment { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sentiment__bar { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.sentiment__fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--bad), var(--warn) 50%, var(--good)); }
.sentiment__num { font-weight: 800; font-family: var(--font-display); font-size: 18px; }

/* -- Multi-store: badges, buttons, toggle, changelog, watch --------------- */
.store-badges { display: inline-flex; align-items: center; gap: 5px; }
.app-card__foot .store-badges { margin-left: auto; }
.store-badge { display: inline-grid; place-items: center; color: var(--ink-4); }
.store-badge svg { width: 15px; height: 15px; }
.store-badge--google svg { color: #34A853; }
.store-badge--apple svg { color: var(--ink-3); }

/* store buttons (auto-invert: dark pill in light theme, light pill in dark) */
.store-btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg-elev);
  border-radius: 13px; padding: 8px 16px; min-width: 160px; transition: transform .08s ease, opacity .15s ease; }
.store-btn:hover { text-decoration: none; opacity: .9; }
.store-btn:active { transform: scale(.97); }
.store-btn__logo { display: inline-grid; place-items: center; }
.store-btn__logo svg { width: 25px; height: 25px; }
.store-btn__txt { display: flex; flex-direction: column; line-height: 1.12; text-align: left; }
.store-btn__txt small { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; opacity: .82; }
.store-btn__txt b { font-size: 16px; font-weight: 600; font-family: var(--font-display); }

.flags-h { font-size: 13px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; margin: 16px 0 10px; }

/* -- Report / pillars ---------------------------------------------------- */
.report-hero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
.report-hero--quiet { grid-template-columns: 1fr; }
.pillars { display: flex; flex-direction: column; gap: 16px; }
.pillar { display: grid; grid-template-columns: 150px 1fr 44px; gap: 14px; align-items: center; }
.pillar__name { font-size: 14px; font-weight: 600; color: var(--ink); }
.pillar__name small { display: block; color: var(--ink-4); font-weight: 400; font-size: 11.5px; }
.pillar__track { height: 10px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pillar__fill { height: 100%; border-radius: 99px; }
.pillar__val { text-align: right; font-weight: 800; font-family: var(--font-display); font-size: 15px; }
/* Automated edition (18 §3, §4): one column, same colour function, TWO sizes —
   `--mini` in the app-page sidebar, `--full` on the report. The layout is
   shared so the app page and the report can never draw one pillar two
   different ways; only the type scale differs between them. */
.pillar--auto { display: block; }
.pillar--auto .pillar__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.pillar--auto .pillar__val { margin-left: auto; text-align: right; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap; }
.pillars--mini { gap: 13px; }
.pillar--mini .pillar__name { font-size: 13px; margin-bottom: 6px; }
.pillar--mini .pillar__val { font-size: 12.5px; }
.pillar--mini .pillar__track { height: 8px; }
.pillars--full { gap: 18px; }
.pillar--full .pillar__name { font-size: 15px; margin-bottom: 8px; }
.pillar--full .pillar__val { font-size: 15px; font-weight: 800; }
.pillar--full .pillar__track { height: 12px; }
/* A pillar at its cap absorbed MORE than it could subtract — the token says so
   rather than letting a maxed-out bar read as a merely bad one. */
.pillar__cap { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em;
  padding: 1px 7px; border-radius: var(--r-pill); background: var(--warn-tint); color: var(--warn); }

.finding { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--hairline-soft); align-items: start; }
.finding:last-child { border-bottom: 0; }
.finding__sev { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; }
.sev-severe { background: var(--bad); } .sev-moderate { background: var(--band-aggressive); }
.sev-minor { background: var(--warn); } .sev-none { background: var(--good); }
.finding__text { font-size: 14px; color: var(--ink); line-height: 1.45; }
.finding__meta { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.finding__delta { font-weight: 800; font-family: var(--font-display); color: var(--ink-3); font-size: 14px; white-space: nowrap; }
.finding__delta.is-neg { color: var(--bad); }

/* evidence-source chip on findings (tested / store listing / user reports) */
.tier { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; }
.src--tested  { background: var(--good-tint); color: var(--good); }
.src--listing { background: var(--info-tint); color: var(--info); }
.src--reports { background: var(--warn-tint); color: var(--warn); }

/* -- About / methodology ------------------------------------------------- */
.lede { font-size: clamp(18px,2.4vw,24px); line-height: 1.45; color: var(--ink); font-weight: 500; letter-spacing: -0.01em; max-width: 62ch; }
.feature-grid { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px,1fr)); }
.feature { padding: 22px; }
.feature__icon { width: 44px; height: 44px; border-radius: var(--r-sm); display: grid; place-items: center; margin-bottom: 14px; background: var(--accent-tint); color: var(--accent-ink); }
.feature__icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; letter-spacing: -0.01em; }
.feature p { color: var(--ink-3); font-size: 14px; line-height: 1.5; }
.steps { counter-reset: step; display: flex; flex-direction: column; gap: 22px; }
.step { display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: start; }
.step__n { counter-increment: step; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: #fff;
  display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 18px; }
.step__n::before { content: counter(step); }
.step h3 { font-size: 17px; margin-bottom: 4px; }
.step p { color: var(--ink-3); font-size: 14.5px; line-height: 1.55; }

/* -- Callout / banner strip ---------------------------------------------- */
.strip {
  border-radius: var(--r-xl); padding: 40px; color: #fff; text-align: center;
  background: radial-gradient(700px 300px at 30% 0%, rgba(108,92,231,0.4), transparent 60%), linear-gradient(135deg, #1a2440, #0f1626);
}
.strip h2 { font-family: var(--font-display); font-size: clamp(22px,3vw,32px); font-weight: 800; letter-spacing: -0.02em; }
.strip p { color: rgba(255,255,255,0.8); margin: 12px auto 22px; max-width: 52ch; }

/* -- Breadcrumb ---------------------------------------------------------- */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-4); margin: 6px 0 4px; }
.crumbs a { color: var(--ink-3); font-weight: 500; }
.crumbs a:hover { color: var(--ink); text-decoration: none; }

/* -- Footer -------------------------------------------------------------- */
.site-footer { margin-top: 70px; border-top: 1px solid var(--hairline); background: var(--bg-elev); }
.site-footer__inner { max-width: var(--maxw); margin-inline: auto; padding: 40px 22px; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
.site-footer h4 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-4); font-weight: 700; margin-bottom: 12px; }
.site-footer a { color: var(--ink-3); font-size: 13.5px; display: block; padding: 4px 0; }
.site-footer a:hover { color: var(--ink); text-decoration: none; }
.footer-brand p { color: var(--ink-3); font-size: 13px; margin-top: 10px; line-height: 1.5; max-width: 34ch; }
.footer-legal { border-top: 1px solid var(--hairline); }
.footer-legal__inner { max-width: var(--maxw); margin-inline: auto; padding: 16px 22px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; color: var(--ink-4); font-size: 12px; }

/* tier legend inline */
.tier-legend { display: flex; flex-wrap: wrap; gap: 14px; }
.tier-legend li { display: flex; gap: 7px; align-items: center; font-size: 12.5px; color: var(--ink-3); }

/* -- Utilities ----------------------------------------------------------- */
/* The UA rule that implements `[hidden]` (`[hidden] { display: none }`)
   loses to ANY author rule that sets display, and this sheet sets display on
   `.site-footer a` (block) and `.textlink` (inline-flex) among others.
   Author-level and !important so no later component rule can resurrect an
   element a script has hidden. */
[hidden] { display: none !important; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.center { text-align: center; }
.mt-0{margin-top:0}.mt-1{margin-top:8px}.mt-2{margin-top:16px}.mt-3{margin-top:24px}.mt-4{margin-top:32px}
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pill-note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); background: var(--surface-2); padding: 4px 11px; border-radius: var(--r-pill); }

/* -- Responsive ---------------------------------------------------------- */
@media (max-width: 1000px) {
  .browse { grid-template-columns: minmax(0, 1fr); }
  /* `align-self: start` above is for the sticky desktop sidebar. It has to be
     undone here: it stops this now-fixed box from stretching between top:0 and
     bottom:0, so the box sizes to its content (measured 1578px in an 844px
     viewport) instead of to the viewport. Content-height means nothing
     overflows, which means `overflow-y: auto` has nothing to scroll and the
     last two filter groups are unreachable on every phone. */
  .filters { position: fixed; inset: 0; align-self: stretch; z-index: 200; max-height: none; border-radius: 0;
    transform: translateX(-100%); transition: transform .25s ease; width: min(340px, 86vw); }
  .filters.is-open { transform: none; box-shadow: var(--shadow-lg); }
  .filters__close { display: grid; width: 44px; height: 44px; }
  .filters__backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 199; }
  .filters__backdrop.is-open { display: block; }
  .mobile-filter-btn { display: inline-flex; }
  .report-hero { grid-template-columns: minmax(0, 1fr); text-align: center; justify-items: center; }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .wrap { padding-inline: 16px; }
  .site-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .header-search { display: none; }
  .hero { padding: 36px 22px; }
  /* minmax(0,1fr), not 1fr: a bare `1fr` track keeps an implicit min-content
     floor, so the widest .app-row inside a card forced the track to 356px in a
     328px grid and the whole page scrolled sideways on anything under 372px
     (i.e. every 360dp Android). The 0 minimum lets the track shrink; the
     .app-row rule below then spends the reclaimed space on the name. */
  .grid, .grid--3, .grid--2 { grid-template-columns: minmax(0, 1fr); }
  .site-footer__inner { grid-template-columns: 1fr 1fr; }
  .pillar { grid-template-columns: 110px 1fr 40px; }

  /* The desktop row spends 130px on rank + icon + gaps before the name gets a
     pixel. On a phone that is most of the width, so the name column collapsed
     to 81px at 320px. Trim the fixed chrome and give the name a real minimum. */
  .app-row { grid-template-columns: 22px 46px minmax(0, 1fr) auto; gap: 10px; padding: 12px 4px; }
  .app-row__rank { font-size: 16px; }
  .app-row__icon { width: 46px; height: 46px; font-size: 21px; }
  .app-row__name { overflow-wrap: anywhere; }

  /* These carry `white-space: nowrap` so they read as single tokens on desktop.
     At phone widths a long one is simply wider than its container and pushes
     the document scroll box out — measured: "Not yet tested" reaching x=384 in
     a 360px viewport, and the methodology seal at 292px inside a 266px row.
     Below 720px legibility beats the single-line shape. */
  .verdict-pill, .seal, .stat-chip, .measured-strip__label { white-space: normal; }
  .app-card__tags, .app-card__foot { min-width: 0; }
}

/* -- Mobile slide-out nav ------------------------------------------------ */
.mobile-nav { display: none; }
.mobile-nav.is-open { display: block; position: fixed; inset: 0; z-index: 210; }
.mobile-nav__panel { position: absolute; top: 0; right: 0; height: 100%; width: min(300px,84vw); background: var(--surface);
  box-shadow: var(--shadow-lg); padding: 20px; display: flex; flex-direction: column; gap: 4px; }
.mobile-nav__panel a { padding: 13px 12px; border-radius: var(--r-sm); font-size: 16px; font-weight: 600; color: var(--ink); }
.mobile-nav__panel a:hover { background: var(--surface-2); text-decoration: none; }
.mobile-nav__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); }

/* The header search is display:none below 720px and there is no room to bring
   it back, so — exactly as the mode switch does — the nav panel carries its own
   copy. Without it, search exists on the home hero and nowhere else on a phone.
   16px on the input, not the header's 14px: iOS Safari zooms the viewport when
   a focused field is under 16px. */
.mobile-nav__search {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  background: var(--surface-2); border: 1px solid var(--hairline);
  border-radius: var(--r-pill); padding: 0 14px; height: 44px;
}
.mobile-nav__search:focus-within { background: var(--surface); border-color: var(--accent); }
.mobile-nav__search svg { width: 16px; height: 16px; color: var(--ink-4); flex: none; }
.mobile-nav__search input {
  border: 0; background: transparent; outline: none; width: 100%;
  font-size: 16px; min-width: 0;
}
.mobile-nav__search input::placeholder { color: var(--ink-4); }

/* -- Filter groups (grouped browse filters, pain-point attributes) ------- */
.filter-group__note { font-size: 11.5px; color: var(--ink-4); margin: -6px 0 10px; font-style: italic; }

/* -- Measured grid ("What we measured", report page) ---------------------- */
.measured-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.measured-card { padding: 14px 16px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--hairline-soft); }
.measured-card__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-4); font-weight: 700; }
.measured-card__value { font-family: var(--font-display); font-size: 19px; font-weight: 800; color: var(--ink); margin-top: 6px; line-height: 1.2; }
.measured-card__caption { font-size: 12px; color: var(--ink-3); margin-top: 4px; line-height: 1.4; }
.measured-card--good { background: var(--good-tint); }
.measured-card--good .measured-card__value { color: var(--good); }
.measured-card--warn { background: var(--warn-tint); }
.measured-card--warn .measured-card__value { color: var(--warn); }
.measured-card--bad  { background: var(--bad-tint); }
.measured-card--bad  .measured-card__value { color: var(--bad); }

/* -- Ad Honesty verdict card (games report — never changes the score) ---- */
.honesty-card { text-align: left; }
.honesty-pill {
  display: inline-flex; align-items: center; gap: 7px; border-radius: var(--r-pill);
  padding: 8px 18px; font-weight: 800; font-size: 15.5px; letter-spacing: -0.005em;
}
.honesty-pill--good { background: var(--good-tint); color: var(--good); }
.honesty-pill--warn { background: var(--warn-tint); color: var(--warn); }
.honesty-pill--bad  { background: var(--bad-tint);  color: var(--bad); }

/* -- Measured-by-Appworthy strip (app listing page) ------------------------ */
.measured-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.measured-strip__label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  color: var(--ink-4); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; }
.measured-strip__label svg { width: 13px; height: 13px; }
.measured-strip__chips { display: flex; flex-wrap: wrap; gap: 7px; }
.stat-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--surface-2); padding: 4px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.stat-chip b { font-family: var(--font-display); font-weight: 800; color: var(--ink); }
.stat-chip--good { background: var(--good-tint); color: var(--good); }
.stat-chip--good b { color: var(--good); }
.stat-chip--warn { background: var(--warn-tint); color: var(--warn); }
.stat-chip--warn b { color: var(--warn); }
.stat-chip--bad { background: var(--bad-tint); color: var(--bad); }
.stat-chip--bad b { color: var(--bad); }

@media (max-width: 720px) {
  .measured-grid { grid-template-columns: repeat(2, 1fr); }
}

/* -- Authority content pages: About + Methodology ----------------------- */
.authority-page .section { margin-top: clamp(62px, 8vw, 96px); }
.authority-page .section:first-child { margin-top: 0; }
.authority-page .section-head { margin-bottom: 24px; }
.authority-page .section-head h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -.035em; line-height: 1.06; }
.authority-page .section-head .sub { max-width: 68ch; margin-top: 7px; line-height: 1.55; }
.authority-section-label { display: block; margin-bottom: 9px; color: var(--accent-ink); font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.authority-kicker { background: var(--accent-tint); color: var(--accent-ink); border-color: transparent; }

.authority-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(360px, .82fr); gap: clamp(36px, 7vw, 86px); align-items: center; min-height: 585px; padding: 48px 0 62px; }
.authority-hero__copy { min-width: 0; }
.authority-hero__copy .crumbs { margin-bottom: 30px; }
.authority-hero__copy h1 { max-width: 11.5ch; margin-top: 19px; font-family: var(--font-display); font-size: clamp(44px, 6.2vw, 74px); font-weight: 850; letter-spacing: -.058em; line-height: .96; text-wrap: balance; }
.authority-hero__copy > p { max-width: 58ch; margin-top: 23px; color: var(--ink-2); font-size: clamp(17px, 2vw, 20px); line-height: 1.6; }
.authority-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 29px; }

.authority-hero__model { overflow: hidden; padding: 24px; border: 1px solid var(--hairline); border-radius: 24px; background: var(--surface); box-shadow: 0 28px 80px rgba(0,0,0,.13); transform: rotate(1deg); }
.authority-model__head { display: flex; justify-content: space-between; gap: 15px; padding-bottom: 17px; color: var(--ink-4); font-size: 8.5px; font-weight: 850; letter-spacing: .12em; }
.authority-model__head b { color: var(--accent-ink); }
.authority-hero__model article { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 18px 0; border-top: 1px solid var(--hairline-soft); }
.authority-hero__model article i { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 8px; color: var(--ink-3); background: var(--surface-3); font-size: 9px; font-style: normal; font-weight: 850; }
.authority-hero__model article div { display: flex; flex-direction: column; gap: 5px; }
.authority-hero__model article div b { font-family: var(--font-display); font-size: 14px; }
.authority-hero__model article div span { color: var(--ink-3); font-size: 11.5px; line-height: 1.45; }
.authority-hero__model article em { align-self: center; padding: 5px 7px; border-radius: var(--r-pill); color: var(--ink-3); background: var(--surface-2); font-size: 9px; font-style: normal; font-weight: 850; }
.authority-hero__model article.is-crowned { margin: 0 -12px -1px; padding: 18px 12px; border-radius: 14px; border-top-color: transparent; background: var(--good-tint); }
.authority-hero__model article.is-crowned i { color: #fff; background: var(--good); }
.authority-hero__model article.is-crowned em { color: var(--good); background: var(--surface); }
.authority-hero__model > p { margin-top: 17px; color: var(--ink-4); font-size: 9.5px; line-height: 1.5; text-align: center; }

.authority-values .feature-grid { gap: 14px; }
.authority-value-card { min-height: 235px; padding: 25px; box-shadow: var(--shadow-sm); }
.authority-value-card h3 { margin-top: 25px; font-size: 18px; }
.authority-value-card p { line-height: 1.6; }

.authority-process { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); background: var(--hairline-soft); box-shadow: var(--shadow-sm); }
.authority-process article { min-height: 245px; padding: 25px; background: var(--surface); }
.authority-process article > span { color: var(--accent-ink); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.authority-process h3 { margin-top: 42px; font-family: var(--font-display); font-size: 17px; line-height: 1.2; }
.authority-process p { margin-top: 10px; color: var(--ink-3); font-size: 12.5px; line-height: 1.6; }

.authority-score-panel { display: grid; grid-template-columns: minmax(260px,.72fr) minmax(0,1.28fr); gap: clamp(30px,5vw,68px); padding: clamp(30px,5vw,58px); color: #f3faf5; border-radius: 28px; background: radial-gradient(circle at 8% 4%, rgba(75,125,255,.22), transparent 32%), #101813; box-shadow: 0 28px 84px rgba(0,0,0,.18); }
.authority-score-panel__intro > span { color: #8ba298; font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.authority-score-panel__intro > strong { display: block; margin-top: 13px; font-family: var(--font-display); font-size: clamp(70px, 9vw, 112px); line-height: .8; letter-spacing: -.08em; }
.authority-score-panel__intro > strong span { color: #60736a; font-size: .46em; }
.authority-score-panel__intro > p { max-width: 38ch; margin-top: 24px; color: #adbbb2; font-size: 13px; line-height: 1.65; }
.authority-score-panel__crown { display: flex; flex-direction: column; gap: 3px; margin-top: 28px; padding: 14px 16px; border: 1px solid #2d4936; border-radius: 13px; background: #18271e; }
.authority-score-panel__crown b { color: #78dc92; font-family: var(--font-display); font-size: 18px; }
.authority-score-panel__crown span { color: #98ab9f; font-size: 10.5px; }
.authority-pillar-list { display: flex; flex-direction: column; }
.authority-pillar-list article { display: grid; grid-template-columns: 34px minmax(0,1fr) auto; gap: 12px; align-items: center; padding: 15px 0; border-bottom: 1px solid #28332c; }
.authority-pillar-list article:last-child { border-bottom: 0; }
.authority-pillar-list article > span { color: #78dc92; font-size: 9.5px; font-weight: 850; }
.authority-pillar-list article div { display: flex; flex-direction: column; gap: 3px; }
.authority-pillar-list article b { font-size: 13px; }
.authority-pillar-list article small { color: #87978d; font-size: 10.5px; }
.authority-pillar-list article em { color: #a7b6ad; font-size: 10px; font-style: normal; font-weight: 750; }
.authority-score-note { max-width: 76ch; margin: 14px auto 0; text-align: center; line-height: 1.55; }

.authority-state-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.authority-state-grid article { min-height: 210px; padding: 22px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.authority-state { display: inline-flex; padding: 5px 7px; border-radius: var(--r-pill); font-size: 8.5px; font-weight: 850; letter-spacing: .08em; }
.authority-state--neutral { color: var(--ink-3); background: var(--surface-3); }
.authority-state--watch { color: var(--warn); background: var(--warn-tint); }
.authority-state--auto { color: var(--accent-ink); background: var(--accent-tint); }
.authority-state--cert { color: var(--good); background: var(--good-tint); }
.authority-state-grid h3 { margin-top: 32px; font-family: var(--font-display); font-size: 16px; }
.authority-state-grid p { margin-top: 8px; color: var(--ink-3); font-size: 12px; line-height: 1.58; }
.authority-integrity-note { display: grid; grid-template-columns: minmax(210px,.55fr) minmax(0,1fr); gap: 24px; margin-top: 15px; padding: 21px 23px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-md) var(--r-md) 0; background: var(--accent-tint); }
.authority-integrity-note b { color: var(--ink); font-family: var(--font-display); font-size: 15px; }
.authority-integrity-note span { color: var(--ink-3); font-size: 12.5px; line-height: 1.55; }

.authority-developer__panel { padding: clamp(28px,5vw,48px); border-color: color-mix(in srgb,var(--accent) 18%,var(--hairline)); background: linear-gradient(145deg,var(--surface),var(--accent-tint)); }
.authority-developer__panel h2 { margin-top: 14px; font-family: var(--font-display); font-size: clamp(29px,4vw,40px); letter-spacing: -.035em; line-height: 1.05; }
.authority-final-strip { padding-block: clamp(46px,7vw,70px); }

.methodology-summary { padding: 24px; border: 1px solid var(--hairline); border-radius: 22px; background: var(--surface); box-shadow: 0 25px 74px rgba(0,0,0,.13); }
.methodology-summary > span { color: var(--accent-ink); font-size: 9px; font-weight: 850; letter-spacing: .12em; }
.methodology-summary ol { display: flex; flex-direction: column; margin-top: 15px; counter-reset: method-rule; }
.methodology-summary li { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 70px; padding: 15px 0 15px 42px; border-top: 1px solid var(--hairline-soft); counter-increment: method-rule; }
.methodology-summary li::before { content: "0" counter(method-rule); position: absolute; left: 0; top: 17px; color: var(--ink-4); font-size: 9px; font-weight: 850; }
.methodology-summary li b { font-family: var(--font-display); font-size: 14px; }
.methodology-summary li small { color: var(--ink-3); font-size: 11px; line-height: 1.45; }

.methodology-scope__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
.methodology-scope__grid article { min-height: 235px; padding: 25px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); }
.methodology-scope__grid article.is-in { color: #f4fbf6; border-color: #203a28; background: #111c16; }
.methodology-scope__grid article > span { color: var(--accent-ink); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.methodology-scope__grid article.is-in > span { color: #76d990; }
.methodology-scope__grid h3 { margin-top: 43px; font-family: var(--font-display); font-size: 20px; }
.methodology-scope__grid p { margin-top: 10px; color: var(--ink-3); font-size: 12.5px; line-height: 1.62; }
.methodology-scope__grid article.is-in p { color: #aebeb4; }

.methodology-formula { display: grid; grid-template-columns: minmax(200px,.75fr) minmax(250px,1fr) minmax(200px,.75fr); gap: 1px; overflow: hidden; border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); background: var(--hairline-soft); }
.methodology-formula > div { min-height: 210px; padding: 24px; background: var(--surface); }
.methodology-formula > div span { color: var(--accent-ink); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.methodology-formula > div b { display: block; margin-top: 24px; font-family: var(--font-display); font-size: 46px; letter-spacing: -.05em; }
.methodology-formula > div small { display: block; margin-top: 12px; color: var(--ink-3); font-size: 11.5px; line-height: 1.5; }
.methodology-formula code { display: grid; place-items: center; padding: 28px; color: #d9e8de; background: #111a14; font-size: 13px; line-height: 1.55; text-align: center; white-space: normal; }
.methodology-pillars { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; margin-top: 14px; }
.methodology-pillars article { min-height: 190px; padding: 20px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); }
.methodology-pillars article span { color: var(--accent-ink); font-size: 8.5px; font-weight: 850; letter-spacing: .08em; }
.methodology-pillars h3 { margin-top: 29px; font-family: var(--font-display); font-size: 14px; line-height: 1.2; }
.methodology-pillars p { margin-top: 8px; color: var(--ink-3); font-size: 10.5px; line-height: 1.5; }
.methodology-version-note { margin-top: 14px; text-align: center; }

.evidence-ladder { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.evidence-ladder article { display: grid; grid-template-columns: 190px minmax(0,1fr) 105px; gap: 24px; align-items: center; min-height: 100px; padding: 20px 24px; border-bottom: 1px solid var(--hairline-soft); }
.evidence-ladder article:last-child { border-bottom: 0; }
.evidence-ladder article > div { display: flex; flex-direction: column; gap: 5px; }
.evidence-ladder article span { color: var(--ink-4); font-size: 8px; font-weight: 850; letter-spacing: .1em; }
.evidence-ladder article b { font-family: var(--font-display); font-size: 16px; }
.evidence-ladder article p { color: var(--ink-3); font-size: 12px; line-height: 1.55; }
.evidence-ladder article em { justify-self: end; padding: 6px 8px; border-radius: var(--r-pill); color: var(--ink-3); background: var(--surface-3); font-size: 8.5px; font-style: normal; font-weight: 850; letter-spacing: .06em; }
.evidence-ladder article.evidence-ladder__measured { background: var(--good-tint); }
.evidence-ladder article.evidence-ladder__measured span, .evidence-ladder article.evidence-ladder__measured em { color: var(--good); }
.evidence-ladder article.evidence-ladder__measured em { background: var(--surface); }
.methodology-input-gate { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); gap: 12px; align-items: center; margin-top: 16px; }
.methodology-input-gate > div { min-height: 170px; padding: 20px; border: 1px solid var(--hairline); border-radius: var(--r-md); background: var(--surface); }
.methodology-input-gate > div > span { color: var(--accent-ink); font-size: 8.5px; font-weight: 850; letter-spacing: .09em; }
.methodology-input-gate > div > b { display: block; margin-top: 25px; font-family: var(--font-display); font-size: 15px; }
.methodology-input-gate > div > p { margin-top: 7px; color: var(--ink-3); font-size: 11px; line-height: 1.5; }
.methodology-input-gate > i { color: var(--ink-4); font-size: 22px; font-style: normal; }
.methodology-input-gate > div.is-result { border-color: color-mix(in srgb,var(--good) 30%,var(--hairline)); background: var(--good-tint); }
.methodology-input-gate > div.is-result > span { color: var(--good); }

.methodology-game-panel, .methodology-pipeline { padding: clamp(25px,4vw,34px); }
.methodology-guardrails__grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.methodology-guardrails__grid article { min-height: 225px; padding: 24px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.methodology-guardrails__grid article > span { color: var(--accent-ink); font-size: 9px; font-weight: 850; letter-spacing: .1em; }
.methodology-guardrails__grid h3 { margin-top: 39px; font-family: var(--font-display); font-size: 17px; }
.methodology-guardrails__grid p { margin-top: 9px; color: var(--ink-3); font-size: 12px; line-height: 1.6; }

@media (max-width: 980px) {
  .authority-hero { grid-template-columns: minmax(0,1fr); min-height: 0; padding-top: 38px; }
  .authority-hero__copy h1 { max-width: 13ch; }
  .authority-hero__model { max-width: 680px; transform: none; }
  .authority-process, .authority-state-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .methodology-pillars { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .authority-page .section { margin-top: 58px; }
  .authority-hero { padding: 28px 0 36px; gap: 32px; }
  .authority-hero__copy .crumbs { margin-bottom: 22px; }
  .authority-hero__copy h1 { max-width: none; font-size: clamp(42px,13vw,58px); }
  .authority-hero__copy > p { font-size: 17px; }
  .authority-hero__actions .btn { width: 100%; text-align: center; white-space: normal; }
  .authority-hero__model { padding: 20px; border-radius: 19px; }
  .authority-hero__model article { grid-template-columns: 30px minmax(0,1fr); }
  .authority-hero__model article em { grid-column: 2; justify-self: start; }
  .authority-process, .authority-state-grid, .authority-score-panel, .methodology-scope__grid,
  .methodology-formula, .methodology-pillars, .methodology-guardrails__grid { grid-template-columns: minmax(0,1fr); }
  .authority-process article, .authority-value-card, .authority-state-grid article,
  .methodology-scope__grid article, .methodology-guardrails__grid article { min-height: 0; }
  .authority-process h3, .authority-state-grid h3, .methodology-scope__grid h3,
  .methodology-guardrails__grid h3 { margin-top: 24px; }
  .authority-score-panel { padding: 30px 22px; border-radius: 22px; }
  .authority-score-panel__intro > strong { font-size: 80px; }
  .authority-pillar-list article { grid-template-columns: 30px minmax(0,1fr); }
  .authority-pillar-list article em { grid-column: 2; justify-self: start; }
  .authority-integrity-note { grid-template-columns: minmax(0,1fr); gap: 8px; }
  .authority-developer__panel .grid--2 { grid-template-columns: minmax(0,1fr); }
  .methodology-formula > div { min-height: 0; }
  .methodology-formula code { min-height: 120px; }
  .evidence-ladder article { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .evidence-ladder article em { justify-self: start; }
  .methodology-input-gate { grid-template-columns: minmax(0,1fr); }
  .methodology-input-gate > div { min-height: 0; }
  .methodology-input-gate > i { transform: rotate(90deg); justify-self: center; }
}

/* -- Developer portal ---------------------------------------------------- */
.dp { max-width: 1120px; margin-inline: auto; padding-top: 8px; }
.dp-h1 { font-family: var(--font-display); font-size: clamp(26px,3.6vw,40px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.06; margin-top: 14px; }
.dp-h2 { font-family: var(--font-display); font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }

/* developer sales landing */
.dp-hero { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(360px, .82fr); gap: clamp(34px, 6vw, 76px);
  align-items: center; min-height: 570px; padding: 38px 0 48px; }
.dp-hero__copy { min-width: 0; }
/* 0.30.1: the sample report that filled the second column is retired with the
   score it showed, so the hero is one column and needs no stage height. */
.dp-hero--single { grid-template-columns: minmax(0, 1fr); min-height: 0; max-width: 820px; }
.dp-audit-record { padding-top: 56px; }
.dp-audit-record .dp-authority-strip { margin-top: 20px; }
.dp-hero__eyebrow { background: var(--accent-tint); color: var(--accent-ink); border-color: transparent; }
.dp-hero__title { font-family: var(--font-display); font-size: clamp(42px, 6vw, 72px); font-weight: 850; letter-spacing: -.055em;
  line-height: .98; max-width: 11ch; margin-top: 20px; text-wrap: balance; }
.dp-hero__lede { color: var(--ink-2); font-size: clamp(17px, 2vw, 20px); line-height: 1.55; max-width: 58ch; margin-top: 22px; }
.dp-hero__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.dp-hero__meta { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 20px; color: var(--ink-3); font-size: 12.5px; font-weight: 650; }
.dp-hero__meta span { display: inline-flex; align-items: center; gap: 5px; }
.dp-hero__meta svg { width: 14px; height: 14px; color: var(--good); }
.dp-report-preview { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--hairline);
  border-radius: 24px; padding: 24px; box-shadow: 0 28px 80px rgba(0,0,0,.13); transform: rotate(1.2deg); }
.dp-report-preview::before { content: ""; position: absolute; width: 240px; height: 240px; border-radius: 50%;
  top: -140px; right: -100px; background: var(--accent-tint); }
.dp-report-preview__top { position: relative; display: flex; justify-content: space-between; gap: 14px; font-size: 9px; font-weight: 850;
  letter-spacing: .13em; color: var(--ink-4); }
.dp-report-preview__status { color: var(--accent-ink); background: var(--accent-tint); border-radius: var(--r-pill); padding: 3px 7px; }
.dp-report-preview__app { display: flex; gap: 11px; align-items: center; margin-top: 24px; }
.dp-report-preview__app > span:last-child { display: flex; flex-direction: column; gap: 3px; }
.dp-report-preview__app small { color: var(--ink-4); }
.dp-report-preview__icon { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: white; font-weight: 850;
  background: linear-gradient(135deg, #7557ff, #32a9ff); box-shadow: var(--shadow-sm); }
.dp-score-path { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: end; margin-top: 22px;
  border-radius: 18px; padding: 18px 20px; background: var(--surface-2); }
.dp-score-path > div { display: flex; flex-direction: column; }
.dp-score-path small { color: var(--ink-4); font-size: 10px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.dp-score-path b { font-family: var(--font-display); font-size: 36px; line-height: 1; letter-spacing: -.04em; margin-top: 5px; }
.dp-score-path__arrow { color: var(--ink-4); font-size: 22px; padding-bottom: 4px; }
.dp-score-path__target { text-align: right; color: var(--good); }
.dp-report-preview__rule { height: 1px; background: var(--hairline-soft); margin: 20px 0 4px; }
.dp-report-item { display: grid; grid-template-columns: 24px minmax(0, 1fr) 18px; gap: 10px; align-items: center; padding: 12px 0;
  border-bottom: 1px solid var(--hairline-soft); }
.dp-report-item > span { color: var(--ink-4); font-size: 10px; font-weight: 800; }
.dp-report-item p { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dp-report-item p b { font-size: 13px; }
.dp-report-item p small { color: var(--ink-4); font-size: 10.5px; }
.dp-report-item > svg { color: var(--good); width: 16px; height: 16px; }
.dp-report-preview__foot { margin-top: 14px; color: var(--ink-4); font-size: 9.5px; text-align: center; }
.dp-authority-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline-soft); border: 1px solid var(--hairline-soft);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.dp-authority-strip span { background: var(--surface); color: var(--ink-3); padding: 17px 20px; font-size: 12.5px; line-height: 1.45; }
.dp-authority-strip b { color: var(--ink); }
.dp-services { padding-top: 68px; scroll-margin-top: 100px; }
.dp-section-head { max-width: 650px; }
.dp-section-head > span { display: block; color: var(--accent-ink); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 8px; }
.dp-section-head .dp-h2 { font-size: clamp(28px, 4vw, 40px); margin-bottom: 10px; }
.dp-section-head p { color: var(--ink-3); line-height: 1.55; }
.dp-deliverables, .dp-process { padding-top: 76px; }
.dp-deliverables__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 26px; }
.dp-deliverable { position: relative; min-height: 230px; padding: 24px; border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.dp-deliverable__num { position: absolute; top: 20px; right: 22px; color: var(--ink-4); font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.dp-deliverable__icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--accent-ink); background: var(--accent-tint); border-radius: 12px; }
.dp-deliverable__icon svg { width: 20px; height: 20px; }
.dp-deliverable h3 { font-family: var(--font-display); font-size: 18px; letter-spacing: -.015em; margin-top: 30px; }
.dp-deliverable p { color: var(--ink-3); font-size: 13.5px; line-height: 1.6; margin-top: 8px; max-width: 44ch; }
.dp-process__rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-top: 28px; border-top: 1px solid var(--hairline); }
.dp-process__rail article { position: relative; padding: 24px 22px 8px 0; }
.dp-process__rail article:not(:last-child)::after { content: ""; position: absolute; top: -4px; right: 20px; width: 7px; height: 7px; border-top: 1.5px solid var(--ink-4); border-right: 1.5px solid var(--ink-4); transform: rotate(45deg); }
.dp-process__rail article > span { display: block; color: var(--accent-ink); font-size: 10px; font-weight: 850; letter-spacing: .08em; }
.dp-process__rail h3 { font-family: var(--font-display); font-size: 17px; margin-top: 16px; }
.dp-process__rail p { color: var(--ink-3); font-size: 12.5px; line-height: 1.55; margin-top: 7px; }
.dp-badge-showcase { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 6vw, 72px); align-items: center; margin-top: 82px; padding: clamp(34px, 6vw, 64px); border-radius: 28px; color: #f4fbf6; background: radial-gradient(circle at 88% 12%, rgba(52,199,89,.22), transparent 34%), #111c16; box-shadow: 0 30px 90px rgba(0,0,0,.18); }
.dp-badge-showcase__copy > span { color: #77dc91; font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .11em; }
.dp-badge-showcase__copy h2 { font-family: var(--font-display); font-size: clamp(32px, 4.2vw, 48px); line-height: 1.02; letter-spacing: -.04em; max-width: 12ch; margin-top: 12px; }
.dp-badge-showcase__copy > p { color: #b8c8bd; line-height: 1.65; margin-top: 16px; }
.dp-badge-showcase__copy ul { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.dp-badge-showcase__copy li { display: flex; gap: 10px; align-items: flex-start; color: #b8c8bd; font-size: 13px; line-height: 1.5; }
.dp-badge-showcase__copy li svg { width: 16px; height: 16px; color: #77dc91; flex: none; margin-top: 2px; }
.dp-badge-showcase__copy li b { color: #fff; }
.dp-badge-showcase__copy .btn--ghost { color: #fff; border-color: #3b4a40; background: #1a2820; }
.dp-badge-showcase__stage { min-width: 0; }
.dp-badge-site { overflow: hidden; border: 1px solid #dfe5e2; border-radius: 18px; background: #fff; color: #18201b; box-shadow: 0 24px 60px rgba(0,0,0,.35); transform: rotate(1.2deg); }
.dp-badge-site__bar { display: flex; align-items: center; gap: 6px; height: 35px; padding: 0 12px; border-bottom: 1px solid #edf0ee; background: #f7f9f8; }
.dp-badge-site__bar i { width: 7px; height: 7px; border-radius: 50%; background: #cbd2ce; }
.dp-badge-site__bar span { margin-left: 8px; color: #849089; font-size: 8.5px; }
.dp-badge-site__body { display: flex; gap: 13px; align-items: center; padding: 25px 24px 18px; }
.dp-badge-site__body > div { display: flex; flex-direction: column; gap: 4px; }
.dp-badge-site__body small { color: #748078; }
.dp-badge-site__logo { width: 46px; height: 46px; display: grid; place-items: center; color: #fff; font-weight: 850; border-radius: 13px; background: linear-gradient(135deg, #7557ff, #32a9ff); }
.dp-badge-site__badge { padding: 0 24px 26px; }
.dp-badge-site__badge svg { display: block; max-width: 100%; height: auto; }
.dp-verify-chip { width: max-content; max-width: 90%; display: flex; align-items: center; gap: 10px; margin: -3px 0 0 auto; padding: 11px 14px; color: #183620; background: #dff8e6; border: 1px solid #9ae3ac; border-radius: 12px; box-shadow: 0 12px 30px rgba(0,0,0,.2); transform: rotate(-2deg); position: relative; }
.dp-verify-chip > svg { width: 20px; height: 20px; color: #16863d; }
.dp-verify-chip > span { display: flex; flex-direction: column; }
.dp-verify-chip small { color: #39734a; font-size: 7.5px; font-weight: 850; letter-spacing: .1em; }
.dp-verify-chip b { font-size: 11px; }
.dp-badge-showcase__stage > p { color: #829287; font-size: 9.5px; text-align: center; margin-top: 20px; }
.dp-faq { padding-top: 76px; }
.dp-faq__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; overflow: hidden; margin-top: 24px; border: 1px solid var(--hairline-soft); border-radius: var(--r-lg); background: var(--hairline-soft); }
.dp-faq__grid article { padding: 24px; background: var(--surface); }
.dp-faq__grid h3 { font-family: var(--font-display); font-size: 17px; letter-spacing: -.015em; }
.dp-faq__grid p { color: var(--ink-3); font-size: 13px; line-height: 1.6; margin-top: 8px; }
.dp-final-cta { display: flex; flex-direction: column; align-items: center; margin-top: 76px; padding: clamp(44px, 7vw, 74px) 24px; text-align: center; border-radius: 28px; background: linear-gradient(145deg, var(--accent-tint), var(--surface-2)); border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--hairline)); }
.dp-final-cta h2 { font-family: var(--font-display); font-size: clamp(34px, 5vw, 52px); line-height: 1.02; letter-spacing: -.045em; max-width: 14ch; margin-top: 16px; }
.dp-final-cta p { color: var(--ink-3); line-height: 1.6; max-width: 56ch; margin-top: 14px; }
.dp-final-cta .btn { margin-top: 24px; }
.dp-final-cta small { color: var(--ink-4); margin-top: 12px; }

/* homepage entry point for the developer human-review service */
.home-dev-offer { display: grid; grid-template-columns: .94fr 1.06fr; gap: clamp(34px, 6vw, 76px); align-items: center;
  overflow: hidden; padding: clamp(34px, 6vw, 66px); border-radius: 28px; color: #f5fbf7;
  background: radial-gradient(circle at 86% 12%, rgba(52,199,89,.24), transparent 34%), #101b15;
  box-shadow: 0 28px 80px rgba(0,0,0,.16); }
.home-dev-offer__eyebrow { color: #78db91; font-size: 10px; font-weight: 850; letter-spacing: .11em; text-transform: uppercase; }
.home-dev-offer__copy h2 { max-width: 13ch; margin-top: 13px; font-family: var(--font-display); font-size: clamp(34px, 4.5vw, 52px); line-height: 1.02; letter-spacing: -.045em; }
.home-dev-offer__copy > p { max-width: 54ch; margin-top: 16px; color: #b7c6bc; line-height: 1.65; }
.home-dev-offer__copy ul { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.home-dev-offer__copy li { display: flex; align-items: center; gap: 11px; color: #edf5ef; font-size: 13px; }
.home-dev-offer__copy li span { color: #78db91; font-size: 9px; font-weight: 850; letter-spacing: .08em; }
.home-dev-offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 26px; }
.home-dev-offer__actions .textlink { color: #9ce6af; }
.home-dev-offer__copy > small { display: block; margin-top: 13px; color: #829187; }
.home-dev-offer__visual { min-width: 0; }
.home-dev-report { padding: 22px; color: #172019; background: #fff; border: 1px solid #dfe6e1; border-radius: 20px;
  box-shadow: 0 24px 64px rgba(0,0,0,.35); transform: rotate(1.1deg); }
.home-dev-report__head { display: flex; justify-content: space-between; gap: 12px; color: #738078; font-size: 8px; font-weight: 850; letter-spacing: .11em; }
.home-dev-report__head b { color: #137f39; padding: 3px 7px; border-radius: 999px; background: #e0f6e6; }
.home-dev-report__score { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: end; margin-top: 18px; padding: 16px 18px; border-radius: 15px; background: #f2f6f3; }
.home-dev-report__score span { display: flex; flex-direction: column; }
.home-dev-report__score span:last-child { text-align: right; color: #12805c; }
.home-dev-report__score small { color: #7c8880; font-size: 9px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
.home-dev-report__score b { margin-top: 4px; font-family: var(--font-display); font-size: 32px; line-height: 1; letter-spacing: -.04em; }
.home-dev-report__score i { color: #9aa49e; font-size: 20px; font-style: normal; padding-bottom: 3px; }
.home-dev-report__item { display: grid; grid-template-columns: 32px minmax(0,1fr); gap: 11px; align-items: center; padding: 12px 2px; border-bottom: 1px solid #e8ece9; }
.home-dev-report__item > span { color: #12805c; font-size: 12px; font-weight: 850; }
.home-dev-report__item p { display: flex; flex-direction: column; gap: 2px; }
.home-dev-report__item p b { font-size: 12.5px; }
.home-dev-report__item p small { color: #7c8880; font-size: 10px; }
.home-dev-badge { position: relative; width: max-content; max-width: 95%; display: flex; align-items: center; gap: 10px; margin: -2px 0 0 auto;
  padding: 10px 13px; color: #172019; background: #fff; border: 1px solid #dfe6e1; border-radius: 13px;
  box-shadow: 0 14px 34px rgba(0,0,0,.28); transform: rotate(-1.8deg); }
.home-dev-badge__shield { width: 28px; height: 28px; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg,#34c759,#12805c); border-radius: 9px; }
.home-dev-badge__shield svg { width: 17px; height: 17px; }
.home-dev-badge > span:nth-child(2) { display: flex; flex-direction: column; }
.home-dev-badge > span b { font-size: 12.5px; }
.home-dev-badge > span small { color: #647169; font-size: 6.5px; font-weight: 850; letter-spacing: .1em; }
.home-dev-badge > i { width: 1px; height: 28px; background: #e1e7e3; }
.home-dev-badge > strong { color: #12805c; font-family: var(--font-display); font-size: 19px; }
.home-dev-badge > strong small { color: #829087; font-size: 9px; }
.home-dev-offer__visual > p { margin-top: 18px; color: #829187; font-size: 9.5px; text-align: center; }

/* public score certificate and embed kit */
.cert-page { max-width: 1080px; margin-inline: auto; }
.cert-hero { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: clamp(34px, 7vw, 80px); align-items: center; min-height: 530px; padding: 44px 0 54px; }
.cert-seal { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.cert-seal__ring { --pct: 90; width: 260px; aspect-ratio: 1; position: relative; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--good) calc(var(--pct) * 1%), var(--surface-3) 0); box-shadow: 0 24px 60px rgba(0,0,0,.14); }
.cert-seal__ring::before { content: ""; position: absolute; inset: 13px; border-radius: 50%; background: var(--surface); box-shadow: inset 0 0 0 1px var(--hairline-soft); }
.cert-seal__ring > div { position: relative; display: flex; flex-direction: column; align-items: center; }
.cert-seal__ring b { font-family: var(--font-display); color: var(--ink); font-size: 72px; line-height: .9; letter-spacing: -.065em; }
.cert-seal__ring span { color: var(--ink-4); font-size: 12px; margin-top: 8px; }
.cert-seal > span { display: inline-flex; align-items: center; gap: 7px; color: var(--good); font-size: 12px; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.cert-seal > span svg { width: 15px; height: 15px; }
.cert-hero__copy h1 { font-family: var(--font-display); font-size: clamp(40px, 6vw, 68px); letter-spacing: -.05em; line-height: 1; margin-top: 18px; }
.cert-hero__copy > p { color: var(--ink-3); font-size: 18px; margin-top: 8px; }
.cert-status { display: flex; gap: 13px; align-items: center; margin-top: 26px; padding: 15px 17px; background: var(--good-tint); border-radius: var(--r-md); width: max-content; max-width: 100%; }
.cert-status > svg { width: 24px; height: 24px; color: var(--good); flex: none; }
.cert-status > span { display: flex; flex-direction: column; gap: 2px; }
.cert-status small { color: var(--ink-3); }
.cert-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; color: var(--ink-4); font-size: 11.5px; margin-top: 20px; }
.cert-meta b { color: var(--ink-2); }
.cert-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 24px; }
.cert-proof { display: grid; grid-template-columns: .9fr 1.1fr; gap: 52px; align-items: end; padding: 32px; background: var(--surface-2); border-radius: var(--r-lg); }
.cert-proof span { color: var(--accent-ink); font-size: 10px; font-weight: 850; text-transform: uppercase; letter-spacing: .1em; }
.cert-proof h2 { font-family: var(--font-display); font-size: 26px; line-height: 1.1; letter-spacing: -.025em; margin-top: 8px; }
.cert-proof p { color: var(--ink-3); font-size: 13.5px; line-height: 1.65; }
.cert-kit { padding-top: 72px; }
.cert-kit__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 25px; }
.cert-badge-card { padding: 22px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.cert-badge-card > span { display: block; color: var(--ink-4); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.cert-badge-card__canvas { min-height: 150px; display: grid; place-items: center; margin-top: 12px; padding: 20px; border-radius: var(--r-md); background: #f4f7f5; }
.cert-badge-card__canvas svg { max-width: 100%; height: auto; }
.cert-badge-card__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.cert-badge-card > p { color: var(--ink-3); font-size: 12.5px; line-height: 1.5; margin: 14px 0; }
.cert-code { overflow: auto; margin-top: 14px; padding: 17px 19px; color: #d8e8de; background: #101a14; border-radius: var(--r-md); font-size: 11px; line-height: 1.55; }
.cert-kit > .small { margin-top: 12px; }
.cert-unavailable { max-width: 720px; margin: 70px auto 0; text-align: center; padding: 55px 30px; border: 1px solid var(--hairline); border-radius: var(--r-lg); background: var(--surface); }
.cert-unavailable__mark { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 20px; color: var(--ink-3); background: var(--surface-3); border-radius: 50%; }
.cert-unavailable__mark svg { width: 32px; height: 32px; }
.cert-unavailable h1 { font-family: var(--font-display); font-size: clamp(30px, 5vw, 48px); letter-spacing: -.035em; margin: 18px auto 0; max-width: 16ch; }
.cert-unavailable > p { color: var(--ink-3); line-height: 1.6; max-width: 58ch; margin: 14px auto 0; }
.app-badge-panel { text-align: center; }
.app-badge-panel .panel__title { justify-content: center; }
.app-badge-panel__preview { display: block; width: max-content; max-width: 100%; margin: 14px auto; }
.app-badge-panel__preview svg { display: block; max-width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgba(0,0,0,.10)); }
.app-badge-panel .btn { margin-top: 14px; }

/* generic form controls */
.dp-field { margin-bottom: 16px; }
.dp-field:last-child { margin-bottom: 0; }
.dp-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.dp-input { width: 100%; border: 1px solid var(--hairline); background: var(--surface-2); color: var(--ink);
  border-radius: var(--r-sm); padding: 11px 13px; font-size: 14.5px; line-height: 1.4; }
.dp-input:focus { outline: none; border-color: var(--accent); background: var(--surface); }
.dp-input:disabled { color: var(--ink-3); opacity: .8; }
textarea.dp-input { resize: vertical; min-height: 96px; }
select.dp-input { -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238E8E93' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; }
.dp-file { padding: 9px 12px; font-size: 13px; }
.dp-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* choose-a-service cards */
.dp-choose { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 24px 0 30px; }
.dp-choice { text-align: left; display: flex; flex-direction: column; gap: 7px; padding: 20px 22px;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease; position: relative; }
.dp-choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.dp-choice--free:hover { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.dp-choice__badge { align-self: flex-start; font-size: 12px; font-weight: 800; letter-spacing: .02em;
  padding: 3px 10px; border-radius: var(--r-pill); }
.dp-choice__badge--paid { background: var(--accent-tint); color: var(--accent-ink); }
.dp-choice__badge--free { background: var(--good-tint); color: var(--good); }
.dp-choice__title { font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
.dp-choice__blurb { font-size: 13.5px; color: var(--ink-3); line-height: 1.5; }
.dp-choice__go { margin-top: 4px; font-size: 13.5px; font-weight: 600; color: var(--accent-ink); display: inline-flex; align-items: center; gap: 4px; }
.dp-choice__go svg { width: 15px; height: 15px; }
.dp-choice--analyze { border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); box-shadow: var(--shadow-md); }
.dp-choice--analyze::after { content: "MOST POPULAR"; position: absolute; top: 15px; right: 16px; color: var(--accent-ink); font-size: 8.5px;
  font-weight: 850; letter-spacing: .09em; }

/* terms / guardrails box */
.dp-terms { background: var(--accent-tint); border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: var(--r-lg); padding: 20px 22px; margin: 20px 0; }
.dp-terms__title { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; color: var(--accent-ink); margin-bottom: 12px; }
.dp-terms__title svg { width: 17px; height: 17px; }
.dp-terms__list { display: flex; flex-direction: column; gap: 10px; }
.dp-terms__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.dp-terms__list li svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--accent-ink); }

.dp-note-free { display: flex; gap: 11px; align-items: flex-start; background: var(--good-tint);
  border-radius: var(--r-md); padding: 14px 16px; margin-top: 18px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.dp-note-free svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--good); }

/* progress rail */
.dp-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.dp-progress__step { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-4); font-size: 13px; font-weight: 600; }
.dp-progress__step:not(:last-child)::after { content: ""; width: 22px; height: 1.5px; background: var(--hairline); margin-left: 8px; }
.dp-progress__dot { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-3); font-size: 12.5px; font-weight: 800; }
.dp-progress__dot svg { width: 13px; height: 13px; }
.dp-progress__step.is-current .dp-progress__dot { background: var(--accent); color: #fff; }
.dp-progress__step.is-current { color: var(--ink); }
.dp-progress__step.is-done .dp-progress__dot { background: var(--good); color: #fff; }
.dp-back { margin: 14px 0 2px; background: none; border: 0; padding: 0; }

/* app summary card */
.dp-appcard { background: var(--surface-2); border: 1px solid var(--hairline-soft); border-radius: var(--r-md); padding: 14px 16px; }

/* verify methods */
.dp-methods { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.dp-method { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px; border: 1px solid var(--hairline);
  border-radius: var(--r-md); cursor: pointer; background: var(--surface); }
.dp-method.is-on { border-color: var(--accent); background: var(--accent-tint); }
.dp-method input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
.dp-method__body { display: flex; flex-direction: column; gap: 2px; }
.dp-method__body b { font-size: 14px; }
.dp-verified { display: flex; gap: 12px; align-items: center; background: var(--good-tint); border-radius: var(--r-md); padding: 14px 16px; }
.dp-verified svg { width: 22px; height: 22px; color: var(--good); flex: none; }

/* reason checklist */
.dp-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.dp-check { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); cursor: pointer; padding: 3px 0; }
.dp-check input { margin-top: 2px; accent-color: var(--accent); width: 15px; height: 15px; flex: none; }

/* flag-a-label chips (dispute an attribute — never changes the score directly) */
.dp-labelflags { display: flex; flex-wrap: wrap; gap: 8px; }
.dp-labelflag { cursor: pointer; border: 1px solid transparent; position: relative; }
.dp-labelflag:hover { box-shadow: inset 0 0 0 1.5px var(--ink-4); }
.dp-labelflag.is-flagged { background: var(--bad-tint); color: var(--bad); box-shadow: inset 0 0 0 1.5px var(--bad); text-decoration: line-through; }
.dp-labelflag.is-flagged svg { color: var(--bad); }

/* inline app-search results */
.dp-results { margin-top: 8px; display: flex; flex-direction: column; gap: 2px; }
.dp-res { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; background: transparent; border-radius: var(--r-sm); text-align: left; width: 100%; }
.dp-res:hover { background: var(--surface-2); }
.dp-res__name { font-weight: 600; font-size: 14px; color: var(--ink); }

/* actions row */
.dp-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }

/* payment */
.dp-paygrid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; align-items: start; margin-top: 6px; }
.dp-paygrid .dp-terms { margin: 16px 0 4px; }
.dp-order { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--hairline-soft); font-size: 14.5px; }
.dp-order b { font-family: var(--font-display); font-weight: 800; }
.dp-order--total { border-bottom: 0; font-size: 15.5px; }
.dp-order-includes { display: flex; flex-direction: column; gap: 8px; padding: 14px 0; border-bottom: 1px solid var(--hairline-soft); }
.dp-order-includes li { display: flex; gap: 8px; align-items: center; color: var(--ink-3); font-size: 12.5px; }
.dp-order-includes svg { width: 14px; height: 14px; color: var(--good); }
.dp-agree { display: flex; gap: 11px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; margin-top: 8px; cursor: pointer; }
.dp-agree input { margin-top: 2px; accent-color: var(--accent); width: 17px; height: 17px; flex: none; }

/* confirmation */
.dp-done { text-align: center; padding-top: 12px; }
.dp-done__seal { width: 64px; height: 64px; border-radius: 50%; background: var(--good-tint); color: var(--good);
  display: grid; place-items: center; margin: 0 auto 8px; }
.dp-done__seal svg { width: 34px; height: 34px; }
.dp-done .dp-terms__list li { text-align: left; }

.dp-how { margin-top: 34px; }

@media (max-width: 720px) {
  .dp-grid2, .dp-checks, .dp-paygrid, .dp-choose, .dp-authority-strip, .dp-deliverables__grid,
  .dp-process__rail, .dp-badge-showcase, .dp-faq__grid, .cert-hero, .cert-proof, .cert-kit__grid { grid-template-columns: minmax(0, 1fr); }
  .home-dev-offer { grid-template-columns: minmax(0, 1fr); padding: 34px 22px; border-radius: 22px; }
  .home-dev-offer__copy h2 { max-width: none; }
  .home-dev-report { transform: none; }
  .home-dev-offer__actions .btn { width: 100%; white-space: normal; text-align: center; }
  .dp-hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 28px 0 40px; }
  .dp-hero__title { font-size: clamp(40px, 13vw, 58px); }
  .dp-report-preview { transform: none; padding: 20px; }
  .dp-authority-strip { gap: 1px; }
  .dp-deliverable { min-height: 0; }
  .dp-process__rail article { padding: 18px 0 18px 42px; border-left: 1px solid var(--hairline); }
  .dp-process__rail article:not(:last-child)::after { top: auto; right: auto; left: -4px; bottom: -2px; transform: rotate(135deg); }
  .dp-process__rail article > span { position: absolute; left: 12px; top: 21px; }
  .dp-process__rail h3 { margin-top: 0; }
  .dp-badge-showcase { padding: 34px 22px; border-radius: 22px; }
  .dp-badge-showcase__copy h2 { max-width: none; }
  .dp-badge-site { transform: none; }
  .cert-hero { min-height: 0; padding-top: 36px; text-align: center; }
  .cert-seal__ring { width: min(240px, 76vw); }
  .cert-status, .cert-actions { margin-inline: auto; justify-content: center; }
  .cert-meta { justify-content: center; }
  .cert-proof { gap: 18px; }
  .cert-badge-card__canvas { padding-inline: 10px; }
  .dp-hero__actions .btn, .dp-final-cta .btn, .cert-actions .btn, .cert-badge-card__actions .btn {
    width: 100%; white-space: normal; text-align: center;
  }
  .dp-progress__step__label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   Touch conformance — see docs/analysis/12-mobile-frontend-audit.md §2.5, §2.6
   Desktop density is deliberate and stays as it is; these rules apply only
   where the pointer is coarse and the screen is a phone.
   ========================================================================== */
@media (max-width: 720px) {
  /* 44px is the HIG / WCAG 2.5.8 AAA floor. Measured before this rule: 56
     interactive elements under it on browse alone. Padding is left to the
     component; min-height does the work so nothing reflows. */
  .btn, .theme-toggle, .menu-btn, .store-btn, .seg button, .dp-res, .dp-progress__dot { min-height: 44px; }
  .theme-toggle, .menu-btn { width: 44px; }
  .seg button { min-width: 44px; }

  /* The smallest target on the site at 18x18px, and it removes a filter — a
     destructive action on the browse flow. The chip grows to fit it. */
  .active-chip { padding: 4px 5px 4px 12px; }
  .active-chip button { width: 30px; height: 30px; }

  /* Every filter row in the drawer measured 35px. The label is the hit area,
     so growing it is enough — no markup change. */
  .switch-row, .opt-row { min-height: 44px; }

  /* Dense footer stack: 14 links at 28.3px each. */
  .site-footer a { min-height: 44px; display: flex; align-items: center; padding: 4px 0; }

  /* The remaining discrete controls: the wordmark home link, the hero's filter
     shortcuts, and the inline "See all" / "Clear all" style links, which are
     navigation rather than prose. */
  .wordmark, .hero__chip, .textlink { min-height: 44px; }
  .wordmark, .textlink { display: inline-flex; align-items: center; }
  .hero__chip { display: inline-flex; align-items: center; }

  /* `min-height: 44px` on the seg buttons and the 16px select above widened
     this row past the viewport (measured: 67px of sideways scroll at 320px).
     Let it wrap and let the select give up its 176px desktop minimum. */
  .results-tools { flex-wrap: wrap; }
  .results-tools .select { min-width: 0; flex: 1 1 150px; }

  /* iOS Safari zooms the viewport when a focused field is under 16px, and the
     zoom does not undo itself on blur. Applies to text inputs, selects and
     textareas — not checkboxes or radios. */
  .header-search input, .hero__search-field input, .select, .dp-input,
  input[type="search"], input[type="text"], input[type="email"], textarea, select { font-size: 16px; }
  .header-search, .select, .dp-input { min-height: 44px; }
}

/* `.hero--compact` sets a tighter padding above, but the plain `.hero` rule in
   the 720px block below it has equal specificity and later source order, so the
   compact hero silently got standard padding on phones. State it here, after
   that block, so the declared intent actually holds. (Audit §2.9) */
@media (max-width: 720px) {
  .hero--compact { padding: 28px 20px 24px; }
}

/* -- Pricing panel: what an app actually sells ---------------------------- */
/* The offer set, grouped — never an annualised figure (owner decision
   2026-08-31): an annual cost is a derivation, not the question a reader is
   asking, and it is meaningless for a game selling gem packs.

   The basis line sits ABOVE the prices on purpose. "Terms are read from the
   name" changes how every row below should be read, so it cannot be a footnote
   the eye never reaches. */
.pricing-panel .panel__basis { font-size: 12.5px; color: var(--ink-3); margin: 0 0 16px; max-width: 62ch; }
.pricing-panel .grp { margin-top: 18px; }
.pricing-panel .grp:first-of-type { margin-top: 0; }
.grp__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.grp__name { font-size: 14px; font-weight: 700; color: var(--ink-2); }
.grp__count { font-size: 12px; color: var(--ink-4); font-variant-numeric: tabular-nums; }

.buy { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-xs);
  background: var(--surface-2); margin-bottom: 6px; }
.buy__name { flex: 1; min-width: 0; font-size: 14.5px; color: var(--ink); }
.buy__term { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  padding: 2px 8px; border-radius: var(--r-pill); background: var(--info-tint); color: var(--accent-ink);
  white-space: nowrap; }
/* An empty chip would read as a rendering gap; the soft variant says we looked. */
.buy__term--soft { background: var(--band-untested-tint); color: var(--ink-3); }
.buy__price { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink);
  font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Disclosure notices are not decoration: a truncated list presented as complete
   is the same class of error as a wrong price. */
.pricing-panel .notice { display: flex; gap: 9px; align-items: flex-start; font-size: 13px;
  border-radius: var(--r-xs); padding: 10px 13px; margin-top: 16px; }
.pricing-panel .notice svg { flex: none; width: 16px; height: 16px; margin-top: 1px; }
.notice--cap { background: var(--warn-tint); color: var(--warn); }
.notice--gap { background: var(--band-untested-tint); color: var(--ink-2); }

.pricing-panel .more { margin-top: 10px; }
.pricing-panel .more > summary { cursor: pointer; font-size: 13.5px; color: var(--accent-ink);
  font-weight: 600; list-style: none; padding: 6px 0; }
.pricing-panel .more > summary::-webkit-details-marker { display: none; }
.pricing-panel .more > summary::before { content: "\25B8  "; }
.pricing-panel .more[open] > summary::before { content: "\25BE  "; }
.pricing-panel .more > summary:hover { text-decoration: underline; }
.more__note { font-size: 12.5px; color: var(--ink-3); margin: 4px 0 10px; }

@media (max-width: 560px) {
  /* The name wraps to its own line rather than crushing the price column. */
  .buy { flex-wrap: wrap; gap: 8px; }
  .buy__name { flex-basis: 100%; }
}

/* ==========================================================================
   GRADED BANDS — the published instrument (owner decision D-A, 2026-09-21)

   DELIBERATELY UNCOLOURED. Every other evidence component on this site keys a
   hue off a position (band tints, .is-good / .is-bad). A band must not: it
   publishes a measurement rather than a verdict, and colouring "3-9 advertising
   SDKs" red would put the judgement back that dropping the 0-99 number took
   out. The only visual distinction below is the UNASSESSED row, and it is
   quieter than an assessed one rather than more alarming — "we did not look"
   must never read as "we found something".
   ========================================================================== */
.band-intro { margin: 0 0 14px; }
.band-grid { display: grid; gap: 1px; background: var(--hairline-soft); border: 1px solid var(--hairline-soft); border-radius: 12px; overflow: hidden; }
.band-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding: 12px 14px; background: var(--surface); }
.band-row__label { font-size: 13px; color: var(--ink-2); }
.band-row__value { font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.band-row__note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 12px; line-height: 1.4; }
/* The unassessed row. Same size and same position as every other row — it is
   not a footnote — but ink-4 and italic, so it reads as an absence of
   evidence rather than as a finding of zero. */
.band-row--unassessed .band-row__value { color: var(--ink-4); font-weight: 500; font-style: italic; }
.band-subhead { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin: 20px 0 6px; }
.band-foot { margin: 14px 0 0; }
@media (max-width: 640px) {
  .band-row { grid-template-columns: 1fr; gap: 2px; }
  .band-row__value { font-size: 15px; }
}

/* WHICH VERSION AN ANALYSIS DESCRIBES (0.34.0). Plain text and one notice; the
   developer's release notes sit in the same quoted style as review excerpts but
   neutral, because a release note is the developer's word, not a complaint. */
.analysis-version { display: grid; gap: 16px; }
.analysis-version__leg p { margin: 0 0 6px; line-height: 1.55; }
.analysis-version__store { margin: 0 0 6px; font-size: 14px; font-weight: 700; }
.analysis-version__notice { margin-top: 10px; padding: 12px 14px; border-left: 3px solid var(--hairline); border-radius: 0 8px 8px 0; background: var(--surface-2); }
.analysis-version__notice p { margin: 0 0 6px; }
.analysis-note h5 { margin: 10px 0 0; font-size: 13px; font-weight: 700; }
.analysis-note .rq { margin: 6px 0 0; white-space: pre-line; overflow-wrap: anywhere; }
.analysis-age { white-space: nowrap; }