:root {
  color-scheme: light;
  --ink: #071017;
  --text: #0b1720;
  --muted: #5a6972;
  --soft: #74838b;
  --page: #eef3ef;
  --page-2: #fafbf7;
  --panel: rgba(255,255,255,.82);
  --panel-strong: rgba(255,255,255,.96);
  --panel-deep: #ffffff;
  --line: rgba(7,16,23,.13);
  --line-strong: rgba(7,16,23,.22);
  --brand: #13824a;
  --brand-2: #0b5d37;
  --brand-3: #73d99a;
  --blue: #276b9d;
  --blue-2: #6fb5e3;
  --accent: #f0a93b;
  --accent-2: #c7652c;
  --green-soft: rgba(19,130,74,.12);
  --blue-soft: rgba(39,107,157,.12);
  --amber-soft: rgba(240,169,59,.16);
  --danger-bg: #ffebe8;
  --danger-text: #7c1f1a;
  --warn-bg: #fff5d6;
  --warn-text: #624300;
  --good-bg: #e7f8ee;
  --good-text: #15562e;
  --shadow: 0 30px 80px rgba(9,20,28,.16);
  --shadow-soft: 0 18px 45px rgba(9,20,28,.10);
  --shadow-tight: 0 10px 24px rgba(9,20,28,.08);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 15px;
  --radius-sm: 11px;
  --focus: #ffbd45;
  --max: 1180px;
  --font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #f5fbff;
  --text: #edf7f4;
  --muted: #b5c5ce;
  --soft: #8b9ea8;
  --page: #050b0f;
  --page-2: #0c171d;
  --panel: rgba(12,25,32,.76);
  --panel-strong: rgba(14,28,36,.94);
  --panel-deep: rgba(8,18,24,.98);
  --line: rgba(255,255,255,.13);
  --line-strong: rgba(255,255,255,.23);
  --brand: #8ce7ad;
  --brand-2: #5bd184;
  --brand-3: #c9f9d6;
  --blue: #83caff;
  --blue-2: #2e7fb1;
  --accent: #ffc56f;
  --accent-2: #ff9255;
  --green-soft: rgba(140,231,173,.13);
  --blue-soft: rgba(131,202,255,.13);
  --amber-soft: rgba(255,197,111,.13);
  --danger-bg: rgba(95,31,31,.78);
  --danger-text: #ffc4c4;
  --warn-bg: rgba(83,64,22,.78);
  --warn-text: #ffe7a3;
  --good-bg: rgba(19,76,43,.78);
  --good-text: #c5ffd7;
  --shadow: 0 34px 90px rgba(0,0,0,.52);
  --shadow-soft: 0 22px 54px rgba(0,0,0,.34);
  --shadow-tight: 0 14px 30px rgba(0,0,0,.25);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100%;
  margin: 0;
  color: var(--text);
  font-family: var(--font);
  line-height: 1.58;
  background:
    radial-gradient(circle at 14% 0%, var(--green-soft), transparent 34rem),
    radial-gradient(circle at 88% 6%, var(--blue-soft), transparent 34rem),
    radial-gradient(circle at 48% 104%, var(--amber-soft), transparent 42rem),
    linear-gradient(140deg, var(--page), var(--page-2));
  background-attachment: fixed;
  overflow-x: hidden;
}
body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -2;
}
body::before {
  background:
    linear-gradient(90deg, rgba(7,16,23,.045) 1px, transparent 1px),
    linear-gradient(rgba(7,16,23,.04) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(7,16,23,.025) 9px 10px);
  background-size: 58px 58px, 58px 58px, 100% 100%;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.72), transparent 82%);
}
html[data-theme="dark"] body::before {
  background:
    linear-gradient(90deg, rgba(255,255,255,.052) 1px, transparent 1px),
    linear-gradient(rgba(255,255,255,.046) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 9px, rgba(255,255,255,.032) 9px 10px);
}
body::after {
  z-index: -1;
  background: radial-gradient(ellipse at center, transparent 0 45%, rgba(7,16,23,.08) 100%);
}
html[data-theme="dark"] body::after { background: radial-gradient(ellipse at center, transparent 0 40%, rgba(0,0,0,.40) 100%); }
body.nav-open { overflow: hidden; }
a { color: var(--brand-2); text-underline-offset: .18em; text-decoration-thickness: .08em; }
html[data-theme="dark"] a { color: var(--brand); }
a:hover { color: var(--accent-2); }
img { max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; }

