/* per-page polish: onboarding
   Scoped exclusively to structures in onboarding.html.
*/

/* ── Main card: the ob-card already has card-pop from HTML, just tighten ── */
main.ob .ob-card {
  box-shadow: var(--shadow-pop) !important;
}

/* CANON sec 10.1 (R15)  -  "WELCOME TO FLOOM" branded pill eyebrow. */
main.ob .ob-card .eyebrow.chip {
  background: var(--accent-soft) !important;
  border-color: var(--accent-line) !important;
  color: var(--accent) !important;
  font-weight: 500;
  letter-spacing: .12em;
  font-size: 10.5px;
  text-transform: uppercase;
}

/* CANON sec 10  -  auth-card h1 = 28 / 660 / -.025em. */
main.ob .ob-card h1 {
  font-size: 28px;
  letter-spacing: -.025em;
  font-weight: 660;
  line-height: 1.12;
}

/* ── Steps container: glass treatment instead of plain border ── */
main.ob .steps {
  background: var(--surface-3) !important;
  border-color: color-mix(in srgb, var(--accent) 14%, var(--line)) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Individual step: slight tint on hover */
main.ob .step {
  background: transparent !important;
  transition: background var(--t-base) var(--ease);
}
main.ob .step:hover {
  background: color-mix(in srgb, var(--accent) 5%, transparent) !important;
}

/* Step number label */
main.ob .step-num {
  color: var(--accent) !important;
  font-weight: 640;
  letter-spacing: .08em;
}

/* Step icon: steel accent border on hover, transition */
main.ob .step-ic {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line)) !important;
  color: var(--accent) !important;
  transition: border-color .2s, background .2s;
}
main.ob .step:hover .step-ic {
  border-color: var(--accent-line) !important;
  background: var(--accent-soft) !important;
}

/* Step title */
main.ob .step-title {
  font-size: 13.5px;
  font-weight: 620;
  letter-spacing: -.01em;
}
main.ob .step-desc {
  color: var(--ink-mute) !important;
  line-height: 1.45;
}

/* CANON sec 3  -  primary CTA buttons = 46h. */
main.ob .ctas-row .btn-primary { height: 46px; font-weight: 600; }
main.ob .ctas-row .btn:not(.btn-primary) { height: 40px; font-weight: 600; }

/* ── Details accordion: better affordance ── */
main.ob details.what {
  border-top-color: var(--line) !important;
}
main.ob details.what summary {
  color: var(--ink-mute);
  font-size: 12.5px;
  gap: 7px;
}
main.ob details.what summary:hover {
  color: var(--ink-soft);
}
main.ob details.what summary .chevron {
  color: var(--accent);
  opacity: .8;
}
main.ob details.what[open] summary {
  color: var(--ink-soft);
}

/* ── Footnote ── */
main.ob .footnote {
  color: var(--ink-mute);
  margin-top: 18px;
}

/* ── Mobile ── */
@media (max-width: 600px) {
  main.ob .ob-card {
    padding: 28px 22px 24px !important;
  }
  main.ob .ctas-row {
    flex-direction: column;
  }
  main.ob .ctas-row .btn {
    width: 100%;
  }
  main.ob .step {
    padding: 14px 14px;
  }
}