/*!
 * Bitghost Intake — island styles · v1.0.0 · build 2026-10-07T19:22:13Z
 * Scoped under .bg-intake so Impreza, WPBakery and WooCommerce styles are never touched.
 * Tokens: field #07090b · ink #eef3f5 · ice #d5e7ee · Fraunces for the question · Outfit for the UI.
 * One card. 44px targets. Visible focus. prefers-reduced-motion respected. Container-query responsive.
 */

.bg-intake {
  --bg-intake-field: #07090b;
  --bg-intake-card: rgba(12, 16, 19, 0.86);
  --bg-intake-ink: #eef3f5;
  --bg-intake-muted: #8ea0a8;
  --bg-intake-line: rgba(214, 230, 236, 0.16);
  --bg-intake-line-strong: rgba(214, 230, 236, 0.34);
  --bg-intake-ice: #d5e7ee;
  --bg-intake-accent: #d5e7ee;
  --bg-intake-on-accent: #101416;
  --bg-intake-error: #e7b7a8;
  --bg-intake-ok: #b9e7c9;
  --bg-intake-display: "Fraunces", "Iowan Old Style", Palatino, Georgia, serif;
  --bg-intake-sans: "Outfit", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --bg-intake-radius: 28px;
  --bg-intake-radius-sm: 16px;
  --bg-intake-shadow: 0 40px 90px rgba(0, 0, 0, 0.35);

  position: relative;
  container-type: inline-size;
  color: var(--bg-intake-ink);
  font-family: var(--bg-intake-sans);
  font-weight: 340;
  line-height: 1.45;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  margin: 0 auto;
  width: 100%;
  max-width: 980px;
  isolation: isolate;
}

.bg-intake[data-theme="light"] {
  --bg-intake-field: #f4f7f8;
  --bg-intake-card: rgba(255, 255, 255, 0.92);
  --bg-intake-ink: #10161a;
  --bg-intake-muted: #5c6e75;
  --bg-intake-line: rgba(16, 22, 26, 0.14);
  --bg-intake-line-strong: rgba(16, 22, 26, 0.3);
  --bg-intake-ice: #10161a;
  --bg-intake-accent: #10161a;
  --bg-intake-on-accent: #f7fbfc;
  --bg-intake-error: #a8432b;
  --bg-intake-ok: #1f7a4c;
  --bg-intake-shadow: 0 30px 70px rgba(16, 22, 26, 0.12);
}

@media (prefers-color-scheme: light) {
  .bg-intake[data-theme="auto"] {
    --bg-intake-field: #f4f7f8;
    --bg-intake-card: rgba(255, 255, 255, 0.92);
    --bg-intake-ink: #10161a;
    --bg-intake-muted: #5c6e75;
    --bg-intake-line: rgba(16, 22, 26, 0.14);
    --bg-intake-line-strong: rgba(16, 22, 26, 0.3);
    --bg-intake-ice: #10161a;
    --bg-intake-accent: #10161a;
    --bg-intake-on-accent: #f7fbfc;
    --bg-intake-error: #a8432b;
    --bg-intake-ok: #1f7a4c;
    --bg-intake-shadow: 0 30px 70px rgba(16, 22, 26, 0.12);
  }
}

.bg-intake *,
.bg-intake *::before,
.bg-intake *::after { box-sizing: border-box; }

.bg-intake [hidden] { display: none !important; }

.bg-intake :focus-visible {
  outline: 2px solid var(--bg-intake-accent);
  outline-offset: 3px;
  border-radius: 6px;
}

.bg-intake button,
.bg-intake input,
.bg-intake output,
.bg-intake select {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* --------------------------------------------------------------------------
 * Card
 * ------------------------------------------------------------------------ */

.bg-intake__card {
  position: relative;
  margin: 0;
  background: var(--bg-intake-card);
  border: 1px solid var(--bg-intake-line);
  border-radius: var(--bg-intake-radius);
  padding: clamp(1.1rem, 3cqw, 2.2rem);
  box-shadow: var(--bg-intake-shadow);
  overflow: hidden;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.bg-intake__card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(700px 360px at 85% -10%, color-mix(in srgb, var(--bg-intake-accent) 16%, transparent), transparent 60%),
    radial-gradient(520px 320px at -10% 100%, color-mix(in srgb, var(--bg-intake-ice) 10%, transparent), transparent 55%);
  transition: background 600ms ease;
}

.bg-intake__progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--bg-intake-line);
}

