/* ============================================================
   Derma — interactive prototype
   Design system: "Instrument" — a precision scanning device, not a
   wellness app. Sharp corners, hairline dividers instead of soft
   shadows, mono data readouts given real weight, one disciplined
   accent used only functionally.
   Palette: "Sage & Ink" — pale clinical sage-green surfaces and
   white panels, grounded by a confident dark indigo-ink accent
   instead of the expected matching green.
   Type: Instrument Sans (ui/prose) / IBM Plex Mono (data + labels)

   Two token groups sit outside the app's own light theme, because
   they don't live on the app's own background:
   - "chrome" tokens: fixed light-on-dark values for HUD elements
     that overlay arbitrary photo/camera content (viewfinder
     brackets, capture badges, camera controls) — these must stay
     legible regardless of what's behind them.
   - "stage" tokens: fixed light-on-dark values for the demo
     presentation chrome outside the phone bezel, which stays a
     dark backdrop by design while the phone screen itself is light.
   ============================================================ */

:root {
  --ground: #eef8f3;
  --panel: #ffffff;
  --panel-2: #e7f3ee;
  --panel-3: #dbe8e1;
  --line: #c9d9d1;
  --line-strong: #a8c0b3;
  --text: #12161f;
  --text-dim: #546061;
  --text-faint: #8b9695;

  --accent: #2a316b;
  --accent-dim: #545ba0;
  --accent-soft: #d8ddf3;
  --accent-on: #f7f8fc;

  --warn: #9a5b12;
  --warn-soft: #f3e3cd;
  --danger: #a92834;
  --danger-soft: #f6dcdd;

  --dot-grey: #9fb0a8;

  --chrome-bg: rgba(8,14,12,0.8);
  --chrome-bg-soft: rgba(8,14,12,0.6);
  --chrome-text: #f4f7f5;
  --chrome-line: rgba(244,247,245,0.3);
  --chrome-accent: #4fd8c4;
  --chrome-accent-dim: #2fae9c;
  --chrome-hot: #eafffb;

  --stage-text: #f2f6f4;
  --stage-text-dim: #93a89e;
  --stage-panel: #14211c;
  --stage-line: rgba(240,250,245,0.12);
  --stage-line-strong: rgba(240,250,245,0.22);

  --radius-s: 6px;
  --radius-m: 8px;
  --radius-l: 11px;

  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
[role="button"] { outline: none; }
[role="button"]:focus-visible, button:focus-visible, input:focus-visible, label[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
body {
  margin: 0;
  background: var(--ground);
  color: var(--text);
  font-family: "Instrument Sans", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; }
button { font-family: inherit; }

::selection { background: var(--accent-soft); color: var(--accent); }

.eyebrow-font {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.1em;
}

/* ---------- Stage (ambient backdrop the phone sits on) ---------- */

.stage {
  position: relative;
  min-height: 100vh;
  padding: clamp(20px, 4vw, 56px) 16px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  isolation: isolate;
}

.stage-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 70% at 50% -10%, color-mix(in oklab, var(--chrome-accent) 10%, transparent) 0%, transparent 55%),
    linear-gradient(180deg, #0a1210, #050a08 60%);
}
.stage-grid {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(80% 60% at 50% 20%, black 0%, transparent 75%);
}
.stage-noise {
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: 0.03;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.stage-top {
  width: 100%;
  max-width: 1040px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  margin-bottom: clamp(20px, 4vh, 44px);
}
.stage-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.stage-mark {
  width: 34px; height: 34px;
  border-radius: var(--radius-m);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.stage-mark svg { width: 18px; height: 18px; color: var(--accent-on); }
.stage-brand-text { display: flex; flex-direction: column; }
.stage-name {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--stage-text);
}
.stage-tag {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--stage-text-dim);
}
.stage-actions { display: flex; align-items: center; gap: 10px; }
.stage-btn {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  color: var(--stage-text-dim);
  background: transparent;
  border: 1px solid var(--stage-line-strong);
  padding: 9px 14px;
  border-radius: var(--radius-s);
  cursor: pointer;
  transition: background 160ms, transform 120ms, border-color 160ms, color 160ms;
  display: inline-flex; align-items: center; gap: 7px;
}
.stage-btn:hover { background: var(--stage-panel); border-color: var(--accent-dim); color: var(--stage-text); }
.stage-btn:active { transform: scale(0.96); }
.stage-btn svg { width: 13px; height: 13px; }

.stage-caption {
  max-width: 1040px;
  width: 100%;
  color: var(--stage-text-dim);
  font-size: 13.5px;
  line-height: 1.6;
  margin: -8px 0 30px;
}
.stage-caption b { color: var(--stage-text); font-weight: 600; }

/* ---------- Device / phone shell ---------- */

.device-wrap {
  perspective: 1800px;
  perspective-origin: 50% 30%;
}

.device {
  position: relative;
  width: 372px;
  transition: transform 420ms cubic-bezier(.22,.9,.3,1);
  will-change: transform;
}

.device-bezel {
  position: relative;
  padding: 10px;
  border-radius: 40px;
  background: #0a100d;
  box-shadow:
    0 0 0 1px var(--line),
    0 40px 70px -30px rgba(0,0,0,0.8);
}
.device-screen {
  position: relative;
  width: 352px;
  height: 754px;
  background: var(--ground);
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.5) inset;
}
.device-notch {
  position: absolute;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 22px;
  background: #050705;
  border-radius: 11px;
  z-index: 50;
}
.device-inner { display: flex; flex-direction: column; height: 100%; }
.device-statusbar {
  height: 46px;
  flex: 0 0 auto;
  display: flex; align-items: flex-end; justify-content: space-between;
  padding: 0 24px 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--text);
}

