/* ─── Showroom pictures from dealer stock (/stock-images) ───────────────────────────────────────────────────────────────
   On top of csai-site.css (tokens, nav, hero, cards), landing.css (sections, split rows, CTA band, the partner form) and
   showcase.css. Tokens only; phone rules at the bottom (16px text, one column, nothing wider than the screen). */

/* the landing's split-row details, which live inline on landing.html */
.split .cs-pill { margin-bottom: 4px; }
.split h3 { font-size: clamp(1.35rem, 2.4vw, 1.7rem); margin-top: 12px; }
.split .lead { font-size: 1.05rem; margin-top: 12px; }
.split li .tick { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-wash); color: var(--blue); flex: none; margin-top: 2px; }
.split li .tick svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.cs-card .cs-ico { margin-bottom: 4px; }

/* ── Hero: the showroom picture, the website photo inset over its corner ── */
.si-hero-shot { position: relative; margin: 0 0 28px; }
.si-hero-shot .device img { aspect-ratio: 1200 / 914; object-fit: cover; }
.si-inset { position: absolute; left: -14px; bottom: -28px; width: 42%; margin: 0; border-radius: 12px; overflow: hidden; border: 3px solid var(--paper); box-shadow: var(--shadow-lg); background: var(--paper); }
.si-inset img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.si-inset figcaption { position: absolute; left: 8px; top: 8px; font-size: 11.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--hero-fg); background: var(--ink); opacity: .9; border-radius: 999px; padding: 4px 9px; }

/* ── Three steps, each with its picture ── */
.si-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.si-step { display: flex; flex-direction: column; gap: 8px; padding: 16px 16px 22px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow); min-width: 0; }
.si-step-media { margin: 0 0 8px; box-shadow: none; }
.si-step-media > img { aspect-ratio: 4 / 3; object-fit: cover; object-position: center 60%; }
.si-num { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-weight: 800; font-size: 16px; color: var(--on-blue); background: linear-gradient(135deg, var(--blue), var(--blue-2)); box-shadow: 0 8px 24px -8px var(--blue-glow); }
.si-num.amber { color: var(--on-amber); background: linear-gradient(135deg, var(--amber), var(--amber-2)); }
.si-step h3 { font-size: 1.08rem; }
.si-step p { color: var(--muted); font-size: 15px; }
.si-stockgrid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 6px; padding: 8px; background: var(--mist); aspect-ratio: 4 / 3; }
.si-stockgrid img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: 6px; border: 1px solid var(--line); background: var(--paper); }

/* ── Examples: pick a car; its website photo, studio picture and showroom picture side by side ── */
.si-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 auto 26px; max-width: 900px; }
.si-chip { font: inherit; font-size: 14px; font-weight: 700; min-height: 40px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: var(--paper); color: var(--text); cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.si-chip:hover { border-color: var(--blue); color: var(--blue); }
.si-chip:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.si-chip[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: var(--on-blue); }
.si-trio { display: grid; grid-template-columns: .8fr 1fr 1fr; gap: 14px; align-items: center; }
.si-trio figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow); min-width: 0; }
.si-trio img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.si-trio figcaption { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--hero-fg); background: var(--ink); opacity: .9; border-radius: 999px; padding: 5px 10px; }
.si-trio figure.after figcaption { background: linear-gradient(135deg, var(--amber), var(--amber-2)); color: var(--on-amber); opacity: 1; }
.si-set-name { text-align: center; margin-top: 16px; color: var(--muted); font-size: 14.5px; }
.si-set-name b { color: var(--text); }

/* ── Their own showroom: the photo they send → every car in their room ── */
.si-own-media { min-width: 0; }
.si-own { display: grid; grid-template-columns: .8fr auto 1.4fr; gap: 14px; align-items: stretch; }
.si-upload { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; padding: 26px 16px; border: 2px dashed var(--line-2); border-radius: var(--radius); background: var(--mist); color: var(--muted); font-size: 14px; }
.si-upload b { color: var(--text); font-size: 15px; }
.si-own-arrow { color: var(--amber); align-self: center; }
.si-own-arrow svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; display: block; }
.si-own-result { margin: 0; position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow); }
.si-own-result img { display: block; width: 100%; height: auto; }
.si-own-result figcaption { position: absolute; left: 10px; top: 10px; font-size: 12px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(135deg, var(--amber), var(--amber-2)); color: var(--on-amber); border-radius: 999px; padding: 5px 10px; }

/* ── One simple price ── */
.si-price { display: grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items: center; }
.si-price h2 { font-size: clamp(2rem, 4vw, 2.8rem); }
.si-price .lead { margin-top: 14px; max-width: 44ch; }
.si-price-card { padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-lg); }
.si-price-amount { display: flex; align-items: baseline; gap: 10px; }
.si-price-amount b { font-size: 3.2rem; line-height: 1; font-weight: 800; color: var(--text); }
.si-price-amount span { color: var(--muted); font-weight: 700; }
.si-price-card ul { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 11px; }
.si-price-card li { display: flex; gap: 11px; align-items: flex-start; color: var(--text); }
.si-price-card li .tick { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--blue-wash); color: var(--blue); flex: none; margin-top: 2px; }
.si-price-card li .tick svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.si-price-card .btn { width: 100%; justify-content: center; }

@media (max-width: 960px) {
  .si-steps { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; }
  .si-trio { grid-template-columns: 1fr 1fr; }
  .si-price { grid-template-columns: 1fr; gap: 24px; }
  .si-trio figure:first-child { grid-column: 1 / -1; max-width: 420px; justify-self: center; width: 100%; }
}
@media (max-width: 600px) {
  .si-inset { left: 8px; width: 52%; }
  .si-inset figcaption { white-space: nowrap; font-size: 14px; }
  .si-trio figcaption, .si-own-result figcaption { font-size: 16px; }
  .si-chip { font-size: 16px; }
  .si-trio { grid-template-columns: 1fr; }
  .si-trio figure:first-child { max-width: none; }
  .si-own { grid-template-columns: 1fr; }
  .si-own-arrow { justify-self: center; transform: rotate(90deg); }
  .si-step p, .si-set-name { font-size: 16px; }
}