/* =============================================================
   NewBatteries – main stylesheet
   Design tokens → layout → components → utilities → pages
   ============================================================= */

/* ─── 1. DESIGN TOKENS (CSS custom properties) ─────────────── */
:root {
  --energy-red: #FF5C62;
  --energy-orange: #FF8A34;
  --energy-amber: #FFC247;
  --energy-green: #A8F238;
  --energy-cyan: #45DCE8;
  --energy-blue: #5F8CFF;
  --energy-violet: #A56EFF;
  --void: #070908;
  --carbon: #101412;
  --panel: #161B19;
  --battery-white: #F5F7F5;
  --muted-text: #A5ADA8;

  /* Palette */
  --color-bg:           #ffffff;
  --color-surface:      #f4f5f3;
  --color-surface-alt:  #eaebe8;
  --color-dark:         #0a0d0c;
  --color-dark-mid:     #1a201e;
  --color-accent:       #e05c00;
  --color-accent-dark:  #b34800;
  --color-accent-light: #fff0e6;
  --color-text:         #1a201e;
  --color-text-muted:   #4f5855;
  --color-border:       #c8cdc9;
  --color-focus:        #ffbf47;
  --color-error:        #c0392b;
  --color-error-bg:     #fdf2f0;
  --color-error-border: #c0392b;
  --color-success:      #1a7a3b;
  --color-success-bg:   #edf7f1;

  /* Spacing scale */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "Cascadia Code", "Source Code Pro", monospace;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.5rem;
  --line-height:       1.65;
  --line-height-tight: 1.25;

  /* Border-radius */
  --radius-sm: 0.2rem;
  --radius:    0.5rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm: 0 1px 3px 0 rgba(0,0,0,.08), 0 1px 2px 0 rgba(0,0,0,.04);
  --shadow:    0 3px 10px 0 rgba(0,0,0,.10), 0 1px 4px 0 rgba(0,0,0,.06);
  --shadow-lg: 0 10px 30px 0 rgba(0,0,0,.14), 0 4px 10px 0 rgba(0,0,0,.08);
  --shadow-inner: inset 0 1px 3px rgba(0,0,0,.08);

  /* Transitions */
  --ease: 150ms ease;
  --ease-slow: 250ms ease;

  /* Layout */
  --max-width:     1160px;
  --content-width: 720px;
  --form-width:    640px;
}

/* ─── 2. RESET / BASE ───────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--line-height);
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

img, svg, video { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

h1, h2, h3, h4, h5, h6 {
  line-height: var(--line-height-tight);
  font-weight: 700;
  color: var(--color-dark);
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }

p + p { margin-top: var(--sp-4); }

ul, ol { padding-left: var(--sp-6); }

/* ─── 3. LAYOUT UTILITIES ───────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.section {
  padding-block: var(--sp-16);
}

.section--sm {
  padding-block: var(--sp-10);
}

/* ─── 4. TYPOGRAPHY UTILITIES ───────────────────────────────── */
.eyebrow {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-3);
}

.lead {
  font-size: var(--text-lg);
  color: var(--color-text-muted);
  line-height: 1.7;
}

.small, small { font-size: var(--text-sm); }

.text-muted { color: var(--color-text-muted); }

.visually-hidden {
  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;
}

/* ─── 5. SKIP LINK ──────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -9999px;
  left: var(--sp-4);
  z-index: 1000;
  background: var(--color-focus);
  color: var(--color-dark);
  padding: var(--sp-3) var(--sp-5);
  font-weight: 700;
  border-radius: var(--radius);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--sp-4);
}

/* ─── 6. SITE HEADER ────────────────────────────────────────── */
.site-header {
  background: var(--color-dark);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.nav-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
  min-height: 64px;
}

.wordmark {
  font-size: var(--text-xl);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  text-decoration: none;
  flex-shrink: 0;
}

.wordmark:hover { color: var(--color-focus); }

.primary-nav {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  margin-left: auto;
  flex-wrap: wrap;
}

.primary-nav a {
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  padding: var(--sp-2) 0;
  border-bottom: 2px solid transparent;
  transition: color var(--ease), border-color var(--ease);
}

.primary-nav a:hover,
.primary-nav a[aria-current="page"] {
  color: #fff;
  border-bottom-color: var(--color-accent);
}

.primary-nav a.btn {
  border-bottom: none;
  padding: var(--sp-2) var(--sp-4);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--sp-2);
  margin-left: auto;
  color: #fff;
}

.nav-toggle span:not(.visually-hidden) {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;
  border-radius: 1px;
  transition: transform var(--ease), opacity var(--ease);
}

/* ─── 7. BUTTONS ────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-6);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1;
  border: 2px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn-primary:hover {
  background: var(--color-accent-dark);
  border-color: var(--color-accent-dark);
}

.btn-secondary {
  background: transparent;
  color: var(--color-dark);
  border-color: var(--color-dark);
}

.btn-secondary:hover {
  background: var(--color-dark);
  color: #fff;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: var(--color-border);
}

.btn-ghost:hover {
  background: var(--color-surface);
  color: var(--color-text);
}

.btn-sm {
  font-size: var(--text-sm);
  padding: var(--sp-2) var(--sp-4);
}

.btn-lg {
  font-size: var(--text-lg);
  padding: var(--sp-4) var(--sp-8);
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ─── 8. HERO ───────────────────────────────────────────────── */
.hero {
  background: var(--color-dark);
  color: #fff;
  overflow: hidden;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
  align-items: center;
}

.hero h1 {
  color: #fff;
  font-size: clamp(2rem, 5vw, var(--text-4xl));
  margin-bottom: var(--sp-5);
}

.hero .lead {
  color: rgba(255,255,255,.75);
  margin-bottom: var(--sp-8);
}

.hero-actions {
  display: flex;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.hero .btn-secondary {
  color: rgba(255,255,255,.85);
  border-color: rgba(255,255,255,.4);
}

.hero .btn-secondary:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.7);
  color: #fff;
}

.hero-mock {
  background: var(--color-dark-mid);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--radius-lg);
  padding: var(--sp-8);
}

.mock-card h2 {
  color: #fff;
  font-size: var(--text-lg);
  margin-bottom: var(--sp-5);
}

.mock-card ul {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.mock-card li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  font-size: var(--text-sm);
  color: rgba(255,255,255,.75);
}

.dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  flex-shrink: 0;
}

.dot.ok      { background: var(--color-success); }
.dot.pending { background: var(--color-accent); }
.dot.error   { background: var(--color-error); }

.mock-progress {
  height: 6px;
  background: rgba(255,255,255,.12);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.mock-progress span {
  display: block;
  width: 72%;
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
}

/* ─── 9. CARDS GRID (index.html) ────────────────────────────── */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-4);
}

/* ─── 10. PANEL / CARD ──────────────────────────────────────── */
.panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-sm);
}

.panel h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--sp-3);
}

/* ─── 11. STEPS GRID ────────────────────────────────────────── */
.steps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--sp-6);
  counter-reset: steps;
}

/* ─── 12. CHIP / BADGE ──────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  background: var(--color-accent-light);
  color: var(--color-accent-dark);
  border: 1px solid rgba(224,92,0,.2);
  border-radius: var(--radius-full);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--text-sm);
  font-weight: 600;
  white-space: nowrap;
}

.pathways {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
}

/* ─── 13. TRUST LIST ────────────────────────────────────────── */
.trust-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-4);
}

.trust-list li {
  padding: var(--sp-4);
  background: var(--color-surface);
  border-radius: var(--radius);
  font-weight: 600;
  border-left: 4px solid var(--color-accent);
}

