/* ─────────────────────────────────────────────────────────────
   B&D Warranty Registration — visual system
   Driven by the Desktop.png / Mobile.png mockups attached:
   - heavy industrial display type (uppercase)
   - hi-vis yellow accent
   - white cards w/ 1px hairline yellow border
   - hero photo at top, dusk field + combine
───────────────────────────────────────────────────────────── */

:root {
  --bd-yellow: #f8e52f;
  --bd-yellow-deep: #d9c41a;
  --bd-yellow-soft: #fdf6b8;
  --ink: #0B0B0B;
  --ink-2: #1a1a1a;
  --ink-3: #4a4a4a;
  --ink-4: #8a8a8a;
  --line: #E5E5E5;
  --line-2: #EFEFEF;
  --field: #FAFAFA;
  --bg: #ffffff;
  --bg-tint: #F5F5F2;
  --error: #C8312A;
  --success: #1E7E45;

  --r-card: 14px;
  --r-field: 8px;
  --r-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.08);
  --shadow-lg: 0 24px 60px rgba(0,0,0,0.18);

  --font-display: "Teko", "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Hind", Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #efece6; }
body {
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.45;
}
button { font-family: inherit; }

/* ── Stage that holds the prototype — always wraps the app.
   On wide screens it shows the warm off-white backdrop and the form
   sits as a fixed-width centered card. On mobile it disappears so the
   app is full-bleed (a real phone user never sees the chrome). ── */
.stage {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 24px;
  background:
    radial-gradient(900px 600px at 30% -10%, rgba(255,210,0,0.08), transparent 60%),
    radial-gradient(900px 600px at 80% 110%, rgba(0,0,0,0.06), transparent 60%),
    #efece6;
}
@media (max-width: 560px) {
  .stage {
    padding: 0;
    background: #fff;
    align-items: stretch;
    min-height: auto;
  }
}

/* ── App container (mobile-first) ── */
.app {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.04),
    0 30px 60px rgba(0,0,0,0.12),
    0 8px 16px rgba(0,0,0,0.05);
}
/* On a real phone the card runs edge to edge and we want the white to fill
   the viewport. On desktop we want the card to hug its content so a short
   screen (like the intro) doesn't leave a giant empty zone below the CTA. */
@media (max-width: 560px) {
  .app {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    min-height: 100vh;
  }
}

/* ── Typography ── */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 0.98;
}
.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.section-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0;
}
.h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.005em;
  text-transform: uppercase;
  margin: 0 0 14px;
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.05;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin: 0 0 8px;
  text-wrap: balance;
}
.body { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.body-sm { color: var(--ink-3); font-size: 13.5px; line-height: 1.5; }
.muted { color: var(--ink-4); }

/* Teko nudges — it sits looser and a touch lighter than Oswald, so tighten
   line-heights on display headings so the wordmark feel from the B&D logo
   carries through. h2 keeps a touch of breathing room because it wraps to
   2 lines on narrow screens. */
.h1 { line-height: 0.95; }
.h2 { line-height: 1.08; }
.section-title { line-height: 1; }

/* underline accent under display headings (like the mockup) */
.under-rule {
  display: inline-block;
  border-bottom: 3px solid var(--ink);
  padding-bottom: 6px;
}

/* ── Card ── */
.card {
  background: #fff;
  border: 1px solid var(--bd-yellow);
  border-radius: var(--r-card);
  padding: 20px 18px;
}
.card-plain {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 18px;
}

/* ── Field ── */
.field-row { display: flex; flex-direction: column; gap: 6px; }
.field-row + .field-row { margin-top: 14px; }
.field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
}
.field-label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.01em;
  color: var(--ink-2);
}
.field-required::after { content: " *"; color: var(--error); }
.field-help { font-size: 12.5px; color: var(--ink-4); margin-top: -2px; }
.field-error {
  font-size: 12.5px;
  color: var(--error);
  margin-top: 2px;
  display: flex; align-items: center; gap: 4px;
}

.input, .select, .textarea {
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  padding: 12px 14px;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
  appearance: none;
  -webkit-appearance: none;
}
.input::placeholder, .textarea::placeholder { color: #B6B6B6; }
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(248, 229, 47, 0.45);
}
.input.invalid, .select.invalid { border-color: var(--error); }
.select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 18px) 18px, calc(100% - 13px) 18px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
}
.textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

.input-with-prefix {
  display: flex; align-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-field);
  background: #fff;
}
.input-with-prefix:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px rgba(248, 229, 47, 0.45);
}
.input-with-prefix .prefix {
  padding: 0 12px;
  color: var(--ink-4);
  border-right: 1px solid var(--line);
  font-size: 14px;
  height: 100%;
  display: flex; align-items: center;
}
.input-with-prefix input {
  flex: 1; border: none; padding: 12px 14px;
  font-size: 16px; outline: none; background: transparent;
  font-family: inherit;
}

