:root{
  --bg:#0b0b0c;
  --panel:#101113;
  --panel2:#0f0f10;
  --text:#f4f0ea;
  --muted:#b7b0a7;
  --muted2:#8f887f;
  --line:rgba(255,255,255,0.08);
  --gold:#c9b079; /* subtle */
  --gold2:#a88d55;
  --shadow: 0 18px 60px rgba(0,0,0,.55);
  --radius: 18px;
  --radius2: 24px;
  --serif: "Playfair Display", serif;
  --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box}
html,body{height:100%}

/* Mobile safety: prevent horizontal scrolling from fixed-size canvases (radar charts) */
html, body{overflow-x:hidden}

canvas{
  max-width:100%;
  width:100%;
  height:auto;
  display:block;
}

/* Radar canvases: force a true square at any breakpoint (desktop + mobile) */
.radar-shell,
.preview-radar{
  aspect-ratio: 1 / 1;
}

/* Main radar: keep it from getting huge on desktop while staying responsive */
.radar-shell{
  width: min(520px, 100%);
  margin: 0 auto;
}

/* Fill the square wrapper so we never get width-only scaling (which can squash/ stretch canvases) */
canvas.radar-canvas{
  width: 100% !important;
  height: 100% !important;
  display: block;
}

.chart-wrap{max-width:720px; margin:0 auto; overflow:hidden}
body{
  margin:0;
  background: radial-gradient(1200px 800px at 20% 10%, rgba(201,176,121,0.10), transparent 55%),
              radial-gradient(900px 700px at 80% 20%, rgba(255,255,255,0.06), transparent 55%),
              var(--bg);
  color:var(--text);
  font-family:var(--sans);
  letter-spacing:-0.01em;
}

.bg-grain{
  pointer-events:none;
  position:fixed;
  inset:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.20'/%3E%3C/svg%3E");
  opacity:.08;
  mix-blend-mode:overlay;
}

.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
a{color:inherit;text-decoration:none}
.link{color:var(--muted);font-size:14px; padding:10px 12px;border-radius:999px;border:1px solid transparent}
.link:hover{border-color:var(--line); color:var(--text)}

