/* Bali Clinic Guide — design system "Graphite & Copper". Mobile-first. One stylesheet. */

@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 75% 125%; font-display: swap; src: url(/assets/fonts/archivo-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 75% 125%; font-display: swap; src: url(/assets/fonts/archivo-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Archivo'; font-style: normal; font-weight: 400 800; font-stretch: 75% 125%; font-display: swap; src: url(/assets/fonts/archivo-vietnamese.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/instrument-sans-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/instrument-sans-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ground: #EEEDE8;
  --surface: #FFFFFF;
  --ink: #1C1B1A;
  --ink-2: #5F5B55;
  --ink-3: #3D3A35;
  --rule: #D9D6CF;
  --rule-soft: #ECEAE4;
  --copper: #B4562A;
  --copper-hover: #93441F;
  --copper-on-ink: #E0844F;
  --on-ink: #EEEDE8;
  --on-ink-2: #C9C5BC;
  --ok-fg: #1E6B45;  --ok-bg: #E4F1E9;
  --mid-fg: #4A4741; --mid-bg: #ECEAE4;
  --bad-fg: #9E2A1D; --bad-bg: #FAE8E4;
  --r-card: 10px; --r-ctrl: 8px; --r-chip: 6px;
  --font-display: 'Archivo', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;
  --gutter: 16px;
  --pad: 18px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img, svg { display: inline-block; vertical-align: middle; }
a { color: var(--copper); font-weight: 600; text-decoration: none; transition: color 150ms; }
a:hover, a:focus-visible { color: var(--copper-hover); text-decoration: underline; }
:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
h1, h2, h3, .display { font-family: var(--font-display); font-weight: 700; font-variation-settings: 'wdth' 108; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
h1 { font-size: 32px; letter-spacing: -0.03em; }
h2 { font-size: 22px; }
h3 { font-size: 17px; font-variation-settings: 'wdth' 105; letter-spacing: -0.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em; color: var(--ink-2); }
.wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.skip { position: absolute; left: -9999px; top: 8px; background: var(--ink); color: var(--on-ink); padding: 8px 12px; border-radius: var(--r-ctrl); z-index: 100; }
.skip:focus { left: 8px; }
.muted { color: var(--ink-2); }
.small { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.micro { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.micro-copper { color: var(--copper-on-ink); }
.eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); }
.note { font-size: 13px; color: var(--ink-2); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 20px; border-radius: var(--r-ctrl); font-weight: 600; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; font-family: inherit; transition: background-color 150ms, color 150ms, border-color 150ms; }
.btn:hover, .btn:focus-visible { text-decoration: none; }
.btn-primary { background: var(--ink); color: var(--on-ink); border: 1px solid var(--ink); }
.btn-primary:hover, .btn-primary:focus-visible { background: #000; color: var(--on-ink); }
.btn-secondary { background: transparent; color: var(--ink); border: 1px solid var(--ink); }
.btn-secondary:hover, .btn-secondary:focus-visible { background: var(--surface); color: var(--ink); }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 1px solid var(--rule); border-radius: var(--r-ctrl); background: var(--surface); color: var(--ink); cursor: pointer; }
.icon { flex-shrink: 0; }

/* Header */
.site-header { background: var(--surface); border-bottom: 1px solid var(--rule); position: sticky; top: 0; z-index: 40; }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 56px; gap: 12px; }
/* Logo: fold tick + name. Tick 1em wide, 1.3034em tall, 0.3em before the name, lowest point 0.0412em below the baseline.
   The tick's negative top margin keeps the line box to the text, so the name centres with the nav; the tick rises above it. */
.wordmark { display: inline-block; padding: 14px 0; color: var(--ink); font-family: var(--font-display); font-variation-settings: 'wdth' 110; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.wordmark:hover { text-decoration: none; color: var(--ink); }
.mark, .wordmark-small::before { display: inline-block; width: 1em; height: 1.3034em; margin: -0.428em 0.3em 0 0; vertical-align: -0.0412em; background: url(/assets/img/logo-mark.svg) center / contain no-repeat; }
.mark .icon { display: none; }
.wordmark-small { font-family: var(--font-display); font-variation-settings: 'wdth' 110; font-size: 16px; font-weight: 700; color: var(--ink); letter-spacing: -0.02em; line-height: 1; white-space: nowrap; }
.wordmark-small::before { content: ""; }
.site-nav { display: none; }
.menu-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid var(--rule); border-radius: var(--r-ctrl); background: var(--surface); color: var(--ink); font: inherit; font-weight: 600; font-size: 14px; cursor: pointer; }

/* Sheets (nav + filters) */
.sheet[hidden] { display: none; }
.sheet { position: fixed; inset: 0; z-index: 60; background: rgba(28, 27, 26, 0.55); display: flex; align-items: flex-end; }
.sheet-panel { background: var(--surface); width: 100%; max-height: 92vh; display: flex; flex-direction: column; border-radius: 14px 14px 0 0; transform: translateY(0); }
.sheet-nav { align-self: flex-start; border-radius: 0 0 14px 14px; max-height: 100vh; }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 12px var(--gutter); border-bottom: 1px solid var(--rule); min-height: 56px; }
.sheet-body { overflow-y: auto; padding: 8px var(--gutter) 16px; }
.sheet-links { display: flex; flex-direction: column; padding: 8px var(--gutter) 20px; }
.sheet-links a { display: flex; align-items: center; min-height: 48px; color: var(--ink); font-size: 17px; font-weight: 600; border-bottom: 1px solid var(--rule-soft); }
.sheet-links a[aria-current="page"] { color: var(--copper); }
.sheet-links .btn { margin-top: 12px; border-bottom: 0; color: var(--on-ink); }
@media (prefers-reduced-motion: no-preference) {
  .sheet-panel { animation: sheet-in 180ms ease-out; }
  @keyframes sheet-in { from { transform: translateY(24px); opacity: 0.6; } to { transform: translateY(0); opacity: 1; } }
}
body.sheet-open { overflow: hidden; }

/* Badges, chips, score */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: var(--r-chip); font-size: 12px; font-weight: 600; line-height: 1.2; width: fit-content; white-space: nowrap; }
.badge-confirmed { background: var(--ok-bg); color: var(--ok-fg); }
.badge-not_verified { background: var(--mid-bg); color: var(--mid-fg); }
.badge-unlicensed { background: var(--bad-bg); color: var(--bad-fg); }
/* Provider-page badge: large, solid, same colours as the score box (30 Sep 2026). */
.badge-lg { font-size: 17px; font-weight: 700; padding: 9px 16px 9px 12px; gap: 8px; border-radius: var(--r-ctrl); color: #FFFFFF; margin-bottom: 6px; letter-spacing: 0.01em; }
.badge-lg .icon { stroke-width: 2.5; }
.badge-lg.badge-confirmed { background: #1E6B45; }
.badge-lg.badge-not_verified { background: #67635C; }
.badge-lg.badge-unlicensed { background: #9E2A1D; }
@media (min-width: 1024px) { .badge-lg { font-size: 19px; padding: 10px 18px 10px 14px; } }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--ground); color: var(--ink); border-radius: var(--r-chip); font-size: 12px; font-weight: 500; padding: 4px 8px; line-height: 1.3; }
.score { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: var(--ink); color: var(--on-ink); border-radius: var(--r-ctrl); padding: 10px 12px; min-width: 78px; flex-shrink: 0; text-align: center; }
.score-num { font-family: var(--font-display); font-variation-settings: 'wdth' 108; font-weight: 700; font-size: 22px; line-height: 1; letter-spacing: -0.02em; }
.score-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--on-ink-2); }
.score-sub { font-size: 10px; color: var(--on-ink-2); line-height: 1.3; }
.score-penalty { color: var(--copper-on-ink); }
/* Score box colour follows the licence tier (publisher request 30 Sep 2026). White on each fill ≥ 5.9:1; sub-text ≥ 5.0:1. */
.score-tier-confirmed { background: #1E6B45; color: #FFFFFF; }
.score-tier-confirmed .score-label, .score-tier-confirmed .score-sub { color: #D3EBDC; }
.score-tier-not_verified { background: #67635C; color: #FFFFFF; }
.score-tier-not_verified .score-label, .score-tier-not_verified .score-sub { color: #EEEDE8; }
.score-tier-unlicensed { background: #9E2A1D; color: #FFFFFF; }
.score-tier-unlicensed .score-label, .score-tier-unlicensed .score-sub { color: #F8DCD6; }
.score-tier-unlicensed .score-penalty { color: #FFFFFF; font-weight: 600; }
/* Missing medical director warning (publisher request 30 Sep 2026). #7A4100 on #FCEFD9 = 7.0:1. */
.md-missing { display: flex; align-items: center; gap: 6px; color: #7A4100; background: #FCEFD9; border-radius: var(--r-chip); padding: 6px 10px; font-weight: 600; font-size: 13px; }
.md-missing .icon { flex-shrink: 0; stroke: currentColor; }
.md-missing-page strong { font-weight: 700; }
.md-missing-page { align-items: flex-start; font-weight: 400; font-size: 14px; padding: 10px 12px; margin: 8px 0 0; }
.md-missing-page .icon { margin-top: 2px; }
/* Pricing transparency tag (30 Sep 2026). */
.price-tag { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.price-tag .icon { stroke: currentColor; stroke-width: 2.5; }
.price-published { color: var(--ok-fg); }
.price-inquiry { color: var(--ink-2); font-weight: 500; font-style: italic; }
.score-page { padding: 16px 20px; min-width: 150px; }
.score-page .score-num { font-size: 40px; }
.score-page .score-sub { font-size: 11px; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; }
.dot-confirmed { background: var(--ok-fg); } .dot-not_verified { background: var(--mid-fg); } .dot-unlicensed { background: var(--bad-fg); }

/* Panels */
.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--pad); display: flex; flex-direction: column; gap: 14px; }
.panel > h2 { font-size: 19px; }
.panel-dark { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.panel-dark p { color: var(--on-ink-2); font-size: 15px; line-height: 1.6; }
.panel-dark .statement { color: var(--on-ink); }
.statement { font-family: var(--font-display); font-variation-settings: 'wdth' 105; font-size: 24px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; }
.statement-sm { font-size: 20px; }

/* Page head */
.page-head { padding-top: 20px; padding-bottom: 16px; display: flex; flex-direction: column; gap: 10px; }
.crumbs { font-size: 13px; color: var(--ink-2); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crumbs a { color: var(--ink-2); font-weight: 500; }
.crumbs [aria-current] { color: var(--ink); font-weight: 500; }
.answer { font-size: 16px; line-height: 1.55; color: var(--ink-3); max-width: 920px; }
.meta { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.head-action { margin-top: 2px; }
.head-action .btn { background: var(--surface); }
.cta-row { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.cta-row .btn { width: 100%; }

/* Home */
.hero { padding-top: 32px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 24px; }
.hero-text { display: flex; flex-direction: column; gap: 16px; }
.hero h1 { font-size: 40px; line-height: 1; letter-spacing: -0.03em; }
.lead { font-size: 17px; line-height: 1.55; color: var(--ink-3); }
.legend-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.legend-list li { display: flex; flex-direction: column; gap: 6px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; border-top: 1px solid var(--rule); padding-top: 14px; margin: 0; }
.stats dt { font-family: var(--font-display); font-variation-settings: 'wdth' 108; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.stats dd { margin: 0; font-size: 12px; color: var(--ink-2); }
.section { padding-top: 12px; padding-bottom: 32px; display: flex; flex-direction: column; gap: 16px; }
.section-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; flex-wrap: wrap; }
.section-head a, .ruled { font-size: 14px; }
.ruled { font-size: 22px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.tiles { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 16px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 112px; }
.tile-main { display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.tile-main:hover { text-decoration: none; color: var(--copper); }
.tile-name { font-family: var(--font-display); font-variation-settings: 'wdth' 105; font-size: 18px; font-weight: 700; }
.tile-meta { font-size: 13px; color: var(--ink-2); font-weight: 400; }
.tile-foot { font-size: 13px; color: var(--ink-2); display: flex; gap: 6px; flex-wrap: wrap; }
.tile-foot a { min-height: 24px; display: inline-flex; align-items: center; }
.steps { list-style: none; display: grid; grid-template-columns: 1fr; gap: 12px; counter-reset: step; }
.steps .panel { gap: 10px; }
.step-num { font-family: var(--font-display); font-variation-settings: 'wdth' 108; font-size: 36px; font-weight: 700; letter-spacing: -0.03em; color: var(--copper); line-height: 1; }
.steps p { font-size: 14px; line-height: 1.55; color: var(--ink-3); }
.two-col { display: grid; grid-template-columns: 1fr; gap: 16px; }
.two-col .panel { padding: 24px; gap: 14px; }
.two-col .panel p { font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.two-col .panel-dark p { color: var(--on-ink-2); }
.two-col .panel-dark .statement { color: var(--on-ink); }
.two-col .panel-dark .micro-copper { color: var(--copper-on-ink); }
.two-col .panel .btn { width: fit-content; }
.weights { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.weights li { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.weights li > span:first-child { width: 88px; color: var(--ink-2); flex-shrink: 0; }
.weights .bar { height: 10px; border-radius: 2px; background: var(--copper); display: block; }
.weights .bar-50 { width: 50%; } .weights .bar-25 { width: 25%; }
.sources { list-style: none; display: grid; grid-template-columns: 1fr; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }

/* Listing */
.listing { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; }
.sidebar { display: none; }
.filter-bar { position: sticky; top: 56px; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--ground); padding: 8px 0; margin: 0 calc(-1 * var(--gutter)); padding-left: var(--gutter); padding-right: var(--gutter); border-bottom: 1px solid var(--rule); }
.filter-bar .btn { min-height: 44px; background: var(--surface); }
.filter-bar-count { font-size: 14px; font-weight: 600; text-align: right; }
.results { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.results-head { display: none; justify-content: space-between; align-items: center; gap: 12px; border-bottom: 1px solid var(--rule); padding-bottom: 10px; }
.results-count { font-size: 14px; font-weight: 600; }
.results-sort { font-size: 13px; color: var(--ink-2); }
.grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }
.empty { padding: 28px; border: 1px dashed var(--rule); border-radius: var(--r-card); text-align: center; color: var(--ink-2); font-size: 15px; }
.pagination { display: flex; gap: 6px; flex-wrap: wrap; }
.pagination a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule); border-radius: var(--r-ctrl); background: var(--surface); color: var(--ink); }
.pagination a[aria-current] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }

/* Filters form */
.filters { display: flex; flex-direction: column; gap: 18px; }
.filters-head { display: flex; justify-content: space-between; align-items: center; }
.filters-title { font-family: var(--font-display); font-variation-settings: 'wdth' 105; font-size: 18px; font-weight: 700; }
.filters-reset { font-size: 13px; }
.filters fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.filters legend { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 0; margin-bottom: 8px; }
.opt { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.opt input { width: 20px; height: 20px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.opt label { font-size: 15px; color: var(--ink); display: flex; align-items: center; flex-grow: 1; min-height: 40px; cursor: pointer; }
.opt input:disabled + label { color: var(--ink-2); }
.opt-count { font-size: 12px; color: var(--ink-2); }
.filters-apply { width: 100%; }
.filters-note { font-size: 12px; line-height: 1.5; color: var(--ink-2); border-top: 1px solid var(--rule); padding-top: 14px; }
.js .sidebar .filters-apply { display: none; }

/* Card */
.card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--pad); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.card > .badge { margin-bottom: -2px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.card-head .score { flex-shrink: 0; }
.card-title { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.card h2 { font-size: 20px; font-variation-settings: 'wdth' 105; line-height: 1.15; overflow-wrap: anywhere; }
.card h2 a { color: var(--ink); }
.card h2 a:hover { color: var(--copper); text-decoration: none; }
.card .meta { font-size: 13px; }
.card-line { font-size: 14px; line-height: 1.45; }
.card-line.small { font-size: 13px; }
.card-foot { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; border-top: 1px solid var(--rule); padding-top: 12px; }
.card-foot .push { margin-left: auto; }

/* Ratings */
.ratings { display: grid; grid-template-columns: 1fr; gap: 8px; }
.rating { border: 1px solid var(--rule); border-radius: var(--r-ctrl); padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rating-platform { font-size: 11px; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.rating-value { font-size: 14px; font-weight: 600; color: var(--ink); }
.rating-of { font-size: 0.72em; font-weight: 500; color: var(--ink-2); margin-left: 1px; }
.rating-count { display: block; font-size: 12px; font-weight: 500; color: var(--ink-3); }
.ratings-card .rating:not(.rating-missing) .rating-value { font-size: 18px; }
.rating-missing .rating-value { color: var(--ink-2); font-weight: 500; }
.rating-date { font-size: 11px; color: var(--ink-2); }
.rating-date-label, .rating-date-value { display: block; }
.rating-date-label { margin-top: 8px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 9px; }
.rating-date-value { font-size: 10px; }
.ratings-page .rating-date-label { font-size: 10px; }
.ratings-page .rating-date-value { font-size: 11px; }
.rating-missing .rating-date { margin-top: 8px; }
.rating-link { font-size: 12px; margin-top: 4px; }
.ratings-page .rating { padding: 14px; gap: 4px; align-items: center; text-align: center; }
.ratings-page .rating-value { font-family: var(--font-display); font-variation-settings: 'wdth' 108; font-size: 28px; letter-spacing: -0.02em; line-height: 1; }
.ratings-page .rating-count { font-family: var(--font-body); font-size: 13px; margin-top: 4px; }
.ratings-page .rating-missing .rating-value { font-family: var(--font-body); font-size: 15px; }
.ratings-page .rating-date { font-size: 12px; }
.ratings-card .rating { display: grid; grid-template-columns: 84px minmax(0, 1fr); column-gap: 8px; align-items: center; }
.ratings-card .rating-platform { grid-row: 1 / span 2; }
.ratings-card .rating-value { line-height: 1.25; }

/* Quotes and disclaimer */
.quotes { display: grid; grid-template-columns: 1fr; gap: 8px; }
.quote { margin: 0; padding: 10px 12px; border-radius: var(--r-ctrl); font-size: 13px; line-height: 1.45; display: flex; flex-direction: column; gap: 4px; }
.quote-pos { background: var(--ok-bg); color: var(--ok-fg); }
.quote-neg { background: var(--bad-bg); color: var(--bad-fg); }
.quote-label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.disclaimer { padding: 12px 14px; border-radius: var(--r-ctrl); background: var(--bad-bg); color: var(--bad-fg); font-size: 12px; line-height: 1.5; }
.disclaimer-banner { font-size: 14px; border: 1px solid #EFC9C0; }

/* Provider */
.provider-head { gap: 14px; }
.provider-title { display: flex; flex-direction: column; gap: 14px; }
.provider-title-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.provider-title-text h1 { overflow-wrap: anywhere; }
.provider-head .score-page { align-self: flex-start; }
.contact-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.contact-actions .btn:first-child { grid-column: 1 / -1; }
.provider-body { display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; }
.provider-main, .provider-aside { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.facts { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0; }
.facts div { display: flex; flex-direction: column; gap: 2px; border-bottom: 1px solid var(--rule-soft); padding-bottom: 10px; }
.facts dt { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.facts dd { margin: 0; font-size: 15px; color: var(--ink); overflow-wrap: anywhere; }
.accreditations { list-style: none; display: flex; flex-direction: column; }
.accr { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); font-size: 14px; }
.accr:last-child { border-bottom: 0; }
.accr-main { display: flex; flex-direction: column; gap: 2px; }
.accr-holder { color: var(--ink-3); }
.accr-status { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-2); }
.accr-verified .accr-status { color: var(--ok-fg); }
.team-lead { display: flex; gap: 14px; align-items: flex-start; }
.initials { width: 48px; height: 48px; border-radius: var(--r-ctrl); background: var(--ink); color: var(--on-ink); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 16px; flex-shrink: 0; }
.team-list { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 14px; border-top: 1px solid var(--rule-soft); padding-top: 12px; }
.review-cols { display: grid; grid-template-columns: 1fr; gap: 14px; }
.review-cols > div { display: flex; flex-direction: column; gap: 8px; }
.review-cols .quote { font-size: 14px; }
.panel h3 { font-size: 16px; margin-top: 4px; }
.panel h3 + p { color: var(--ink-3); font-size: 15px; }
.aside-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.link-list { list-style: none; display: flex; flex-direction: column; }
.link-list li { border-bottom: 1px solid var(--rule-soft); }
.link-list li:last-child { border-bottom: 0; }
.link-list a { display: flex; align-items: center; min-height: 44px; font-size: 14px; }

/* Top pages */
.top-body { display: flex; flex-direction: column; gap: 16px; padding-bottom: 32px; }
.top-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.top-tabs a { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-ctrl); border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font-size: 14px; }
.top-tabs a[aria-current] { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.ranking { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.rank-row { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--pad); display: grid; grid-template-columns: auto 1fr; gap: 10px 14px; align-items: start; }
.rank-pos { font-family: var(--font-display); font-variation-settings: 'wdth' 108; font-size: 28px; font-weight: 700; color: var(--copper); letter-spacing: -0.03em; line-height: 1; }
.rank-main { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.rank-main h2 { font-size: 20px; font-variation-settings: 'wdth' 105; }
.rank-main h2 a { color: var(--ink); }
.rank-main h2 a:hover { color: var(--copper); text-decoration: none; }
.rank-desc { font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.ranking-compact .rank-row { padding: 14px var(--pad); }
.ranking-compact .rank-main h3 { font-size: 18px; }
.ranking-compact .rank-main h3 a { color: var(--ink); }
.ranking-compact .rank-main h3 a:hover { color: var(--copper); text-decoration: none; }
.rank-score { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; }
.method p { color: var(--ink-3); }

/* Q&A */
.qa { display: flex; flex-direction: column; gap: 14px; }
.qa-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.qa-grid > div { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); padding: var(--pad); display: flex; flex-direction: column; gap: 8px; }
.qa-grid p { font-size: 14px; line-height: 1.55; color: var(--ink-3); }

/* Status table */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); }
.status-table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 720px; }
.status-table th { text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); padding: 12px 14px; border-bottom: 1px solid var(--rule); }
.status-table td { padding: 12px 14px; border-bottom: 1px solid var(--rule-soft); vertical-align: top; }
.status-table tr:last-child td { border-bottom: 0; }
.plain { list-style: none; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ink-3); }

/* Prose (method pages) */
.prose { gap: 0; max-width: 820px; line-height: 1.65; color: var(--ink-3); }
.prose h2 { margin: 22px 0 8px; font-size: 22px; color: var(--ink); }
.prose h3 { margin: 16px 0 6px; color: var(--ink); }
.prose p { margin: 0 0 12px; }
.prose ul, .prose ol { padding-left: 22px; margin: 0 0 12px; }
.prose li { margin-bottom: 6px; }
.prose blockquote { margin: 0 0 12px; padding: 12px 14px; border-radius: var(--r-ctrl); background: var(--ground); color: var(--ink); font-size: 15px; }
.prose blockquote p { margin: 0; }

/* Footer */
.site-footer { background: var(--surface); border-top: 1px solid var(--rule); padding: 24px 0 32px; font-size: 13px; color: var(--ink-2); line-height: 1.5; margin-top: 16px; }
.site-footer .wrap { display: flex; flex-direction: column; gap: 12px; }
.footer-top { display: flex; flex-direction: column; gap: 12px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-links a { color: var(--ink-2); font-weight: 500; }
.footer-note { max-width: 960px; }

/* ≥ 600 px */
@media (min-width: 600px) {
  :root { --gutter: 24px; --pad: 20px; }
  h1 { font-size: 40px; }
  .grid { gap: 16px; }
  .ratings { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ratings-card .rating { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .ratings-card .rating-platform { grid-row: auto; }
  .quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .two-col { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
  .sources { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cta-row { flex-direction: row; }
  .cta-row .btn { width: auto; min-height: 52px; padding: 0 24px; font-size: 16px; }
  .legend-list li { flex-direction: row; gap: 12px; align-items: flex-start; }
  .legend-list li { display: grid; grid-template-columns: 150px 1fr; }
  .legend-list .badge { flex-shrink: 0; }
  .contact-actions { grid-template-columns: repeat(3, auto); justify-content: start; }
  .contact-actions .btn:first-child { grid-column: auto; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
  .facts-stack { grid-template-columns: 1fr; }
  .review-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .accr { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 12px; align-items: start; }
  .qa-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-top { flex-direction: row; justify-content: space-between; align-items: center; }
  .rank-row { grid-template-columns: auto 1fr auto; }
  .rank-score { grid-column: auto; flex-direction: column; align-items: flex-end; gap: 6px; }
  .provider-title { flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 24px; }
  .hero h1 { font-size: 52px; }
}

/* ≥ 760 px: two-column cards (each card keeps ≥ 340 px for the three rating tiles) */
@media (min-width: 760px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ≥ 1024 px */
@media (min-width: 1024px) {
  :root { --gutter: 64px; --pad: 24px; }
  h1 { font-size: 44px; }
  h2 { font-size: 28px; }
  .panel > h2 { font-size: 22px; }
  .header-inner { height: 72px; }
  .wordmark { font-size: 19px; }
  .site-nav { display: flex; align-items: center; gap: 28px; font-size: 15px; font-weight: 500; }
  .site-nav a { color: var(--ink-2); font-weight: 500; }
  .site-nav a:hover { color: var(--ink); text-decoration: none; }
  .site-nav a.active { color: var(--ink); border-bottom: 2px solid var(--copper); padding-bottom: 2px; }
  .site-nav .btn { color: var(--on-ink); font-weight: 600; }
  .menu-btn { display: none; }
  .page-head { padding-top: 32px; padding-bottom: 20px; }
  .answer { font-size: 17px; }
  .hero { flex-direction: row; align-items: flex-start; gap: 72px; padding-top: 88px; padding-bottom: 64px; }
  .hero-text { flex-grow: 1; max-width: 780px; gap: 24px; }
  .hero h1 { font-size: 68px; line-height: 0.98; }
  .lead { font-size: 19px; }
  .legend { width: 440px; flex-shrink: 0; }
  .section { padding-bottom: 64px; gap: 18px; }
  .tiles { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
  .tile { padding: 20px; }
  .two-col .panel { padding: 36px; }
  .statement { font-size: 28px; }
  .statement-sm { font-size: 22px; }
  .listing { flex-direction: row; align-items: flex-start; gap: 32px; padding-top: 8px; padding-bottom: 48px; }
  .sidebar { display: block; width: 280px; flex-shrink: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-card); padding: 20px; position: sticky; top: 88px; max-height: calc(100vh - 104px); overflow-y: auto; }
  .filter-bar { display: none; }
  .results { flex-grow: 1; }
  .results-head { display: flex; }
  .grid { grid-template-columns: 1fr; gap: 20px; }   /* sidebar takes 280 px; two columns again from 1280 px */
  .card h2 { font-size: 22px; }
  .card .score { min-width: 84px; padding: 10px 14px; }
  .card .score-num { font-size: 26px; }
  .opt { min-height: 32px; }
  .opt input { width: 18px; height: 18px; }
  .opt label { font-size: 14px; min-height: 32px; }
  .score-page .score-num { font-size: 52px; }
  .provider-body { flex-direction: row; align-items: flex-start; gap: 24px; padding-bottom: 64px; }
  .provider-main { flex-grow: 1; }
  .provider-aside { width: 380px; flex-shrink: 0; }
  .top-body { gap: 20px; padding-bottom: 64px; }
  .rank-pos { font-size: 40px; }
  .rank-main h2 { font-size: 24px; }
  .site-footer { padding: 28px 0 36px; }
}

/* ≥ 1280 px */
@media (min-width: 1280px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}