/* ── Choice cards (radio) ── */
.choice-list { display: flex; flex-direction: column; gap: 10px; }
.choice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  padding: 16px;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .12s;
  user-select: none;
}
.choice:hover { border-color: var(--ink-4); }
.choice:active { transform: scale(0.995); }
.choice.selected {
  border-color: var(--ink);
  background: #FFFCE6;
  box-shadow: inset 0 0 0 2px var(--bd-yellow);
}
.choice .radio-dot {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 999px;
  border: 1.5px solid var(--ink-4);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
  background: #fff;
}
.choice.selected .radio-dot { border-color: var(--ink); }
.choice.selected .radio-dot::after {
  content: ''; width: 10px; height: 10px; border-radius: 999px;
  background: var(--ink);
}
.choice-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  line-height: 1.15;
}
.choice-sub { font-size: 13px; color: var(--ink-3); margin-top: 2px; line-height: 1.4; }

/* ── Checkboxes ── */
.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 14px;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: var(--r-card);
  cursor: pointer;
  user-select: none;
  transition: border-color .12s, background .12s;
}
.checkbox-row:hover { border-color: var(--ink-4); }
.checkbox-row.checked {
  border-color: var(--ink);
  background: #FFFCE6;
  box-shadow: inset 0 0 0 2px var(--bd-yellow);
}
.checkbox-box {
  flex-shrink: 0;
  width: 22px; height: 22px; border-radius: 5px;
  border: 1.5px solid var(--ink-4);
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
  background: #fff;
}
.checkbox-row.checked .checkbox-box {
  background: var(--ink); border-color: var(--ink);
}
.checkbox-row.checked .checkbox-box svg { display: block; }
.checkbox-box svg { display: none; }
.checkbox-label {
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.4;
}
.checkbox-row.compact { padding: 10px 12px; gap: 10px; }
.checkbox-row.compact .checkbox-label {
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 13px;
}