/* ─── 14. CTA SECTION ───────────────────────────────────────── */
.cta {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  text-align: center;
}

.cta h2 { margin-bottom: var(--sp-4); }
.cta p  { margin-bottom: var(--sp-6); color: var(--color-text-muted); }

/* ─── 15. FAQ LIST ──────────────────────────────────────────── */
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: var(--content-width);
}

.faq-list details {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.faq-list summary {
  padding: var(--sp-4) var(--sp-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-list summary::-webkit-details-marker { display: none; }

.faq-list summary::after {
  content: "+";
  font-size: var(--text-xl);
  font-weight: 300;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.faq-list details[open] summary::after { content: "−"; }

.faq-list details p {
  padding: 0 var(--sp-5) var(--sp-4);
  color: var(--color-text-muted);
}

/* ─── 16. SITE FOOTER ───────────────────────────────────────── */
.site-footer {
  background: var(--color-dark);
  color: rgba(255,255,255,.7);
  padding-block: var(--sp-10);
  margin-top: auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-8);
  align-items: start;
  padding-bottom: var(--sp-8);
  border-bottom: 1px solid rgba(255,255,255,.1);
  margin-bottom: var(--sp-6);
}

.site-footer .wordmark {
  font-size: var(--text-xl);
  margin-bottom: var(--sp-2);
}

.site-footer nav {
  display: flex;
  gap: var(--sp-5);
  flex-wrap: wrap;
}

.site-footer nav a {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.65);
  text-decoration: none;
}

.site-footer nav a:hover { color: #fff; }

.site-footer .small { color: rgba(255,255,255,.45); }

/* ─── 17. FORM FOUNDATIONS ──────────────────────────────────── */
.form-group {
  margin-bottom: var(--sp-6);
}

label,
.form-label {
  display: block;
  font-weight: 600;
  margin-bottom: var(--sp-2);
  color: var(--color-text);
}

.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
  display: block;
}

.form-control {
  display: block;
  width: 100%;
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--color-text);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--ease), box-shadow var(--ease);
  line-height: 1.5;
}

.form-control:focus {
  outline: 3px solid var(--color-focus);
  outline-offset: 1px;
  border-color: var(--color-dark);
}

.form-control.has-error {
  border-color: var(--color-error);
  background: var(--color-error-bg);
}

.form-control::placeholder { color: var(--color-text-muted); }

textarea.form-control { resize: vertical; min-height: 120px; }

/* ─── 18. FIELDSET / LEGEND ─────────────────────────────────── */
fieldset {
  border: none;
  padding: 0;
  margin: 0;
}

legend {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-dark);
  margin-bottom: var(--sp-3);
  float: left;
  width: 100%;
}

legend + * { clear: left; }

/* ─── 19. RADIO CARDS ───────────────────────────────────────── */
.radio-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-top: var(--sp-4);
}

.radio-card {
  position: relative;
}

.radio-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.radio-card label {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  font-weight: 600;
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
  min-height: 80px;
}

.radio-card label .card-icon {
  font-size: 1.75rem;
  line-height: 1;
}

.radio-card label .card-title {
  font-size: var(--text-base);
  font-weight: 700;
}

.radio-card label .card-desc {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
}

.radio-card input[type="radio"]:checked + label {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
  box-shadow: 0 0 0 3px rgba(224,92,0,.15);
}

.radio-card input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.radio-card label:hover {
  border-color: var(--color-dark);
  background: var(--color-surface);
}

/* ─── 20. RADIO LIST (inline options) ───────────────────────── */
.radio-list {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-top: var(--sp-4);
}

.radio-list li {
  position: relative;
}

.radio-list input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.radio-list label {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
  transition: border-color var(--ease), background var(--ease);
}

.radio-list label::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 2px solid var(--color-border);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  margin-top: 1px;
  transition: border-color var(--ease), background var(--ease);
}

.radio-list input[type="radio"]:checked + label {
  border-color: var(--color-accent);
  background: var(--color-accent-light);
}

.radio-list input[type="radio"]:checked + label::before {
  border-color: var(--color-accent);
  background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}

.radio-list input[type="radio"]:focus-visible + label {
  outline: 3px solid var(--color-focus);
  outline-offset: 2px;
}

.radio-list label:hover {
  border-color: var(--color-dark);
}

.radio-list .option-desc {
  font-size: var(--text-sm);
  font-weight: 400;
  color: var(--color-text-muted);
  display: block;
  margin-top: var(--sp-1);
}

.optional-block {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-4);
  background: var(--color-surface);
}

.optional-block summary {
  cursor: pointer;
  font-weight: 600;
}

/* ─── 21. ERROR COMPONENTS ──────────────────────────────────── */
.error-summary {
  background: var(--color-error-bg);
  border: 3px solid var(--color-error);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-8);
}

.error-summary h2 {
  font-size: var(--text-xl);
  color: var(--color-error);
  margin-bottom: var(--sp-3);
}

.error-summary ul {
  padding-left: var(--sp-5);
}

.error-summary li { margin-bottom: var(--sp-2); }

.error-summary a {
  color: var(--color-error);
  font-weight: 600;
}

.error-summary[hidden] {
  display: none !important;
}

#battIdResult[hidden],
#battIdRecognised[hidden],
#battIdUnknown[hidden] {
  display: none !important;
}

.field-error {
  display: block;
  color: var(--color-error);
  font-size: var(--text-sm);
  font-weight: 600;
  margin-top: var(--sp-2);
}

.field-error::before {
  content: "! ";
}

/* ─── 22. PROGRESS INDICATOR ────────────────────────────────── */
.progress-bar-wrap {
  margin-bottom: var(--sp-8);
}

.progress-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
  display: flex;
  justify-content: space-between;
}

.progress-track {
  height: 8px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-full);
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--color-accent);
  border-radius: var(--radius-full);
  transition: width var(--ease-slow);
}

/* ─── 23. FINDER LAYOUT ─────────────────────────────────────── */
.finder-page {
  background: var(--color-surface);
  min-height: 100vh;
}

.finder-header {
  background: var(--color-dark);
  padding: var(--sp-4) 0;
}

.finder-header .container {
  display: flex;
  align-items: center;
  gap: var(--sp-6);
}

.finder-header .wordmark {
  font-size: var(--text-lg);
}

.finder-header a.back-home {
  font-size: var(--text-sm);
  color: rgba(255,255,255,.65);
  text-decoration: none;
  margin-left: auto;
}

.finder-header a.back-home:hover { color: #fff; }

.finder-main {
  padding: var(--sp-10) 0 var(--sp-16);
}

.finder-card {
  background: var(--color-bg);
  border-radius: var(--radius-xl);
  padding: var(--sp-10) var(--sp-10);
  box-shadow: var(--shadow);
  max-width: var(--form-width);
  margin: 0 auto;
}

.finder-card h1 {
  font-size: var(--text-3xl);
  margin-bottom: var(--sp-3);
}

.finder-card .step-hint {
  color: var(--color-text-muted);
  margin-bottom: var(--sp-8);
}

/* ─── 24. FINDER STEP ACTIONS ───────────────────────────────── */
.step-actions {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--color-border);
  flex-wrap: wrap;
}

.btn-back {
  background: none;
  border: none;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: 600;
  cursor: pointer;
  padding: var(--sp-2) 0;
  font-family: var(--font-sans);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn-back:hover { color: var(--color-text); }

/* ─── 25. REVIEW PAGE ───────────────────────────────────────── */
.review-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--sp-6);
}