/* ---------- Screen scaffolding ---------- */

.screen-stack {
  position: relative;
  width: 352px;
  height: 754px;
}
.screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  overflow: hidden;
}
.screen-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 20px;
}
.screen-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* push (stack) transition */
.tx-push-enter { transform: translate3d(100%,0,0) scale(0.98); opacity: 0.6; }
.tx-push-enter-active { transform: translate3d(0,0,0) scale(1); opacity: 1; transition: transform 420ms cubic-bezier(.22,.9,.28,1), opacity 260ms ease; }
.tx-push-exit { transform: translate3d(0,0,0) scale(1); opacity: 1; }
.tx-push-exit-active { transform: translate3d(-28%,0,0) scale(0.96); opacity: 0; transition: transform 420ms cubic-bezier(.22,.9,.28,1), opacity 320ms ease; }

.tx-pop-enter { transform: translate3d(-28%,0,0) scale(0.96); opacity: 0; }
.tx-pop-enter-active { transform: translate3d(0,0,0) scale(1); opacity: 1; transition: transform 380ms cubic-bezier(.22,.9,.28,1), opacity 260ms ease; }
.tx-pop-exit { transform: translate3d(0,0,0) scale(1); opacity: 1; }
.tx-pop-exit-active { transform: translate3d(100%,0,0) scale(0.98); opacity: 0.4; transition: transform 380ms cubic-bezier(.22,.9,.28,1), opacity 300ms ease; }

.tx-fade-enter { opacity: 0; transform: translate3d(0,6px,0); }
.tx-fade-enter-active { opacity: 1; transform: translate3d(0,0,0); transition: opacity 220ms ease, transform 260ms ease; }
.tx-fade-exit { opacity: 1; }
.tx-fade-exit-active { opacity: 0; transition: opacity 160ms ease; }

@media (prefers-reduced-motion: reduce) {
  .device { transition: none; }
  [class*="tx-"] { transition: opacity 140ms ease !important; transform: none !important; }
}

/* ---------- Typography ---------- */

.h-display {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  text-wrap: balance;
  color: var(--text);
}
.h-screen {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
}
.h-readout {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.label-mono {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-dim);
}

/* ---------- Layout helpers ---------- */

.px { padding-left: 22px; padding-right: 22px; }
.screen-head {
  flex: 0 0 auto;
  padding: 14px 22px 4px;
}
.screen-head-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
.screen-title { font-size: 22px; }
.step-tag { font-size: 10.5px; }
.screen-sub { font-size: 13px; line-height: 1.5; color: var(--text-dim); margin: 6px 0 2px; }
.back-btn svg { width: 19px; height: 19px; display: block; }
#close-paywall svg { width: 17px; height: 17px; display: block; }

