/* The Get started pop-up (components/GetStarted.tsx, js/get-started.js). Fields reuse the contact form's
   .field and .stage-options styles; this sheet lays out the dialog, its header and the steps. */
html:has(.get-started[open]) { overflow: hidden; }
.get-started { position: fixed; width: min(520px, calc(100% - 32px)); max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; border-radius: var(--radius); background: var(--white); color: var(--ink); box-shadow: 0 30px 80px oklch(23% .033 283 / .3); overflow: auto; overscroll-behavior: contain; }
.get-started::backdrop { background: oklch(23% .033 283 / .55); }
.gs-close { position: absolute; top: 18px; right: 18px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: transparent; color: var(--muted); }
.gs-close:hover { background: var(--iris-light); color: var(--ink); }
.gs-close svg { width: 20px; height: 20px; }

.gs-head { padding: 30px 32px 24px; border-bottom: 1px solid var(--line); }
.gs-eyebrow { display: inline-flex; align-items: center; gap: 9px; padding: 6px 14px 6px 12px; border-radius: 40px; background: var(--ink); color: var(--paper); font-size: 13px; font-weight: 600; line-height: 1.4; }
.gs-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: oklch(78% .11 290); }
.gs-head h2 { margin-top: 18px; font-size: 28px; line-height: 1.15; letter-spacing: -.035em; }
.gs-head h2:focus { outline: none; }
.gs-head p { margin-top: 8px; font-size: 15px; line-height: 1.55; }
.gs-progress { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.gs-bar { flex: 1; height: 5px; border-radius: 5px; background: var(--line); }
.gs-bar.is-done { background: var(--iris); }
.gs-count { margin-left: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }

.gs-fields { display: grid; gap: 18px; padding: 24px 32px 0; }
.get-started .field label, .get-started .stage-options legend { font-size: 13px; }
.get-started .field input:not([type=radio]), .get-started .field select { font-size: 15px; min-height: 48px; }
.get-started .field input::placeholder { font-size: inherit; }
.get-started .field select:invalid { color: oklch(55% .025 291); }
.get-started .field legend > span { color: var(--muted); font-weight: 400; font-size: 10px; margin-left: 7px; }
.get-started .field select option { color: var(--ink); }
.get-started .stage-options { flex-direction: row; }
.get-started .stage-options > label > span { font-size: 14px !important; }
.get-started .field-error { font-size: 12px; }
.gs-submit { display: flex; width: calc(100% - 64px); margin: 26px 32px 0; }
.gs-back { display: block; margin: 10px auto 0; padding: 10px 20px; background: none; color: var(--muted); font-weight: 600; font-size: 14px; }
.gs-back:hover { color: var(--ink); }
.gs-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 16px 32px 0; font-size: 13px; text-align: center; }
.gs-trust svg { width: 17px; height: 17px; color: var(--iris); }
.gs-status { margin: 12px 32px 0; color: oklch(45% .14 24); font-size: 13px; text-align: center; }
.gs-status:empty { display: none; }
.gs-legal { margin: 14px 32px 0; padding-bottom: 28px; font-size: 12px; text-align: center; }
.gs-legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.gs-form[aria-busy=true] .gs-submit { opacity: .7; }

.gs-success { padding: 44px 32px 34px; }
.gs-success h2 { font-size: 26px; letter-spacing: -.035em; }
.gs-success h2:focus { outline: none; }
.gs-success p { margin-top: 10px; font-size: 15px; line-height: 1.6; }
.gs-success .button { margin-top: 26px; }

@media (prefers-reduced-motion: no-preference) {
  .get-started[open] { animation: gs-in 260ms var(--ease); }
  .get-started[open]::backdrop { animation: gs-fade 200ms ease-out; }
}
@keyframes gs-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes gs-fade { from { opacity: 0; } }

/* Phones: a full-width sheet from the bottom of the screen that scrolls. */
@media (max-width: 640px) {
  .get-started { width: 100%; max-width: none; max-height: calc(100dvh - 24px); margin: auto 0 0; border-radius: 22px 22px 0 0; }
  .gs-head { padding: 24px 20px 20px; }
  .gs-head h2 { font-size: 24px; margin-top: 14px; }
  .gs-close { top: 12px; right: 10px; }
  .gs-fields { padding: 20px 20px 0; gap: 16px; }
  .gs-submit { width: calc(100% - 40px); margin: 22px 20px 0; }
  .gs-trust, .gs-status, .gs-legal { margin-inline: 20px; }
  .gs-legal { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .gs-success { padding: 36px 20px max(28px, env(safe-area-inset-bottom)); }
  .get-started .field input:not([type=radio]), .get-started .field select { font-size: 16px; }
  @media (prefers-reduced-motion: no-preference) {
    .get-started[open] { animation-name: gs-up; }
  }
}
@keyframes gs-up { from { transform: translateY(40px); opacity: .4; } }