.review-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--sp-4) var(--sp-6);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.review-section-header h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0;
}

.review-section-header .change-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-accent-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.review-dl {
  padding: var(--sp-4) var(--sp-6);
}

.review-dl dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--sp-1);
}

.review-dl dd {
  font-size: var(--text-base);
  color: var(--color-text);
  margin-left: 0;
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--color-border);
}

.review-dl dd:last-child { border-bottom: none; padding-bottom: 0; }

/* ─── 26. PRELIMINARY RESULT ─────────────────────────────────── */
.result-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-5);
  background: var(--color-surface);
}

.result-section h2 {
  margin-top: 0;
  margin-bottom: var(--sp-3);
  font-size: var(--text-xl);
}

.result-list {
  padding-left: var(--sp-5);
  margin: 0;
}

.result-list li {
  margin-bottom: var(--sp-2);
}

.result-dl {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: var(--sp-2) var(--sp-4);
  margin: 0;
}

.result-dl dt {
  font-weight: 600;
  color: var(--color-text-muted);
}

.result-dl dd {
  margin: 0;
}

.result-muted {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.confidence-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: .04em;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  margin-bottom: var(--sp-2);
}

/* ─── 26. CONFIRMATION PAGE ─────────────────────────────────── */
.confirm-banner {
  background: var(--color-success-bg);
  border: 2px solid var(--color-success);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.confirm-banner h2 {
  color: var(--color-success);
  font-size: var(--text-2xl);
  margin-bottom: var(--sp-2);
}

.prototype-notice {
  background: #fff8e1;
  border: 2px solid #f0c040;
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-top: var(--sp-8);
  font-size: var(--text-sm);
}

.prototype-notice strong {
  display: block;
  margin-bottom: var(--sp-2);
  font-size: var(--text-base);
}

/* ─── 27. PHOTO GUIDANCE BOX ────────────────────────────────── */
.photo-guide {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}

.photo-guide h3 {
  font-size: var(--text-lg);
  margin-bottom: var(--sp-3);
}

.photo-guide ul {
  padding-left: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.photo-guide li { font-size: var(--text-sm); }

/* ─── 28. SUPPORTING PAGES ──────────────────────────────────── */
.page-hero {
  background: var(--color-dark);
  color: #fff;
  padding-block: var(--sp-16);
}

.page-hero h1 {
  color: #fff;
  font-size: var(--text-4xl);
  margin-bottom: var(--sp-4);
}

.page-hero .lead {
  color: rgba(255,255,255,.7);
  max-width: 600px;
}

.content-prose {
  max-width: var(--content-width);
  margin: 0 auto;
}

.content-prose h2 { margin-top: var(--sp-10); margin-bottom: var(--sp-4); }
.content-prose h3 { margin-top: var(--sp-8); margin-bottom: var(--sp-3); }
.content-prose p  { margin-bottom: var(--sp-4); color: var(--color-text-muted); }
.content-prose ul { margin-bottom: var(--sp-4); padding-left: var(--sp-6); }
.content-prose li { margin-bottom: var(--sp-2); color: var(--color-text-muted); }

/* ─── 29. INLINE HELP / DISCLOSURE ─────────────────────────── */
.help-toggle {
  font-size: var(--text-sm);
  color: var(--color-accent-dark);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: var(--sp-1) 0;
  margin-top: var(--sp-1);
  display: inline-block;
}

.help-panel {
  background: var(--color-surface);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: var(--sp-4) var(--sp-5);
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: none;
}

.help-panel.is-open { display: block; }

/* ─── 30. NOTICE / ALERT BOX ────────────────────────────────── */
.notice {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.notice--warn {
  background: #fff8e1;
  border-color: #f0c040;
  color: #664d00;
}

.notice--info {
  background: #e8f4fd;
  border-color: #90caf9;
  color: #0d47a1;
}

/* ─── 31. HIDDEN UTILITY ────────────────────────────────────── */
[hidden] { display: none !important; }

.js-hidden { display: none; }

/* ─── 32. RESPONSIVE ────────────────────────────────────────── */
@media (max-width: 900px) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }

  .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero-mock { display: none; }

  .finder-card {
    padding: var(--sp-8) var(--sp-6);
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

  .site-footer nav {
    flex-direction: column;
    gap: var(--sp-3);
  }
}

@media (max-width: 640px) {
  .container { padding-inline: var(--sp-4); }
  .section   { padding-block: var(--sp-10); }

  .primary-nav {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-4) 0;
    border-top: 1px solid rgba(255,255,255,.1);
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--color-dark);
    padding: var(--sp-4) var(--sp-6);
    z-index: 99;
  }

  .primary-nav.is-open { display: flex; }

  .primary-nav a.btn { align-self: flex-start; }

  .nav-toggle { display: flex; }

  .nav-wrap { flex-wrap: wrap; position: relative; }

  .radio-cards {
    grid-template-columns: 1fr 1fr;
  }

  .step-actions {
    flex-direction: column;
    align-items: flex-start;
  }

  .finder-card { padding: var(--sp-6) var(--sp-4); }

  .finder-card h1 { font-size: var(--text-2xl); }

  .review-section-header { flex-direction: column; align-items: flex-start; gap: var(--sp-2); }

  .result-dl {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 400px) {
  .radio-cards { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
}

@media print {
  body {
    background: #fff !important;
  }

  .finder-header,
  .site-footer,
  .progress-bar-wrap,
  .error-summary,
  .step-actions,
  .help-toggle,
  .help-panel,
  .photo-guide,
  .back-home {
    display: none !important;
  }

  [data-step] {
    display: none !important;
  }

  #step-result {
    display: block !important;
    max-width: 100% !important;
    box-shadow: none !important;
    border: 1px solid #bbb !important;
    padding: 16px !important;
  }

  #step-result .notice {
    border: 1px solid #bbb !important;
    background: #fff !important;
  }
}

/* ═══ LANDING PAGE REDESIGN ════════════════════════════════════
   New battery-intelligence design system for index.html.
   Existing tokens/components below are preserved for finder.html.
   ═══════════════════════════════════════════════════════════════ */

/* ─── LP tokens ─────────────────────────────────────────────── */
:root {
  --lp-void:      var(--void);
  --lp-carbon:    var(--carbon);
  --lp-white:     var(--battery-white);
  --lp-green:     var(--energy-green);
  --lp-cyan:      var(--energy-cyan);
  --lp-blue:      var(--energy-blue);
  --lp-violet:    var(--energy-violet);
  --lp-amber:     var(--energy-amber);
  --lp-red:       var(--energy-red);
  --lp-green-dim: rgba(168,242,56,.14);
  --lp-cyan-dim:  rgba(69,220,232,.12);
}

/* ─── LP hero ────────────────────────────────────────────────── */
.lp-hero {
  background: var(--lp-void);
  color: var(--lp-white);
  padding-block: clamp(3rem,7vw,5rem) clamp(3rem,6vw,4.5rem);
  overflow: hidden;
}

.lp-hero .container {
  display: grid;
  grid-template-columns: 1fr 380px;
  column-gap: var(--sp-12);
  row-gap: var(--sp-8);
  align-items: center;
}

.lp-hero__content { grid-column: 1; }

.lp-hero__visual {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lp-cyan);
  margin-bottom: var(--sp-4);
}

.lp-headline {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--lp-white);
  margin-bottom: var(--sp-5);
  letter-spacing: -.025em;
}

