/* ============================================================
   FORGED — /start/ onboarding (WO-0031)
   Loaded only on /start/. Builds on the tokens, type roles and
   form controls in forged.css; nothing here redefines them.
   ============================================================ */

/* The flow needs its script; without it the <noscript> route shows. */
html:not(.js) [data-ob] { display: none; }

.ob-main { padding-block: clamp(32px, 5vw, 72px) var(--section-y); }
.ob { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 960px) { .ob { grid-template-columns: 1fr; gap: var(--s-5); } }

/* ---------- Aside: title, progress, the plan ---------- */
.ob-aside { position: sticky; top: calc(var(--nav-h) + 24px); display: grid; gap: var(--s-5); }
@media (max-width: 960px) { .ob-aside { position: static; gap: var(--s-4); } }
.ob-title { margin-top: calc(var(--s-4) * -1 + 8px); max-width: 12ch; }
@media (max-width: 960px) { .ob-title { max-width: none; font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.25rem); } }

.ob-steps { display: grid; gap: 0; border-top: 1px solid var(--line); }
.ob-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); color: var(--ink-3); font-size: var(--ui-size); font-weight: 500; }
.ob-steps li .t-label { width: 22px; color: var(--ink-4); }
.ob-steps li.is-done { color: var(--ink-2); }
.ob-steps li.is-done .t-label { color: var(--ok); }
.ob-steps li[aria-current="step"] { color: var(--ink); }
.ob-steps li[aria-current="step"] .t-label { color: var(--signal); }
/* Phones: the list collapses to a four-segment bar, with the current step
   named underneath it. */
@media (max-width: 960px) {
  ol.ob-steps { position: relative; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; border: 0; padding-bottom: 24px; }
  .ob-steps li { display: block; height: 3px; padding: 0; border: 0; border-radius: 2px; background: var(--line-2); }
  .ob-steps li.is-done { background: color-mix(in srgb, var(--ok) 70%, var(--line-2)); }
  .ob-steps li[aria-current="step"] { background: var(--signal); }
  .ob-steps li .t-label, .ob-steps li .ob-step-name { display: none; }
  .ob-steps li[aria-current="step"] .ob-step-name { display: block; position: absolute; left: 0; top: 12px; font-size: 13px; color: var(--ink); white-space: nowrap; }
}

.ob-plan { padding: var(--s-5); border-radius: var(--r-lg); display: grid; gap: var(--s-2); border-color: color-mix(in srgb, var(--signal) 35%, var(--line-2)); }
.ob-plan-h { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.ob-plan-price { display: flex; align-items: baseline; gap: 6px; margin-top: 6px; }
.ob-plan-price .t-figure { font-size: 40px; line-height: 1; }
.ob-plan-for { color: var(--ink-2); padding-top: var(--s-2); margin-top: var(--s-1); border-top: 1px solid var(--line); overflow-wrap: anywhere; }
@media (max-width: 960px) {
  .ob-plan { grid-template-columns: auto 1fr; align-items: center; padding: 14px 16px; column-gap: 16px; }
  .ob-plan-h, .ob-plan-term { grid-column: 1 / -1; }
  .ob-plan-price { margin: 0; }
  .ob-plan-price .t-figure { font-size: 28px; }
  .ob-plan-for { grid-column: 1 / -1; }
}
.ob-saved { min-height: 1.3em; color: var(--ink-4); }

/* ---------- Panel and steps ---------- */
.ob-panel { min-width: 0; display: grid; gap: var(--s-4); }
.ob-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--warn) 35%, var(--line)); background: color-mix(in srgb, var(--warn) 6%, transparent); font-size: var(--body-sm-size); color: var(--ink-2); }
.ob-step { padding: clamp(20px, 3.4vw, 40px); border-radius: var(--r-lg); }
.ob-h { margin-top: var(--s-3); font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); }
.ob-h:focus { outline: none; }
.ob-lede { margin: var(--s-2) 0 var(--s-6); }
.ob-step .form-grid { gap: var(--s-4); }
.ob-field { min-width: 0; }
.ob-note { display: block; margin-top: 8px; }
.ob-later { margin: var(--s-4) 0 var(--s-6); }
.f-area--sm { min-height: 84px; }

.ob-foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); margin-top: var(--s-6); padding-top: var(--s-5); border-top: 1px solid var(--line); }
.ob-foot [type="submit"] { margin-left: auto; }
.ob-skip { margin-left: auto; order: 3; flex-basis: 100%; text-align: right; }
@media (max-width: 560px) {
  .ob-foot { flex-direction: column-reverse; align-items: stretch; }
  .ob-foot .btn { width: 100%; margin: 0; }
  .ob-skip { text-align: center; flex-basis: auto; order: 0; padding: 8px; }
}