.skip-link {
  position: absolute; top: .75rem; left: -999px; z-index: 9999;
  padding: .75rem 1rem; border-radius: 999px; background: var(--panel-strong); color: var(--text);
  border: 1px solid var(--line); box-shadow: var(--shadow-tight);
}
.skip-link:focus { left: .75rem; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: .85rem 1rem 0;
  transition: padding .2s ease;
}
.site-header.is-scrolled { padding-top: .5rem; }
.header-inner {
  max-width: var(--max);
  min-height: 74px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .62rem .7rem .62rem .82rem;
  background: color-mix(in srgb, var(--panel-strong) 90%, transparent);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.brand { display: inline-flex; align-items: center; gap: .78rem; text-decoration: none; color: var(--text); font-weight: 950; letter-spacing: -.04em; min-width: max-content; }
.brand:hover { color: var(--text); }
.brand-logo { width: 48px; height: 48px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.18)); }
.brand-logo-dark, .theme-logo-dark { display: none; }
html[data-theme="dark"] .brand-logo-light, html[data-theme="dark"] .theme-logo-light { display: none; }
html[data-theme="dark"] .brand-logo-dark, html[data-theme="dark"] .theme-logo-dark { display: block; }
.brand-text { font-size: 1.32rem; color: var(--text); }
.nav { display: flex; align-items: center; justify-content: flex-end; gap: .34rem; flex-wrap: wrap; }
.nav a, .theme-toggle, .nav-toggle {
  min-height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: .55rem .76rem;
  border-radius: 999px;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-decoration: none;
  font-weight: 850;
  letter-spacing: -.015em;
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.nav a:hover, .nav a:focus-visible, .theme-toggle:hover, .theme-toggle:focus-visible, .nav-toggle:hover, .nav-toggle:focus-visible {
  background: var(--green-soft);
  border-color: color-mix(in srgb, var(--brand) 42%, transparent);
  color: var(--text);
  transform: translateY(-1px);
}
.theme-toggle {
  background: linear-gradient(135deg, var(--ink), #263a45);
  color: #fff;
  border-color: rgba(255,255,255,.16);
  box-shadow: 0 10px 24px rgba(7,16,23,.14);
}
html[data-theme="dark"] .theme-toggle { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #061015; }
.dropdown { position: relative; padding-bottom: .8rem; margin-bottom: -.8rem; }
.dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .9rem; }
.dropdown-arrow { font-size: .78em; margin-left: .25rem; opacity: .72; }
.dropdown-content {
  display: grid;
  gap: .22rem;
  position: absolute;
  top: calc(100% + .16rem);
  right: 0;
  min-width: 318px;
  padding: .64rem;
  background: var(--panel-strong);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}
.dropdown:hover .dropdown-content, .dropdown:focus-within .dropdown-content {
  opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto;
}
.dropdown-content a { justify-content: flex-start; width: 100%; border-radius: 14px; padding: .7rem .8rem; }
.nav-toggle { display: none; }
.nav-toggle-bars { width: 22px; height: 16px; display: grid; gap: 4px; }
.nav-toggle-bars span { display: block; height: 2px; border-radius: 999px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
body.nav-open .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle-bars span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

main { max-width: var(--max); margin: 0 auto; padding: clamp(1.1rem,2vw,1.65rem) 1rem 4.4rem; }
.page-stack { display: grid; gap: 1.15rem; }
.section-block { margin: 0; }
.page-title, .card, .container, .footer-inner {
  background: var(--panel);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(22px) saturate(155%);
  -webkit-backdrop-filter: blur(22px) saturate(155%);
}
.page-title {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: grid;
  align-content: center;
  min-height: clamp(300px, 36vw, 500px);
  margin: .65rem 0 .2rem;
  padding: clamp(1.65rem,5vw,4rem);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
}
.page-title::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  border-radius: inherit;
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--panel-deep) 94%, transparent) 0 55%, color-mix(in srgb, var(--panel) 72%, transparent) 56% 100%),
    radial-gradient(circle at 82% 38%, var(--blue-soft), transparent 18rem),
    radial-gradient(circle at 76% 72%, var(--green-soft), transparent 18rem);
}
.page-title::after {
  content: "";
  position: absolute;
  right: clamp(1rem, 5vw, 4rem);
  top: 50%;
  width: clamp(210px, 29vw, 370px);
  height: clamp(210px, 29vw, 370px);
  transform: translateY(-50%);
  z-index: -1;
  opacity: .55;
  background:
    linear-gradient(var(--line-strong), var(--line-strong)) 50% 50% / 84% 1px no-repeat,
    linear-gradient(90deg, var(--line-strong), var(--line-strong)) 50% 50% / 1px 84% no-repeat,
    repeating-radial-gradient(circle at center, transparent 0 42px, color-mix(in srgb, var(--brand) 30%, transparent) 43px 45px, transparent 46px 84px),
    radial-gradient(circle at center, color-mix(in srgb, var(--blue) 14%, transparent), transparent 62%);
  border: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 20%, transparent), 0 30px 70px rgba(7,16,23,.12);
}
.page-title img, .theme-logo-light, .theme-logo-dark { max-width: 190px; display: block; margin: 0 0 1.05rem; filter: drop-shadow(0 12px 24px rgba(0,0,0,.18)); }
.page-title h1 { max-width: 780px; margin: 0; font-size: clamp(2.25rem,6vw,5.35rem); line-height: .96; letter-spacing: -.075em; text-wrap: balance; }
.page-title p { max-width: 700px; margin: 1.05rem 0 0; color: var(--muted); font-size: clamp(1rem,1.8vw,1.24rem); line-height: 1.55; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.knowledge-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1rem; }
.card, .container {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: clamp(1.1rem,2.4vw,1.7rem);
}
.card::before, .container::before {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--blue));
  opacity: .74;
}
.card:hover { box-shadow: var(--shadow); }
.card h2, .container h2, .faq-section h2 { margin-top: .1rem; letter-spacing: -.045em; line-height: 1.08; }
.card h3, .container h3 { letter-spacing: -.025em; }
.ai-summary { border-color: color-mix(in srgb, var(--brand) 38%, var(--line)); }
.content-card, .tool-card, .results-card { max-width: none; }
.cta-section { background: linear-gradient(135deg, var(--panel-strong), color-mix(in srgb, var(--green-soft) 65%, var(--panel))); }
.service-facts, .key-facts, .definition-block, .reference-note, .notice, .report-summary-box, .result-explanation, .semantic-result-block, .condition-notes, .cosmetic-observations-block, .share-box, .consent-box {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--panel-strong) 80%, transparent);
  padding: 1rem;
  box-shadow: var(--shadow-tight);
}
.key-facts li, .knowledge-list li { margin: .35rem 0; }

