/* Hallmark · shape: app screen · genre: modern-minimal · theme: custom (Ocean Deep)
 * paper: #f4f7f9 · accent: #0e7c74 · display: Gloock · body: Geist
 * nav: top bar · signature: the live AI pipeline panel · states: idle, loading (skeletons), success, error, demo
 * axes: cool-paper/serif-display/teal · posture: two-column workbench · contrast: pass · v2.0.0 */
/* waive 76: #preview has no src until the seller picks a photo; it stays hidden until then */
/* Hallmark · pre-emit critique: P3 H3 E3 S3 R3 V3 · weakest: density on 390px, solved with a sticky action bar and stacked panels */

@font-face { font-family: "Geist"; src: url("/fonts/geist-latin-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Gloock"; src: url("/fonts/gloock-latin-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }

:root {
  /* 8px spacing scale */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --text-xs: 0.75rem; --text-sm: 0.875rem; --text-md: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.5rem;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-micro: 120ms; --dur-short: 220ms;
  /* Ocean Deep */
  --color-paper: #f4f7f9; --color-paper-2: #ffffff; --color-paper-3: #e8eef2;
  --color-ink: #0b1f2e; --color-ink-2: #34495a; --color-muted: #566b7c; --color-rule: #d3dde4; --color-rule-2: #bccad4;
  --color-navy: #0a2236; --color-navy-2: #112f47; --color-navy-3: #1a3d58; --color-on-navy: #e6f0f5; --color-on-navy-2: #a7bccb; --color-navy-rule: #24465f;
  --color-accent: #0e7c74; --color-accent-hover: #0a6660; --color-accent-ink: #ffffff; --color-accent-soft: #e2f2f0; --color-accent-bright: #5eead4;
  --color-focus: #0e7c74; --color-focus-dark: #5eead4;
  --color-success: #13784a; --color-success-soft: #e5f4ec; --color-warn: #8a5300; --color-warn-soft: #fff4dc; --color-warn-rule: #f0d39a;
  --color-error: #b42318; --color-error-soft: #fdeeec; --color-error-rule: #f3c1bb; --color-error-on-navy: #ffb4a8;
  --color-shimmer-a: #e8eef2; --color-shimmer-b: #f5f8fa; --color-overlay: rgba(10, 34, 54, 0.55); --color-shadow: rgba(10, 34, 54, 0.08);
  --font-display: "Gloock", ui-serif, Georgia, serif; --font-body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --radius-sm: 8px; --radius: 12px; --radius-pill: 999px;
  --container: 1200px; --gutter: 32px;
  --shadow-panel: 0 1px 2px var(--color-shadow);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-5); scrollbar-color: var(--color-rule-2) var(--color-paper); }
::selection { background: var(--color-accent-soft); color: var(--color-ink); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; font-synthesis: none; caret-color: var(--color-accent); }
h1, h2, h3 { margin: 0; overflow-wrap: break-word; min-width: 0; text-wrap: balance; font-weight: 400; }
p { margin: 0; text-wrap: pretty; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
.hidden { display: none !important; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.num { font-variant-numeric: tabular-nums; }
.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: var(--s-4); top: -64px; background: var(--color-paper-2); color: var(--color-ink); padding: var(--s-2) var(--s-4); border-radius: var(--radius-sm); z-index: 50; }
.skip:focus-visible { top: var(--s-2); }

/* ---------- app bar ---------- */
.appbar { background: var(--color-navy); color: var(--color-on-navy); }
.appbar-in { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 64px; }
.brand { display: flex; align-items: center; gap: var(--s-3); color: inherit; text-decoration: none; min-width: 0; }
.brand-mark { width: 32px; height: 32px; flex: none; }
.brand-mark rect { fill: var(--color-navy-3); }
.brand-mark path { fill: none; stroke: var(--color-accent-bright); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.wordmark { font-family: var(--font-display); font-size: var(--text-xl); line-height: 1; }
.product { color: var(--color-on-navy-2); font-size: var(--text-sm); padding-left: var(--s-3); border-left: 1px solid var(--color-navy-rule); white-space: nowrap; }
.appbar-r { display: flex; align-items: center; gap: var(--s-2); }
.pill { display: inline-flex; align-items: center; gap: var(--s-2); height: 32px; padding: 0 var(--s-3); border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; border: 1px solid var(--color-navy-rule); color: var(--color-on-navy); background: var(--color-navy-2); }
.pill .i { width: 16px; height: 16px; }
.pill.mode.live { color: var(--color-accent-bright); }
.pill.mode.demo { color: var(--color-warn-soft); }
.pill.model[data-state="loading"] .i { animation: spin 1s linear infinite; }
.pill.model[data-state="ready"] { color: var(--color-accent-bright); }
.pill.model[data-state="error"] { color: var(--color-error-on-navy); }
.icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--color-navy-rule); background: transparent; color: var(--color-on-navy); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out); }
.icon-btn:hover { background: var(--color-navy-2); }
.icon-btn:focus-visible, .appbar :focus-visible { outline-color: var(--color-focus-dark); }

/* ---------- intro + stepper ---------- */
.intro { padding: var(--s-7) 0 var(--s-5); max-width: 760px; }
.intro h1 { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -0.01em; }
.lead { margin-top: var(--s-3); color: var(--color-ink-2); font-size: var(--text-lg); max-width: 62ch; }
.stepper { list-style: none; margin: 0 0 var(--s-5); padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }
.stepper li { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: var(--color-paper-2); border: 1px solid var(--color-rule); color: var(--color-muted); font-weight: 500; min-width: 0; }
.stepper .num { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; border: 1px solid var(--color-rule-2); font-size: var(--text-sm); font-variant-numeric: tabular-nums; }
.stepper .lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stepper li.is-current { color: var(--color-ink); border-color: var(--color-accent); box-shadow: inset 0 -2px 0 var(--color-accent); }
.stepper li.is-current .num { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-accent-ink); }
.stepper li.is-done { color: var(--color-ink-2); }
.stepper li.is-done .num { background: var(--color-accent-soft); border-color: var(--color-accent-soft); color: var(--color-accent-hover); }

