.start-head { margin-top: var(--s5); }
.start-head h1 { font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -0.015em; }
.start-sub { margin-top: var(--s1); color: var(--muted); font-size: var(--fs-body); }

.stepper { position: relative; margin-top: var(--s5); overflow-x: auto; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.stepper ol { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); min-width: 640px; padding-bottom: 6px; }
.stepper ol:has(> li[data-step="4.5"]:not([hidden])) { min-width: 720px; }
.stepper li { position: relative; display: flex; align-items: center; gap: var(--s2); padding: 0 var(--s4) var(--s2) 0; border-bottom: 2px solid var(--line, var(--active)); color: var(--faint); font-weight: 500; white-space: nowrap; --line: var(--active); }
.stepper li::before { content: ""; position: absolute; left: 0; bottom: -7px; width: 2px; height: 12px; background: var(--line); }
.stepper li svg { display: none; }
.stepper li.done { color: var(--muted); --line: var(--text); }
.stepper li[aria-current="step"] { color: var(--text); font-weight: 600; --line: var(--text); }
.stepper li { display: grid; align-content: end; row-gap: 2px; font-size: var(--fs-small); line-height: var(--lh-small); }
.stepper li .sv { min-height: var(--lh-body); color: var(--text); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stepper li[aria-current="step"] > span { font-size: var(--fs-body); line-height: var(--lh-body); }
.stepper li[aria-current="step"] > .sv:empty { display: none; }

.start-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--sec-gap) var(--col-gap); margin-top: var(--s5); align-items: start; }
.start-grid > .lead + .preview, .start-grid > .lead ~ .preview { padding-top: var(--pad-lead); }
.start-grid .flow { grid-column: span 4; }
.start-grid .preview { grid-column: span 2; }
.card-url { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; }
.status-line { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); color: var(--muted); font-size: var(--fs-small); }
.status-line .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--faint); flex: none; }
.status-line.ok .dot { background: var(--positive); }
.fp-h { margin: var(--s5) 0 var(--s3); }
.flow .fp.words { margin-bottom: var(--s3); }
.flow .fp.words li, .preview .fp.words li { white-space: nowrap; }

.next { margin-top: var(--s5); display: grid; }
.next-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.next-row .t { font-weight: 500; display: flex; align-items: center; gap: var(--s2); }
.next-row .s { margin-top: 2px; color: var(--muted); }
.stepper .step-link { color: inherit; }
.stepper .step-link[href] { color: var(--muted); text-decoration: underline; text-decoration-color: var(--control); text-underline-offset: 4px; }
.stepper .step-link[href]:hover { color: var(--text); }

.flow .field .label { font-weight: 500; }
#keysForm { margin-top: var(--s6); }
.pic-pick { display: flex; align-items: center; gap: var(--s4); }
.pic-big { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex: none; background: var(--person-bg); }
.pic-big img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pic-pick .hint { margin-top: var(--s2); }
.file-pick { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: var(--s2) var(--s3); }
.file-pick input[type="file"] { position: absolute; left: 0; top: 0; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-pick input[type="file"]:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; }
.file-shown { min-width: 0; color: var(--muted); font-size: var(--fs-small); overflow-wrap: anywhere; }
.flow .checks { display: grid; gap: var(--s2); margin-top: var(--s3); }
.flow .checks li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: var(--s2); align-items: start; font-size: var(--fs-small); line-height: var(--lh-small); }
.flow .checks svg { width: 16px; height: 16px; color: var(--faint); }
.flow .checks .ok svg { color: var(--positive); }
.flow .checks .bad svg { color: var(--negative); }
.flow .checks .bad { color: var(--pill-negative-ink); }

