/* ============================================================================
   HINT IT — v2 : /claim-business wizard (page-specific, linked per-page)

   Presentation-only port of the legacy SubscribeClaimBusiness inline styles
   (~1,800 lines) onto the v2 system. Everything the shared vocabulary already
   owns (buttons, fields, cards, pills, OTP cells) is NOT re-declared here —
   this file holds only the wizard-unique pieces: page frame, progress header,
   business result/selected cards, method cards, mini-map, explanation panels,
   phone-mask, password checklist, payment container.
   Scoped under `.hint-v2`, tokens only. Nothing is promoted to components.css
   (single-page patterns; promote only if a second wizard appears).
   ============================================================================ */

/* ── page frame ─────────────────────────────────────────────────────────── */
.hint-v2 .claim-wrap {
  max-width: 34.375rem; /* ≈ legacy 550px content column */
  margin-inline: auto;
  padding: var(--space-5) var(--space-4) var(--space-9);
}

/* ── progress header (brand band + numbered steps) ──────────────────────────
   Port of the legacy .progress-header/.step-item block. Shade mapping onto the
   ramp: band #462775 → --bg-brand (exact); pending chip #4c2a81 → --purple-600;
   connector #2d0b61 → --purple-900; active connector teal→purple gradient →
   --purple-300 (v2 restyle: on-brand instead of the off-palette teal). */
.hint-v2 .claim-progress {
  background: var(--bg-brand);
  padding: var(--space-7) var(--space-5);
  text-align: center;
}
.hint-v2 .claim-progress-label {
  color: var(--text-on-brand);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--fw-semibold);
  line-height: 1.3;
  margin-bottom: var(--space-4);
}
.hint-v2 .claim-steps {
  max-width: 34.375rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}
.hint-v2 .claim-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  flex: 1;
  min-width: 0;
}
.hint-v2 .claim-step-num {
  width: 32px;  /* intrinsic chip size, matches legacy */
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--purple-600);
  border: 2px solid var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-label);
  font-weight: var(--fw-bold);
  color: var(--text-on-brand);
  transition: all var(--dur-hover) var(--ease-out);
  flex-shrink: 0;
}
.hint-v2 .claim-step.completed .claim-step-num,
.hint-v2 .claim-step.current .claim-step-num {
  background: var(--bg-surface);
  border-color: var(--bg-surface);
  color: var(--brand);
  box-shadow: var(--shadow-card);
}
.hint-v2 .claim-step-title {
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  color: var(--text-on-brand);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}
.hint-v2 .claim-connector {
  flex: 0 0 100px;
  height: 2px;
  background: var(--purple-900);
  border-radius: var(--radius-full);
  margin: 0 var(--space-1);
}
.hint-v2 .claim-connector.active {
  background: var(--purple-300);
}

@media (max-width: 480px) {
  .hint-v2 .claim-progress {
    padding: var(--space-5) 0 var(--space-2);
  }
  .hint-v2 .claim-steps {
    padding-inline: var(--space-4);
  }
  .hint-v2 .claim-connector {
    flex: 0 0 15px;
    margin: 0 var(--space-3xs);
  }
}
@media (max-width: 360px) {
  .hint-v2 .claim-step-num {
    width: 28px;
    height: 28px;
    font-size: var(--text-micro);
  }
  .hint-v2 .claim-step-title {
    font-size: var(--text-micro);
  }
  .hint-v2 .claim-connector {
    flex: 0 0 12px;
    margin: 0 1px;
  }
}

/* ── shared step-card vocabulary ────────────────────────────────────────── */
.hint-v2 .claim-card {
  padding: var(--space-6) var(--space-5);
}
.hint-v2 .claim-section-label {
  font-size: var(--text-heading);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  margin-bottom: var(--space-3);
  text-align: center;
  line-height: 1.3;
}
.hint-v2 .claim-desc,
.hint-v2 .claim-desc-left {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}
.hint-v2 .claim-desc { text-align: center; }
.hint-v2 .claim-desc-left { text-align: left; }
.hint-v2 .claim-ok { color: var(--safe); font-weight: var(--fw-semibold); }
.hint-v2 .claim-warn { color: var(--warning); }
.hint-v2 .claim-danger { color: var(--danger); }