/* ---------- panels ---------- */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.panel { background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius); padding: var(--s-5); box-shadow: var(--shadow-panel); min-width: 0; }
.panel-head { margin-bottom: var(--s-4); }
.panel h2, .review h2 { font-family: var(--font-display); font-size: var(--text-2xl); line-height: 1.2; }
.panel h3 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--s-4); }
.sub { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--s-1); }
.panel.dark { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-on-navy); position: sticky; top: var(--s-4); }
.panel.dark .sub { color: var(--color-on-navy-2); }
.panel.dark :focus-visible { outline-color: var(--color-focus-dark); }

/* ---------- upload ---------- */
.drop { position: relative; display: grid; place-items: center; min-height: 260px; border: 1.5px dashed var(--color-rule-2); border-radius: var(--radius); background: var(--color-paper); overflow: hidden; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.drop.over { border-color: var(--color-accent); background: var(--color-accent-soft); }
.drop img { max-height: 380px; width: auto; cursor: crosshair; }
.drop-empty { text-align: center; padding: var(--s-6) var(--s-5); max-width: 36ch; }
.drop-ico { display: inline-grid; place-items: center; color: var(--color-accent-hover); margin-bottom: var(--s-2); }
.drop-ico .i { width: 32px; height: 32px; stroke-width: 1.75; }
.drop-t { font-weight: 600; }
.drop-s { color: var(--color-muted); font-size: var(--text-sm); margin-top: var(--s-1); }
.pt { position: absolute; margin: -12px 0 0 -12px; width: 24px; height: 24px; border-radius: 50%; border: 3px solid var(--color-paper-2); background: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent); pointer-events: none; }
.tap-hint { position: absolute; left: var(--s-3); bottom: var(--s-3); display: inline-flex; align-items: center; gap: var(--s-2); padding: var(--s-1) var(--s-3); border-radius: var(--radius-pill); background: var(--color-navy); color: var(--color-on-navy); font-size: var(--text-sm); pointer-events: none; }
.tap-hint .i { width: 16px; height: 16px; }
.src-row { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: var(--s-4) 0 var(--s-5); }
.field { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-4); min-width: 0; }
.lbl { font-size: var(--text-sm); font-weight: 500; color: var(--color-ink-2); }
.lbl small, .field small { font-weight: 400; color: var(--color-muted); }
.hint { font-size: var(--text-xs); color: var(--color-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { height: 36px; padding: 0 var(--s-4); border-radius: var(--radius-pill); border: 1px solid var(--color-rule-2); background: var(--color-paper-2); color: var(--color-ink-2); cursor: pointer; font-size: var(--text-sm); font-weight: 500; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.chip:hover { border-color: var(--color-accent); color: var(--color-ink); }
.chip.on { background: var(--color-accent-soft); border-color: var(--color-accent); color: var(--color-accent-hover); }
.inp { width: 100%; min-height: 44px; padding: var(--s-2) var(--s-3); border: 1px solid var(--color-rule-2); border-radius: var(--radius-sm); background: var(--color-paper-2); color: var(--color-ink); transition: border-color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.inp::placeholder { color: var(--color-muted); }
.inp:hover { border-color: var(--color-muted); }
.inp:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); outline: none; }
.inp:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
textarea.inp { resize: vertical; line-height: 1.5; }
.mono { font-family: var(--font-mono); font-size: var(--text-sm); }
#promptInput { margin-top: var(--s-1); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4); border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: var(--text-sm); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.btn:active { transform: translateY(1px); }
.btn:disabled { background: var(--color-paper-3); color: var(--color-muted); border-color: var(--color-rule); cursor: not-allowed; }
.btn[aria-busy="true"]:disabled { cursor: progress; }
.btn .i { width: 18px; height: 18px; }
.btn.primary { background: var(--color-accent); color: var(--color-accent-ink); }
.btn.primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.btn.secondary { background: var(--color-paper-2); border-color: var(--color-rule-2); color: var(--color-ink); }
.btn.secondary:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-accent-soft); }
.btn.ghost { background: transparent; color: var(--color-accent-hover); }
.btn.ghost:hover { background: var(--color-accent-soft); }
.btn.big { width: 100%; min-height: 52px; font-size: var(--text-md); }
.btn.sm { min-height: 36px; }
.btn[aria-busy="true"] .i { animation: spin 1s linear infinite; }