.footer-bar {
  flex: 0 0 auto;
  padding: 13px 22px 20px;
  background: var(--ground);
  border-top: 1px solid var(--line);
  display: flex; gap: 10px;
}

/* ---------- Buttons ---------- */

.btn {
  appearance: none; border: none; cursor: pointer;
  font-family: "Instrument Sans", sans-serif;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: var(--radius-m);
  transition: transform 100ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.35; pointer-events: none; }

.btn-primary {
  width: 100%; height: 54px;
  color: var(--accent-on);
  font-size: 15px; font-weight: 700; letter-spacing: -0.005em;
  background: var(--accent);
}
.btn-primary:hover { background: #3a4188; }

.btn-secondary {
  flex: 1; height: 50px;
  color: var(--text);
  font-size: 13.5px; font-weight: 600;
  background: var(--panel);
  border: 1px solid var(--line-strong);
}
.btn-secondary:hover { background: var(--panel-3); border-color: var(--accent-dim); }
.btn-secondary svg { width: 15px; height: 15px; flex: 0 0 auto; }

.btn-ghost-light {
  height: 54px; width: 100%;
  color: var(--accent-on);
  font-size: 15px; font-weight: 700;
  background: var(--accent);
}

/* ---------- Chips / rows ---------- */

.chip-row { display: flex; flex-wrap: wrap; gap: 7px; }
.chip {
  padding: 9px 13px;
  border-radius: var(--radius-s);
  font-size: 13px; font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  transition: transform 100ms ease, background 140ms, border-color 140ms, color 140ms;
}
.chip:active { transform: scale(0.95); }
.chip.on {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-on);
  font-weight: 700;
}

.opt-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; border-radius: var(--radius-s); cursor: pointer;
  font-size: 13.5px;
  border: 1px solid var(--line-strong);
  background: var(--panel);
  color: var(--text);
  transition: background 140ms, border-color 140ms, color 140ms;
}
.opt-row.on { background: var(--accent); border-color: var(--accent); color: var(--accent-on); font-weight: 700; }
.opt-row + .opt-row { margin-top: 6px; }

/* ---------- Cards ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  padding: 20px;
}
.card + .card { margin-top: 12px; }

/* ---------- Toggle ---------- */

.toggle {
  width: 42px; height: 24px; border-radius: 999px; padding: 3px;
  background: var(--panel-3); border: 1px solid var(--line-strong); cursor: pointer; flex: 0 0 auto;
  transition: background 180ms, border-color 180ms;
}
.toggle.on { background: var(--accent); border-color: var(--accent); }
.toggle-knob {
  width: 16px; height: 16px; border-radius: 50%; background: var(--text-dim);
  transition: transform 220ms cubic-bezier(.34,1.55,.4,1), background 180ms;
}
.toggle.on .toggle-knob { transform: translateX(18px); background: var(--accent-on); }

/* ---------- Tab bar ---------- */

.tabbar {
  flex: 0 0 auto;
  position: relative;
  z-index: 5;
  display: grid; grid-template-columns: repeat(5,1fr);
  padding: 10px 8px calc(14px + env(safe-area-inset-bottom, 0px));
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px 0;
}
.tab-icon { width: 20px; height: 20px; color: var(--text-faint); transition: color 160ms, transform 160ms; }
.tab-icon svg { width: 100%; height: 100%; display: block; }
.tab-item.active .tab-icon { color: var(--accent); }
.tab-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-faint);
}
.tab-item.active .tab-label { color: var(--text); }
.tab-dot {
  width: 12px; height: 2px; border-radius: 2px; background: var(--accent);
  position: absolute; margin-top: -25px;
  opacity: 0; transform: scaleX(0);
  transition: transform 220ms cubic-bezier(.34,1.6,.4,1), opacity 220ms;
}
.tab-item.active .tab-dot { opacity: 1; transform: scaleX(1); }

/* ---------- Capture ---------- */

