@import url("./colors_and_type.css");

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

/* ============================================================== */
/* THEME — light variant (airy, like the reference)               */
/* ============================================================== */
body[data-theme="light"] {
  --bg-page:     #F7F8F7;
  --bg-surface:  #FFFFFF;
  --fg-1: #0B0F0D;
  --fg-2: #4B564F;
  --fg-3: #7A847E;
  --fg-accent: #16A34A;
  --fg-on-accent: #FFFFFF;
  --border-subtle:  rgba(11,15,13,0.06);
  --border-default: rgba(11,15,13,0.10);
  --border-strong:  rgba(11,15,13,0.18);
  --shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(11,15,13,0.04), 0 8px 28px rgba(11,15,13,0.06);
}

/* ============================================================== */
/* Buttons                                                        */
/* ============================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px;
  font: 600 14px var(--font-display);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-standard);
  white-space: nowrap;
  background: transparent;
  color: var(--fg-1);
}
.btn--primary {
  background: var(--pxl-green-400);
  color: var(--pxl-green-950);
  border-color: var(--pxl-green-500);
}
body[data-theme="light"] .btn--primary { background: #16A34A; color: #FFFFFF; border-color: #15803D; }
.btn--primary:hover { background: var(--pxl-green-300); box-shadow: var(--glow-green); }
body[data-theme="light"] .btn--primary:hover { background: #15803D; box-shadow: 0 6px 18px rgba(22,163,74,0.22); }
.btn--ghost {
  border-color: var(--border-default);
  color: var(--fg-1);
  background: transparent;
}
body[data-theme="light"] .btn--ghost { background: #FFFFFF; }
.btn--ghost:hover { border-color: var(--border-strong); }
.btn--text {
  border: none; padding: 8px 4px;
  color: var(--fg-3);
}
.btn--text:hover { color: var(--fg-1); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }
.btn svg { width: 16px; height: 16px; }
.btn--lg { padding: 13px 24px; font-size: 15px; }

/* ============================================================== */
/* Top bar                                                        */
/* ============================================================== */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 14px 32px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: #04140C;
}
body[data-theme="light"] .topbar { background: #0B1F14; border-bottom-color: rgba(255,255,255,0.08); }
.topbar__back {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.topbar__back:hover { color: #FFFFFF; border-color: rgba(255,255,255,0.32); background: rgba(255,255,255,0.08); }
.topbar__back svg { width: 16px; height: 16px; }
.topbar__brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.topbar__brand img { height: 22px; display: block; }
.topbar__spacer { flex: 1; }
.topbar__cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  font: 600 12px var(--font-display);
  text-decoration: none;
  background: rgba(34,197,94,0.16);
  color: #86EFAC;
  border: 1px solid rgba(34,197,94,0.32);
  border-radius: 8px;
  transition: all var(--dur-fast);
}
.topbar__cta:hover { background: rgba(34,197,94,0.24); border-color: rgba(34,197,94,0.50); }
body[data-theme="light"] .topbar__cta { background: rgba(34,197,94,0.16); color: #86EFAC; border-color: rgba(34,197,94,0.32); }
body[data-theme="light"] .topbar__cta:hover { background: rgba(34,197,94,0.24); border-color: rgba(34,197,94,0.50); }
.topbar__cta svg { width: 14px; height: 14px; }

/* ============================================================== */
/* Stepper (dots with connector line)                             */
/* ============================================================== */
.stage {
  max-width: 880px;
  margin: 0 auto;
  padding: 56px 32px 32px;
}
.stage--wide {
  max-width: 960px;
}
.stepper {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr);
  margin-bottom: 56px;
}
.stepper__line {
  position: absolute;
  top: 18px;
  left: 16.66%; right: 16.66%;
  height: 2px;
  background: var(--border-default);
  z-index: 0;
}
.stepper__line-fill {
  position: absolute; top: 0; left: 0; height: 100%;
  background: var(--pxl-green-400);
  transition: width var(--dur-slow) var(--ease-out);
}
.stepper__item {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.stepper__dot {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--bg-page);
  border: 2px solid var(--border-default);
  display: grid; place-items: center;
  font: 700 14px var(--font-display);
  color: var(--fg-3);
  transition: all var(--dur-base) var(--ease-standard);
}
.stepper__item--active .stepper__dot {
  background: var(--pxl-green-400);
  border-color: var(--pxl-green-400);
  color: var(--pxl-green-950);
  box-shadow: 0 0 0 4px rgba(34,197,94,0.18);
}
body[data-theme="light"] .stepper__item--active .stepper__dot { color: #FFFFFF; background: #16A34A; border-color: #16A34A; box-shadow: 0 0 0 4px rgba(22,163,74,0.18); }
.stepper__item--done .stepper__dot {
  background: var(--bg-page);
  border-color: var(--pxl-green-400);
  color: var(--pxl-green-400);
}
body[data-theme="light"] .stepper__item--done .stepper__dot { color: #16A34A; border-color: #16A34A; }
.stepper__dot svg { width: 16px; height: 16px; }
.stepper__title { font: 600 14px var(--font-display); color: var(--fg-1); }
.stepper__sub { font-size: 12px; color: var(--fg-3); margin-top: 2px; max-width: 180px; }

/* ============================================================== */
/* Card                                                           */
/* ============================================================== */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: 0;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
body:not([data-theme="light"]) .card {
  background: var(--pxl-green-800);
  border-color: var(--border-default);
}
.card__split {
  display: grid; grid-template-columns: 1.15fr 1fr;
  min-height: 380px;
}
.card__form { padding: 36px 36px 36px; }
.card__panel {
  padding: 36px;
  background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, rgba(34,197,94,0.04) 100%);
  border-left: 1px solid var(--border-subtle);
}
body[data-theme="light"] .card__panel { background: linear-gradient(180deg, #ECFDF3 0%, #F7FCF8 100%); border-left-color: rgba(11,15,13,0.05); }
.card__title {
  font: 700 24px/1.25 var(--font-display);
  text-transform: none;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  color: var(--fg-1);
}
.card__sub { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0 0 26px; }

/* Single-column variant (no right panel) */
.card__single { padding: 48px 56px; }
@media (max-width: 760px) {
  .card__single { padding: 24px; }
}

/* ============================================================== */
/* Form fields                                                    */
/* ============================================================== */
.field { margin-bottom: 16px; }
.field__label {
  display: block;
  font: 600 13px var(--font-display);
  color: var(--fg-1);
  margin-bottom: 6px;
}
.field__req { color: #DC2626; margin-left: 2px; }
body:not([data-theme="light"]) .field__req { color: var(--pxl-green-400); }
.input, .select, .textarea {
  width: 100%;
  padding: 11px 14px;
  background: var(--bg-page);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font: 400 14px var(--font-body);
  color: var(--fg-1);
  transition: all var(--dur-base) var(--ease-standard);
}
body[data-theme="light"] .input,
body[data-theme="light"] .select { background: #FFFFFF; }
body:not([data-theme="light"]) .input,
body:not([data-theme="light"]) .select { background: var(--pxl-green-900); }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--pxl-green-400);
  box-shadow: 0 0 0 3px rgba(34,197,94,0.18);
}
.input::placeholder { color: var(--fg-3); }
.input--prefix { padding-left: 40px; }

/* 16px on touch devices, and not a rounding preference.
   iOS Safari zooms the whole page in when a focused input's font-size is
   under 16px. All three fields in this funnel — the domain on step 1, the
   email and phone on step 3 — were 14px, so tapping any of them jumped and
   magnified the page, and the visitor had to pinch back out before they could
   read what they were typing into. On the step where we ask for an email
   address and a phone number, on the device most of these shop owners are
   holding.
   pointer: coarse rather than a width breakpoint, because the zoom is a
   property of the touch device and not of the viewport — an iPad at 1024px
   does it too. Desktop keeps 14px, so nothing about the design changes on the
   screens where the problem does not exist. */
@media (pointer: coarse) {
  .input, .select, .textarea { font-size: 16px; }
}
.field__wrap { position: relative; }
.field__prefix {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--fg-3);
  display: flex;
}
.field__prefix svg { width: 16px; height: 16px; }
.field__hint { font-size: 12px; color: var(--fg-3); margin-top: 6px; }
.field__error { font-size: 12px; color: #DC2626; margin-top: 6px; display: flex; align-items: center; gap: 6px; }
body:not([data-theme="light"]) .field__error { color: #FCA5A5; }
.field__error svg { width: 14px; height: 14px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* OAuth-style buttons (Continue with Google / Meta) — like the ref */
.oauth-stack { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.oauth {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 11px 16px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  color: var(--fg-1);
  font: 600 14px var(--font-display);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-standard);
}
body:not([data-theme="light"]) .oauth { background: var(--pxl-green-900); }
.oauth:hover { border-color: var(--border-strong); }
.oauth__icon {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  font: 700 12px var(--font-display);
}
.oauth--google .oauth__icon { color: #1a73e8; }
.oauth--meta { background: #1877F2; border-color: #1877F2; color: #FFFFFF; }
.oauth--meta:hover { background: #1668d8; border-color: #1668d8; }
.oauth--meta .oauth__icon { color: #FFFFFF; }
.oauth--connected {
  border-color: var(--pxl-green-500);
  background: rgba(34,197,94,0.08);
  color: var(--fg-1);
}
.oauth--connected .oauth__icon svg { color: var(--pxl-green-400); width: 16px; height: 16px; }

/* ============================================================== */
/* Connect cards (Step 2 — bigger OAuth buttons)                  */
/* ============================================================== */
.connect-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 18px;
}
.connect-card {
  position: relative;
  display: flex; flex-direction: column; gap: 14px;
  padding: 18px;
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  border: 1.5px solid var(--border-default);
  cursor: pointer;
  transition: all var(--dur-base) var(--ease-standard);
  text-align: left;
  font-family: var(--font-body);
  color: var(--fg-1);
  min-height: 168px;
}
body:not([data-theme="light"]) .connect-card { background: var(--pxl-green-900); }
.connect-card:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(11,15,13,0.06);
}
.connect-card--connected {
  border-color: var(--fg-1);
  background: var(--bg-surface);
}
body[data-theme="light"] .connect-card--connected {
  background: #FFFFFF;
  border-color: #0B0F0D;
}
body:not([data-theme="light"]) .connect-card--connected {
  background: var(--pxl-green-900);
  border-color: rgba(255,255,255,0.55);
}
.connect-card__head {
  display: flex; align-items: center; gap: 12px;
}
.connect-card__logo {
  width: 44px; height: 44px;
  border-radius: 10px;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.connect-card__logo--google {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
}
.connect-card__logo--google svg { width: 24px; height: 24px; }
.connect-card__logo--meta {
  background: #FFFFFF;
  border: 1px solid #E5E7EB;
}
.connect-card__logo--meta svg { width: 26px; height: 26px; }
.connect-card__brand {
  font: 700 15px var(--font-display);
  color: var(--fg-1);
  margin: 0 0 2px;
  display: flex; align-items: center; gap: 6px;
}
.connect-card__sub {
  font-size: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fg-3);
}
.connect-card__desc {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.5;
  flex: 1;
}
/* A failed connection attempt, announced.
   Hidden until it has something to say: an inserted/revealed role="alert" is
   spoken, a text change inside a region that was already there is not. This
   sits BESIDE the description rather than replacing it, so the card still
   says what it is for while it says what went wrong. */
.connect-card__error {
  font-size: 12px;
  line-height: 1.5;
  color: var(--pxl-warning, #b45309);
  margin-top: 8px;
}
.connect-card__error:focus-visible {
  outline: 2px solid var(--pxl-warning, #b45309);
  outline-offset: 2px;
  border-radius: 4px;
}
.connect-card__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font: 600 13px var(--font-display);
  border: 1px solid var(--border-strong);
  background: var(--bg-surface);
  color: var(--fg-1);
  transition: all var(--dur-fast);
}
body:not([data-theme="light"]) .connect-card__cta { background: var(--pxl-green-800); }
.connect-card:hover .connect-card__cta { border-color: var(--fg-1); background: var(--fg-1); color: var(--bg-surface); }
.connect-card__cta svg { width: 14px; height: 14px; }
.connect-card--connected .connect-card__cta {
  background: rgba(34,197,94,0.12);
  border-color: var(--pxl-green-500);
  color: var(--pxl-green-400);
}
body[data-theme="light"] .connect-card--connected .connect-card__cta {
  background: #DCFCE7;
  border-color: rgba(22,163,74,0.30);
  color: #15803D;
}
.connect-card--connected:hover .connect-card__cta {
  background: rgba(34,197,94,0.18);
  border-color: var(--pxl-green-500);
  color: var(--pxl-green-400);
}
body[data-theme="light"] .connect-card--connected:hover .connect-card__cta {
  background: #BBF7D0;
  color: #15803D;
}
.connect-card__connected-tag {
  position: absolute;
  top: 12px; right: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px;
  font: 600 10px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--pxl-green-400);
  color: var(--pxl-green-950);
  border-radius: 999px;
}
body[data-theme="light"] .connect-card__connected-tag { background: #16A34A; color: #FFFFFF; }
.connect-card__connected-tag svg { width: 10px; height: 10px; }
.connect-card__account {
  font: 600 12px var(--font-display);
  color: var(--fg-1);
  padding: 8px 10px;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
  margin-top: -4px;
}
body[data-theme="light"] .connect-card__account { background: #FFFFFF; }
.connect-card__account svg { width: 12px; height: 12px; color: var(--pxl-green-400); flex-shrink: 0; }
body[data-theme="light"] .connect-card__account svg { color: #16A34A; }

/* Merchant Center row inside the connected Google Ads card. Same shape as
   the account row but with a different colored leading icon to distinguish. */
.connect-card__merchant {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  margin-top: 6px;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}
body[data-theme="light"] .connect-card__merchant { background: #FFFFFF; }
.connect-card__merchant-icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  background: rgba(245, 158, 11, 0.10);
  border-radius: 6px;
  color: var(--pxl-warning, #F59E0B);
  flex-shrink: 0;
}
body[data-theme="light"] .connect-card__merchant-icon {
  background: #FEF3C7;
  color: #B45309;
}
.connect-card__merchant-icon svg { width: 12px; height: 12px; }
.connect-card__merchant-label {
  font: 600 9px var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.connect-card__merchant-name {
  font: 600 12px var(--font-display);
  color: var(--fg-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.connect-card__merchant-id {
  font-size: 10px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-weight: 400;
  margin-top: 1px;
}

/* Meta Pixel + Catalog rows on the connected Meta card. Same shape as
   the Merchant row but with different leading-icon colors:
   pixel = blue (action / event), catalog = purple (product). */
.connect-card__pixel,
.connect-card__catalog {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  margin-top: 6px;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: 6px;
}
body[data-theme="light"] .connect-card__pixel,
body[data-theme="light"] .connect-card__catalog { background: #FFFFFF; }

.connect-card__pixel-icon,
.connect-card__catalog-icon {
  width: 24px; height: 24px;
  display: grid; place-items: center;
  border-radius: 6px;
  flex-shrink: 0;
}
.connect-card__pixel-icon {
  background: rgba(24, 119, 242, 0.10); /* Meta blue */
  color: #1877F2;
}
body[data-theme="light"] .connect-card__pixel-icon {
  background: #DBEAFE; color: #1D4ED8;
}
.connect-card__catalog-icon {
  background: rgba(147, 51, 234, 0.10);  /* Catalog purple */
  color: #9333EA;
}
body[data-theme="light"] .connect-card__catalog-icon {
  background: #F3E8FF; color: #7E22CE;
}
.connect-card__pixel-icon svg,
.connect-card__catalog-icon svg { width: 12px; height: 12px; }

.connect-card__pixel-label,
.connect-card__catalog-label {
  font: 600 9px var(--font-display);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--fg-3);
}
.connect-card__pixel-name,
.connect-card__catalog-name {
  font: 600 12px var(--font-display);
  color: var(--fg-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.connect-card__pixel-id,
.connect-card__catalog-id {
  font-size: 10px;
  color: var(--fg-3);
  font-family: var(--font-mono);
  font-weight: 400;
  margin-top: 1px;
}

/* ============================================================== */
/* Privacy callout (Step 2 — auto-delete highlight)               */
/* ============================================================== */
.privacy-callout {
  display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: flex-start;
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, rgba(34,197,94,0.04) 100%);
  border: 1px solid rgba(34,197,94,0.30);
  border-radius: var(--radius-md);
  margin-bottom: 22px;
}
body[data-theme="light"] .privacy-callout {
  background: #ECFDF3;
  border-color: rgba(22,163,74,0.25);
}
.privacy-callout__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(34,197,94,0.18);
  color: var(--pxl-green-400);
  flex-shrink: 0;
}
body[data-theme="light"] .privacy-callout__icon { background: #DCFCE7; color: #15803D; }
.privacy-callout__icon svg { width: 18px; height: 18px; }
.privacy-callout__title {
  font: 700 13px var(--font-display);
  color: var(--fg-1);
  margin-bottom: 4px;
}
.privacy-callout__text {
  font-size: 12px;
  color: var(--fg-2);
  line-height: 1.5;
}
.privacy-callout__text strong { color: var(--fg-1); font-weight: 600; }

.section-label {
  display: flex; align-items: center; gap: 8px;
  font: 600 11px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  margin: 24px 0 12px;
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-subtle);
}
.section-label--first { margin-top: 0; }

/* ============================================================== */
/* Right panel content (callout)                                  */
/* ============================================================== */
.panel__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  background: linear-gradient(135deg, var(--pxl-green-700) 0%, var(--pxl-green-900) 100%);
  border: 1px solid var(--border-default);
  margin-bottom: 18px;
  display: grid; place-items: center;
  transition: all var(--dur-base) var(--ease-standard);
}
.panel__video:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(11,15,13,0.10); }
.panel__video::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(34,197,94,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.panel__video-thumb {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 600 11px var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-align: center;
}
.panel__video-thumb-decor {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.30)),
    radial-gradient(circle at 22% 30%, rgba(34,197,94,0.20), transparent 35%),
    radial-gradient(circle at 78% 70%, rgba(34,197,94,0.14), transparent 40%);
}
.panel__video-play {
  position: relative; z-index: 2;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: rgba(255,255,255,0.95);
  display: grid; place-items: center;
  box-shadow: 0 6px 24px rgba(0,0,0,0.30);
  transition: transform var(--dur-base) var(--ease-standard);
}
.panel__video:hover .panel__video-play { transform: scale(1.06); }
.panel__video-play svg {
  width: 22px; height: 22px;
  color: #0B0F0D;
  margin-left: 3px; /* visual centering of triangle */
  fill: currentColor;
}
.panel__video-label {
  position: absolute;
  left: 12px; bottom: 10px; z-index: 2;
  font: 600 11px var(--font-display);
  color: #FFFFFF;
  letter-spacing: 0.04em;
  display: flex; align-items: center; gap: 6px;
}
.panel__video-label::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: #EF4444;
}
.panel__video-duration {
  position: absolute;
  right: 12px; bottom: 10px; z-index: 2;
  font: 600 11px var(--font-mono);
  color: #FFFFFF;
  background: rgba(0,0,0,0.55);
  padding: 2px 6px;
  border-radius: 4px;
}

/* Video modal */
.video-modal-bg {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(8px);
  z-index: 200;
  display: grid; place-items: center;
  padding: 24px;
  animation: fade 200ms;
}
.video-modal {
  position: relative;
  width: 100%; max-width: 960px;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.60);
  animation: pop 220ms;
}
.video-modal video,
.video-modal iframe {
  width: 100%; height: 100%;
  display: block;
  border: 0;
}
.video-modal__close {
  position: absolute;
  top: -42px; right: 0;
  width: 36px; height: 36px;
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #FFFFFF;
  display: grid; place-items: center;
  cursor: pointer;
  transition: all var(--dur-fast);
}
.video-modal__close:hover { background: rgba(255,255,255,0.22); }
.video-modal__close svg { width: 18px; height: 18px; }

.panel__art {
  display: flex; justify-content: center;
  margin-bottom: 18px;
}
.panel__art-blob {
  position: relative;
  width: 140px; height: 90px;
}
.panel__art-blob .b1 {
  position: absolute; left: 12px; top: 18px;
  width: 60px; height: 60px;
  border-radius: 999px;
  background: var(--pxl-green-400);
  opacity: 0.85;
}
.panel__art-blob .b2 {
  position: absolute; right: 18px; top: 8px;
  width: 50px; height: 50px;
  border-radius: 999px;
  background: var(--pxl-green-700);
}
body[data-theme="light"] .panel__art-blob .b2 { background: #16A34A; opacity: 0.7; }
.panel__art-blob .b3 {
  position: absolute; left: 56px; top: 44px;
  width: 38px; height: 38px;
  border-radius: 999px;
  background: var(--pxl-green-300);
}
.panel__art-blob svg.spark {
  position: absolute; right: 10px; bottom: 4px;
  width: 22px; height: 22px;
  color: var(--pxl-green-400);
}
.panel__title {
  font: 700 18px/1.3 var(--font-display);
  margin: 0 0 16px;
  text-align: center;
  color: var(--fg-1);
}
.panel__list { display: flex; flex-direction: column; gap: 10px; }
.panel__item {
  display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: flex-start;
  font-size: 13px;
  color: var(--fg-1);
  line-height: 1.5;
}
.panel__item svg { width: 18px; height: 18px; color: var(--pxl-green-400); margin-top: 1px; }
body[data-theme="light"] .panel__item svg { color: #16A34A; }
.panel__footer {
  margin-top: 20px;
  padding: 10px 14px;
  background: rgba(0,0,0,0.04);
  border-radius: var(--radius-sm);
  font-size: 11px;
  color: var(--fg-3);
  text-align: center;
}
body:not([data-theme="light"]) .panel__footer { background: rgba(255,255,255,0.04); }

/* ============================================================== */
/* Step 2 — audit type pills (the "what to check")                */
/* ============================================================== */
/* The audit-area pills are focusable now — they carry role=checkbox and
   tabindex, because they were divs a keyboard user could not reach at all.
   A focusable control with no visible focus ring is only half the fix: the
   user can move to it and cannot tell where they are. */
.pill:focus-visible {
  outline: 2px solid var(--fg-accent);
  outline-offset: 2px;
}

.pill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pill {
  display: grid; grid-template-columns: 32px 1fr 18px; gap: 12px; align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  cursor: pointer;
  transition: all var(--dur-fast);
}
body:not([data-theme="light"]) .pill { background: var(--pxl-green-900); }
.pill:hover { border-color: var(--border-strong); }
.pill--checked {
  border-color: var(--fg-1);
  background: var(--bg-surface);
}
body[data-theme="light"] .pill--checked { background: #FFFFFF; border-color: #0B0F0D; }
body:not([data-theme="light"]) .pill--checked { background: var(--pxl-green-900); border-color: rgba(255,255,255,0.55); }
.pill__icon {
  width: 32px; height: 32px;
  background: rgba(34,197,94,0.10);
  border-radius: 8px;
  display: grid; place-items: center;
  color: var(--pxl-green-400);
}
body[data-theme="light"] .pill__icon { background: #DCFCE7; color: #15803D; }
.pill__icon svg { width: 16px; height: 16px; }
.pill__title { font: 600 13px var(--font-display); color: var(--fg-1); line-height: 1.2; }
.pill__desc { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.pill__check {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  background: transparent;
}
.pill--checked .pill__check {
  background: var(--pxl-green-400);
  border-color: var(--pxl-green-400);
}
body[data-theme="light"] .pill--checked .pill__check { background: #16A34A; border-color: #16A34A; }
.pill--checked .pill__check svg { width: 12px; height: 12px; color: var(--pxl-green-950); }
body[data-theme="light"] .pill--checked .pill__check svg { color: #FFFFFF; }
.pill:not(.pill--checked) .pill__check svg { display: none; }

/* Trusted-by logo strip (Step 1) */
.trust-strip {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border-subtle);
}
.trust-strip__label {
  font: 600 11px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--fg-3);
  margin-bottom: 14px;
}
.trust-strip__logos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: 16px;
  opacity: 0.55;
  filter: grayscale(100%);
}
.trust-strip__logos svg {
  width: 100%;
  max-width: 100px;
  height: 24px;
  color: var(--fg-2);
  display: block;
}
@media (max-width: 520px) {
  .trust-strip__logos { grid-template-columns: repeat(2, 1fr); gap: 18px 12px; }
}

/* ============================================================== */
/* Step 3 — checkboxes                                            */
/* ============================================================== */
.checks { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.check {
  display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: flex-start;
  padding: 12px 4px;
  cursor: pointer;
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.5;
}
/* Focusable, so the focus has to be visible — matches .pill:focus-visible.
   A control reachable by keyboard that shows no ring leaves the user somewhere
   they cannot see. */
.check:focus-visible {
  outline: 2px solid var(--fg-accent);
  outline-offset: 2px;
  border-radius: 8px;
}
.check__box {
  width: 20px; height: 20px;
  border: 1px solid var(--border-strong);
  border-radius: 5px;
  display: grid; place-items: center;
  margin-top: 1px;
  background: transparent;
}
.check--checked .check__box {
  background: var(--pxl-green-400);
  border-color: var(--pxl-green-400);
}
body[data-theme="light"] .check--checked .check__box { background: #16A34A; border-color: #16A34A; }
.check--checked .check__box svg { width: 12px; height: 12px; color: var(--pxl-green-950); }
body[data-theme="light"] .check--checked .check__box svg { color: #FFFFFF; }
.check:not(.check--checked) .check__box svg { display: none; }
.check b { color: var(--fg-1); display: block; font: 600 13px var(--font-display); }

/* ============================================================== */
/* Footer actions (outside the card, like the reference)          */
/* ============================================================== */
.footer-actions {
  max-width: 880px;
  margin: 32px auto 80px;
  padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.footer-actions__right { display: flex; gap: 10px; }

/* ============================================================== */
/* Modal                                                          */
/* ============================================================== */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(11,15,13,0.55);
  backdrop-filter: blur(6px);
  z-index: 100;
  display: grid; place-items: center;
  padding: 24px;
  animation: fade 200ms;
}
.modal {
  width: 100%; max-width: 480px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  padding: 28px;
  box-shadow: var(--shadow-lg);
  animation: pop 220ms;
}
body:not([data-theme="light"]) .modal { background: var(--pxl-green-800); }
.modal__head {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 16px;
}
.modal__brand-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: grid; place-items: center;
  font: 700 16px var(--font-display);
}
.modal h3 {
  font: 700 20px/1.2 var(--font-display);
  margin: 0 0 6px;
  color: var(--fg-1);
}
.modal__sub { font-size: 13px; color: var(--fg-2); margin: 0 0 18px; line-height: 1.5; }
.modal__list { display: flex; flex-direction: column; gap: 6px; max-height: 300px; overflow-y: auto; }
.modal__row {
  display: grid; grid-template-columns: 32px 1fr 18px; gap: 12px; align-items: center;
  padding: 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--dur-fast);
}
.modal__row:hover { border-color: var(--border-strong); }
.modal__row--selected {
  border-color: var(--pxl-green-500);
  background: rgba(34,197,94,0.06);
}
.modal__avatar {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: grid; place-items: center;
  background: rgba(34,197,94,0.12);
  font: 700 13px var(--font-display);
  color: var(--pxl-green-400);
}
body[data-theme="light"] .modal__avatar { color: #15803D; background: #DCFCE7; }
.modal__name { font: 600 13px var(--font-display); color: var(--fg-1); }
.modal__meta { font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.modal__radio {
  width: 18px; height: 18px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  display: grid; place-items: center;
}
.modal__row--selected .modal__radio { border-color: var(--pxl-green-400); }
.modal__row--selected .modal__radio::after {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--pxl-green-400);
}
.modal__actions {
  display: flex; justify-content: flex-end; gap: 10px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
}
.modal__loading {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 36px 0;
  text-align: center;
}
.spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--border-default);
  border-top-color: var(--pxl-green-400);
  border-radius: 999px;
  animation: spin 700ms linear infinite;
}
.modal__loading p { font-size: 13px; color: var(--fg-3); margin: 0; line-height: 1.5; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(0.98); } }

/* ============================================================== */
/* Modal — account picker search + MCC tree                       */
/* ============================================================== */

/* Search bar pinned above the scrolling rows. */
.modal__search {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-surface);
  margin-bottom: 10px;
  transition: border-color var(--dur-fast), box-shadow var(--dur-fast);
}
.modal__search:focus-within {
  border-color: var(--pxl-green-400);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.12);
}
body[data-theme="light"] .modal__search:focus-within {
  border-color: #16A34A;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.12);
}
.modal__search-icon {
  width: 16px; height: 16px;
  color: var(--fg-3);
  flex-shrink: 0;
}
.modal__search-icon svg { width: 16px; height: 16px; display: block; }
.modal__search-input {
  flex: 1;
  border: 0;
  background: transparent;
  outline: 0;
  font: 400 14px var(--font-display);
  color: var(--fg-1);
  padding: 0;
}
.modal__search-input::placeholder { color: var(--fg-3); opacity: 1; }
.modal__search-count {
  font-size: 11px;
  color: var(--fg-3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Scrolling row container (replaces the previous direct-children layout
   on .modal__list because the picker now wraps rows in .modal__rows). */
.modal__rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 360px;
  overflow-y: auto;
  /* Subtle inset shadow so users see the list scrolls. */
  scrollbar-width: thin;
}
.modal__rows::-webkit-scrollbar { width: 6px; }
.modal__rows::-webkit-scrollbar-thumb {
  background: var(--border-strong);
  border-radius: 999px;
}

/* Manager (MCC) header row — non-selectable, click-to-toggle children. */
.modal__row--manager {
  cursor: pointer;
  background: var(--bg-canvas);
  border-style: dashed;
}
body[data-theme="light"] .modal__row--manager {
  background: #F4F6F4;
  border-color: #D6DBD7;
}
.modal__row--manager:hover { border-color: var(--border-strong); }
.modal__row--manager .modal__radio { display: none; }
.modal__row--manager .modal__chevron {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  color: var(--fg-3);
  flex-shrink: 0;
}
.modal__row--manager .modal__chevron svg { width: 16px; height: 16px; }
.modal__avatar--mcc {
  background: rgba(245, 158, 11, 0.10);
  color: var(--pxl-warning, #B45309);
}
body[data-theme="light"] .modal__avatar--mcc {
  background: #FEF3C7;
  color: #B45309;
}
.modal__mcc-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pxl-warning, #B45309);
  background: rgba(245, 158, 11, 0.10);
}
body[data-theme="light"] .modal__mcc-badge {
  color: #B45309;
  background: #FEF3C7;
}
.modal__mcc-count {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 500;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

/* Section headers in the merchant picker (e.g. "Linked to your Ads account") */
.modal__section-header {
  display: flex; align-items: center; gap: 6px;
  font: 600 11px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pxl-green-400);
  padding: 8px 4px 4px;
  margin-top: 6px;
}
body[data-theme="light"] .modal__section-header { color: #16A34A; }
.modal__section-header svg { width: 12px; height: 12px; flex-shrink: 0; }
.modal__section-header--muted { color: var(--fg-3); }
body[data-theme="light"] .modal__section-header--muted { color: #6B7280; }
.modal__section-count {
  margin-left: auto;
  font-weight: 500;
  color: var(--fg-3);
  font-size: 10px;
  letter-spacing: 0.04em;
}

/* Sub-copy under each Meta extras section header (Pixel / Catalog).
   Slightly tighter than the modal-wide .modal__sub so it visually
   belongs to the section, not the whole dialog. */
.modal__meta-extras-sub {
  font-size: 12px;
  color: var(--fg-3);
  margin: 0 4px 10px;
  line-height: 1.45;
}
/* Push the second Meta extras section away from the first so the
   Pixel and Catalog groups don't run into each other. */
#oauth-meta-extras > #oauth-meta-extras-catalogs:not([hidden]) {
  margin-top: 14px;
}

/* "Show all merchants" expander toggle */
.modal__expander {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px;
  margin-top: 8px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
  background: var(--bg-canvas);
  cursor: pointer;
  font: 500 12px var(--font-display);
  color: var(--fg-2);
  transition: background var(--dur-fast), border-color var(--dur-fast);
}
body[data-theme="light"] .modal__expander { background: #F7F8F7; }
.modal__expander:hover { border-color: var(--border-strong); background: var(--bg-surface); }
body[data-theme="light"] .modal__expander:hover { background: #FFFFFF; }
.modal__expander svg { width: 14px; height: 14px; color: var(--fg-3); flex-shrink: 0; }

/* Child rows indent slightly under their MCC parent. Visual only —
   clicking still selects the child as the active account. */
.modal__row--child {
  margin-left: 18px;
  position: relative;
}
.modal__row--child::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 50%;
  width: 8px;
  height: 1px;
  background: var(--border-default);
}

/* No-results placeholder when the search filter empties the list. */
.modal__empty {
  padding: 28px 12px;
  text-align: center;
  font-size: 13px;
  color: var(--fg-3);
  background: var(--bg-canvas);
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-md);
}
body[data-theme="light"] .modal__empty { background: #F7F8F7; }

/* Mobile: tighten spacing + reduce list height since the keyboard eats
   half the viewport when the search input gets focused. */
@media (max-width: 720px) {
  .modal__rows { max-height: 50vh; }
  .modal__row--child { margin-left: 12px; }
  .modal__row--child::before { left: -8px; width: 6px; }
}

/* ============================================================== */
/* Confirmation page (post-submit) — explains BigConvert value     */
/* ============================================================== */
.confirm-hero {
  text-align: center;
  padding: 48px 36px 36px;
  background: linear-gradient(180deg, rgba(34,197,94,0.10) 0%, rgba(34,197,94,0.02) 100%);
  border-bottom: 1px solid var(--border-subtle);
}
body[data-theme="light"] .confirm-hero { background: linear-gradient(180deg, #ECFDF3 0%, #F7FCF8 100%); }
.confirm-hero__check {
  width: 72px; height: 72px;
  margin: 0 auto 22px;
  border-radius: 999px;
  background: var(--pxl-green-400);
  display: grid; place-items: center;
  color: var(--pxl-green-950);
  box-shadow: 0 0 0 8px rgba(34,197,94,0.18);
  position: relative;
}
body[data-theme="light"] .confirm-hero__check { background: #16A34A; color: #FFFFFF; box-shadow: 0 0 0 8px rgba(22,163,74,0.18); }
.confirm-hero__check svg { width: 36px; height: 36px; }
.confirm-hero h1 {
  font: 700 30px/1.15 var(--font-display);
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--fg-1);
}
.confirm-hero__sub {
  font-size: 15px;
  color: var(--fg-2);
  max-width: 540px;
  margin: 0 auto 22px;
  line-height: 1.55;
}
.confirm-hero__sub b { color: var(--fg-1); }
.confirm-hero__eta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 999px;
  font: 600 12px var(--font-display);
  color: var(--fg-1);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
body:not([data-theme="light"]) .confirm-hero__eta { background: var(--pxl-green-900); }
.confirm-hero__eta svg { width: 14px; height: 14px; color: var(--pxl-green-400); }
body[data-theme="light"] .confirm-hero__eta svg { color: #16A34A; }

.delivery-channels {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin: 0 auto 18px;
  max-width: 540px;
}
.delivery-channel {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  text-align: left;
  min-width: 220px;
}
body:not([data-theme="light"]) .delivery-channel { background: var(--pxl-green-900); }
.delivery-channel__icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: rgba(34,197,94,0.12);
  color: var(--pxl-green-400);
  display: grid; place-items: center;
  flex-shrink: 0;
}
body[data-theme="light"] .delivery-channel__icon { background: #DCFCE7; color: #15803D; }
.delivery-channel__icon svg { width: 16px; height: 16px; }
.delivery-channel__label {
  font: 600 10px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  margin-bottom: 2px;
}
.delivery-channel__value {
  font: 600 14px var(--font-display);
  color: var(--fg-1);
  word-break: break-all;
}

.confirm-section {
  padding: 36px 56px;
}
.confirm-section + .confirm-section { border-top: 1px solid var(--border-subtle); }
.confirm-section__heading {
  font: 700 20px/1.2 var(--font-display);
  margin: 0 0 6px;
  color: var(--fg-1);
}
.confirm-section__lede {
  font-size: 14px;
  color: var(--fg-2);
  margin: 0 0 24px;
  line-height: 1.55;
}

/* "What happens next" timeline */
.next-steps { display: flex; flex-direction: column; gap: 14px; }
.next-step {
  display: grid; grid-template-columns: 44px 1fr; gap: 16px; align-items: flex-start;
  padding: 16px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-page);
  position: relative;
}
body:not([data-theme="light"]) .next-step { background: var(--pxl-green-900); }
.next-step__num {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--pxl-green-400);
  color: var(--pxl-green-950);
  display: grid; place-items: center;
  font: 700 15px var(--font-display);
}
body[data-theme="light"] .next-step__num { background: #16A34A; color: #FFFFFF; }
.next-step__title {
  font: 700 14px var(--font-display);
  color: var(--fg-1);
  margin-bottom: 4px;
  display: flex; align-items: center; gap: 8px;
}
.next-step__title svg { width: 14px; height: 14px; color: var(--fg-3); }
.next-step__desc {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
}

/* "How BigConvert helps" feature grid */
.help-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.help-card {
  padding: 20px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--bg-page);
}
body:not([data-theme="light"]) .help-card { background: var(--pxl-green-900); }
.help-card__icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  background: rgba(34,197,94,0.12);
  color: var(--pxl-green-400);
  display: grid; place-items: center;
  margin-bottom: 12px;
}
body[data-theme="light"] .help-card__icon { background: #DCFCE7; color: #15803D; }
.help-card__icon svg { width: 18px; height: 18px; }
.help-card__title {
  font: 700 14px var(--font-display);
  color: var(--fg-1);
  margin-bottom: 6px;
}
.help-card__desc {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.55;
}

/* CTA strip at bottom */
.confirm-cta {
  display: flex; align-items: center; gap: 18px;
  padding: 24px 28px;
  background: var(--pxl-green-800);
  border: 1px solid var(--pxl-green-500);
  border-radius: var(--radius-md);
  color: var(--pxl-green-50);
}
body[data-theme="light"] .confirm-cta {
  background: #0B0F0D;
  border-color: #0B0F0D;
  color: #FFFFFF;
}
.confirm-cta__icon {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: rgba(34,197,94,0.18);
  color: var(--pxl-green-400);
  display: grid; place-items: center;
  flex-shrink: 0;
}
body[data-theme="light"] .confirm-cta__icon { background: #16A34A; color: #FFFFFF; }
.confirm-cta__icon svg { width: 22px; height: 22px; }
.confirm-cta__body { flex: 1; }
.confirm-cta__title {
  font: 700 16px var(--font-display);
  margin-bottom: 4px;
}
.confirm-cta__desc {
  font-size: 13px;
  opacity: 0.85;
  line-height: 1.5;
}
.confirm-cta__btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--pxl-green-400);
  color: var(--pxl-green-950);
  border: none;
  border-radius: var(--radius-md);
  font: 700 13px var(--font-display);
  cursor: pointer;
  transition: all var(--dur-base);
  text-decoration: none;
  flex-shrink: 0;
}
body[data-theme="light"] .confirm-cta__btn { background: #16A34A; color: #FFFFFF; }
.confirm-cta__btn:hover { background: var(--pxl-green-300); }
body[data-theme="light"] .confirm-cta__btn:hover { background: #15803D; }
.confirm-cta__btn svg { width: 14px; height: 14px; }

/* Submission summary inside confirm card */
.confirm-summary {
  margin-top: 18px;
  padding: 14px 18px;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
body:not([data-theme="light"]) .confirm-summary { background: var(--pxl-green-900); }
.confirm-summary__label {
  font: 600 11px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.confirm-summary__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 5px 0;
  font-size: 13px;
}
.confirm-summary__row + .confirm-summary__row { border-top: 1px solid var(--border-subtle); }
.confirm-summary__row span:first-child { color: var(--fg-3); }
.confirm-summary__row span:last-child { color: var(--fg-1); font-weight: 600; font-family: var(--font-display); }

/* The report link on the confirmation screen.
   Same surface treatment as .confirm-summary directly above it, so the two
   read as one block rather than as a bolted-on afterthought. */
.report-link {
  max-width: 420px;
  margin: 22px auto 0;
  text-align: left;
  padding: 14px 18px;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}
body:not([data-theme="light"]) .report-link { background: var(--pxl-green-900); }
.report-link__label {
  font: 600 11px var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--fg-3);
  margin-bottom: 8px;
}
.report-link__row { display: flex; gap: 8px; align-items: stretch; }
.report-link__url {
  flex: 1;
  min-width: 0;
  padding: 9px 11px;
  font: 400 12.5px var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--fg-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 8px;
  text-overflow: ellipsis;
}
.report-link__copy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 13px;
  font: 600 13px var(--font-display);
  color: var(--fg-1);
  background: var(--bg-surface);
  border: 1px solid var(--border-strong);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  transition: all var(--dur-fast);
}
.report-link__copy:hover { border-color: var(--fg-3); }
.report-link__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--fg-3);
}
/* Empty until something is said, so it takes no space and announces nothing
   on load. role="status" only announces what arrives after that. */
.report-link__status:empty { display: none; }
.report-link__status {
  margin: 8px 0 0;
  font: 600 12px var(--font-display);
  color: #16A34A;
}
body:not([data-theme="light"]) .report-link__status { color: #86EFAC; }

/* 16px on touch, for the same reason .input has it and not as a preference:
   iOS Safari zooms the whole page in when a focused input is under 16px. This
   field carries .input, but the shorthand above is declared later in this file
   and would otherwise win over the .input rule in the coarse-pointer block —
   so the bump is restated here rather than left to cascade order. */
@media (pointer: coarse) {
  .report-link__url { font-size: 16px; }
}

@media (max-width: 760px) {
  .report-link__row { flex-direction: column; }
  .report-link__copy { justify-content: center; }
  .confirm-section { padding: 24px; }
  .confirm-hero { padding: 36px 20px 24px; }
  .confirm-hero h1 { font-size: 22px; }
  .help-grid { grid-template-columns: 1fr; }
  .confirm-cta { flex-direction: column; align-items: flex-start; padding: 20px; }
  .delivery-channel { min-width: 0; width: 100%; }
}
.success {
  text-align: center;
  padding: 24px 36px 36px;
}
.success__check {
  width: 64px; height: 64px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: rgba(34,197,94,0.14);
  display: grid; place-items: center;
  color: var(--pxl-green-400);
}
body[data-theme="light"] .success__check { background: #DCFCE7; color: #15803D; }
.success__check svg { width: 32px; height: 32px; }
.success h2 {
  font: 700 24px/1.2 var(--font-display);
  margin: 0 0 8px;
  color: var(--fg-1);
}
.success p { font-size: 14px; color: var(--fg-2); max-width: 420px; margin: 0 auto 20px; line-height: 1.55; }
.success__summary {
  text-align: left;
  background: var(--bg-page);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  max-width: 420px; margin: 0 auto 20px;
}
.success__row {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 0;
  font-size: 13px;
}
.success__row + .success__row { border-top: 1px solid var(--border-subtle); }
.success__row span:first-child { color: var(--fg-3); }
.success__row span:last-child { color: var(--fg-1); font-weight: 600; font-family: var(--font-display); }

/* ============================================================== */
/* Responsive                                                     */
/* ============================================================== */
@media (max-width: 760px) {
  .topbar { padding: 12px 16px; }
  .stage { padding: 32px 16px 16px; }
  .stepper { margin-bottom: 36px; }
  .stepper__sub { display: none; }
  .card__split { grid-template-columns: 1fr; }
  .card__form { padding: 24px; }
  .card__panel { padding: 24px; border-left: none; border-top: 1px solid var(--border-subtle); }
  .pill-grid, .field-row { grid-template-columns: 1fr; }
  .connect-grid { grid-template-columns: 1fr; }
  .footer-actions { padding: 0 16px; margin-bottom: 40px; }
}

/* The .modal-bg / .video-modal-bg classes set display:grid which would
   override the [hidden] attribute. Force [hidden] to win. */
.modal-bg[hidden],
.video-modal-bg[hidden] { display: none !important; }

/* Hoist the body[data-theme="light"] vars to :root so the html element
   shares the same canvas color (otherwise empty space below short pages
   shows the dark default). */
:root:has(body[data-theme="light"]) {
    --bg-page: #F7F8F7;
    --bg-surface: #FFFFFF;
}
html { background: var(--bg-page); }

/* Override: place the video close button inside the panel, top-right
   corner — matching the user's expectation of a standard modal close. */
.video-modal__close {
    top: 12px !important;
    right: 12px !important;
    background: rgba(0, 0, 0, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.25) !important;
    z-index: 3;
}
.video-modal__close:hover {
    background: rgba(0, 0, 0, 0.75) !important;
}

/* Universal: every CSS class that sets display: flex/grid/etc. would
   otherwise win over the [hidden] HTML attribute (which only wins via
   browser default specificity). Force it for consistency across the
   funnel — connect-card account row, connected tag, etc. */
[hidden] { display: none !important; }

/* ====================================================================
   Mobile: pin Cancel / Continue to the bottom of the viewport so the
   user always sees the primary CTA without scrolling. Adds bottom
   padding to body so card content isn't hidden behind the bar.
   ==================================================================== */
@media (max-width: 720px) {
    body { padding-bottom: 96px; }

    .footer-actions {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: none;
        margin: 0;
        padding: 12px 16px;
        background: var(--bg-surface);
        border-top: 1px solid var(--border-default);
        box-shadow: 0 -4px 14px rgba(11, 15, 13, 0.06);
        z-index: 50;
    }

    /* Make the Continue button take more space — it's the primary action. */
    .footer-actions__right { flex: 1; justify-content: flex-end; }
    .footer-actions__right .btn--primary { flex: 1; }

    /* Iframe-aware safe-area for notched devices. */
    @supports (padding: env(safe-area-inset-bottom)) {
        .footer-actions { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
        body { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
    }
}

/* Back button: arrow + label on desktop, just the arrow on mobile. */
.btn--back { gap: 6px; }
.btn--back .btn__label { display: inline; }

@media (max-width: 720px) {
    /* Compact "<" only on mobile — saves space for the primary CTA. */
    .btn--back .btn__label { display: none; }
    .btn--back {
        padding: 11px 14px;
        flex: 0 0 auto;
    }
    /* Don't let the back button steal flex from the primary CTA on mobile. */
    .footer-actions { gap: 12px; }
}

/* Mobile: free up horizontal space inside the privacy callout by
   pinning the shield icon to the top-right corner instead of letting
   it take its own grid column. Title reserves padding so it doesn't
   run under the icon. */
@media (max-width: 720px) {
    .privacy-callout {
        position: relative;
        display: block;            /* was grid: 36px 1fr — wastes width */
        padding: 14px 14px 14px 16px;
    }
    .privacy-callout__icon {
        position: absolute;
        top: 12px;
        right: 12px;
    }
    .privacy-callout__title {
        padding-right: 48px;       /* clear of the absolute icon */
    }
    /* Body text gets full width — no extra right-padding needed since
       it wraps below the title (which has the icon clearance). */
}

/* Respect prefers-reduced-motion.
   Set by people who get migraine or vertigo from movement, and this app moved
   a fair amount: smooth scrolling on every validation error and on submit,
   pop and fade keyframes, and transitions on most interactive elements. None
   of it was conditional.
   Not 0s — a hair above zero, so transitionend and animationend still fire and
   any code waiting on them is not left hanging. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}