.topbar{
  position:sticky; top:0;
  backdrop-filter: blur(10px);
  background: rgba(11,11,12,0.62);
  border-bottom:1px solid var(--line);
  z-index:20;
}
.topbar-inner{display:flex;align-items:center;justify-content:space-between; padding:14px 0}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{
  width:38px;height:38px;border-radius:14px;
  background: radial-gradient(circle at 30% 30%, rgba(201,176,121,.55), rgba(201,176,121,.08) 55%, rgba(255,255,255,0.06));
  border:1px solid rgba(201,176,121,0.22);
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.brand-title{font-family:var(--serif); font-weight:600; font-size:18px; letter-spacing:0.01em}
.brand-sub{font-size:12px; color:var(--muted2); margin-top:2px}
.topbar-actions{display:flex;gap:6px;align-items:center}

.hero{padding:64px 0 34px}
.hero-inner{display:grid;grid-template-columns: 1.2fr 0.9fr; gap:24px; align-items:start}

/* v4.7.80 – Start button clickability guard (prevents invisible overlap blocking clicks) */
.hero-inner{ position: relative; }
.hero-copy{ position: relative; z-index: 3; }
.hero-cta{ position: relative; z-index: 4; }
.btn-start-hero{ position: relative; z-index: 5; pointer-events: auto; }
.hero-card{ position: relative; z-index: 1; }

h1{font-family:var(--serif); font-weight:600; font-size:44px; line-height:1.06; margin:0 0 14px}
.hero-tagline{font-size:clamp(1.02rem,1.55vw,1.22rem); font-weight:500; line-height:1.28; color:rgba(255,255,255,0.92); max-width:680px; margin:0 0 20px}
.lead{color:var(--muted); font-size:16px; line-height:1.55; margin:0 0 18px; max-width:54ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
.hero-note{display:flex;align-items:center;gap:10px;color:var(--muted2); font-size:13px}
.dot{width:8px;height:8px;border-radius:99px;background:var(--gold); box-shadow:0 0 0 5px rgba(201,176,121,.14)}

.hero-card{
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  box-shadow: var(--shadow);
  padding:18px 18px 14px;
}
.card-title{font-family:var(--serif); font-size:16px; letter-spacing:0.02em}
.card-list{margin-top:12px; display:flex; flex-direction:column; gap:12px}
.card-item{display:grid; grid-template-columns: auto 1fr; gap:10px; align-items:start}
.pill{
  font-size:11px; letter-spacing:0.08em; text-transform:uppercase;
  color:rgba(201,176,121,.95);
  border:1px solid rgba(201,176,121,.25);
  padding:7px 10px; border-radius:999px;
  background: rgba(201,176,121,0.06);
}
.card-text{color:var(--muted); font-size:13px; line-height:1.5}
.card-foot{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.micro{font-size:12px}
.muted{color:var(--muted)}
.muted2{color:var(--muted2)}

.section-head{margin:28px 0 18px}
.section-head h2{
  margin:0 0 6px;
  font-family:var(--serif);
  font-weight:600;
  letter-spacing:0.01em;
  font-size:28px;
}
.section-head p{margin:0;color:var(--muted);line-height:1.55;max-width:82ch}
.section-head .profile-subtext{max-width:64ch;margin-bottom:6px}

.method{padding:20px 0 34px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.panel{
  border:1px solid var(--line);
  border-radius:var(--radius);
  background: rgba(255,255,255,0.02);
  padding:16px;
}
.panel-kicker{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(201,176,121,.88)}
.panel-title{font-family:var(--serif); font-size:18px; margin-top:6px}
.panel-body{color:var(--muted); font-size:13px; line-height:1.55; margin-top:6px}

.engine{padding:12px 0 48px}
.engine-grid{display:grid; grid-template-columns: 0.95fr 1.05fr; gap:16px; align-items:start}

.controls .block, .results .result-card{
  border:1px solid var(--line);
  border-radius:var(--radius2);
  background: rgba(255,255,255,0.02);
  box-shadow: var(--shadow);
}

.block{padding:14px}
.block + .block{margin-top:14px}
.block-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px}
.kicker{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(201,176,121,.88)}
.block-title{font-family:var(--serif); font-size:18px; margin-top:6px}
.btn{
  border-radius:999px;
  padding:12px 16px;
  border:1px solid var(--line);
  background: transparent;
  color:var(--text);
  font-weight:500;
  font-size:14px;
  cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px;
}
.btn:hover{border-color:rgba(255,255,255,0.16)}
.btn-primary{
  background: linear-gradient(180deg, rgba(201,176,121,0.22), rgba(201,176,121,0.08));
  border-color: rgba(201,176,121,0.30);
}
.btn-primary:hover{border-color: rgba(201,176,121,0.45)}
.btn-ghost{
  background: rgba(255,255,255,0.02);
}
.btn-mini{padding:9px 12px; font-size:13px}
.btn-full{width:100%}
.icon-btn{
  width:34px;height:34px;border-radius:12px;
  border:1px solid var(--line);
  background: rgba(255,255,255,0.02);
  color:var(--text);
  cursor:pointer;
}

.preset-grid{display:grid;grid-template-columns:repeat(2,1fr); gap:10px; margin-top:10px}
.preset{
  padding:12px;
  border:1px solid var(--line);
  border-radius:16px;
  background: rgba(255,255,255,0.015);
  cursor:pointer;
  min-height:92px;
}
.preset:hover{border-color:rgba(201,176,121,0.35)}
.preset.active{
  border-color:rgba(201,176,121,0.55);
  background: rgba(201,176,121,0.06);
}
.preset-name{font-family:var(--serif); font-size:16px}
.preset-desc{color:var(--muted); font-size:12px; line-height:1.45; margin-top:6px}

.sliders{display:flex; flex-direction:column; gap:14px; margin-top:10px}
.slider{
  display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center;
}
.slider label{display:flex; flex-direction:column; gap:4px}
.slider .label{font-size:13px}
.slider .hint{font-size:11px; color:var(--muted2)}
.slider input[type="range"]{
  width:100%;
  accent-color: var(--gold);
}
.value{
  min-width:40px;
  text-align:right;
  font-variant-numeric: tabular-nums;
  color:rgba(201,176,121,0.95);
  font-size:13px;
}
.slider .track{
  grid-column:1 / -1;
}

.results .result-card{padding:14px; margin-bottom:14px}
.result-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px}
.result-title{font-family:var(--serif); font-size:20px; margin-top:6px}
.badge{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:8px 10px;border-radius:999px;
  border:1px solid var(--line);
  color:var(--muted);
  background: rgba(255,255,255,0.02);
}
.badge-gold{
  color:rgba(201,176,121,0.95);
  border-color: rgba(201,176,121,0.28);
  background: rgba(201,176,121,0.06);
}

.result-main{display:grid; grid-template-columns: 1fr; gap:14px}
.topmatch-name{font-family:var(--serif); font-size:28px}
.topmatch-sub{color:var(--muted); font-size:13px; margin-top:6px; line-height:1.5}
.chart-wrap{border:1px solid var(--line); border-radius:18px; padding:12px; background: rgba(255,255,255,0.01)}
.chart-legend{margin-top:10px; color:var(--muted2); font-size:12px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.legend-dot{width:10px;height:10px;border-radius:99px; display:inline-block}
.legend-gold{background:var(--gold)}
.legend-slate{background:#6f6a63}
.legend-spacer{width:18px}

.insights-title{font-size:13px; color:var(--muted2); margin-bottom:8px; letter-spacing:.02em}

.insight-intro{margin:0 0 12px; color:var(--muted); font-size:13px; line-height:1.6}
.bullets{margin:0; padding-left:18px; color:var(--muted); line-height:1.55}
.tradeoff{margin-top:12px; border-top:1px solid var(--line); padding-top:12px}
.tradeoff-title{font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:rgba(201,176,121,.86)}
.tradeoff-body{margin-top:8px; color:var(--muted); line-height:1.5; font-size:13px}

.gate{
  margin-top:14px;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.gate-title{font-family:var(--serif); font-size:18px}
.gate-sub{color:var(--muted); font-size:13px; line-height:1.5; margin-top:4px}

.result-card.result-card.unlocked{opacity:1; filter:none; pointer-events:auto}

.top3{display:flex; flex-direction:column; gap:10px}
.rank{
  border:1px solid var(--line); border-radius:16px;
  padding:12px; background: rgba(255,255,255,0.012);
}
.rank-row{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
.rank-name{font-family:var(--serif); font-size:18px}
.rank-score{color:rgba(201,176,121,0.95); font-variant-numeric: tabular-nums; font-size:13px}
.rank-sub{color:var(--muted); font-size:12px; margin-top:6px; line-height:1.45}

.detail{
  margin-top:12px;
  border-top:1px solid var(--line);
  padding-top:12px;
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
}
.metric{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background: rgba(255,255,255,0.012);
}
.metric .m-title{font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:rgba(201,176,121,.86)}
.metric .m-val{font-family:var(--serif); font-size:18px; margin-top:8px}
.metric .m-sub{color:var(--muted2); font-size:12px; margin-top:6px; line-height:1.45}

.cta-box{
  margin-top:14px;
  border-top:1px solid var(--line);
  padding-top:14px;
}
.cta-title{font-family:var(--serif); font-size:18px}
.cta-sub{color:var(--muted); font-size:13px; line-height:1.5; margin-top:6px}
.cta-actions{display:flex; gap:12px; flex-wrap:wrap; margin-top:12px}

.footer{
  border-top:1px solid var(--line);
  background: rgba(0,0,0,0.22);
  padding:22px 0;
}
.footer-inner{display:flex; align-items:center; justify-content:space-between; gap:12px}

.modal{position:fixed; inset:0; display:none; z-index:40}
.modal.show{display:block}
.modal-backdrop{position:absolute; inset:0; background: rgba(0,0,0,0.72)}
.modal-panel{
  position:relative;
  max-width:560px;
  margin: 6vh auto;
  border:1px solid rgba(201,176,121,0.25);
  border-radius:var(--radius2);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  box-shadow: var(--shadow);
  padding:16px;
}
.modal-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:10px}
.modal-title{font-family:var(--serif); font-size:20px; margin-top:6px}
.modal-form{display:flex; flex-direction:column; gap:12px}
.field{display:flex; flex-direction:column; gap:6px}
.field span{font-size:12px; color:var(--muted2)}
.field input, .field select{
  padding:12px 12px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(0,0,0,0.25);
  color:var(--text);
  outline:none;
}
.field input:focus, .field select:focus{border-color: rgba(201,176,121,0.45)}

/* v4.8.15: Simple grid utility for landing-page forms */
.form-grid{display:grid; grid-template-columns: 1fr 1fr; gap:14px}
@media (max-width: 760px){
  .form-grid{grid-template-columns: 1fr}
}
.row{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.consent{border-top:1px solid var(--line); padding-top:10px}

@media (max-width: 980px){
  .hero-inner{grid-template-columns:1fr; }
  h1{font-size:38px}
  .engine-grid{grid-template-columns:1fr}
  .grid-3{grid-template-columns:1fr}
}

/* V1.2 additions: segmented controls + view switching */
.seg-row{display:flex;gap:10px;align-items:center;justify-content:space-between;margin:14px 0;padding:14px;border:1px solid rgba(255,255,255,0.08);border-radius:16px;background:rgba(14,13,12,0.35)}
.seg-left{min-width:220px}
.seg-title{font-family:var(--sans);font-weight:600;color:rgba(255,255,255,0.92);font-size:14px}
.seg-hint{font-family:var(--sans);font-weight:400;color:rgba(183,176,167,0.85);font-size:12px;margin-top:6px}
.seg{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.seg button{appearance:none;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.03);color:rgba(255,255,255,0.82);font-family:var(--sans);font-size:12px;padding:10px 12px;border-radius:999px;cursor:pointer;transition:all .15s ease}
.seg button:hover{border-color:rgba(201,176,121,0.35);background:rgba(201,176,121,0.06)}
.seg button.active{border-color:rgba(201,176,121,0.55);background:rgba(201,176,121,0.10);color:rgba(255,255,255,0.95)}
.seg-status{font-family:var(--sans);font-size:12px;color:rgba(183,176,167,0.85);margin-top:10px}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:saturate(.8)}
.view{display:none}
.view.active{display:block}
.view-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* V2 branding */
.tm{font-size:0.92em; vertical-align:0.15em; opacity:0.85}


/* V3.4 Polish: lighter backing behind Step panels */
/* V3.4 Polish: primary start button prominence */
.btn-hero{
  width: 100%;
  padding: 16px 18px;
  font-size: 16px;
  letter-spacing: 0.2px;
}
@media(min-width: 820px){
  .btn-hero{ width: auto; min-width: 260px; padding: 16px 22px; font-size: 16px; }
}

/* Maintain dark inner boxes contrast */
.light-panel .panel{
  background: #0f1115;
  color: #EAE4D9;
}

.light-panel h2,
.light-panel h3{
  color: #111111;
}

/* V3.5.1 Contrast: force white background for Step panels (high specificity + end-of-file override) */
.panel.light-panel{
  background: #EAE4D9 !important;
  color: #111111 !important;
  border-radius: 16px;
  padding: 28px 24px;
  margin-bottom: 28px;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
}
/* Keep inner dark boxes dark */
.panel.light-panel .panel{
  background: #0f1115;
  color: #EAE4D9;
  border: 1px solid rgba(255,255,255,0.10);
}
/* Make headings within the white panel readable */
.panel.light-panel .panel-h,
.panel.light-panel .panel-title,
.panel.light-panel h2,
.panel.light-panel h3,
.panel.light-panel .micro,
.panel.light-panel .muted{
  color: #111111 !important;
}


/* V3.5.2 Shell: make the entire engine section white (everything below "Build your profile") */
.engine{
  background:#EAE4D9 !important;
  color:#111111;
}

/* Section heading text should read on white */
.engine .section-head h2,
.engine .section-head p,
.engine .section-head .muted,
.engine .section-head .micro{
  color:#111111 !important;
}
.engine .section-head p{
  opacity:0.72;
}

/* Keep the "large dark boxes" inside the white shell */
.engine .controls .block,
.engine .results .result-card{
  background: var(--panel) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 18px 60px rgba(0,0,0,0.22);
}

/* Ensure labels inside dark boxes remain legible */
.engine .block-title,
.engine .seg-status,
.engine .pill,
.engine label,
.engine .micro{
  color: var(--text);
}
.engine .muted{
  color: rgba(244,240,234,0.75);
}

/* Optional: soften the white edge transitions */
.engine{
  box-shadow: 0 -1px 0 rgba(255,255,255,0.0);
}


/* V3.6 – Warmed Architectural Greige Palette */
:root{
  --surface-base: #F3EADF;       /* warmed greige */
  --surface-alt: #ECE1D3;
  --ink-strong: #121315;
  --ink-muted: rgba(18,19,21,0.65);
  --line-soft: rgba(40,32,20,0.07);
}

.engine-shell, .engine, #engine, .engine-wrap{
  background: var(--surface-base) !important;
}

.engine-shell h1,
.engine-shell h2,
.engine-shell h3{
  color: var(--ink-strong);
}

.engine-shell .muted,
.engine-shell .micro{
  color: var(--ink-muted);
}

/* Refine dark cards slightly softer for harmony */
.panel{
  background: #131418;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}

/* Softer card borders on greige surface */
.panel.light-panel{
  border: 1px solid var(--line-soft);
}

/* V3.6.1 – Slightly Warmer Architectural Stone
   Surface warmed to reduce metallic tone and introduce residential softness */

/* V3.7 – Champagne Editorial Surface */
.engine-shell, .engine, #engine, .engine-wrap{
  background: var(--surface-base) !important;
}

.engine-shell h1,
.engine-shell h2,
.engine-shell h3{
  color: var(--ink-strong);
}

.engine-shell .muted,
.engine-shell .micro{
  color: var(--ink-muted);
}

/* Adjust dark cards slightly warmer for harmony */
.panel{
  background: #181512;
  border: 1px solid rgba(255,255,255,0.05);
  box-shadow: 0 10px 28px rgba(0,0,0,0.28);
}


/* V3.8.1 Compare Modal (scoped — does NOT affect core unlock modal) */
.compare-modal{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
}
.compare-modal.hidden{ display: none; }

.compare-modal .modal-inner{
  background: #1b1815;
  padding: 32px;
  width: 90%;
  max-width: 800px;
  border-radius: 16px;
}
.compare-modal .compare-grid{
  display: grid;
  gap: 16px;
  margin-top: 16px;
}
.compare-modal .compare-card{
  background: #22201c;
  padding: 16px;
  border-radius: 12px;
}


/* V3.9 – Three-Level Contrast Refinement */

/* Medium-dark grey for Step containers */
.engine-shell .panel.light-panel,
.engine-shell .panel.step-container,
.engine-shell .panel.step-panel{
  background: #2A2724 !important;   /* medium-dark charcoal stone */
  color: #F5F0E8 !important;
  border: 1px solid rgba(255,255,255,0.06);
}

/* Ensure inner cards remain darker for hierarchy */
.engine-shell .panel.light-panel .panel,
.engine-shell .panel.step-container .panel,
.engine-shell .panel.step-panel .panel{
  background: #181512 !important;   /* deeper espresso */
  border: 1px solid rgba(255,255,255,0.05);
}

/* Improve heading contrast inside step containers */
.engine-shell .panel.light-panel h2,
.engine-shell .panel.light-panel h3,
.engine-shell .panel.step-container h2,
.engine-shell .panel.step-container h3{
  color: #FFFFFF !important;
}

/* Subtext inside step containers */
.engine-shell .panel.light-panel .muted,
.engine-shell .panel.step-container .muted{
  color: rgba(255,255,255,0.65) !important;
}


/* V3.9.1 – Three-level contrast (explicit step-container class) */
/* Level 2: Step containers (medium-dark warm charcoal) */
.engine-shell .panel.step-container{
  background: #2B2723 !important;
  color: #F5F0E8 !important;
  border: 1px solid rgba(255,255,255,0.07);
  box-shadow: 0 10px 26px rgba(0,0,0,0.22);
}

/* Level 3: Inner cards (deeper espresso) */
.engine-shell .panel.step-container .panel{
  background: #181512 !important;
  color: #FFFFFF;
  border: 1px solid rgba(255,255,255,0.05);
}

/* Headings on step containers */
.engine-shell .panel.step-container h2,
.engine-shell .panel.step-container h3,
.engine-shell .panel.step-container .panel-title{
  color: #FFFFFF !important;
}

/* Muted text on step containers */
.engine-shell .panel.step-container .muted,
.engine-shell .panel.step-container .micro{
  color: rgba(255,255,255,0.68) !important;
}

/* V3.9.2 – Three-level contrast (correct selectors: .block + .result-card) */
/* Level 2: Step blocks + Priority Levels card */
.engine .controls .block,
.engine .results .result-card{
  background: #2B2723 !important;   /* medium-dark warm charcoal */
  border: 1px solid rgba(255,255,255,0.06) !important;
}

/* Level 3: inner cards (profiles + tuner rows) stay darker */
.engine .preset-grid .preset,
.engine .preset-grid .preset-card,
.engine #segControls .seg-row,
.engine #segControls .seg-item,
.engine #segControls .seg-card,
.engine .results .result-main{
  background: #181512 !important;   /* deeper espresso */
  border-color: rgba(255,255,255,0.05) !important;
}

/* Keep text readable */
.engine .controls .block .block-title,
.engine .controls .block .kicker,
.engine .results .result-card .result-title{
  color: #fff !important;
}


/* V3.9.3 – Editorial refinement (avoid SaaS feel)
   - Lift inner cards slightly (lighter)
   - Soften borders
   - Increase spacing between Step containers
*/

/* Step container spacing */
.engine-shell .block,
.engine-shell .result-card{
  margin-bottom: 32px !important;
}

/* Inner selection cards (presets) */
.engine-shell .block .preset,
.engine-shell .block .preset-card,
.engine-shell .block .profile-card,
.engine-shell .block .choice,
.engine-shell .block .card{
  background: #1D1916 !important; /* slightly lighter than espresso */
  border: 1px solid rgba(255,255,255,0.045) !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.18) !important;
}

/* Inner tuner rows/cards */
.engine-shell .block .axis,
.engine-shell .block .axis-row,
.engine-shell .block .tuner,
.engine-shell .block .tuner-row,
.engine-shell .block .row{
  background: #1D1916 !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Slightly soften pill borders inside tuners (if present) */
.engine-shell .pill,
.engine-shell .pill-btn,
.engine-shell .priority-pill{
  border-color: rgba(255,255,255,0.10) !important;
}


/* V3.9.4 – Fix preset selection highlight (editorial overrides were too strong) */
.engine-shell .block .preset.active{
  border-color: rgba(201,176,121,0.60) !important;
  background: rgba(201,176,121,0.09) !important;
}
.engine-shell .block .preset.active .preset-name,
.engine-shell .block .preset.active .preset-desc{
  color: #ffffff !important;
}


/* V3.9.5 – Fix preset highlight + consistent rounding */

/* Ensure profile selection visibly highlights (override any editorial card backgrounds) */
.preset.active,
.engine-shell .preset.active,
.engine-shell .block .preset.active{
  border-color: rgba(201,176,121,0.75) !important;
  background: rgba(201,176,121,0.10) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,0.28) !important;
}

/* Add a subtle inner glow so it's obvious even on dark surfaces */
.preset.active::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:16px;
  box-shadow: inset 0 0 0 1px rgba(201,176,121,0.25);
  pointer-events:none;
}
.preset{
  position:relative; /* needed for ::after */
}

/* Results + Priority Levels rounding consistency */
.result-card,
.engine .results .result-card{
  border-radius: var(--radius2) !important;
  overflow: hidden; /* clip children so corners stay rounded */
}

/* v4.7.80 – iOS: prevent tiny horizontal overflow + keep radar from stretching */
html, body{
  overflow-x: hidden;
}

/* Make sure results/radar never exceed viewport width */
.engine, .engine-shell, .results, .result-card, .result-main{
  max-width: 100%;
}

.radar, .radar-wrap, .radar-shell{
  max-width: 100%;
  overflow: hidden;
}

canvas.radar-canvas{
  display: block;
  max-width: 100%;
}

/* If the free result hero card uses a different wrapper, round it too */
.free-card,
.results-hero,
.results-card{
  border-radius: var(--radius2) !important;
  overflow: hidden;
}

/* Inner sections should not square off the parent */
.result-head,
.result-main,
.result-body{
  border-radius: inherit;
}

/* V3.9.6 – Gold step labels + cleaner cards */
.kicker, .eyebrow, .tagline, .label-small, .step-label{
  color: var(--gold) !important;
}

/* Explicitly target STEP 1 / STEP 2 text (often in .block smallcaps) */
.block .smallcaps,
.block .kicker,
.block .eyebrow{
  color: var(--gold) !important;
}

/* Brighter profile highlight */
.preset.active,
.engine-shell .preset.active,
.engine-shell .block .preset.active{
  border-color: rgba(201,176,121,0.95) !important;
  background: rgba(201,176,121,0.18) !important;
  box-shadow: 0 16px 42px rgba(201,176,121,0.10), 0 16px 42px rgba(0,0,0,0.28) !important;
}

/* Stronger inner glow */
.preset.active::after{
  box-shadow: inset 0 0 0 2px rgba(201,176,121,0.35);
}

/* Remove any inset panels in results/priority if present */
.result-card .panel,
.result-card .card{
  background: transparent;
  border: none;
  box-shadow: none;
}


/* V3.9.7 – Fix remaining issues: gold step labels + remove inner result-main box */

/* Force Step 1/2 kicker gold (some rules were overriding via inherited color) */
.engine-shell .block-head .kicker{
  color: rgba(201,176,121,0.95) !important;
}

/* Remove the inner dark 'result-main' surface for Results + Priority Levels cards */
.engine-shell .result-card .result-main{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep spacing readable after removing inner panel */
.engine-shell .result-card .result-main .topmatch,
.engine-shell .result-card .result-main .insights,
.engine-shell .result-card .result-main .bullets{
  margin-top: 6px;
}

/* If any nested panels exist inside results, flatten them */
.engine-shell .result-card .result-main .panel,
.engine-shell .result-card .result-main .card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}


/* V3.9.8 – Fix: Step labels gold + remove inner result-main panel (no engine-shell dependency) */

/* Step 1 / Step 2 labels (kicker) */
.controls .block-head .kicker{
  color: rgba(201,176,121,0.95) !important;
}

/* Keep kicker gold in results too */
.results .result-card .kicker{
  color: rgba(201,176,121,0.95) !important;
}

/* Remove inner dark panel in both results cards */
.result-main{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ensure any nested helper panels inside results are flattened */
.result-main .panel,
.result-main .card{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Keep layout spacing after removing inner panel padding */
.result-card{
  padding: 18px !important;
}

/* Slightly brighter profile highlight */
.preset.active{
  border-color: rgba(201,176,121,0.98) !important;
  background: rgba(201,176,121,0.20) !important;
}
.preset.active::after{
  box-shadow: inset 0 0 0 2px rgba(201,176,121,0.40);
}


/* V3.9.9 – Target the real selectors (specificity fix) */

/* 1) Step 1 / Step 2 labels (kicker) back to gold */
.engine .controls .block .block-head .kicker,
.engine .controls .block .kicker,
.engine .controls .block .pill{
  color: rgba(201,176,121,0.95) !important;
}

/* 2) Remove inner dark panel in BOTH Priority Levels + Results
      The culprit was: .engine .results .result-main { background:#181512 !important; }
      Override with equal specificity. */
.engine .results .result-main{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Keep layout breathing room after removing inner padding */
.engine .results .result-card{
  padding: 18px !important;
}

/* Optional: soften divider since content is now on main card */
.engine .results .tradeoff{
  border-top: 1px solid rgba(255,255,255,0.10);
}


/* V4.0 – Subtle Editorial Hover Only (No Lock-in, No Typography Changes) */

.preset{
  transition: transform 180ms ease-out, box-shadow 200ms ease-out;
  will-change: transform;
}

.preset:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(0,0,0,0.20);
}


/* V4.1 – Hero CTA emphasis */

.btn-start-hero{
  display: inline-block;
  font-size: 0.98rem; /* ~15% smaller */
  padding: 14px 30px; /* ~15% smaller */
  font-weight: 600;
  letter-spacing: 0.04em;
  border-radius: 999px;
}

.btn-start-hero:hover{
  transform: translateY(-1px);
}

/* V4.3 – Start button gold text */
.btn-start-hero{
  color: var(--gold) !important;
}
.btn-start-hero:hover{
  color: var(--gold) !important;
}


/* v4.4.1 – Clean box meta labels (keep header/footer branding intact) */

/* Hide Step 2 meta line if present */
.engine .controls .block .meta,
.engine .controls .block .block-foot,
.engine .controls .block .block-footer{
  display: none !important;
}

/* Hide priority version badge if still present */
.engine .results .result-card .version,
.engine .results .result-card .badge,
.engine .results .result-card .version-badge{
  display:none !important;
}

/* Hide What you'll do footer row but keep card structure */
#cardFoot, .card-foot{
  display:none !important;
}


/* Shortlist preview (locked state) */
#previewBody{display:block}
#gatedBody{display:block}
.result-card.locked #gatedBody{display:none}
.result-card.unlocked #previewBody{display:none}

/* Allow the locked card to be readable; keep it dim but clickable elements are elsewhere */
.result-card.preview-grid{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:14px; margin-top:14px}
.preview-card{
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px;
  background: rgba(0,0,0,0.10);
}

.preview-radar{
  width:min(320px, 100%);
  aspect-ratio: 1 / 1;
  margin: 14px auto 10px;
}
.preview-radar canvas{
  width:100%;
  height:auto;
  display:block;
}
.preview-title{font-family:var(--serif); font-size:16px; letter-spacing:0.2px}
.preview-sub{margin-top:8px; font-size:12.5px; color:rgba(183,176,167,0.88)}
@media (max-width: 820px){
  .preview-grid{grid-template-columns:1fr}
}

/* ------------------------------
   Engine compatibility banner
   (no popups; blocks UI in hard mode)
-------------------------------- */
.compat-banner{
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  border-radius: 14px;
  padding: 14px 16px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(20,20,22,0.82);
  color: rgba(255,255,255,0.92);
  box-shadow: 0 10px 30px rgba(0,0,0,0.30);
}
.compat-banner .compat-title{
  font-weight: 650;
  letter-spacing: 0.01em;
  margin-bottom: 6px;
}
.compat-banner .compat-text{
  font-size: 14px;
  line-height: 1.35;
  opacity: 0.92;
}
.compat-banner.compat-soft{
  border-color: rgba(214, 178, 94, 0.35);
}
.compat-banner.compat-hard{
  border-color: rgba(255, 120, 120, 0.35);
}

body.compat-hard #viewInput,
body.compat-hard #viewEngine,
body.compat-hard #viewResults{
  display: none !important;
}


/* Results copy polish */
.results-intro{
  font-size: 0.95rem;
  color: var(--muted);
  margin: 0 0 16px 0;
  max-width: 58ch;
}
.top-badge{
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(196, 165, 96, 0.18);
  color: var(--gold);
  margin-top: 2px;
}
.unlock-intro{
  font-size: 0.95rem;
  color: var(--muted);
  margin: 14px 0 10px 0;
  max-width: 70ch;
}


/* Unlock section polish */
.unlock-block{
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.unlock-intro{
  margin: 0 0 12px 0;
  font-size: 0.95rem;
  color: var(--muted);
  max-width: 54ch;
}
/* Give locked section a touch more breathing room */
.unlock-block .hidden-matches,
.unlock-block #hiddenMatches,
.unlock-block #lockedMatches{
  margin-top: 10px;
}


/* --- v4.7.80 Unlock overlay + clickable CTA --- */
.locked{
  position: relative;
  pointer-events: auto; /* allow CTA interactions */
}
/* Dim the locked preview via overlay (keeps layout + content visible) */
.locked::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.28);
  border-radius: inherit;
  pointer-events:none;
}
/* Keep header/CTA above overlay */
.locked .result-head{
  position: relative;
  z-index: 2;
}
/* Keep locked preview content visible but slightly softened */
.locked .result-body,
.locked .preview,
.locked .preview-grid,
.locked .preview-body{
  position: relative;
  z-index: 1;
  opacity: 0.78;
}
/* Prevent interactions with preview tiles while locked */
.locked .result-body,
.locked .preview,
.locked .preview-grid,
.locked .preview-body{
  pointer-events: none;
}