/* ── Buttons ── */
.btn {
  appearance: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 15px;
  padding: 16px 22px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  transition: transform .08s, background .12s, color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn:active { transform: scale(0.985); }
.btn-primary {
  background: var(--bd-yellow);
  color: var(--ink);
  box-shadow: 0 4px 0 var(--bd-yellow-deep);
}
.btn-primary:hover { background: #fbef5e; }
.btn-primary:disabled {
  background: #ECECEC;
  color: #B0B0B0;
  box-shadow: 0 4px 0 #D9D9D9;
  cursor: not-allowed;
}
.btn-primary:disabled:active { transform: none; }
.btn-secondary {
  background: #fff;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-ghost {
  background: transparent;
  color: var(--ink);
  padding: 12px 14px;
}
/* "alt path" secondary button — same chassis as .btn-secondary, but
   sentence-case/regular weight so it reads as a clearly subordinate option,
   not a competing primary CTA. */
.btn-used {
  text-transform: none;
  letter-spacing: 0.01em;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14.5px;
  padding: 16px 18px;
  line-height: 1.3;
  text-align: center;
  text-wrap: balance;
}
.btn-block { width: 100%; }

/* Secondary CTA on the intro: clearly subordinate to the yellow primary —
   outlined, lighter, sits directly under Start Registration. */
.btn-claim {
  margin-top: 10px;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-claim:hover { background: #F7F7F4; }

/* Tertiary text link — lowest emphasis, breathing room above the footer. */
.intro-tertiary {
  text-align: center;
  margin-top: 16px;
}
.intro-tertiary a {
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.intro-tertiary a:hover { color: var(--ink); border-bottom-color: var(--ink-4); }

/* Clickable logo wrapper — preserves logo size/position, adds subtle affordance. */
.hero-logo-link {
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  z-index: 2;
  display: block;
  border-radius: 6px;
  transition: opacity 0.15s ease;
  outline: none;
}
.hero-logo-link .hero-logo {
  position: static; top: auto; left: auto; transform: none;
  display: block;
}
.hero-logo-link:hover { opacity: 0.86; }
.hero-logo-link:focus-visible { box-shadow: 0 0 0 3px var(--bd-yellow); }

/* ── Progress bar ── */
.progress-wrap {
  position: sticky; top: 0; z-index: 20;
  background: #fff;
  border-bottom: 1px solid var(--line-2);
}
.progress-top {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px 8px;
}
.progress-back {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent; border: none; cursor: pointer;
  padding: 6px 4px; color: var(--ink);
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; font-size: 11.5px;
}
.progress-back:disabled { opacity: 0; pointer-events: none; }
.progress-step {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.progress-step b { color: var(--ink); font-weight: 700; }
.progress-logo { width: 36px; height: 36px; }
.progress-bar {
  height: 4px; background: #F0EFEC; position: relative; overflow: hidden;
}
.progress-bar-fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: var(--bd-yellow);
  transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* ── Bottom CTA bar ── */
.cta-bar {
  padding: 8px 18px calc(20px + env(safe-area-inset-bottom));
  display: flex; gap: 10px;
}
.cta-bar .btn { flex: 1; }

/* ── Screen body ── */
.screen { flex: 1; display: flex; flex-direction: column; }
.screen-body {
  padding: 22px 18px 8px;
  display: flex; flex-direction: column; gap: 18px;
}
.intro-body { padding: 0; }

/* ── Hero ── */
.hero {
  position: relative;
  height: 280px;
  overflow: hidden;
  /* Match the background to white so any sub-pixel rendering gap at the
     hero/white-card boundary reads as continuous white, not a dark seam. */
  background: #fff;
  /* And kill any sub-pixel rendering line by drawing the image edge
     slightly into the next block. */
  display: block;
  line-height: 0;
}
@media (min-width: 561px) {
  .hero { height: 360px; }
}
.hero-intro {
  border-bottom-left-radius: inherit;
  border-bottom-right-radius: inherit;
}
/* On the Warranty Center intro the hero content sits vertically centered on
   the image (nudged slightly below true center to balance the logo up top),
   rather than anchored to the bottom edge. */
.hero-intro .hero-content {
  top: 50%; bottom: auto;
  transform: translateY(-44%);
}
.hero-img {
  position: absolute; inset: 0;
  background-position: center;
  background-size: cover;
  filter: brightness(0.78) contrast(1.05);
}
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.10) 0%,
      rgba(0,0,0,0.35) 35%,
      rgba(0,0,0,0.65) 70%,
      rgba(0,0,0,0.85) 100%);
}
.hero-logo {
  position: absolute;
  top: 22px; left: 50%; transform: translateX(-50%);
  z-index: 2;
}
.hero-content {
  position: absolute; left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px 22px 28px;
  color: #fff;
  text-align: center;
}
.hero-content .h1 {
  color: #fff;
  font-size: 44px;
  line-height: 1.0;
  letter-spacing: 0.10em;
  font-weight: 500;
  margin-top: 12px;
  padding-bottom: 12px;
}
@media (min-width: 561px) {
  .hero-content .h1 { font-size: 56px; }
}
.hero-content .body { color: rgba(255,255,255,0.95); }
.hero-cta-wrap {
  /* Button lives in the white area just below the hero. Keep the padding
     tight so it reads as the natural next step after "2 minutes", not as
     an orphaned element in a sea of white. */
  padding: 18px 22px 4px;
  background: #fff;
}
.hero-takes {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 18px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 13px;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.hero-takes::before, .hero-takes::after {
  content: '';
  width: 28px; height: 2px;
  background: var(--bd-yellow);
}
/* removed dup ::before/::after rules (now part of .hero-takes block above) */

/* ── Misc ── */
.divider { height: 1px; background: var(--line-2); margin: 6px 0; }
.callout {
  padding: 14px 14px;
  background: var(--bd-yellow-soft);
  border-left: 4px solid var(--bd-yellow);
  border-radius: 0 8px 8px 0;
  font-size: 13.5px;
  color: var(--ink-2);
}
.callout-ok {
  background: #ECF7ED;
  border-left-color: #2e7d32;
}
.callout-warn {
  background: #FBEEE8;
  border-left-color: #C8312A;
}
.privacy-line {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-4);
  text-align: center;
  padding: 2px 12px;
}
.linklike {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body);
  font-size: 13.5px; font-weight: 500;
  color: var(--ink-3);
  padding: 4px 2px;
  text-decoration: none;
}
.linklike:hover { color: var(--ink); }
.disclaimer {
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.92);
  margin-top: 12px;
  padding: 0 8px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
}
.warranty-scroll {
  max-height: 240px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  background: #FAFAFA;
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
}
.warranty-scroll p { margin: 0 0 10px; }
.warranty-scroll h4 {
  margin: 14px 0 6px; font-family: var(--font-display);
  letter-spacing: 0.08em; text-transform: uppercase; font-size: 12.5px;
}

/* ── Crop card (forage) ── */
.crop-card {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.crop-card.checked { border-color: var(--ink); box-shadow: inset 0 0 0 2px var(--bd-yellow); }
.crop-head {
  display: flex; align-items: center; gap: 10px;
  padding: 14px;
  cursor: pointer; user-select: none;
}
.crop-body {
  border-top: 1px solid var(--line-2);
  padding: 14px;
  background: #FFFEF6;
  display: flex; flex-direction: column; gap: 12px;
}
.crop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ── Chip (multi-add) ── */
.chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--ink); color: #fff;
  padding: 7px 12px; border-radius: 999px;
  font-family: var(--font-display); font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  font-size: 12px;
}
.chip button {
  background: var(--bd-yellow); color: var(--ink);
  border: none; border-radius: 999px;
  width: 16px; height: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0; font-size: 12px; line-height: 1;
}

