:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Noto Sans JP", "Yu Gothic", sans-serif;
  --ink: #202326;
  --muted: #697177;
  --paper: #ffffff;
  --canvas: #f4f5f6;
  --line: #d9dde0;
  --line-dark: #b9c0c4;
  --accent: #8f4f5a;
  --accent-hover: #743d47;
  --accent-soft: #f5e9eb;
  --green: #23724c;
  --green-soft: #e7f3ec;
  --amber: #8c5b13;
  --amber-soft: #fff2d8;
  --red: #983c39;
  --red-soft: #f8e8e6;
  --shadow: 0 18px 44px rgba(24, 28, 31, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-width: 320px; min-height: 100%; background: var(--canvas); color: var(--ink); }
body { min-height: 100vh; }
button, input { font: inherit; letter-spacing: 0; }
button { color: inherit; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }

.app-shell { min-height: 100vh; display: grid; grid-template-rows: 64px auto minmax(0, 1fr) 36px; }
.app-header { z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); }
.brand-button { display: flex; align-items: center; gap: 10px; border: 0; background: transparent; padding: 4px; cursor: pointer; text-align: left; }
.brand-mark { width: 34px; height: 34px; display: grid; place-items: center; background: var(--ink); color: #fff; font-family: Georgia, serif; font-size: 18px; }
.brand-button strong, .brand-button small { display: block; }
.brand-button strong { font-size: 13px; line-height: 1.1; }
.brand-button small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.header-actions { display: flex; align-items: center; gap: 12px; }
.demo-badge { padding: 5px 8px; border: 1px solid #d8c0c4; color: var(--accent); font-size: 9px; font-weight: 800; }
.text-button, .back-button { border: 0; background: transparent; cursor: pointer; }
.text-button { padding: 10px 0; color: var(--muted); font-size: 12px; }
.text-button:hover, .back-button:hover { color: var(--accent); }

.progress-nav { min-height: 52px; display: flex; align-items: center; justify-content: center; padding: 8px 20px; background: var(--paper); border-bottom: 1px solid var(--line); }
.progress-step { display: flex; align-items: center; gap: 7px; color: #9aa1a5; font-size: 11px; }
.progress-step span { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; }
.progress-step.is-active { color: var(--accent); }
.progress-step.is-done { color: var(--green); }
.progress-line { width: 70px; height: 1px; margin: 0 12px; background: var(--line); }

.app-main { min-height: 0; display: grid; }
.view { min-width: 0; min-height: 0; }
.view:not(.is-active) { display: none; }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
h1, h2, p { overflow-wrap: anywhere; }
h1 { margin: 0; font-family: Georgia, "Yu Mincho", serif; font-size: 44px; line-height: 1.28; font-weight: 500; letter-spacing: 0; }
h1 span { display: inline-block; white-space: nowrap; }
h2 { margin: 0; font-family: Georgia, "Yu Mincho", serif; font-size: 29px; line-height: 1.35; font-weight: 500; letter-spacing: 0; }
.screen-lead, .screen-heading > p:last-child, .content-narrow > p:not(.eyebrow), .processing-content > p:last-child { color: var(--muted); font-size: 13px; line-height: 1.75; }

.button { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px; border-radius: 5px; cursor: pointer; font-weight: 750; font-size: 13px; transition: background 150ms ease, border-color 150ms ease, color 150ms ease, transform 150ms ease; }
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .38; cursor: not-allowed; }
.button-primary { border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.button-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.button-secondary { border: 1px solid var(--line-dark); background: var(--paper); color: var(--ink); }
.button-light { border: 1px solid rgba(255,255,255,.7); background: #fff; color: var(--ink); }
.bottom-wide { width: 100%; }
.bottom-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 18px 0 0; }
.bottom-actions .button { min-width: 146px; }
.back-button { display: inline-flex; align-items: center; min-height: 36px; margin-bottom: 18px; padding: 0; color: var(--muted); font-size: 12px; }
.back-button::before { content: "‹"; margin-right: 7px; font-size: 20px; line-height: 1; }

.top-view { display: grid; grid-template-columns: minmax(420px, .88fr) minmax(440px, 1.12fr); min-height: calc(100vh - 100px); background: var(--paper); overflow: hidden; }
.top-copy { align-self: center; max-width: 620px; padding: 54px 48px 54px max(48px, calc((100vw - 1380px) / 2)); }
.top-lead { max-width: 510px; margin: 22px 0 30px; color: var(--muted); font-size: 15px; line-height: 1.8; }
.three-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0 0 34px; padding: 0; list-style: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.three-steps li { min-width: 0; display: flex; align-items: center; gap: 9px; padding: 14px 10px; border-right: 1px solid var(--line); }
.three-steps li:first-child { padding-left: 0; }
.three-steps li:last-child { border-right: 0; }
.three-steps li > span { color: var(--accent); font-family: Georgia, serif; font-size: 18px; }
.three-steps strong, .three-steps small { display: block; }
.three-steps strong { font-size: 12px; }
.three-steps small { margin-top: 3px; color: var(--muted); font-size: 9px; white-space: nowrap; }
.top-actions { display: flex; gap: 10px; }
.top-actions .button { min-width: 176px; }
.privacy-strip { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 22px; color: var(--muted); font-size: 10px; }
.privacy-strip span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--green); }
.top-visual { min-height: 620px; display: grid; grid-template-rows: minmax(0, 1fr) auto; align-items: center; padding: 34px max(34px, calc((100vw - 1380px) / 2)) 22px 34px; background: #d9dde2; }
.visual-window { position: relative; width: min(100%, 620px); height: min(76vh, 720px); min-height: 520px; justify-self: center; overflow: hidden; background: #d9dde2; box-shadow: var(--shadow); }
.visual-window > img, .visual-after img { width: 100%; height: 100%; object-fit: cover; object-position: center 24%; }
.visual-after { position: absolute; inset: 0 0 0 50%; overflow: hidden; }
.visual-after img { position: absolute; right: 0; width: 200%; max-width: none; }
.visual-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,0,0,.14); }
.visual-label, .comparison-label { position: absolute; top: 16px; padding: 6px 8px; background: rgba(23,26,28,.78); color: #fff; font-size: 9px; font-weight: 800; }
.before-label { left: 16px; }
.after-label { right: 16px; }
.top-visual > p { margin: 12px 0 0; color: #4f575c; font-size: 10px; text-align: center; }

.centered-view { place-items: center; padding: 48px 20px; background: var(--paper); }
.centered-view.is-active { display: grid; }
.content-narrow { width: min(560px, 100%); }
.content-narrow h2 { margin-bottom: 14px; }
.consent-list { margin: 28px 0; border-top: 1px solid var(--line); }
.consent-list > div { display: grid; grid-template-columns: 44px 1fr; align-items: center; gap: 12px; padding: 17px 0; border-bottom: 1px solid var(--line); }
.consent-list > div > span { color: var(--accent); font-family: Georgia, serif; font-size: 17px; }
.consent-list p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.consent-list strong { display: block; margin-bottom: 3px; color: var(--ink); font-size: 13px; }
.consent-check { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 20px; color: var(--ink); font-size: 12px; line-height: 1.5; cursor: pointer; }
.consent-check input { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }

.camera-view.is-active { display: grid; grid-template-columns: minmax(0, 1fr) 370px; background: #171a1c; }
.camera-stage { position: relative; min-height: 640px; overflow: hidden; background: #171a1c; }
.camera-stage video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.jig-overlay { position: absolute; inset: 0; pointer-events: none; color: rgba(255,255,255,.8); }
.jig-face { position: absolute; top: 20%; left: 50%; width: min(34%, 280px); aspect-ratio: .72; transform: translateX(-50%); border: 1.5px solid currentColor; border-radius: 49% 49% 46% 46%; }
.jig-eyes, .jig-chin, .jig-shoulders, .jig-top { position: absolute; left: 50%; transform: translateX(-50%); border-top: 1px dashed currentColor; }
.jig-eyes { top: 37%; width: 26%; }
.jig-chin { top: 59%; width: 22%; }
.jig-shoulders { top: 75%; width: 66%; }
.jig-top { top: 10%; width: 30%; }
.jig-center { position: absolute; top: 10%; bottom: 18%; left: 50%; border-left: 1px dashed rgba(255,255,255,.55); }
.camera-status { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); max-width: calc(100% - 32px); padding: 9px 13px; background: rgba(18,21,23,.82); color: #fff; font-size: 11px; white-space: nowrap; }
.camera-status.is-ready { background: rgba(25,105,67,.92); }
.camera-denied { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; padding: 24px; background: #202427; color: #fff; text-align: center; }
.camera-denied strong { font-size: 18px; }
.camera-denied p { max-width: 340px; margin: 8px 0 20px; color: #c7ced2; font-size: 12px; line-height: 1.7; }
.camera-panel { min-height: 0; padding: 28px; background: var(--paper); display: flex; flex-direction: column; }
.camera-panel h2 { font-size: 25px; }
.eligibility-signals { margin-top: 22px; border-top: 1px solid var(--line); }
.eligibility-signals > div { display: grid; grid-template-columns: 18px 1fr auto; align-items: center; gap: 7px; min-height: 49px; padding: 0 10px; border-bottom: 1px solid var(--line); transition: background-color 160ms ease, box-shadow 160ms ease; }
.eligibility-icon { display: block; color: var(--amber); font-size: 15px; font-weight: 800; line-height: 1; text-align: center; }
.eligibility-signals strong { font-size: 12px; }
.eligibility-signals small { color: var(--muted); font-size: 10px; white-space: normal; }
.eligibility-signals > div.is-ok { background: var(--green-soft); box-shadow: inset 3px 0 0 var(--green); }
.eligibility-signals > div.is-ok .eligibility-icon { color: var(--green); }
.eligibility-signals > div.is-ok strong { color: var(--green); }
.eligibility-signals > div.is-ok small { color: var(--green); }
.capture-control { margin-top: auto; display: grid; justify-items: center; padding-top: 24px; }
.shutter { width: 76px; height: 76px; display: grid; place-items: center; padding: 6px; border: 2px solid var(--ink); border-radius: 50%; background: var(--paper); cursor: pointer; }
.shutter span { width: 100%; height: 100%; border-radius: 50%; background: var(--accent); }
.shutter:disabled { opacity: .28; cursor: not-allowed; }
.capture-control p { margin: 10px 0 0; color: var(--muted); font-size: 10px; }

.review-view, .reference-view, .result-view { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 32px 0 22px; }
.review-view.is-active, .reference-view.is-active, .result-view.is-active { display: block; }
.screen-heading { max-width: 680px; margin-bottom: 22px; }
.screen-heading .back-button { margin-bottom: 9px; }
.screen-heading > p:last-child { margin: 8px 0 0; }
.review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.review-grid figure { margin: 0; min-width: 0; }
.portrait-media { height: min(55vh, 610px); overflow: hidden; background: #cdd2d5; border: 1px solid var(--line); }
.portrait-media.neutral { background: #d9dde2; }
.portrait-media img { width: 100%; height: 100%; object-fit: contain; }
.review-grid figcaption { min-height: 48px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; background: var(--paper); border: 1px solid var(--line); border-top: 0; font-size: 11px; }
.review-grid figcaption span { color: var(--muted); }
.inline-notice { display: grid; gap: 3px; margin-top: 16px; padding: 12px 14px; background: var(--green-soft); color: var(--green); border-left: 3px solid var(--green); font-size: 11px; }
.inline-notice.warning { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }

.reference-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr); gap: 24px; }
.section-label { display: flex; align-items: center; justify-content: space-between; min-height: 38px; border-bottom: 1px solid var(--line); font-size: 12px; }
.section-label span { color: var(--muted); font-size: 10px; }
.reference-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding-top: 12px; }
.reference-card { min-width: 0; display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 12px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); cursor: pointer; text-align: left; }
.reference-card:hover { border-color: var(--line-dark); }
.reference-card.is-selected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--accent-soft); }
.reference-card img { width: 108px; height: 136px; object-fit: contain; background: #d9dde2; }
.reference-card strong, .reference-card small { display: block; }
.reference-card strong { font-size: 13px; }
.reference-card small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.upload-button { min-height: 48px; display: grid; place-items: center; position: relative; margin-top: 12px; border: 1px dashed var(--line-dark); border-radius: 5px; background: var(--paper); font-size: 12px; font-weight: 750; cursor: pointer; }
.upload-button input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.hair-only-frame { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; margin-top: 12px; background: #d9dde2; border: 1px solid var(--line); }
.hair-only-frame img { width: 100%; height: 100%; object-fit: contain; }
.reference-preview-panel > p { margin: 10px 0 0; color: var(--muted); font-size: 10px; text-align: center; }

.processing-view.is-active { display: grid; place-items: center; background: var(--paper); padding: 40px 20px; }
.processing-content { width: min(420px, 100%); text-align: center; }
.processing-visual { position: relative; width: 170px; height: 255px; margin: 0 auto 24px; overflow: hidden; background: #d9dde2; box-shadow: var(--shadow); }
.processing-visual img { width: 100%; height: 100%; object-fit: cover; }
.scan-line { position: absolute; left: 0; right: 0; height: 2px; background: var(--accent); box-shadow: 0 0 18px var(--accent); animation: scan 2.4s ease-in-out infinite; }
@keyframes scan { 0%, 100% { top: 8%; } 50% { top: 90%; } }
.processing-content h2 { font-size: 23px; }
.progress-track { height: 4px; margin: 22px 0 10px; overflow: hidden; background: #e2e5e7; }
.progress-track span { display: block; width: 12%; height: 100%; background: var(--accent); transition: width 1s linear; }

.result-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin-bottom: 18px; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line-dark); border-radius: 5px; overflow: hidden; background: var(--paper); }
.segmented button { min-height: 38px; padding: 0 14px; border: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; }
.segmented button.is-active { background: var(--ink); color: #fff; }
.result-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; }
.comparison-slider { position: relative; height: min(64vh, 650px); min-height: 470px; overflow: hidden; background: #d9dde2; border: 1px solid var(--line); }
.comparison-slider > img, .comparison-after-wrap img { width: 100%; height: 100%; object-fit: contain; }
.comparison-after-wrap { position: absolute; inset: 0 0 0 50%; overflow: hidden; }
.comparison-after-wrap img { position: absolute; right: 0; width: 200%; max-width: none; }
.comparison-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.18); pointer-events: none; }
.comparison-divider i { position: absolute; top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%,-50%); border: 1px solid rgba(0,0,0,.2); border-radius: 50%; background: #fff; }
.comparison-divider i::before, .comparison-divider i::after { position: absolute; top: 11px; color: var(--accent); font-style: normal; font-size: 13px; }
.comparison-divider i::before { content: "‹"; left: 10px; }
.comparison-divider i::after { content: "›"; right: 10px; }
.comparison-slider input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; }
.label-before { left: 14px; }
.label-after { right: 14px; }
.comparison-side { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comparison-side figure { min-width: 0; margin: 0; background: #d9dde2; border: 1px solid var(--line); }
.comparison-side img { display: block; width: 100%; height: min(60vh, 610px); object-fit: contain; }
.comparison-side figcaption { padding: 9px 12px; background: var(--paper); border-top: 1px solid var(--line); font-size: 11px; text-transform: uppercase; }
.result-summary { padding: 18px; background: var(--paper); border: 1px solid var(--line); }
.selected-reference { display: grid; grid-template-columns: 74px 1fr; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.selected-reference img { width: 74px; height: 86px; object-fit: contain; background: #d9dde2; }
.selected-reference small, .selected-reference strong { display: block; }
.selected-reference small { color: var(--muted); font-size: 8px; }
.selected-reference strong { margin-top: 4px; font-size: 13px; }
.result-summary > p { margin: 18px 0; color: var(--muted); font-size: 11px; line-height: 1.75; }
.demo-disclaimer { padding: 11px; background: var(--amber-soft); color: var(--amber); font-size: 10px; line-height: 1.55; }

.rejected-content, .ended-content { text-align: center; }
.status-mark { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 22px; border: 1px solid #d9a7a3; border-radius: 50%; background: var(--red-soft); color: var(--red); font-family: Georgia, serif; font-size: 24px; }
.status-mark.success { border-color: #a8d0b9; background: var(--green-soft); color: var(--green); }
.rejected-content .inline-notice { text-align: left; }
.stacked-actions { display: grid; gap: 9px; margin-top: 22px; }
.deletion-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 24px 0; }
.deletion-list span { padding: 10px; background: var(--green-soft); color: var(--green); font-size: 10px; }

.app-footer { min-height: 36px; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; background: var(--paper); border-top: 1px solid var(--line); color: var(--muted); font-size: 9px; }
.demo-dialog { width: min(440px, calc(100% - 28px)); padding: 0; border: 1px solid var(--line); border-radius: 7px; box-shadow: var(--shadow); }
.demo-dialog::backdrop { background: rgba(25,29,31,.46); }
.demo-dialog form { padding: 20px; }
.demo-dialog header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 16px; }
.demo-dialog header strong, .demo-dialog header small { display: block; }
.demo-dialog header small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.demo-dialog header button { width: 32px; height: 32px; border: 0; background: var(--canvas); cursor: pointer; font-size: 18px; }
.scenario-list { display: grid; gap: 7px; margin-bottom: 16px; }
.scenario-list label { min-height: 54px; display: grid; grid-template-columns: 20px 1fr; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); cursor: pointer; }
.scenario-list input { accent-color: var(--accent); }
.scenario-list strong, .scenario-list small { display: block; }
.scenario-list strong { font-size: 12px; }
.scenario-list small { margin-top: 3px; color: var(--muted); font-size: 9px; }

@media (max-width: 980px) {
  h1 { font-size: 38px; }
  .top-view { grid-template-columns: minmax(340px,.9fr) minmax(390px,1.1fr); }
  .top-copy { padding: 42px 30px; }
  .top-visual { padding: 24px; }
  .camera-view.is-active { grid-template-columns: minmax(0,1fr) 330px; }
  .camera-panel { padding: 22px; }
  .result-layout { grid-template-columns: minmax(0,1fr) 250px; }
}

@media (max-width: 760px) {
  .app-shell { grid-template-rows: 56px auto minmax(0,1fr) 32px; }
  .app-header { padding: 0 14px; }
  .demo-badge { display: none; }
  .progress-nav { min-height: 46px; }
  .progress-line { width: 34px; margin: 0 7px; }
  .top-view { display: block; min-height: auto; overflow: visible; }
  .top-copy { max-width: none; padding: 34px 20px 24px; }
  h1 { font-size: 34px; }
  .top-lead { font-size: 13px; }
  .top-actions { display: grid; }
  .top-actions .button { width: 100%; }
  .top-visual { min-height: 500px; padding: 20px; }
  .visual-window { width: min(100%, 520px); height: 480px; min-height: 0; }
  body:has(.camera-view.is-active) { overflow: hidden; }
  .app-shell:has(.camera-view.is-active) { height: 100vh; height: 100dvh; min-height: 100dvh; grid-template-rows: 56px auto minmax(0, 1fr) 0; overflow: hidden; }
  .app-shell:has(.camera-view.is-active) .app-main { overflow: hidden; }
  .app-shell:has(.camera-view.is-active) .app-footer { display: none; }
  .camera-view.is-active { height: 100%; grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
  .camera-stage { min-height: 0; }
  .camera-panel { min-height: 0; display: grid; grid-template-rows: auto auto; gap: 8px; }
  .camera-panel .back-button, .camera-panel .eyebrow, .camera-panel h2, .camera-panel .screen-lead { display: none; }
  .eligibility-signals { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; border: 0; gap: 6px; }
  .eligibility-signals > div { grid-template-columns: 18px minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 6px; row-gap: 1px; min-height: 48px; padding: 5px 8px; border: 1px solid var(--line); }
  .eligibility-signals .eligibility-icon { grid-row: 1 / -1; }
  .eligibility-signals strong, .eligibility-signals small { grid-column: 2; min-width: 0; }
  .eligibility-signals small { display: block; line-height: 1.25; overflow-wrap: anywhere; }
  .capture-control { margin-top: 0; padding: 0 0 calc(6px + env(safe-area-inset-bottom)); }
  .shutter { width: 66px; height: 66px; }
  .review-view, .reference-view, .result-view { width: min(100% - 28px, 700px); padding-top: 22px; }
  .portrait-media { height: min(48vh, 500px); }
  .reference-layout { grid-template-columns: 1fr; }
  .reference-preview-panel { display: grid; grid-template-columns: 1fr 160px; column-gap: 12px; }
  .reference-preview-panel .section-label { grid-column: 1 / -1; }
  .hair-only-frame { width: 160px; grid-column: 2; grid-row: 2 / 4; }
  .reference-preview-panel > p { text-align: left; }
  .result-layout { grid-template-columns: 1fr; }
  .result-summary { display: grid; grid-template-columns: 200px 1fr; gap: 16px; align-items: center; }
  .selected-reference { border: 0; padding: 0; }
  .result-summary > p { margin: 0; }
  .demo-disclaimer { grid-column: 1 / -1; }
}

@media (max-width: 520px) {
  .app-header { position: sticky; top: 0; }
  .progress-step strong { display: none; }
  .progress-line { width: 46px; }
  .eyebrow { margin-bottom: 8px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  .top-copy { padding: 28px 16px 20px; }
  .top-lead { margin: 16px 0 20px; }
  .three-steps { margin-bottom: 22px; }
  .three-steps li { display: block; padding: 10px 6px; text-align: center; }
  .three-steps li:first-child { padding-left: 6px; }
  .three-steps li > span { display: block; margin-bottom: 2px; }
  .three-steps small { white-space: normal; }
  .privacy-strip { justify-content: center; gap: 10px; }
  .top-visual { min-height: 420px; padding: 14px; }
  .visual-window { height: 390px; }
  .centered-view { padding: 28px 16px; }
  .consent-list { margin: 20px 0; }
  .camera-panel { padding: 8px 12px 6px; }
  .eligibility-signals > div { min-height: 46px; padding: 4px 7px; }
  .eligibility-signals strong { font-size: 12px; }
  .eligibility-signals small { font-size: 10px; }
  .capture-control { grid-template-columns: 1fr auto 1fr; align-items: center; }
  .capture-control::before { content: ""; }
  .capture-control p { justify-self: end; max-width: 90px; text-align: right; }
  .review-view, .reference-view, .result-view { width: calc(100% - 24px); padding-top: 16px; }
  .screen-heading { margin-bottom: 14px; }
  .review-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .portrait-media { height: 42vh; min-height: 340px; }
  .review-grid figcaption { display: block; min-height: 55px; padding: 8px; }
  .review-grid figcaption strong, .review-grid figcaption span { display: block; }
  .review-grid figcaption span { margin-top: 3px; font-size: 9px; }
  .bottom-actions { position: sticky; bottom: 0; z-index: 8; margin: 12px -12px -22px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(244,245,246,.96); border-top: 1px solid var(--line); }
  .bottom-actions .button { flex: 1; min-width: 0; padding: 0 10px; }
  .reference-choices { grid-template-columns: 1fr 1fr; gap: 7px; }
  .reference-card { display: block; padding: 6px; }
  .reference-card img { width: 100%; height: 150px; }
  .reference-card span { display: block; padding: 8px 3px 4px; }
  .reference-preview-panel { grid-template-columns: 1fr 116px; }
  .hair-only-frame { width: 116px; }
  .processing-visual { width: 150px; height: 225px; }
  .result-header { display: block; }
  .segmented { margin-top: 12px; }
  .comparison-slider { height: 54vh; min-height: 430px; }
  .comparison-side { gap: 5px; }
  .comparison-side img { height: 48vh; min-height: 380px; }
  .result-summary { display: block; padding: 12px; }
  .selected-reference { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
  .result-summary > p { margin: 12px 0; }
  .app-footer { padding: 0 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}