/* ---------- Step 2: business types ---------- */
.bt-group + .bt-group, .bt-group + .bt-pair, .bt-pair + .bt-group { margin-top: var(--s-5); }
.bt-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.bt-pair .bt-grid { grid-template-columns: 1fr; }
@media (max-width: 560px) { .bt-pair { grid-template-columns: 1fr; gap: var(--s-5); } }
.bt-group-h { margin-bottom: var(--s-3); }
.bt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--s-2); }
.bt { position: relative; display: block; height: 100%; }
.bt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.bt-card {
  display: flex; align-items: center; gap: 12px; height: 100%; min-height: 72px; padding: 12px 14px;
  border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-2);
  transition: border-color var(--t-fast) ease, background var(--t-fast) ease; pointer-events: none;
}
.bt-ic { width: 36px; height: 36px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--surface-3); color: var(--ink-2); }
.bt-ic svg { width: 20px; height: 20px; }
.bt-txt { display: grid; gap: 2px; min-width: 0; }
.bt-txt b { color: var(--ink); font-weight: 500; font-size: var(--ui-size); }
.bt-txt span { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; }
.bt:hover .bt-card { border-color: var(--line-3); }
.bt input:checked + .bt-card { border-color: var(--signal); background: color-mix(in srgb, var(--signal) 9%, var(--surface-2)); }
.bt input:checked + .bt-card .bt-ic { background: var(--signal); color: var(--signal-ink); }
.bt input:focus-visible + .bt-card, .kbd .bt input:focus + .bt-card { outline: 2px solid var(--signal); outline-offset: 2px; }

.ob-route:empty { display: none; }
.ob-route { margin-top: var(--s-5); padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--bg-raise); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: var(--body-sm-size); color: var(--ink-2); }
.ob-route strong { color: var(--ink); font-weight: 500; }
.ob-demo { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--signal) 40%, var(--line-2)); background: linear-gradient(135deg, color-mix(in srgb, var(--signal) 8%, transparent), transparent 55%), var(--bg-raise); display: grid; gap: var(--s-3); }
.ob-demo .t-h3 { max-width: 26ch; }
.ob-demo .actions { margin-top: var(--s-2); }
.ob-demo-alt { color: var(--ink-3); }

/* ---------- Step 3: choices, logo, designs ---------- */
.seg3 { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.seg3 .need span { height: 44px; }
.seg3 .need span::before { border-radius: 50%; }

.logo-drop { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 14px; border-radius: var(--r-md); border: 1px dashed var(--line-3); background: var(--surface-2); }
.logo-input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.logo-input:focus-visible + label { outline: 2px solid var(--signal); outline-offset: 3px; }
.logo-drop .t-body-sm { flex: 1 1 200px; overflow-wrap: anywhere; }
.logo-prev { width: 56px; height: 56px; object-fit: contain; border-radius: var(--r-sm); background: #fff; padding: 4px; }

.dz-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); }
@media (max-width: 640px) { .dz-grid { grid-template-columns: 1fr; } }
.dz { position: relative; display: block; }
.dz input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.dz-card { display: grid; gap: 10px; padding: 10px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-2); pointer-events: none; transition: border-color var(--t-fast) ease; }
@media (max-width: 640px) { .dz-card { grid-template-columns: 120px 1fr; align-items: center; } }
.dz:hover .dz-card { border-color: var(--line-3); }
.dz input:checked + .dz-card { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal); }
.dz input:focus-visible + .dz-card, .kbd .dz input:focus + .dz-card { outline: 2px solid var(--signal); outline-offset: 2px; }
.dz-txt { display: grid; gap: 2px; padding: 0 4px 4px; }
.dz-txt b { color: var(--ink); font-weight: 500; font-size: var(--ui-size); }
.dz-txt span { color: var(--ink-3); font-size: 12.5px; line-height: 1.35; }
.dz-unsure { margin-top: var(--s-3); display: inline-block; }

