/* ============================================================
   FLOWS — claim, review, contact, pricing, auth, account
   ============================================================ */

.flow-head { padding-block: clamp(2rem, 4vw, 3rem) var(--sp-5); border-block-end: 1px solid var(--rule); }
.flow-head h1 { margin-block: var(--sp-3); }
.flow-head .lead { max-width: 58ch; }

.flow-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; padding-block: var(--sp-6) var(--sp-8); }
@media (max-width: 899px) { .flow-layout { grid-template-columns: 1fr; } }
.flow-aside { position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: flex; flex-direction: column; gap: var(--sp-4); }
@media (max-width: 899px) { .flow-aside { position: static; } }

/* ---- stepper ---- */
.stepper { display: flex; gap: 0; margin-block-end: var(--sp-6); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; background: var(--paper-2); }
.step {
  flex: 1; padding: var(--sp-4); border-inline-end: 1px solid var(--rule);
  display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0;
  transition: background var(--dur-2) var(--ease-out);
}
.step:last-child { border-inline-end: 0; }
.step__n {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700;
  background: var(--paper-4); color: var(--ink-3);
}
.step__t { font-size: var(--t-sm); font-weight: 600; display: block; }
.step__d { font-size: var(--t-xs); color: var(--ink-3); display: block; margin-block-start: 2px; line-height: 1.4; }
.step[data-state="active"] { background: var(--brand-tint); }
.step[data-state="active"] .step__n { background: var(--brand); color: var(--brand-ink); }
.step[data-state="done"] .step__n { background: var(--ok); color: #fff; }
.step[data-state="done"] .step__t { color: var(--ink-3); }
:root[data-theme="dark"] .step[data-state="active"] { color: var(--ink); }
@media (max-width: 767px) {
  .stepper { flex-direction: column; }
  .step { border-inline-end: 0; border-block-end: 1px solid var(--rule); }
  .step:last-child { border-block-end: 0; }
}

/* ---- option cards (verification methods, roles) ---- */
.opt-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.opt-card {
  display: grid; grid-template-columns: 22px 1fr auto; gap: var(--sp-3);
  padding: var(--sp-4); border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper-2); cursor: pointer; align-items: start;
  transition: all var(--dur-1) var(--ease-out);
}
.opt-card:hover { border-color: var(--ink-3); }
.opt-card input { margin: 0; accent-color: var(--brand); width: 17px; height: 17px; margin-block-start: 2px; }
.opt-card:has(input:checked) { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand); }
:root[data-theme="dark"] .opt-card:has(input:checked) { color: var(--ink); }
.opt-card__t { font-weight: 600; font-size: var(--t-sm); display: block; }
.opt-card__d { font-size: var(--t-xs); color: var(--ink-3); display: block; margin-block-start: 3px; line-height: 1.5; }
.opt-card__tag { font-size: var(--t-2xs); }

/* ---- star input ---- */
.star-input { display: inline-flex; gap: 4px; }
.star-input button { color: var(--rule-2); transition: transform var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
.star-input button svg { width: 34px; height: 34px; }
.star-input button:hover { transform: scale(1.12); }
.star-input button[data-on="true"] { color: var(--gold); }
.star-label { font-size: var(--t-sm); font-weight: 600; margin-inline-start: var(--sp-3); }

/* ---- upload zone ---- */
.dropzone {
  border: 1.5px dashed var(--rule-2); border-radius: var(--r-md);
  padding: var(--sp-6); text-align: center; background: var(--paper-3);
  transition: border-color var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
  cursor: pointer;
}
.dropzone:hover { border-color: var(--brand); background: var(--brand-tint); }
.dropzone svg { width: 26px; height: 26px; margin-inline: auto; color: var(--ink-3); margin-block-end: var(--sp-2); }
:root[data-theme="dark"] .dropzone:hover { color: var(--ink); }

/* ---- pricing ---- */
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); align-items: stretch; }
@media (max-width: 1099px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px)  { .plans { grid-template-columns: 1fr; } }
.plan {
  display: flex; flex-direction: column;
  border: 1px solid var(--rule); border-radius: var(--r-md);
  background: var(--paper-2); overflow: hidden; position: relative;
}
.plan[data-featured] { border-color: var(--ink); box-shadow: var(--shadow-2); }
.plan__flag {
  position: absolute; inset-block-start: 0; inset-inline-end: 0;
  background: var(--signal); color: var(--signal-ink);
  font-size: 9px; font-weight: 700; letter-spacing: var(--ls-caps-sm);
  text-transform: uppercase; padding: 4px 10px; border-end-start-radius: var(--r-sm);
}
.plan__head { padding: var(--sp-5); border-block-end: 1px solid var(--rule); }
.plan__name { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: -0.02em; }
.plan__price { display: flex; align-items: baseline; gap: 4px; margin-block: var(--sp-3) var(--sp-2); }
.plan__amt { font-family: var(--font-display); font-size: 2.5rem; line-height: 1; letter-spacing: -0.04em; }
.plan__per { font-size: var(--t-xs); color: var(--ink-3); }
.plan__blurb { font-size: var(--t-xs); color: var(--ink-3); line-height: 1.5; }
.plan__feats { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; font-size: var(--t-sm); }
.plan__feat { display: flex; gap: var(--sp-2); align-items: flex-start; line-height: 1.45; }
.plan__feat svg { width: 14px; height: 14px; margin-block-start: 3px; flex: none; color: var(--brand-2); }
.plan__feat[data-off] { color: var(--ink-3); }
.plan__feat[data-off] svg { color: var(--rule-2); }
.plan__cta { padding: 0 var(--sp-5) var(--sp-5); }

