/* Scrap Price Today homepage. Tokens come from the site's active design (Market Terminal). */

@font-face {
	font-family: "Geist";
	src: url("fonts/Geist-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Geist";
	src: url("fonts/Geist-Italic-Variable.woff2") format("woff2");
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
}

:root {
	--bg: #F5F7FB;
	--surface: #FFFFFF;
	--surface-alt: #EDF1F7;
	--ink: #0F1B2D;
	--muted: #5B6B82;
	--border: #DCE3EE;
	--accent: #1E56E0;
	--accent-ink: #FFFFFF;
	--accent-soft: #E6EDFC;
	--up: #0B7247;
	--up-soft: #E2F4EA;
	--down: #B93232;
	--down-soft: #FBE6E6;
	--font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-pill: 999px;
	--space-xs: 4px;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 28px;
	--space-xl: 48px;
	--section: 72px;
	--container: 1240px;
	--gutter: 20px;
	--header-h: 64px;
	color-scheme: light;
}
html[data-theme="dark"] {
	--bg: #0B1220;
	--surface: #111A2C;
	--surface-alt: #172238;
	--ink: #E7ECF5;
	--muted: #93A0B7;
	--border: #22304A;
	--accent: #6690F5;
	--accent-ink: #0B1220;
	--accent-soft: #1B2A4A;
	--up: #3CCB86;
	--up-soft: #12301F;
	--down: #F26D6D;
	--down-soft: #3A1B1B;
	color-scheme: dark;
}

/* Resets kept at zero specificity so component rules always win. */
:where(*, *::before, *::after) { box-sizing: border-box; }
:where(html) { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
:where(body) { margin: 0; }
:where(h1, h2, h3, h4, p, ul, ol, dl, dd, figure) { margin: 0; }
:where(ul, ol) { padding: 0; list-style: none; }
:where(button, input) { font: inherit; color: inherit; margin: 0; }
:where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
:where(a) { color: inherit; text-decoration: none; }
:where(img, svg, canvas) { display: block; max-width: 100%; }
:where(canvas) { max-width: none; }

html { background: var(--bg); }
body.spt-home {
	font-family: var(--font);
	font-size: 16px;
	line-height: 1.5;
	color: var(--ink);
	background: var(--bg);
	font-feature-settings: "tnum" 1, "ss01" 0;
	-webkit-font-smoothing: antialiased;
}
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius-md); font-weight: 600; }
.skip-link:focus { top: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tabular, .card-price, .board-price, .chart-stats dd, .pill, .card-change, .chart-tooltip { font-variant-numeric: tabular-nums; }

/* Type */
h1, h2, h3 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }
h1 { font-size: clamp(34px, 4.6vw, 52px); }
h2 { font-size: clamp(24px, 2.6vw, 30px); }
h3 { font-size: 15px; letter-spacing: 0; }
.section-head { max-width: 680px; margin-bottom: var(--space-lg); }
.section-head p { color: var(--muted); margin-top: var(--space-sm); }
.section-note { color: var(--muted); font-size: 13px; margin-top: var(--space-md); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: var(--radius-md); font-weight: 600; font-size: 15px; white-space: nowrap; border: 1px solid transparent; transition: background-color .15s, border-color .15s, color .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--border); }
.btn-secondary:hover { border-color: var(--muted); }
.btn-small { height: 36px; padding: 0 14px; font-size: 14px; }

/* Pills: reserved for price movement */
.pill { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--radius-pill); font-size: 12.5px; font-weight: 600; line-height: 1; white-space: nowrap; }
.pill.up { color: var(--up); background: var(--up-soft); }
.pill.down { color: var(--down); background: var(--down-soft); }
.up { color: var(--up); }
.down { color: var(--down); }