.capture-frame {
  display: block;
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--radius-l);
  overflow: hidden;
  background: linear-gradient(145deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong);
  cursor: pointer;
}
.capture-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.capture-empty {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: var(--text-dim);
}
.capture-empty-icon {
  width: 46px; height: 46px; border-radius: var(--radius-m);
  border: 1.5px dashed var(--accent-dim);
  display: flex; align-items: center; justify-content: center;
}
.capture-empty-icon svg { width: 20px; height: 20px; }
.capture-guide {
  position: absolute; inset: 0; pointer-events: none;
}
.capture-guide-ring {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 58%; height: 58%; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,0.6);
  box-shadow: 0 0 0 9999px rgba(2,4,3,0.35);
}
.capture-bracket {
  position: absolute; width: 20px; height: 20px;
  border-color: var(--chrome-accent); border-style: solid; border-width: 0;
  opacity: 0.85;
}
.capture-bracket.tl { top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; border-top-left-radius: 4px; }
.capture-bracket.tr { top: 10px; right: 10px; border-top-width: 2px; border-right-width: 2px; border-top-right-radius: 4px; }
.capture-bracket.bl { bottom: 10px; left: 10px; border-bottom-width: 2px; border-left-width: 2px; border-bottom-left-radius: 4px; }
.capture-bracket.br { bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; border-bottom-right-radius: 4px; }
.capture-scanline {
  position: absolute; left: 6%; right: 6%; height: 2px;
  background: linear-gradient(90deg, transparent, var(--chrome-accent) 20%, var(--chrome-hot) 50%, var(--chrome-accent) 80%, transparent);
  box-shadow: 0 0 16px 2px color-mix(in oklab, var(--chrome-accent) 70%, transparent);
  top: 10%;
  animation: scan 1.8s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes scan { 0% { top: 8%; } 50% { top: 88%; } 100% { top: 8%; } }
.capture-analysing-badge {
  position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%);
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em;
  color: var(--chrome-accent); background: var(--chrome-bg); border: 1px solid var(--chrome-accent-dim); padding: 7px 12px; border-radius: var(--radius-s);
}
.capture-retake-badge {
  position: absolute; left: 50%; top: 14px; transform: translateX(-50%);
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.08em;
  color: var(--chrome-text); background: var(--chrome-bg); border: 1px solid var(--chrome-line); padding: 6px 11px; border-radius: var(--radius-s);
  pointer-events: none;
}

.extra-photos-row { display: flex; flex-wrap: wrap; gap: 8px; }
.extra-photo {
  position: relative; width: 60px; height: 60px; border-radius: var(--radius-m); overflow: hidden;
  border: 1px solid var(--line-strong); flex: 0 0 auto;
}
.extra-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.extra-photo-remove {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  background: var(--chrome-bg); border: none; color: var(--chrome-text); cursor: pointer;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.extra-photo-remove svg { width: 9px; height: 9px; }
.extra-photo-add {
  width: 60px; height: 60px; border-radius: var(--radius-m); flex: 0 0 auto;
  border: 1.5px dashed var(--line-strong); color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 300; cursor: pointer;
  transition: border-color 160ms, color 160ms;
}
.extra-photo-add:hover { border-color: var(--accent); color: var(--accent); }

.sample-photos-row { display: flex; flex-wrap: wrap; gap: 8px; }
.sample-photo {
  appearance: none; padding: 0; cursor: pointer;
  width: 64px; height: 64px; border-radius: var(--radius-m); overflow: hidden;
  border: 1px solid var(--line-strong); background: var(--panel); flex: 0 0 auto;
  transition: border-color 160ms, transform 100ms ease;
}
.sample-photo:hover { border-color: var(--accent-dim); }
.sample-photo:active { transform: scale(0.94); }
.sample-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.report-photo-row { display: flex; gap: 8px; flex-wrap: wrap; }
.report-photo { width: 54px; height: 54px; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line-strong); }
.report-photo.primary { border-color: var(--accent); border-width: 2px; }
.report-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Live camera overlay ---------- */

