/**
 * NFC platform UI — forms, dashboard, progress, redirect interstitial.
 * Uses design-system tokens only. No marketing redesign.
 */

.site-shell--platform .site-header {
  border-bottom: 1px solid var(--color-border-subtle);
}

.site-shell--platform .site-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  list-style: none;
  margin: 0;
  padding: 0;
}

.platform-page {
  padding-block: var(--space-10) var(--space-16);
}

.platform-page__inner {
  max-width: 36rem;
  margin-inline: auto;
}

/* Wide pages (Manage Card dashboard + TE editor) use a generous canvas so the
   two-column editor can show the form AND a large live preview side-by-side. */
.platform-page__inner--wide {
  max-width: 80rem;
}

/* Premium activation — step indicators */
.platform-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.platform-steps__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-white, #fff);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.platform-steps__item span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.platform-steps__item.is-active {
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}

.platform-steps__item.is-active span {
  background: var(--color-primary);
  color: var(--color-on-primary);
}

/* Completed step — the step before the current one (e.g. "Verify email" after
   the OTP succeeds). Distinct from the active step so the customer sees the
   progression: ✓ 1 Verify email → ● 2 Create a PIN → ○ 3 You're live. */
.platform-steps__item.is-done {
  color: var(--color-text-secondary);
  border-color: var(--color-border-subtle);
}

.platform-steps__item.is-done span {
  background: var(--color-primary);
  color: var(--color-on-primary);
  opacity: 0.85;
}

/* Compact side-by-side fields */
.platform-grid {
  display: grid;
  gap: var(--space-4);
}

.platform-grid--2 {
  grid-template-columns: 1fr;
}

