/* ==========================================================================
   Candor Digital Group — Package Builder & Client Portal (/build)
   ========================================================================== */

/* ---- Header extensions (mode switch + bag trigger) ------------------------ */
.build-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-block-size: var(--header-h);
  padding-block: var(--space-xs);
  flex-wrap: wrap;
}

.mode-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0.25rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}

.mode-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-block-size: 2.35rem;
  padding: 0.4rem 0.95rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.mode-switch__btn:hover { color: var(--ink); }
.mode-switch__btn[aria-pressed="true"] {
  background: var(--raised);
  color: var(--ink);
  box-shadow: 0 1px 3px rgb(13 18 32 / 0.1);
}

.status-dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--success);
  flex: none;
}

.bag-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-block-size: 2.75rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.bag-btn:hover { border-color: var(--ink); background: var(--raised); }
.bag-btn svg { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }

.bag-btn__count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 1.45rem;
  block-size: 1.45rem;
  padding-inline: 0.35rem;
  border-radius: var(--radius-pill);
  background: var(--cta-bg);
  color: var(--cta-fg);
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 38rem) {
  .mode-switch {
    order: 3;
    inline-size: 100%;
    justify-content: stretch;
  }
  .mode-switch__btn { flex: 1; justify-content: center; }
  .bag-btn__label {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---- Builder Hero --------------------------------------------------------- */
.build-hero {
  padding-block: clamp(2.5rem, 1.5rem + 3.5vw, 4.5rem) var(--space-xl);
  border-block-end: 1px solid var(--line);
}
.build-hero__inner {
  display: grid;
  gap: var(--space-m);
  justify-items: start;
}
.build-hero h1 {
  font-size: var(--step-4);
  max-inline-size: 46rem;
}

/* ---- Two-column split configurator ---------------------------------------- */
.build-main {
  padding-block: var(--space-2xl) calc(var(--space-section) + 4rem);
}
@media (min-width: 62rem) {
  .build-main { padding-block-end: var(--space-section); }
}

.configurator {
  display: grid;
  gap: var(--space-3xl);
  align-items: start;
}
@media (min-width: 62rem) {
  .configurator {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: clamp(2.5rem, 2vw + 1.5rem, 4rem);
  }
}

.config-steps {
  display: grid;
  gap: var(--space-3xl);
}

.config-step {
  display: grid;
  gap: var(--space-l);
}
.config-step + .config-step {
  padding-block-start: var(--space-2xl);
  border-block-start: 1px solid var(--line);
}

.config-step__head {
  display: grid;
  gap: var(--space-2xs);
}
.config-step__kicker {
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.config-step__head h2 {
  font-size: var(--step-2);
  line-height: 1.25;
}
.config-step__sub {
  font-weight: 380;
  color: var(--muted);
}

/* ---- Well panels (Domain input & Business stage) -------------------------- */
.config-well {
  display: grid;
  gap: var(--space-s);
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
}

.config-well__label {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.domain-field {
  position: relative;
  display: flex;
  align-items: center;
}
.domain-field__prefix {
  position: absolute;
  inset-inline-start: 0.95rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  pointer-events: none;
  user-select: none;
}
.domain-field input {
  inline-size: 100%;
  min-block-size: 3rem;
  padding: 0.7rem 1rem 0.7rem 4.65rem;
  font-size: 1rem; /* ≥16px prevents iOS zoom */
  font-weight: 500;
  background: var(--raised);
  border: 1px solid color-mix(in oklab, var(--ink) 20%, var(--line));
  border-radius: var(--radius-s);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.domain-field input::placeholder { color: color-mix(in oklab, var(--muted) 72%, transparent); font-weight: 400; }
.domain-field input:hover { border-color: color-mix(in oklab, var(--ink) 45%, var(--line)); }
.domain-field input:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 45%, transparent);
}

.stage-grid {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}
.stage-btn {
  display: grid;
  gap: 0.2rem;
  text-align: start;
  min-block-size: 3.5rem;
  padding: 0.85rem 1rem;
  background: var(--raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-s);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.stage-btn:hover { border-color: color-mix(in oklab, var(--ink) 45%, var(--line)); }
.stage-btn[aria-pressed="true"] {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.stage-btn__title { font-size: 0.9875rem; font-weight: 500; color: var(--ink); }
.stage-btn__sub { font-size: 0.875rem; color: var(--muted); }

/* ---- Product cards -------------------------------------------------------- */
.pcard-grid {
  display: grid;
  gap: var(--space-m);
}

.pcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--raised);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  transition:
    border-color var(--dur-fast) ease,
    box-shadow var(--dur-fast) ease,
    background-color var(--dur-fast) ease;
}
.pcard:hover {
  border-color: color-mix(in oklab, var(--ink) 38%, var(--line));
}
.pcard.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 10px 24px -14px rgb(13 18 32 / 0.22);
}
.pcard.is-bundled {
  border-color: var(--success);
  background: color-mix(in oklab, var(--success) 5%, var(--raised));
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--success) 55%, transparent);
}