label { display: block; margin-bottom: .34rem; font-weight: 850; letter-spacing: -.015em; }
.help, .muted, .compact-help, .optional-label, .position-help, .reference-note, .disclaimer { color: var(--muted); }
.help, .compact-help, .optional-label, .position-help { font-size: .93rem; }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  width: 100%; min-height: 52px; padding: .85rem .95rem;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--panel-strong) 88%, transparent); color: var(--text);
  font: inherit; font-size: 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 10px 22px rgba(7,16,23,.055);
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: color-mix(in srgb, var(--brand) 65%, var(--line-strong)); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent); outline: none; }
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.tool-form, .static-form { display: grid; gap: 1rem; margin-top: 1rem; }
.form-group { display: grid; gap: .25rem; }
.form-actions, .report-actions, .dot-share-actions, .share-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; margin-top: 1rem; }
.button, button.button, .dot-copy-link {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .82rem 1.08rem; border: 1px solid color-mix(in srgb, var(--brand-3) 42%, transparent); border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; font: inherit; font-size: 16px; font-weight: 900; text-decoration: none; cursor: pointer;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--brand) 25%, transparent); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
html[data-theme="dark"] .button, html[data-theme="dark"] button.button, html[data-theme="dark"] .dot-copy-link { color: #061015; }
.button:hover, button.button:hover, .dot-copy-link:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 18px 34px color-mix(in srgb, var(--brand) 32%, transparent); }
html[data-theme="dark"] .button:hover, html[data-theme="dark"] button.button:hover, html[data-theme="dark"] .dot-copy-link:hover { color: #061015; }
.button-secondary, .secondary-button, .converter-clear { background: color-mix(in srgb, var(--panel-strong) 90%, transparent); color: var(--text); border-color: var(--line); box-shadow: var(--shadow-tight); }
.button-secondary:hover, .secondary-button:hover, .converter-clear:hover { color: var(--text); }
.alert, .validation-error-block, .result-notice { padding: .95rem 1rem; border: 1px solid var(--line); border-radius: var(--radius-md); margin: 1rem 0; }
.alert-good { background: var(--good-bg); color: var(--good-text); }
.alert-warn, .notice { background: var(--warn-bg); color: var(--warn-text); }
.alert-danger, .validation-error, .validation-error-block { background: var(--danger-bg); color: var(--danger-text); }

.results-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 1rem; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--panel-strong) 72%, transparent); }
.results-table th, .results-table td { border-bottom: 1px solid var(--line); padding: .86rem; text-align: left; vertical-align: top; }
.results-table th { color: var(--muted); font-size: .88rem; text-transform: uppercase; letter-spacing: .06em; background: color-mix(in srgb, var(--green-soft) 64%, transparent); }
.results-table tr:last-child td { border-bottom: 0; }
.result-number, .result-value, .large-result, .converter-result { font-variant-numeric: tabular-nums; font-weight: 900; }
.large-result { font-size: clamp(1.7rem,3vw,2.55rem); letter-spacing: -.06em; }
.kpi, .comparison-kpi, .result-item, .report-tire-card, .tire-input-card, .knowledge-card, .faq-item {
  display: grid; gap: .35rem; padding: 1rem; background: color-mix(in srgb, var(--panel-strong) 82%, transparent); border: 1px solid var(--line); border-left: 5px solid var(--brand); border-radius: var(--radius-lg); box-shadow: var(--shadow-tight);
}
.kpi strong { font-size: 1.35rem; }
.result-label { color: var(--muted); font-weight: 800; }
.report-metrics-grid, .wear-observation-grid, .dot-detail-grid, .dot-lookup-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 1rem; }
.converter-box, .pressure-converter-box, .wear-calculator-box { max-width: 760px; margin: 0 auto; }
.converter-box { text-align: center; }
.converter-box input { max-width: 210px; text-align: center; }
.converter-row, .wear-row, .wear-row-two, .same-size-control, .same-tire-control { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap: 1rem; }
.tire-total-distance, .tire-odometer-distance { display: grid; gap: 1rem; }
.report-print-footer { display: none; }
.learning-visual { display: block; margin: 1rem auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); border: 1px solid var(--line); }
.footer { padding: 0 1rem 2.2rem; }
.footer-inner { max-width: var(--max); margin: 0 auto; padding: 1.35rem; border-radius: var(--radius-xl); display: grid; gap: .75rem; text-align: center; color: var(--muted); }
.footer-identity { display: grid; gap: .25rem; font-weight: 750; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem .75rem; font-weight: 850; }
.footer-links a { text-decoration: none; }
.sr-only, .bot-trap { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

.cookie-banner {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 2200;
  width: min(440px, calc(100vw - 2rem));
  padding: 1rem;
  border-radius: 22px;
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--panel-strong) 94%, transparent);
  color: var(--text);
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.cookie-banner p { margin: 0; font-size: .95rem; line-height: 1.45; color: var(--muted); }
.cookie-banner-actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: .9rem; }
.cookie-banner .button { min-height: 42px; padding: .65rem .9rem; width: auto; }