/* back link (legacy .back-btn — teal accent kept via the info token family? no:
   v2 restyle — brand-colored ghost link, consistent with the rest of v2) */
.hint-v2 .claim-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 0;
  color: var(--primary);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: var(--space-1) var(--space-4) var(--space-1) 0;
  margin-bottom: var(--space-5);
  transition: transform var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
.hint-v2 .claim-back:hover {
  color: var(--primary-hover);
  transform: translateX(-2px);
}
.hint-v2 .claim-back .v2-icon { width: var(--size-icon-sm); height: var(--size-icon-sm); }

/* ── Step 1: search ─────────────────────────────────────────────────────── */
.hint-v2 .claim-search { position: relative; }
.hint-v2 .claim-search .input { padding-right: var(--space-8); }
.hint-v2 .claim-search-clear {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: var(--space-1);
  color: var(--text-secondary);
  width: 30px;
  height: 30px;
  font-size: var(--text-subhead);
}
.hint-v2 .claim-search-clear::before {
  content: "×";
  display: block;
  line-height: 1;
  font-weight: var(--fw-bold);
}
.hint-v2 .claim-search-status {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  font-style: italic;
}

.hint-v2 .claim-results { margin-top: var(--space-5); }
.hint-v2 .claim-biz-card {
  background: var(--bg-surface);
  border: 2px solid var(--border-input);
  border-radius: var(--radius-card);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    transform var(--dur-hover) var(--ease-out);
}
.hint-v2 .claim-biz-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-2px);
}
.hint-v2 .claim-biz-name {
  font-size: var(--text-subhead);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  margin-bottom: var(--space-2);
}
.hint-v2 .claim-biz-addr {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}
.hint-v2 .claim-badges {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border);
  flex-direction: row-reverse;
  align-items: center;
}
.hint-v2 .claim-noverify-note {
  color: var(--danger);
  font-size: var(--text-micro);
  margin-left: var(--space-2);
}
.hint-v2 .claim-no-results {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--text-secondary);
}
.hint-v2 .claim-no-results-hint { margin-top: var(--space-2); margin-bottom: 0; }
.hint-v2 .claim-loading {
  text-align: center;
  padding: var(--space-8) var(--space-5);
  color: var(--primary);
}
.hint-v2 .claim-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid var(--border-input);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  animation: claim-spin 1s linear infinite;
  margin: 0 auto var(--space-4);
}
@keyframes claim-spin {
  to { transform: rotate(360deg); }
}

/* ── Step 1: selected business + mini map ───────────────────────────────── */
.hint-v2 .claim-selected-card {
  background: var(--bg-selected);
  border: 3px solid var(--primary);
  padding: var(--space-5);
  border-radius: var(--radius-card);
  margin-bottom: var(--space-5);
  position: relative;
}
.hint-v2 .claim-selected-card::before {
  content: "✓";
  position: absolute;
  top: var(--space-4);
  right: var(--space-5);
  background: var(--primary);
  color: var(--text-on-primary);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--fw-bold);
}
.hint-v2 .claim-selected-card--warning {
  border-color: var(--warning);
  background: var(--warning-bg);
}
.hint-v2 .claim-selected-card--warning::before {
  content: "⚠";
  background: var(--warning);
}
.hint-v2 .claim-selected-name {
  font-size: var(--text-subhead);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  margin-bottom: var(--space-2);
  padding-right: var(--space-8); /* keep clear of the ::before chip */
}
.hint-v2 .claim-selected-addr {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  line-height: 1.5;
}
.hint-v2 .claim-minimap {
  width: 100%;
  height: 200px;
  border-radius: var(--radius-lg);
  border: 2px solid var(--border-input);
  background: var(--bg-elevated);
  margin-bottom: var(--space-5);
}