button.pcard {
  inline-size: 100%;
  padding: var(--space-l);
  text-align: start;
}

.pcard__main {
  display: block;
  inline-size: 100%;
  padding: var(--space-l);
  border: 0;
  border-radius: inherit;
  background: transparent;
  text-align: start;
}
.pcard__body {
  padding: var(--space-l);
}

.pcard__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-m);
}

.pcard__title-wrap {
  display: grid;
  gap: var(--space-2xs);
  justify-items: start;
}

.pcard__title {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.pcard__context {
  font-weight: 380;
  font-size: 0.95rem;
  color: var(--muted);
}

.pcard__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-block-start: 0.2rem;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
.badge--rec {
  background: var(--cta-bg);
  color: var(--cta-fg);
}
.badge--bundled,
.badge--success {
  background: color-mix(in oklab, var(--success) 13%, var(--raised));
  color: var(--success);
  border: 1px solid color-mix(in oklab, var(--success) 30%, transparent);
}
.badge--upgrade {
  background: color-mix(in oklab, var(--gold) 16%, var(--raised));
  color: var(--ink);
  border: 1px solid color-mix(in oklab, var(--gold) 45%, transparent);
}
.badge--muted {
  background: var(--surface);
  color: var(--muted);
  border: 1px solid var(--line);
}
.badge--danger {
  background: color-mix(in oklab, var(--danger) 12%, var(--raised));
  color: var(--danger);
  border: 1px solid color-mix(in oklab, var(--danger) 28%, transparent);
}

.pcard__price-col {
  text-align: end;
  flex: none;
}
.pcard__price {
  font-size: 1.125rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.pcard__price--included { color: var(--success); }
.pcard__price--muted { color: var(--muted); }

.pcard__renew {
  margin-block-start: 0.15rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--success);
}
.pcard__renew--muted { color: var(--muted); font-weight: 400; }
.pcard__strike {
  text-decoration: line-through;
  color: var(--muted);
  font-weight: 400;
  margin-inline-end: 0.3rem;
}

.pcard__desc {
  margin-block-start: var(--space-s);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--muted);
}

/* Quantity footer for mailbox cards */
.pcard__qty-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) var(--space-l) var(--space-m);
  border-block-start: 1px solid var(--line);
}
.pcard__qty-hint {
  font-size: 0.875rem;
  color: var(--muted);
}

.qty-stepper {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
}
.qty-btn {
  display: inline-grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--raised);
  color: var(--ink);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.qty-btn:hover { border-color: var(--ink); }
.qty-btn--add {
  background: var(--cta-bg);
  color: var(--cta-fg);
  border-color: var(--cta-bg);
}
.qty-btn--add:hover {
  background: color-mix(in oklab, var(--cta-bg) 86%, var(--ink));
}
.qty-val {
  min-inline-size: 1.75rem;
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Native <details> inside product cards & step disclosures */
.pcard__more {
  border-block-start: 1px solid var(--line);
  padding-inline: var(--space-l);
}
.pcard__more summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-block-size: 2.65rem;
  padding-block: var(--space-xs);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.pcard__more summary::-webkit-details-marker { display: none; }
.pcard__more summary:hover { color: var(--ink); }
.pcard__more summary svg {
  inline-size: 1rem;
  block-size: 1rem;
  transition: transform var(--dur-fast) var(--ease-out);
}
.pcard__more[open] summary svg { transform: rotate(180deg); }
.pcard__more-body {
  padding-block-end: var(--space-m);
}

.more-disclosure {
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  padding: 0.25rem var(--space-m);
}
.more-disclosure summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-block-size: 2.85rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
}
.more-disclosure summary::-webkit-details-marker { display: none; }
.more-disclosure summary:hover { color: var(--ink); }
.more-disclosure summary svg {
  inline-size: 1.05rem;
  block-size: 1.05rem;
  flex: none;
  transition: transform var(--dur-fast) var(--ease-out);
}
.more-disclosure[open] summary svg { transform: rotate(180deg); }
.more-disclosure[open] .pcard-grid {
  padding-block: var(--space-s) var(--space-m);
}