@media (min-width: 480px) {
  .platform-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Email/OTP gate (activation, step 1). Dedicated grid layout — the OTP input
   and "Send code" sit in one row, and the "Verify" action sits on its own row
   below so nothing overlaps. After verification the step collapses to a
   compact read-only "Verified email" summary. */
.platform-otp-gate {
  display: grid;
  gap: var(--space-4);
}

.platform-otp-gate__step {
  display: grid;
  gap: var(--space-4);
}

.platform-otp-gate__field {
  display: grid;
  gap: var(--space-2);
}

.platform-otp-gate__field label {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

/* The OTP gate fields carry raw <input> elements (not .platform-field), so
   they must opt into the same field styling the password step gets: 44px
   target, radius, border, padding, focus ring. Without this the email/OTP
   inputs render as unstyled browser widgets. */
.platform-otp-gate__field input {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-white, #fff);
  color: var(--color-text-primary);
  font: inherit;
  box-sizing: border-box;
}

.platform-otp-gate__field input:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Primary "Send verification code →" action — full-width, prominent. */
.platform-otp-gate__send {
  display: grid;
  gap: var(--space-2);
}

.platform-otp-gate__send .btn {
  justify-content: center;
  width: 100%;
}

.platform-otp-gate__send .btn.is-loading {
  opacity: 0.75;
  cursor: progress;
}

.platform-otp-gate__send .btn.is-disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* OTP entry — revealed after the code is sent. */
.platform-otp-gate__otp {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-bg-subtle, rgba(30, 58, 47, 0.04));
}

.platform-otp-gate__otp input {
  letter-spacing: 0.35em;
  font-size: 1.05rem;
  text-align: center;
}

.platform-otp-gate__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

/* Verify / Resend actions; match the 44px input/button height. */
.platform-otp-gate__actions .btn {
  height: 44px;
}

.platform-otp-gate__done {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
}

.platform-otp-gate__done-check {
  color: var(--color-success, #2f7d4f);
  font-weight: var(--font-weight-bold);
  flex: 0 0 auto;
}

.platform-otp-gate__done-email {
  display: grid;
  gap: 0.1rem;
  min-width: 0;
}

.platform-otp-gate__done-label {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.platform-otp-gate__done-value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

/* Fieldset grouping for the activation flow */
.platform-fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: var(--space-4);
}

.platform-fieldset__legend {
  margin: 0 0 var(--space-1);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Compact card banner at the top of the activation form */
.platform-inline-banner {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
}

/* Activation form — compact, balanced single card. Scoped to the activation
   page so the shared .platform-* classes keep their standard rhythm on the
   Manage Card dashboard, recovery, and own-link pages. */
.page-activate-form .platform-page {
  padding-block: var(--space-8) var(--space-12);
}

.page-activate-form .platform-page h1 {
  margin: 0 0 var(--space-2);
}

.page-activate-form .platform-lede {
  margin: 0 0 var(--space-5);
}

.page-activate-form .platform-steps {
  margin: 0 0 var(--space-5);
}

.page-activate-form .platform-form {
  gap: var(--space-4);
}

.page-activate-form .platform-card {
  padding: var(--space-5);
}

.page-activate-form .platform-fieldset {
  gap: var(--space-3);
}

/* Activation success ("You're live") — centered CTA with breathing room. */
.page-activate-success .platform-success {
  display: grid;
  justify-items: center;
  gap: var(--space-3);
  padding: var(--space-6) 0;
}

.page-activate-success .platform-success .platform-form__actions {
  justify-content: center;
  margin-top: var(--space-2);
}

.page-activate-form .platform-otp-gate,
.page-activate-form .platform-otp-gate__step,
.page-activate-form .platform-otp-gate__row {
  gap: var(--space-3);
}

.page-activate-form .platform-inline-banner {
  margin-bottom: var(--space-3);
}

/* Keep the OTP gate rows equal-width and buttons aligned to input height. */
@media (min-width: 480px) {
  .page-activate-form .platform-otp-gate__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
  }
}

.platform-inline-banner__label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.platform-inline-banner__value {
  font-weight: var(--font-weight-semibold);
}

/* Two-flow activation choice cards */
.platform-activate-choice__grid {
  margin-bottom: var(--space-4);
}

.platform-choice-card {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-white, #fff);
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.platform-choice-card:hover {
  border-color: var(--color-border-default);
}

.platform-choice-card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.platform-choice-card input {
  margin-top: 0.2rem;
  accent-color: var(--color-primary);
}

.platform-choice-card__body {
  display: grid;
  gap: var(--space-1);
}

.platform-choice-card__hint {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  line-height: 1.4;
}

/* Flow panels — only the active one is visible */
.platform-activate-panel {
  display: grid;
  gap: var(--space-4);
  margin: 0 0 var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
}

.platform-activate-panel.is-hidden {
  display: none;
}

/* Greyed-out public link (custom name locked behind upgrade) */
input[data-greyed-out] {
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-decoration-thickness: 1px;
}

.platform-tooltip {
  border-bottom: 1px dashed currentColor;
  cursor: help;
}

/* Trust / reassurance row */
.platform-trust {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-6) 0 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  list-style: none;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

/* Feature landing card */
.platform-card--feature {
  padding: var(--space-7);
}

.platform-howto--numbered {
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.platform-howto--numbered li {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
}

.platform-howto__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-caption);
}

.platform-howto__detail {
  display: block;
  margin-top: 0.125rem;
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.platform-eyebrow {
  margin: 0 0 var(--space-3);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.platform-page h1 {
  margin: 0 0 var(--space-3);
}

.platform-lede {
  margin: 0 0 var(--space-8);
  color: var(--color-text-secondary);
}

/* Manage Card home — tighter, denser header so the page reads as a control
   center rather than a long scroll (polish, not a redesign). */
.page-manage-te-home .platform-page h1 {
  margin-bottom: var(--space-1);
}

.page-manage-te-home .platform-lede {
  margin-bottom: var(--space-5);
}

.page-manage-te-home .manage-destination-choice {
  margin-top: var(--space-5);
}

.page-manage-te-home .platform-dashboard {
  margin-top: var(--space-5);
}

.page-manage-te-home .manage-te-hero {
  padding: var(--space-5);
}

.platform-alert {
  margin: 0 0 var(--space-6);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-default);
  background: var(--color-secondary);
  color: var(--color-text-primary);
}

.platform-alert--error {
  border-color: color-mix(in srgb, #b42318 35%, var(--color-border-default));
  background: color-mix(in srgb, #b42318 8%, var(--color-secondary));
}

.platform-alert--success {
  border-color: color-mix(in srgb, #067647 35%, var(--color-border-default));
  background: color-mix(in srgb, #067647 8%, var(--color-secondary));
}

.platform-alert__title {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-semibold);
}

.platform-alert p {
  margin: 0;
  color: var(--color-text-secondary);
}

.platform-progress {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0 0 var(--space-8);
  padding: 0;
  list-style: none;
  counter-reset: platform-step;
}

.platform-progress__step {
  position: relative;
  padding: var(--space-3);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-white, #fff);
  color: var(--color-text-tertiary);
  text-align: center;
  font-size: var(--text-caption);
  counter-increment: platform-step;
}

.platform-progress__step::before {
  content: counter(platform-step);
  display: block;
  margin-bottom: var(--space-1);
  font-weight: var(--font-weight-semibold);
  color: inherit;
}

.platform-progress__step.is-active,
.platform-progress__step.is-complete {
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
  background: var(--color-secondary);
}

.platform-progress__label {
  display: block;
}

.platform-card {
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-white, #fff);
}

.platform-card + .platform-card {
  margin-top: var(--space-5);
}

.platform-card__title {
  margin: 0 0 var(--space-4);
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
}

.platform-form {
  display: grid;
  gap: var(--space-5);
}

.platform-field {
  display: grid;
  gap: var(--space-2);
}

.platform-field label {
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.platform-field input,
.platform-field select,
.platform-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-white, #fff);
  color: var(--color-text-primary);
  font: inherit;
  box-sizing: border-box;
}

.platform-field input:focus,
.platform-field select:focus,
.platform-field textarea:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.platform-field input[readonly] {
  background: var(--color-secondary);
  color: var(--color-text-secondary);
}

.platform-field__hint {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.platform-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.platform-form__actions--center {
  justify-content: center;
  text-align: center;
}

.platform-form__actions .btn {
  width: 100%;
}

@media (min-width: 480px) {
  .platform-form__actions .btn {
    width: auto;
  }
}

.platform-meta {
  display: grid;
  gap: var(--space-3);
  margin: 0 0 var(--space-6);
  padding: 0;
  list-style: none;
}

.platform-meta__row {
  display: grid;
  gap: var(--space-1);
  padding-block: var(--space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

@media (min-width: 640px) {
  .platform-meta__row {
    grid-template-columns: 10rem 1fr;
    align-items: baseline;
    gap: var(--space-4);
  }
}

.platform-meta__label {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.02em;
}

.platform-meta__value {
  margin: 0;
  word-break: break-word;
  font-weight: var(--font-weight-medium);
}

.platform-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.platform-badge--success {
  background: color-mix(in srgb, #067647 12%, var(--color-secondary));
  color: #067647;
}

.platform-dashboard {
  display: grid;
  gap: var(--space-5);
}

/* ============================================================
   Manage Card — premium card-management experience
   Hierarchy: identity → Tap Experience → Forwarding → Activity →
   Security (rows) → Account (separated). Uses grouping, spacing and
   typography instead of equal-weight dashboard widgets.
   ============================================================ */

.manage-eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}

/* Manage home sits on the wide canvas but reads as a focused product column —
   a premium card-management experience (~960px), not a stretched admin
   dashboard and not a cramped single column. */
.manage-home {
  max-width: 60rem;
  margin-inline: auto;
}

/* --- 1. Card identity header — the customer's card, first. --- */
.manage-identity {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-8) 0 var(--space-10);
  border-bottom: 1px solid var(--color-border-subtle);
}

.manage-identity__visual {
  flex: none;
}

/* The beautiful Pufaan card visual — the customer's photo when set, else the
   default Pufaan card. Framed like a premium product, never a raw placeholder. */
.manage-card-visual {
  width: 13.5rem;
  max-width: 40vw;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  box-shadow: 0 10px 30px rgba(30, 24, 16, 0.14);
  background: var(--color-secondary);
}

.manage-card-visual__img {
  display: block;
  width: 100%;
  aspect-ratio: 8 / 5;
  object-fit: cover;
}

.manage-identity__copy {
  min-width: 0;
  display: grid;
  gap: var(--space-1);
}

.manage-identity__title {
  margin: 0;
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  /* Start at the strong display size; shrink automatically so a long name
     still fits on ONE line (never wraps, never looks awkward). clamp keeps a
     readable minimum. */
  font-size: clamp(1.125rem, 2.4vw, var(--text-h1));
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.1;
  /* Always one line — the clamp above shrinks the type; this is the fallback
     for extremely long names. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manage-identity__role {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  /* Keep role metadata on one line too. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manage-identity__meta {
  margin: var(--space-2) 0 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.manage-identity__code {
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
  letter-spacing: 0.04em;
}

.manage-identity__edit {
  display: inline-flex;
  align-items: center;
}

.manage-identity__action {
  margin-left: auto;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-3);
}

.manage-identity__action-aux {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.manage-identity__action-buttons {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: flex-end;
}

.manage-identity__signout {
  margin: 0;
}

.manage-identity__signout-btn {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.manage-identity__signout-btn:hover,
.manage-identity__signout-btn:focus-visible {
  color: var(--color-error);
}

@media (max-width: 640px) {
  .manage-identity {
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-6) 0 var(--space-8);
  }
  .manage-card-visual {
    width: 10rem;
  }
  .manage-identity__action {
    margin-left: 0;
    width: 100%;
    align-items: flex-start;
  }
  .manage-identity__action-buttons {
    justify-content: flex-start;
  }
  .manage-identity__action-buttons .btn {
    flex: 1 1 auto;
  }
}

/* --- Status pill — a polished product indicator, not a developer badge --- */
.manage-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 26px;
  padding: 0 var(--space-3);
  border-radius: var(--radius-full);
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
}

.manage-status__dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 999px;
  background: var(--color-text-tertiary);
}

.manage-status--live {
  background: color-mix(in srgb, #067647 10%, var(--color-secondary));
  color: #067647;
}
.manage-status--live .manage-status__dot {
  background: #067647;
}

.manage-status--idle .manage-status__dot {
  background: var(--color-text-tertiary);
}

.manage-status--muted {
  background: var(--color-secondary);
}

/* --- Layout: preview/security grid + full-width plan/upgrade --- */
/* The top grid shows the Tap Experience preview beside the compact Security
   controls. Your Plan and Next Step sit FULL-WIDTH below — the commercial
   hierarchy is the most prominent content and never competes with controls. */
.manage-layout {
  display: grid;
  gap: var(--space-8);
  margin-top: var(--space-10);
}

@media (min-width: 980px) {
  .manage-layout {
    /* Preview column is wider than the Security column (controls stay compact). */
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
    gap: var(--space-12);
  }
}

.manage-layout__main {
  display: grid;
  gap: var(--space-6);
  min-width: 0;
}

.manage-layout__side {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
}

/* Full-width commercial panels sit below the grid, spaced from it. */
.manage-home > .manage-panel--plan,
.manage-home > .manage-panel--upgrade,
.manage-home > .manage-panel--plus,
.manage-home > .manage-panel--shop,
.manage-home > .manage-activity {
  margin-top: var(--space-8);
}

/* Vertical rhythm: every product section after the header sits at a
   consistent, generous spacing. */
.manage-home > .manage-panel {
  margin-top: var(--space-8);
}
.manage-home > .manage-identity {
  margin-bottom: 0;
}

/* --- Panel base (subtle, not heavy boxes) --- */
.manage-panel {
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated, #ffffff);
}

.manage-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.manage-panel--primary {
  padding: var(--space-7);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 15, 15, 0.04));
}

.manage-panel--aside {
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 70%, var(--color-secondary));
}

/* --- 2. Tap Experience (actions live in the card identity header; only the
   empty-state lead line is used on the home) --- */
.manage-te__lead {
  margin: var(--space-3) 0 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.55;
  max-width: 42rem;
}

/* --- 2b. Current experience (ONE card — describes what the card does now) --- */
.manage-panel--experience {
  padding: var(--space-7);
  background: var(--color-bg-elevated, #ffffff);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 15, 15, 0.04));
}

.manage-experience {
  display: grid;
  gap: var(--space-5);
}

.manage-experience--forwarding {
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}

.manage-experience__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-primary, #1e3a2f) 8%, var(--color-bg-elevated, #fff));
  color: var(--color-primary, #1e3a2f);
}

.manage-experience__svg {
  width: 1.4rem;
  height: 1.4rem;
}

.manage-experience__copy {
  min-width: 0;
  display: grid;
  gap: 0.25rem;
}

.manage-experience__label {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.manage-experience__note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.5;
}

/* The actual destination — clean, readable, never a raw URL dump. */
.manage-experience__dest {
  margin: var(--space-1) 0 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-md, 8px);
  background: var(--color-secondary);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-small);
  word-break: break-all;
  width: fit-content;
  max-width: 100%;
}

.manage-experience__secondary {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.manage-experience__preview {
  max-width: 24rem;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
}

.manage-experience__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.manage-experience__action {
  display: flex;
  align-items: center;
}

/* --- Inline Universal Forwarding URL input (owner Manage Card) --- */
.manage-inline-forwarding {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.manage-url-input {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md, 12px);
  background: var(--color-bg-elevated, #fff);
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.manage-url-input:focus-within {
  border-color: var(--color-primary, #1e3a2f);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #1e3a2f) 18%, transparent);
}

.manage-url-input__prefix {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--space-3);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
  background: color-mix(in srgb, var(--color-secondary) 60%, #fff);
  border-right: 1px solid var(--color-border-subtle);
  white-space: nowrap;
  user-select: none;
}

.manage-url-input input {
  flex: 1 1 auto;
  min-width: 0;
  border: 0;
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-body);
  color: var(--color-text-primary);
  background: transparent;
  outline: none;
}

.manage-url-input input::placeholder {
  color: var(--color-text-tertiary);
}

@media (max-width: 480px) {
  .manage-url-input__prefix {
    padding: 0 var(--space-2);
  }
  .manage-url-input input {
    padding: var(--space-3);
  }
}

/* --- 2c. Upgrade block (Basic / Plus ladder) — restrained, not a promo wall --- */
.manage-panel--upgrade {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-primary, #1e3a2f) 3%, #fff) 0%, #fff 55%);
  padding: var(--space-7);
}

.manage-eyebrow__spark {
  display: inline-flex;
  align-items: center;
  color: var(--color-accent, #a17f5a);
  margin-right: var(--space-2);
}

.manage-eyebrow__svg {
  width: 0.95rem;
  height: 0.95rem;
}

.manage-upgrade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
  max-width: 46rem;
}

.manage-upgrade__preview {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated, #fff);
}

.manage-upgrade__copy {
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.manage-upgrade__title {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.manage-upgrade__lede {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.55;
  max-width: 34rem;
}

.manage-upgrade__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.manage-upgrade__list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.5;
}

.manage-check {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-top: 0.1rem;
  color: var(--color-primary, #1e3a2f);
}

.manage-check svg {
  width: 1rem;
  height: 1rem;
}

.manage-upgrade__price {
  margin: var(--space-1) 0 0;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.manage-upgrade__price-term {
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}

.manage-upgrade__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}

.manage-upgrade__see {
  margin: 0;
  color: var(--color-link);
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.manage-upgrade__see:hover,
.manage-upgrade__see:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Side-by-side upgrade ladder (Digital ID + Plus, with previews) --- */
.manage-upgrade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
  align-items: stretch;
}

.manage-upgrade-card {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated, #fff);
}

.manage-upgrade-card--plus {
  border-color: color-mix(in srgb, var(--color-accent, #a17f5a) 40%, var(--color-border-default));
}

.manage-upgrade-card__head {
  display: grid;
  gap: var(--space-1);
}

.manage-upgrade-card__name {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.manage-upgrade-card__price {
  margin: 0;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-body);
}

.manage-upgrade-card__term {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-small);
}

.manage-upgrade-card__preview {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated, #fff);
}

/* --- Premium device-frame preview (mirrors the NFC product page) --- */
.manage-preview-device {
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-elevated, #fff);
}

.manage-preview-device__demo-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--color-border-subtle);
  background: linear-gradient(180deg, var(--color-bg-accent-soft, #f3efe7), var(--color-bg-elevated));
}

.manage-preview-device__demo-dot {
  width: 8px;
  height: 8px;
  flex: none;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

.manage-preview-device__demo-title {
  font-weight: var(--font-weight-semibold);
  font-size: 0.85rem;
  color: var(--color-text-primary);
}

.manage-preview-device__demo-note {
  margin-left: auto;
  color: var(--color-text-tertiary);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.manage-preview-device__phone {
  position: relative;
  margin: 0.9rem auto;
  width: calc(100% - 1.4rem);
  /* Match the NFC product page's iPhone proportions (372px, not a narrow
     squeezed frame) so the preview looks like a real phone. */
  max-width: 372px;
  border-radius: 36px;
  padding: 12px;
  background: #11141a;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    0 20px 44px -18px rgba(0, 0, 0, 0.5);
}

.manage-preview-device__speaker {
  width: 92px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 auto 8px;
}

.manage-preview-device__screen {
  height: 560px;
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 20px;
  background: #fff;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

.manage-preview-device__screen::-webkit-scrollbar {
  width: 6px;
}

.manage-preview-device__screen::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 999px;
}

.manage-preview-device__screen .profile-card {
  border: none;
  box-shadow: none;
  border-radius: 0;
}

/* Mobile-first preview (Block 6): collapse the phone-bezel frame on narrow
   viewports so the Digital ID preview uses the full available content width —
   no dark frame, padding or speaker consuming usable viewport. The rendered
   profile is the SAME canonical experience; only the frame adapts. */
@media (max-width: 480px) {
  .manage-preview-device__phone {
    width: 100%;
    max-width: none;
    margin: 0.9rem 0;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }
  .manage-preview-device__speaker {
    display: none;
  }
  .manage-preview-device__screen {
    height: 520px;
    border-radius: 0;
  }
}

.manage-upgrade-card__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.manage-upgrade-card__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.45;
}

.manage-upgrade-card__action {
  margin-top: var(--space-2);
}

.manage-upgrade-card__owned {
  display: inline-flex;
  align-items: center;
}

/* Plus-value lines — makes the upgrade tangible (who's tapping, export,
   branding, support, capacity). */
.manage-upgrade-card__value {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-3);
}

.manage-upgrade-card__value li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.45;
}

.manage-upgrade-card__value-check {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-top: 0.1rem;
  color: var(--color-accent, #a17f5a);
}

.manage-upgrade-card__value-check svg {
  width: 1.05rem;
  height: 1.05rem;
}

/* --- Card-scoped purchase page (/manage/:code/plans) --- */
.manage-plans {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--space-8);
  align-items: start;
}

.manage-plans__main {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

.manage-plans__form .platform-form__actions {
  margin-top: var(--space-4);
}

/* On-platform Stripe Payment Element — the card form mounts in-page below the
   button so the customer stays on pufaan.com (no checkout.stripe.com redirect).
   The Pay button appears under the form once it's ready. */
.manage-plans__embedded {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.manage-plans__embedded > div {
  min-height: 200px;
}

.manage-plans__embedded .manage-plans__pay-row {
  margin-top: var(--space-4);
}

.manage-plans__embedded [data-plan-pay] {
  width: 100%;
  margin-top: var(--space-4);
}

.manage-plan__price-lg {
  margin: 0;
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.02em;
}

.manage-plans__preview {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

/* Basic vs Plus comparison table (value is explicit, never implied). */
.manage-panel--compare {
  margin-top: var(--space-8);
}

.manage-compare {
  width: 100%;
  border-collapse: collapse;
}

.manage-compare th,
.manage-compare td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--text-body);
}

.manage-compare thead th {
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: var(--font-weight-semibold);
}

.manage-compare thead th.manage-compare__focus {
  color: var(--color-accent, #a17f5a);
}

.manage-compare tbody th {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.manage-compare__cell {
  width: 6rem;
}

.manage-compare__cell--focus {
  background: color-mix(in srgb, var(--color-accent, #a17f5a) 6%, transparent);
}

.manage-compare__check {
  display: inline-flex;
  align-items: center;
  color: var(--color-success, #1a7a4c);
}

.manage-compare__check svg {
  width: 1.05rem;
  height: 1.05rem;
}

.manage-compare__dash {
  color: var(--color-text-tertiary);
}

/* --- Manage Card · Plus demo page — visual tour of Pufaan Digital ID Plus. */
.manage-demo__upsell {
  margin-bottom: var(--space-6);
}

.manage-demo__grid {
  display: grid;
  grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
  gap: var(--space-7);
  align-items: start;
}

.manage-demo__phone {
  position: sticky;
  top: var(--space-6);
}

.manage-demo__panels {
  display: grid;
  gap: var(--space-5);
}

.manage-demo__panel {
  margin: 0;
}

.manage-demo__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.manage-demo__stat {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 0.75rem);
  background: var(--color-bg-elevated, #fff);
}

.manage-demo__stat-value {
  font-size: var(--text-title, 1.5rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary, #1e3a2f);
  line-height: 1.1;
}

.manage-demo__stat-label {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
}

.manage-demo__insights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.manage-demo__insights li {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.manage-demo__leads {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.manage-demo__leads li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 0.75rem);
  background: var(--color-bg-elevated, #fff);
}

.manage-demo__lead-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-accent, #a17f5a) 14%, transparent);
  color: var(--color-accent, #a17f5a);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
}

.manage-demo__lead-main {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  flex: 1;
}

.manage-demo__lead-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.manage-demo__lead-meta {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.manage-demo__export {
  font-size: var(--text-caption);
  color: var(--color-text-tertiary);
  margin: 0;
}

.manage-demo__brand {
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.manage-demo__checks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
}

.manage-demo__checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.manage-demo__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-7);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border-subtle);
}

.manage-demo__owned {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
}

.manage-upgrade-card__demo {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  margin-top: var(--space-3);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent, #a17f5a);
  text-decoration: none;
}

.manage-upgrade-card__demo:hover {
  text-decoration: underline;
}

.manage-upgrade-card__demo-svg {
  width: 0.9rem;
  height: 0.9rem;
}

@media (max-width: 900px) {
  .manage-demo__grid {
    grid-template-columns: 1fr;
  }
  .manage-demo__phone {
    position: static;
  }
}

@media (max-width: 560px) {
  .manage-demo__stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .manage-upgrade-grid {
    grid-template-columns: 1fr;
  }
  .manage-plans {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
  .manage-compare th,
  .manage-compare td {
    padding: var(--space-2) var(--space-3);
  }
}

/* --- Your Plan — the most prominent commercial panel. Full-width, calm,
   premium. Distinguishable from the upgrade by its solid elevated surface. */
.manage-panel--plan {
  padding: var(--space-7) var(--space-8);
  background: var(--color-bg-elevated, #ffffff);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(15, 15, 15, 0.06));
  border-color: var(--color-border-default);
}

.manage-plan {
  display: grid;
  grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.manage-plan__identity {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}

.manage-plan__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  flex: none;
  border-radius: 1rem;
  background: color-mix(in srgb, var(--color-primary, #1e3a2f) 8%, var(--color-bg-elevated, #fff));
  color: var(--color-primary, #1e3a2f);
}

.manage-plan__icon-svg {
  width: 1.4rem;
  height: 1.4rem;
}

.manage-plan__copy {
  min-width: 0;
  display: grid;
  gap: 0.2rem;
}

.manage-plan__name {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.manage-plan__sub {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.45;
}

.manage-plan__body {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  border-left: 1px solid var(--color-border-subtle);
  padding-left: var(--space-8);
}

.manage-plan__lede {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.55;
  max-width: 40rem;
}

.manage-plan__features {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2) var(--space-6);
}

.manage-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-body);
  line-height: 1.45;
}

.manage-plan__features .manage-check {
  margin-top: 0.15rem;
}

/* Purchase page (/manage/:code/plans): the plan panel sits in a ~528px column
   next to the preview, so the two-column identity|body split squeezes the
   feature list into a ~188px body. Stack it instead: identity + price on one
   row, then the feature list full-width in a comfortable 2-column grid — the
   write-ups stay inside the card, never overflow it. */
.page-manage-plans .manage-plan {
  grid-template-columns: 1fr;
  gap: var(--space-5);
}

.page-manage-plans .manage-plan__body {
  border-left: 0;
  padding-left: 0;
  border-top: 1px solid var(--color-border-subtle);
  padding-top: var(--space-5);
}

.page-manage-plans .manage-plan__features {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 560px) {
  .page-manage-plans .manage-plan__features {
    grid-template-columns: 1fr;
  }
}

/* --- Combined "Your plan + Current experience" section (INLINE) --- */
.manage-panel--plan-exp {
  padding: var(--space-7) var(--space-8);
}

.manage-plan-exp {
  display: grid;
  gap: var(--space-6);
}

.manage-plan-exp__plan {
  display: grid;
  gap: var(--space-4);
  align-content: start;
  min-width: 0;
}

.manage-plan-exp__plan .manage-plan__features {
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-2) var(--space-5);
}

/* Inline current-experience row — compact, reads as part of the plan. */
.manage-plan-exp__inline {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md, 0.75rem);
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 88%, transparent);
  min-width: 0;
}

.manage-plan-exp__inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  border-radius: 0.8rem;
  background: color-mix(in srgb, var(--color-primary, #1e3a2f) 8%, var(--color-bg-elevated, #fff));
  color: var(--color-primary, #1e3a2f);
}

.manage-plan-exp__inline-copy {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.manage-plan-exp__inline-copy strong {
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.manage-plan-exp__inline-copy a {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  font-size: var(--text-small);
  word-break: break-all;
}

.manage-plan-exp__inline-copy a:hover,
.manage-plan-exp__inline-copy a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.manage-plan-exp__inline-dest {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-md, 8px);
  background: var(--color-secondary);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-small);
  word-break: break-all;
}

.manage-plan-exp__inline-note {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
}

.manage-plan-exp__inline-action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  flex: none;
}

@media (max-width: 760px) {
  .manage-plan-exp {
    gap: var(--space-5);
  }
  .manage-plan-exp__inline {
    flex-wrap: wrap;
  }
  .manage-plan-exp__inline-action {
    width: 100%;
    padding-left: calc(2.5rem + var(--space-4));
  }
}

/* --- Digital ID (Basic/Plus customers — a compact summary, not a full
   public-profile copy). The preview frame stays capped so a long profile
   scrolls inside it instead of dominating the page. --- */
.manage-panel--digital {
  padding: var(--space-7);
  background: var(--color-bg-elevated, #ffffff);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 15, 15, 0.04));
}

.manage-digital {
  display: grid;
  grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: start;
}

.manage-digital__preview {
  min-width: 0;
}

/* The preview is a CONTAINED product preview, never a full inline render of a
   long profile. Cap the frame height so a profile with many sections scrolls
   inside the frame instead of stretching the whole Manage Card page. */
.manage-preview__frame {
  max-width: 24rem;
  max-height: 28rem;
  border-radius: var(--radius-lg, 16px);
  overflow: hidden auto;
  border: 1px solid var(--color-border-subtle);
  position: relative;
  overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 88%, transparent 100%);
}

.manage-preview__frame .profile-card {
  /* Keep the card's own padding so the inner content isn't clipped by the frame. */
  padding-bottom: var(--space-6);
}

.manage-digital__info {
  min-width: 0;
  display: grid;
  gap: var(--space-3);
  align-content: start;
}

.manage-digital__name {
  margin: 0;
  font-size: var(--text-h3);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.manage-digital__url {
  margin: 0;
}

.manage-digital__url a {
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  word-break: break-all;
}

.manage-digital__url a:hover,
.manage-digital__url a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.manage-digital__desc {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.5;
}

.manage-digital__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.manage-preview__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.manage-preview__view {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-link);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
}

.manage-preview__view:hover,
.manage-preview__view:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.manage-preview__view-svg {
  width: 1rem;
  height: 1rem;
}

/* --- Plus capabilities (Plus customers only — no irrelevant upgrade CTA) --- */
.manage-panel--plus {
  padding: var(--space-7);
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 70%, var(--color-secondary));
}

.manage-plus__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4) var(--space-6);
}

.manage-plus__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.manage-plus__check {
  display: inline-flex;
  align-items: center;
  flex: none;
  margin-top: 0.1rem;
  color: var(--color-success, #1a7a4c);
}

.manage-plus__check svg {
  width: 1.1rem;
  height: 1.1rem;
}

.manage-plus__copy {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
}

.manage-plus__name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.manage-plus__desc {
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.45;
}

.manage-plus__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

@media (max-width: 760px) {
  .manage-plan {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .manage-plan__body {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid var(--color-border-subtle);
    padding-top: var(--space-5);
  }
  .manage-plan__features,
  .manage-plus__list {
    grid-template-columns: 1fr;
  }
}

/* --- 2d. Shop cross-sell (Plus only) --- */
.manage-panel--shop {
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 60%, var(--color-secondary));
}

.manage-shop {
  display: grid;
  gap: var(--space-4);
}

.manage-shop__lede {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.5;
}

.manage-shop__grid {
  display: grid;
  gap: var(--space-3);
}

.manage-shop__item {
  display: flex;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-md, 12px);
  background: var(--color-bg-elevated, #fff);
  border: 1px solid var(--color-border-subtle);
}

.manage-shop__img {
  width: 3.5rem;
  height: 3.5rem;
  flex: none;
  object-fit: cover;
  border-radius: 0.75rem;
}

.manage-shop__body {
  min-width: 0;
  display: grid;
  gap: 0.15rem;
  align-items: start;
}

.manage-shop__name {
  margin: 0;
  font-size: var(--text-body);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.manage-shop__sub {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Editor next-tier note (premium conversion, not an ugly lock) --- */
.te-next-tier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-6);
  background: color-mix(in srgb, var(--color-accent, #a17f5a) 6%, var(--color-bg-elevated, #fff));
  border: 1px solid color-mix(in srgb, var(--color-accent, #a17f5a) 22%, transparent);
}

.te-next-tier__eyebrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-accent, #a17f5a);
}

.te-next-tier__svg {
  width: 0.9rem;
  height: 0.9rem;
}

.te-next-tier__copy {
  flex: 1 1 18rem;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  line-height: 1.5;
}

@media (max-width: 760px) {
  .manage-experience--forwarding {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  .manage-upgrade {
    grid-template-columns: 1fr;
  }
  .manage-upgrade__preview {
    max-width: 100%;
  }
  .manage-experience__preview {
    max-width: 100%;
  }
  .manage-layout {
    gap: var(--space-6);
  }
  .manage-preview__frame {
    max-width: 100%;
  }
  .manage-panel--plan {
    padding: var(--space-6);
  }
  .manage-digital {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .manage-digital__preview .manage-preview__frame {
    max-width: 100%;
  }
  .manage-experience__secondary {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
  }
}

/* --- 3. Forwarding (explicit state, clearly secondary) --- */
.manage-panel--forwarding {
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 60%, var(--color-secondary));
  padding: var(--space-5) var(--space-6);
}

.manage-forwarding {
  display: grid;
  gap: var(--space-4);
}

.manage-forwarding__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.manage-forwarding__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 0.75rem;
  background: var(--color-secondary);
  color: var(--color-text-tertiary);
}

.manage-forwarding__svg {
  width: 1.1rem;
  height: 1.1rem;
}

.manage-forwarding__copy {
  min-width: 0;
  display: grid;
  gap: 0.1rem;
}

.manage-forwarding__label {
  margin: 0;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  word-break: break-word;
}

.manage-forwarding__note {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-small);
  line-height: 1.45;
}

/* --- 4. Activity — compact, clearly secondary. One row of four stats on
   desktop; answers taps / last activity / status / destination without
   competing with the card. --- */
.manage-panel--activity {
  padding: var(--space-5) var(--space-6);
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 55%, var(--color-secondary));
}

.manage-activity {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5) var(--space-4);
  margin: 0;
}

.manage-activity__item {
  display: grid;
  gap: var(--space-1);
  align-content: start;
}

.manage-activity__icon {
  color: var(--color-text-tertiary);
  margin-bottom: var(--space-1);
}

.manage-activity__svg {
  width: 1.1rem;
  height: 1.1rem;
}

.manage-activity__value {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.manage-activity__value--date {
  font-size: var(--text-body);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  word-break: break-word;
}

.manage-activity__label {
  margin: 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Mobile: the compact activity row wraps to 2 columns so the numbers stay
   readable and never squeeze. Kept after the base rule so it wins. */
@media (max-width: 760px) {
  .manage-activity {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-4);
  }
}

/* --- 5. Security (compact settings rows) --- */
.manage-panel--security {
  padding: var(--space-5) var(--space-6);
}

.manage-rows {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
}

.manage-row + .manage-row {
  border-top: 1px solid var(--color-border-subtle);
}

.manage-row__link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) 0;
  text-decoration: none;
  color: var(--color-text-primary);
}

.manage-row__link:hover,
.manage-row__link:focus-visible {
  color: var(--color-text-primary);
}

.manage-row__link:hover .manage-row__label,
.manage-row__link:focus-visible .manage-row__label {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.manage-row__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: 0.75rem;
  background: var(--color-secondary);
  color: var(--color-link);
}

.manage-row__svg {
  width: 1.1rem;
  height: 1.1rem;
}

.manage-row__copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 0.1rem;
}

.manage-row__label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.manage-row__desc {
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
}

.manage-row__chevron {
  flex: none;
  color: var(--color-text-tertiary);
}

.manage-row__chevron-svg {
  width: 1rem;
  height: 1rem;
}

/* --- 6. (Account / Sign out lives in the card identity header.) --- */

/* --- Finish-setup banner --- */
.manage-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}

.manage-banner__body p {
  margin: 0 0 var(--space-1);
}

.manage-banner__body .platform-field__hint,
.manage-banner__body p + p {
  margin: 0;
}

/* CTA icon sizing inside buttons */
.btn__icon {
  display: inline-flex;
  align-items: center;
  margin-right: 0.15rem;
}
.btn__icon svg,
.btn__icon .icon {
  width: 1.05rem;
  height: 1.05rem;
}

/* --- Public card state pages (disabled / lost / not set up) --- */
.page-card-state .platform-page__inner {
  max-width: 34rem;
}

.page-card-state h1 {
  margin-bottom: var(--space-3);
}

/* Premium public "This card isn't set up yet" state — calm, private, nothing
   that leaks owner or setup internals. */
.platform-card-state {
  text-align: center;
  padding: var(--space-12) var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-2xl, 24px);
  background: var(--color-bg-elevated, #ffffff);
  box-shadow: var(--shadow-xs, 0 1px 2px rgba(15, 15, 15, 0.04));
}

.platform-card-state .platform-eyebrow {
  margin-bottom: var(--space-4);
}

.platform-card-state h1 {
  font-family: var(--font-display, "Space Grotesk", sans-serif);
  font-size: var(--text-h2);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.platform-card-state .platform-lede {
  max-width: 26rem;
  margin-inline: auto;
  color: var(--color-text-secondary);
  font-size: var(--text-body-lg);
  line-height: 1.6;
}

.platform-card-state__meta {
  margin: var(--space-4) 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--text-small);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.platform-card-state .platform-form__actions {
  justify-content: center;
  margin-top: var(--space-8);
}

/* --- Old dashboard helpers retained for other pages --- */
.platform-dashboard__grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 900px) {
  .platform-dashboard__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-6);
  }
}

/* Secondary cards (Security / Recovery / Advanced) stay muted */
.platform-card--muted {
  background: color-mix(in srgb, var(--color-bg-elevated, #fff) 60%, var(--color-secondary));
}

.platform-card--muted .platform-card__title {
  font-size: var(--text-body);
}

.platform-card--recovery .platform-form__actions--stacked {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

/* Forwarding editor — compact single-card flow with a confirm step */
.manage-forwarding {
  max-width: 42rem;
}

.manage-forwarding .platform-alert {
  margin-bottom: var(--space-4);
}

.manage-forwarding__divider {
  margin: var(--space-6) 0 var(--space-4);
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.manage-forwarding__switch {
  display: grid;
  gap: var(--space-2);
}

.manage-forwarding__te summary {
  cursor: pointer;
}

.manage-forwarding__te-body {
  margin-top: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-secondary);
}

.platform-card--recovery .platform-form__actions--stacked .btn {
  width: 100%;
  justify-content: flex-start;
}

@media (min-width: 480px) {
  .platform-card--recovery .platform-form__actions--stacked .btn {
    width: auto;
  }
}

.platform-stats {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .platform-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.platform-stat {
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
}

.platform-stat__label {
  margin: 0 0 var(--space-2);
  color: var(--color-text-tertiary);
  font-size: var(--text-caption);
}

.platform-stat__value {
  margin: 0;
  font-size: var(--text-body-lg, 1.125rem);
  font-weight: var(--font-weight-semibold);
}

.platform-placeholder {
  padding: var(--space-5);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  color: var(--color-text-tertiary);
}

.platform-placeholder h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.platform-page #edit-destination {
  scroll-margin-top: var(--space-16);
}

.platform-howto {
  margin: 0 0 var(--space-5);
  padding-left: 1.25rem;
  display: grid;
  gap: var(--space-2);
  color: var(--color-text-secondary);
}

.platform-success {
  text-align: center;
}

.platform-success__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--space-5);
  border-radius: 999px;
  background: color-mix(in srgb, #067647 12%, var(--color-secondary));
  color: #067647;
  font-size: 1.5rem;
  line-height: 1;
}

/* Activation success (code download) — refined hierarchy:
   ✓ mark → eyebrow → h1 → lede → card-code panel → primary CTA → ghost Done. */
.page-code-download .platform-success--done {
  display: grid;
  gap: var(--space-5);
  justify-items: center;
  padding-block: var(--space-6) var(--space-8);
}

.page-code-download .platform-success--done .platform-lede {
  max-width: 34rem;
  margin-inline: auto;
}

.platform-success__code {
  width: 100%;
  max-width: 30rem;
  padding: var(--space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  text-align: center;
}

.platform-success__code-label {
  margin: 0 0 var(--space-2);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.platform-success__code-value {
  margin: 0 0 var(--space-4);
}

.platform-success__code-value code {
  font-size: var(--text-lg, 1.25rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
}

.platform-success__code-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: center;
  flex-wrap: wrap;
}

.platform-success__cta {
  display: grid;
  gap: var(--space-3);
  justify-items: center;
  width: 100%;
  max-width: 26rem;
}

/* ============================================================
   Hosted Tap Experience preview / upgrade (forwarding-only cards)
   ============================================================ */
.page-hosted-preview .platform-page {
  padding-block: var(--space-8) var(--space-12);
}

.page-hosted-preview h1 {
  margin: 0 0 var(--space-2);
}

.page-hosted-preview .platform-lede {
  margin: 0 auto var(--space-6);
  max-width: 40rem;
}

.platform-tap-preview__intro {
  margin: var(--space-6) 0 var(--space-4);
  text-align: center;
}

.platform-tap-preview__intro h2 {
  margin: 0 0 var(--space-1);
}

.platform-tap-preview__intro p {
  margin: 0 auto;
  max-width: 36rem;
  color: var(--color-text-secondary);
}

.platform-tap-preview__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin: 0 0 var(--space-8);
}

@media (min-width: 640px) {
  .platform-tap-preview__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .platform-tap-preview__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.platform-tap-preview__card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  text-align: left;
  cursor: pointer;
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.platform-tap-preview__card:hover {
  border-color: var(--color-border-default);
  transform: translateY(-2px);
}

.platform-tap-preview__card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.platform-tap-preview__card.is-selected {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.platform-tap-preview__card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.platform-tap-preview__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  flex: none;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, #067647 12%, var(--color-secondary));
  color: #067647;
  font-size: 1rem;
}

.platform-tap-preview__card h3 {
  margin: 0;
  font-size: var(--text-md);
}

.platform-tap-preview__card-desc {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.platform-tap-preview__card-caps {
  margin: var(--space-2) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.platform-tap-preview__card-caps li {
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: 999px;
  background: var(--color-white, #fff);
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
}

/* Live read-only demo preview inside each hosted-preview card. Uses the same
   profile renderer as the public page so the customer sees exactly what their
   card could become. Non-editable; clearly labelled as demo content. */
.platform-tap-preview__card-live {
  margin-top: var(--space-3);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #f8f6f1;
  max-height: 26rem;
  overflow-y: auto;
}

.platform-tap-preview__card-live .te-preview-card {
  margin: 0;
}

.platform-tap-preview__card-live .te-preview-card__tag,
.platform-tap-preview__card-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: var(--space-2);
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, #067647 10%, var(--color-secondary));
  color: #067647;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.platform-tap-preview__card-tag {
  align-self: flex-start;
  margin-top: var(--space-1);
}

.platform-tap-preview__offer {
  display: grid;
  gap: var(--space-5);
  text-align: left;
}

@media (min-width: 720px) {
  .platform-tap-preview__offer {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    align-items: start;
  }
}

.platform-tap-preview__offer-main h2 {
  margin: 0 0 var(--space-2);
}

.platform-tap-preview__offer-main .platform-lede {
  margin: 0 0 var(--space-4);
}

.platform-tap-preview__offer-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
}

.platform-tap-preview__offer-list li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--color-text-secondary);
}

.platform-tap-preview__offer-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #067647;
  font-weight: var(--font-weight-semibold);
}

.platform-tap-preview__offer-side {
  display: grid;
  gap: var(--space-2);
  justify-items: start;
  padding: var(--space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-white, #fff);
}

.platform-tap-preview__price {
  margin: 0;
  font-size: var(--text-2xl, 2rem);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.platform-tap-preview__price-per {
  font-size: var(--text-md);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-tertiary);
}

/* Post-activation Plus upgrade (hosted Tap Experience live). */
.platform-success__plus {
  display: grid;
  gap: var(--space-5);
  text-align: left;
  margin-top: var(--space-6);
}

@media (min-width: 720px) {
  .platform-success__plus {
    grid-template-columns: minmax(0, 1fr) minmax(0, 18rem);
    align-items: start;
  }
}

.platform-success__plus-main h2 {
  margin: 0 0 var(--space-2);
}

.platform-success__plus-main .platform-lede {
  margin: 0 0 var(--space-4);
  max-width: none;
}

/* ============================================================
   Tap Experience editor (canonical — onboarding, manage, portal)
   ============================================================ */
.te-editor__layout {
  display: grid;
  gap: var(--space-8);
}

@media (min-width: 900px) {
  .te-editor__layout {
    /* Preview occupies ~half the viewport so the operator sees the card at
       nearly real size while editing. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-10);
  }
}

@media (min-width: 1200px) {
  .te-editor__layout {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }
}

.te-editor__form .platform-form {
  display: grid;
  gap: var(--space-4);
}

.te-editor__section-head {
  margin: var(--space-2) 0 var(--space-3);
}

.te-editor__section-title {
  margin: 0 0 var(--space-1);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
}

.te-editor__links,
.te-editor__sections {
  margin-top: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.te-editor__links .platform-fieldset,
.te-editor__sections .platform-fieldset {
  margin-bottom: var(--space-4);
}

/* Live preview — the card renders at its FULL natural height (no internal
   scroll, no bounded phone frame) at every breakpoint, so the operator always
   sees the complete card. If it grows taller, the page scrolls. */
.te-editor__preview {
  position: sticky;
  top: var(--space-8);
  align-self: start;
  display: flex;
  flex-direction: column;
  max-height: none;
}

@media (min-width: 900px) {
  .te-editor__preview {
    top: var(--space-6);
    max-height: none;
  }
}

.te-editor__preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex: none;
}

.te-editor__preview-tools {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.te-editor__device-toggle {
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.2rem;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
}

.te-editor__device-toggle .btn--ghost {
  min-height: 2rem;
  padding: 0 0.6rem;
  font-size: 0.78rem;
}

.te-editor__device-toggle .btn--ghost.is-active {
  background: var(--color-hover-surface-strong);
  border-color: var(--color-border-strong);
}

.te-editor__demo-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, #067647 10%, var(--color-secondary));
  color: #067647;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.te-editor__preview-frame {
  flex: none;
  min-height: 0;
  height: auto;
  overflow: visible;
  overscroll-behavior: auto;
  border-radius: var(--radius-xl);
  box-shadow: 0 18px 50px rgba(30, 24, 16, 0.1);
  transition: max-width var(--duration-normal) var(--ease-standard);
  background: var(--color-secondary);
  padding: var(--space-4);
}

/* During a programmatic scroll (editor→preview sync) disable CSS smooth so the
   JS animation drives it; user manual scrolling keeps native smooth behavior. */
.te-editor__preview-frame.is-syncing {
  scroll-behavior: auto;
}

.te-editor__preview-frame.is-mobile {
  max-width: 26rem;
  margin-inline: auto;
  width: 100%;
}

.te-editor__preview-frame.is-desktop {
  max-width: 100%;
}

.te-editor__preview-frame .profile-page {
  min-height: 0;
  padding: var(--space-6) var(--space-4);
  border-radius: calc(var(--radius-xl) - var(--space-2));
  background: #f8f6f1;
}

@media (max-width: 899px) {
  /* Mobile: preview first + in normal page flow so the card renders at its
     FULL natural height — never a bounded, internally-scrollable phone frame
     (that clipped the card's outer side and forced internal scrolling). If
     the card grows taller, the page scrolls; the preview never scrolls. */
  .te-editor__preview {
    position: static;
    order: -1;
    top: auto;
    max-height: none;
    /* Override the desktop `align-self: start` (shrink-to-fit) so the preview
       fills the column width instead of overflowing past the viewport. */
    align-self: stretch;
    min-width: 0;
    width: 100%;
  }

  .te-editor__layout {
    display: flex;
    flex-direction: column;
  }

  .te-editor__preview-frame.is-mobile,
  .te-editor__preview-frame.is-desktop {
    max-width: 100%;
  }
}

/* Editor layout: right column preview should stick to the viewport while the
   form scrolls (issue: preview not following down). */
@media (min-width: 900px) {
  .te-editor__layout {
    align-items: start;
  }
}

/* ---------- Grouped cards ---------- */
.te-editor__form .platform-form {
  display: grid;
  gap: var(--space-6);
}

.te-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-xl);
  background: var(--color-bg-elevated, #ffffff);
  box-shadow: var(--shadow-xs);
  overflow: hidden;
  scroll-margin-top: var(--space-8);
}

.te-card__title {
  margin: 0;
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-secondary) 55%, transparent);
}

.te-card__body {
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.te-card__field {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

/* Inputs inside the editor's grouped cards must fill their column and never
   shrink/clip inside the 2-col grid (text fields were being cut off). */
.te-card__field input,
.te-card__field select,
.te-card__field textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0 var(--space-3);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-md);
  background: var(--color-white, #fff);
  color: var(--color-text-primary);
  font: inherit;
}

.te-card__field textarea {
  padding-block: var(--space-3);
  min-height: 6rem;
}

.te-card__field input:focus,
.te-card__field select:focus,
.te-card__field textarea:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

.te-card__field label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* Profile group — the card's identity. The large avatar sits above the name
   so operators see the photo they're uploading at full prominence. */
.te-card[data-te-card="profile"] .te-card__body {
  gap: var(--space-5);
}

.te-card[data-te-card="profile"] .profile-image-uploader__drop--avatar {
  min-height: 16rem;
}

.te-card__avatar .profile-image-uploader {
  gap: 0.9rem;
}

.te-card__field label {
  font-size: var(--text-small);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.te-link-row,
.te-section-row,
.te-contact-row {
  margin: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
}

.te-contact-row .platform-grid {
  margin-bottom: var(--space-2);
}

.te-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.te-row__title {
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
}

.te-row__order {
  display: inline-flex;
  gap: 0.25rem;
}

.te-row__order .btn--ghost {
  min-height: 2rem;
  min-width: 2rem;
  padding: 0;
}

.te-row__order .btn--ghost:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Link/section rows container + add/remove/toggle controls */
.te-rows {
  display: grid;
  gap: var(--space-4);
}

.te-row__add {
  justify-self: start;
}

/* Divider between links and optional sections inside the merged card. */
.te-card__divider {
  border: 0;
  border-top: 1px solid var(--color-border-subtle);
  margin: var(--space-1) 0 var(--space-1);
}

.te-row__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-right: 0.5rem;
  font-size: var(--text-caption);
  color: var(--color-text-secondary);
  cursor: pointer;
  user-select: none;
}

.te-row__toggle input {
  width: auto;
  min-height: auto;
  margin: 0;
  accent-color: var(--color-primary);
}

.te-row__remove {
  color: var(--color-text-tertiary);
}

.te-row__remove:hover {
  color: var(--color-danger, #b42318);
  border-color: color-mix(in srgb, var(--color-danger, #b42318) 35%, transparent);
}

/* Empty states */
.te-empty {
  margin: var(--space-1) 0 0;
  padding: var(--space-4);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  color: var(--color-text-tertiary);
  text-align: center;
}

/* Theme selector — compact chips under the profile card */
.te-theme-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.te-theme-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--color-border-default);
  border-radius: 999px;
  background: var(--color-bg-elevated);
  cursor: pointer;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-medium);
}

.te-theme-option input {
  width: auto;
  margin: 0;
  accent-color: var(--color-primary);
}

.te-theme-option:has(input:checked) {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-elevated));
  color: var(--color-primary);
}

/* Sticky actions + saving feedback */
.te-editor__sticky-actions {
  position: sticky;
  top: var(--space-6);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-bg-elevated) 92%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: var(--shadow-sm);
}

.te-editor__form-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

.te-status--success {
  color: var(--color-success, #1a7a4c);
  font-weight: var(--font-weight-medium);
}

/* Save buttons disabled during submit */
[data-te-submit]:disabled,
[data-te-submit][aria-busy="true"] {
  opacity: 0.7;
  cursor: progress;
  pointer-events: none;
}

/* Unsaved changes indicator */
.te-editor.is-dirty .te-editor__sticky-actions {
  border-color: var(--color-border-focus);
}

/* ============================================================
   Premium avatar editor modal (crop / zoom / rotate)
   ============================================================ */
.profile-image-editor {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.profile-image-editor.is-open {
  display: flex;
}

.profile-image-editor__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 12, 11, 0.55);
  backdrop-filter: blur(3px);
}

.profile-image-editor__panel {
  position: relative;
  width: min(560px, 100%);
  background: var(--color-bg-elevated, #fff);
  border-radius: var(--radius-xl);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  padding: var(--space-5);
  display: grid;
  gap: var(--space-4);
}

.profile-image-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-image-editor__title {
  margin: 0;
  font-size: var(--text-h4);
  font-weight: var(--font-weight-semibold);
}

.profile-image-editor__canvas-wrap {
  position: relative;
  display: grid;
  place-items: center;
}

.profile-image-editor__canvas {
  width: 100%;
  max-width: 340px;
  aspect-ratio: 1 / 1;
  border-radius: var(--radius-lg);
  background: #f3eee6;
  touch-action: none;
  cursor: grab;
  border: 1px solid var(--color-border-subtle);
}

.profile-image-editor__canvas:active {
  cursor: grabbing;
}

.profile-image-editor__zoom {
  position: absolute;
  bottom: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--color-bg-elevated) 90%, transparent);
  border: 1px solid var(--color-border-subtle);
  box-shadow: var(--shadow-sm);
}

.profile-image-editor__zoom .btn--ghost {
  min-height: 2.1rem;
  min-width: 2.1rem;
  padding: 0;
}

.profile-image-editor__actions {
  display: flex;
  justify-content: flex-end;
}

body.has-image-editor {
  overflow: hidden;
}

/* Premium avatar drop (large placeholder) */
.profile-image-uploader__drop--avatar {
  min-height: 13rem;
  border-radius: var(--radius-xl);
}

.profile-image-uploader__drop--avatar .profile-image-uploader__drop-icon {
  width: 3rem;
  height: 3rem;
  font-size: 1.5rem;
}

.profile-image-uploader__preview-thumb img {
  width: 6rem;
  height: 6rem;
  border-radius: var(--radius-lg);
  object-fit: cover;
}

.platform-success__list {
  margin: var(--space-8) 0;
  padding: 0;
  list-style: none;
  text-align: left;
  display: grid;
  gap: var(--space-4);
}

.platform-success__list li {
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
}

.platform-success__list strong {
  display: block;
  margin-bottom: var(--space-1);
}

.platform-success__list p {
  margin: 0;
  color: var(--color-text-secondary);
}

.platform-success__item {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  background: var(--color-secondary);
  text-align: left;
  align-items: flex-start;
}

.platform-success__item strong {
  display: block;
  margin-bottom: var(--space-1);
}

.platform-success__item p {
  margin: 0 0 var(--space-3);
  color: var(--color-text-secondary);
}

.platform-success__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--text-caption);
  margin: 0 !important;
}

.platform-redirect {
  min-height: 60vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: var(--space-10) var(--space-4);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-standard);
}

.platform-redirect.is-visible {
  opacity: 1;
}

.platform-redirect__brand {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display, var(--font-body));
  font-size: var(--text-body-lg, 1.125rem);
  font-weight: var(--font-weight-semibold);
  letter-spacing: -0.02em;
}

.platform-redirect__spinner {
  width: 2rem;
  height: 2rem;
  margin: var(--space-5) auto 0;
  border: 2px solid var(--color-border-default);
  border-top-color: var(--color-text-primary);
  border-radius: 999px;
  animation: platform-spin 0.8s linear infinite;
}

@keyframes platform-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .platform-redirect__spinner {
    animation: none;
    border-top-color: var(--color-border-default);
    opacity: 0.7;
  }

  .platform-redirect {
    transition: none;
  }
}

/* ============================================================
   Premium gates (EPIC-006) — graceful degradation.
   Shown instead of a broken/locked control until a capability
   is granted. Never blocks existing Free functionality.
   ============================================================ */
.premium-gate {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-4);
  border: 1px dashed var(--color-border-default);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-secondary) 60%, transparent);
}

.premium-gate__label {
  margin: 0;
  font-size: var(--text-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.premium-gate__message {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-caption);
}

.premium-gate__cta {
  justify-self: start;
}

.premium-gate__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--text-caption);
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent);
  border-radius: var(--radius-full);
  padding: 0.2rem 0.7rem;
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.premium-gate__badge:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
}