.matrix th:first-child { text-align: start; }
.matrix td, .matrix th { text-align: center; }
.matrix td:first-child, .matrix th:first-child { text-align: start; }
.matrix .yes { color: var(--ok); }
.matrix .no { color: var(--rule-2); }
.matrix svg { width: 15px; height: 15px; margin-inline: auto; }

/* ---- auth ---- */
.auth-wrap { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - var(--header-h) - 32px); }
@media (max-width: 899px) { .auth-wrap { grid-template-columns: 1fr; } }
.auth-form { display: flex; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 4rem) var(--gutter); }
.auth-form__inner { width: 100%; max-width: 400px; }
.auth-side {
  background: var(--ink); color: var(--ink-inv);
  padding: clamp(2rem, 5vw, 4rem) var(--gutter);
  display: flex; flex-direction: column; justify-content: center;
  position: relative; overflow: hidden;
}
:root[data-theme="dark"] .auth-side { background: var(--paper-3); border-inline-start: 1px solid var(--rule); }
.auth-side h2 { color: var(--ink-inv); max-width: 16ch; }
.auth-side ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--sp-4); margin-block-start: var(--sp-6); }
.auth-side li { display: flex; gap: var(--sp-3); font-size: var(--t-sm); color: color-mix(in oklab, var(--ink-inv) 74%, transparent); line-height: 1.5; }
.auth-side li svg { width: 16px; height: 16px; flex: none; margin-block-start: 3px; color: var(--brand-3); }
@media (max-width: 899px) { .auth-side { display: none; } }

/* ---- account ---- */
.acct-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); padding-block: var(--sp-6) var(--sp-8); align-items: start; }
@media (max-width: 767px) { .acct-layout { grid-template-columns: 1fr; } }
.acct-nav { display: flex; flex-direction: column; gap: 2px; position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
@media (max-width: 767px) { .acct-nav { position: static; flex-direction: row; overflow-x: auto; } }
.acct-nav__i {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--t-sm); color: var(--ink-2); text-decoration: none; white-space: nowrap;
  transition: all var(--dur-1) var(--ease-out);
}
.acct-nav__i svg { width: 16px; height: 16px; }
.acct-nav__i:hover { background: var(--paper-3); color: var(--ink); }
.acct-nav__i[aria-current="true"] { background: var(--ink); color: var(--ink-inv); font-weight: 600; }
.acct-nav__n { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--t-2xs); opacity: .7; }

/* ---- quote request multi-select ---- */
.pick-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
@media (max-width: 899px) { .pick-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 519px) { .pick-grid { grid-template-columns: 1fr; } }
.pick {
  border: 1px solid var(--rule); border-radius: var(--r-md); padding: var(--sp-4);
  background: var(--paper-2); cursor: pointer; display: flex; flex-direction: column; gap: 6px;
  transition: all var(--dur-1) var(--ease-out); position: relative;
}
.pick:hover { border-color: var(--ink-3); }
.pick[data-on="true"] { border-color: var(--brand); background: var(--brand-tint); box-shadow: 0 0 0 1px var(--brand); }
:root[data-theme="dark"] .pick[data-on="true"] { color: var(--ink); }
.pick__check {
  position: absolute; inset-block-start: var(--sp-3); inset-inline-end: var(--sp-3);
  width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--rule-2);
  display: grid; place-items: center; color: transparent;
}
.pick[data-on="true"] .pick__check { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); }
.pick__check svg { width: 12px; height: 12px; }