/* ---------- pipeline (signature) ---------- */
.pipe { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
.pipe li { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: var(--s-3); padding: var(--s-3); border-radius: var(--radius-sm); background: var(--color-navy-2); border: 1px solid var(--color-navy-rule); overflow: hidden; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out); }
.pipe .ix { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-sm); background: var(--color-navy-3); color: var(--color-on-navy-2); }
.pipe b { display: block; font-weight: 600; font-size: var(--text-sm); line-height: 1.35; }
.pipe small { display: block; color: var(--color-on-navy-2); font-size: var(--text-xs); line-height: 1.4; margin-top: 2px; }
.pipe .st { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--text-sm); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-on-navy-2); white-space: nowrap; }
.pipe .st .i { width: 16px; height: 16px; }
.pipe li.run { border-color: var(--color-accent-bright); }
.pipe li.run .ix { color: var(--color-accent-bright); }
.pipe li.run .st { color: var(--color-on-navy); }
.pipe li.run::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 40%; background: var(--color-accent-bright); animation: sweep 1.2s var(--ease-out) infinite; }
.pipe li.done .ix, .pipe li.done .st { color: var(--color-accent-bright); }
.pipe li.err { border-color: var(--color-error-on-navy); }
.pipe li.err .st, .pipe li.err .ix { color: var(--color-error-on-navy); }
.pipe li.skip { opacity: 0.7; }
.pipe-empty { color: var(--color-on-navy-2); font-size: var(--text-sm); margin-top: var(--s-3); }
.arch { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--color-navy-rule); }
.arch .node { display: flex; align-items: center; gap: var(--s-2); min-width: 0; flex: 1 1 0; }
.arch .node .i { color: var(--color-accent-bright); width: 18px; height: 18px; }
.arch .node b { display: block; font-size: var(--text-xs); font-weight: 600; }
.arch .node small { display: block; font-size: var(--text-xs); color: var(--color-on-navy-2); line-height: 1.3; }
.arch .arrow { color: var(--color-on-navy-2); width: 16px; height: 16px; }
.tot { margin-top: var(--s-4); font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-accent-bright); min-height: 1.55em; }