.layer-camera { background: #000; }
.camera-overlay {
  position: absolute; inset: 0;
  background: #010202;
  display: flex; align-items: center; justify-content: center;
  animation: cam-in 260ms ease both;
}
@keyframes cam-in { from { opacity: 0; } to { opacity: 1; } }
.camera-overlay video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.camera-status {
  position: relative; z-index: 2;
  font-family: "IBM Plex Mono", monospace;
  color: var(--chrome-accent); font-size: 11px; letter-spacing: 0.1em;
}
.camera-close {
  position: absolute; top: 16px; right: 16px; z-index: 3;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--chrome-bg-soft); border: 1px solid var(--chrome-line); color: var(--chrome-text); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.camera-close svg { width: 15px; height: 15px; }
.camera-controls {
  position: absolute; left: 0; right: 0; bottom: 28px; z-index: 3;
  display: flex; justify-content: center;
}
.camera-shutter {
  width: 68px; height: 68px; border-radius: 50%;
  background: transparent; border: 3px solid var(--chrome-text); cursor: pointer;
  padding: 4px;
  transition: transform 120ms cubic-bezier(.34,1.4,.4,1);
}
.camera-shutter::before {
  content: ""; display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--chrome-accent);
}
.camera-shutter:active { transform: scale(0.88); }

.quality-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.quality-card {
  padding: 12px; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--panel);
}
.quality-label { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; letter-spacing: 0.08em; color: var(--text-dim); margin-bottom: 6px; }
.quality-value { font-family: "IBM Plex Mono", monospace; font-size: 14.5px; font-weight: 600; color: var(--text); }
.quality-raw { font-family: "IBM Plex Mono", monospace; font-size: 9.5px; color: var(--text-faint); margin-top: 4px; }

.hint-box {
  margin-top: 13px; padding: 13px 15px; border-radius: var(--radius-m);
  background: var(--panel-2); border: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.5; color: var(--text-dim);
}

/* ---------- Report ---------- */

.match-card {
  border-top: 2px solid var(--accent);
  position: relative;
}
.risk-pill {
  font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.08em;
  padding: 5px 9px; border-radius: var(--radius-s);
  border: 1px solid currentColor;
  background: transparent;
}
.risk-pill.low { color: var(--accent); }
.risk-pill.monitor { color: var(--warn); }
.risk-pill.see { color: var(--danger); }

.conf-track { position: relative; height: 8px; border-radius: var(--radius-s); background: var(--panel-3); overflow: hidden; }
.conf-track::after {
  content: "";
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(to right, transparent 0 9%, rgba(0,0,0,0.35) 9% calc(9% + 1px));
  pointer-events: none;
}
.conf-fill {
  height: 100%; border-radius: var(--radius-s);
  background: var(--accent);
  width: 0%;
  transition: width 900ms cubic-bezier(.16,1,.3,1);
}

.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }

.home-care-list { display: flex; flex-direction: column; gap: 11px; }
.home-care-row { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.48; color: var(--text); }
.home-care-dot { width: 5px; height: 5px; border-radius: 1px; background: var(--accent); flex: 0 0 auto; margin-top: 6px; transform: rotate(45deg); }

.disclaimer-box {
  padding: 15px 17px; border-radius: var(--radius-m);
  background: var(--danger-soft);
  border: 1px solid color-mix(in oklab, var(--danger) 30%, transparent);
  font-size: 12.5px; line-height: 1.5; color: var(--text);
}
.disclaimer-box strong { color: var(--danger); }

/* ---------- Region / clinic cards ---------- */

.region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.region-card { border: 1px solid var(--line); border-radius: var(--radius-l); padding: 15px; background: var(--panel); cursor: pointer; transition: border-color 160ms, background 160ms; }
.region-card:hover { border-color: var(--accent-dim); background: var(--panel-2); }
.region-dot { width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); }