.lp-lead {
  font-size: var(--text-lg);
  color: rgba(245,247,245,.68);
  line-height: 1.65;
  max-width: 500px;
  margin-bottom: var(--sp-8);
}

/* Identification control */
.lp-id-control {
  max-width: 560px;
  margin-bottom: var(--sp-4);
}

.lp-id-control__inner {
  display: flex;
  background: var(--lp-carbon);
  border: 1.5px solid rgba(245,247,245,.18);
  border-radius: var(--radius-lg);
  overflow: visible;
  transition: border-color var(--ease-slow), box-shadow var(--ease-slow);
  position: relative;
}

.lp-id-control__inner:focus-within {
  border-color: var(--lp-green);
  box-shadow: 0 0 0 3px rgba(182,255,59,.15);
}

.lp-id-control__input {
  flex: 1;
  padding: var(--sp-4) var(--sp-5);
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  color: var(--lp-white);
  min-height: 56px;
  min-width: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}

.lp-id-control__input::placeholder {
  color: rgba(245,247,245,.38);
}

.lp-id-control__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 56px;
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(245,247,245,.12);
  color: rgba(245,247,245,.5);
  cursor: pointer;
  transition: color var(--ease), background var(--ease);
  padding: 0;
}

.lp-id-control__photo:hover {
  color: var(--lp-cyan);
  background: var(--lp-cyan-dim);
}

.lp-id-control__photo:focus-visible {
  outline: 3px solid var(--lp-cyan);
  outline-offset: -3px;
  color: var(--lp-cyan);
}

.lp-id-control__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--sp-3) + 2px) var(--sp-6);
  margin: 5px;
  background: var(--lp-green);
  color: var(--lp-void);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 700;
  border: none;
  border-radius: calc(var(--radius-lg) - 3px);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--ease), box-shadow var(--ease);
  flex-shrink: 0;
  min-height: 44px;
}

.lp-id-control__submit:hover {
  background: #ceff55;
  box-shadow: 0 0 18px rgba(182,255,59,.32);
}

.lp-id-control__submit:focus-visible {
  outline: 3px solid var(--lp-white);
  outline-offset: 2px;
}

.photo-guidance-panel {
  margin-top: var(--sp-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--sp-5);
  background: var(--color-surface);
}

.photo-guidance-panel h2 {
  margin-top: 0;
  margin-bottom: var(--sp-3);
}

.photo-guidance-panel p {
  margin: 0 0 var(--sp-3);
}

.photo-guidance-panel ul {
  margin: 0 0 var(--sp-4);
  padding-left: 1.25rem;
}

.photo-guidance-panel[hidden] {
  display: none !important;
}

.lp-scope {
  font-size: var(--text-sm);
  color: rgba(245,247,245,.38);
  letter-spacing: .025em;
}

/* Battery hero visual (SVG) */
.lp-batt-vis {
  width: 100%;
  max-width: 320px;
}

.bv-body     { fill: none; stroke: rgba(245,247,245,.13); stroke-width: 1.5; }
.bv-terminal { fill: none; stroke: rgba(245,247,245,.13); stroke-width: 1.5; }
.bv-divider  { stroke: rgba(245,247,245,.08); stroke-width: 1; }

.bv-seg-fill    { fill: var(--lp-green); opacity: .85; }
.bv-seg-fill-2  { fill: var(--lp-green); opacity: .5; }
.bv-seg-empty   { fill: rgba(245,247,245,.05); }

.bv-scan {
  stroke: var(--lp-cyan);
  stroke-width: 1.5;
  opacity: 0;
  animation: bvScan 3.5s ease-in-out infinite;
}

.bv-node {
  fill: var(--lp-cyan);
  animation: bvPulse 3.5s ease-in-out infinite;
}

.bv-bracket { stroke: rgba(245,247,245,.25); stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

@keyframes bvScan {
  0%        { opacity: 0;   transform: translateY(-32px); }
  8%        { opacity: .85; }
  50%       { transform: translateY(32px);  opacity: .85; }
  92%       { opacity: 0; }
  100%      { opacity: 0;   transform: translateY(-32px); }
}

@keyframes bvPulse {
  0%, 100%  { opacity: .55; }
  50%       { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .bv-scan  { animation: none; opacity: .55; transform: none; }
  .bv-node  { animation: none; opacity: .8; }
}

/* ─── LP pathways ────────────────────────────────────────────── */
.lp-pathways {
  background: var(--lp-carbon);
  padding-block: var(--sp-16);
}

.lp-pathways__grid {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: var(--sp-5);
}

.lp-pathway {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8) var(--sp-6);
  background: rgba(245,247,245,.04);
  border: 1px solid rgba(245,247,245,.1);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: var(--lp-white);
  transition: background var(--ease-slow), border-color var(--ease-slow), transform var(--ease-slow);
  position: relative;
  overflow: hidden;
}

.lp-pathway::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: transparent;
  transition: background var(--ease-slow);
}

.lp-pathway--show::after { background: var(--lp-cyan); }
.lp-pathway--tell::after { background: var(--lp-green); }
.lp-pathway--code::after { background: var(--lp-blue); }

.lp-pathway:hover {
  background: rgba(245,247,245,.08);
  border-color: rgba(245,247,245,.22);
  transform: translateY(-3px);
}

.lp-pathway:focus-visible {
  outline: 3px solid var(--lp-green);
  outline-offset: 2px;
}

.lp-pathway__icon {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.lp-pathway__title {
  font-size: var(--text-2xl);
  font-weight: 800;
  color: var(--lp-white);
  line-height: 1.15;
}

.lp-pathway__desc {
  font-size: var(--text-base);
  color: rgba(245,247,245,.58);
  line-height: 1.6;
  flex: 1;
}

.lp-pathway__arrow {
  align-self: flex-start;
  margin-top: auto;
  color: rgba(245,247,245,.25);
  font-size: 1.25rem;
  transition: color var(--ease), transform var(--ease);
  line-height: 1;
}

.lp-pathway:hover .lp-pathway__arrow {
  color: var(--lp-green);
  transform: translateX(5px);
}

/* ─── LP example result ──────────────────────────────────────── */
.lp-example {
  background: var(--lp-void);
  padding-block: var(--sp-16);
}

.lp-example__demo-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-4);
  background: rgba(255,181,71,.1);
  border: 1px solid rgba(255,181,71,.3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lp-amber);
  margin-bottom: var(--sp-6);
}

.lp-example__card {
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: var(--sp-8);
  align-items: start;
  padding: var(--sp-8);
  background: var(--lp-carbon);
  border: 1px solid rgba(245,247,245,.1);
  border-radius: var(--radius-xl);
  max-width: 860px;
}

.lp-example__family {
  font-size: var(--text-3xl);
  font-weight: 800;
  color: var(--lp-white);
  letter-spacing: -.02em;
  margin-bottom: var(--sp-3);
}

.lp-example__meta {
  font-size: var(--text-sm);
  color: rgba(245,247,245,.5);
  margin-bottom: var(--sp-4);
}

.lp-example__confirm {
  font-size: var(--text-sm);
  color: rgba(245,247,245,.75);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid rgba(255,181,71,.22);
  border-left: 3px solid var(--lp-amber);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: rgba(255,181,71,.06);
  line-height: 1.6;
}

.lp-example__confirm strong { color: var(--lp-amber); }

.lp-example__actions {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 170px;
  align-self: center;
}

.lp-example__notice {
  font-size: var(--text-xs);
  color: rgba(245,247,245,.3);
  margin-top: var(--sp-5);
  max-width: 860px;
}

/* Confidence battery component */
.conf-batt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
}