.pv-head { display: flex; align-items: center; gap: var(--s3); }
.pv-head .avatar { width: 40px; height: 40px; background: var(--p1-bg); color: var(--p1-ink); font-size: var(--fs-body); overflow: hidden; }
.pv-head .avatar img { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.pv-head .avatar.made { background: var(--person-bg); color: var(--person-ink); }
.pv-head .avatar:empty { background: var(--active); }
.pv-name { font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 600; overflow-wrap: anywhere; }
.pv-name.empty { color: var(--faint); font-weight: 500; }
.pv-url { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.pv-rows { margin-top: var(--s4); }
.pv-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s3); padding: var(--s3) 0; border-top: 1px solid var(--rule); }
.pv-rows .t { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-rows .s { margin-top: 2px; color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-fp-h { padding-top: var(--s3); border-top: 1px solid var(--rule); font-weight: 500; }
#pvFp { margin-top: var(--s1); }
.preview .fp.words { margin-top: var(--s2); grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1) var(--s3); font-size: var(--fs-body); line-height: var(--lh-body); }

@media (max-width: 960px) {
  .start-grid .flow, .start-grid .preview { grid-column: 1 / -1; }
  .start-grid > .lead ~ .preview { padding-top: 0; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .start-grid .preview { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; column-gap: var(--col-gap); align-items: start; }
  .start-grid .preview > h2 { grid-column: 1 / -1; }
  .start-grid .preview > .pv-head { grid-column: 1; grid-row: 2; }
  .start-grid .preview > .pv-fp-h { grid-column: 1; grid-row: 3; margin-top: var(--s4); }
  .start-grid .preview > #pvFp { grid-column: 1; grid-row: 4; }
  .start-grid .preview > .pv-rows { grid-column: 2; grid-row: 2 / span 3; margin-top: 0; }
  .start-grid .preview > .pv-rows li:first-child { border-top: 0; padding-top: 0; }
}
@media (max-width: 760px) {
  .stepper { overflow: visible; }
  .stepper ol { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; row-gap: var(--s4); }
  .stepper ol:has(> li[data-step="4.5"]:not([hidden])) { grid-template-columns: repeat(4, minmax(0, 1fr)); min-width: 0; }
  .stepper li { white-space: normal; }
  .start-grid { margin-top: var(--s3); }
}

.start-grid .flow > h2 { font-size: var(--fs-stamp); line-height: var(--lh-stamp); letter-spacing: -0.025em; margin-bottom: var(--s4); }
.start-grid .flow > h2:focus { outline: none; }
#step-4 .stakes { display: block; margin: 0 0 var(--s3); padding: 0; background: none; color: var(--text); font-size: var(--fs-section); line-height: var(--lh-section); font-weight: 500; max-width: 60ch; }
#step-4 .stakes svg { display: none; }
#step-4 .stakes b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; text-decoration-color: var(--control); }
#step-4 > .muted { max-width: 60ch; }
#h-4.made { color: var(--pill-positive-ink); }
.start-grid .wait-box:not(:has(.ws.active, .ws.wait, .ws.late, .ws.bad)) .ws:nth-child(-n+2) { display: none; }
.start-grid:has(#step-3:not([hidden]), #step-5:not([hidden])) :is(.pv-fp-h, #pvFp) { display: none; }
#step-5 .card-url, #step-3 .card-url { font-size: var(--fs-section); }
@media (max-width: 860px) {
  .stepper { overflow: visible; }
  .stepper ol, .stepper ol:has(> li[data-step="4.5"]:not([hidden])) { min-width: 0; position: relative; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); column-gap: 4px; row-gap: 0; padding: 30px 0 0; }
  .stepper li { position: static; padding: 0; }
  .stepper li::before { content: none; }
  .stepper li .sv { display: none; }
  .stepper li > span, .stepper li > a { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .stepper li[aria-current="step"] > span { left: 0; top: 0; width: auto; height: auto; overflow: visible; clip: auto; }
}

.resume-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s1) var(--s3); margin-top: var(--s4); color: var(--muted); max-width: 90ch; }
.resume-line .text-btn[hidden] { display: none; }
.resume-line + .start-grid { margin-top: var(--s4); }
.start-grid .next-line { margin-top: var(--s3); }
#step-5 .fp-h + .next { margin-top: 0; }
.funnel-form { display: grid; gap: var(--s3); margin-top: var(--s3); max-width: 480px; }
.funnel-field { display: grid; gap: var(--s1); }
.funnel-label { color: var(--muted); font-size: var(--fs-small); line-height: var(--lh-small); }
.funnel-field input { width: 100%; }
.funnel-who { margin: 0; color: var(--text); font-variant-numeric: tabular-nums; }
.funnel-form .actions-row { margin: 0; }
.funnel-form .err { margin: 0; }

@media (prefers-reduced-motion: no-preference) {
  html[data-motion] .start-grid :is(.flow, .confirm, .verdict) { transition: opacity var(--t-slow) var(--ease-out), translate var(--t-slow) var(--ease-out); }
  @starting-style {
    html[data-motion] .start-grid :is(.flow, .confirm, .verdict):not([hidden]) { opacity: 0; translate: 0 -4px; }
  }
}

.start-grid:not(:has(> .flow:not([hidden]))) > #step-1[hidden] { display: block !important; visibility: hidden; }
.stepper ol:not(:has(> li[aria-current])) > li[data-step="1"] { color: var(--text); font-weight: 600; --line: var(--text); }
.stepper ol:not(:has(> li[aria-current])) > li[data-step="1"] > span { font-size: var(--fs-body); line-height: var(--lh-body); }
.stepper ol:not(:has(> li[aria-current])) > li[data-step="1"] > .sv:empty { display: none; }
.pv-name:empty { min-height: var(--lh-section); }
.pv-url:empty { min-height: var(--lh-small); }
.pv-rows .t:empty { min-height: var(--lh-body); }
.pv-rows .s:empty { min-height: var(--lh-small); }
#pvFp:empty { min-height: var(--lh-body); }