/* ---- Sticky right summary card -------------------------------------------- */
@media (min-width: 62rem) {
  .summary-rail {
    position: sticky;
    inset-block-start: calc(var(--header-h) + var(--space-l));
  }
}

.summary-card {
  display: grid;
  gap: var(--space-l);
  padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}

.summary-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
}
.summary-card__eyebrow {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.link-btn {
  min-block-size: 2.25rem;
  padding: 0.25rem 0.6rem;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--muted);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.link-btn:hover { color: var(--ink); text-decoration-color: var(--gold); }

.summary-card__hero {
  display: grid;
  gap: var(--space-s);
  padding-block-end: var(--space-l);
  border-block-end: 1px solid var(--line);
}
.summary-card__icon {
  display: grid;
  place-items: center;
  inline-size: 2.85rem;
  block-size: 2.85rem;
  border-radius: var(--radius-m);
  background: var(--navy-700);
  color: var(--gold-400);
}
.summary-card__icon svg { inline-size: 1.45rem; block-size: 1.45rem; }
.summary-card__hero h2 { font-size: var(--step-2); }

.domain-pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  justify-self: start;
  padding: 0.4rem 0.75rem;
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 0.875rem;
}
.domain-pill__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--gold);
}
.domain-pill__name { font-weight: 500; word-break: break-all; }
.domain-pill__tag {
  padding: 0.12rem 0.5rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cart-list {
  display: grid;
  max-block-size: 21rem;
  overflow-y: auto;
  border-block-end: 1px solid var(--line);
  padding-block-end: var(--space-s);
}
.cart-empty {
  padding-block: var(--space-l);
  text-align: center;
  font-size: 0.9375rem;
  color: var(--muted);
}

.cart-item {
  padding-block: var(--space-s);
}
.cart-item + .cart-item {
  border-block-start: 1px solid var(--line);
}
.cart-item__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
}
.cart-item__name {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
}
.cart-item__note {
  display: block;
  margin-block-start: 0.15rem;
  font-size: 0.8125rem;
  color: var(--success);
}
.cart-item__right {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex: none;
}
.cart-item__price {
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.item-remove {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.item-remove:hover {
  background: color-mix(in oklab, var(--danger) 12%, transparent);
  color: var(--danger);
}
.item-remove svg { inline-size: 0.95rem; block-size: 0.95rem; }

.cart-bundles {
  display: grid;
  gap: 0.25rem;
  margin-block-start: var(--space-xs);
  padding-inline-start: var(--space-s);
  border-inline-start: 2px solid color-mix(in oklab, var(--success) 45%, transparent);
}
.cart-bundles__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: 0.8125rem;
  color: var(--success);
}
.cart-bundles__free { font-weight: 600; }

.summary-totals {
  display: grid;
  gap: var(--space-xs);
}
.summary-totals__due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  margin-block-end: var(--space-2xs);
}
.summary-totals__due-label { font-size: 0.9375rem; color: var(--muted); }
.summary-totals__due-val {
  font-size: var(--step-3);
  font-weight: 600;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.summary-totals__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: 0.875rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.summary-totals__val { font-weight: 500; color: var(--ink); }
.summary-totals__val--y2 { font-weight: 500; color: var(--success); }

.summary-card__cta { inline-size: 100%; }
.summary-card__cta:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ---- Mobile sticky bottom bar --------------------------------------------- */
.mobile-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 35;
  padding: var(--space-s) var(--page-gutter);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-block-start: 1px solid var(--line);
}
.mobile-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
}
.mobile-bar__label {
  display: block;
  font-size: 0.78rem;
  color: var(--muted);
}
.mobile-bar__amount {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
@media (min-width: 62rem) {
  .mobile-bar { display: none; }
}

/* ---- Client Portal View --------------------------------------------------- */
.portal-view {
  padding-block-end: var(--space-section);
}

.portal-hero {
  padding-block: var(--space-2xl);
  background: var(--surface);
  border-block-end: 1px solid var(--line);
}
.portal-hero__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-l);
}
.portal-hero__id {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.portal-hero h1 {
  font-size: var(--step-3);
  margin-block: 0.2rem;
}
.portal-hero__contact {
  font-size: 0.9375rem;
  color: var(--muted);
}
.portal-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
}
.portal-stat__label {
  display: block;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.portal-stat__val {
  font-size: 1.25rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.portal-stat__val--card {
  font-size: 0.9875rem;
  color: var(--success);
}

.portal-body {
  padding-block-start: var(--space-xl);
  display: grid;
  gap: var(--space-xl);
}

.portal-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.3rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  justify-self: start;
}
.portal-tab {
  min-block-size: 2.6rem;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--muted);
  font-size: 0.9375rem;
  font-weight: 500;
  transition: background-color var(--dur-fast) ease, color var(--dur-fast) ease;
}
.portal-tab:hover { color: var(--ink); }
.portal-tab[aria-selected="true"] {
  background: var(--cta-bg);
  color: var(--cta-fg);
}