.conf-batt__svg {
  width: 80px;
  height: 40px;
  overflow: visible;
}

.conf-batt__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  text-align: center;
  white-space: nowrap;
}

.conf-batt--low    .conf-batt__label { color: var(--lp-red); }
.conf-batt--medium .conf-batt__label { color: var(--lp-amber); }
.conf-batt--high   .conf-batt__label { color: var(--lp-green); }

/* ─── LP trust ───────────────────────────────────────────────── */
.lp-trust {
  background: var(--lp-carbon);
  padding-block: var(--sp-16);
}

.lp-trust__heading {
  font-size: clamp(1.5rem, 3.5vw, var(--text-3xl));
  font-weight: 800;
  color: var(--lp-white);
  margin-bottom: var(--sp-10);
  max-width: 560px;
  letter-spacing: -.02em;
}

.lp-trust__list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px,1fr));
  gap: var(--sp-4);
}

.lp-trust__item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5);
  background: rgba(245,247,245,.04);
  border: 1px solid rgba(245,247,245,.08);
  border-left: 3px solid var(--lp-green);
  border-radius: 0 var(--radius) var(--radius) 0;
}

.lp-trust__item-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--lp-green);
  margin-top: 2px;
}

.lp-trust__item-text {
  font-size: var(--text-base);
  font-weight: 600;
  color: rgba(245,247,245,.88);
  line-height: 1.4;
}

/* ─── LP category browser ────────────────────────────────────── */
.lp-cats {
  background: var(--lp-void);
  padding-block: var(--sp-12);
}

.lp-cats__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-6);
  background: rgba(245,247,245,.05);
  border: 1px solid rgba(245,247,245,.15);
  border-radius: var(--radius-lg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  color: rgba(245,247,245,.85);
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
  min-height: 48px;
}

.lp-cats__toggle:hover {
  background: rgba(245,247,245,.09);
  border-color: rgba(245,247,245,.25);
  color: var(--lp-white);
}

.lp-cats__toggle:focus-visible {
  outline: 3px solid var(--lp-green);
  outline-offset: 2px;
}

.lp-cats__chevron {
  transition: transform var(--ease-slow);
}

.lp-cats__toggle[aria-expanded="true"] .lp-cats__chevron {
  transform: rotate(180deg);
}

.lp-cats__panel {
  margin-top: var(--sp-8);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px,1fr));
  gap: var(--sp-8);
}

.lp-cats__group-title {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(245,247,245,.38);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid rgba(245,247,245,.09);
  margin-bottom: var(--sp-3);
}

.lp-cats__items {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}

.lp-cats__link {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-3);
  color: rgba(245,247,245,.7);
  text-decoration: none;
  border-radius: var(--radius);
  font-size: var(--text-sm);
  transition: background var(--ease), color var(--ease);
  min-height: 44px;
}

.lp-cats__link:hover {
  background: rgba(245,247,245,.06);
  color: var(--lp-white);
}

.lp-cats__link:focus-visible {
  outline: 3px solid var(--lp-cyan);
  outline-offset: 2px;
}

.lp-cats__link-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: rgba(245,247,245,.3);
}

/* ─── LP supplier invite ─────────────────────────────────────── */
.lp-supplier {
  background: var(--lp-carbon);
  padding-block: var(--sp-16);
  text-align: center;
}

.lp-supplier__heading {
  font-size: clamp(1.25rem, 2.5vw, var(--text-2xl));
  font-weight: 700;
  color: var(--lp-white);
  margin-bottom: var(--sp-4);
}

.lp-supplier__body {
  font-size: var(--text-base);
  color: rgba(245,247,245,.58);
  max-width: 540px;
  margin: 0 auto var(--sp-8);
  line-height: 1.65;
}

/* LP button variants (on dark backgrounds) */
.btn-lp-primary {
  background: var(--lp-green);
  color: var(--lp-void);
  border: 2px solid var(--lp-green);
  font-weight: 700;
}

.btn-lp-primary:hover {
  background: #ceff55;
  border-color: #ceff55;
  box-shadow: 0 0 20px rgba(182,255,59,.28);
}

.btn-lp-primary:focus-visible {
  outline: 3px solid var(--lp-white);
  outline-offset: 2px;
}

.btn-lp-ghost {
  background: transparent;
  color: rgba(245,247,245,.78);
  border: 1.5px solid rgba(245,247,245,.22);
}

.btn-lp-ghost:hover {
  background: rgba(245,247,245,.07);
  color: var(--lp-white);
  border-color: rgba(245,247,245,.4);
}

.btn-lp-ghost:focus-visible {
  outline: 3px solid var(--lp-green);
  outline-offset: 2px;
}

/* ─── LP responsive ──────────────────────────────────────────── */
@media (max-width: 860px) {
  .lp-hero .container {
    grid-template-columns: 1fr;
  }

  .lp-hero__visual {
    grid-column: 1;
    grid-row: auto;
    order: -1;
    margin-bottom: 0;
  }

  .lp-batt-vis { max-width: 200px; }

  .lp-pathways__grid { grid-template-columns: 1fr; gap: var(--sp-4); }

  .lp-example__card {
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
  }

  .lp-example__actions {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: start;
  }
}

@media (max-width: 600px) {
  .lp-hero { padding-block: var(--sp-10); }
  .lp-batt-vis { max-width: 140px; }

  .lp-id-control__submit {
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--text-sm);
  }

  .lp-cats__panel { grid-template-columns: 1fr; gap: var(--sp-6); }

  .lp-example__card {
    grid-template-columns: 1fr;
  }

  .lp-example__actions { grid-column: 1; }
}

@media (max-width: 360px) {
  .lp-id-control__inner { flex-wrap: wrap; border-radius: var(--radius); }
  .lp-id-control__input { border-radius: var(--radius) var(--radius) 0 0; min-height: 48px; }
  .lp-id-control__photo {
    border-left: none;
    border-top: 1px solid rgba(245,247,245,.12);
    flex: 1;
  }
  .lp-id-control__submit {
    width: calc(100% - 10px);
    border-radius: calc(var(--radius) - 3px);
  }
}

/* ─── Energy-system overrides: homepage + finder ───────────────── */
.lp-pathway--show .lp-pathway__icon svg { stroke: var(--energy-cyan); }
.lp-pathway--tell .lp-pathway__icon svg { stroke: var(--energy-green); }
.lp-pathway--code .lp-pathway__icon svg { stroke: var(--energy-blue); }

