/* Approved visual candidate: red / black / white layer.
 * Loaded last by the host app. It owns appearance only; existing controls,
 * data attributes, labels and state transitions remain authoritative. */
:root {
  /* Legacy aliases consumed by the existing app styles. */
  --ink: #131820;
  --navy: #131820;
  --blue: #c62828;
  --blue-dark: #b6201b;
  --muted: #5f6873;
  --line: #dfe3e8;
  --soft: #f3f4f5;
  --light: #fff1f1;
  --paper: #ffffff;
  --brand-ink: #131820;
  --brand-muted: #5f6873;
  --brand-line: #dfe3e8;
  --brand-soft: #f3f4f5;
  --brand-paper: #ffffff;
  --brand-red: #c62828;
  --brand-red-dark: #b6201b;
  --brand-red-soft: #fff1f1;
  --brand-dark: #252a30;
  --brand-max: 1360px;
  --brand-header: 74px;
}

html { overflow-x: hidden; }
.option[aria-pressed="true"] strong { color: var(--brand-red-dark); }
.task-tab, .task-tab:hover { color: var(--brand-ink); border-color: var(--brand-line); }
.task-tab.active, .task-tab[aria-pressed="true"] { color: var(--brand-red-dark); border-color: var(--brand-red); background: var(--brand-red-soft); }
.video-supplier-assessment { max-width: 100%; overflow-x: auto; }
body { color: var(--brand-ink); background: var(--brand-paper); }
body, button, input, select, textarea { font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
button, a, input, select, textarea, summary { touch-action: manipulation; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { outline: 3px solid #c62828; outline-offset: 3px; }

/* The shell hooks are supplied by the host render. */
.site-header, .header, #header { min-height: var(--brand-header); background: #fff; border-bottom: 1px solid var(--brand-line); }
.site-header { height: var(--brand-header); position: sticky; top: 0; z-index: 50; }
.site-header .header-inner, .header .header-inner { min-height: var(--brand-header); height: var(--brand-header); width: min(calc(100% - 40px), var(--brand-max)); margin: 0 auto; }
.brand strong, .site-header .brand strong { color: var(--brand-ink); }
.brand small, .site-header .brand small { color: var(--brand-muted); }
.brand-mark i, .brand-symbol i { background: var(--brand-red); }
.brand-mark i:nth-child(3), .brand-symbol i:nth-child(3) { background: #f3b71b; }
.main-nav, .header nav { color: var(--brand-ink); }
.main-nav > a::after { background: var(--brand-red); }
.btn, .site-header .btn { border-radius: 4px; }
.btn-primary, .primary, .lx-nav-cta { color: #fff; background: var(--brand-red); border-color: var(--brand-red); }
.btn-primary:hover, .primary:hover, .lx-nav-cta:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }
.btn-dark { color: #fff; background: var(--brand-ink); border-color: var(--brand-ink); }
.btn-light, .secondary { color: var(--brand-ink); background: #fff; border-color: var(--brand-line); }
.secondary:hover { background: var(--brand-soft); border-color: #b9c0c8; }

/* Home / derived hero: dark photographic field, readable left copy. */
.brand-hero {
  position: relative; min-height: 420px; overflow: hidden; color: #fff;
  background: #101518;
}
.brand-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(9,11,14,.5), transparent 58%); pointer-events: none; }
.brand-hero > *, .brand-hero .container { position: relative; z-index: 1; }
.brand-hero.hero-grid, .brand-hero .hero-grid, .brand-hero .hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .95fr); align-items: center; gap: 48px; min-height: 420px; padding-top: 58px; padding-bottom: 58px; }
.brand-hero .hero-copy { max-width: 650px; }
.brand-hero h1, .brand-hero h2 { color: #fff; font-size: clamp(36px, 4.5vw, 62px); line-height: 1.08; letter-spacing: -.02em; }
.brand-hero p, .brand-hero .hero-intro { max-width: 610px; color: rgba(255,255,255,.86); font-size: 17px; line-height: 1.65; }
.brand-hero .eyebrow, .brand-hero .kicker { color: #fff; }
.brand-hero .eyebrow::before { background: var(--brand-red); }
.brand-hero .hero-visual, .brand-hero .hero-photo { min-height: 260px; border: 1px solid rgba(255,255,255,.22); background: rgba(13,18,24,.3); }
.brand-hero .hero-photo img, .brand-hero img { width: 100%; height: 100%; object-fit: cover; }
.brand-hero-photo { position: absolute; z-index: 0; top: 0; right: 0; width: 52%; height: 100%; overflow: hidden; background: #252a30; }
.brand-hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #101518 0%, rgba(16,21,24,.5) 18%, rgba(16,21,24,.08) 72%), linear-gradient(0deg, rgba(16,21,24,.42), transparent 52%); pointer-events: none; }
.brand-hero-photo img { position: absolute; left: -158.33%; top: -29.63%; width: 320%; height: auto; max-width: none; }
.hero-actions { gap: 12px; }

/* Horizontal process strip above questions. */
.brand-stepbar { width: 100%; padding: 24px max(20px, calc((100% - var(--brand-max)) / 2)); background: #f7f7f6; border-top: 1px solid var(--brand-line); border-bottom: 1px solid var(--brand-line); }
.brand-stepbar, .brand-stepbar ol, .brand-stepbar ul { display: flex; align-items: center; }
.brand-stepbar ol, .brand-stepbar ul { width: 100%; justify-content: space-between; gap: 0; list-style: none; padding: 0; margin: 0; }
.brand-stepbar li { position: relative; flex: 1 1 0; min-width: 0; text-align: center; color: var(--brand-muted); font-size: 12px; font-weight: 700; }
.brand-stepbar li::before { content: attr(data-step); position: relative; z-index: 1; display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto 9px; border-radius: 50%; color: var(--brand-muted); background: #e7e8ea; }
.brand-stepbar li::after { content: ""; position: absolute; top: 16px; left: 0; right: 0; height: 2px; background: #e2e3e5; }
.brand-stepbar li:first-child::after { left: 50%; }
.brand-stepbar li:last-child::after { right: 50%; }
.brand-stepbar li[aria-current="step"], .brand-stepbar li.is-active { color: var(--brand-red); }
.brand-stepbar li[aria-current="step"]::before, .brand-stepbar li.is-active::before { color: #fff; background: var(--brand-red); }
.brand-stepbar li[aria-current="step"]::after, .brand-stepbar li.is-active::after { background: #f0c6c6; }

/* Shared white stage and cards. */
.brand-stage { width: min(calc(100% - 40px), var(--brand-max)); margin: 0 auto; padding: 54px 0 80px; }
.brand-stage h1, .brand-stage h2, .brand-stage h3 { color: var(--brand-ink); }
.brand-stage p, .brand-stage .quiet, .brand-stage small { color: var(--brand-muted); }
.brand-stage .panel, .brand-stage .scenario-card, .brand-stage .solution-card, .brand-stage .procurement-entry, .brand-stage .panel, .brand-stage fieldset { border: 1px solid var(--brand-line); border-radius: 8px; background: #fff; box-shadow: 0 4px 18px rgba(19,24,32,.04); }
.scenario-card:first-child, .scenario-card:hover { border-color: #df7777; background: var(--brand-red-soft); box-shadow: 0 8px 24px rgba(198,40,40,.08); }
.scenario-card .card-go, .text-button, a { color: var(--brand-red); }
.scenario-card .card-go:hover, .text-button:hover, a:hover { color: var(--brand-red-dark); }

/* Original wizard: horizontal steps, scene above questions, content-first actions. */
.brand-stage .wizard-layout { display: block; min-height: 0; overflow: visible; border: 0; border-radius: 0; }
.brand-stage .wizard-main { padding: 0; min-width: 0; }
.brand-stage .wizard-progress { max-width: 760px; margin: 0 auto 10px; color: var(--brand-muted); }
.brand-stage .progress-track { max-width: 760px; background: #ececed; }
.brand-stage .progress-track i { background: var(--brand-red); }
.brand-stage #trailer-question-layout { display: flex; flex-direction: column; gap: 24px; }
.brand-stage #trailer-scene-panel { order: -1; width: 100%; margin: 0; border: 1px solid var(--brand-line); border-radius: 8px; background: #fff; }
.brand-stage #trailer-scene-panel > summary { padding: 14px 18px; color: var(--brand-ink); font-weight: 750; }
.brand-stage #trailer-scene-panel .trailer-scene { padding: 20px; }
.brand-stage .tv-visual { border-color: var(--brand-line); background: var(--brand-soft); }
.brand-stage .tv-node, .brand-stage .tv-steps li { border-color: var(--brand-line); background: #fff; }
.brand-stage .tv-node[data-tv-active], .brand-stage [data-viz-node][data-tv-active], .brand-stage [data-viz-step][data-tv-active] { color: var(--brand-ink); background: var(--brand-red-soft); border-color: var(--brand-red); box-shadow: inset 3px 0 var(--brand-red); transform: none; }
.brand-stage .tv-status-text, .brand-stage .tv-update-note { color: var(--brand-red); }
.brand-stage .tv-play { background: var(--brand-red); border-color: var(--brand-red); }
.brand-stage #question-heading { margin: 0; }
.brand-stage #question-heading h1, .brand-stage #question-heading h2 { font-size: clamp(28px, 3.4vw, 46px); letter-spacing: -.02em; }
.brand-stage .step-nav { display: flex; align-items: stretch; gap: 0; margin: 0 0 34px; padding: 0; list-style: none; }
.brand-stage .step-nav li { position: relative; flex: 1 1 0; min-width: 0; margin: 0; text-align: center; }
.brand-stage .step-nav li::after { content: ""; position: absolute; top: 16px; left: 0; right: 0; z-index: 0; height: 2px; background: #e2e3e5; }
.brand-stage .step-nav li:first-child::after { left: 50%; }
.brand-stage .step-nav li:last-child::after { right: 50%; }
.brand-stage .step-nav button { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; min-height: 60px; padding: 0 6px; color: var(--brand-muted); background: transparent; text-align: center; }
.brand-stage .step-nav .step-bullet { display: grid; place-items: center; width: 32px; height: 32px; margin: 0 auto; border-color: #e0e1e3; color: var(--brand-muted); background: #e7e8ea; }
.brand-stage .step-nav button[aria-current="step"] { color: var(--brand-red); background: transparent; }
.brand-stage .step-nav button[aria-current="step"] .step-bullet { color: #fff; border-color: var(--brand-red); background: var(--brand-red); }
.brand-stage .step-nav button[aria-current="step"]::after { content: ""; position: absolute; left: 25%; right: 25%; bottom: -1px; height: 2px; background: var(--brand-red); }
.brand-stage #questions { gap: 20px; }
.brand-stage .question, .brand-stage .question fieldset { min-width: 0; }
.brand-stage .choice-options { gap: 12px; }
.brand-stage .option { min-height: 74px; border-color: var(--brand-line); border-radius: 8px; }
.brand-stage .option[aria-pressed="true"], .brand-stage .option[aria-selected="true"] { color: var(--brand-ink); background: var(--brand-red-soft); border-color: var(--brand-red); box-shadow: inset 3px 0 var(--brand-red); }
.brand-stage input, .brand-stage select, .brand-stage textarea { border-color: #c9ced4; border-radius: 6px; }
.brand-stage input:focus, .brand-stage select:focus, .brand-stage textarea:focus { border-color: var(--brand-red); }
.brand-stage .wizard-actions { position: sticky; bottom: 0; z-index: 10; display: flex; justify-content: space-between; gap: 14px; margin-top: 30px; padding: 16px 0; border-top: 1px solid var(--brand-line); background: rgba(255,255,255,.97); }
.brand-stage .wizard-actions .primary { min-width: 150px; }

/* Solution page: full-width live stage then form + compact summary. */
#solution-workspace.brand-stage .solution-work-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; margin: 28px 0; }
#solution-workspace.brand-stage .solution-stage, #solution-workspace.brand-stage .solution-live { grid-column: 1 / -1; width: 100%; max-height: none; overflow: visible; border: 1px solid var(--brand-line); border-radius: 8px; background: var(--brand-soft); }
#solution-workspace.brand-stage .solution-stage { min-height: 260px; padding: 24px; }
#solution-workspace.brand-stage .solution-form-column { grid-column: 1; min-width: 0; }
#solution-workspace.brand-stage .solution-compact-summary { grid-column: 2; align-self: start; min-width: 0; }
#solution-workspace.brand-stage .solution-live { padding: 20px; }
#solution-workspace.brand-stage .solution-active-step { outline: 3px solid var(--brand-red); background: var(--brand-red-soft) !important; }
#solution-workspace.brand-stage .solution-active-step rect { fill: var(--brand-red-soft); stroke: var(--brand-red); }
#solution-workspace.brand-stage .solution-actions { gap: 10px; }
#solution-workspace.brand-stage .solution-card, #solution-workspace.brand-stage .solution-report .solution-card { border-color: var(--brand-line); border-radius: 8px; }

/* Model picker and all result/report/role views share the same vocabulary. */
.model-picker { display: block; padding: 22px; border: 1px solid var(--brand-line); border-radius: 8px; background: #fff; }
.model-picker > legend { padding: 0 6px; color: var(--brand-ink); font-size: 16px; font-weight: 750; }
.model-search { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid #c9ced4; border-radius: 6px; }
.model-picker .model-browser { margin-top: 16px; }
.model-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-height: 420px; overflow: auto; }
.model-category { padding: 8px 0; color: var(--brand-muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.model-option { width: 100%; padding: 12px 14px; text-align: left; border: 1px solid var(--brand-line); border-radius: 6px; background: #fff; }
.model-option[aria-selected="true"] { color: var(--brand-ink); border-color: var(--brand-red); background: var(--brand-red-soft); box-shadow: inset 3px 0 var(--brand-red); }
.model-option strong, .model-option small, .model-option span { display: block; }
.model-option small, .model-option span { margin-top: 4px; color: var(--brand-muted); font-size: 11px; line-height: 1.5; }
.model-detail { min-width: 0; padding: 18px; border: 1px solid var(--brand-line); border-radius: 8px; background: var(--brand-soft); }
.result-controls, .sales-preview, .procurement-body, .live-preview { border-color: var(--brand-line); background: var(--brand-soft); }
.status-badge, .solution-status--documented-conditional { color: #8e1f1f; border-color: #e7b5b5; background: var(--brand-red-soft); }
.solution-banner, .warning, .error { border-color: #e7b5b5; background: #fff7f7; color: #8e1f1f; }
.solution-diagram-module button { border-left-color: var(--brand-red); border-color: #e5b4b4; background: var(--brand-red-soft); }
.solution-diagram-arrow { color: var(--brand-red); }
.solution-table th { background: var(--brand-soft); }
.solution-report { --solution-blue: var(--brand-red); --solution-navy: var(--brand-ink); --solution-line: var(--brand-line); color: var(--brand-ink); }
.solution-report .solution-kicker, .solution-report .solution-source a { color: var(--brand-red); }
.solution-report .solution-card, .solution-report .solution-connection, .solution-report .solution-project-slot, .solution-report .solution-quantity-fact { border-color: var(--brand-line); }
.solution-report .solution-status--documented-conditional { color: #8e1f1f; border-color: #e7b5b5; background: var(--brand-red-soft); }

@media (max-width: 760px) {
  .site-header .header-inner, .header .header-inner { width: calc(100% - 28px); }
  .brand-hero .hero-grid, .brand-hero .hero-inner { grid-template-columns: 1fr; gap: 24px; min-height: 0; padding-top: 42px; padding-bottom: 42px; }
  .brand-hero .hero-visual, .brand-hero .hero-photo { min-height: 210px; }
  .brand-stepbar { padding: 18px 14px; overflow-x: auto; }
  .brand-stepbar ol, .brand-stepbar ul { min-width: 620px; }
  .brand-stage { width: calc(100% - 28px); padding: 34px 0 54px; }
  .brand-stage #trailer-scene-panel { max-height: none; }
  .brand-stage #trailer-scene-panel .trailer-scene { max-height: 250px; overflow: auto; }
  .brand-stage #trailer-scene-panel[open] .trailer-scene { max-height: 250px; }
  .brand-stage .wizard-actions { position: sticky; }
  #solution-workspace.brand-stage .solution-work-layout { display: flex; flex-direction: column; gap: 16px; }
  #solution-workspace.brand-stage .solution-stage, #solution-workspace.brand-stage .solution-live { order: -1; width: 100%; }
  #solution-workspace.brand-stage .solution-form-column, #solution-workspace.brand-stage .solution-compact-summary { width: 100%; }
  .model-list { grid-template-columns: 1fr; }
  .model-list { max-height: 260px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

@media (max-width: 460px) {
  .brand-hero h1, .brand-hero h2 { font-size: 34px; }
  .brand-stage .choice-options { grid-template-columns: 1fr; }
  .brand-stage .wizard-actions { flex-wrap: wrap; }
  .brand-stage .wizard-actions .primary, .brand-stage .wizard-actions .secondary { flex: 1 1 140px; }
}
/* Integrated shell fit: only the clean photo region of the approved reference. */
.demo-bar{background:#f3f4f5;color:#454b53}.demo-dot{background:#c62828}.eyebrow{color:#c62828}
#landing{padding-top:0}.brand-hero.hero-grid{display:block;gap:0;width:100vw;max-width:none;margin-left:calc((min(calc(100vw - 64px),1200px) - 100vw)/2);min-height:400px;padding:44px max(32px,calc((100vw - 1240px)/2));}
.brand-hero.hero-grid .hero-copy{position:relative;z-index:2;width:62%;max-width:710px}.brand-hero.hero-grid h1{font-size:42px;line-height:1.16}.brand-hero.hero-grid .hero-intro{font-size:16px;line-height:1.65;margin-top:18px}.brand-hero.hero-grid .eyebrow{font-size:11px;letter-spacing:.14em}.brand-hero.hero-grid .hero-actions{margin-top:20px;margin-bottom:6px}.brand-hero.hero-grid .quiet{font-size:11px;line-height:1.5;margin-top:12px}.brand-hero.hero-grid .text-button{color:#fff;font-size:12px}
.brand-hero .brand-hero-photo{position:absolute;z-index:0;top:52px;right:0;width:48%;height:auto;aspect-ratio:480/270;max-height:none;overflow:hidden}.brand-hero .brand-hero-photo img{position:absolute;width:320%;height:auto;left:-158.333%;top:-29.6296%;object-fit:initial}.brand-hero-photo::after{background:linear-gradient(90deg,#101518 0%,#10151844 32%,transparent 80%)}
.brand-illustration{position:relative!important;z-index:2!important;display:block;margin:10px 0 0 auto;width:38%;font-size:10px;color:#ddd}
.brand-task-intro{margin:0 0 20px}.brand-task-intro h2{font-size:30px}.brand-task-intro p{font-size:14px;color:var(--muted);margin:8px 0}.brand-task-intro #load-sample{display:inline-flex;margin:8px 0;padding:9px 14px;border:1px solid #cbd0d5;background:#fff;border-radius:5px}.brand-task-intro #sample-note:empty{display:none}
.brand-stage .wizard-main{display:flex;flex-direction:column}.brand-stage .wizard-main>*{order:20}.brand-stage .wizard-main>.wizard-progress,.brand-stage .wizard-main>.progress-track{order:0;width:100%;max-width:none}.brand-stage .wizard-main>#shared-review{order:1}.brand-stage .wizard-main:not(.has-trailer-scene)>#live-preview{order:10}.brand-stage .wizard-actions{order:50!important}.brand-stage .wizard-main>#validation-error{order:45}
#solution-workspace .solution-stage{grid-row:1;padding:18px 24px}.solution-compact-summary{border:1px solid #e2e3e5;border-radius:8px;padding:20px;background:#fff;box-shadow:0 4px 20px #13182008;position:sticky;top:18px}.solution-compact-summary h3{font-size:18px}.selection-summary-row{padding:14px 0;border-bottom:1px solid #eee}.selection-summary-row>*{display:block;overflow-wrap:anywhere}.selection-summary-row small{font-size:11px;color:#69717b}.selection-summary-row strong{font-size:14px;margin-top:5px}.compact-boundary{font-size:12px;background:#fff2f2;padding:10px;margin-top:16px}
#solution-form .model-picker{display:block}#solution-form .model-picker legend{font-size:17px}.model-browser{margin:10px 0}.model-browser summary{font-size:13px;color:#a41f1f;cursor:pointer}.model-browser label{font-size:12px;font-weight:500}.model-browser .model-list{margin-top:12px}.model-option>small,.model-option>strong,.model-option>span{display:block}.model-option>small{font-size:10px}.model-option>strong{font-size:14px}.model-option>span{font-size:11px;color:#8e1f1f;margin-top:7px}
@media(max-width:760px){#landing .brand-hero{margin-left:-18px;width:100vw;padding:32px 18px 22px;min-height:0}#landing .brand-hero .hero-copy{width:100%;max-width:none}#landing .brand-hero h1{font-size:32px;max-width:92%}#landing .brand-hero .hero-intro{font-size:14px}#landing .brand-hero-photo{top:0;opacity:.28;width:90%}.brand-hero::after{background:#10151822}#landing .brand-illustration{width:100%;font-size:10px;position:relative;margin-top:16px}#landing .hero-actions .btn{flex:1;min-width:230px}.brand-stage .wizard-actions{padding:12px 0;margin-bottom:0}.brand-task-intro h2{font-size:23px}.solution-compact-summary{position:static;display:block}.brand-stepbar{padding:16px 10px}.brand-stepbar ol{min-width:0!important}.brand-stepbar li{font-size:10px}.step-nav button{white-space:normal!important}.brand-stage .solution-stage details>div{max-width:100%}.model-list{grid-template-columns:1fr}}
@media(max-width:460px){#landing .brand-hero{margin-left:-14px}}
/* Larger scene uses the same existing result as the report; text remains available. */
#solution-live-diagram .solution-scene-overview{grid-template-columns:240px minmax(0,1fr);gap:20px}#solution-live-diagram .solution-diagram{display:flex;gap:10px;margin:16px 0}#solution-live-diagram .solution-diagram-module{flex:1;min-width:0;display:block}#solution-live-diagram .solution-diagram-module>button{width:100%;height:100%;min-height:70px}#solution-live-diagram .solution-diagram-arrow{display:none}#solution-live-diagram .solution-diagram-reason{display:none}#solution-live-diagram .solution-diagram-status{font-size:11px}#solution-live-diagram .solution-project-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}#solution-live-diagram .solution-quantity-fact strong{font-size:19px}#solution-live-diagram .solution-quantity-fact{padding:8px}#solution-live-diagram .solution-quantity-block>.solution-note{font-size:11px}#solution-workspace .solution-stage>details>summary{cursor:pointer;font-weight:650}#solution-workspace .solution-stage .solution-actions{margin-bottom:5px}#solution-workspace .solution-stage .solution-actions .btn{min-height:36px;padding:6px 12px}#solution-node-detail:empty{display:none}#solution-live-summary{font-size:13px;margin:10px 0}#solution-play-state{font-size:11px;color:#626b74}
@media(max-width:760px){#solution-live-diagram .solution-scene-overview{grid-template-columns:1fr}#solution-live-diagram .solution-diagram{flex-direction:column}#solution-live-diagram .solution-project-grid{grid-template-columns:1fr}.solution-stage[open],#solution-workspace .solution-stage details[open]{max-height:290px;overflow:auto}#solution-workspace .solution-stage{padding:12px;min-height:0}#solution-live-diagram .solution-asset-schematic svg{max-height:95px}}

/* Final reference-screen alignment for the root-owned markup. */
.site-header [data-brand-nav], .header [data-brand-nav] { display: flex; align-items: center; gap: 28px; }
.brand-hero.hero-grid { padding-left: max(32px, calc((100vw - var(--brand-max)) / 2)); padding-right: max(32px, calc((100vw - var(--brand-max)) / 2)); }
.site-header .brand-header-cta, .header .brand-header-cta { min-height: 40px; padding: 0 18px; color: #fff; background: var(--brand-red); border: 1px solid var(--brand-red); border-radius: 4px; font-weight: 700; }
.site-header .brand-header-cta:hover, .header .brand-header-cta:hover { background: var(--brand-red-dark); border-color: var(--brand-red-dark); }
.question-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.question-choices .choice-card { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 112px; padding: 14px 10px; color: var(--brand-ink); text-align: center; border: 1px solid var(--brand-line); border-radius: 6px; background: #fff; }
.question-choices .choice-card:hover, .question-choices .choice-card[aria-pressed="true"], .question-choices .choice-card[aria-selected="true"] { border-color: var(--brand-red); background: var(--brand-red-soft); box-shadow: inset 0 0 0 1px var(--brand-red); }
.brand-option-icon { width: 38px; height: 38px; margin-bottom: 10px; color: var(--brand-ink); }
.choice-card[aria-pressed="true"] .brand-option-icon, .choice-card[aria-selected="true"] .brand-option-icon { color: var(--brand-red); }
.question-explainer { margin: 12px 0 18px; padding: 12px 14px; border: 1px solid var(--brand-line); border-radius: 6px; background: var(--brand-soft); color: var(--brand-muted); font-size: 12px; line-height: 1.6; }
.question-explainer summary { color: var(--brand-ink); font-weight: 700; cursor: pointer; }
.solution-identity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.solution-identity-grid .model-picker { min-width: 0; padding: 16px; }
.solution-identity-grid .model-picker .special, .solution-identity-grid .model-picker .special-button { color: var(--brand-red); border-color: #e7b5b5; background: var(--brand-red-soft); }
.solution-identity-grid .current-card { min-height: 66px; margin: 10px 0; padding: 10px; border: 1px solid var(--brand-line); border-radius: 6px; background: #fff; }
.model-illustration { display: grid; place-items: center; min-height: 84px; margin: 8px 0 12px; color: var(--brand-ink); border: 1px solid var(--brand-line); border-radius: 6px; background: var(--brand-soft); }
.model-illustration svg { width: min(100%, 150px); max-height: 72px; }

.solution-stage-heading { display: flex; align-items: start; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.solution-stage-heading h2, .solution-stage-heading h3 { margin: 0; font-size: 22px; line-height: 1.25; }
.solution-stage-heading p { max-width: 620px; margin: 4px 0 0; color: var(--brand-muted); font-size: 12px; }
.scene-limits { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--brand-line); color: var(--brand-muted); font-size: 11px; line-height: 1.6; }
.scene-limits summary { color: var(--brand-ink); font-weight: 700; cursor: pointer; }
#solution-workspace .solution-stage { max-height: none; overflow: visible; }
#solution-live-diagram .solution-asset-schematic img, #solution-live-diagram .solution-asset-schematic svg { max-width: 100%; }

@media (max-width: 760px) {
  .question-choices, .solution-identity-grid { grid-template-columns: 1fr; }
  .question-choices .choice-card { min-height: 84px; flex-direction: row; justify-content: flex-start; gap: 12px; text-align: left; }
  .brand-option-icon { margin-bottom: 0; flex: 0 0 34px; }
  .solution-stage-heading { display: block; }
  .solution-stage-heading h2, .solution-stage-heading h3 { font-size: 19px; }
  #solution-workspace .solution-stage, #solution-workspace .solution-stage[open], #solution-workspace .solution-stage details[open] { max-height: none; overflow: visible; }
  #solution-live-diagram .solution-scene-overview { display: grid; grid-template-columns: 1fr; }
  #solution-live-diagram .solution-asset-schematic svg { max-height: 120px; }
}

/* Card controls retain the original fields and state handlers. */
.choice-native { display:none!important; }
.question-choices .choice-card:not(:has(.brand-option-icon)) { min-height:66px; }
.brand-option-icon svg { width:100%;height:100%; }
.model-current { text-align:center;overflow-wrap:anywhere; }
.model-current strong { display:block;font-size:14px;line-height:1.45;margin:8px 0 14px; }
.model-specials { display:flex;gap:5px;flex-wrap:wrap; }
.model-special { flex:1;min-height:38px;padding:7px;border:1px solid var(--brand-line);background:#fff;border-radius:4px;font-size:11px; }
.model-special[aria-pressed=true] { border-color:var(--brand-red);color:var(--brand-red-dark);background:var(--brand-red-soft); }
.model-generic-note { font-size:10px!important;color:var(--brand-muted);line-height:1.5;margin:12px 0; }
.model-native { font-size:11px; }.model-native summary{cursor:pointer}.model-native select {margin:10px 0}
.solution-identity-grid .model-list {grid-template-columns:1fr}.solution-identity-grid .model-option{padding:10px}.model-option .model-illustration{min-height:55px}
.optional-question-group {padding:15px 18px;border:1px solid var(--brand-line);border-radius:6px;margin:14px 0;background:#fff;}
.optional-question-group>summary {font-size:14px;font-weight:650;cursor:pointer}.optional-question-group[open]>summary{margin-bottom:18px}
.task-illustration {background:linear-gradient(135deg,#f7f8f9,#eceff1);border-radius:5px;height:118px;display:grid;place-items:center;margin:8px 0 20px;}
.task-illustration svg{width:155px;height:105px}.scenario-card{overflow:hidden}.scenario-card .quiet {font-size:11px}
.solution-stage-heading {font-size:16px;line-height:1.5;font-weight:650;display:block}
.solution-compact-summary .wizard-actions{position:static!important;display:grid;grid-template-columns:1fr 1fr;margin:16px 0 0;padding:0;border:0;box-shadow:none;gap:8px}.solution-compact-summary .wizard-actions>span{grid-column:1/-1;grid-row:1;text-align:center}.solution-compact-summary .wizard-actions .btn{padding:10px 6px;font-size:12px}.solution-compact-summary .wizard-actions #solution-next{grid-column:1/-1}.solution-compact-summary .wizard-actions #solution-prev{grid-column:1/-1}.solution-compact-summary .wizard-actions #solution-next{grid-row:2}
[data-choice-field="purpose"] .question-choices{grid-template-columns:repeat(5,minmax(0,1fr))}[data-choice-field="purpose"] .choice-card{min-height:88px;font-size:12px}.question-explainer{padding:8px 12px;margin:10px 0 0}
#solution-workspace>h1{font-size:29px}#solution-workspace>.task-switcher{gap:6px;margin:12px 0}#solution-workspace>.task-switcher button{font-size:11px;padding:8px}.solution-boundary{font-size:11px}#solution-workspace .brand-stepbar{padding:18px}#solution-workspace .solution-stage{padding:16px 20px}.solution-compact-summary h3{margin:0}.selection-summary-row{padding:10px 0}
.header nav{gap:20px}.header [data-brand-nav]{white-space:nowrap}.header .brand-header-cta{font-size:12px}
@media(max-width:1050px){.header nav{gap:9px}.header .nav-link{font-size:11px}.header .brand small{font-size:8px}.header .brand-header-cta{padding:0 10px}}
@media(max-width:760px){.header .header-inner{height:auto;min-height:74px;flex-wrap:wrap;padding:12px 0;gap:10px}.header nav{width:100%;justify-content:space-between;flex-wrap:wrap}.header .brand-header-cta{min-height:36px}.header nav [data-brand-nav=hardware],.header nav [data-brand-nav=resources]{display:none}.solution-identity-grid{grid-template-columns:1fr}.model-current{display:flex;align-items:center;gap:12px;text-align:left}.model-current .model-illustration{flex:0 0 85px;min-height:60px;margin:0 0 8px}.model-current svg{width:75px}.model-current strong{margin:0}.task-illustration{height:95px}.task-illustration svg{height:80px}.solution-stage-heading{font-size:13px}#solution-live-diagram .solution-project-grid{grid-template-columns:repeat(3,minmax(0,1fr));font-size:10px}#solution-live-diagram .solution-project-slot{padding:8px}#solution-live-diagram .solution-project-slot p{font-size:10px}#solution-live-diagram .solution-project-slot h4{font-size:11px}#solution-live-diagram .solution-project-slot .solution-status{font-size:9px}#solution-live-diagram .solution-diagram{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}#solution-live-diagram .solution-diagram-module>button{min-height:65px;padding:8px;font-size:11px}.question-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.question-choices .choice-card{font-size:12px;min-height:66px;padding:10px}.question-choices .choice-card:not(:has(.brand-option-icon)){min-height:55px}.brand-option-icon{flex-basis:28px;width:28px;height:28px}}
@media(max-width:760px){[data-choice-field=purpose] .question-choices{grid-template-columns:repeat(2,minmax(0,1fr))}[data-choice-field=purpose] .choice-card{min-height:65px}#solution-workspace>.task-switcher{flex-wrap:nowrap;overflow:auto}.solution-compact-summary .wizard-actions{position:fixed!important;bottom:0;left:0;width:100%;padding:12px 14px!important;z-index:30;display:flex;gap:8px;background:#fff;box-shadow:0 -3px 15px #13182012}.solution-compact-summary .wizard-actions>span{order:1;flex:0 0 30px;align-self:center;font-size:11px}.solution-compact-summary .wizard-actions #solution-prev{flex:1;order:0}.solution-compact-summary .wizard-actions #solution-next{flex:2;order:2}.solution-compact-summary{margin-bottom:85px!important}#solution-workspace{padding-bottom:105px!important}.solution-work-layout:has(+ #solution-result:not([hidden])) .wizard-actions{position:static!important;box-shadow:none}#solution-workspace>.workspace-heading{gap:5px}#solution-workspace>.workspace-heading button{font-size:10px}#solution-workspace>h1{font-size:23px}}
.solution-mobile-preview,.solution-mobile-hint{display:none}.solution-stage>details>summary{list-style:disclosure-open}.solution-stage>details:not([open])>summary{list-style:disclosure-closed}.solution-stage>details>summary .solution-stage-heading{margin:8px 0 0;color:var(--brand-ink);font-weight:500}
@media(max-width:760px){.solution-stage>details:not([open]) .solution-mobile-preview{display:block}.solution-stage>details:not([open]) .solution-mobile-hint{display:block;font-size:10px;color:var(--brand-red);margin-top:8px}.solution-mobile-preview .solution-scene-overview{display:block}.solution-mobile-preview .solution-asset-schematic{display:flex;align-items:center;justify-content:center}.solution-mobile-preview .solution-asset-schematic svg{width:90px!important;height:52px!important;margin:5px}.solution-mobile-preview .solution-asset-schematic p{display:none}.solution-mobile-preview .solution-asset-schematic small{max-width:180px;font-size:9px;font-weight:400;text-align:left}.solution-mobile-preview .solution-quantity-facts{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.solution-mobile-preview .solution-quantity-fact{padding:3px;font-size:9px;font-weight:400;line-height:1.4}.solution-mobile-preview .solution-quantity-fact strong{font-size:16px}.solution-mobile-preview .solution-note{font-size:9px;font-weight:400;line-height:1.5;margin:6px 0}.solution-stage>details>summary .solution-stage-heading{font-size:12px}.solution-stage:has(>details:not([open])){min-height:0!important}.solution-compact-summary h3{font-size:16px}}
/* A hover is not a selected answer: only the pressed choice has a check. */
.question-choices .choice-card{position:relative}.question-choices .choice-card:hover:not([aria-pressed=true]){background:#fff;border-color:#aeb6bf;box-shadow:none}.question-choices .choice-card[aria-pressed=true]::after{content:'✓';position:absolute;right:7px;top:7px;width:16px;height:16px;border-radius:50%;color:#fff;background:var(--brand-red);font-size:11px;line-height:16px;text-align:center}.model-option[aria-pressed=true]{border-color:var(--brand-red);background:var(--brand-red-soft)}
@media(min-width:761px) and (max-width:1100px){.solution-identity-grid{grid-template-columns:1fr}.solution-identity-grid .model-current{display:flex;align-items:center;gap:16px;text-align:left}.solution-identity-grid .model-current .model-illustration{flex:0 0 100px;margin:6px 0;min-height:68px}.solution-identity-grid .model-current strong{margin:0}.solution-identity-grid .model-specials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.solution-identity-grid .model-list{grid-template-columns:repeat(2,minmax(0,1fr))}[data-choice-field=purpose] .question-choices{grid-template-columns:repeat(2,minmax(0,1fr))}.solution-identity-grid .model-picker legend{font-size:15px}#solution-workspace.brand-stage .solution-work-layout{grid-template-columns:minmax(0,1fr) 230px;gap:18px}}