.portal-grid {
  display: grid;
  gap: var(--space-l);
}
@media (min-width: 56rem) {
  .portal-grid--split { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .portal-grid--halves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.portal-card {
  display: grid;
  gap: var(--space-m);
  align-content: start;
  padding: clamp(1.35rem, 1rem + 1.2vw, 2rem);
  background: var(--raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
}
.portal-card--between { align-content: space-between; }

.portal-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-end: var(--space-m);
  border-block-end: 1px solid var(--line);
}
.portal-card h2,
.portal-card h3 {
  font-size: 1.1875rem;
}
.portal-card__note {
  font-size: 0.875rem;
  color: var(--muted);
}

/* Subscriptions list */
.sub-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-m);
}
.sub-row + .sub-row { border-block-start: 1px solid var(--line); }
.sub-row__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 500;
}
.sub-row__meta { font-size: 0.875rem; color: var(--muted); margin-block-start: 0.15rem; }
.sub-row__right {
  display: flex;
  align-items: center;
  gap: var(--space-m);
}
.sub-row__price { text-align: end; font-weight: 600; font-variant-numeric: tabular-nums; }
.sub-row__y2 { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--success); }

.danger-link {
  min-block-size: 2.5rem;
  padding: 0.4rem 0.75rem;
  border: 1px solid color-mix(in oklab, var(--danger) 30%, var(--line));
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--danger);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color var(--dur-fast) ease, border-color var(--dur-fast) ease;
}
.danger-link:hover {
  background: color-mix(in oklab, var(--danger) 10%, transparent);
  border-color: var(--danger);
}

/* 5-step journey */
.journey-steps {
  display: grid;
  gap: var(--space-s);
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
}
.journey-step {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 1rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  background: var(--surface);
  color: var(--muted);
  text-align: start;
  transition: border-color var(--dur-fast) ease, background-color var(--dur-fast) ease;
}
.journey-step:hover { border-color: color-mix(in oklab, var(--ink) 40%, var(--line)); color: var(--ink); }
.journey-step.is-done {
  background: color-mix(in oklab, var(--success) 9%, var(--raised));
  border-color: color-mix(in oklab, var(--success) 38%, var(--line));
  color: var(--ink);
}
.journey-step[aria-current="step"] {
  background: var(--cta-bg);
  border-color: var(--cta-bg);
  color: var(--cta-fg);
}
.journey-step__num {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.8;
}
.journey-step__title { font-size: 0.95rem; font-weight: 500; }

.journey-detail {
  padding: var(--space-m);
  background: var(--surface);
  border-radius: var(--radius-m);
  font-size: 0.9375rem;
}
.journey-detail strong { display: block; margin-block-end: var(--space-xs); font-weight: 500; }
.journey-detail ul { padding-inline-start: 1.2rem; color: var(--muted); display: grid; gap: 0.25rem; }

/* Onboarding checklist */
.progress-track {
  inline-size: 100%;
  block-size: 0.45rem;
  background: var(--surface);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.progress-fill {
  block-size: 100%;
  background: var(--gold);
  border-radius: inherit;
  transition: inline-size var(--dur-base) var(--ease-out);
}

.checklist { display: grid; gap: var(--space-xs); }
.checklist__item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-block-size: 2.85rem;
  padding: 0.55rem 0.85rem;
  background: var(--surface);
  border: 1px solid transparent;
  border-radius: var(--radius-s);
  font-size: 0.9375rem;
  cursor: pointer;
  transition: border-color var(--dur-fast) ease;
}
.checklist__item:hover { border-color: var(--line); }
.checklist__item input { inline-size: 1.1rem; block-size: 1.1rem; flex: none; }
.checklist__item.is-done span { text-decoration: line-through; color: var(--muted); }

.rounds-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-s);
  margin-block-start: var(--space-s);
}
.round-box {
  padding: var(--space-m);
  background: var(--surface);
  border-radius: var(--radius-m);
  font-size: 0.875rem;
}
.round-box span { display: block; color: var(--muted); }
.round-box strong { font-weight: 500; }