.lp-batt-vis .bv-seg-fill { fill: rgba(165,110,255,.66); }
.lp-batt-vis .bv-seg-fill-2 { fill: rgba(95,140,255,.58); }
.lp-batt-vis .bv-scan {
  stroke: url(#energySpectrum);
  animation: bvScan 7.5s ease-in-out infinite;
}
.lp-batt-vis .bv-node {
  fill: var(--energy-cyan);
  animation: bvPulse 7.5s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .lp-batt-vis .bv-scan,
  .lp-batt-vis .bv-node { animation: none; }
}

.finder-page {
  background: var(--void);
  color: var(--battery-white);
  --step-accent: var(--energy-violet);
}

.finder-header {
  background: var(--carbon);
  border-bottom: 1px solid rgba(245,247,245,.1);
}

.finder-badge {
  font-size: var(--text-sm);
  color: rgba(245,247,245,.55);
  padding-left: var(--sp-3);
  border-left: 1px solid rgba(245,247,245,.2);
}

.finder-header .primary-nav {
  margin-left: auto;
}

.finder-header .primary-nav a:hover,
.finder-header .primary-nav a[aria-current="page"] {
  border-bottom-color: var(--energy-cyan);
}

.finder-main {
  background:
    radial-gradient(circle at 12% 5%, rgba(165,110,255,.1), transparent 42%),
    radial-gradient(circle at 85% 0%, rgba(69,220,232,.08), transparent 36%),
    var(--void);
}

.progress-rail {
  max-width: var(--form-width);
  margin: 0 auto var(--sp-8);
  padding: var(--sp-5);
  border: 1px solid rgba(245,247,245,.12);
  border-radius: var(--radius-lg);
  background: rgba(16,20,18,.72);
}

.progress-label {
  align-items: flex-start;
  gap: var(--sp-3);
  color: var(--muted-text);
}

.progress-label strong {
  color: var(--battery-white);
  display: block;
}

.progress-track {
  height: auto;
  background: none;
  display: grid;
  grid-template-columns: repeat(6, minmax(0,1fr));
  gap: var(--sp-2);
}

.progress-segment {
  min-height: 14px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(245,247,245,.2);
  background: rgba(245,247,245,.09);
  position: relative;
}

.progress-segment::before {
  content: attr(data-step);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 10px;
  font-weight: 700;
  color: rgba(245,247,245,.6);
}

.progress-segment.is-complete {
  background: rgba(168,242,56,.25);
  border-color: rgba(168,242,56,.75);
}

.progress-segment.is-complete::before { content: "✓"; color: var(--battery-white); }

.progress-segment.is-current {
  border-color: var(--step-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--step-accent) 30%, transparent);
  background: color-mix(in srgb, var(--step-accent) 26%, rgba(245,247,245,.08));
}

body[data-step-color="1"] { --step-accent: var(--energy-violet); }
body[data-step-color="2"] { --step-accent: var(--energy-cyan); }
body[data-step-color="3"] { --step-accent: var(--energy-blue); }
body[data-step-color="4"] { --step-accent: var(--energy-orange); }
body[data-step-color="5"] { --step-accent: var(--energy-amber); }
body[data-step-color="6"] { --step-accent: var(--energy-green); }

.finder-card {
  background: rgba(22,27,25,.88);
  border: 1px solid rgba(245,247,245,.15);
  box-shadow: 0 14px 30px rgba(0,0,0,.35), inset 0 0 0 1px rgba(245,247,245,.04);
}

.finder-card h1,
.finder-card legend,
.finder-card h2,
.finder-card h3 {
  color: var(--battery-white);
}

.finder-card .step-hint,
.form-hint,
.option-desc,
.review-dl dt,
.result-muted { color: var(--muted-text); }

.finder-card:target,
.finder-card [tabindex="-1"]:focus {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--step-accent) 42%, transparent), 0 14px 30px rgba(0,0,0,.35);
}

.radio-card label,
.radio-list label {
  background: rgba(16,20,18,.78);
  border-color: rgba(245,247,245,.16);
  color: var(--battery-white);
  min-height: 88px;
}

.card-icon-svg {
  width: 28px;
  height: 28px;
  color: rgba(245,247,245,.8);
}

.radio-card input[type="radio"]:checked + label,
.radio-list input[type="radio"]:checked + label {
  border-color: var(--step-accent);
  background: color-mix(in srgb, var(--step-accent) 15%, rgba(16,20,18,.9));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--step-accent) 24%, transparent);
}

.radio-card label:hover,
.radio-list label:hover {
  border-color: rgba(245,247,245,.45);
}

.radio-card label::after,
.radio-list label::after {
  content: "○";
  position: absolute;
  top: 12px;
  right: 12px;
  color: rgba(245,247,245,.7);
}

.radio-card input[type="radio"]:checked + label::after,
.radio-list input[type="radio"]:checked + label::after {
  content: "✓";
  color: var(--battery-white);
}

.form-control {
  background: rgba(7,9,8,.75);
  border-color: rgba(245,247,245,.24);
  color: var(--battery-white);
}

.form-control::placeholder { color: rgba(245,247,245,.45); }
.form-control:focus {
  border-color: var(--step-accent);
  outline: 3px solid color-mix(in srgb, var(--step-accent) 60%, white 0%);
}

input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: var(--battery-white);
  -webkit-box-shadow: 0 0 0 1000px var(--carbon) inset;
}

.btn-primary {
  background: var(--step-accent);
  border-color: var(--step-accent);
  color: var(--void);
}

.btn-primary:hover {
  filter: brightness(1.05);
  box-shadow: 0 0 18px color-mix(in srgb, var(--step-accent) 34%, transparent);
}

.btn-ghost {
  background: transparent;
  color: var(--battery-white);
  border: 1.5px solid rgba(69,220,232,.55);
}

.btn-ghost:hover {
  background: rgba(69,220,232,.08);
  border-color: var(--energy-cyan);
}

.btn-back { color: rgba(245,247,245,.8); }
.btn-back:hover { color: var(--battery-white); }

.notice {
  background: rgba(16,20,18,.76);
  border-color: rgba(245,247,245,.18);
  color: rgba(245,247,245,.8);
}
.notice--warn {
  background: rgba(255,194,71,.12);
  border-color: rgba(255,194,71,.55);
  color: #ffe9b2;
}
.notice--info {
  background: rgba(95,140,255,.12);
  border-color: rgba(95,140,255,.52);
  color: #dbe6ff;
}

.field-error {
  color: var(--energy-red);
  font-weight: 700;
}
.field-error::before { content: "! "; }
.error-summary {
  background: rgba(255,92,98,.1);
  border-color: var(--energy-red);
}
.error-summary h2,
.error-summary a { color: #ffd2d4; }

/* ── Photo-guide dark panel ─────────────────────────────── */
.photo-guide {
  background: var(--carbon);
  border: 1px solid rgba(69,220,232,.35);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
}

.photo-guide__heading {
  font-size: var(--text-lg);
  margin-bottom: var(--sp-4);
  color: var(--battery-white);
}

.photo-guide-grid {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fit,minmax(220px,1fr));
}

.photo-guide-panel {
  border: 1px solid rgba(69,220,232,.35);
  background: rgba(7,9,8,.55);
  border-radius: var(--radius);
  padding: var(--sp-4);
}

.photo-guide-panel h3 {
  font-size: var(--text-base);
  font-weight: 700;
  margin-bottom: var(--sp-2);
  color: var(--energy-cyan);
}

.photo-guide-panel p {
  color: var(--muted-text);
  font-size: var(--text-sm);
  margin: 0;
}

/* ── Submission error state ─────────────────────────────── */
.submission-error {
  background: rgba(255,92,98,.1);
  border: 2px solid rgba(255,92,98,.65);
  border-radius: var(--radius-lg);
  padding: var(--sp-5) var(--sp-6);
  margin-bottom: var(--sp-6);
  color: #ffd0d2;
}

.submission-error strong {
  display: block;
  font-size: var(--text-lg);
  margin-bottom: var(--sp-2);
  color: #ffb0b3;
}

/* ── Scroll-margin for sticky-header focus fix ───────────── */
[tabindex="-1"] {
  scroll-margin-top: 80px;
}

.review-section {
  border-color: rgba(245,247,245,.18);
  background: rgba(16,20,18,.6);
}
.review-section-header {
  background: rgba(245,247,245,.04);
  border-bottom-color: rgba(245,247,245,.18);
}
.review-section-header .change-link {
  color: var(--energy-cyan);
}

.result-section {
  background: rgba(16,20,18,.7);
  border-color: rgba(245,247,245,.18);
}