/* ── explanation panels (unverifiable = danger, already-claimed = warning) ── */
.hint-v2 .claim-explain {
  background: var(--danger-bg);
  border: 1px solid var(--danger);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-block: var(--space-5);
}
.hint-v2 .claim-explain-title {
  font-size: var(--text-subhead);
  font-weight: var(--fw-semibold);
  color: var(--danger-text);
  margin-bottom: var(--space-3);
}
.hint-v2 .claim-explain-text {
  font-size: var(--text-label);
  color: var(--danger-text);
  margin-bottom: var(--space-5);
  line-height: 1.5;
}
.hint-v2 .claim-explain-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.hint-v2 .claim-explain-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  background: var(--bg-surface);
  border-radius: var(--radius-md);
}
.hint-v2 .claim-explain-num {
  background: var(--danger);
  color: var(--text-on-primary);
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-micro);
  font-weight: var(--fw-semibold);
  flex-shrink: 0;
}
.hint-v2 .claim-explain-step-text {
  font-size: var(--text-label);
  color: var(--danger-text);
  font-weight: var(--fw-medium);
}
.hint-v2 .claim-explain-note {
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--bg-surface);
  border: 1px solid var(--danger);
  border-radius: var(--radius-md);
}
.hint-v2 .claim-explain-note p {
  font-size: var(--text-label);
  color: var(--danger-text);
  margin: 0;
  font-style: italic;
  text-align: center;
}
.hint-v2 .claim-explain--warning {
  background: var(--warning-bg);
  border-color: var(--warning);
}
.hint-v2 .claim-explain--warning .claim-explain-title,
.hint-v2 .claim-explain--warning .claim-explain-text,
.hint-v2 .claim-explain--warning .claim-explain-step-text {
  color: var(--warning-text);
}
.hint-v2 .claim-explain--warning .claim-explain-num {
  background: var(--warning);
}

/* dotted decorated link inside explanation steps (port of .decorated-link) */
.hint-v2 .claim-link {
  color: inherit;
  cursor: pointer;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--primary);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness var(--dur-hover) var(--ease-out);
}
.hint-v2 .claim-link:hover {
  text-decoration-thickness: 2px;
}
.hint-v2 .claim-link .v2-icon {
  width: var(--size-icon-xs);
  height: var(--size-icon-xs);
  display: inline-block;
  vertical-align: baseline;
}

@media (max-width: 768px) {
  .hint-v2 .claim-explain {
    padding: var(--space-4);
    margin-block: var(--space-4);
  }
}

/* ── Step 2: test-mode banner ───────────────────────────────────────────── */
.hint-v2 .claim-testmode {
  background: var(--warning-bg);
  border: 2px solid var(--warning);
  border-radius: var(--radius-xl);
  padding: var(--space-3) var(--space-5);
  margin-bottom: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  font-size: var(--text-label);
  font-weight: var(--fw-semibold);
  color: var(--warning-text);
}
.hint-v2 .claim-testmode-icon { font-size: var(--text-subhead); }

/* ── Step 2: verification method cards ──────────────────────────────────── */
.hint-v2 .claim-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-4);
  padding-bottom: var(--space-4);
}
.hint-v2 .claim-method {
  background: var(--bg-surface);
  border: 2px solid var(--border-input);
  border-radius: var(--radius-xl);
  padding: var(--space-3);
  cursor: pointer;
  transition: border-color var(--dur-hover) var(--ease-out),
    box-shadow var(--dur-hover) var(--ease-out),
    opacity var(--dur-hover) var(--ease-out);
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.hint-v2 .claim-method:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-card-hover);
}
.hint-v2 .claim-method.selected {
  border-color: var(--primary);
  background: var(--bg-selected);
}
.hint-v2 .claim-method.unselected {
  opacity: 0.3;
}
.hint-v2 .claim-method-icon {
  font-size: 32px; /* decorative emoji glyph, exempt from the icon scale */
  flex-shrink: 0;
}
.hint-v2 .claim-method-body {
  flex: 1;
  text-align: left;
  min-width: 0;
}
.hint-v2 .claim-method-title {
  font-size: var(--text-subhead);
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  margin-bottom: var(--space-2);
}
.hint-v2 .claim-method-desc {
  font-size: var(--text-label);
  color: var(--text-secondary);
}
.hint-v2 .claim-method-highlight {
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  background: var(--bg-selected);
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: var(--radius-sm);
  display: inline-block;
  margin: 0 var(--space-3xs);
}
.hint-v2 .claim-phone-mask {
  display: inline-block;
  background-color: var(--text-primary);
  color: var(--text-primary);
  padding: 0 1px;
  margin: 0 1px;
  border-radius: var(--radius-sm);
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
  font-weight: var(--fw-bold);
  min-width: 8px;
  text-align: center;
  line-height: 1;
}
.hint-v2 .claim-method-btn { margin-top: var(--space-4); }
.hint-v2 .claim-method-btn-tight { margin-top: 0; }
.hint-v2 .claim-method-field { margin-top: var(--space-4); }
/* keep clicks on the email field from re-triggering card selection (legacy behavior) */
.hint-v2 .claim-method .claim-method-field { pointer-events: none; }
.hint-v2 .claim-method .claim-method-field .input,
.hint-v2 .claim-method .claim-method-field .field-label { pointer-events: auto; }