.launch-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--line);
}

/* Billing card preview & records */
.saved-card {
  color-scheme: dark;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-l);
  background: var(--navy-700);
  color: var(--stone-ink);
  border-radius: var(--radius-m);
}
.saved-card__brand { font-size: 1.0625rem; font-weight: 500; }
.saved-card__meta { font-size: 0.875rem; color: var(--slate-300); margin-block-start: 0.15rem; }

.record-list { display: grid; gap: var(--space-s); }
.record-item {
  display: grid;
  gap: 0.25rem;
  padding: var(--space-m);
  background: var(--surface);
  border-radius: var(--radius-m);
  font-size: 0.875rem;
}
.record-item__top {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  font-weight: 500;
}
.record-item__date { color: var(--muted); font-weight: 400; }
.record-item__desc { color: var(--muted); }
.record-item__sig { font-size: 0.8125rem; color: var(--muted); }
.record-item__sig strong { font-family: var(--font-accent); font-style: italic; color: var(--ink); }

/* ---- Shared form controls inside /build & dialogs ------------------------- */
.bform { display: grid; gap: var(--space-m); }
.bform__row {
  display: grid;
  gap: var(--space-s);
}
@media (min-width: 34rem) {
  .bform__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bform__row--card { grid-template-columns: 2fr 1fr 1fr; }
  .bform__row--sig { grid-template-columns: 2fr 1fr; }
}

.bfield {
  display: grid;
  gap: 0.3rem;
  min-inline-size: 0;
}
.bfield > label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
}
.bfield input,
.bfield select,
.bfield textarea {
  inline-size: 100%;
  min-block-size: 2.9rem;
  padding: 0.65rem 0.9rem;
  font-size: 1rem; /* ≥16px prevents iOS zoom */
  background: var(--bg);
  border: 1px solid color-mix(in oklab, var(--ink) 22%, var(--line));
  border-radius: var(--radius-s);
  transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease;
}
.bfield textarea { resize: vertical; min-block-size: 6rem; line-height: 1.5; }
.bfield input[readonly] {
  background: var(--surface);
  color: var(--muted);
}
.bfield .sig-input {
  font-family: var(--font-accent);
  font-style: italic;
}
.bfield input:hover:not([readonly]),
.bfield select:hover,
.bfield textarea:hover {
  border-color: color-mix(in oklab, var(--ink) 45%, var(--line));
}
.bfield input:focus-visible,
.bfield select:focus-visible,
.bfield textarea:focus-visible {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--gold) 45%, transparent);
}

@media (pointer: coarse) {
  .bfield input,
  .bfield select { min-block-size: 3.15rem; }
}

.bfield__error {
  display: none;
  font-size: 0.8125rem;
  color: var(--danger);
}
.bfield input:user-invalid,
.bfield textarea:user-invalid,
.bform.is-submitted .bfield input:invalid,
.bform.is-submitted .bfield textarea:invalid {
  border-color: var(--danger);
  background: color-mix(in oklab, var(--danger) 6%, var(--bg));
}
.bfield input:user-invalid ~ .bfield__error,
.bfield textarea:user-invalid ~ .bfield__error,
.bform.is-submitted .bfield input:invalid ~ .bfield__error,
.bform.is-submitted .bfield textarea:invalid ~ .bfield__error {
  display: block;
}

.terms-check {
  display: grid;
  gap: 0.35rem;
}
.terms-check__label {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  padding: var(--space-m);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-m);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--muted);
  cursor: pointer;
}
.terms-check__label strong { color: var(--ink); font-weight: 500; }
.terms-check__label input {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  margin-block-start: 0.15rem;
  flex: none;
}
.terms-check:has(input:user-invalid) .terms-check__label,
.bform.is-submitted .terms-check:has(input:invalid) .terms-check__label {
  border-color: var(--danger);
  background: color-mix(in oklab, var(--danger) 6%, var(--surface));
}
.terms-check:has(input:user-invalid) .bfield__error,
.bform.is-submitted .terms-check:has(input:invalid) .bfield__error {
  display: block;
}

/* ---- Native <dialog> modals (scroll containment + top-layer transitions) -- */
dialog:modal {
  overscroll-behavior: contain;
}
dialog::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
}