/* Header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); }
body.admin-bar .site-header { top: 32px; }
.header-inner { display: flex; align-items: center; gap: 18px; height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 26px; height: 26px; fill: var(--accent); }
.brand-name { font-weight: 600; font-size: 17px; letter-spacing: -0.01em; white-space: nowrap; }
.brand-name span { color: var(--accent); }
.header-panel { display: flex; align-items: center; gap: 18px; flex: 1; min-width: 0; }
.primary-nav { flex: 1; min-width: 0; }
.nav-list { display: flex; align-items: center; gap: 4px; }
.nav-list a { display: inline-block; padding: 8px 9px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color .15s, background-color .15s; }
.nav-list a:hover { color: var(--ink); background: var(--surface-alt); }
.nav-list a[aria-current="page"] { color: var(--ink); }
.site-search { position: relative; flex: none; width: 250px; transition: width .2s; }
.site-search:focus-within { width: 320px; }
.site-search svg { position: absolute; left: 10px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); pointer-events: none; }
.site-search input { width: 100%; height: 38px; padding: 0 12px 0 32px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); color: var(--ink); font-size: 14px; text-overflow: ellipsis; }
.site-search input::placeholder { color: var(--muted); }
.site-search input:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; background: var(--surface); }
.theme-toggle, .nav-toggle { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--muted); background: var(--surface); }
.theme-toggle:hover, .nav-toggle:hover { color: var(--ink); border-color: var(--muted); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .icon-moon, html[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: block; }
.nav-toggle { display: none; flex-direction: column; gap: 4px; }
.nav-toggle span { width: 16px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .2s, opacity .2s; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Hero */
.hero { padding: 56px 0 44px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, 0.85fr); gap: 48px; align-items: center; }
.hero-copy h1 { max-width: 640px; }
.hero-sub { margin-top: 18px; font-size: 18px; color: var(--muted); max-width: 560px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero-board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.board-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.board-list li + li { border-top: 1px solid var(--border); }
.board-list a { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 11px 16px; transition: background-color .15s; }
.board-list a:hover { background: var(--surface-alt); }
.board-name { font-weight: 500; font-size: 15px; }
.board-price { font-weight: 600; font-size: 16px; }
.board-price small { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 4px; }
.board-more { display: block; padding: 11px 16px; border-top: 1px solid var(--border); font-size: 14px; font-weight: 600; color: var(--accent); }
.board-more:hover { background: var(--surface-alt); }

/* Market status bar */
.market-bar { background: var(--surface); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.market-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; min-height: 44px; padding-block: 8px; font-size: 13.5px; color: var(--muted); }
.market-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.market-updated time { color: var(--ink); font-weight: 500; }
.sample-tag { margin-left: auto; padding: 3px 9px; border: 1px solid var(--border); border-radius: var(--radius-pill); font-size: 12px; font-weight: 500; color: var(--muted); cursor: help; }

/* Sections */
.section { padding: var(--section) 0 0; }
.section:last-of-type { padding-bottom: var(--section); }

/* Price cards */
.price-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.price-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color .15s; }
a.price-card:hover { border-color: var(--accent); }
.card-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.card-name { font-weight: 600; font-size: 15px; }
.card-group { font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.card-price { font-size: 27px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
.card-unit { margin-left: 5px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--muted); }
.card-meta { display: flex; align-items: center; gap: 10px; }
.card-change { font-size: 13px; font-weight: 500; }
.card-foot { display: flex; justify-content: space-between; margin-top: auto; font-size: 12.5px; color: var(--muted); }
.card-link { color: var(--accent); font-weight: 600; }

/* Chart */
.chart-frame { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.chart-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.metal-tabs, .range-tabs { display: flex; flex-wrap: wrap; gap: 4px; }
.metal-tabs button, .range-tabs button { height: 32px; padding: 0 12px; border-radius: var(--radius-pill); font-size: 13.5px; font-weight: 500; color: var(--muted); border: 1px solid transparent; transition: color .15s, background-color .15s, border-color .15s; }
.metal-tabs button:hover, .range-tabs button:hover { color: var(--ink); background: var(--surface-alt); }
.metal-tabs button[aria-selected="true"] { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.range-tabs button { padding: 0 10px; }
.range-tabs button[aria-pressed="true"] { color: var(--ink); background: var(--surface-alt); border-color: var(--border); font-weight: 600; }
.chart-meta { display: flex; align-items: baseline; gap: 12px; padding: 14px 16px 0; }
.chart-title { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; }
.chart-unit { font-size: 13px; color: var(--muted); }
.chart-stage { position: relative; height: 420px; }
.chart-canvas { width: 100%; height: 100%; touch-action: pan-y; cursor: crosshair; }
.chart-canvas.is-dragging { cursor: grabbing; }
.chart-skeleton { position: absolute; inset: 16px 64px 32px 16px; display: flex; align-items: flex-end; gap: 4%; pointer-events: none; }
.chart-skeleton span { flex: 1; background: var(--surface-alt); border-radius: 3px; height: 40%; }
.chart-skeleton span:nth-child(2n) { height: 62%; }
.chart-skeleton span:nth-child(3n) { height: 48%; }
.chart-skeleton span:nth-child(5n) { height: 76%; }
.chart-frame.is-ready .chart-skeleton { display: none; }
.chart-frame.is-loading .chart-canvas { opacity: .35; }
.chart-frame.is-loading .chart-skeleton { display: flex; }
.chart-tooltip { position: absolute; z-index: 2; min-width: 168px; padding: 8px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: 0 6px 20px rgba(15, 27, 45, .10); font-size: 12.5px; line-height: 1.45; pointer-events: none; }
.chart-tooltip strong { display: block; margin-bottom: 4px; font-weight: 600; }
.chart-tooltip div { display: flex; justify-content: space-between; gap: 14px; }
.chart-tooltip div span:first-child { color: var(--muted); }
.chart-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; background: var(--surface); color: var(--muted); }
.chart-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--border); }
.chart-stats > div { padding: 12px 16px; }
.chart-stats > div + div { border-left: 1px solid var(--border); }
.chart-stats dt { font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.chart-stats dd { margin-top: 4px; font-size: 17px; font-weight: 600; }
.chart-stats dd small { margin-left: 6px; font-size: 12.5px; font-weight: 500; }

/* Footer */
.site-footer { margin-top: var(--section); padding: var(--space-xl) 0 var(--space-lg); background: var(--surface); border-top: 1px solid var(--border); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
.footer-brand p { margin-top: 10px; max-width: 34ch; font-size: 14px; color: var(--muted); }
.site-footer h3 { margin-bottom: 12px; }
.site-footer nav li + li { margin-top: 8px; }
.site-footer nav a { font-size: 14px; color: var(--muted); }
.site-footer nav a:hover { color: var(--accent); }
.footer-bottom { margin-top: var(--space-xl); padding-top: var(--space-md); border-top: 1px solid var(--border); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--muted); }
.footer-disclaimer { max-width: 72ch; }

/* Responsive */
@media (max-width: 1120px) {
	.price-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.nav-list a { padding-inline: 7px; font-size: 13.5px; }
	.site-search { width: 200px; }
}
@media (max-width: 1000px) {
	.nav-toggle { display: inline-flex; }
	.header-panel { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
	.header-panel.is-open { display: flex; }
	.nav-list { flex-direction: column; align-items: stretch; gap: 0; }
	.nav-list a { display: block; padding: 11px 6px; font-size: 15px; border-bottom: 1px solid var(--border); border-radius: 0; }
	.site-search, .site-search:focus-within { width: 100%; margin-top: 12px; }
	.theme-toggle { margin-left: auto; }
	.hero-grid { grid-template-columns: 1fr; gap: 32px; }
	.hero { padding: 40px 0 36px; }
	.footer-grid { grid-template-columns: 1fr 1fr; }
	.chart-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.chart-stats > div:nth-child(4) { border-left: 0; }
	.chart-stats > div:nth-child(n+4) { border-top: 1px solid var(--border); }
}
@media (max-width: 782px) {
	body.admin-bar .site-header { top: 46px; }
	:root { --section: 48px; }
	.price-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.price-card { padding: 12px 14px 10px; }
	.card-price { font-size: 24px; }
	.chart-stage { height: 320px; }
	.chart-toolbar { padding: 10px 12px; }
	.market-bar-inner { gap: 4px 16px; }
	.sample-tag { margin-left: 0; }
}
@media (max-width: 520px) {
	.brand-name { font-size: 16px; }
	.hero-actions .btn { flex: 1; }
	.board-list a { grid-template-columns: 1fr auto; }
	.board-list .pill { grid-column: 2; }
	.chart-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.chart-stats > div:nth-child(2n+1) { border-left: 0; }
	.chart-stats > div:nth-child(n+3) { border-top: 1px solid var(--border); }
	.chart-stats > div:nth-child(4) { border-left: 1px solid var(--border); }
	.footer-grid { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	:where(html) { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; }
}

/* ============================================================
   Sections after the chart: popular keywords, countries, cities,
   market movers, calculator, news, guides, testimonials, FAQ, CTA
   ============================================================ */
[id] { scroll-margin-top: calc(var(--header-h) + 16px); }
.label { font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.section-head h2 .sample-tag { margin-left: 10px; vertical-align: middle; letter-spacing: 0; line-height: 1.2; }
.section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; max-width: none; }
.section-head-row > div { max-width: 680px; }
.section-head-row .btn { flex: none; }
.soon { display: inline-flex; align-items: center; height: 26px; padding: 0 9px; border: 1px dashed var(--border); border-radius: var(--radius-sm); font-size: 12px; font-weight: 500; color: var(--muted); white-space: nowrap; }

/* Popular keyword cards */
.kw-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kw-card { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color .15s; }
.kw-card:hover { border-color: var(--accent); }
.kw-title { font-weight: 600; font-size: 15px; line-height: 1.3; }
.kw-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.kw-price small { margin-left: -4px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.kw-note { font-size: 13.5px; color: var(--muted); }
.kw-link { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--accent); }

/* Countries */
.country-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.country-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.country-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.code { display: inline-flex; align-items: center; height: 22px; padding: 0 7px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); font-size: 11.5px; font-weight: 600; letter-spacing: .08em; }
.country-currency { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--muted); }
.country-name { font-size: 16px; }
.country-metals { font-size: 13.5px; color: var(--muted); }
.country-metals .label { display: block; margin-bottom: 2px; }
.country-update { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.country-card .btn, .country-card .soon { margin-top: 8px; align-self: flex-start; }

/* Cities */
.city-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
.city-group h3 { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; font-size: 15px; }
.city-group h3 a:hover { color: var(--accent); }
.city-group h3 span { font-size: 12.5px; font-weight: 500; color: var(--muted); }
.city-list { display: flex; flex-wrap: wrap; gap: 8px; }
.city-chip { display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); font-size: 14px; font-weight: 500; transition: border-color .15s, color .15s; }
a.city-chip:hover { border-color: var(--accent); color: var(--accent); }
.city-chip.is-soon { color: var(--muted); border-style: dashed; background: transparent; cursor: default; }

/* Market movers */
.movers { display: grid; grid-template-columns: 1fr 1fr 1.15fr; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.movers-col { padding: 14px 18px 8px; }
.movers-col + .movers-col { border-left: 1px solid var(--border); }
.movers-col h3 { margin-bottom: 6px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mover-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 14px; }
.mover-row:hover .mover-name { color: var(--accent); }
.mover-name { font-weight: 600; }
.mover-price { color: var(--muted); font-variant-numeric: tabular-nums; }
.movers-empty { padding: 10px 0; font-size: 14px; color: var(--muted); }
.hl-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border); }
.hl-row dt { font-size: 13px; color: var(--muted); }
.hl-row dd { text-align: right; font-size: 14px; font-weight: 600; }
.hl-row dd a:hover { color: var(--accent); }
.hl-row dd small { display: block; font-size: 12.5px; font-weight: 500; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Calculator */
.calc { display: grid; grid-template-columns: 1.1fr .9fr; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.calc-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-content: start; padding: 22px; }
.calc-form .field:first-child, .calc-form .field-price { grid-column: 1 / -1; }
.field label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.field-hint { font-weight: 500; }
.field input, .field select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.field select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer; }
.field input:focus, .field select:focus { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.select-wrap, .input-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 14px; top: 50%; width: 8px; height: 8px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.field-price input { padding-right: 72px; }
.field-suffix { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 13px; color: var(--muted); pointer-events: none; }
.calc-reset { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--accent); }
.calc-result { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 22px 24px; background: var(--surface-alt); border-left: 1px solid var(--border); }
.calc-value { display: block; font-size: clamp(32px, 4vw, 44px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.calc-breakdown { min-height: 1.5em; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.calc-note { margin-top: 10px; font-size: 12.5px; color: var(--muted); }

/* News */
.news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.news-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
.news-media { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; background: var(--surface-alt); border-bottom: 1px solid var(--border); }
.news-media img { width: 100%; height: 100%; object-fit: cover; }
.news-media .brand-mark { width: 34px; height: 34px; opacity: .45; }
.news-body { display: flex; flex: 1; flex-direction: column; gap: 8px; padding: 14px 16px 16px; }
.news-title { font-size: 17px; line-height: 1.3; letter-spacing: -0.01em; }
.news-title a:hover { color: var(--accent); }
.news-excerpt { font-size: 14px; color: var(--muted); }
.news-foot { display: flex; justify-content: space-between; margin-top: auto; padding-top: 8px; font-size: 12.5px; color: var(--muted); }
.news-foot a { font-weight: 600; color: var(--accent); }
.news-empty { padding: 24px; background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius-md); font-size: 14.5px; color: var(--muted); }

/* Guides */
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guide-card { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); transition: border-color .15s; }
a.guide-card:hover { border-color: var(--accent); }
.guide-body h3 { font-size: 15.5px; }
.guide-body p { margin-top: 4px; font-size: 13.5px; color: var(--muted); }
.guide-link { flex: none; font-size: 13px; font-weight: 600; color: var(--accent); white-space: nowrap; }
.guide-card .soon { flex: none; }

/* Testimonials */
.quote-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.quote-card { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.stars { display: flex; gap: 3px; }
.stars span { display: block; width: 15px; height: 15px; color: var(--border); }
.stars span.is-on { color: var(--accent); }
.stars svg { width: 100%; height: 100%; fill: currentColor; }
.quote-text { margin: 0; font-size: 15px; line-height: 1.55; }
.quote-meta { margin-top: auto; font-size: 13px; color: var(--muted); }
.quote-meta strong { display: block; font-weight: 600; color: var(--ink); }

/* FAQ */
.faq-list { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.faq-list details + details { border-top: 1px solid var(--border); }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; cursor: pointer; list-style: none; font-size: 15.5px; font-weight: 600; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 8px; height: 8px; margin-right: 4px; border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted); transform: rotate(45deg); transition: transform .15s; }
.faq-list details[open] summary::after { transform: rotate(-135deg); }
.faq-list summary:hover { color: var(--accent); }
.faq-list details p { max-width: 78ch; padding: 0 18px 18px; font-size: 14.5px; color: var(--muted); }

/* Final call to action, with the About note */
.cta-panel { display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; padding: 36px 40px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cta-copy p { max-width: 52ch; margin-top: 12px; font-size: 16.5px; color: var(--muted); }
.cta-copy .btn { margin-top: 22px; }
.cta-about { padding-left: 40px; border-left: 1px solid var(--border); }
.cta-about h3 { margin-bottom: 8px; }
.cta-about p { font-size: 14px; color: var(--muted); }

@media (max-width: 1120px) {
	.kw-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.country-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
	.country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.city-groups { grid-template-columns: 1fr 1fr; }
	.news-grid { grid-template-columns: 1fr 1fr; }
	.quote-grid { grid-template-columns: 1fr; }
	.movers { grid-template-columns: 1fr 1fr; }
	.movers-col:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 782px) {
	.section-head-row { flex-direction: column; align-items: flex-start; }
	.kw-grid, .country-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.kw-card, .country-card { padding: 12px 14px; }
	.city-groups { grid-template-columns: 1fr; gap: 20px; }
	.movers { grid-template-columns: 1fr; }
	.movers-col + .movers-col { border-left: 0; border-top: 1px solid var(--border); }
	.calc { grid-template-columns: 1fr; }
	.calc-form { grid-template-columns: 1fr; padding: 18px; }
	.calc-form .field:first-child, .calc-form .field-price { grid-column: auto; }
	.calc-result { padding: 20px 18px; border-left: 0; border-top: 1px solid var(--border); }
	.news-grid, .guide-grid { grid-template-columns: 1fr; }
	.cta-panel { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px; }
	.cta-about { padding-left: 0; padding-top: 20px; border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 520px) {
	.mover-row { grid-template-columns: 1fr auto; }
	.mover-row .mover-price { display: none; }
	.stars span { width: 14px; height: 14px; }
}

/* The hidden attribute must win over component display rules (.chart-error is display:flex),
   otherwise the chart's error overlay covers the canvas even when there is no error. */
[hidden] { display: none !important; }

/* ============================================================
   Inner pages (About, Contact, legal pages, hubs): template-page.php
   ============================================================ */
.page-hero { padding: 36px 0 30px; background: var(--surface); border-bottom: 1px solid var(--border); }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb [aria-current] { color: var(--ink); font-weight: 500; }
.page-hero h1 { max-width: 760px; font-size: clamp(30px, 4vw, 42px); }
.page-lead { max-width: 640px; margin-top: 12px; font-size: 18px; color: var(--muted); }
.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; padding-top: 40px; padding-bottom: var(--space-xl); }

/* Block editor content */
.entry-content { max-width: 720px; font-size: 16.5px; line-height: 1.65; }
.entry-content > * + * { margin-top: 1.1em; }
.entry-content > :first-child { margin-top: 0; }
.entry-content h2 { margin-top: 2em; font-size: clamp(22px, 2.2vw, 26px); }
.entry-content h3 { margin-top: 1.5em; font-size: 18px; letter-spacing: -0.01em; }
.entry-content h2 + *, .entry-content h3 + * { margin-top: .65em; }
.entry-content a { color: var(--accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.entry-content a:hover { text-decoration-thickness: 2px; }
.entry-content ul, .entry-content ol { padding-left: 1.3em; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li + li { margin-top: .45em; }
.entry-content li::marker { color: var(--muted); }
.entry-content strong { font-weight: 600; }
.entry-content blockquote, .entry-content .wp-block-quote { margin: 0; padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--muted); }
.entry-content blockquote p + p { margin-top: .6em; }
.entry-content blockquote cite { display: block; margin-top: 8px; font-size: 13px; font-style: normal; }
.entry-content hr, .entry-content .wp-block-separator { margin: 2em 0; border: 0; border-top: 1px solid var(--border); }
.entry-content img { height: auto; border-radius: var(--radius-md); }
.entry-content figure { margin: 0; }
.entry-content figcaption { margin-top: 8px; font-size: 13px; color: var(--muted); }
.entry-content table { width: 100%; border-collapse: collapse; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.entry-content th, .entry-content td { padding: 10px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.entry-content th { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.entry-content .wp-block-table { overflow-x: auto; }
.entry-content code { padding: 2px 6px; background: var(--surface-alt); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .92em; }
.entry-content .wp-block-columns { display: flex; flex-wrap: wrap; gap: 24px; }
.entry-content .wp-block-column { flex: 1 1 0; min-width: 0; }
.entry-content .wp-block-column > * + * { margin-top: 1em; }
.entry-content .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.entry-content .wp-block-button__link { display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-ink); font-size: 15px; font-weight: 600; text-decoration: none; }
.entry-content .is-style-outline .wp-block-button__link { background: var(--surface); color: var(--ink); border: 1px solid var(--border); }
.entry-content .contact-card, .entry-content .wp-block-group.panel { padding: 22px 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.entry-content .contact-card > * + * { margin-top: .6em; }
.entry-content .contact-card h2 { margin-top: 0; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.entry-content .contact-email a { display: inline-block; font-size: clamp(20px, 2.6vw, 26px); font-weight: 600; letter-spacing: -0.01em; text-decoration: none; word-break: break-all; }
.entry-content .contact-email a:hover { text-decoration: underline; }
.entry-content .note { padding: 12px 16px; background: var(--surface-alt); border-radius: var(--radius-sm); font-size: 14.5px; color: var(--muted); }

/* Side panel */
.page-side { position: sticky; top: calc(var(--header-h) + 20px); display: flex; flex-direction: column; gap: 16px; }
.side-board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.side-board .board-list a { gap: 10px; padding: 10px 14px; }
.side-board .board-name { font-size: 14px; }
.side-board .board-price { font-size: 14.5px; }
.side-board .board-more { font-size: 13.5px; }
.side-foot { padding: 10px 14px; border-top: 1px solid var(--border); }
.side-links { padding: 14px 16px 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.side-links h2 { margin-bottom: 4px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.side-links li + li { border-top: 1px solid var(--border); }
.side-links a { display: block; padding: 9px 0; font-size: 14px; font-weight: 500; }
.side-links a:hover { color: var(--accent); }

@media (max-width: 1000px) {
	.page-grid { grid-template-columns: 1fr; gap: 32px; }
	.page-side { position: static; }
}
@media (max-width: 782px) {
	.page-hero { padding: 26px 0 22px; }
	.page-grid { padding-top: 28px; }
	.entry-content { font-size: 16px; }
	.entry-content .wp-block-columns { flex-direction: column; gap: 16px; }
	.entry-content th, .entry-content td { padding: 8px 10px; }
}

/* ============================================================
   Priority-plus navigation ("More" menu) and a narrower search
   ============================================================ */
@media (min-width: 1001px) {
	.site-search, .site-search:focus-within { width: 220px; }
}
@media (min-width: 1001px) and (max-width: 1120px) {
	.site-search, .site-search:focus-within { width: 180px; }
}
.nav-more { position: relative; }
.nav-more-btn { display: inline-flex; align-items: center; gap: 5px; padding: 8px 9px; border-radius: var(--radius-sm); font-size: 14px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color .15s, background-color .15s; }
.nav-more-btn:hover, .nav-more-btn[aria-expanded="true"] { color: var(--ink); background: var(--surface-alt); }
.nav-more-btn svg { width: 12px; height: 12px; transition: transform .15s; }
.nav-more-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-more-menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 220px; padding: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.nav-list .nav-more-menu a { display: block; padding: 8px 10px; }
@media (max-width: 1120px) {
	.nav-more-btn { padding-inline: 7px; font-size: 13.5px; }
}

/* ============================================================
   Pillar pages: table of contents, price boards, meta line
   ============================================================ */
.page-meta { margin-top: 10px; font-size: 13px; color: var(--muted); }
.page-meta time { color: var(--ink); font-weight: 500; }
.page-side { max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; }
.side-toc { padding: 14px 16px 8px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.side-toc h2 { margin-bottom: 4px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.side-toc li + li { border-top: 1px solid var(--border); }
.side-toc a { display: block; padding: 8px 0; font-size: 13.5px; font-weight: 500; line-height: 1.35; }
.side-toc a:hover { color: var(--accent); }

.entry-content .cat-board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.cat-board-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.cat-board-head .label { display: block; margin-bottom: 2px; }
.cat-board-head strong { font-size: 14px; font-weight: 600; }
.cat-table-wrap { overflow-x: auto; }
.entry-content .cat-table { margin: 0; font-size: 14.5px; }
.entry-content .cat-table th, .entry-content .cat-table td { padding: 10px 18px; }
.entry-content .cat-table tbody tr:last-child td { border-bottom: 0; }
.cat-table .num { text-align: right; white-space: nowrap; font-weight: 600; font-variant-numeric: tabular-nums; }
.cat-table .muted { color: var(--muted); }
.entry-content .vehicle-table td:first-child { font-weight: 600; }
.pgm-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--border); background: var(--surface-alt); }
.pgm-item { padding: 12px 18px; }
.pgm-item + .pgm-item { border-left: 1px solid var(--border); }
.pgm-item .label { display: block; }
.pgm-item strong { display: block; margin-top: 2px; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.pgm-item small { font-size: 12px; color: var(--muted); }
.entry-content .cat-note { margin: 0; padding: 12px 18px; border-top: 1px solid var(--border); font-size: 13px; color: var(--muted); }
.entry-content .faq-list details p { margin: 0; }

@media (max-width: 1000px) {
	.page-side { max-height: none; overflow: visible; }
}
@media (max-width: 782px) {
	.pgm-row { grid-template-columns: 1fr; }
	.pgm-item + .pgm-item { border-left: 0; border-top: 1px solid var(--border); }
	.entry-content .cat-table th, .entry-content .cat-table td { padding: 8px 12px; }
	.cat-board-head { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   Country pages (/scrap-prices/{country}/) and the hub page
   ============================================================ */
.country-content section + section { margin-top: 2.2em; }
.country-content section > h2:first-child { margin-top: 0; }
.country-content section > * + * { margin-top: 1.1em; }
.country-content section > h2 + * { margin-top: .75em; }
.entry-content .price-table tr.group td { padding-top: 12px; padding-bottom: 6px; background: var(--surface-alt); font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.entry-content .price-table td small { font-size: 12px; font-weight: 500; color: var(--muted); }
.entry-content .price-table .pill { justify-content: flex-end; }
.entry-content .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; }
.entry-content .facts > div { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.entry-content .facts dt { font-size: 11.5px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.entry-content .facts dd { margin-top: 4px; font-size: 14.5px; font-weight: 500; }
.entry-content .city-list { padding: 0; list-style: none; }
.entry-content .city-list li + li { margin-top: 0; }
.entry-content .country-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.entry-content .country-grid .country-metals .pill { margin-left: 6px; }
.page-meta .sample-tag { margin-left: 6px; vertical-align: middle; }
@media (max-width: 782px) {
	.entry-content .facts { grid-template-columns: 1fr; }
	.entry-content .country-grid { grid-template-columns: 1fr 1fr; }
}

/* Guide answer box (featured snippet paragraph) */
.entry-content .snippet { padding: 14px 18px; border-left: 3px solid var(--accent); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 16.5px; font-weight: 500; line-height: 1.55; }
.entry-content table th[scope="row"] { font-size: 13.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); white-space: nowrap; }
.entry-content .wp-block-table { margin: 0; }
.entry-content .wp-block-table table { min-width: 560px; }

.footer-address { margin-top: 6px; font-size: 12.5px; color: var(--muted); }
.footer-address a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

.market-note { font-size: 12.5px; color: var(--muted); white-space: nowrap; }
.market-note a { color: var(--accent); font-weight: 600; }
@media (max-width: 782px) { .market-note { white-space: normal; } }

/* Market news */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.news-card { display: flex; flex-direction: column; gap: 6px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); text-decoration: none; transition: border-color .15s ease, transform .15s ease; }
.news-card:hover { border-color: var(--accent); transform: translateY(-2px); }
.news-date { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.news-title { font-weight: 650; color: var(--ink); line-height: 1.35; }
.news-excerpt { font-size: 13.5px; color: var(--muted); line-height: 1.5; }
.spt-news .pagination { margin-top: 16px; }


/* Country price table shortcode */
.spt-country-prices { margin: 28px 0; }
.spt-country-prices caption { caption-side: top; text-align: left; font-weight: 600; color: var(--ink, #0F1B2D); padding-bottom: 10px; font-size: .95rem; }
.spt-country-prices table { width: 100%; border-collapse: collapse; }
.spt-country-prices th[scope="row"] { text-align: left; font-weight: 600; }
.spt-country-prices td.num { text-align: right; font-variant-numeric: tabular-nums; }
.spt-country-prices figcaption { margin-top: 10px; font-size: .82rem; line-height: 1.5; color: var(--muted, #5B6B82); }
@media (max-width: 640px) { .spt-country-prices table { font-size: .85rem; } }


/* Country recycling routes table */
.spt-routes { margin: 28px 0; }
.spt-routes caption { caption-side: top; text-align: left; font-weight: 600; color: var(--ink, #0F1B2D); padding-bottom: 10px; font-size: .95rem; }
.spt-routes table { width: 100%; border-collapse: collapse; }
.spt-routes th[scope="row"] { text-align: left; font-weight: 600; white-space: nowrap; }
.spt-routes td { font-size: .92rem; }
.spt-routes figcaption { margin-top: 10px; font-size: .82rem; line-height: 1.5; color: var(--muted, #5B6B82); }
@media (max-width: 720px) { .spt-routes { overflow-x: auto; } .spt-routes table { min-width: 720px; font-size: .85rem; } }

/* Converter net cost calculator: extends the homepage .calc pattern. */
.spt-cnc { margin: 0 0 var(--space-md); }
.spt-cnc .calc-form { grid-template-columns: 1fr 1fr; }
.spt-cnc .field:first-child { grid-column: auto; }
.spt-cnc .field-price { grid-column: 1 / -1; }
.spt-cnc .calc-result { gap: 4px; }
.calc-label { font-size: 12.5px; font-weight: 600; color: var(--muted); letter-spacing: .01em; }
.cnc-rows { display: grid; gap: 6px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.cnc-rows span { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; }
.cnc-rows em { font-style: normal; color: var(--muted); }
.cnc-rows b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cnc-say { margin: 0 0 var(--space-md); padding: 16px 18px; background: var(--accent-soft); border-radius: var(--radius-md); }
.cnc-say blockquote { margin: 8px 0 0; padding: 0; border: 0; background: none; color: var(--ink); font-size: 15px; line-height: 1.55; }
.cnc-say blockquote::before { content: "\201C"; }
.cnc-say blockquote::after { content: "\201D"; }
.cnc-foot { margin: 0 0 var(--space-lg); font-size: 12.5px; color: var(--muted); }
.calc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-md); margin: 0 0 var(--space-lg); }
.calc-card { padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.calc-card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }
.calc-card p { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.calc-card .calc-open { margin: 0; }
@media (max-width: 720px) {
	.spt-cnc .calc-form { grid-template-columns: 1fr; }
	.cnc-rows span { font-size: 13.5px; }
}

/* Cost per usable kWh comparator */
.spt-kwh { margin: 0 0 var(--space-md); padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.kwh-top { grid-template-columns: 1fr 1fr; padding: 0 0 16px; }
.kwh-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kwh-table th { padding: 8px 6px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.kwh-table .th-hint { display: block; font-weight: 500; opacity: .75; }
.kwh-table td { padding: 6px 6px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.kwh-table input, .kwh-table select { width: 100%; height: 38px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; }
.kwh-table .kwh-out { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kwh-table .kwh-out b { display: block; font-size: 16px; }
.kwh-sub { display: block; font-size: 12px; color: var(--muted); }
.kwh-best td { background: var(--up-soft); }
.kwh-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin: 14px 0 0; }
.kwh-labour { font-size: 12.5px; color: var(--muted); }
.kwh-result { margin-top: 16px; border-radius: var(--radius-md); border-left: 0; border-top: 1px solid var(--border); }
\@media (max-width: 720px) { .kwh-top { grid-template-columns: 1fr; } .kwh-table { font-size: 13px; } }

/* Wire stripping payback */
.spt-strip .calc-form { grid-template-columns: 1fr 1fr; }
.strip-tiers { margin: 0 0 var(--space-md); }
.strip-verdict { margin: 0 0 14px; font-size: 15px; }
.strip-no { padding: 14px 16px; background: var(--down-soft); border-radius: var(--radius-md); }
.strip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.strip-tier { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); opacity: .5; }
.strip-tier.strip-fit { opacity: 1; border-color: var(--up); background: var(--up-soft); }
.strip-tier h4 { margin: 0 0 6px; font-size: 15px; }
.strip-price { margin: 0 0 4px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.strip-pay { margin: 0 0 8px; font-size: 13px; color: var(--muted); }
.strip-note { margin: 0; font-size: 12.5px; color: var(--muted); }
\@media (max-width: 720px) { .spt-strip .calc-form { grid-template-columns: 1fr; } }

/* Minimum viable load */
.spt-load .calc-form { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.load-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-md); font-size: 14px; }
.load-table th[scope=col] { padding: 8px 6px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.load-table th[scope=row] { padding: 9px 6px; text-align: left; font-weight: 500; border-bottom: 1px solid var(--border); }
.load-table td { padding: 9px 6px; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; }
.load-unit { color: var(--muted); font-size: 12px; }
.load-need { font-weight: 600; white-space: nowrap; }
.load-light td, .load-light th { background: var(--up-soft); }
.load-heavy td, .load-heavy th { background: var(--down-soft); }

/* Whole vs part out */
.spt-po .calc-form { grid-template-columns: 1fr 1fr; }
.po-parts { grid-column: 1 / -1; margin: 4px 0 0; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); }
.po-parts legend { padding: 0 6px; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.po-part { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 14px; border-bottom: 1px solid var(--border); }
.po-part:last-child { border-bottom: 0; }
.po-part input { width: 17px; height: 17px; flex: 0 0 auto; }
.po-l { flex: 1 1 auto; }
.po-v { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.po-drop .po-l::after { content: ' drops the rate'; color: var(--down); font-size: 11.5px; }
.po-note { margin: 0 0 var(--space-md); display: grid; gap: 8px; }
.po-note span { padding: 10px 14px; background: var(--surface-alt); border-radius: var(--radius-sm); font-size: 13.5px; }
\@media (max-width: 720px) { .spt-po .calc-form { grid-template-columns: 1fr; } }

/* Grade finder */
.spt-gf { margin: 0 0 var(--space-md); padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.gf-steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 16px; }
.gf-step { display: grid; gap: 6px; }
.gf-q { font-size: 14px; font-weight: 600; }
.gf-step select { width: 100%; height: 44px; padding: 0 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 15px; }
.gf-hint { font-size: 12.5px; color: var(--muted); }
.gf-result { margin-top: 20px; border-left: 0; border-top: 1px solid var(--border); border-radius: var(--radius-md); }
.gf-what { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.gf-up { margin: 10px 0 0; padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: 14px; }
.gf-link { margin: 12px 0 0; }

/* Country comparison */
.spt-cc { margin: 0 0 var(--space-md); padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.cc-top { grid-template-columns: 1fr 1fr; padding: 0 0 16px; }
.cc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cc-table th[scope=col] { padding: 8px 6px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.cc-table th[scope=row] { padding: 9px 6px; text-align: left; font-weight: 500; border-bottom: 1px solid var(--border); }
.cc-table td { padding: 9px 6px; border-bottom: 1px solid var(--border); }
.cc-reg th { padding: 14px 6px 6px; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 0; }
.cc-price b { font-variant-numeric: tabular-nums; }
.cc-unit { display: block; font-size: 11.5px; color: var(--muted); }
\@media (max-width: 720px) { .cc-top { grid-template-columns: 1fr; } }

/* Core vs scrap */
.spt-core { margin: 0 0 var(--space-md); padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.core-checks { display: grid; gap: 14px; margin: 18px 0 0; }
.core-q { display: grid; gap: 6px; }
.core-t { font-size: 14px; font-weight: 600; }
.core-opts { display: flex; flex-wrap: wrap; gap: 16px; }
.core-opts label { display: flex; align-items: center; gap: 7px; font-size: 14px; color: var(--muted); cursor: pointer; }
.core-opts input { width: 16px; height: 16px; }
.core-result { margin-top: 20px; border-left: 0; border-top: 3px solid var(--border); border-radius: var(--radius-md); }
.core-yes { border-top-color: var(--up); }
.core-maybe { border-top-color: var(--muted); }
.core-no { border-top-color: var(--down); }

/* Board value */
.spt-bv { margin: 0 0 var(--space-md); padding: 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.bv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.bv-table th[scope=col] { padding: 8px 6px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.bv-table th[scope=row] { padding: 10px 6px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--border); max-width: 280px; }
.bv-n { display: block; font-weight: 400; font-size: 12px; color: var(--muted); margin-top: 3px; }
.bv-table td { padding: 10px 6px; border-bottom: 1px solid var(--border); vertical-align: top; font-variant-numeric: tabular-nums; }
.bv-table input { width: 80px; height: 36px; padding: 0 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 14px; }
.bv-rate { color: var(--muted); white-space: nowrap; }
.bv-val { font-weight: 600; white-space: nowrap; }
.bv-on th[scope=row], .bv-on td { background: var(--surface-alt); }
.bv-mixed { display: flex; align-items: center; gap: 9px; margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.bv-mixed input { width: 16px; height: 16px; }
.bv-result { margin-top: 18px; border-left: 0; border-top: 1px solid var(--border); border-radius: var(--radius-md); }
\@media (max-width: 720px) { .bv-table, .bv-table tbody, .bv-table tr, .bv-table th, .bv-table td { display: block; } .bv-table thead { display: none; } .bv-table tr { padding: 10px 0; border-bottom: 1px solid var(--border); } .bv-table th[scope=row], .bv-table td { border: 0; padding: 2px 0; max-width: none; } }

/* DPF route */
.spt-dpf .calc-form { grid-template-columns: 1fr 1fr; }
.spt-dpf .calc-value { font-size: clamp(24px, 3vw, 34px); line-height: 1.15; }
.dpf-why { display: grid; gap: 8px; margin: 0 0 var(--space-md); }
.dpf-why span { padding: 12px 14px; background: var(--accent-soft); border-radius: var(--radius-sm); font-size: 13.5px; }
.dpf-methods { width: 100%; border-collapse: collapse; margin: 0 0 var(--space-md); font-size: 14px; }
.dpf-methods th[scope=col] { padding: 8px 6px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); }
.dpf-methods th[scope=row] { padding: 10px 6px; text-align: left; font-weight: 600; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dpf-methods td { padding: 10px 6px; border-bottom: 1px solid var(--border); color: var(--muted); }
.dpf-methods td:first-of-type { color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
\@media (max-width: 720px) { .spt-dpf .calc-form { grid-template-columns: 1fr; } .dpf-methods th[scope=row] { white-space: normal; } }

.spt-gran .calc-form { grid-template-columns: 1fr 1fr; }
\@media (max-width: 720px) { .spt-gran .calc-form { grid-template-columns: 1fr; } }

.spt-xrf .calc-form { grid-template-columns: 1fr 1fr; }
.spt-xrf .calc-value { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }
\@media (max-width: 720px) { .spt-xrf .calc-form { grid-template-columns: 1fr; } }

/* Scale picker */
.spt-sc .calc-form { grid-template-columns: 1fr 1fr; }
.spt-sc .calc-value { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }
.sc-checks { margin: 0 0 var(--space-md); padding: 18px 20px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.sc-checks ol { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.sc-checks li { font-size: 14px; color: var(--muted); }
.sc-checks li strong { color: var(--ink); }
\@media (max-width: 720px) { .spt-sc .calc-form { grid-template-columns: 1fr; } }

/* Yard locator */
.spt-locator { margin: 0 0 var(--space-md); }
.loc-controls { display: flex; gap: 10px; margin: 0 0 14px; }
.loc-search { flex: 1 1 auto; height: 44px; padding: 0 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font-size: 15px; }
.loc-regions { margin: 0 0 14px; }
.loc-chip { cursor: pointer; font: inherit; }
.loc-chip small { opacity: .7; font-size: 11px; margin-left: 4px; }
.loc-chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.loc-map { height: 380px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; margin: 0 0 12px; background: var(--surface-alt); }
.loc-map-empty { height: 220px; }
.loc-status { margin: 0 0 12px; font-size: 13.5px; color: var(--muted); }
.loc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin: 0 0 14px; }
.loc-card { padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.loc-card h3 { margin: 0 0 4px; font-size: 16px; }
.loc-card p { margin: 0 0 6px; font-size: 14px; }
.loc-area { color: var(--muted); font-size: 13px; }
.loc-meta { display: grid; gap: 4px; margin: 8px 0; font-size: 13.5px; }
.loc-meta em { font-style: normal; color: var(--muted); margin-right: 6px; }
.loc-src { font-size: 12px; color: var(--muted); }
\@media (max-width: 720px) { .loc-controls { flex-direction: column; } .loc-map { height: 280px; } }

.loc-soon { font-size: 13px; color: var(--muted); }

/* Region page */
.near-list { list-style: none; margin: 0 0 var(--space-md); padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.near-list li { padding: 12px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
.near-list a { font-weight: 600; }
.near-list span { display: block; margin-top: 3px; font-size: 13px; color: var(--muted); }
.spt-region h3 { margin: 18px 0 6px; font-size: 17px; }

/* Region page layout: sections need breathing room and headings need lead-in space. */
.spt-region main .container > section { margin: 0 0 var(--space-xl); padding: 0 0 var(--space-lg); border-bottom: 1px solid var(--border); }
.spt-region main .container > section:last-of-type { border-bottom: 0; }
.spt-region main .container > section > h2 { margin: 0 0 10px; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; }
.spt-region main .container > section > h3 { margin: 26px 0 8px; font-size: 18px; line-height: 1.3; }
.spt-region main .container > section > p { margin: 0 0 14px; max-width: 74ch; line-height: 1.65; }
.spt-region main .container > section > ul { margin: 0 0 16px; padding-left: 20px; max-width: 74ch; }
.spt-region main .container > section > ul li { margin: 0 0 9px; line-height: 1.6; }
.spt-region .near-list { padding-left: 0; }

/* Local price board */
.local-board { margin: 0 0 var(--space-md); }
.board-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.board-table caption { caption-side: top; text-align: left; padding: 0 0 12px; font-size: 13px; font-weight: 600; color: var(--muted); }
.board-table th[scope=col] { padding: 9px 8px; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); border-bottom: 1px solid var(--border); text-transform: none; }
.board-table th[scope=row] { padding: 12px 8px; text-align: left; font-weight: 500; border-bottom: 1px solid var(--border); }
.board-table td { padding: 12px 8px; border-bottom: 1px solid var(--border); }
.board-price { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.board-unit { display: block; font-size: 12px; font-weight: 400; color: var(--muted); }
.board-note { margin: 14px 0 0; font-size: 12.5px; color: var(--muted); max-width: 74ch; }
\@media (max-width: 720px) {
	.spt-region main .container > section { margin-bottom: var(--space-lg); }
	.board-table { font-size: 14px; }
	.board-table th[scope=row], .board-table td { padding: 10px 4px; }
}