.bg-intake__progress i {
  display: block;
  height: 100%;
  width: 11%;
  background: linear-gradient(90deg, var(--bg-intake-accent), color-mix(in srgb, var(--bg-intake-accent) 55%, #fff), var(--bg-intake-accent));
  background-size: 200% 100%;
  animation: bg-intake-shimmer 2.4s linear infinite;
  transition: width 420ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes bg-intake-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

.bg-intake__kicker {
  margin: 0.2rem 0 0;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--bg-intake-muted);
}

.bg-intake__q {
  font-family: var(--bg-intake-display);
  font-weight: 460;
  font-size: clamp(2rem, 5.2cqw, 3.8rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
  margin: 0.45rem 0 0.45rem;
  color: var(--bg-intake-ink);
  outline: none;
}

.bg-intake__hint {
  color: var(--bg-intake-muted);
  margin: 0 0 1.1rem;
  max-width: 46rem;
  font-size: 0.98rem;
}

.bg-intake__stage { min-height: 120px; }

/* --------------------------------------------------------------------------
 * Choice cards
 * ------------------------------------------------------------------------ */

.bg-intake__choices,
.bg-intake__schemes,
.bg-intake__demos {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.bg-intake__choices--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bg-intake__choices--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bg-intake__choices--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.bg-intake__schemes { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.bg-intake__demos {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  max-height: 44vh;
  overflow: auto;
  padding: 2px 0.25rem 2px 2px;
  scrollbar-width: thin;
}

.bg-intake__choice {
  position: relative;
  text-align: left;
  min-height: 48px;
  width: 100%;
  cursor: pointer;
  background: color-mix(in srgb, var(--bg-intake-ink) 3%, transparent);
  border: 1px solid var(--bg-intake-line);
  border-radius: var(--bg-intake-radius-sm);
  padding: 0.8rem 0.85rem 0.75rem;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "emoji title" "emoji sub" "emoji tag";
  column-gap: 0.6rem;
  align-items: start;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.bg-intake__choice:hover {
  border-color: var(--bg-intake-line-strong);
  transform: translateY(-1px);
}

.bg-intake__choice .bg-intake__emoji {
  grid-area: emoji;
  font-size: 1.35rem;
  line-height: 1;
  padding-top: 0.1rem;
  transition: transform 220ms ease;
}

.bg-intake__choice:hover .bg-intake__emoji { transform: scale(1.12) rotate(-6deg); }

.bg-intake__choice strong {
  grid-area: title;
  display: block;
  font-weight: 560;
  font-size: 0.98rem;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.bg-intake__choice .bg-intake__sub {
  grid-area: sub;
  color: var(--bg-intake-muted);
  font-size: 0.82rem;
  line-height: 1.3;
}

.bg-intake__choice .bg-intake__tag {
  grid-area: tag;
  margin-top: 0.3rem;
  justify-self: start;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid var(--bg-intake-line);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  color: var(--bg-intake-muted);
}

.bg-intake__choice[aria-pressed="true"] {
  background: var(--bg-intake-accent);
  color: var(--bg-intake-on-accent);
  border-color: var(--bg-intake-accent);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--bg-intake-accent) 25%, transparent);
}

.bg-intake__choice[aria-pressed="true"] .bg-intake__sub,
.bg-intake__choice[aria-pressed="true"] .bg-intake__tag {
  color: var(--bg-intake-on-accent);
  opacity: 0.78;
  border-color: color-mix(in srgb, var(--bg-intake-on-accent) 35%, transparent);
}

.bg-intake__choice[aria-pressed="true"] .bg-intake__emoji { animation: bg-intake-breathe 2.8s ease-in-out infinite; }

@keyframes bg-intake-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

.bg-intake__choice--scheme {
  grid-template-columns: 1fr;
  grid-template-areas: "title" "swatch";
}

.bg-intake__choice--scheme strong { font-size: 0.88rem; }

.bg-intake__swatch {
  grid-area: swatch;
  display: flex;
  height: 8px;
  border-radius: 99px;
  overflow: hidden;
  margin-top: 0.5rem;
}

.bg-intake__swatch i { flex: 1; display: block; }

.bg-intake__swatch-dot {
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  margin-right: 0.4em;
  vertical-align: baseline;
  border: 1px solid var(--bg-intake-line-strong);
}

.bg-intake__empty { color: var(--bg-intake-muted); margin: 0.5rem 0; }

/* --------------------------------------------------------------------------
 * Inputs
 * ------------------------------------------------------------------------ */

.bg-intake__field { display: block; margin: 0.2rem 0 0.9rem; }

.bg-intake__field > span,
.bg-intake__field > label {
  display: block;
  color: var(--bg-intake-muted);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.bg-intake__input,
.bg-intake__search {
  width: 100%;
  min-height: 48px;
  margin: 0.3rem 0 0;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--bg-intake-line);
  border-radius: 0;
  color: var(--bg-intake-ink);
  font-size: 1.15rem;
  padding: 0.6rem 0;
  transition: border-color 160ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.bg-intake__input::placeholder,
.bg-intake__search::placeholder { color: color-mix(in srgb, var(--bg-intake-muted) 70%, transparent); }

.bg-intake__input:focus,
.bg-intake__search:focus { border-bottom-color: var(--bg-intake-accent); outline: none; }

.bg-intake__row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
}

.bg-intake__row .bg-intake__input,
.bg-intake__row .bg-intake__search { flex: 1; min-width: 0; }

.bg-intake__row .bg-intake__nav { margin-bottom: 2px; flex: 0 0 auto; }

.bg-intake__search { margin-bottom: 0.7rem; }

.bg-intake__suggest {
  list-style: none;
  margin: 0.35rem 0 0.2rem;
  padding: 0;
  border: 1px solid var(--bg-intake-line);
  border-radius: 12px;
  overflow: hidden;
  background: color-mix(in srgb, var(--bg-intake-field) 70%, transparent);
}

.bg-intake__suggest li {
  padding: 0.62rem 0.8rem;
  min-height: 44px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
}

.bg-intake__suggest li[aria-selected="true"],
.bg-intake__suggest li:hover { background: color-mix(in srgb, var(--bg-intake-accent) 16%, transparent); }

.bg-intake__suggest small { color: var(--bg-intake-muted); }

.bg-intake__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.45rem 0 0.2rem;
}

.bg-intake__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  min-height: 36px;
  border: 1px solid var(--bg-intake-line-strong);
  border-radius: 999px;
  padding: 0.3rem 0.35rem 0.3rem 0.75rem;
  background: color-mix(in srgb, var(--bg-intake-accent) 12%, transparent);
  font-size: 0.86rem;
}

.bg-intake__badge small { color: var(--bg-intake-muted); }
.bg-intake__badge--idea { border-style: dashed; }
.bg-intake__badge--available { border-color: var(--bg-intake-ok); }
.bg-intake__badge--registered { border-color: var(--bg-intake-error); }
.bg-intake__badge--unknown,
.bg-intake__badge--unchecked { border-style: dashed; }

.bg-intake__badge-x {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  min-width: 32px;
  min-height: 32px;
  border-radius: 50%;
  line-height: 1;
  font-size: 1.05rem;
}

.bg-intake__badge-x:hover { background: color-mix(in srgb, var(--bg-intake-ink) 10%, transparent); }

/* Range (articles) */
.bg-intake__scale {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.8rem;
  color: var(--bg-intake-muted);
  font-size: 0.82rem;
}

.bg-intake__range-out {
  color: var(--bg-intake-ink);
  font-weight: 560;
  font-size: 1rem;
  text-align: center;
}

.bg-intake__range {
  width: 100%;
  margin: 0.9rem 0 1rem;
  accent-color: var(--bg-intake-accent);
  min-height: 44px;
  cursor: pointer;
}

.bg-intake__ticks .bg-intake__choice { min-height: 44px; }

/* Color picker */
.bg-intake__picker {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin: 0.4rem 0 1rem;
}

.bg-intake__color {
  width: 64px;
  height: 48px;
  border: 1px solid var(--bg-intake-line);
  border-radius: 12px;
  background: transparent;
  padding: 2px;
  cursor: pointer;
}

.bg-intake__scheme-name { display: block; font-weight: 560; }

/* --------------------------------------------------------------------------
 * Price, footer, review
 * ------------------------------------------------------------------------ */

.bg-intake__err {
  color: var(--bg-intake-error);
  min-height: 1.3em;
  margin: 0.5rem 0 0;
  font-size: 0.92rem;
}

.bg-intake__price {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  margin-top: 0.6rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--bg-intake-line);
}

.bg-intake__price span {
  display: block;
  color: var(--bg-intake-muted);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bg-intake__num {
  display: block;
  font-family: var(--bg-intake-display);
  font-size: 1.75rem;
  font-weight: 560;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  transition: color 300ms ease;
}

.bg-intake__waived {
  display: block;
  color: var(--bg-intake-muted);
  font-size: 0.78rem;
  margin-top: 0.1rem;
}

.bg-intake__waived:empty { display: none; }

.bg-intake[data-ownership="loyalty"] .bg-intake__num:first-of-type { color: var(--bg-intake-accent); }

.bg-intake__foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.8rem;
  margin-top: 1.2rem;
}

.bg-intake__actions { display: flex; gap: 0.6rem; align-items: center; }

.bg-intake__count {
  letter-spacing: 0.16em;
  font-size: 0.78rem;
  color: var(--bg-intake-muted);
  font-variant-numeric: tabular-nums;
}

.bg-intake__nav,
.bg-intake__go,
.bg-intake__edit {
  min-height: 48px;
  cursor: pointer;
  border-radius: 999px;
  border: 1px solid var(--bg-intake-line-strong);
  background: transparent;
  color: var(--bg-intake-ink);
  padding: 0.7rem 1.15rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  transition: transform 140ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
  white-space: nowrap;
}

.bg-intake__nav:hover,
.bg-intake__edit:hover { border-color: var(--bg-intake-ink); }

.bg-intake__go {
  background: var(--bg-intake-accent);
  color: var(--bg-intake-on-accent);
  border-color: var(--bg-intake-accent);
  font-weight: 560;
}

.bg-intake__go:hover { transform: translateY(-1px); }
.bg-intake__go:active { transform: translateY(0); }

.bg-intake button:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.bg-intake__fine {
  margin: 1rem 0 0;
  color: var(--bg-intake-muted);
  font-size: 0.78rem;
  line-height: 1.5;
}

.bg-intake__review {
  display: grid;
  gap: 0;
  margin: 0 0 0.9rem;
}

.bg-intake__review > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--bg-intake-line);
  padding: 0.5rem 0;
}