/* domain-not-unique warning inside the email card */
.hint-v2 .claim-domain-warn {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--warning-bg);
  border: 1px solid var(--warning);
  border-radius: var(--radius-md);
  color: var(--warning-text);
}
.hint-v2 .claim-domain-warn-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}
.hint-v2 .claim-domain-warn p {
  margin: 0;
  font-size: var(--text-label);
  line-height: 1.4;
}
.hint-v2 .claim-domain-warn p.claim-domain-warn-hint {
  margin-top: var(--space-2);
  color: var(--text-secondary);
}

/* ── Step 2: contact-admin dead end ─────────────────────────────────────── */
.hint-v2 .claim-admin {
  background: var(--info-bg);
  border: 2px solid var(--info);
  border-radius: var(--radius-xl);
  padding: var(--space-6);
  margin-block: var(--space-5);
  text-align: center;
}
.hint-v2 .claim-admin .claim-back { margin-bottom: var(--space-5); }
.hint-v2 .claim-admin-icon { font-size: 48px; margin-bottom: var(--space-4); }
.hint-v2 .claim-admin-title {
  font-size: var(--text-subhead);
  font-weight: var(--fw-semibold);
  color: var(--info-text);
  margin-bottom: var(--space-4);
}
.hint-v2 .claim-admin-text {
  font-size: var(--text-label);
  color: var(--info-text);
  line-height: 1.6;
  margin-bottom: var(--space-5);
}
.hint-v2 .claim-admin-text p { margin: 0 0 var(--space-2); }
.hint-v2 .claim-admin-email {
  background: var(--bg-surface);
  border: 2px solid var(--info);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  color: var(--info-text);
  margin-block: var(--space-4);
  word-break: break-word;
}
.hint-v2 .claim-admin-list {
  text-align: left;
  max-width: 400px;
  margin: var(--space-4) auto;
  list-style-position: inside;
}

/* ── Step 2: code entry + countdown + resend + help ─────────────────────── */
.hint-v2 .claim-verify { text-align: center; }
.hint-v2 .claim-verify-sub {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-bottom: var(--space-5);
}
.hint-v2 .claim-otp {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-5);
}
.hint-v2 .claim-verify-btn {
  max-width: 350px;
  margin-inline: auto;
}
.hint-v2 .claim-countdown {
  background: var(--bg-tint);
  border: 2px solid var(--purple-300);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-label);
  color: var(--text-brand);
  font-weight: var(--fw-semibold);
  text-align: center;
  max-width: 350px;
  margin: var(--space-5) auto;
}
.hint-v2 .claim-resend {
  display: flex;
  gap: var(--space-4);
  justify-content: center;
  margin-top: var(--space-6);
  flex-wrap: wrap;
}
.hint-v2 .claim-help-row {
  margin-top: var(--space-7);
  text-align: center;
}
.hint-v2 .claim-help {
  background: transparent;
  border: 0;
  color: var(--primary);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: var(--space-1) var(--space-4);
  transition: color var(--dur-hover) var(--ease-out);
}
.hint-v2 .claim-help:hover { color: var(--primary-hover); }

