/* showroom.css — the Rowblaa Luxury configurator skin (self-contained dark world).
   Extracted from the prototype; consumed by index.html + showroom-view.mjs. */
:root {
    --bg: #0B0C0E; --surface: #14161A; --surface-2: #1B1E23;
    --text: #F4EFE7; --text-soft: #A9A296; --text-dim: #756E63;
    --border: rgba(255,255,255,.08); --border-strong: rgba(255,255,255,.16);
    --accent: #D8A24A; --accent-hi: #E7B45E; --accent-ink: #17120A; --accent-soft: rgba(216,162,74,.14);
    --ok: #6FB89A; --warn: #D8A24A; --error: #E38B7E; --error-bg: rgba(227,139,126,.12);
    --floor: #202227; --spot: rgba(255,240,220,.16);
    --glass: rgba(16,18,22,.66);
    --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --display: "Fraunces", Georgia, "Times New Roman", serif;
    --dur: 200ms; --dur-fast: 120ms; --promote: 460ms;
    --ease: cubic-bezier(.2,.7,.2,1);
    --rail-w: clamp(380px, 33vw, 452px);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; height: 100%; }
  body {
    background: var(--bg); color: var(--text); font-family: var(--sans);
    -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.5;
    overflow: hidden;
  }
  .num { font-variant-numeric: tabular-nums lining-nums; }
  button { font: inherit; color: inherit; cursor: pointer; }
  :focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 2px; border-radius: 3px; }

  /* ---- shell ---- */
  .vdm { display: grid; grid-template-rows: auto 1fr; height: 100dvh; }
  @media (max-width: 900px) { .vdm { grid-template-rows: auto auto 1fr; overflow: auto; } }

  /* header */
  .hd { display: flex; align-items: center; justify-content: space-between; gap: 16px;
        padding: 14px 22px; border-bottom: 1px solid var(--border);
        background: linear-gradient(180deg, #0e0f12, var(--bg)); position: relative; z-index: 5; }
  .hd::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
        background: repeating-linear-gradient(90deg, rgba(216,162,74,.20) 0 3px, transparent 3px 9px); }
  /* brand lockup — mark over a small maison · collection subline; whole thing links home */
  .brandlock { display: inline-flex; flex-direction: column; gap: 3px; text-decoration: none; color: inherit; line-height: 1; }
  .brandmark { font-family: var(--display); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
    font-size: clamp(16px, 1.9vw, 21px); white-space: nowrap; color: var(--text); text-shadow: 0 0 18px rgba(216,162,74,.3); }
  .brandmark b { color: var(--accent); font-weight: 600; }
  .brandsub { font-family: var(--sans); font-size: 9.5px; letter-spacing: .26em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; }
  a.brandlock { transition: opacity var(--dur-fast) var(--ease); }
  a.brandlock:hover .brandmark { color: var(--accent-hi); }
  a.brandlock:hover .brandsub { color: var(--text-soft); }

  /* header action icons (saved / basket) + Studio menu */
  .hd-actions { display: flex; align-items: center; gap: 4px; }
  .hdx { position: relative; display: inline-flex; align-items: center; gap: 5px; padding: 8px 9px; border-radius: 10px;
    border: 1px solid transparent; background: none; color: var(--text-soft); cursor: pointer;
    transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .hdx:hover { color: var(--accent); background: rgba(255,255,255,.05); }
  .hdx svg { display: block; }
  .hdx-n { min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: grid; place-items: center;
    background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink); font-size: 10px; font-weight: 600;
    font-variant-numeric: tabular-nums; }
  .studio { position: relative; margin-left: 4px; }
  .studio-btn { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; border: 1px solid var(--border-strong);
    background: none; color: var(--text-soft); font: inherit; font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; cursor: pointer;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
  .studio-btn .studio-ico { font-size: 12px; }
  .studio-btn:hover, .studio-btn[aria-expanded="true"] { color: var(--accent); border-color: var(--accent); }
  .studio-menu { position: absolute; right: 0; top: calc(100% + 8px); min-width: 190px; z-index: 20; display: flex; flex-direction: column; padding: 6px;
    background: linear-gradient(180deg, #16181d, #101216); border: 1px solid var(--border-strong); border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.8);
    animation: cmp-fade .14s ease both; }
  .studio-menu[hidden] { display: none; }
  .studio-item { padding: 9px 12px; border-radius: 8px; color: var(--text-soft); text-decoration: none; font-size: 13px; letter-spacing: .02em; white-space: nowrap; }
  .studio-item:hover { background: var(--surface-2); color: var(--text); }
  @media (max-width: 640px) { .studio-lbl { display: none; } .studio-btn { padding: 8px 10px; } }

  /* stage + rail */
  .body { display: grid; grid-template-columns: minmax(0,1fr) var(--rail-w); min-height: 0; }
  @media (max-width: 900px) { .body { grid-template-columns: 1fr; } }

  /* ---- stage ---- */
  .stage { position: relative; overflow: hidden; min-height: 0;
    background:
      radial-gradient(120% 80% at 50% 8%, #F4B9A6 0%, #E79A5F 16%, #7a5238 40%, #1A1512 68%, var(--bg) 100%);
    display: grid; grid-template-rows: 1fr auto; }
  @media (max-width: 900px) { .stage { min-height: 46vh; } }
  .stage::before { /* floor */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
    background: linear-gradient(180deg, #2a2c31, var(--floor) 60%, #17181b);
    box-shadow: inset 0 60px 80px -60px rgba(0,0,0,.7);
  }
  .stage::after { /* brick lines + vignette */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(60% 40% at 50% 62%, var(--spot), transparent 70%),
      radial-gradient(120% 90% at 50% 30%, transparent 55%, rgba(0,0,0,.55));
  }

  /* ---- turntable stage (GTA-style rotating podium) ---- */
  .turntable { position: relative; align-self: center; justify-self: center;
    width: min(86%, 760px); aspect-ratio: 16 / 9; margin-top: 1%; z-index: 2;
    perspective: 1700px; perspective-origin: 50% 42%; }
  .podium { position: absolute; inset: 0; display: grid; place-items: center;
    transform-style: preserve-3d; backface-visibility: hidden; will-change: transform, opacity; }
  .carwrap { position: relative; width: 92%; transform: translateZ(40px); animation: float 6s var(--ease) infinite; }
  .carwrap svg, .carwrap img.carimg { width: 100%; height: auto; display: block; filter: drop-shadow(0 30px 26px rgba(0,0,0,.6)); }
  .carwrap img.carimg { object-fit: contain; }
  .reflection { position: absolute; left: 0; right: 0; top: 99%; transform: scaleY(-1); opacity: .16; filter: blur(3px);
    pointer-events: none; -webkit-mask-image: linear-gradient(180deg, #000, transparent 58%); mask-image: linear-gradient(180deg, #000, transparent 58%); }
  /* a clean static spotlight pool grounds the car... */
  .disc { position: absolute; left: 50%; bottom: 1%; width: 84%; height: 98px; transform: translateX(-50%); border-radius: 50%;
    background: radial-gradient(52% 60% at 50% 44%, rgba(255,240,220,.22), rgba(216,162,74,.10) 46%, transparent 72%);
    overflow: hidden; }
  /* ...and a soft horizontal light rakes across it — premium studio light, a hint of speed (no spin) */
  .disc::before { content: ""; position: absolute; left: -35%; right: -35%; top: 32%; height: 34%; border-radius: 50%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,245,228,0) 32%, rgba(255,245,228,.5) 50%, rgba(255,245,228,0) 68%, transparent 100%);
    filter: blur(7px); animation: rake 6.5s cubic-bezier(.45,.05,.55,.95) infinite; }
  @keyframes rake { 0% { transform: translateX(-26%); opacity: .18; } 50% { transform: translateX(26%); opacity: .62; } 100% { transform: translateX(-26%); opacity: .18; } }
  @keyframes float { 0%,100% { transform: translateZ(40px) translateY(0); } 50% { transform: translateZ(40px) translateY(-1.6%); } }
  .badges { position: absolute; top: 8%; right: 4%; display: flex; flex-direction: column; gap: 6px; align-items: flex-end; z-index: 4; }
  .badge { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text);
    background: var(--glass); backdrop-filter: blur(8px); border: 1px solid var(--border-strong); padding: 4px 9px; border-radius: 999px; }

  /* floor dock: the range as a single-row coverflow "deck" */
  .dock { position: relative; z-index: 3; padding: 4px 16px 16px; }
  .dock-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 4px; }
  .dock-label { font-size: 10px; letter-spacing: .24em; text-transform: uppercase; color: var(--text-dim); }

  .deck { position: relative; height: 200px; touch-action: pan-y; }
  .deck-track { position: absolute; inset: 0; perspective: 1500px; perspective-origin: 50% 45%; outline: none; }
  .deck-card { position: absolute; left: 50%; top: 50%; width: 202px; padding: 0; border: 0; background: none;
    transform-origin: 50% 50%; transform-style: preserve-3d; backface-visibility: hidden; text-align: center;
    transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .4s ease; will-change: transform, opacity; }
  .dc-img { position: relative; border-radius: 13px; overflow: hidden; border: 1px solid var(--border);
    background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
    box-shadow: 0 14px 34px -20px rgba(0,0,0,.8); }
  .dc-img svg, .dc-img img.carimg { width: 100%; height: 118px; display: block; object-fit: cover; }
  .dc-img svg { object-fit: contain; padding: 8px 0; background: transparent; }
  .deck-card.is-center .dc-img { border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 26px 52px -18px rgba(216,162,74,.5), 0 20px 44px -22px rgba(0,0,0,.85); }
  .dc-cap { margin-top: 9px; opacity: 0; transition: opacity .3s ease .05s; }
  .deck-card.is-center .dc-cap { opacity: 1; }
  .dc-name { font-family: var(--display); font-size: 18px; font-weight: 600; line-height: 1.1; }
  .dc-from { font-size: 12px; color: var(--text-soft); margin-top: 2px; }
  .dc-from b { color: var(--accent); font-weight: 600; }

  .deck-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 45; width: 40px; height: 40px;
    display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--border-strong);
    background: var(--glass); backdrop-filter: blur(8px); color: var(--text-soft); font-size: 22px; line-height: 1;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .deck-nav.prev { left: 4px; } .deck-nav.next { right: 4px; }
  .deck-nav:hover { color: var(--accent); border-color: var(--accent); background: var(--surface-2); }
  .deck-nav span { transform: translateY(-1px); }

  /* ---- glass rail ---- */
  .rail { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; min-height: 0;
    background: var(--glass); backdrop-filter: blur(22px) saturate(120%);
    border-left: 1px solid var(--border-strong); }
  @supports not (backdrop-filter: blur(2px)) { .rail { background: var(--surface); } }
  @media (prefers-reduced-transparency: reduce) { .rail { background: var(--surface); backdrop-filter: none; } }
  @media (max-width: 900px) { .rail { border-left: 0; border-top: 1px solid var(--border-strong); } }

  .rail-hd { padding: 18px 22px 14px; border-bottom: 1px solid var(--border); }
  /* spec sheet — read-only headline figures */
  .specsheet { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
  .specsheet:empty { display: none; }
  .spec { display: flex; flex-direction: column; gap: 2px; align-items: center; padding: 12px 6px; border-left: 1px solid var(--border); text-align: center; }
  .spec:first-child { border-left: 0; }
  .spec-v { font-family: var(--display); font-weight: 600; font-size: 17px; color: var(--text); line-height: 1.1; }
  .spec-l { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
  @media (max-width: 900px) { .spec-v { font-size: 15px; } }
  .rail-hd .marque { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
  .rail-hd h1 { font-family: var(--display); font-weight: 600; font-size: 26px; margin: 3px 0 4px; text-wrap: balance; }
  .rail-hd .sub { font-size: 13px; color: var(--text-soft); }

  .rail-body { overflow-y: auto; overscroll-behavior: contain; padding: 4px 22px 18px; }
  .rail-body::-webkit-scrollbar { width: 8px; } .rail-body::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 8px; }

  .sec { padding: 16px 0 4px; border-top: 1px solid var(--border); }
  .sec:first-child { border-top: 0; }
  .eyebrow { font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 10px; }
  .field { margin-bottom: 14px; }
  .field > .flabel { font-size: 12px; color: var(--text-soft); margin-bottom: 7px; display: flex; justify-content: space-between; align-items: baseline; }
  .field .auto { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 1px 7px; }

  /* spec chips */
  .chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip { display: inline-flex; align-items: center; gap: 10px; padding: 9px 13px; border-radius: 10px;
    background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text);
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
  .chip:hover:not(:disabled) { border-color: var(--border-strong); }
  .chip:active:not(:disabled) { transform: translateY(1px); }
  .chip .cd { font-size: 12px; color: var(--text-dim); }
  /* relative price deltas: additions read neutral, savings read positive (green) */
  .chip .cd.up { color: var(--text-soft); }
  .chip .cd.down, .prow .pd.down { color: var(--ok); }
  .chip[aria-checked="true"], .chip[aria-pressed="true"] {
    background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink);
    border-color: var(--accent-hi); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); }
  .chip[aria-checked="true"] .cd, .chip[aria-pressed="true"] .cd { color: rgba(23,18,10,.7); }
  .chip:disabled { opacity: .38; cursor: not-allowed; }
  .chip .glyph { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid currentColor; opacity: .7; }
  .chip .dot { width: 13px; height: 13px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.35); }

  /* bundles — x+y+z packages -> a discount */
  .bundle { display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 10px 13px; border-radius: 11px;
    background: rgba(255,255,255,.03); border: 1px solid var(--border); color: var(--text); cursor: pointer;
    transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .bundle:hover { border-color: var(--border-strong); }
  .bundle.is-active { border-color: var(--accent); background: var(--accent-soft); }
  .bundle-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
  .bundle-name { font-weight: 500; }
  .bundle-save { color: var(--accent); font-size: 13px; }
  .bundle.is-active .bundle-save { color: var(--accent-hi); }
  .bundle-req { font-size: 11.5px; color: var(--text-dim); margin-top: 3px; }
  .bundle.is-active .bundle-req { color: var(--text-soft); }

  /* ---- comparison ---- */
  .compare-btn { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--text-soft); background: rgba(255,255,255,.04);
    border: 1px solid var(--border-strong); border-radius: 999px; padding: 7px 15px;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .compare-btn span { font-size: 14px; line-height: 1; }
  .compare-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

  .cmp-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    padding: 4vh 3vw; overflow: auto; background: radial-gradient(120% 90% at 50% -10%, rgba(216,162,74,.10), transparent 55%), rgba(6,7,9,.72);
    backdrop-filter: blur(6px); animation: cmp-fade .18s ease both; }
  @keyframes cmp-fade { from { opacity: 0; } to { opacity: 1; } }
  .cmp-modal { width: max-content; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #16181d, #101216); border: 1px solid var(--border-strong);
    border-radius: 16px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.85); overflow: hidden;
    animation: cmp-rise .28s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes cmp-rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }
  .cmp-hd { display: flex; align-items: center; justify-content: space-between; gap: 20px;
    padding: 13px 18px; border-bottom: 1px solid var(--border); }
  .cmp-title { font-family: var(--display); font-weight: 600; font-size: 18px; display: flex; align-items: baseline; gap: 10px; }
  .cmp-eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
  .cmp-x { border: 0; background: none; color: var(--text-soft); font-size: 15px; cursor: pointer; padding: 5px 8px; border-radius: 8px; line-height: 1; }
  .cmp-x:hover { color: var(--text); background: var(--surface-2); }
  .cmp-scroll { overflow: auto; padding: 6px 18px 18px; }
  .cmp-grid { display: grid; gap: 0; margin: 0 auto; }
  .cmp-grid > div { padding: 8px 10px; border-bottom: 1px solid var(--border); display: flex; align-items: center; }
  .cmp-lbl { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
  .cmp-pick { gap: 5px; border-bottom: 0 !important; padding-top: 12px !important; }
  .cmp-select { flex: 1; min-width: 0; font: inherit; font-size: 12px; color: var(--text); background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 5px 7px; }
  .cmp-rm { border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 2px 3px; flex: 0 0 auto; }
  .cmp-rm:hover { color: var(--error); }
  .cmp-img { border-bottom: 0 !important; padding-top: 4px !important; padding-bottom: 4px !important; }
  .cmp-img img, .cmp-img svg { width: 100%; height: 82px; object-fit: cover; border-radius: 9px; background: var(--surface); display: block; }
  .cmp-img svg { object-fit: contain; }
  .cmp-name { font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.15; gap: 8px; flex-wrap: wrap;
    border-bottom: 1px solid var(--border-strong) !important; }
  .cmp-current { font-family: var(--sans); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
    color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 2px 7px; }
  .cmp-val { font-family: var(--display); font-size: 15.5px; font-variant-numeric: tabular-nums lining-nums; color: var(--text); }
  /* the "From" price is the decisive figure — mirror the deck's accent price treatment */
  .cmp-price { color: var(--accent); font-weight: 600; }
  /* winner marker: a quiet accent wash + bar, not the loud CTA-level pill */
  .cmp-val.is-best { color: var(--accent-hi); font-weight: 600; background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
  .cmp-cfg { border-bottom: 0 !important; padding-top: 12px !important; }
  .cmp-configure { width: 100%; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; padding: 8px; border-radius: 9px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
  .cmp-configure:hover { background: var(--accent); color: var(--accent-ink); }
  .cmp-add { display: block; margin: 14px auto 2px; font: inherit; font-size: 12.5px; cursor: pointer; padding: 8px 16px; border-radius: 999px; border: 1px dashed var(--border-strong); background: none; color: var(--text-soft); }
  .cmp-add:hover { color: var(--accent); border-color: var(--accent); }
  .cmp-hint { text-align: center; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--text-dim);
    padding: 8px 0 12px; border-top: 1px solid var(--border); }

  /* ---- build breakdown (itemised summary) ---- */
  .bd-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center;
    padding: 4vh 3vw; overflow: auto; background: radial-gradient(120% 90% at 50% -10%, rgba(216,162,74,.10), transparent 55%), rgba(6,7,9,.72);
    backdrop-filter: blur(6px); animation: cmp-fade .18s ease both; }
  .bd-modal { width: min(460px, 96vw); max-height: 92vh; display: flex; flex-direction: column;
    background: linear-gradient(180deg, #16181d, #101216); border: 1px solid var(--border-strong);
    border-radius: 16px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.85); overflow: hidden;
    animation: cmp-rise .28s cubic-bezier(.2,.7,.2,1) both; }
  .bd-hd { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
  .bd-title { font-family: var(--display); font-weight: 600; font-size: 19px; display: flex; align-items: baseline; gap: 10px; }
  .bd-eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
  .bd-x { border: 0; background: none; color: var(--text-soft); font-size: 15px; cursor: pointer; padding: 5px 8px; border-radius: 8px; line-height: 1; }
  .bd-x:hover { color: var(--text); background: var(--surface-2); }
  .bd-body { overflow: auto; padding: 4px 20px; }
  .bd-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border); }
  .bd-row:last-child { border-bottom: 0; }
  .bd-l { color: var(--text-soft); font-size: 13.5px; }
  .bd-a { font-family: var(--display); font-size: 15px; color: var(--text); white-space: nowrap; }
  .bd-base .bd-l { color: var(--text); font-weight: 500; }
  .bd-save .bd-l, .bd-save .bd-a { color: var(--ok); }
  .bd-fees .bd-l, .bd-fees .bd-a { color: var(--text-dim); }
  .bd-foot { border-top: 1px solid var(--border-strong); padding: 14px 20px 18px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18)); }
  .bd-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  .bd-total span:first-child { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }
  .bd-total span:last-child { font-family: var(--display); font-weight: 600; font-size: 28px; color: var(--accent); letter-spacing: -.01em; }
  .bd-cta { width: 100%; padding: 12px; border-radius: 11px; border: 0; background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink); font-weight: 600; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px -12px rgba(216,162,74,.6); transition: filter var(--dur-fast) var(--ease); }
  .bd-cta:hover { filter: brightness(1.05); }
  .bd-cta:disabled { filter: none; opacity: .9; cursor: default; }

  /* ---- basket / saved dialogs ---- */

  .bk-overlay, .sv-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 4vh 3vw; overflow: auto;
    background: radial-gradient(120% 90% at 50% -10%, rgba(216,162,74,.10), transparent 55%), rgba(6,7,9,.72); backdrop-filter: blur(6px); animation: cmp-fade .18s ease both; }
  .bk-modal, .sv-modal { width: min(520px, 96vw); max-height: 92vh; display: flex; flex-direction: column; background: linear-gradient(180deg, #16181d, #101216);
    border: 1px solid var(--border-strong); border-radius: 16px; box-shadow: 0 40px 100px -30px rgba(0,0,0,.85); overflow: hidden; animation: cmp-rise .28s cubic-bezier(.2,.7,.2,1) both; }
  .sv-modal { width: min(600px, 96vw); }
  .bk-hd { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid var(--border); }
  .bk-title { font-family: var(--display); font-weight: 600; font-size: 19px; display: flex; align-items: baseline; gap: 10px; }
  .bk-eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
  .bk-empty { padding: 40px 24px; text-align: center; color: var(--text-soft); font-size: 14px; line-height: 1.7; }
  .bk-empty b { color: var(--text); }
  .bk-list { overflow: auto; padding: 6px 12px; }
  .bk-item { display: grid; grid-template-columns: 56px 1fr auto auto auto; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--border); }
  .bk-item:last-child { border-bottom: 0; }
  .bk-qty { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border-strong); border-radius: 9px; padding: 2px; }
  .bk-qbtn { width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: none; color: var(--text-soft);
    font-size: 15px; line-height: 1; cursor: pointer; border-radius: 6px; transition: color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
  .bk-qbtn:hover { color: var(--accent); background: var(--surface-2); }
  .bk-qn { min-width: 20px; text-align: center; font-family: var(--display); font-size: 14px; font-variant-numeric: tabular-nums lining-nums; }
  .bk-thumb { width: 56px; height: 42px; border-radius: 8px; overflow: hidden; background: var(--surface); }
  .bk-thumb img, .bk-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
  .bk-info { min-width: 0; }
  .bk-item-title { font-family: var(--display); font-weight: 600; font-size: 15px; }
  .bk-item-sub { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; }
  .bk-item-price { font-family: var(--display); font-size: 15px; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
  .bk-rm { border: 0; background: none; color: var(--text-dim); cursor: pointer; font-size: 13px; padding: 4px 6px; border-radius: 6px; }
  .bk-rm:hover { color: var(--error); background: var(--surface-2); }
  .bk-foot { border-top: 1px solid var(--border-strong); padding: 14px 20px 18px; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18)); }
  .bk-total { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
  .bk-total span:first-child { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); }
  .bk-total span:last-child { font-family: var(--display); font-weight: 600; font-size: 26px; color: var(--accent); font-variant-numeric: tabular-nums lining-nums; }

  /* header action group + plate save button */
  .hd-actions { display: flex; align-items: center; gap: 12px; }
  @media (max-width: 640px) { .hd-actions { gap: 8px; } }
  /* view options: display currency + measurement units */
  .hd-view { display: inline-flex; align-items: center; gap: 6px; }
  .hd-sel { -webkit-appearance: none; appearance: none; background: none; border: 1px solid var(--border-strong); color: var(--text-soft);
    font: inherit; font-size: 12px; padding: 5px 26px 5px 9px; border-radius: 9px; cursor: pointer;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
    background-position: right 11px center, right 6px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
    transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
  .hd-sel:hover { color: var(--accent); border-color: var(--accent); }
  @media (max-width: 640px) { .hd-view { display: none; } }
  .save-btn { margin-top: 8px; width: 100%; padding: 10px; border-radius: 11px; border: 1px solid var(--border-strong); background: none;
    color: var(--text-soft); font: inherit; font-size: 13px; cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
  .save-btn:hover { color: var(--accent); border-color: var(--accent); }
  .save-btn.is-saved { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
  .save-btn:disabled { color: var(--ok); border-color: var(--ok); cursor: default; }

  /* saved-builds list */
  .sv-list { overflow: auto; padding: 6px 12px; }
  .sv-item { display: grid; grid-template-columns: auto 52px 1fr auto; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--border); }
  .sv-item:last-child { border-bottom: 0; }
  .sv-item.is-sel { background: var(--accent-soft); border-radius: 8px; }
  .sv-acts { display: flex; align-items: center; gap: 6px; }
  .sv-add { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border-strong); background: none; color: var(--text-soft); cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
  .sv-add:hover { color: var(--accent); border-color: var(--accent); }
  .sv-add.is-added { color: var(--ok); border-color: var(--ok); }
  .sv-add svg { display: block; }
  .sv-chk { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
  .sv-thumb { width: 52px; height: 40px; border-radius: 8px; overflow: hidden; background: var(--surface); }
  .sv-thumb img, .sv-thumb svg { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sv-info { min-width: 0; }
  .sv-name { width: 100%; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--text); background: none; border: 1px solid transparent; border-radius: 6px; padding: 2px 6px; }
  .sv-name:hover { border-color: var(--border); }
  .sv-name:focus { border-color: var(--accent); background: var(--surface-2); outline: none; }
  .sv-sub { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); margin-top: 2px; padding-left: 6px; }
  .sv-sub .num { color: var(--accent); letter-spacing: 0; }
  .sv-open { border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent); border-radius: 8px; padding: 6px 12px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap; }
  .sv-open:hover { background: var(--accent); color: var(--accent-ink); }
  .sv-back { align-self: flex-start; margin: 8px 14px 0; background: none; border: 0; color: var(--text-soft); font: inherit; font-size: 12px; cursor: pointer; }
  .sv-back:hover { color: var(--accent); }

  /* powertrain radio list */
  .plist { display: flex; flex-direction: column; gap: 8px; }
  .prow { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 12px;
    padding: 11px 13px; border-radius: 11px; background: rgba(255,255,255,.03); border: 1px solid var(--border); text-align: left; }
  .prow:hover:not(:disabled) { border-color: var(--border-strong); }
  .prow[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
  .prow:disabled { opacity: .38; cursor: not-allowed; }
  .prow .rd { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid var(--text-soft); position: relative; }
  .prow[aria-checked="true"] .rd { border-color: var(--accent); }
  .prow[aria-checked="true"] .rd::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); }
  .prow .pn { font-weight: 500; } .prow .pm { font-size: 11.5px; color: var(--text-dim); }
  .prow .pd { font-size: 12.5px; color: var(--text-soft); }
  .prow[aria-checked="true"] .pd { color: var(--accent); }

  /* stepper */
  .step { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: rgba(255,255,255,.03); }
  .step button { width: 38px; height: 40px; background: none; border: 0; color: var(--text-soft); font-size: 18px; }
  .step button:hover { color: var(--text); background: rgba(255,255,255,.05); }
  .step .val { min-width: 92px; text-align: center; font-weight: 500; }
  .step .affix { color: var(--text-dim); font-size: 12px; padding-right: 12px; }
  .hinttrack { height: 3px; border-radius: 3px; background: rgba(255,255,255,.08); margin-top: 8px; position: relative; overflow: hidden; }
  .hinttrack i { position: absolute; inset: 0 auto 0 0; background: var(--accent); opacity: .55; transition: width var(--dur) var(--ease); }
  .msg { font-size: 12px; margin-top: 7px; padding-left: 10px; border-left: 2px solid var(--border-strong); color: var(--text-soft); }
  .msg.error { border-color: var(--error); color: var(--error); }
  .msg.warning { border-color: var(--warn); color: #E7C58A; }
  .msg.info { border-color: var(--accent); }

  /* price plate */
  .plate { border-top: 1px solid var(--border-strong); padding: 16px 22px 18px;
    background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.18)); position: relative; }
  .plate::before { content: ""; position: absolute; top: -18px; left: 0; right: 0; height: 18px;
    background: linear-gradient(180deg, transparent, var(--glass)); pointer-events: none; }
  .plate .micro { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; color: var(--text-soft); margin-bottom: 10px; }
  .gauge { width: 120px; height: 5px; border-radius: 5px; background: rgba(255,255,255,.1); overflow: hidden; }
  .gauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-hi)); transition: width var(--dur) var(--ease); }
  .otr-label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-soft); font-variant-caps: all-small-caps; }
  .otr { display: flex; align-items: baseline; gap: 10px; }
  .otr .fig { font-family: var(--display); font-weight: 600; font-size: clamp(34px, 4vw, 46px); color: var(--accent);
    line-height: 1; letter-spacing: -.01em; }
  .otr .fig .roll { display: inline-block; }
  .monthly { font-size: 13px; color: var(--text-soft); margin-top: 6px; }
  .monthly b { color: var(--text); font-weight: 600; }
  .savings { font-size: 12.5px; color: var(--accent); margin-top: 4px; }
  .savings b { color: var(--accent-hi); font-weight: 600; }
  .cta { margin-top: 14px; width: 100%; padding: 13px; border-radius: 11px; border: 0;
    background: linear-gradient(180deg, var(--accent-hi), var(--accent)); color: var(--accent-ink);
    font-weight: 600; letter-spacing: .02em; box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 10px 24px -12px rgba(216,162,74,.6);
    transition: filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
  .cta:hover { filter: brightness(1.05); } .cta:active { transform: translateY(1px); }

  @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

  /* header nav (to the editors) + fatal panel, added for the integrated app */
  .sh-fatal { max-width: 560px; margin: 14vh auto; padding: 24px 26px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--rail-w, 16px); border-radius: 16px; color: var(--text); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
  .sh-fatal p { margin: 0; font-size: 15px; }
  .sh-fatal__actions { display: flex; gap: 12px; margin-top: 16px; }
  .sh-fatal__actions a, .sh-fatal__actions button { color: var(--accent); background: none; border: 1px solid var(--accent); border-radius: 8px; padding: 7px 14px; font: inherit; font-size: 13px; cursor: pointer; text-decoration: none; }
  .sh-fatal__actions a:hover, .sh-fatal__actions button:hover { background: var(--accent-soft); }

  /* ---- landing (collections catalogue) ---- */
  body:has(.lp) { overflow: auto; height: auto; }
  .lp { min-height: 100dvh; display: flex; flex-direction: column;
    background: radial-gradient(120% 80% at 50% -8%, #2c2621 0%, #16130f 42%, var(--bg) 100%); }
  .lp-hd { display: flex; align-items: center; justify-content: space-between; padding: 20px 32px; border-bottom: 1px solid var(--border); }
  .lp-hero { text-align: center; padding: 9vh 24px 5vh; max-width: 820px; margin: 0 auto; }
  .lp-eyebrow { font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
  .lp-title { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 5vw, 52px); line-height: 1.05; text-wrap: balance; margin: 0 0 16px; }
  .lp-lede { font-size: 15px; color: var(--text-soft); max-width: 60ch; margin: 0 auto; line-height: 1.6; }
  .lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 22px; max-width: 1000px; margin: 0 auto; padding: 0 24px 7vh; width: 100%; }
  .lp-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; border-radius: 16px; overflow: hidden;
    background: linear-gradient(180deg, var(--surface), var(--surface-2)); border: 1px solid var(--border);
    transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .lp-card:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 24px 60px -30px rgba(216,162,74,.5); }
  .lp-media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--surface); }
  .lp-media img, .lp-media svg { width: 100%; height: 100%; object-fit: cover; display: block; }
  .lp-cardbody { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
  .lp-cardtitle { font-family: var(--display); font-weight: 600; font-size: 22px; }
  .lp-blurb { font-size: 13.5px; color: var(--text-soft); line-height: 1.5; flex: 1; }
  .lp-enter { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
  .lp-card:hover .lp-enter span { margin-left: 5px; }
  .lp-foot { margin-top: auto; display: flex; justify-content: space-between; padding: 20px 32px; border-top: 1px solid var(--border); font-size: 12px; color: var(--text-dim); }
  @media (max-width: 640px) { .lp-hd, .lp-foot { padding-left: 20px; padding-right: 20px; } }
  /* grouped catalogue sections + studio link + journey cards (data-driven landing) */
  .lp-section { max-width: 1000px; margin: 0 auto; width: 100%; }
  .lp-section-h { display: flex; align-items: center; gap: 10px; padding: 0 24px; margin: 8px auto 14px; max-width: 1000px; }
  .lp-section-g { font-size: 18px; color: var(--accent); }
  .lp-section-t { font-family: var(--display); font-weight: 600; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-soft); margin: 0; }
  .lp-section .lp-grid { padding-bottom: 3vh; }
  .hd-studio { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px; padding: 7px 12px; text-decoration: none; }
  .hd-studio:hover { border-color: var(--accent); color: var(--accent); }
  .lp-card--journey { justify-content: center; }
  .lp-card--journey .lp-cardbody { padding: 22px; }
  .lp-card--cat { justify-content: center; }
  .lp-card--cat .lp-cardbody { padding: 22px; }
  .lp-cat-g { color: var(--accent); }
  .lp-browse { margin-left: auto; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); text-decoration: none; }
  .lp-browse:hover { color: var(--accent); }
  .lp-modal-back { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; }
  .lp-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 22px 24px; width: min(420px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
  .lp-modal-h { margin: 0 0 12px; font-size: 18px; }
  .lp-modal .lab { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); margin: 4px 0; }
  .lp-modal .f { width: 100%; background: var(--ground, var(--surface)); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 9px 11px; font: inherit; }
  .lp-modal .f:focus { outline: none; border-color: var(--accent); }
  .lp-modal .vmsg { min-height: 16px; font-size: 12px; margin: 6px 0; }
  .lp-modal .vmsg.bad { color: #cf5b41; }
  .lp-modal-row { display: flex; justify-content: flex-end; gap: 10px; margin-top: 14px; }
  .lp-modal .jbtn { border: 1px solid var(--border); border-radius: 9px; padding: 8px 14px; color: var(--text-soft); background: none; cursor: pointer; font: inherit; font-size: 13px; }
  .lp-modal .jbtn:hover { border-color: var(--accent); color: var(--accent); }
  .lp-modal .jbtn.primary { background: var(--accent); color: #12130f; border-color: var(--accent); }
  .lp-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: 1000px; margin: 0 auto; width: 100%; padding: 8px 24px 0; font-size: 12px; }
  .lp-crumb { color: var(--text-dim); text-decoration: none; letter-spacing: .04em; }
  .lp-crumb:hover { color: var(--accent); }
  .lp-crumb.cur { color: var(--text-soft); }
  .lp-crumb-sep { color: var(--text-dim); opacity: .6; }
  /* library toolbar: search + type-filter chips (find existing objects) */
  .lp-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; max-width: 1000px; margin: 0 auto 6px; width: 100%; padding: 6px 24px; }
  .lp-search { flex: 1 1 240px; min-width: 200px; background: var(--ground, var(--surface)); border: 1px solid var(--border); border-radius: 9px; color: var(--text); padding: 9px 12px; font: inherit; font-size: 13.5px; }
  .lp-search:focus { outline: none; border-color: var(--accent); }
  .lp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
  .lp-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text-soft); padding: 6px 13px; font: inherit; font-size: 12px; letter-spacing: .02em; cursor: pointer; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease); }
  .lp-chip:hover { border-color: var(--accent); color: var(--accent); }
  .lp-chip.is-active { background: var(--accent); border-color: var(--accent); color: #12130f; }
  /* per-card TYPE badge — the neutral glyph + the category the model sits under */
  .lp-typebadge { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
  .lp-typebadge-g { color: var(--accent); font-size: 13px; letter-spacing: 0; }
  .lp-empty { max-width: 1000px; margin: 0 auto; width: 100%; padding: 4vh 24px; text-align: center; color: var(--text-dim); font-size: 14px; }
  /* create/fork modal: two paths (start new with a plain-language type picker, or fork) */
  .lp-modal--create { width: min(560px, 94vw); max-height: 88vh; overflow: auto; }
  .lp-tabs { display: flex; gap: 6px; margin: 4px 0 14px; }
  .lp-tab { flex: 1; border: 1px solid var(--border); background: none; color: var(--text-soft); padding: 8px; border-radius: 9px; cursor: pointer; font: inherit; font-size: 13px; }
  .lp-tab.is-active { border-color: var(--accent); color: var(--accent); }
  .lp-pane { display: flex; flex-direction: column; }
  .lp-pane[hidden] { display: none; }   /* a class `display` beats the UA [hidden] rule — restore it */
  .lp-typecards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 4px 0 8px; }
  .lp-typecard { text-align: left; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--border); background: none; color: var(--text); border-radius: 11px; padding: 11px 12px; cursor: pointer; font: inherit; }
  .lp-typecard:hover { border-color: var(--accent); }
  .lp-typecard.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .lp-typecard-g { font-size: 18px; color: var(--accent); }
  .lp-typecard-l { font-weight: 600; font-size: 13.5px; }
  .lp-typecard-h { font-size: 11.5px; color: var(--text-dim); line-height: 1.35; }
  .lp-placement { font-size: 12px; color: var(--text-soft); margin: 6px 0 2px; }
  .lp-placement-g { color: var(--accent); }
  .lp-pane-note { font-size: 13px; color: var(--text-soft); margin: 2px 0 10px; line-height: 1.5; }
  .lp-forklist { display: flex; flex-direction: column; gap: 6px; max-height: 240px; overflow: auto; margin-bottom: 10px; }
  .lp-forkrow { text-align: left; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border); background: none; color: var(--text); border-radius: 9px; padding: 9px 11px; cursor: pointer; font: inherit; }
  .lp-forkrow:hover { border-color: var(--accent); }
  .lp-forkrow.is-active { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .lp-forkrow-t { font-weight: 600; font-size: 13.5px; }
  .lp-forkrow-b { font-size: 11.5px; color: var(--text-dim); }
  /* per-card fork affordance (revealed on hover; a button can't live inside the card <a>) */
  .lp-cardwrap { position: relative; display: flex; }
  .lp-cardwrap > .lp-card { flex: 1; }
  .lp-forkbtn { position: absolute; top: 10px; right: 10px; z-index: 2; border: 1px solid var(--border); background: rgba(20,19,15,.72); color: var(--text-soft); border-radius: 8px; padding: 5px 10px; font: inherit; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; opacity: 0; transition: opacity var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
  .lp-cardwrap:hover .lp-forkbtn, .lp-forkbtn:focus-visible { opacity: 1; }
  .lp-forkbtn:hover { border-color: var(--accent); color: var(--accent); }

/* =========================================================================
   Journey shell (opt-in via ?j=) — the phased sale runner. Self-contained;
   reuses the showroom tokens. No styling here is domain-specific.
   ========================================================================= */
.journey { display: grid; grid-template-columns: 1fr clamp(300px, 26vw, 380px); grid-template-areas: "steps steps" "phase rail"; gap: 20px; padding: 20px; align-items: start; max-width: 1500px; margin: 0 auto; }
.journey-steps { grid-area: steps; }
.journey-phase { grid-area: phase; min-width: 0; }
.order-rail { grid-area: rail; position: sticky; top: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 860px) { .journey { grid-template-columns: 1fr; grid-template-areas: "steps" "rail" "phase"; } .order-rail { position: static; } }

.stepper { display: flex; gap: 8px; flex-wrap: wrap; }
.stepper .step { display: flex; align-items: center; gap: 9px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px 8px 9px; color: var(--text-soft); font-family: var(--sans); font-size: 13px; cursor: pointer; transition: var(--dur) var(--ease); }
.stepper .step .step-n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; }
.stepper .step.is-active { border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 1px var(--accent); }
.stepper .step.is-active .step-n { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.stepper .step.is-done { color: var(--text); }
.stepper .step.is-done .step-n { background: var(--accent-soft); color: var(--accent-hi); }
.stepper .step.is-locked { opacity: .5; cursor: default; }

.rail-title { font-family: var(--display); font-size: 16px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.rail-title .rail-id { font-family: var(--sans); font-size: 10px; letter-spacing: .1em; color: var(--text-dim); }
.rail-empty { color: var(--text-dim); font-size: 13px; }
.rail-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--border); padding-top: 10px; margin-top: 2px; color: var(--text-soft); font-size: 13px; }
.rail-total b { font-family: var(--display); font-size: 20px; color: var(--accent); }
.rail-drift { font-size: 11.5px; color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent); border-radius: 8px; padding: 6px 9px; }
.rail-recurring { display: flex; justify-content: space-between; align-items: baseline; color: var(--text-dim); font-size: 12.5px; }
.rail-recurring b { font-family: var(--display); font-size: 15px; color: var(--text-soft); font-weight: 500; }
.rail-per { color: var(--text-dim); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; margin-left: 4px; }
.field.locked .locked-val { display: flex; align-items: baseline; gap: 8px; padding: 8px 10px; border: 1px dashed var(--border); border-radius: 8px; color: var(--text-soft); background: var(--surface); }
.field.locked .locked-val .auto { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); }
.order-picker { max-width: 460px; margin: 40px auto; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 22px 24px; }
.order-picker .op-h { font-family: var(--display); font-size: 20px; margin: 0 0 2px; }
.order-picker .op-sub { color: var(--text-dim); margin: 0 0 14px; }
.order-picker .op-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.order-picker .op-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 11px; }
.order-picker .op-meta { flex: 1; display: flex; flex-direction: column; }
.order-picker .op-meta b { font-variant-numeric: tabular-nums; }
.order-picker .op-meta span { color: var(--text-dim); font-size: 12px; }
.order-picker .op-btn { border: 1px solid var(--accent); color: var(--accent); border-radius: 8px; padding: 6px 11px; font-size: 12px; background: none; cursor: pointer; }
.order-picker .op-del { border: 1px solid var(--border); color: var(--text-dim); border-radius: 8px; padding: 6px 9px; background: none; cursor: pointer; }
.order-picker .op-new { width: 100%; background: var(--accent); color: #12130f; border: 0; border-radius: 10px; padding: 10px; font-weight: 600; cursor: pointer; }
/* downstream capture form (render-form's qc-* markup, scoped into the journey shell) */
.downstream-form .qc { display: grid; grid-template-columns: 1fr; gap: 12px; }
.downstream-form .qc-section__title { font-family: var(--display); font-size: 14px; margin: 0 0 8px; color: var(--text-soft); }
.downstream-form .qc-field { margin-bottom: 12px; }
.downstream-form .qc-field__label { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 4px; }
.downstream-form .qc-input { width: 130px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; color: var(--text); padding: 7px 9px; font: inherit; font-variant-numeric: tabular-nums; }
.downstream-form .qc-stepper { display: flex; align-items: center; gap: 6px; }
.downstream-form .qc-stepper__btn { width: 30px; height: 30px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); cursor: pointer; }
.downstream-form .qc-affix { color: var(--text-dim); margin-left: 4px; }
.downstream-form .qc-field--locked .qc-input { border-style: dashed; color: var(--text-dim); }
.downstream-form .qc-field--locked .qc-field__label::after { content: ' · from upstream'; color: var(--text-dim); }
.downstream-form .qc-outputs { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; border-top: 1px solid var(--border); padding-top: 10px; }
.downstream-form .qc-output { display: flex; justify-content: space-between; align-items: baseline; }
.downstream-form .qc-output__label { color: var(--text-soft); font-size: 13px; }
.downstream-form .qc-output__value { font-variant-numeric: tabular-nums; color: var(--text-soft); }
.downstream-form .qc-total .qc-output__value { font-family: var(--display); font-size: 18px; color: var(--accent); }
.downstream-form .qc-cta { margin-top: 12px; width: 100%; background: var(--accent); color: #12130f; border: 0; border-radius: 10px; padding: 10px; font-weight: 600; cursor: pointer; }
.downstream-form .qc-message { font-size: 12px; color: var(--text-dim); }
.downstream-form .qc-field.is-hidden, .downstream-form .qc-output.is-hidden { display: none; }

/* category-render cards — rendered by L0 category, domain-agnostic */
.cr { background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; display: flex; flex-direction: column; gap: 3px; }
.cr-money { flex-direction: row; align-items: baseline; justify-content: space-between; flex-wrap: wrap; }
.cr .cr-l { font-size: 11px; color: var(--text-soft); }
.cr .cr-v { font-family: var(--display); color: var(--text); }
.cr-money .cr-v { color: var(--accent); font-size: 15px; }
.cr .cr-badge { font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-dim); border: 1px solid var(--border); border-radius: 5px; padding: 1px 6px; width: 100%; }
.cr-hero .cr-hero-t { font-family: var(--display); font-size: 15px; }
.cr-hero .cr-parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.cr-hero .cr-part { font-size: 11px; color: var(--text-soft); border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; }
.cr-hero .cr-part b { color: var(--text); font-weight: 500; }
.cr-contract, .cr-sign { flex-direction: row; align-items: baseline; justify-content: space-between; border-color: var(--accent-soft); }
.cr-sign .cr-v, .cr-contract .cr-v { color: var(--accent-hi); }
.cr-state { flex-direction: row; align-items: center; gap: 8px; }
.cr-state .cr-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-dim); }
.cr-state .cr-dot.active { background: var(--ok); } .cr-state .cr-dot.pending { background: var(--warn); }
.cr-state .cr-dot.ended { background: var(--text-dim); }
.cr-state .cr-when { margin-left: auto; font-size: 11px; color: var(--text-dim); }
.cr-timeline .cr-tl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.cr-timeline .cr-tl-part { display: flex; flex-direction: column; gap: 1px; padding: 5px 9px; border: 1px solid var(--border); border-radius: 8px; font-size: 11px; color: var(--text-dim); }
.cr-timeline .cr-tl-part b { color: var(--text-soft); font-weight: 500; font-size: 12px; }
.cr-timeline .cr-tl-part.current { border-color: var(--accent); color: var(--accent); }
.cr-timeline .cr-tl-part.current b { color: var(--accent); }
.cr-timeline .cr-when { font-variant-numeric: tabular-nums; }

.phase-hd { font-family: var(--display); font-size: 20px; margin-bottom: 12px; }
.phase-note { color: var(--text-dim); font-size: 13px; margin-top: 12px; }
.phase-frozen, .phase-ceremony, .phase-preview { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 12px; }
.preview-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.preview-card .preview-t { font-family: var(--display); font-size: 15px; }
.sign-box { display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px; }
.sign-box .sign-l { font-size: 13px; color: var(--text-soft); }
.sign-box .sign-input { background: var(--bg); border: 1px solid var(--border-strong); border-radius: 9px; color: var(--text); padding: 10px 12px; font: inherit; }
.sign-box .sign-input:focus { outline: none; border-color: var(--accent); }
.sign-box .sign-go { align-self: flex-start; background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 10px; padding: 10px 18px; font-weight: 600; cursor: pointer; }
.sign-box .sign-go:disabled { opacity: .4; cursor: default; }