/* High-contrast CTA */
.btn-unlock{
  background: rgba(212,175,55,0.26);
  border: 1px solid rgba(212,175,55,0.85);
  color: rgba(255,255,255,0.96);
  box-shadow: 0 14px 34px rgba(0,0,0,0.40);
}
.btn-unlock:hover{
  background: rgba(212,175,55,0.36);
  border-color: rgba(212,175,55,0.98);
  box-shadow: 0 18px 44px rgba(0,0,0,0.48);
}
.btn-unlock:active{
  transform: translateY(1px);
}


/* v4.7.80: hide unlock metric tiles */
#detailBlock{display:none;}


/* v4.7.80: Focus on primary CTA — hide secondary actions */
#secondaryCta,
button.share,
#shareBtn {
  display: none !important;
}


/* v4.7.80: Completely hide Share button on results/reveal page */
button.share,
#shareBtn,
.share,
button[aria-label="Share"] {
  display: none !important;
}


/* v4.7.80: Hide Share containers used by CORE_SHARE module */
#shareFree,
#shareUnlocked,
#shareFree [data-share='1'],
#shareUnlocked [data-share='1']{
  display:none !important;
}


/* v4.7.80: Keep Share next to Edit priorities; hide Share in Next step / CTA row */
#shareFree{
  display:inline-block !important;
}
#shareUnlocked{
  display:none !important;
}