/* ---------- review ---------- */
.review { margin-top: var(--s-7); scroll-margin-top: var(--s-4); }
.review-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-4); }
.status-line { display: inline-flex; align-items: center; gap: var(--s-2); font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); }
.status-line.ok { color: var(--color-success); }
.status-line .i { width: 18px; height: 18px; }
.gallery { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(180px, 220px); gap: var(--s-3); overflow-x: auto; padding-bottom: var(--s-2); scroll-snap-type: x proximity; }
.shot { margin: 0; scroll-snap-align: start; background: var(--color-paper-2); border: 1px solid var(--color-rule); border-radius: var(--radius); overflow: hidden; }
.shot img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--color-paper-3); }
.shot.check img { background-color: var(--color-paper-3); background-image: conic-gradient(var(--color-rule) 25%, transparent 0 50%, var(--color-rule) 0 75%, transparent 0); background-size: 16px 16px; }
.shot figcaption { display: flex; align-items: center; justify-content: space-between; gap: var(--s-2); padding: var(--s-2) var(--s-3); font-size: var(--text-sm); font-weight: 500; min-height: 44px; }
.shot figcaption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot figcaption a { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--color-accent-hover); flex: none; }
.shot figcaption a:hover { background: var(--color-accent-soft); }
.shot.loading .sk { aspect-ratio: 1; }
.shot.error .err { aspect-ratio: 1; display: grid; place-items: center; align-content: center; gap: var(--s-2); padding: var(--s-4); text-align: center; color: var(--color-error); background: var(--color-error-soft); font-size: var(--text-sm); }
.sk { background: linear-gradient(90deg, var(--color-shimmer-a) 0, var(--color-shimmer-b) 40%, var(--color-shimmer-a) 80%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
.variant { display: flex; align-items: flex-end; gap: var(--s-2); margin: var(--s-4) 0 var(--s-5); flex-wrap: wrap; }
.variant-f { display: flex; flex-direction: column; gap: var(--s-2); flex: 0 1 280px; min-width: 0; }
.banner { display: flex; align-items: flex-start; gap: var(--s-3); padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); border: 1px solid var(--color-rule); background: var(--color-paper-2); font-size: var(--text-sm); margin-bottom: var(--s-4); }
.banner p { flex: 1; min-width: 0; }
.banner.info { border-color: var(--color-warn-rule); background: var(--color-warn-soft); color: var(--color-warn); margin-top: var(--s-4); }
.banner.warn { border-color: var(--color-warn-rule); background: var(--color-warn-soft); color: var(--color-warn); }
.banner.error { border-color: var(--color-error-rule); background: var(--color-error-soft); color: var(--color-error); align-items: center; }
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-5); align-items: start; }
.grid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-4); }
.grid2 .full { grid-column: 1 / -1; }
.cp { position: relative; }
.cp .inp { padding-right: 48px; }
.copy { position: absolute; right: var(--s-1); top: var(--s-1); display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--color-muted); cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out); }
.copy:hover { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.copy .i { width: 18px; height: 18px; }
#form.is-loading .inp { color: transparent; pointer-events: none; border-color: var(--color-rule); background: linear-gradient(90deg, var(--color-shimmer-a) 0, var(--color-shimmer-b) 40%, var(--color-shimmer-a) 80%); background-size: 300% 100%; animation: shimmer 1.4s linear infinite; }
#form.is-loading .copy { visibility: hidden; }
.price { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-4); align-items: end; margin-top: var(--s-5); }
.price .field { margin-bottom: 0; }
.price-sug { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.price-sug b { font-variant-numeric: tabular-nums; font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.2; }
.price-sug small { color: var(--color-muted); font-size: var(--text-xs); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.fine { color: var(--color-muted); font-size: var(--text-xs); margin-top: var(--s-3); }

/* ---------- footer, dialog, toast, mobile bar ---------- */
.foot { margin-top: var(--s-8); border-top: 1px solid var(--color-rule); background: var(--color-paper-2); }
.foot-in { padding-block: var(--s-5); display: grid; gap: var(--s-2); color: var(--color-muted); font-size: var(--text-sm); }
.foot b { color: var(--color-ink); }
dialog { border: 0; padding: 0; border-radius: var(--radius); width: min(92vw, 440px); color: var(--color-ink); background: var(--color-paper-2); box-shadow: var(--shadow-panel); }
dialog::backdrop { background: var(--color-overlay); }
.dlg { padding: var(--s-5); }
.dlg h3 { font-family: var(--font-display); font-size: var(--text-xl); margin-bottom: var(--s-4); }
.dlg .fine { margin: var(--s-2) 0 var(--s-4); }
.dlg-actions { display: flex; justify-content: flex-end; }
.switch { display: flex; align-items: center; gap: var(--s-3); font-weight: 500; cursor: pointer; }
.switch input { width: 20px; height: 20px; accent-color: var(--color-accent); }
#toast { position: fixed; left: 50%; bottom: var(--s-5); transform: translate(-50%, 16px); opacity: 0; pointer-events: none; max-width: min(92vw, 520px); padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); background: var(--color-navy); color: var(--color-on-navy); font-size: var(--text-sm); box-shadow: var(--shadow-panel); z-index: 40; transition: opacity var(--dur-short) var(--ease-out), transform var(--dur-short) var(--ease-out); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }
.mobilebar { display: none; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes sweep { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -50% 0; } }

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .workspace, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .panel.dark { position: static; }
}
@media (max-width: 720px) {
  :root { --gutter: 16px; }
  .intro { padding: var(--s-5) 0 var(--s-4); }
  .intro h1 { font-size: var(--text-2xl); }
  .lead { font-size: var(--text-md); }
  .product { display: none; }
  .pill.mode { display: none; }
  .appbar-in { min-height: 56px; }
  .stepper li { flex-direction: column; gap: var(--s-1); padding: var(--s-2); text-align: center; font-size: var(--text-xs); }
  .stepper .lbl { white-space: normal; }
  .panel { padding: var(--s-4); }
  .panel h2, .review h2 { font-size: var(--text-xl); }
  .drop { min-height: 220px; }
  .src-row .btn { flex: 1 1 auto; }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .price-sug { grid-column: 1 / -1; }
  .arch { flex-direction: column; align-items: stretch; gap: var(--s-2); }
  .arch .arrow { transform: rotate(90deg); align-self: flex-start; margin-left: 2px; }
  .actions .btn { flex: 1 1 calc(50% - var(--s-2)); }
  .actions #zipBtn { flex-basis: 100%; }
  .gallery { grid-auto-columns: minmax(150px, 46%); }
  .shot figcaption { font-size: var(--text-xs); padding-inline: var(--s-2); }
  .pipe li { grid-template-columns: 40px minmax(0, 1fr); row-gap: var(--s-1); }
  .pipe .st { grid-column: 2; }
  .mobilebar { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: var(--s-2) var(--gutter) calc(var(--s-2) + env(safe-area-inset-bottom)); background: var(--color-paper-2); box-shadow: 0 -4px 16px var(--color-shadow); }
  .mobilebar.off { display: none; }
  body { padding-bottom: 80px; }
  #toast { bottom: 88px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}