/* ── Step 3: account creation ───────────────────────────────────────────── */
.hint-v2 .claim-checking {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
}
.hint-v2 .claim-checking-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-input);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  animation: claim-spin 0.8s linear infinite;
  margin-left: var(--space-2);
  vertical-align: middle;
}
.hint-v2 .claim-pwsection {
  transition: opacity var(--dur-hover) var(--ease-out);
}
.hint-v2 .claim-pwsection.inactive { opacity: 0.5; }
.hint-v2 .claim-pwsection.active { opacity: 1; }
.hint-v2 .claim-pwreqs {
  background: var(--bg-tint);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-top: var(--space-3);
}
.hint-v2 .claim-pwreqs p {
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
  margin: 0 0 var(--space-2);
  font-size: var(--text-label);
}
.hint-v2 .claim-pwreqs ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.hint-v2 .claim-pwreqs li {
  font-size: var(--text-label);
  color: var(--text-secondary);
  margin-bottom: var(--space-1);
  padding-left: var(--space-5);
  position: relative;
}
.hint-v2 .claim-pwreqs li::before {
  content: "○";
  position: absolute;
  left: 0;
  color: var(--text-muted);
}
.hint-v2 .claim-pwreqs li.valid::before {
  content: "✓";
  color: var(--safe);
}
.hint-v2 .claim-pwconfirm {
  animation: claim-fade-in var(--dur-hover) var(--ease-out);
}
@keyframes claim-fade-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── Step 3.1: existing-account sign-in ─────────────────────────────────── */
.hint-v2 .claim-email-display {
  background: var(--bg-elevated);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-weight: var(--fw-medium);
  overflow: hidden;
  text-overflow: ellipsis;
}
.hint-v2 .claim-field-error {
  color: var(--danger);
  font-size: var(--text-label);
  margin-top: var(--space-2);
  display: flex;
  align-items: center;
  gap: var(--space-1);
}
.hint-v2 .claim-forgot-row {
  text-align: right;
  margin-bottom: var(--space-5);
}
.hint-v2 .claim-forgot {
  color: var(--primary);
  text-decoration: none;
  font-size: var(--text-label);
  font-weight: var(--fw-medium);
}
.hint-v2 .claim-forgot:hover { text-decoration: underline; }
.hint-v2 .claim-alt-action {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  text-align: center;
}
.hint-v2 .claim-alt-action p {
  color: var(--text-secondary);
  font-size: var(--text-label);
  margin: 0 0 var(--space-3);
}