.clinic-card { border: 1px solid var(--line); border-radius: var(--radius-l); padding: 16px 17px; background: var(--panel); margin-bottom: 10px; }
.care-context {
  font-size: 12.5px; line-height: 1.5; color: var(--accent);
  background: var(--accent-soft); border: 1px solid color-mix(in oklab, var(--accent) 35%, transparent);
  border-radius: var(--radius-m); padding: 12px 14px;
  animation: card-rise 420ms cubic-bezier(.22,1,.32,1) both;
}
.care-context strong { color: var(--text); }
.care-context.urgent { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in oklab, var(--danger) 35%, transparent); }
.care-context.urgent strong { color: var(--text); }
.care-filter-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; padding-bottom: 14px; }
.care-empty { padding: 40px 12px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--text-dim); }
.care-empty button {
  appearance: none; border: none; background: none; font-family: inherit; font-size: inherit; padding: 0;
  color: var(--accent); text-decoration: underline; cursor: pointer;
}
.book-btn {
  appearance: none; border: none; font-family: inherit;
  padding: 9px 15px; border-radius: var(--radius-s); font-size: 12.5px; font-weight: 700; color: var(--accent-on); cursor: pointer;
  background: var(--accent);
  transition: transform 100ms ease;
}
.book-btn:active { transform: scale(0.94); }

/* ---------- Log rows ---------- */