/* v4.7.80: Share visibility rules
   - Keep Share visible beside Edit priorities (shareFree)
   - Hide Share everywhere else (shareUnlocked)
   These overrides intentionally out-specify earlier global hide rules. */
#shareFree{
  display: inline-block !important;
}
#shareFree button,
#shareFree .share,
#shareFree button.share,
#shareFree button[aria-label="Share"],
#shareFree [data-share='1']{
  display: inline-flex !important;
}
#shareUnlocked,
#shareUnlocked *,
#shareUnlocked [data-share='1']{
  display: none !important;
}


/* v4.7.80: Top 3 expandable neighbourhood briefs */
.rank-row{
  width: 100%;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  cursor: pointer;
}
.rank-row:focus{
  outline: none;
}
.rank-row[aria-expanded="true"] .rank-name{
  text-decoration: none;
}
.rank{
  position: relative;
}
.rank-row::after{
  content: "▾";
  position: absolute;
  right: 18px;
  margin-top: 2px;
  opacity: 0.65;
  transform: translateY(0);
  transition: transform 160ms ease, opacity 160ms ease;
}
.rank-row[aria-expanded="true"]::after{
  transform: rotate(180deg);
  opacity: 0.9;
}
.rank-detail{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.rank-detail-title{
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.rank-detail-list{
  margin: 0;
  padding-left: 18px;
}
.rank-detail-list li{
  margin: 6px 0;
  color: rgba(255,255,255,0.86);
}
.rank-detail-note{
  margin-top: 10px;
  font-size: 0.85rem;
  color: var(--muted);
}


/* v4.7.80: Fix Top 3 title color + chevron positioning */

/* Force neighbourhood titles to white (remove link-style blue) */
.rank-name{
  color: #ffffff !important;
}

/* Improve layout spacing so chevron does not overlap score */
.rank-row{
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-right: 28px; /* space for chevron */
}

/* Reposition chevron safely to far right */
.rank-row::after{
  content: "▾";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0.65;
  font-size: 0.9rem;
  pointer-events: none;
}

.rank-row[aria-expanded="true"]::after{
  transform: translateY(-50%) rotate(180deg);
  opacity: 0.9;
}


/* v4.7.80: Hide accordion chevron completely */
.rank-row::after{
  content: none !important;
  display: none !important;
}


/* v4.7.80: Subtle hover glow for Top 3 rank cards (similar to Profiles) */
.rank-card{
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.rank-card:hover{
  box-shadow: 0 0 0 1px rgba(212,175,55,0.35),
              0 8px 24px rgba(212,175,55,0.12);
  border-color: rgba(212,175,55,0.45);
  transform: translateY(-2px);
}


/* v4.7.80: Hover glow for Top 3 rank items (correct selectors) */
.rank{
  transition: box-shadow 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.rank:hover{
  box-shadow: 0 0 0 1px rgba(212,175,55,0.28),
              0 10px 26px rgba(212,175,55,0.10);
  border-color: rgba(212,175,55,0.38);
  transform: translateY(-2px);
}

/* Keep text crisp on hover */
.rank:hover .rank-name,
.rank:hover .rank-sub{
  color: rgba(255,255,255,0.95);
}


/* v4.7.80: Tone down Top 3 hover — remove glow, keep subtle highlight */
.rank:hover{
  box-shadow: none !important;
  transform: none !important;
}
.rank{
  border: 1px solid rgba(255,255,255,0.08);
  background: transparent;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.rank:hover{
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.14) !important;
}


/* v4.7.80: Make entire rank card clickable reliably */

/* Make rank container positioning context */
.rank{
  position: relative;
}

/* Stretch the clickable button over entire card */
.rank-row{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  background: transparent;
  border: none;
  cursor: pointer;
}

/* Ensure content sits visually above but does not block click */
.rank-name,
.rank-score,
.rank-sub{
  position: relative;
  z-index: 1;
  pointer-events: none;
}

/* Keep expanded detail interactive */
.rank-detail{
  position: relative;
  z-index: 3;
  pointer-events: auto;
}


/* v4.7.80: Fix Top 3 layout after full-card click change.
   Revert absolute overlay button approach; use card click delegation instead. */
.rank{ position: relative; cursor: pointer; }
.rank-row{
  position: static !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  z-index: auto !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 0 !important;
  background: transparent !important;
}
.rank-name, .rank-score, .rank-sub{
  pointer-events: auto !important;
  z-index: auto !important;
}

/* Hover highlight (gold) without glow */
.rank{
  transition: background 0.18s ease, border-color 0.18s ease;
}
.rank:hover{
  background: rgba(212,175,55,0.06) !important;
  border-color: rgba(212,175,55,0.28) !important;
  box-shadow: none !important;
  transform: none !important;
}


/* v4.7.80: Ensure title area is clickable */
.rank-row, .rank-name, .rank-score, .rank-sub{
  cursor: pointer;
}
.rank-name, .rank-score, .rank-sub{
  pointer-events: auto !important;
}


/* v4.7.80: Rank rows as full-card buttons (title + strengths line clickable) */
.rank-row{
  width: 100%;
  display: block;
  padding: 18px 18px 14px 18px;
  border-radius: 18px;
}
.rank-name-score{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
/* If markup doesn't include wrapper, still keep spacing */
.rank-row .rank-sub{
  margin-top: 10px;
}


/* v4.7.80: Restore Top 3 card format (stacked title + score, strengths line below) */
.rank{
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.02);
  overflow: hidden;
}

/* Make the button the full card surface, with vertical layout */
.rank-row{
  width: 100% !important;
  display: block !important;
  text-align: left !important;
  padding: 18px 18px 16px 18px !important;
  background: transparent !important;
}

/* Header row: title left, score right */
.rank-name-score{
  display: flex !important;
  justify-content: space-between !important;
  align-items: baseline !important;
  gap: 14px !important;
}

/* Strengths line sits underneath, not to the right */
.rank-row .rank-sub{
  display: block !important;
  margin-top: 10px !important;
  color: rgba(255,255,255,0.72);
}

/* Hover highlight (gold tint, no glow) */
.rank{
  transition: background 0.18s ease, border-color 0.18s ease;
}
.rank:hover{
  background: rgba(212,175,55,0.06) !important;
  border-color: rgba(212,175,55,0.28) !important;
  box-shadow: none !important;
  transform: none !important;
}


/* v4.7.80: Make whole Top 3 card clickable by wrapping title + strengths inside the button */
.rank-row{
  width: 100%;
  display: block;
  text-align: left;
  padding: 18px 18px 16px 18px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.rank-head{
  display:flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
}
.rank-row .rank-sub{
  margin-top: 10px;
  display:block;
}

/* Keep the expanded panel visually separated and interactive */
.rank-detail{
  margin: 0 18px 16px 18px;
}


/* v4.7.80: Narrative brief styling (mobile-first) */
.nb-overview p{
  margin: 0 0 10px 0;
  color: rgba(255,255,255,0.88);
  line-height: 1.45;
}
.nb-section-title{
  margin-top: 12px;
  margin-bottom: 8px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.nb-list{
  margin: 0;
  padding-left: 18px;
}
.nb-list li{
  margin: 6px 0;
  color: rgba(255,255,255,0.84);
}
.nb-community{
  margin: 0 0 6px 0;
  color: rgba(255,255,255,0.84);
  line-height: 1.45;
}
.nb-intel li strong{
  color: rgba(255,255,255,0.92);
}

/* v4.7.80: Gold section titles in neighbourhood brief */
.neighbourhood-brief h3,
.neighbourhood-brief h4,
.neighbourhood-brief .section-title {
    color: #C9A227 !important;
}


/* v4.7.80: Ensure neighbourhood brief section headings render in gold */
.rank-detail-title,
.nb-section-title{
  color: #C9A227 !important;
}


/* v4.7.80: Shrink radar chart on desktop only */
@media (min-width: 1024px){
  .radar-container,
  .radar-chart,
  canvas.radar-chart{
    max-width: 520px !important;
    margin-left: auto;
    margin-right: auto;
  }
}


/* v4.7.80: Desktop radar size tune (targets actual radar wrapper) */
@media (min-width: 1024px){
  .radar-shell{
    width: min(420px, 100%) !important;
  }
  .chart-wrap{
    max-width: 560px !important;
  }
}


/* v4.7.80: Prevent iOS Safari zoom on form focus (ensure >=16px font-size) */
html { -webkit-text-size-adjust: 100%; }

@media (max-width: 768px){
  input, select, textarea {
    font-size: 16px !important;
  }
  .unlock-modal input,
  .unlock-modal select,
  .unlock-modal textarea,
  .unlock-sheet input,
  .unlock-sheet select,
  .unlock-sheet textarea,
  .modal input,
  .modal select,
  .modal textarea {
    font-size: 16px !important;
  }
}


/* v4.7.80 safety: never show Save/Compare in the Priority levels (home) card */
#viewEngine #saveResultBtn,
#viewEngine #compareSavedBtn {
  display: none !important;
}


/* v4.7.80: Hide legacy Save Result / Compare Saved buttons everywhere */
#saveResultBtn,
#compareSavedBtn {
  display: none !important;
}


/* v4.7.80: Hide Next step 'Tip: tune weights...' line only */
.cta-box .micro.muted {
  display: none !important;
}


/* v4.8.12: Compliance footer + accordions */
.compliance-footer{
  margin-top: 40px;
}

.compliance-accordion{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer-section{ margin-bottom: 10px; }

.accordion-toggle{
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  padding: 8px 0;
  cursor: pointer;
  font-weight: 600;
  color: inherit;
}

.accordion-content{
  display: none;
  padding: 0 0 8px 0;
  line-height: 1.55;
}

.accordion-content p{ margin: 8px 0; }

.inline-disclaimer{
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
  margin: 10px 0 0 0;
}

.consent .consent-link{
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.version-tag{ margin-top: 6px; }


/* v4.8.12: Placeholder style for optional dropdowns */


/* v4.8.12: Force muted tone for unselected dropdowns */
select.select-empty {
  color: rgba(255,255,255,0.55) !important;
}


.consent-check{display:flex;align-items:flex-start;gap:10px;margin:6px 0 2px;}
.consent-check input{margin-top:2px;flex:0 0 auto;}
.consent-check span{display:block;}

.is-hidden-next{display:none !important;}
.footer-inner{align-items:flex-start;}
.footer-title{font-size:18px; line-height:1.2; font-weight:600;}
.footer-sub{font-size:14px; line-height:1.4; color:var(--muted2); margin-top:4px;}
.footer-meta{margin-top:6px; display:flex; flex-direction:column; gap:4px; color:var(--muted2); font-size:14px;}
.footer-right{font-size:14px; line-height:1.4; color:var(--muted2); text-align:right;}
@media (max-width: 760px){
  .footer-inner{flex-direction:column; align-items:flex-start; gap:8px;}
  .footer-title{font-size:16px;}
  .footer-sub,.footer-right,.footer-meta{font-size:13px; text-align:left;}
}


/* v5.5 polish fix: landing footer cleanup */
#landingFooter .footer-inner{
  justify-content:flex-start;
  gap:8px;
}
#landingFooter .footer-right:empty{
  display:none;
}
#landingFooter .footer-title{
  font-size:16px;
}
#landingFooter .footer-sub{
  font-size:13px;
  margin-top:2px;
}


/* v5.5.3: Shared result CTA */
.shared-result-cta[hidden]{display:none !important;}
.shared-result-cta{
  margin: 14px 0 2px 0;
  padding: 14px 14px 12px;
  border: 1px solid rgba(198,168,90,0.20);
  border-radius: 16px;
  background: rgba(198,168,90,0.05);
}
.shared-result-cta-title{
  font-size: 14px;
  font-weight: 600;
  color: #EAE4D9;
  margin-bottom: 6px;
}
.shared-result-cta-copy{
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
}
.shared-result-cta-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.shared-result-cta-actions .btn{
  min-width: 220px;
}
@media (max-width: 640px){
  .shared-result-cta-actions .btn{
    width: 100%;
    min-width: 0;
  }
}


/* v5.5.16 cookie banner */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:1200;display:none}.cookie-banner.is-visible{display:block}.cookie-banner__inner{max-width:1040px;margin:0 auto;display:flex;gap:18px;align-items:center;justify-content:space-between;padding:18px 20px;border-radius:18px;border:1px solid rgba(198,161,91,.28);background:rgba(17,17,20,.96);box-shadow:0 18px 48px rgba(0,0,0,.28)}.cookie-banner__title{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#c6a15b;margin-bottom:4px}.cookie-banner__copy p{margin:0;color:rgba(255,255,255,.82);font-size:14px;line-height:1.5}.cookie-banner__actions{display:flex;gap:10px;flex-shrink:0}.cookie-btn{min-width:110px}.consent-check{display:flex;gap:10px;align-items:flex-start}.consent-check input{margin-top:3px}@media (max-width:720px){.cookie-banner__inner{flex-direction:column;align-items:flex-start}.cookie-banner__actions{width:100%}.cookie-btn{flex:1}}