.faq-section details { padding: .95rem 0; border-bottom: 1px solid var(--line); }
.faq-section details:last-child { border-bottom: 0; }
.faq-section summary { cursor: pointer; font-weight: 900; }
.faq-section summary + p { margin-top: .65rem; color: var(--muted); }
.wear-results { margin-top: 1.4rem; }
.wear-results .kpi { min-height: 112px; }
.wear-results .kpi span { color: var(--muted); font-weight: 850; }
.wear-results .kpi strong { font-size: clamp(1.15rem,2.2vw,1.65rem); }
.wear-mileage-group[hidden], #odometerMileageGroup[hidden], #totalMileageGroup[hidden] { display: none !important; }
.wear-row { align-items: end; }
.wear-bar-threshold-field { align-self: end; }
.wear-bar-reference-note { margin-top: .6rem; margin-bottom: 0; text-align: left; font-weight: 850; }
.wear-score-box { transition: background .2s ease, color .2s ease; }
.wear-score-box.wear-green { background: rgba(31,190,96,.24); color: #0b5f2a; border-left-color: #00b050; }
.wear-score-box.wear-yellow { background: rgba(255,235,59,.32); color: #5f5200; border-left-color: #ffeb00; }
.wear-score-box.wear-pink { background: rgba(255,99,132,.24); color: #7a1f32; border-left-color: #ff6384; }
.wear-score-box.wear-red { background: rgba(255,0,0,.28); color: #8a0000; border-left-color: #ff0000; }
html[data-theme="dark"] .wear-score-box.wear-green { background: rgba(31,190,96,.22); color: #b7f5c7; }
html[data-theme="dark"] .wear-score-box.wear-yellow { background: rgba(255,235,59,.20); color: #fff2a6; }
html[data-theme="dark"] .wear-score-box.wear-pink { background: rgba(255,99,132,.22); color: #ffc7d3; }
html[data-theme="dark"] .wear-score-box.wear-red { background: rgba(255,0,0,.24); color: #ffc0c0; }
.comparison-status-neutral { background: color-mix(in srgb, var(--panel-strong) 76%, transparent); color: var(--text); border-left-color: rgba(95,115,130,.45); }
.comparison-status-warn { background: rgba(255,235,59,.24); color: #5f4500; border-left-color: #f2c94c; }
.comparison-status-danger { background: rgba(255,0,0,.18); color: #7a1d1d; border-left-color: #ff3b30; }
html[data-theme="dark"] .comparison-status-warn { background: rgba(255,235,59,.18); color: #fff1a3; }
html[data-theme="dark"] .comparison-status-danger { background: rgba(255,0,0,.20); color: #ffc0c0; }
button[disabled], .share-disabled { opacity: .72; cursor: not-allowed; }
main#main.page-stack > .multi-report-form, #main.page-stack > .multi-report-form { width: min(100%, var(--max)) !important; max-width: var(--max) !important; box-sizing: border-box !important; padding: 0 !important; margin-left: auto !important; margin-right: auto !important; display: flex !important; flex-direction: column !important; gap: 1.15rem !important; align-items: stretch !important; }
.multi-report-form > .multi-report-section, .multi-report-form > #tiresBlock, .multi-report-form > .form-actions { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; }
.multi-report-form > #tiresBlock { display: flex; flex-direction: column; gap: 1rem; }
.multi-report-form .tire-input-card { width: 100%; box-sizing: border-box; margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  .page-title, .card, .container { animation: treadsley-in .45s ease both; }
  @keyframes treadsley-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
}
@media (max-width: 980px) {
  .site-header { padding: .62rem .7rem 0; }
  .header-inner { min-height: 66px; border-radius: 24px; }
  .brand-logo { width: 42px; height: 42px; }
  .brand-text { font-size: 1.16rem; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav {
    position: fixed;
    left: .7rem;
    right: .7rem;
    top: 78px;
    z-index: 1001;
    max-height: calc(100dvh - 92px);
    overflow: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: .55rem;
    padding: .8rem;
    background: var(--panel-strong);
    border: 1px solid var(--line);
    border-radius: 24px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(26px) saturate(160%);
    -webkit-backdrop-filter: blur(26px) saturate(160%);
  }
  body.nav-open .nav { display: flex; }
  .nav a, .theme-toggle { justify-content: flex-start; width: 100%; border-color: var(--line); background: color-mix(in srgb, var(--panel) 84%, transparent); }
  .dropdown { padding: 0; margin: 0; width: 100%; }
  .dropdown::after { display: none; }
  .dropdown-content {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    min-width: 0;
    width: 100%;
    margin-top: .45rem;
    padding: .45rem;
    box-shadow: none;
    border-radius: 18px;
    background: color-mix(in srgb, var(--page) 26%, transparent);
  }
  .mobile-direct-link { background: var(--green-soft) !important; }
  main { padding: 1rem .75rem 3.5rem; }
  .page-title { min-height: 0; padding: 1.45rem; border-radius: 26px; }
  .page-title::after { opacity: .26; right: -5rem; }
}
@media (max-width: 780px) {
  .grid-2 { grid-template-columns: 1fr; }
  .card, .container { border-radius: 24px; padding: 1rem; }
  .page-title img, .theme-logo-light, .theme-logo-dark { max-width: 146px; }
  .page-title h1 { font-size: clamp(2.05rem, 13vw, 3.55rem); }
  .results-table { display: block; overflow-x: auto; white-space: nowrap; }
  .form-actions, .report-actions, .dot-share-actions, .share-row, .cookie-banner-actions { flex-direction: column; align-items: stretch; }
  .button, button.button, .dot-copy-link, .cookie-banner .button { width: 100%; }
  .wear-row-two { grid-template-columns: 1fr; max-width: none; }
}
@media (max-width: 470px) {
  .brand-text { display: none; }
  .header-inner { border-radius: 999px; }
  .page-title { padding: 1.1rem; }
  .page-title::after { display: none; }
  .footer-links { flex-direction: column; gap: .25rem; }
  .footer-links span[aria-hidden="true"] { display: none; }
  .cookie-banner { left: .75rem; right: .75rem; bottom: .75rem; width: auto; }
}
@media print {
  body { background: #fff; color: #000; }
  body::before, body::after, .site-header, .footer, .no-print, .theme-toggle, .nav-toggle, .cookie-banner { display: none !important; }
  main { max-width: none; padding: 0; }
  .card, .container, .page-title { box-shadow: none; border: 1px solid #ccc; background: #fff; }
  .report-print-footer { display: block; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header-inner, .page-title, .card, .container, .footer-inner, .dropdown-content, .nav, .cookie-banner { background: var(--panel-strong); }
}

/* Treadsley OS v2.1 refinement: fix themed hero logo duplication and replace the radar target motif with a tread/data plate. */
.page-title img.theme-logo-dark,
.theme-logo-dark {
  display: none !important;
}
.page-title img.theme-logo-light,
.theme-logo-light {
  display: block !important;
}
html[data-theme="dark"] .page-title img.theme-logo-light,
html[data-theme="dark"] .theme-logo-light {
  display: none !important;
}
html[data-theme="dark"] .page-title img.theme-logo-dark,
html[data-theme="dark"] .theme-logo-dark {
  display: block !important;
}
.page-title img,
.theme-logo-light,
.theme-logo-dark {
  max-width: clamp(128px, 14vw, 170px);
}
.page-title::after {
  right: clamp(1rem, 5vw, 4rem);
  top: 50%;
  width: clamp(230px, 31vw, 420px);
  height: clamp(170px, 23vw, 310px);
  transform: translateY(-50%) rotate(-3deg);
  border-radius: 34px;
  opacity: .42;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  background:
    linear-gradient(90deg, transparent 0 12%, color-mix(in srgb, var(--line-strong) 70%, transparent) 12% 12.35%, transparent 12.35% 24%, color-mix(in srgb, var(--line-strong) 58%, transparent) 24% 24.35%, transparent 24.35% 36%, color-mix(in srgb, var(--line-strong) 46%, transparent) 36% 36.35%, transparent 36.35% 100%),
    repeating-linear-gradient(115deg, transparent 0 24px, color-mix(in srgb, var(--brand) 20%, transparent) 24px 42px, transparent 42px 76px),
    repeating-linear-gradient(65deg, transparent 0 30px, color-mix(in srgb, var(--blue) 18%, transparent) 30px 46px, transparent 46px 82px),
    radial-gradient(circle at 70% 34%, color-mix(in srgb, var(--blue) 16%, transparent), transparent 52%),
    linear-gradient(135deg, color-mix(in srgb, var(--panel-strong) 74%, transparent), color-mix(in srgb, var(--green-soft) 70%, transparent));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 12%, transparent),
    inset 0 0 34px color-mix(in srgb, var(--blue) 10%, transparent),
    0 30px 70px rgba(7,16,23,.10);
}
.page-title::before {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--panel-deep) 96%, transparent) 0 57%, color-mix(in srgb, var(--panel) 76%, transparent) 58% 100%),
    radial-gradient(circle at 86% 24%, var(--blue-soft), transparent 18rem),
    radial-gradient(circle at 72% 82%, var(--green-soft), transparent 20rem);
}
html[data-theme="dark"] .page-title::after {
  opacity: .36;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    inset 0 0 44px color-mix(in srgb, var(--blue) 14%, transparent),
    0 32px 74px rgba(0,0,0,.25);
}
@media (max-width: 980px) {
  .page-title::after {
    right: -5.5rem;
    width: clamp(220px, 48vw, 360px);
    height: clamp(170px, 34vw, 260px);
    opacity: .20;
  }
}
@media (max-width: 470px) {
  .page-title img,
  .theme-logo-light,
  .theme-logo-dark {
    max-width: 120px;
  }
}

/* Treadsley OS v2.2: remove hero ornament and simplify mobile navigation. */
.page-title::after {
  display: none !important;
}
.page-title::before {
  background:
    linear-gradient(120deg, color-mix(in srgb, var(--panel-deep) 97%, transparent) 0 58%, color-mix(in srgb, var(--panel) 84%, transparent) 58% 100%),
    radial-gradient(circle at 88% 18%, var(--blue-soft), transparent 18rem),
    radial-gradient(circle at 72% 88%, var(--green-soft), transparent 20rem) !important;
}

@media (max-width: 980px) {
  .site-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 3000 !important;
    padding: .55rem .65rem 0 !important;
  }
  .header-inner {
    min-height: 62px;
    border-radius: 999px;
  }
  .nav {
    position: fixed !important;
    left: .75rem !important;
    right: .75rem !important;
    top: calc(72px + env(safe-area-inset-top)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: calc(100dvh - 86px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: none;
    gap: .5rem !important;
    padding: .75rem !important;
  }
  body.nav-open .nav {
    display: flex !important;
  }
  .nav a,
  .theme-toggle {
    min-height: 52px !important;
    padding: .82rem 1rem !important;
    border-radius: 16px !important;
    white-space: normal !important;
  }
  .dropdown {
    width: 100% !important;
  }
  .dropdown > a {
    width: 100% !important;
    background: color-mix(in srgb, var(--green-soft) 70%, var(--panel)) !important;
  }
  .dropdown-arrow {
    display: none !important;
  }
  .dropdown-content {
    display: none !important;
  }
  .theme-toggle {
    text-align: left !important;
  }
  main {
    padding-top: .8rem !important;
  }
}

@media (max-width: 470px) {
  .nav {
    left: .55rem !important;
    right: .55rem !important;
    top: calc(68px + env(safe-area-inset-top)) !important;
  }
}
/* Treadsley OS v2.3: mobile dark-mode access */
.mobile-header-actions { display: contents; }
.mobile-theme-toggle { display: none; }

@media (max-width: 980px) {
  .mobile-header-actions {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-left: auto;
  }
  .mobile-theme-toggle {
    display: inline-flex !important;
    width: auto !important;
    min-height: 42px !important;
    padding: .55rem .82rem !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
    line-height: 1 !important;
  }
  .nav-toggle {
    margin-left: 0 !important;
  }
  .nav {
    background: color-mix(in srgb, var(--panel-strong) 94%, transparent) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow) !important;
  }
  html[data-theme="dark"] .nav {
    background: linear-gradient(145deg, rgba(9,20,27,.98), rgba(12,31,38,.96)) !important;
    border-color: rgba(140,231,173,.18) !important;
  }
  html[data-theme="dark"] .nav a,
  html[data-theme="dark"] .nav .theme-toggle {
    background: rgba(255,255,255,.045) !important;
    border-color: rgba(255,255,255,.12) !important;
    color: var(--text) !important;
  }
  html[data-theme="dark"] .nav a:hover,
  html[data-theme="dark"] .nav .theme-toggle:hover {
    background: rgba(140,231,173,.12) !important;
    border-color: rgba(140,231,173,.28) !important;
  }
}

@media (max-width: 390px) {
  .mobile-theme-toggle {
    padding-inline: .66rem !important;
    font-size: .82rem !important;
  }
}

/* Treadsley OS v2.4: fix mobile theme button visibility and make menu panel readable. */
@media (max-width: 980px) {
  /* The header theme toggle must not inherit the full-width nav button styling. */
  .header-inner > .mobile-header-actions > .mobile-theme-toggle {
    display: inline-flex !important;
    width: auto !important;
    min-width: 112px !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: .55rem .82rem !important;
    border-radius: 999px !important;
    font-size: .9rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    color: #071017 !important;
    background: linear-gradient(135deg, #8ce7ad, #5bd184) !important;
    border: 1px solid rgba(19,130,74,.35) !important;
    box-shadow: 0 10px 24px rgba(7,16,23,.10) !important;
    text-align: center !important;
    white-space: nowrap !important;
  }
  html[data-theme="light"] .header-inner > .mobile-header-actions > .mobile-theme-toggle {
    color: #071017 !important;
    background: rgba(255,255,255,.92) !important;
    border-color: rgba(19,130,74,.42) !important;
  }
  html[data-theme="dark"] .header-inner > .mobile-header-actions > .mobile-theme-toggle {
    color: #061015 !important;
    background: linear-gradient(135deg, #8ce7ad, #5bd184) !important;
    border-color: rgba(140,231,173,.5) !important;
  }

  /* Keep the opened mobile menu simple, opaque, and theme-correct. */
  .nav {
    background: #fbfcfa !important;
    color: var(--text) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  html[data-theme="dark"] .nav {
    background: #08141a !important;
    color: var(--text) !important;
  }
  .nav a,
  .nav .theme-toggle {
    color: var(--text) !important;
    background: color-mix(in srgb, var(--panel-strong) 92%, transparent) !important;
  }
  .nav > .theme-toggle {
    display: none !important;
  }
}

@media (max-width: 390px) {
  .header-inner > .mobile-header-actions > .mobile-theme-toggle {
    min-width: 96px !important;
    padding-inline: .62rem !important;
    font-size: .82rem !important;
  }
}

/* Treadsley OS v5.0: true compact page introduction system.
   This intentionally removes the fake hero treatment from all standard pages.
   Header logo establishes identity. Page intro establishes purpose. */
main {
  padding-top: clamp(1.2rem, 2.5vw, 2.2rem) !important;
}
.page-stack {
  gap: clamp(.95rem, 1.7vw, 1.35rem) !important;
}
.page-title {
  min-height: 0 !important;
  margin: clamp(1.4rem, 3.2vw, 3.2rem) auto clamp(.7rem, 1.5vw, 1.15rem) !important;
  padding: 0 0 clamp(1.25rem, 2.6vw, 2.2rem) !important;
  display: block !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  overflow: visible !important;
}
.page-title::before,
.page-title::after {
  display: none !important;
  content: none !important;
}
.page-title img,
.page-title .theme-logo-light,
.page-title .theme-logo-dark {
  display: none !important;
}
.page-title h1 {
  max-width: 980px !important;
  margin: 0 !important;
  font-size: clamp(2.55rem, 6.2vw, 5.25rem) !important;
  line-height: .96 !important;
  letter-spacing: -.078em !important;
  text-wrap: balance !important;
}
.page-title h1::before {
  content: "";
  display: block;
  width: clamp(58px, 8vw, 94px);
  height: 4px;
  margin: 0 0 clamp(1rem, 2vw, 1.45rem);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--blue));
}
.page-title p {
  max-width: 760px !important;
  margin: clamp(.82rem, 1.6vw, 1.1rem) 0 0 !important;
  color: var(--muted) !important;
  font-size: clamp(1rem, 1.45vw, 1.18rem) !important;
  line-height: 1.48 !important;
}
.home-intro h1 {
  max-width: 1050px !important;
}
.home-intro p {
  max-width: 780px !important;
}
.card,
.container,
.footer-inner {
  border-radius: clamp(18px, 2.1vw, 26px) !important;
}
.content-card,
.tool-card,
.results-card,
.card {
  position: relative;
}
.content-card::before,
.tool-card::before,
.results-card::before {
  content: "";
  position: absolute;
  left: clamp(1rem, 2vw, 1.4rem);
  right: clamp(1rem, 2vw, 1.4rem);
  top: 0;
  height: 3px;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(90deg, var(--brand), var(--accent), var(--blue));
  opacity: .74;
}
.site-header {
  padding-top: max(.8rem, env(safe-area-inset-top)) !important;
}
.header-inner {
  min-height: 66px !important;
}
.brand-logo {
  width: 42px !important;
  height: 42px !important;
}
.brand-text {
  font-size: 1.18rem !important;
}
.cookie-banner {
  width: min(390px, calc(100vw - 1.5rem)) !important;
  padding: .9rem !important;
  border-radius: 18px !important;
}
.cookie-banner p {
  font-size: .88rem !important;
}
.cookie-banner-actions {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: .55rem !important;
}
.cookie-banner .button {
  width: 100% !important;
  min-height: 40px !important;
  padding: .55rem .72rem !important;
  font-size: .88rem !important;
}
@media (min-width: 981px) {
  .standard-page .page-title,
  main > .page-title:first-child {
    padding-top: clamp(.4rem, 1.5vw, 1.2rem) !important;
  }
}
@media (max-width: 980px) {
  .site-header {
    padding: max(.55rem, env(safe-area-inset-top)) .7rem 0 !important;
  }
  .header-inner {
    min-height: 60px !important;
    padding: .48rem .55rem !important;
  }
  .brand-logo {
    width: 40px !important;
    height: 40px !important;
  }
  .brand-text {
    display: inline !important;
    font-size: 1.05rem !important;
  }
  main {
    padding: .9rem .9rem 3.4rem !important;
  }
  .page-title {
    margin: 1.15rem 0 .35rem !important;
    padding-bottom: 1rem !important;
  }
  .page-title h1 {
    font-size: clamp(2.15rem, 11.2vw, 3.9rem) !important;
    letter-spacing: -.072em !important;
  }
  .page-title p {
    font-size: 1rem !important;
  }
  .nav {
    top: calc(70px + env(safe-area-inset-top)) !important;
    border-radius: 20px !important;
    background: var(--panel-strong) !important;
  }
  html[data-theme="dark"] .nav {
    background: #08141a !important;
  }
  .nav a,
  .nav .theme-toggle {
    font-size: 1.04rem !important;
  }
  .header-inner > .mobile-header-actions > .mobile-theme-toggle {
    color: #071017 !important;
    background: #fff !important;
    border-color: rgba(19,130,74,.45) !important;
  }
  html[data-theme="dark"] .header-inner > .mobile-header-actions > .mobile-theme-toggle {
    color: #061015 !important;
    background: linear-gradient(135deg, #8ce7ad, #5bd184) !important;
  }
}
@media (max-width: 560px) {
  .brand-text {
    display: none !important;
  }
  .mobile-theme-toggle {
    min-width: 108px !important;
  }
  .page-title h1::before {
    width: 64px;
    height: 3px;
    margin-bottom: .85rem;
  }
  .cookie-banner {
    left: .75rem !important;
    right: .75rem !important;
    bottom: .75rem !important;
    width: auto !important;
  }
  .cookie-banner-actions {
    grid-template-columns: 1fr !important;
  }
}


/* Treadsley OS v5.1: centered identity intro.
   Restores the page logo, removes the small color rule, and tightens the homepage heading. */
.page-title {
  text-align: center !important;
  max-width: 1040px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-top: clamp(1.2rem, 2.4vw, 2.4rem) !important;
}
.page-title img.theme-logo-light,
.page-title .theme-logo-light,
.page-title img.theme-logo-dark,
.page-title .theme-logo-dark,
.page-title > img {
  max-width: clamp(118px, 12vw, 150px) !important;
  margin: 0 auto clamp(.85rem, 1.6vw, 1.15rem) !important;
  filter: drop-shadow(0 10px 24px rgba(7,16,23,.16)) !important;
}
.page-title img.theme-logo-light,
.page-title .theme-logo-light,
.page-title > img.theme-logo-light {
  display: block !important;
}
html[data-theme="dark"] .page-title img.theme-logo-light,
html[data-theme="dark"] .page-title .theme-logo-light,
html[data-theme="dark"] .page-title > img.theme-logo-light {
  display: none !important;
}
.page-title img.theme-logo-dark,
.page-title .theme-logo-dark,
.page-title > img.theme-logo-dark {
  display: none !important;
}
html[data-theme="dark"] .page-title img.theme-logo-dark,
html[data-theme="dark"] .page-title .theme-logo-dark,
html[data-theme="dark"] .page-title > img.theme-logo-dark {
  display: block !important;
}
.page-title h1 {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 940px !important;
  font-size: clamp(2.35rem, 5.15vw, 4.55rem) !important;
  line-height: 1.02 !important;
  letter-spacing: -.064em !important;
}
.page-title h1::before {
  display: none !important;
  content: none !important;
}
.page-title p {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 710px !important;
  font-size: clamp(1rem, 1.35vw, 1.14rem) !important;
  line-height: 1.55 !important;
}
.home-intro h1 {
  max-width: 920px !important;
}
.home-intro p {
  max-width: 700px !important;
}
@media (max-width: 980px) {
  .page-title {
    padding-top: 1.2rem !important;
    padding-bottom: 1rem !important;
    text-align: center !important;
  }
  .page-title img.theme-logo-light,
  .page-title .theme-logo-light,
  .page-title img.theme-logo-dark,
  .page-title .theme-logo-dark,
  .page-title > img {
    max-width: 118px !important;
    margin-bottom: .75rem !important;
  }
  .page-title h1 {
    font-size: clamp(2.05rem, 10vw, 3.45rem) !important;
    line-height: 1.04 !important;
    letter-spacing: -.06em !important;
  }
}
@media (max-width: 560px) {
  .page-title img.theme-logo-light,
  .page-title .theme-logo-light,
  .page-title img.theme-logo-dark,
  .page-title .theme-logo-dark,
  .page-title > img {
    max-width: 104px !important;
  }
  .page-title h1 {
    font-size: clamp(2rem, 11.8vw, 3.1rem) !important;
  }
}


/* Treadsley OS v5.2: unified tool workspace widths.
   Matches converter/tool input panels to the Tire Wear Rate Calculator visual width without changing tool logic. */
:root {
  --tool-panel-width: 760px;
}

/* Primary calculator/input panels */
main#main.page-stack > .converter-box,
main#main.page-stack > .pressure-converter-box,
main#main.page-stack > .wear-calculator-box,
main#main.page-stack > .tool-card,
main#main.page-stack > .tool-form,
main#main.page-stack > section.card.tool-form,
main#main.page-stack > section.card.converter-box,
main#main.page-stack > section.card.pressure-converter-box,
main#main.page-stack > section.card.wear-calculator-box,
main#main.page-stack > section.card.tool-card {
  width: min(100%, var(--tool-panel-width)) !important;
  max-width: var(--tool-panel-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Results and share panels should line up with their tool input panel unless they are multi-report/full-width panels. */
main#main.page-stack > .wear-results,
main#main.page-stack > #wearResults,
main#main.page-stack > #wearShareBox,
main#main.page-stack > #averageDetails,
main#main.page-stack > #dot-results,
main#main.page-stack > .results-card:not(#multi-report-results),
main#main.page-stack > section.card.results-card:not(#multi-report-results) {
  width: min(100%, var(--tool-panel-width)) !important;
  max-width: var(--tool-panel-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Tool-specific notes below a calculator should not stretch wider than the calculator they belong to. */
main#main.page-stack > .converter-box + .reference-note,
main#main.page-stack > .pressure-converter-box + .reference-note,
main#main.page-stack > .wear-calculator-box ~ .reference-note,
main#main.page-stack > .tool-card ~ .reference-note,
main#main.page-stack > .tool-form ~ .disclaimer,
main#main.page-stack > .tool-form ~ .reference-note {
  width: min(100%, var(--tool-panel-width)) !important;
  max-width: var(--tool-panel-width) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Keep complex report builders and broad educational/FAQ sections full content width. */
main#main.page-stack > .multi-report-form,
main#main.page-stack > #multi-report-results,
main#main.page-stack > .faq-section,
main#main.page-stack > .related-tools,
main#main.page-stack > .knowledge-grid,
main#main.page-stack > .grid-2 {
  max-width: var(--max) !important;
}

/* Standardize simple converter internals so narrow tools do not visually collapse. */
.converter-box .converter-row,
.pressure-converter-box .converter-row {
  width: 100% !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.converter-box .form-actions,
.pressure-converter-box .form-actions {
  justify-content: center !important;
}

@media (max-width: 780px) {
  :root {
    --tool-panel-width: 100%;
  }
  main#main.page-stack > .converter-box,
  main#main.page-stack > .pressure-converter-box,
  main#main.page-stack > .wear-calculator-box,
  main#main.page-stack > .tool-card,
  main#main.page-stack > .tool-form,
  main#main.page-stack > .results-card,
  main#main.page-stack > .reference-note,
  main#main.page-stack > .disclaimer {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Treadsley OS v5.3: repair simple converter layouts after workspace-width test.
   Keep the Tire Wear calculator width, but return simple converters to compact one-column tool panels. */
main#main.page-stack > .converter-box,
main#main.page-stack > .pressure-converter-box,
main#main.page-stack > section.card.converter-box,
main#main.page-stack > section.card.pressure-converter-box {
  width: min(100%, 560px) !important;
  max-width: 560px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.converter-box .converter-row,
.pressure-converter-box .converter-row {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: .95rem !important;
  width: 100% !important;
  max-width: 360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-items: center !important;
}

.converter-box .form-group,
.pressure-converter-box .form-group {
  width: 100% !important;
  max-width: 360px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.converter-box input,
.converter-box select,
.pressure-converter-box input,
.pressure-converter-box select {
  width: 100% !important;
  max-width: 360px !important;
  box-sizing: border-box !important;
}

.converter-box input,
.pressure-converter-box input {
  max-width: 260px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.converter-box .form-actions,
.pressure-converter-box .form-actions {
  justify-content: center !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-top: 1.2rem !important;
}

.converter-box .button,
.converter-box button,
.pressure-converter-box .button,
.pressure-converter-box button {
  min-width: 112px !important;
}

@media (max-width: 640px) {
  main#main.page-stack > .converter-box,
  main#main.page-stack > .pressure-converter-box,
  main#main.page-stack > section.card.converter-box,
  main#main.page-stack > section.card.pressure-converter-box {
    width: 100% !important;
    max-width: 100% !important;
  }
  .converter-box .converter-row,
  .pressure-converter-box .converter-row,
  .converter-box .form-group,
  .pressure-converter-box .form-group,
  .converter-box input,
  .converter-box select,
  .pressure-converter-box input,
  .pressure-converter-box select {
    max-width: 100% !important;
  }
  .converter-box .form-actions,
  .pressure-converter-box .form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .converter-box .button,
  .converter-box button,
  .pressure-converter-box .button,
  .pressure-converter-box button {
    width: 100% !important;
  }
}

/* Treadsley OS v5.7: Pamuci Regular page-title treatment.
   Uses Pamuci only for primary page/H1 introductions. Body, tools, forms, cards, and nav stay on the readable system font. */
@font-face {
  font-family: "Pamuci";
  src: url("/assets/fonts/pamuci/Pamuci-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

.page-title h1,
.home-intro h1 {
  font-family: "Pamuci", var(--font), Arial, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: -0.018em !important;
  line-height: 1.04 !important;
}

@media (max-width: 980px) {
  .page-title h1,
  .home-intro h1 {
    letter-spacing: -0.014em !important;
    line-height: 1.06 !important;
  }
}


/* Treadsley v5.8: logo-only main navigation brand */
.brand {
  gap: 0 !important;
}
.brand-text {
  display: none !important;
}
.header-inner .brand-logo {
  width: 58px !important;
  height: 58px !important;
  object-fit: contain;
}
@media (max-width: 980px) {
  .header-inner .brand-logo {
    width: 48px !important;
    height: 48px !important;
  }
}
@media (max-width: 560px) {
  .header-inner .brand-logo {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Treadsley v5.9: dark-mode contrast fix for secondary/outline buttons.
   Keeps light-mode buttons unchanged while ensuring dark-mode secondary CTA text is readable. */
html[data-theme="dark"] .button.button-secondary,
html[data-theme="dark"] button.button.button-secondary,
html[data-theme="dark"] a.button.button-secondary,
html[data-theme="dark"] .button.secondary-button,
html[data-theme="dark"] button.button.secondary-button,
html[data-theme="dark"] a.button.secondary-button {
  background: color-mix(in srgb, var(--panel-strong) 88%, #000 12%) !important;
  color: var(--text) !important;
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-tight) !important;
}

html[data-theme="dark"] .button.button-secondary:hover,
html[data-theme="dark"] button.button.button-secondary:hover,
html[data-theme="dark"] a.button.button-secondary:hover,
html[data-theme="dark"] .button.secondary-button:hover,
html[data-theme="dark"] button.button.secondary-button:hover,
html[data-theme="dark"] a.button.secondary-button:hover,
html[data-theme="dark"] .button.button-secondary:focus-visible,
html[data-theme="dark"] button.button.button-secondary:focus-visible,
html[data-theme="dark"] a.button.button-secondary:focus-visible,
html[data-theme="dark"] .button.secondary-button:focus-visible,
html[data-theme="dark"] button.button.secondary-button:focus-visible,
html[data-theme="dark"] a.button.secondary-button:focus-visible {
  background: color-mix(in srgb, var(--panel-strong) 78%, var(--brand) 12%) !important;
  color: var(--text) !important;
  border-color: color-mix(in srgb, var(--brand) 44%, var(--line-strong)) !important;
}

html[data-theme="dark"] .button.button-secondary *,
html[data-theme="dark"] .button.secondary-button * {
  color: inherit !important;
}

html[data-theme="dark"] .converter-clear {
  color: var(--text) !important;
}

/* Treadsley OS v6.1: unified select controls.
   Native select controls were still showing older transparent/default styling on
   converter and multi-report pages. This keeps the existing tool logic intact
   while making closed select fields match the current Treadsley form system in
   both light and dark modes. */
select,
#multiTireForm select,
.converter-box select,
.pressure-converter-box select,
.tool-form select,
.static-form select {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  min-height: 56px !important;
  padding: .88rem 3rem .88rem 1rem !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: 18px !important;
  background-color: color-mix(in srgb, var(--panel-deep) 92%, var(--page)) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%235a6972' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  background-size: 18px 18px !important;
  color: var(--text) !important;
  font-weight: 850 !important;
  line-height: 1.15 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36), 0 10px 24px rgba(7,16,23,.07) !important;
}

html[data-theme="dark"] select,
html[data-theme="dark"] #multiTireForm select,
html[data-theme="dark"] .converter-box select,
html[data-theme="dark"] .pressure-converter-box select,
html[data-theme="dark"] .tool-form select,
html[data-theme="dark"] .static-form select {
  background-color: color-mix(in srgb, var(--panel-deep) 92%, #000) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23b5c5ce' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 12px 28px rgba(0,0,0,.28) !important;
}

select:hover,
#multiTireForm select:hover,
.converter-box select:hover,
.pressure-converter-box select:hover,
.tool-form select:hover,
.static-form select:hover {
  border-color: color-mix(in srgb, var(--brand) 46%, var(--line-strong)) !important;
}

select:focus,
#multiTireForm select:focus,
.converter-box select:focus,
.pressure-converter-box select:focus,
.tool-form select:focus,
.static-form select:focus {
  border-color: color-mix(in srgb, var(--brand) 65%, var(--line-strong)) !important;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 16%, transparent), 0 12px 28px rgba(7,16,23,.08) !important;
  outline: none !important;
}

select:disabled {
  cursor: not-allowed !important;
  opacity: .68 !important;
}

select option {
  background: #ffffff;
  color: #0b1720;
}

html[data-theme="dark"] select option {
  background: #0e1c24;
  color: #edf7f4;
}