/* ── Confirmation icon ── */
.confirm-stamp {
  width: 96px; height: 96px;
  border-radius: 999px;
  background: var(--bd-yellow);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
  box-shadow: 0 0 0 8px rgba(255, 210, 0, 0.18);
}

/* ── Textarea ── */
.textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.5;
  font-family: var(--font-body);
}
.textarea-foot {
  display: flex; align-items: flex-start; gap: 10px;
  margin-top: 2px;
}
.char-count {
  font-family: var(--font-display);
  font-weight: 600; font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--ink-4);
  white-space: nowrap;
  padding-top: 1px;
}
.char-count.ok { color: #2e7d32; }

/* ── Photo upload ── */
.upload-drop {
  width: 100%;
  background: #FAFAF8;
  border: 1.5px dashed var(--ink-4);
  border-radius: var(--r-field);
  padding: 22px 16px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.upload-drop:hover { border-color: var(--ink); background: #F5F3EE; }
.upload-plus {
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--bd-yellow);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.upload-drop-main {
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; font-size: 15px;
  color: var(--ink);
}
.upload-drop-sub { font-size: 12.5px; color: var(--ink-4); }
.thumb-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #eee;
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.thumb-x {
  position: absolute; top: 5px; right: 5px;
  width: 22px; height: 22px; border-radius: 999px;
  background: rgba(11,11,11,0.78); border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
}
.thumb-x:hover { background: var(--error, #C8312A); }
.thumb-meta {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
  color: #fff; font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.04em;
  padding: 12px 6px 5px; text-align: right;
}

/* ── Review summary rows ── */
.summary-block { display: flex; flex-direction: column; }
.summary-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.summary-edit {
  background: none; border: none; cursor: pointer;
  font-family: var(--font-display); font-weight: 700;
  letter-spacing: 0.10em; text-transform: uppercase; font-size: 12px;
  color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 2px;
}
.summary-edit:hover { color: var(--ink); }
.summary-edit::after {
  content: ""; display: inline-block;
  width: 14px; height: 1.5px; background: var(--bd-yellow);
}
.summary-row {
  display: flex; gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--line-2);
  font-size: 14px;
}
.summary-row:first-child { border-top: none; }
.summary-row .k {
  flex: 0 0 38%;
  color: var(--ink-4);
  font-weight: 500;
}
.summary-row .v { flex: 1; color: var(--ink); font-weight: 500; }
.summary-row .v.empty { color: var(--ink-4); font-style: italic; font-weight: 400; }
.issue-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.issue-tag {
  background: var(--ink); color: #fff;
  padding: 5px 10px; border-radius: 6px;
  font-size: 12.5px; font-weight: 600;
}

/* No screen fade — the host preview iframe sometimes throttles or freezes
   short CSS animations at frame 0, leaving the screen at opacity 0. Just
   render screens at full opacity; screen-to-screen transitions are still
   instant which is the right feel for a one-decision-per-step form. */
.fade-enter { opacity: 1; }
.screen { opacity: 1; }

/* desktop "device" presentation */
@media (min-width: 481px) {
  .device-shell {
    width: 430px;
    height: min(900px, calc(100vh - 64px));
    background: #fff;
    border-radius: 44px;
    box-shadow:
      0 0 0 12px #111,
      0 0 0 14px #2a2a2a,
      0 40px 80px rgba(0,0,0,0.35);
    overflow: hidden;
    position: relative;
  }
  .device-shell::before {
    content: '';
    position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
    width: 110px; height: 28px; border-radius: 20px; background: #000;
    z-index: 100;
  }
  .device-shell .app {
    height: 100%; max-width: none; overflow-y: auto;
  }
  /* push content below the notch on phone screens */
  .device-shell .progress-wrap { padding-top: 44px; }
  .device-shell .hero { padding-top: 44px; box-sizing: content-box; }
}

/* Phase progress bar - one-shot shimmer on completing a phase */
.phase-seg-shine { position: relative; overflow: hidden; }
.phase-seg-shine::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.9), transparent);
  animation: phaseShine 0.8s ease-out 1;
}
@keyframes phaseShine {
  from { left: -60%; }
  to { left: 110%; }
}