.confidence-pill {
  background: rgba(7,9,8,.7);
  color: var(--battery-white);
}
.confidence-pill[data-confidence="low"] { border-color: var(--energy-amber); color: #ffd995; }
.confidence-pill[data-confidence="medium"] { border-color: var(--energy-cyan); color: #baf4f8; }
.confidence-pill[data-confidence="high"] { border-color: var(--energy-green); color: #d9faa7; }
.confidence-pill[data-confidence="conflict"] { border-color: var(--energy-red); color: #ffd0d2; }

.confirm-banner {
  background: rgba(168,242,56,.1);
  border-color: rgba(168,242,56,.6);
}
.confirm-banner h2 { color: #d9faa7; }

@media (max-width: 640px) {
  .progress-rail { padding: var(--sp-4); }
  .step-actions > .btn,
  .step-actions > .btn-back {
    min-height: 44px;
  }
  .step-actions {
    gap: var(--sp-3);
  }
  .consent-group label {
    font-size: var(--text-sm);
  }
}

/* ─── COMPATIBILITY PAGE ────────────────────────────────────── */

.compat-page {
  background: var(--void, #070908);
  color: var(--battery-white, #F5F7F5);
  min-height: 100vh;
}

.compat-wrap {
  padding-top: var(--sp-8);
  padding-bottom: var(--sp-16);
  max-width: 720px;
}

.compat-intro {
  margin-bottom: var(--sp-8);
}

.compat-title {
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  font-weight: 700;
  color: var(--battery-white, #F5F7F5);
  line-height: var(--line-height-tight);
  margin-bottom: var(--sp-3);
}

.compat-lead {
  color: var(--muted-text, #A5ADA8);
  font-size: var(--text-base);
  line-height: var(--line-height);
}

/* Form */
.compat-form {
  background: var(--panel, #161B19);
  border: 1px solid rgba(245,247,245,0.08);
  border-radius: var(--radius-lg);
  padding: var(--sp-6);
  margin-bottom: var(--sp-8);
}

.compat-inputs {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--sp-4);
  align-items: end;
  margin-bottom: var(--sp-6);
}

@media (max-width: 600px) {
  .compat-inputs {
    grid-template-columns: 1fr;
  }
  .compat-vs { text-align: center; }
}

.compat-vs {
  color: var(--muted-text, #A5ADA8);
  font-size: var(--text-lg);
  font-weight: 600;
  padding-bottom: var(--sp-2);
  text-align: center;
}

.compat-input {
  background: var(--carbon, #101412) !important;
  border-color: rgba(245,247,245,0.15) !important;
  color: var(--battery-white, #F5F7F5) !important;
}
.compat-input::placeholder { color: var(--muted-text, #A5ADA8); }
.compat-input:focus {
  border-color: var(--electric-cyan, #62E7FF) !important;
  outline: 2px solid var(--electric-cyan, #62E7FF);
  outline-offset: 2px;
}

.compat-form-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  flex-wrap: wrap;
}

.compat-or {
  color: var(--muted-text, #A5ADA8);
  font-size: var(--text-sm);
}

/* Result */
.compat-result {
  margin-top: var(--sp-4);
}

.compat-result-inner {
  background: var(--panel, #161B19);
  border: 1px solid rgba(245,247,245,0.08);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.compat-result-header {
  padding: var(--sp-6);
  border-bottom: 1px solid rgba(245,247,245,0.08);
  background: var(--carbon, #101412);
}

.compat-codes {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  margin-bottom: var(--sp-3);
}

.compat-code-chip {
  font-family: var(--font-mono);
  background: rgba(245,247,245,0.08);
  border: 1px solid rgba(245,247,245,0.12);
  border-radius: var(--radius-sm);
  padding: var(--sp-1) var(--sp-3);
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--battery-white, #F5F7F5);
}

.compat-vs-label {
  color: var(--muted-text, #A5ADA8);
  font-size: var(--text-sm);
}

.compat-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
}

/* Confidence/classification badges */
.compat-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}

.compat-badge--high {
  background: rgba(182,255,59,0.12);
  border-color: rgba(182,255,59,0.3);
  color: #B6FF3B;
}
.compat-badge--medium {
  background: rgba(98,231,255,0.1);
  border-color: rgba(98,231,255,0.3);
  color: #62E7FF;
}
.compat-badge--low {
  background: rgba(255,181,71,0.1);
  border-color: rgba(255,181,71,0.3);
  color: #FFB547;
}
.compat-badge--conflict {
  background: rgba(255,92,98,0.12);
  border-color: rgba(255,92,98,0.3);
  color: #FF5C62;
}
.compat-badge--unknown {
  background: rgba(165,173,168,0.1);
  border-color: rgba(165,173,168,0.2);
  color: var(--muted-text, #A5ADA8);
}

/* Sections */
.compat-section {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid rgba(245,247,245,0.06);
}

.compat-section-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: var(--sp-3);
}

.compat-section--matches  .compat-section-title { color: #B6FF3B; }
.compat-section--diffs    .compat-section-title { color: #FFB547; }
.compat-section--warnings .compat-section-title { color: #FF5C62; }
.compat-section--unknowns .compat-section-title { color: #62E7FF; }

.compat-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compat-list li {
  padding-left: var(--sp-5);
  position: relative;
  font-size: var(--text-sm);
  color: var(--battery-white, #F5F7F5);
  line-height: var(--line-height);
}

.compat-list--matches  li::before { content: '✓'; position: absolute; left: 0; color: #B6FF3B; }
.compat-list--diffs    li::before { content: '≠'; position: absolute; left: 0; color: #FFB547; }
.compat-list--warnings li::before { content: '!'; position: absolute; left: 0; color: #FF5C62; font-weight: 700; }
.compat-list--unknowns li::before { content: '?'; position: absolute; left: 0; color: #62E7FF; }
.compat-list--evidence li::before { content: '–'; position: absolute; left: 0; color: var(--muted-text); }

/* Evidence details */
.compat-evidence-details {
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid rgba(245,247,245,0.06);
}

.compat-evidence-summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--muted-text, #A5ADA8);
  user-select: none;
  padding: var(--sp-2) 0;
}
.compat-evidence-summary:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.compat-evidence-details[open] .compat-list {
  margin-top: var(--sp-3);
}

/* Empty / insufficient evidence */
.compat-empty {
  padding: var(--sp-6);
}

.compat-empty-text {
  color: var(--muted-text, #A5ADA8);
  font-size: var(--text-base);
  font-style: italic;
}

/* Verification */
.compat-verification {
  padding: var(--sp-5) var(--sp-6);
  border-bottom: 1px solid rgba(245,247,245,0.06);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.compat-verif-item {
  font-size: var(--text-sm);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--radius);
  border-left: 3px solid transparent;
  background: rgba(245,247,245,0.04);
}
.compat-verif-item--device   { border-left-color: #62E7FF; }
.compat-verif-item--supplier { border-left-color: #FFB547; }

/* Actions */
.compat-actions {
  padding: var(--sp-6);
}

.compat-actions-title {
  font-size: var(--text-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted-text, #A5ADA8);
  margin-bottom: var(--sp-3);
}

.compat-actions-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.compat-actions-list a,
.compat-actions-list .btn-text-link {
  color: #62E7FF;
  font-size: var(--text-sm);
  text-decoration: underline;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-family: inherit;
}
.compat-actions-list a:hover,
.compat-actions-list .btn-text-link:hover { opacity: 0.8; }

/* Loading */
.compat-loading {
  padding: var(--sp-4);
  text-align: center;
  color: var(--muted-text, #A5ADA8);
  font-size: var(--text-sm);
}

/* Compare link in finder */
.biv-compare-link {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px solid rgba(245,247,245,0.08);
}

/* Homepage compatibility card */
.lp-compat-card {
  background: var(--carbon, #101412);
  border-top: 1px solid rgba(245,247,245,0.06);
  border-bottom: 1px solid rgba(245,247,245,0.06);
  padding: var(--sp-10) 0;
}

.lp-compat-card__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  flex-wrap: wrap;
}

.lp-compat-card__heading {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--battery-white, #F5F7F5);
  margin-bottom: var(--sp-2);
}

.lp-compat-card__text {
  color: var(--muted-text, #A5ADA8);
  font-size: var(--text-base);
  max-width: 480px;
}

/* Homepage physical-fit demonstration */
.lp-rule-demo {
  background: linear-gradient(180deg, rgba(16,20,18,0.98) 0%, rgba(7,9,8,1) 100%);
  border-top: 1px solid rgba(245,247,245,0.06);
  border-bottom: 1px solid rgba(245,247,245,0.06);
  padding: var(--sp-12) 0;
}

.lp-rule-demo__intro {
  max-width: 760px;
  margin-bottom: var(--sp-8);
}

.lp-rule-demo__eyebrow {
  color: #62E7FF;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--sp-3);
}

.lp-rule-demo__heading {
  color: var(--battery-white, #F5F7F5);
  font-size: clamp(1.5rem, 3.8vw, 2.25rem);
  margin-bottom: var(--sp-3);
}

.lp-rule-demo__lead,
.lp-rule-demo__confidence,
.lp-rule-demo__disclaimer,
.lp-rule-demo__empty,
.lp-rule-demo__supplier-note {
  color: var(--muted-text, #A5ADA8);
}

.lp-rule-demo__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-8);
}

.lp-rule-demo__card,
.lp-rule-demo__detail-card,
.lp-rule-demo__actions,
.lp-rule-demo__panel {
  background: rgba(22,27,25,0.96);
  border: 1px solid rgba(245,247,245,0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.lp-rule-demo__card {
  padding: var(--sp-5);
  min-height: 100%;
}

.lp-rule-demo__card-badge {
  margin-bottom: var(--sp-3);
}

.lp-rule-demo__card-text {
  color: var(--battery-white, #F5F7F5);
  font-size: var(--text-sm);
}

.lp-rule-demo__panel {
  display: grid;
  grid-template-columns: minmax(220px, 280px) minmax(0, 1fr);
  gap: var(--sp-6);
  padding: var(--sp-6);
}

.lp-rule-demo__controls {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}

.lp-rule-demo__button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.lp-rule-demo__label,
.lp-rule-demo__detail-heading {
  color: var(--battery-white, #F5F7F5);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.lp-rule-demo__select {
  width: 100%;
  min-height: 48px;
  border-radius: var(--radius);
  border: 1px solid rgba(245,247,245,0.14);
  background: var(--carbon, #101412);
  color: var(--battery-white, #F5F7F5);
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
}

.lp-rule-demo__form {
  display: contents;
}

.lp-rule-demo__field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
}

.lp-rule-demo__result-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}

.lp-rule-demo__result-kicker,
.lp-rule-demo__lead-line,
.lp-rule-demo__context {
  color: #62E7FF;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
}

.lp-rule-demo__lead-line {
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: var(--sp-2);
}

.lp-rule-demo__context {
  margin-bottom: var(--sp-3);
}

.lp-rule-demo__result-title {
  color: var(--battery-white, #F5F7F5);
  font-size: var(--text-xl);
  margin-bottom: var(--sp-2);
}

.lp-rule-demo__summary {
  color: var(--battery-white, #F5F7F5);
  margin-bottom: var(--sp-3);
}

.lp-rule-demo__details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.lp-rule-demo__detail-card,
.lp-rule-demo__actions {
  padding: var(--sp-5);
}

.lp-rule-demo__list {
  list-style: none;
  margin: var(--sp-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.lp-rule-demo__list li {
  position: relative;
  padding-left: var(--sp-5);
  color: var(--battery-white, #F5F7F5);
  font-size: var(--text-sm);
}

.lp-rule-demo__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #62E7FF;
}

.lp-rule-demo__list--actions li::before {
  content: '→';
  color: #B6FF3B;
}

.lp-rule-demo__empty {
  margin-top: var(--sp-3);
  font-size: var(--text-sm);
}

.lp-rule-demo__supplier-note {
  margin-top: var(--sp-4);
  font-size: var(--text-sm);
}

.lp-rule-demo__panel--stacked,
.lp-rule-demo__panel--report {
  margin-top: var(--sp-6);
}

.lp-rule-demo__report-wrap {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
  overflow-x: auto;
}

.lp-rule-demo__report-table {
  max-width: 100%;
  width: 100%;
  border-collapse: collapse;
  color: var(--battery-white, #F5F7F5);
  table-layout: fixed;
}

.lp-rule-demo__report-table th,
.lp-rule-demo__report-table td {
  border-bottom: 1px solid rgba(245,247,245,0.12);
  padding: var(--sp-3);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.lp-rule-demo__report-table th {
  color: #62E7FF;
  font-size: var(--text-sm);
}

.lp-rule-demo__report-json {
  max-width: 100%;
  margin: 0;
  padding: var(--sp-4);
  border-radius: var(--radius);
  background: rgba(7,9,8,0.75);
  border: 1px solid rgba(245,247,245,0.08);
  color: var(--battery-white, #F5F7F5);
  overflow: auto;
  max-height: 320px;
  font-size: 0.85rem;
}

.compat-demo__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.compat-demo__badge::before {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  border: 1px solid currentColor;
  content: '';
  display: inline-block;
  flex: 0 0 auto;
}

.compat-demo__badge--blocked {
  color: #FF8E93;
  background: rgba(255,92,98,0.12);
  border-color: rgba(255,92,98,0.28);
}

.compat-demo__badge--insufficient {
  color: #FFD08A;
  background: rgba(255,181,71,0.12);
  border-color: rgba(255,181,71,0.28);
}

.compat-demo__badge--conditional {
  color: #62E7FF;
  background: rgba(98,231,255,0.12);
  border-color: rgba(98,231,255,0.24);
}

.compat-demo__badge--compatible {
  color: #B6FF3B;
  background: rgba(182,255,59,0.12);
  border-color: rgba(182,255,59,0.24);
}

.compat-demo__badge--uncertain {
  color: var(--muted-text, #A5ADA8);
  background: rgba(165,173,168,0.12);
  border-color: rgba(165,173,168,0.24);
}

/* Hero outcome line */
.lp-hero__outcome {
  font-size: var(--text-sm);
  color: var(--energy-cyan, #45DCE8);
  letter-spacing: 0.04em;
  margin-top: var(--sp-3);
}

/* btn-text-link (used in compat page) */
.btn-text-link {
  background: none;
  border: none;
  color: #62E7FF;
  text-decoration: underline;
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  padding: 0;
}
.btn-text-link:hover { opacity: 0.8; }
.btn-text-link:focus { outline: 2px solid var(--color-focus); outline-offset: 2px; }

@media (max-width: 980px) {
  .lp-rule-demo__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lp-rule-demo__panel,
  .lp-rule-demo__field-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .lp-rule-demo__cards,
  .lp-rule-demo__details {
    grid-template-columns: 1fr;
  }

  .lp-rule-demo__panel {
    padding: var(--sp-5);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}