/* Design thumbnails: drawn, not screenshots — a feel, not a promise. */
.dz-thumb { position: relative; display: grid; gap: 5px; align-content: start; height: 104px; padding: 10px; border-radius: 6px; overflow: hidden; }
.dz-thumb i { display: block; height: 6px; width: 36%; border-radius: 2px; }
.dz-thumb b { display: block; height: 14px; width: 78%; border-radius: 2px; margin-top: 10px; }
.dz-thumb em { display: block; height: 4px; width: 62%; border-radius: 2px; }
.dz-thumb em + em { width: 48%; }
.dz-thumb u { display: block; width: 44px; height: 13px; border-radius: 3px; margin-top: 6px; }
.dz-thumb--studio { background: linear-gradient(160deg, color-mix(in srgb, var(--signal) 30%, #101318), #0b0d10 70%); }
.dz-thumb--studio i, .dz-thumb--studio em { background: #3a414d; }
.dz-thumb--studio b { background: #eef0f3; }
.dz-thumb--studio u { background: var(--signal); }
.dz-thumb--editorial { background: #f4f1ea; }
.dz-thumb--editorial i { background: #b7aa92; width: 24%; }
.dz-thumb--editorial b { background: #1c1b19; height: 16px; border-radius: 0; }
.dz-thumb--editorial em { background: #cfc8ba; }
.dz-thumb--editorial u { background: transparent; border: 1px solid #1c1b19; border-radius: 0; }
.dz-thumb--clean { background: #ffffff; }
.dz-thumb--clean i { background: #d8dde5; }
.dz-thumb--clean b { background: #1a2433; width: 64%; }
.dz-thumb--clean em { background: #e3e7ed; }
.dz-thumb--clean u { background: color-mix(in srgb, var(--signal) 85%, #1a2433); border-radius: 7px; }

/* ---------- Step 4: summary, payment, agreement ---------- */
.sum { display: grid; gap: var(--s-3); padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--bg-raise); margin-top: var(--s-5); }
.sum-h { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--line); }
.sum-h [data-sum-for] { margin-top: 4px; color: var(--ink-2); overflow-wrap: anywhere; }
.terms--sum dd b { font-weight: 500; }
.terms--sum .terms-today { border-top: 1px solid var(--line-2); }
.terms--sum .terms-today dt { color: var(--ink); }
.sum-total { padding: 12px 14px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line-2); color: var(--ink-2); font-size: var(--body-sm-size); }
.sum-total b { color: var(--ink); font-weight: 500; }
.sum-scope { border-top: 1px solid var(--line); }
.sum-scope summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; cursor: pointer; list-style: none; color: var(--ink); font-size: var(--ui-size); font-weight: 500; }
.sum-scope summary::-webkit-details-marker { display: none; }
.sum-scope-b { display: grid; gap: var(--s-3); padding-bottom: var(--s-3); }

.pay-box { margin-top: var(--s-4); padding: var(--s-5); border-radius: var(--r-lg); border: 1px solid var(--line-2); display: grid; gap: var(--s-3); }
.pay-box .f-label { display: flex; align-items: center; gap: 10px; margin: 0; }
.seg3--2 .need span::before { border-radius: 50%; }

.agree { display: flex; gap: 12px; align-items: flex-start; margin-top: var(--s-5); padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--line-2); background: var(--surface-2); cursor: pointer; color: var(--ink-2); font-size: var(--body-sm-size); line-height: 1.5; }
.agree input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--signal); cursor: pointer; }
.agree:has(input[aria-invalid="true"]) { border-color: var(--off); }
.pay-err { margin-top: var(--s-4); padding: 12px 14px; border-radius: var(--r-md); border: 1px solid color-mix(in srgb, var(--off) 45%, var(--line-2)); background: color-mix(in srgb, var(--off) 7%, transparent); color: var(--ink); font-size: var(--body-sm-size); }
.ob-pay[aria-busy="true"] { cursor: progress; }
.ob-pay .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: ob-spin .8s linear infinite; }
@keyframes ob-spin { to { transform: rotate(360deg); } }

/* ---------- Welcome ---------- */
.ob-welcome { border-color: color-mix(in srgb, var(--ok) 35%, var(--line-2)); }
.ob-welcome .t-body-lg { margin-top: var(--s-3); }
.ob-cl-h { margin-top: var(--s-6); }
.ob-cl { display: grid; gap: 0; margin-top: var(--s-3); border-top: 1px solid var(--line); }
.ob-cl li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--ui-size); color: var(--ink-2); }
.ob-cl .ck { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line-3); display: grid; place-items: center; }
.ob-cl li.is-done { color: var(--ink); }
.ob-cl li.is-done .ck { background: var(--ok); border-color: var(--ok); }
.ob-cl li.is-done .ck::after { content: ""; width: 8px; height: 4px; margin-top: -2px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(-45deg); }
.ob-cl .st { font-family: var(--ff-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); text-align: right; }
.ob-cl li.is-done .st { color: var(--ok); }
.ob-cl li.is-ours .st { color: var(--ink-3); }
.ob-next { margin-top: var(--s-6); }
.ob-restart { margin-top: var(--s-6); padding-top: var(--s-4); border-top: 1px solid var(--line); }

/* The pay button names the amount; on the narrowest phones it may wrap. */
@media (max-width: 400px) { .ob-pay { white-space: normal; height: auto; min-height: 52px; padding-block: 12px; text-align: center; line-height: 1.3; } }