.log-row { display: flex; gap: 13px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); }
.log-thumb {
  width: 52px; height: 52px; border-radius: var(--radius-m); flex: 0 0 auto;
  background: linear-gradient(145deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-family: "IBM Plex Mono", monospace; font-size: 9px; color: var(--text-faint);
  overflow: hidden;
}
.log-thumb img { width: 100%; height: 100%; object-fit: cover; }
.bar-track { height: 4px; border-radius: var(--radius-s); background: var(--panel-3); flex: 1; overflow: hidden; }
.bar-fill { height: 100%; border-radius: var(--radius-s); background: var(--accent); }

/* ---------- Paywall ---------- */

.paywall-screen {
  background: var(--ground);
  color: var(--text);
}
.paywall-feature { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; }
.paywall-feature svg { width: 14px; height: 14px; flex: 0 0 auto; }
.plan-card {
  flex: 1; border-radius: var(--radius-l); padding: 15px; border: 1px solid var(--line-strong); cursor: pointer;
  background: var(--panel);
  transition: background 180ms, border-color 180ms, transform 100ms ease;
}
.plan-card:active { transform: scale(0.97); }
.plan-card.active { background: var(--accent-soft); border-color: var(--accent); }

/* ---------- Settings ---------- */

.plus-banner {
  border-radius: var(--radius-l); padding: 16px; margin-bottom: 4px; cursor: pointer;
  background: var(--accent-soft); border: 1px solid var(--accent-dim);
  color: var(--text); display: flex; align-items: center; gap: 12px;
  transition: transform 100ms ease, border-color 160ms;
}
.plus-banner:hover { border-color: var(--accent); }
.plus-banner:active { transform: scale(0.98); }

.setting-row { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; padding: 15px 0; border-top: 1px solid var(--line); }
.device-row { display: flex; justify-content: space-between; font-size: 13px; padding: 6px 0; color: var(--text); }
.danger-btn {
  height: 50px; border-radius: var(--radius-m); border: 1px solid color-mix(in oklab, var(--danger) 45%, transparent); color: var(--danger);
  background: transparent;
  display: flex; align-items: center; justify-content: center; font-size: 13.5px; font-weight: 700; cursor: pointer; width: 100%;
}
.danger-btn:hover { background: var(--danger-soft); }

/* ---------- Toast ---------- */

.toast-layer {
  position: absolute; left: 0; right: 0; bottom: 100px; z-index: 200;
  display: flex; justify-content: center; pointer-events: none;
  padding: 0 20px;
}
.toast {
  pointer-events: auto;
  max-width: 100%;
  display: flex; align-items: center; gap: 9px;
  background: var(--panel-3);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 13px; font-weight: 500;
  padding: 12px 16px; border-radius: var(--radius-m);
  box-shadow: 0 16px 30px -14px rgba(0,0,0,0.6);
  transform: translateY(14px); opacity: 0;
  transition: transform 260ms cubic-bezier(.22,1.2,.3,1), opacity 220ms;
}
.toast.show { transform: translateY(0); opacity: 1; }
.toast-check {
  width: 18px; height: 18px; border-radius: 50%; background: var(--accent);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.toast-check svg { width: 10px; height: 10px; color: var(--accent-on); }

/* ---------- Consent mark & misc ---------- */

.check-box {
  width: 22px; height: 22px; border-radius: var(--radius-s); flex: 0 0 auto;
  border: 1.5px solid var(--line-strong);
  display: flex; align-items: center; justify-content: center;
  transition: background 160ms, border-color 160ms;
}
.check-box.on {
  background: var(--accent);
  border-color: var(--accent);
}
.check-box svg { width: 12px; height: 12px; color: var(--accent-on); }

.point-row { display: flex; gap: 14px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.point-num { font-family: "IBM Plex Mono", monospace; font-size: 11px; color: var(--text-dim); width: 20px; flex: 0 0 auto; padding-top: 2px; }

textarea.field, input.field {
  width: 100%; box-sizing: border-box; resize: none;
  font-family: "Instrument Sans", sans-serif; font-size: 13.5px; line-height: 1.45; color: var(--text);
  padding: 13px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-m); background: var(--panel);
  outline: none; transition: border-color 160ms, box-shadow 160ms;
}
textarea.field::placeholder, input.field::placeholder { color: var(--text-faint); }
textarea.field:focus, input.field:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
input.field { height: 46px; }
.other-site-field { margin-bottom: 16px; animation: card-rise 260ms cubic-bezier(.22,1,.32,1) both; }

/* ---------- Splash (boot sequence) ---------- */

.splash {
  position: absolute; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  background: var(--ground);
}
.splash-mark {
  width: 56px; height: 56px; border-radius: var(--radius-l);
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
  animation: pop-in 460ms cubic-bezier(.22,1.5,.32,1) both;
}
.splash-mark svg { width: 26px; height: 26px; color: var(--accent-on); }
@keyframes pop-in { 0% { transform: scale(0.5); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.splash-word {
  font-family: "IBM Plex Mono", monospace; font-weight: 600; font-size: 15px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text);
  opacity: 0; animation: rise 420ms 220ms ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(6px);} to { opacity: 1; transform: translateY(0);} }
.splash-tag {
  font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: 0.1em; color: var(--text-dim);
  opacity: 0; animation: rise 420ms 340ms ease both;
  display: flex; align-items: center; gap: 8px;
}
.splash-tag::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) {
  .splash-mark, .splash-word, .splash-tag { animation: none; opacity: 1; }
  .splash-tag::before { animation: none; }
}

/* ---------- Scroll reveal for cards ---------- */

.rise-in { animation: card-rise 520ms cubic-bezier(.22,1,.32,1) both; }
@keyframes card-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ---------- Real-phone "app" mode ----------
   On an actual phone, a shrunken phone-mockup-inside-a-webpage (bezel,
   notch, fake status bar, demo caption explaining you're looking at a
   mockup) reads as "a page about an app", not the app itself. Below this
   breakpoint the device chrome is dropped and the screen content is
   promoted to fill the real viewport edge-to-edge, using the device's own
   real status bar / notch via safe-area insets — so it reads as the app,
   full stop, whether opened in a browser tab or installed to the home
   screen via the manifest. */
@media (max-width: 600px) {
  .stage { padding: 0; min-height: 100vh; min-height: 100dvh; align-items: stretch; }
  .stage-top, .stage-caption { display: none; }
  .stage-bg, .stage-grid, .stage-noise { display: none; }

  .device-wrap { perspective: none; width: 100%; }
  .device { width: 100%; transform: none !important; transition: none; }
  .device-bezel { padding: 0; border-radius: 0; background: var(--ground); box-shadow: none; }
  .device-notch { display: none; }
  .device-screen {
    width: 100%;
    height: 100vh; height: 100dvh;
    border-radius: 0; box-shadow: none;
  }
  .device-statusbar { display: none; }
  .device-inner { padding-top: env(safe-area-inset-top, 0px); }
  .screen-stack { width: 100%; height: 100%; }
}

@media (min-width: 601px) and (max-width: 900px) {
  .device { width: 92vw; max-width: 372px; }
  .device-screen, .screen-stack { width: 100%; height: 72vh; height: 72dvh; min-height: 520px; max-height: 82vh; max-height: 82dvh; }
}