.bg-intake__review dt { color: var(--bg-intake-muted); margin: 0; flex: 0 0 auto; }
.bg-intake__review dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }

.bg-intake__basics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0 0 0.6rem;
}

.bg-intake__basics-label {
  color: var(--bg-intake-muted);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-right: 0.2rem;
}

.bg-intake__chip {
  border: 1px solid var(--bg-intake-line);
  border-radius: 999px;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  color: var(--bg-intake-muted);
}

.bg-intake__included,
.bg-intake__position {
  color: var(--bg-intake-muted);
  font-size: 0.86rem;
  margin: 0.4rem 0 0.8rem;
}

.bg-intake__position {
  font-family: var(--bg-intake-display);
  font-size: 1.05rem;
  color: var(--bg-intake-ink);
  border-left: 2px solid var(--bg-intake-accent);
  padding-left: 0.8rem;
}

.bg-intake__receipt {
  margin-top: 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--bg-intake-line-strong);
  border-radius: var(--bg-intake-radius-sm);
  display: grid;
  gap: 0.5rem;
  background: color-mix(in srgb, var(--bg-intake-accent) 8%, transparent);
}

.bg-intake__receipt-label {
  color: var(--bg-intake-muted);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.bg-intake__receipt code {
  font: 0.78rem/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow-wrap: anywhere;
  color: var(--bg-intake-ink);
  background: transparent;
  padding: 0;
}

.bg-intake__cart-link { justify-self: start; }

/* Growing / grown states */
.bg-intake--growing .bg-intake__card {
  border-color: var(--bg-intake-accent);
  background-image: linear-gradient(110deg, transparent 35%, color-mix(in srgb, var(--bg-intake-accent) 10%, transparent) 50%, transparent 65%);
  background-size: 250% 100%;
  animation: bg-intake-shimmer 1.6s linear infinite;
}

.bg-intake--grown .bg-intake__grow { background: var(--bg-intake-ok); border-color: var(--bg-intake-ok); color: #0b1a12; }

/* --------------------------------------------------------------------------
 * Fallback form (visible when JS never boots, or when it fails)
 * ------------------------------------------------------------------------ */

.bg-intake__fallback {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  margin: 0;
  background: var(--bg-intake-card);
  border: 1px solid var(--bg-intake-line);
  border-radius: var(--bg-intake-radius);
  padding: 0 clamp(1.1rem, 3cqw, 2rem);
  transition: opacity 300ms ease;
}

.bg-intake--booting .bg-intake__fallback { animation: bg-intake-reveal 0s linear 2.5s forwards; }

.bg-intake--failed .bg-intake__fallback {
  opacity: 1;
  max-height: none;
  pointer-events: auto;
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
  animation: none;
}

.bg-intake--ready .bg-intake__fallback { display: none; }

@keyframes bg-intake-reveal {
  to { opacity: 1; max-height: 5000px; pointer-events: auto; padding-top: 1.25rem; padding-bottom: 1.25rem; }
}

.bg-intake__f-kicker {
  margin: 0 0 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 0.72rem;
  color: var(--bg-intake-muted);
}

.bg-intake__f-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem 1rem;
}

.bg-intake__f-wide { grid-column: 1 / -1; }

.bg-intake__f-field span {
  display: block;
  color: var(--bg-intake-muted);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.bg-intake__f-field input,
.bg-intake__f-field select {
  width: 100%;
  min-height: 44px;
  background: transparent;
  border: 1px solid var(--bg-intake-line);
  border-radius: 10px;
  color: var(--bg-intake-ink);
  padding: 0.5rem 0.7rem;
}

.bg-intake__f-field select option { color: #101416; }

.bg-intake__f-fine { color: var(--bg-intake-muted); font-size: 0.8rem; margin: 0.9rem 0; }

.bg-intake__f-submit {
  min-height: 48px;
  border-radius: 999px;
  border: 1px solid var(--bg-intake-accent);
  background: var(--bg-intake-accent);
  color: var(--bg-intake-on-accent);
  padding: 0.7rem 1.3rem;
  font-weight: 560;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
 * Responsive: container queries first, media queries as the fallback
 * ------------------------------------------------------------------------ */

@container (max-width: 820px) {
  .bg-intake__choices--4,
  .bg-intake__choices--5,
  .bg-intake__schemes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bg-intake__demos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@container (max-width: 600px) {
  .bg-intake__choices,
  .bg-intake__choices--3,
  .bg-intake__choices--4,
  .bg-intake__choices--5,
  .bg-intake__schemes,
  .bg-intake__demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-intake__card { border-radius: 20px; }
  .bg-intake__foot { flex-wrap: wrap; }
  .bg-intake__actions { width: 100%; order: 3; justify-content: stretch; }
  .bg-intake__actions > * { flex: 1; }
  .bg-intake__review > div { flex-direction: column; gap: 0.1rem; }
  .bg-intake__review dd { text-align: left; }
  .bg-intake__f-grid { grid-template-columns: 1fr; }
  .bg-intake__demos { max-height: 50vh; }
}

@container (max-width: 380px) {
  .bg-intake__choices,
  .bg-intake__choices--3,
  .bg-intake__choices--4,
  .bg-intake__choices--5,
  .bg-intake__ticks { grid-template-columns: 1fr; }
  .bg-intake__schemes,
  .bg-intake__demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bg-intake__card { padding: 1rem 0.9rem; border-radius: 16px; }
  .bg-intake__row { flex-wrap: wrap; }
  .bg-intake__row .bg-intake__nav { width: 100%; }
  .bg-intake__price { gap: 0.5rem 1rem; }
  .bg-intake__num { font-size: 1.5rem; }
}

/* Fallback for browsers without container queries: the same breakpoints on the viewport. */
@supports not (container-type: inline-size) {
  @media (max-width: 820px) {
    .bg-intake__choices--4,
    .bg-intake__choices--5,
    .bg-intake__schemes,
    .bg-intake__demos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  @media (max-width: 600px) {
    .bg-intake__choices,
    .bg-intake__choices--3,
    .bg-intake__choices--4,
    .bg-intake__choices--5,
    .bg-intake__schemes,
    .bg-intake__demos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bg-intake__foot { flex-wrap: wrap; }
    .bg-intake__actions { width: 100%; order: 3; }
    .bg-intake__actions > * { flex: 1; }
    .bg-intake__review > div { flex-direction: column; gap: 0.1rem; }
    .bg-intake__review dd { text-align: left; }
    .bg-intake__f-grid { grid-template-columns: 1fr; }
  }

  @media (max-width: 380px) {
    .bg-intake__choices,
    .bg-intake__choices--3,
    .bg-intake__choices--4,
    .bg-intake__choices--5,
    .bg-intake__ticks { grid-template-columns: 1fr; }
    .bg-intake__card { padding: 1rem 0.9rem; border-radius: 16px; }
  }
}

/* --------------------------------------------------------------------------
 * Motion and print
 * ------------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .bg-intake *,
  .bg-intake *::before,
  .bg-intake *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  /* The fallback reveal is a timer, not motion: keep it. */
  .bg-intake--booting .bg-intake__fallback { animation: bg-intake-reveal 0s linear 2.5s forwards !important; animation-iteration-count: 1 !important; }
  .bg-intake__choice[aria-pressed="true"] .bg-intake__emoji { animation: none !important; }
  .bg-intake__progress i { animation: none !important; }
}

@media print {
  .bg-intake__card { box-shadow: none; border-color: #999; }
  .bg-intake__foot, .bg-intake__progress { display: none; }
}