/* ── Step 4: payment ────────────────────────────────────────────────────── */
.hint-v2 .claim-pay-header {
  text-align: center;
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 2px solid var(--border-input);
}
.hint-v2 .claim-billing {
  background: var(--bg-page);
  border: 2px solid var(--border-input);
  border-radius: var(--radius-xl);
  padding: var(--space-5);
  margin-bottom: var(--space-6);
}
.hint-v2 .claim-billing h3 {
  color: var(--text-brand);
  font-size: var(--text-subhead);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-4);
  text-align: center;
}
.hint-v2 .claim-line-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) 0;
  font-size: var(--text-body);
  color: var(--text-primary);
}
.hint-v2 .claim-line-item.claim-line-total {
  font-weight: var(--fw-bold);
  border-top: 1px solid var(--border);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  font-size: var(--text-subhead);
  color: var(--text-brand);
}
.hint-v2 .claim-plan-select { width: 100%; }
.hint-v2 .claim-pay-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-10) var(--space-5);
  min-height: 400px;
  gap: var(--space-4);
}
.hint-v2 .claim-pay-loading p {
  color: var(--text-secondary);
  font-size: var(--text-body);
  font-weight: var(--fw-medium);
  margin: 0;
}
.hint-v2 .claim-name-row {
  display: flex;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.hint-v2 .claim-name-field {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.hint-v2 .claim-payment-element {
  margin-bottom: var(--space-5);
  min-height: 200px;
}
.hint-v2 .claim-payment-message {
  color: var(--danger);
  font-size: var(--text-label);
  margin: var(--space-4) 0;
  min-height: 20px;
  text-align: center;
  font-weight: var(--fw-medium);
}
.hint-v2 .claim-payment-failed {
  padding: var(--space-5);
  text-align: center;
  color: var(--danger-text);
  border: 2px solid var(--danger);
  border-radius: var(--radius-xl);
  background: var(--danger-bg);
}
.hint-v2 .claim-payment-failed p { margin: 0; font-weight: var(--fw-medium); }
.hint-v2 .claim-payment-failed p + p { margin-top: var(--space-2); font-size: var(--text-label); }
.hint-v2 .claim-secure-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: var(--space-3) var(--space-4);
  background: var(--info-bg);
  border: 1px solid var(--info);
  border-radius: var(--radius-md);
  color: var(--info-text);
  font-size: var(--text-label);
  font-weight: var(--fw-medium);
}
.hint-v2 .claim-secure-note .v2-icon {
  width: var(--size-icon-sm);
  height: var(--size-icon-sm);
  flex-shrink: 0;
}
.hint-v2 .claim-btn-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border-on-brand);
  border-top-color: var(--text-on-primary);
  border-radius: var(--radius-full);
  animation: claim-spin 1s linear infinite;
  margin-right: var(--space-2);
  vertical-align: middle;
}
@media (max-width: 500px) {
  .hint-v2 .claim-name-row {
    flex-direction: column;
    gap: var(--space-4);
  }
}

/* ── Step 5: completion ─────────────────────────────────────────────────── */
.hint-v2 .claim-done {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-screen);
  z-index: var(--z-modal);
}
.hint-v2 .claim-done-content {
  text-align: center;
  padding: var(--space-8);
  max-width: 500px;
}
.hint-v2 .claim-done-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}
.hint-v2 .claim-done-spinner {
  width: 60px;
  height: 60px;
  border: 5px solid var(--border-input);
  border-top-color: var(--primary);
  border-radius: var(--radius-full);
  animation: claim-spin 1s linear infinite;
}
.hint-v2 .claim-done-message {
  font-size: var(--text-subhead);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
.hint-v2 .claim-done-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.hint-v2 .claim-done-check {
  width: 80px;
  height: 80px;
  background: var(--safe);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px; /* decorative glyph, exempt from the type scale */
  color: var(--text-on-primary);
  font-weight: var(--fw-bold);
  animation: claim-pop var(--dur-hover) var(--ease-out);
}
.hint-v2 .claim-done-title {
  font-size: var(--text-title);
  font-family: var(--font-display);
  font-weight: var(--fw-display-bold);
  color: var(--text-brand);
  margin: 0;
}
.hint-v2 .claim-done-bizname {
  font-size: var(--text-body);
  color: var(--text-secondary);
  margin: 0;
  font-weight: var(--fw-medium);
}
.hint-v2 .claim-done-redirect {
  font-size: var(--text-body);
  color: var(--text-secondary);
  margin: var(--space-2) 0 0;
}
.hint-v2 .claim-done-addanother {
  background: transparent;
  border: none;
  color: var(--primary);
  font-size: var(--text-body);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  padding: var(--space-3) var(--space-6);
  margin-top: var(--space-4);
  border-radius: var(--radius-md);
  transition: background var(--dur-hover) var(--ease-out);
}
.hint-v2 .claim-done-addanother:hover {
  background: var(--bg-selected);
  text-decoration: underline;
}
@keyframes claim-pop {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); opacity: 1; }
}
@media (max-width: 480px) {
  .hint-v2 .claim-done-content { padding: var(--space-5); }
  .hint-v2 .claim-done-title { font-size: var(--text-heading); }
  .hint-v2 .claim-done-spinner { width: 50px; height: 50px; }
  .hint-v2 .claim-done-check { width: 70px; height: 70px; font-size: 40px; }
}

/* 16:9 video embed (setup tutorial / help) */
.hint-v2 .claim-video {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-xl);
  margin-top: var(--space-5);
}
.hint-v2 .claim-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
}