.modal {
  inline-size: min(calc(100% - 2rem), var(--modal-max, 36rem));
  max-block-size: min(88svh, 52rem);
  margin: auto;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-l);
  background: var(--raised);
  color: var(--ink);
  box-shadow: 0 28px 64px -20px rgb(13 18 32 / 0.42);
  overflow: hidden;

  /* Closed / exit state for top-layer transitions */
  opacity: 0;
  transform: translateY(10px) scale(0.98);
  transition-property: opacity, transform, display, overlay;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-out);
  transition-behavior: allow-discrete;
}
.modal--sm { --modal-max: 28rem; }
.modal--md { --modal-max: 40rem; }
.modal--lg { --modal-max: 36rem; }

.modal::backdrop {
  background-color: rgb(13 18 32 / 0);
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  transition-property: background-color, backdrop-filter, -webkit-backdrop-filter, display, overlay;
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-out);
  transition-behavior: allow-discrete;
}

:is(.modal[open]):where(:not([data-closing])) {
  opacity: 1;
  transform: translateY(0) scale(1);

  @starting-style {
    opacity: 0;
    transform: translateY(10px) scale(0.98);
  }

  &::backdrop {
    background-color: rgb(13 18 32 / 0.52);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);

    @starting-style {
      background-color: rgb(13 18 32 / 0);
      backdrop-filter: blur(0px);
      -webkit-backdrop-filter: blur(0px);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .modal {
    transform: none;
    transition-duration: 0.1s;
  }
  @starting-style {
    :is(.modal[open]):where(:not([data-closing])) {
      transform: none;
    }
  }
}

.modal__shell {
  display: flex;
  flex-direction: column;
  max-block-size: min(88svh, 52rem);
}
.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: var(--space-m) var(--space-l);
  border-block-end: 1px solid var(--line);
  flex: none;
}
.modal__head h2 {
  font-size: 1.25rem;
}
.modal__body {
  display: grid;
  gap: var(--space-l);
  padding: var(--space-l);
  overflow-y: auto;
}

.modal-domain-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: 0.65rem 0.9rem;
  background: var(--surface);
  border-radius: var(--radius-s);
  font-size: 0.875rem;
}

.modal-totals {
  display: grid;
  gap: 0.4rem;
  padding: var(--space-m);
  background: var(--surface);
  border-radius: var(--radius-m);
  font-size: 0.875rem;
}
.modal-totals__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.modal-totals__due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-s);
  padding-block-start: var(--space-xs);
  margin-block-start: 0.2rem;
  border-block-start: 1px solid var(--line);
  font-weight: 600;
}
.modal-totals__due-val {
  font-size: 1.375rem;
  font-variant-numeric: tabular-nums;
}

.terms-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  font-size: 0.875rem;
}

.cancel-warning {
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background: color-mix(in oklab, var(--danger) 10%, var(--surface));
  border: 1px solid color-mix(in oklab, var(--danger) 28%, transparent);
  color: var(--ink);
  font-size: 0.9375rem;
}
.modal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-s);
}
.btn--danger {
  --btn-bg: var(--danger);
  --btn-fg: #ffffff;
  --btn-border: var(--danger);
}
@media (prefers-color-scheme: dark) {
  :root:not(:has(> head > meta[name="color-scheme"][content="light"])) .btn--danger {
    --btn-fg: var(--navy-950);
  }
}
:root:has(> head > meta[name="color-scheme"][content="dark"]) .btn--danger {
  --btn-fg: var(--navy-950);
}

.terms-copy {
  display: grid;
  gap: var(--space-m);
  font-size: 0.9375rem;
  color: var(--muted);
}
.terms-copy strong { color: var(--ink); font-weight: 500; }

/* ---- Toast status --------------------------------------------------------- */
.toast {
  position: fixed;
  inset-inline-end: var(--page-gutter);
  inset-block-end: 5.5rem;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-inline-size: min(26rem, calc(100vw - 2 * var(--page-gutter)));
  padding: 0.75rem 1.1rem;
  border-radius: var(--radius-pill);
  background: var(--navy-700);
  color: var(--stone-ink);
  border: 1px solid var(--navy-line);
  box-shadow: 0 14px 32px -10px rgb(13 18 32 / 0.45);
  font-size: 0.875rem;
  font-weight: 500;
}
@media (min-width: 62rem) {
  .toast { inset-block-end: 1.75rem; }
}
.toast__dot {
  inline-size: 0.5rem;
  block-size: 0.5rem;
  border-radius: 50%;
  background: var(--gold-400);
  flex: none;
}

.footer-link-btn {
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-decoration: none;
}
.footer-link-btn:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}