/*
 * case-center.css — calm-productivity design system for the firm-client surface
 * on tenant subdomains (case home, modules, question flow, review, completed,
 * locked, mailing & USCIS phases).
 *
 * Loaded conditionally from layouts/base.blade.php only on case-center routes
 * so it doesn't tax non-case pages. Inherits tenant brand colors via the
 * --brand-primary / --brand-secondary CSS variables set at line 138 of the
 * base layout (per-tenant via tenant()->primary_color).
 *
 * Class prefix: cc-* to avoid collision with Tailwind utilities the rest of
 * the app uses.
 *
 * Tested on Safari 16+, Chrome stable, Firefox stable, Edge stable, iOS Safari
 * 15+, Android Chrome stable. No bleeding-edge CSS (no :has, container
 * queries, aspect-ratio in load-bearing places).
 */

/* ============================================================
 * DESIGN TOKENS
 * ============================================================ */

/* Hoist the brand colors to :root so cc-* elements that occasionally
 * end up outside .cc-root (e.g. when the basic-form-content partial
 * unbalances div nesting on grouped questions) still resolve
 * var(--cc-brand) — otherwise the brand-blue Continue button renders
 * with a transparent background, and the white text becomes invisible
 * against the body background. */
:root {
  --cc-brand: #003399;
  --cc-brand-hover: #002a7d;
  --cc-brand-deep: #002a7d;
  --cc-brand-rgb: 0, 51, 153;   /* accent as bare RGB channels for rgba() consumers */
}

.cc-root {
  /* Case-center accent — DELIBERATELY hardcoded, NOT inherited from
   * tenant brand. The case-center surface has its own visual identity
   * (calm-productivity, cream paper, slate ink, this deep blue accent).
   * Firms get a consistent client-facing experience; their identity
   * surfaces via their actual logo image and firm name in the header,
   * not via flooding the UI with brand color. */
  --cc-brand: #003399;
  --cc-brand-hover: #002a7d;
  --cc-brand-deep: #002a7d;
  --cc-brand-rgb: 0, 51, 153;   /* accent as bare RGB channels for rgba() consumers */

  /* Ink — text + foreground */
  --cc-ink-100: #0F1419;
  --cc-ink-90: #1F2833;
  --cc-ink-70: #455260;
  --cc-ink-50: #6E7682;
  --cc-ink-30: #B5BCC4;

  /* Paper — backgrounds */
  --cc-paper: #FBF8F3;            /* warm cream — easier on eyes for long sessions */
  --cc-paper-elev: #FFFFFF;       /* cards, modals, primary surfaces */
  --cc-paper-warm: #F5F0E6;       /* secondary surfaces, progress bg, callouts */

  /* Lines */
  --cc-line: rgba(15, 20, 25, 0.08);
  --cc-line-soft: rgba(15, 20, 25, 0.04);

  /* Semantic states (soft + deep pair for backgrounds + foregrounds) */
  --cc-amber-soft: #F4D89B;
  --cc-amber-deep: #B3892F;
  --cc-emerald-soft: #C8E0CB;
  --cc-emerald-deep: #2D7A4F;
  --cc-rose-soft: #F5D5D0;
  --cc-rose-deep: #A14E45;

  /* Brand-tinted semitransparents (rgba versions of --cc-brand for older browsers) */
  --cc-brand-soft: rgba(var(--cc-brand-rgb), 0.08);
  --cc-brand-softer: rgba(var(--cc-brand-rgb), 0.04);

  /* Typography */
  --cc-type-display: 'Fraunces', 'Georgia', 'Times New Roman', serif;
  --cc-type-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cc-type-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* Motion */
  --cc-motion-quick: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --cc-motion-base: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Shadows */
  --cc-shadow-card: 0 1px 0 rgba(15, 20, 25, 0.03), 0 4px 24px rgba(15, 20, 25, 0.03);
  --cc-shadow-hover: 0 4px 16px rgba(15, 20, 25, 0.04);
}

/* ============================================================
 * RESET WITHIN CASE CENTER (scoped — does not bleed)
 * ============================================================ */

.cc-root,
.cc-root * {
  box-sizing: border-box;
}

.cc-root {
  font-family: var(--cc-type-body);
  color: var(--cc-ink-90);
  background: var(--cc-paper);
  /* Fill the viewport even when content is short, so the paper surface is
   * the entire page background, not a band above white. */
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01', 'cv11';  /* Manrope stylistic alternates for slightly more character */
}

/* ============================================================
 * LAYOUT — FRAME
 * ============================================================ */

.cc-frame {
  max-width: 720px;
  margin: 0 auto;
  background: var(--cc-paper);
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--cc-shadow-card);
}

.cc-body {
  max-width: 840px;
  margin: 0 auto;
  padding: 40px 56px 56px;
}

/* ============================================================
 * HEADER — top chrome with logo, case ID, nav
 * ============================================================ */

.cc-header {
  background: var(--cc-paper-elev);
  border-bottom: 1px solid var(--cc-line);
  padding: 18px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.cc-header__logo-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

/* The name/case-number block is a flex child: without min-width:0 it refuses
 * to shrink below its content, so on phones the firm name plows into the nav
 * (EN pill / Invite / bell) instead of ellipsizing. */
.cc-header__logo-row > div {
  min-width: 0;
}

.cc-header__logo {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: var(--cc-brand);
  color: white;
  font-family: var(--cc-type-display);
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-header__logo-img {
  width: auto;
  height: 28px;
  max-width: 120px;
  flex-shrink: 0;
}

.cc-header__name {
  font-weight: 600;
  font-size: 14px;
  color: var(--cc-ink-100);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-header__sub {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cc-header__nav {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.cc-header__nav-btn {
  font-family: var(--cc-type-body);
  font-size: 12px;
  color: var(--cc-ink-70);
  padding: 7px 12px;
  border: 1px solid var(--cc-line);
  border-radius: 7px;
  background: transparent;
  cursor: pointer;
  transition: all var(--cc-motion-quick);
  min-height: 32px;
}

.cc-header__nav-btn:hover {
  border-color: var(--cc-ink-50);
  color: var(--cc-ink-100);
}

.cc-header__nav-btn:focus-visible {
  outline: 2px solid var(--cc-brand);
  outline-offset: 2px;
}

/* ============================================================
 * TYPOGRAPHY — eyebrow, h1, sub, section-label
 * ============================================================ */

.cc-eyebrow {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  margin-bottom: 12px;
}

.cc-h1 {
  font-family: var(--cc-type-display);
  font-weight: 500;
  font-size: 36px;
  letter-spacing: -0.02em;
  color: var(--cc-ink-100);
  line-height: 1.1;
  margin-bottom: 8px;
  font-variation-settings: 'opsz' 120;
}

.cc-h1--big {
  font-size: 44px;
}

.cc-h1 em {
  font-style: italic;
  color: var(--cc-ink-70);
  font-weight: 400;
}

/* Section / card / modal heading — one tier below the page hero (cc-h1).
 * Used by the declaration generator steps and the resource preview modal;
 * previously undefined, so those headings fell back to default browser serif. */
.cc-h {
  font-family: var(--cc-type-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--cc-ink-100);
}

.cc-sub {
  color: var(--cc-ink-70);
  font-size: 15px;
  line-height: 1.5;
  max-width: 38ch;
  margin-bottom: 32px;
}

.cc-section-label {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  margin-bottom: 14px;
}

/* ============================================================
 * STATUS BAR — live "where we are right now" strip
 * ============================================================ */

.cc-status-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 12px 16px;
  background: var(--cc-paper-warm);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
}

.cc-status-bar__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-brand);
  flex-shrink: 0;
  position: relative;
}

.cc-status-bar__dot::after {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: var(--cc-brand);
  opacity: 0.15;
  animation: cc-pulse 2.5s ease-in-out infinite;
}

@keyframes cc-pulse {
  0%, 100% { transform: scale(0.9); opacity: 0.15; }
  50% { transform: scale(1.4); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cc-status-bar__dot::after { animation: none; }
}

.cc-status-bar__text {
  font-size: 13.5px;
  color: var(--cc-ink-90);
  font-weight: 500;
  min-width: 0;
  flex: 1;
}

.cc-status-bar__text em {
  font-style: normal;
  color: var(--cc-ink-50);
  font-weight: 400;
}

.cc-status-bar__meta {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* ============================================================
 * STATE DOTS — semantic indicators used across modules + timeline
 * ============================================================ */

.cc-state-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cc-state-dot--done {
  background: var(--cc-emerald-soft);
  color: var(--cc-emerald-deep);
}

.cc-state-dot--done::after {
  content: '✓';
  font-size: 11px;
  font-weight: 700;
}

.cc-state-dot--active {
  background: transparent;
  border: 1.5px solid var(--cc-brand);
  position: relative;
}

.cc-state-dot--active::after {
  content: '';
  width: 8px;
  height: 8px;
  background: var(--cc-brand);
  border-radius: 50%;
}

.cc-state-dot--pending {
  background: transparent;
  border: 1.5px solid var(--cc-ink-30);
}

.cc-state-dot--locked {
  background: rgba(15, 20, 25, 0.04);
  border: 1px dashed var(--cc-ink-30);
}

.cc-state-dot--locked::after {
  content: '';
  width: 7px;
  height: 5px;
  border: 1.5px solid var(--cc-ink-50);
  border-bottom: 0;
  border-radius: 4px 4px 0 0;
  margin-top: -3px;
}

/* ============================================================
 * PROGRESS CARD — "Progress 4/7" with bar
 * ============================================================ */

.cc-progress-card {
  background: var(--cc-paper-warm);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 28px;
}

.cc-progress-card__left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc-progress-card__label {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--cc-ink-50);
  text-transform: uppercase;
}

.cc-progress-card__numbers {
  font-family: var(--cc-type-display);
  font-weight: 500;
  font-size: 28px;
  color: var(--cc-ink-100);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variation-settings: 'opsz' 32;
}

.cc-progress-card__numbers em {
  font-style: normal;
  color: var(--cc-ink-50);
  font-size: 18px;
  margin-left: 4px;
}

.cc-progress-card__bar {
  width: 140px;
  height: 6px;
  background: rgba(15, 20, 25, 0.06);
  border-radius: 999px;
  overflow: hidden;
  flex-shrink: 0;
}

.cc-progress-card__fill {
  height: 100%;
  background: var(--cc-brand);
  border-radius: 999px;
  transition: width 400ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* ============================================================
 * MODULES LIST — section-list row used on the modules view
 * ============================================================ */

.cc-modules {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc-module {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  cursor: pointer;
  transition: all var(--cc-motion-base);
  text-decoration: none;
  color: inherit;
  min-height: 56px;  /* tap target floor */
}

.cc-module:hover {
  border-color: rgba(15, 20, 25, 0.16);
  transform: translateY(-1px);
  box-shadow: var(--cc-shadow-hover);
}

.cc-module:focus-visible {
  outline: 2px solid var(--cc-brand);
  outline-offset: 2px;
}

.cc-module__title {
  font-family: var(--cc-type-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--cc-ink-100);
  letter-spacing: -0.005em;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.cc-module__sub {
  font-family: var(--cc-type-body);
  font-size: 12.5px;
  color: var(--cc-ink-50);
  margin-top: 3px;
}

.cc-module--locked .cc-module__title {
  color: var(--cc-ink-50);
}

.cc-module--locked {
  cursor: not-allowed;
  opacity: 0.65;
}

.cc-module--locked:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--cc-line);
}

.cc-module--done .cc-module__sub {
  color: var(--cc-emerald-deep);
}

.cc-module--active .cc-module__sub {
  color: var(--cc-amber-deep);
}

.cc-meta-pill {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  color: var(--cc-brand);
  background: var(--cc-brand-soft);
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
  font-weight: 500;
  white-space: nowrap;
}

/* Alert variant — unresolved-count badge on the D2C final-application card. */
.cc-meta-pill--alert {
  color: #fff;
  background: #D64545;
  font-weight: 700;
}

.cc-chevron {
  color: var(--cc-ink-50);
  font-size: 16px;
  opacity: 0.6;
  transition: all var(--cc-motion-quick);
  font-family: var(--cc-type-body);
}

.cc-module:hover .cc-chevron {
  color: var(--cc-ink-100);
  opacity: 1;
  transform: translateX(2px);
}

/* ============================================================
 * PHASE TABS — Firm / Mailing / USCIS navigation on Case Home
 * ============================================================ */

.cc-phase-tabs {
  display: flex;
  gap: 4px;
  background: var(--cc-paper-warm);
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 32px;
}

.cc-phase-tab {
  flex: 1;
  padding: 12px 14px;
  border: 0;
  background: transparent;
  font-family: var(--cc-type-body);
  font-size: 13px;
  color: var(--cc-ink-70);
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all var(--cc-motion-quick);
  letter-spacing: -0.005em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  min-height: 56px;
  justify-content: center;
}

.cc-phase-tab:hover {
  color: var(--cc-ink-100);
}

.cc-phase-tab:focus-visible {
  outline: 2px solid var(--cc-brand);
  outline-offset: 2px;
}

.cc-phase-tab--active {
  background: var(--cc-paper-elev);
  color: var(--cc-ink-100);
  box-shadow: 0 1px 2px rgba(15, 20, 25, 0.04), 0 0 0 1px var(--cc-line);
}

.cc-phase-tab__label {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
}

.cc-phase-tab--active .cc-phase-tab__label {
  color: var(--cc-brand);
}

.cc-phase-tab__title {
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  font-weight: 600;
}

.cc-phase-tab__status {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  color: var(--cc-ink-50);
  margin-top: 2px;
  letter-spacing: 0.04em;
}

.cc-phase-tab--active .cc-phase-tab__status {
  color: var(--cc-amber-deep);
}

.cc-phase-tab--done .cc-phase-tab__status {
  color: var(--cc-emerald-deep);
}

/* Phase tab inline progress bar (Phase 1) */
.cc-phase-tab__progress {
  display: block;
  margin-top: 8px;
  height: 4px;
  width: 100%;
  background: rgba(11, 10, 9, 0.08);
  border-radius: 3px;
  overflow: hidden;
}

.cc-phase-tab__progress-fill {
  display: block;
  height: 100%;
  background: var(--cc-brand);
  border-radius: 3px;
  transition: width 320ms ease;
}

.cc-phase-tab--active .cc-phase-tab__progress {
  background: rgba(var(--cc-brand-rgb),0.12);
}

/* ============================================================
   Party (Petitioner / Beneficiary) grouping & chips
   ============================================================ */

/* Two neutral-but-distinct tones — no brand color leak. */
:root {
  --cc-party-petitioner-bg: #F3EBDA;
  --cc-party-petitioner-bg-soft: rgba(243, 235, 218, 0.45);
  --cc-party-petitioner-ink: #5C4D3A;
  --cc-party-petitioner-border: rgba(92, 77, 58, 0.18);

  --cc-party-beneficiary-bg: #E5EBF1;
  --cc-party-beneficiary-bg-soft: rgba(229, 235, 241, 0.5);
  --cc-party-beneficiary-ink: #3A4D5C;
  --cc-party-beneficiary-border: rgba(58, 77, 92, 0.18);
}

.cc-party-group {
  margin-top: 14px;
  padding: 14px 16px 6px 16px;
  border-radius: 14px;
  border: 1px solid transparent;
}

.cc-party-group--petitioner {
  background: var(--cc-party-petitioner-bg-soft);
  border-color: var(--cc-party-petitioner-border);
}

.cc-party-group--beneficiary {
  background: var(--cc-party-beneficiary-bg-soft);
  border-color: var(--cc-party-beneficiary-border);
}

.cc-party-group__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 12px;
}

.cc-party-group__name {
  font-family: var(--cc-type-display);
  font-size: 16px;
  font-weight: 500;
  font-variation-settings: "opsz" 32;
  color: var(--cc-ink-90);
  letter-spacing: -0.005em;
}

.cc-party-chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-family: var(--cc-type-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  line-height: 1.4;
  white-space: nowrap;
}

.cc-party-chip--petitioner {
  background: var(--cc-party-petitioner-bg);
  color: var(--cc-party-petitioner-ink);
}

.cc-party-chip--beneficiary {
  background: var(--cc-party-beneficiary-bg);
  color: var(--cc-party-beneficiary-ink);
}

/* Module row tint inside a party group — subtle left-border accent */
.cc-party-group .cc-module {
  background: var(--cc-paper);
}

.cc-module--petitioner {
  border-left: 3px solid var(--cc-party-petitioner-ink);
}

.cc-module--beneficiary {
  border-left: 3px solid var(--cc-party-beneficiary-ink);
}

/* Modules-page eyebrow (party + name + section type) */
.cc-party-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.cc-party-eyebrow__name {
  font-family: var(--cc-type-body);
  font-size: 13px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--cc-ink-70);
  font-weight: 500;
}

.cc-party-eyebrow__sep {
  color: var(--cc-ink-30);
}

.cc-party-eyebrow__type {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ============================================================
   USCIS receipt input form
   ============================================================ */

.cc-receipt-form {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(11, 10, 9, 0.08);
}

/* The divider treatment is for when the form follows status content in the
 * same card; standing alone in its own card it needs no leading rule. */
.cc-receipt-form:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.cc-receipt-form__label {
  display: block;
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cc-receipt-form__row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  flex-wrap: wrap;
}

.cc-receipt-form__input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 12px 14px;
  font-family: var(--cc-type-mono);
  font-size: 16px; /* iOS Safari: prevent zoom on focus */
  letter-spacing: 0.04em;
  color: var(--cc-ink-90);
  background: var(--cc-paper);
  border: 1px solid rgba(11, 10, 9, 0.16);
  border-radius: 10px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cc-receipt-form__input::placeholder {
  color: var(--cc-ink-30);
  letter-spacing: 0.02em;
}

.cc-receipt-form__input:focus {
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 3px rgba(var(--cc-brand-rgb),0.12);
}

.cc-receipt-form__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.cc-receipt-form__error {
  margin-top: 8px;
  font-family: var(--cc-type-body);
  font-size: 13px;
  color: #B43E3E;
  line-height: 1.45;
}

.cc-receipt-form__hint {
  margin-top: 10px;
  font-family: var(--cc-type-body);
  font-size: 12.5px;
  color: var(--cc-ink-50);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .cc-receipt-form__row {
    flex-direction: column;
  }
  .cc-receipt-form__input {
    /* In the column direction flex-basis becomes height — the desktop
     * `flex: 1 1 220px` was inflating the input into a 220px-tall box. */
    flex: 1 1 auto;
  }
  .cc-receipt-form__btn {
    width: 100%;
  }
}

/* ============================================================
 * TIMELINE — vertical list of steps (1-5 firm, 6-9 USCIS)
 * ============================================================ */

.cc-timeline {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.cc-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: 16px;
  position: relative;
  padding: 4px 0 24px;
}

.cc-step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 28px;
  bottom: 0;
  width: 1.5px;
  background: var(--cc-line);
}

.cc-step--done:not(:last-child)::before {
  background: var(--cc-emerald-soft);
}

.cc-step--active:not(:last-child)::before {
  background: linear-gradient(
    to bottom,
    var(--cc-brand) 0%, var(--cc-brand) 50%,
    var(--cc-line) 50%, var(--cc-line) 100%
  );
}

.cc-step__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-type-mono);
  font-size: 12px;
  font-weight: 600;
  background: var(--cc-paper-elev);
  border: 1.5px solid var(--cc-ink-30);
  color: var(--cc-ink-50);
  position: relative;
  z-index: 1;
}

.cc-step--done .cc-step__num {
  background: var(--cc-emerald-soft);
  border-color: var(--cc-emerald-soft);
  color: var(--cc-emerald-deep);
}

.cc-step--done .cc-step__num span {
  display: none;
}

.cc-step--done .cc-step__num::after {
  content: '✓';
}

.cc-step--active .cc-step__num {
  background: var(--cc-brand);
  border-color: var(--cc-brand);
  color: white;
}

.cc-step__content {
  padding-top: 4px;
  min-width: 0;
}

.cc-step__meta-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.cc-step__title {
  font-family: var(--cc-type-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--cc-ink-100);
  letter-spacing: -0.005em;
}

.cc-step--done .cc-step__title {
  color: var(--cc-ink-70);
}

.cc-step--locked .cc-step__title {
  color: var(--cc-ink-50);
}

.cc-step__eta {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  color: var(--cc-ink-50);
  background: rgba(15, 20, 25, 0.04);
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

.cc-step--active .cc-step__eta {
  background: var(--cc-brand-soft);
  color: var(--cc-brand);
}

.cc-step__desc {
  font-size: 13px;
  color: var(--cc-ink-70);
  line-height: 1.5;
  margin-bottom: 8px;
}

.cc-step__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cc-type-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-brand);
  cursor: pointer;
  background: transparent;
  border: 0;
  padding: 4px 0;
  text-decoration: none;
}

.cc-step__action:hover { text-decoration: underline; }

.cc-step__substatus {
  margin-top: 8px;
  padding: 10px 14px;
  background: var(--cc-paper-warm);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--cc-ink-70);
  display: flex;
  align-items: center;
  gap: 8px;
}

.cc-step__substatus em {
  font-style: normal;
  color: var(--cc-ink-100);
  font-weight: 500;
}

/* ============================================================
 * REVIEW LIST — questions/answers grouped by section
 * ============================================================ */

.cc-review-toc {
  background: var(--cc-paper-warm);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.cc-review-toc__label {
  font-family: var(--cc-type-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
}

.cc-review-toc__jump {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-70);
  padding: 6px 10px;
  border: 1px solid var(--cc-line);
  border-radius: 6px;
  cursor: pointer;
  background: transparent;
  letter-spacing: 0.02em;
  min-height: 32px;
  transition: all var(--cc-motion-quick);
}

.cc-review-toc__jump:hover {
  color: var(--cc-ink-100);
  border-color: var(--cc-ink-50);
}

.cc-review-section { margin-bottom: 32px; }

.cc-review-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--cc-line);
}

.cc-review-section__title {
  font-family: var(--cc-type-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--cc-ink-100);
  letter-spacing: -0.005em;
  font-variation-settings: 'opsz' 24;
}

.cc-review-section__count {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  letter-spacing: 0.02em;
  margin-left: auto;
}

.cc-review-qa {
  padding: 14px 0;
  border-bottom: 1px solid var(--cc-line-soft);
  display: grid;
  grid-template-columns: 1fr 32px;
  gap: 16px;
  align-items: start;
}

.cc-review-qa:last-child { border-bottom: 0; }

.cc-review-qa__q {
  font-size: 13px;
  color: var(--cc-ink-70);
  margin-bottom: 4px;
  line-height: 1.4;
}

.cc-review-qa__a {
  font-family: var(--cc-type-body);
  font-size: 14.5px;
  color: var(--cc-ink-100);
  font-weight: 500;
  letter-spacing: -0.005em;
  word-break: break-word;
}

.cc-review-qa__edit {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-ink-50);
  cursor: pointer;
  transition: all var(--cc-motion-quick);
  opacity: 0;
  border: 0;
  background: transparent;
}

.cc-review-qa:hover .cc-review-qa__edit,
.cc-review-qa__edit:focus-visible {
  opacity: 1;
  color: var(--cc-ink-100);
  background: var(--cc-paper-warm);
}

/* On touch devices (no hover support), always show the edit button */
@media (hover: none) {
  .cc-review-qa__edit { opacity: 1; }
}

/* ============================================================
 * QUESTION SCREEN — single question + answer options
 * ============================================================ */

.cc-q-progress {
  display: flex;
  gap: 4px;
  margin-bottom: 32px;
}

.cc-q-progress__seg {
  flex: 1;
  height: 3px;
  background: rgba(15, 20, 25, 0.08);
  border-radius: 999px;
  /* Tier B: animate the fill as segments flip done/active on each advance. */
  transition: background var(--cc-motion-base), opacity var(--cc-motion-base);
}

.cc-q-progress__seg--done { background: var(--cc-brand); }
.cc-q-progress__seg--active { background: var(--cc-brand); opacity: 0.4; }

/* Tier B: entrance transition. wire:key replaces the question text + input
   subtree on each advance, so this animation auto-plays per question — fade +
   small rise reads as "the next question slid in" instead of a hard cut. It does
   NOT replay on same-question re-renders (validation, Aurora toast) because the
   key is unchanged and the node is patched, not replaced. */
@keyframes cc-q-enter {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.cc-q-question,
.cc-q-existing-render {
  animation: cc-q-enter var(--cc-motion-base) both;
}

@media (prefers-reduced-motion: reduce) {
  .cc-q-question,
  .cc-q-existing-render { animation: none; }
}

.cc-q-question {
  font-family: var(--cc-type-display);
  font-weight: 400;
  font-size: 32px;
  line-height: 1.2;
  color: var(--cc-ink-100);
  letter-spacing: -0.015em;
  margin-bottom: 8px;
  font-variation-settings: 'opsz' 96;
}

.cc-q-help {
  font-family: var(--cc-type-body);
  font-size: 14px;
  color: var(--cc-ink-70);
  line-height: 1.55;
  margin-bottom: 32px;
  max-width: 40ch;
}

.cc-attorney-note {
  margin-bottom: 28px;
  padding: 14px 18px;
  background: var(--cc-brand-softer);
  border-left: 2px solid var(--cc-brand);
  border-radius: 0 8px 8px 0;
}

.cc-attorney-note__meta {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--cc-brand);
  text-transform: uppercase;
  margin-bottom: 6px;
}

.cc-attorney-note__body {
  font-size: 13.5px;
  color: var(--cc-ink-90);
  line-height: 1.5;
}

.cc-q-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}

.cc-q-option {
  padding: 16px 20px;
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  cursor: pointer;
  transition: all var(--cc-motion-quick);
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
}

.cc-q-option:hover { border-color: var(--cc-ink-30); }

.cc-q-option--selected {
  border-color: var(--cc-brand);
  background: var(--cc-brand-softer);
  box-shadow: 0 0 0 1px var(--cc-brand);
}

.cc-q-radio {
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--cc-ink-30);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.cc-q-option--selected .cc-q-radio { border-color: var(--cc-brand); }

.cc-q-option--selected .cc-q-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--cc-brand);
  border-radius: 50%;
}

.cc-q-option__text {
  font-family: var(--cc-type-body);
  font-size: 14.5px;
  color: var(--cc-ink-100);
  font-weight: 500;
}

.cc-q-option__sub {
  font-size: 12.5px;
  color: var(--cc-ink-50);
  margin-top: 2px;
  font-weight: 400;
}

.cc-q-input {
  padding: 16px 18px;
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-ink-30);
  border-radius: 10px;
  width: 100%;
  font-family: var(--cc-type-body);
  font-size: 16px;  /* >= 16px prevents iOS Safari zoom-on-focus */
  color: var(--cc-ink-100);
  transition: all var(--cc-motion-quick);
  margin-bottom: 32px;
}

.cc-q-input:focus {
  outline: none;
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 3px var(--cc-brand-soft);
}

.cc-q-input::placeholder { color: var(--cc-ink-30); }

.cc-q-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

/* ============================================================
 * BUTTONS — primary, ghost, secondary
 * ============================================================ */

.cc-btn {
  font-family: var(--cc-type-body);
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  transition: all var(--cc-motion-quick);
  letter-spacing: -0.005em;
  min-height: 44px;  /* tap target floor */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
}

.cc-btn--primary {
  background: var(--cc-brand);
  color: white;
}

.cc-btn--primary:hover { background: var(--cc-brand-hover); }

.cc-btn--primary:focus-visible {
  outline: 2px solid var(--cc-ink-100);
  outline-offset: 2px;
}

.cc-btn--ghost {
  background: transparent;
  color: var(--cc-ink-70);
  padding: 12px 16px;
}

.cc-btn--ghost:hover { color: var(--cc-ink-100); }

.cc-btn--secondary {
  background: var(--cc-paper-warm);
  color: var(--cc-ink-90);
  border: 1px solid var(--cc-line);
}

.cc-btn--secondary:hover {
  border-color: var(--cc-ink-50);
  color: var(--cc-ink-100);
}

/* Tier A: in-flight busy state for nav buttons. Disabled dims + blocks the
   click; the inline spinner inherits the button text color (currentColor) so it
   reads on both primary (white) and ghost (ink) buttons. */
.cc-btn:disabled {
  opacity: 0.65;
  cursor: progress;
}

.cc-btn__spinner {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: cc-btn-spin 0.6s linear infinite;
}

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

/* ============================================================
 * MAILING — checklist + address card
 * ============================================================ */

.cc-mailing-hero {
  background: linear-gradient(180deg, var(--cc-paper-elev) 0%, var(--cc-paper-warm) 100%);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 24px 28px;
  margin-bottom: 24px;
}

.cc-mailing-hero__eyebrow {
  font-family: var(--cc-type-mono);
  font-size: 10.5px;
  color: var(--cc-brand);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.cc-mailing-hero__h {
  font-family: var(--cc-type-display);
  font-weight: 500;
  font-size: 22px;
  color: var(--cc-ink-100);
  letter-spacing: -0.005em;
  margin-bottom: 10px;
  font-variation-settings: 'opsz' 32;
}

.cc-mailing-hero__sub {
  font-size: 13.5px;
  color: var(--cc-ink-70);
  line-height: 1.55;
  max-width: 50ch;
}

.cc-mail-checklist {
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 24px;
}

.cc-mail-item {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: 16px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--cc-line-soft);
  align-items: start;
}

.cc-mail-item:last-child { border-bottom: 0; }

.cc-mail-check {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 1.5px solid var(--cc-ink-30);
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.cc-mail-item--done .cc-mail-check {
  background: var(--cc-emerald-soft);
  border-color: var(--cc-emerald-soft);
  color: var(--cc-emerald-deep);
}

.cc-mail-item--done .cc-mail-check::after {
  content: '✓';
  font-size: 12px;
  font-weight: 700;
}

.cc-mail-title {
  font-family: var(--cc-type-body);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cc-ink-100);
  letter-spacing: -0.005em;
  margin-bottom: 4px;
}

.cc-mail-item--done .cc-mail-title { color: var(--cc-ink-70); }

.cc-mail-desc {
  font-size: 12.5px;
  color: var(--cc-ink-70);
  line-height: 1.55;
}

.cc-mail-extra {
  margin-top: 8px;
  padding: 10px 12px;
  background: var(--cc-paper-warm);
  border-radius: 6px;
  font-size: 12px;
  color: var(--cc-ink-70);
}

.cc-mail-extra strong {
  font-family: var(--cc-type-body);
  color: var(--cc-ink-100);
  font-weight: 600;
}

/* Numbered how-to steps (wet-ink signing walkthrough on the firm-file step).
   cc-fineprint is a CENTERED footer-note style and cc-mail-extra a beige
   callout — neither reads as instructions, which is how this card earned its
   own component. */
.cc-sign-howto {
  margin: 0 0 14px;
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  background: var(--cc-paper-elev);
  overflow: hidden;
}

.cc-sign-howto__title {
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cc-ink-100);
  letter-spacing: -0.005em;
  margin: 0;
  padding: 14px 16px 10px;
  text-align: left;
  border-bottom: 1px solid var(--cc-line-soft);
}

.cc-sign-howto__step {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: start;
  padding: 11px 16px;
  border-bottom: 1px solid var(--cc-line-soft);
}

.cc-sign-howto__step:last-child { border-bottom: 0; }

.cc-sign-howto__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cc-emerald-soft);
  color: var(--cc-emerald-deep);
  font-size: 11.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.cc-sign-howto__text {
  font-size: 12.5px;
  color: var(--cc-ink-70);
  line-height: 1.55;
  text-align: left;
}

.cc-sign-howto__text strong {
  color: var(--cc-ink-100);
  font-weight: 600;
}

/* Inside the filing accordion, fineprint is a caption under left-aligned
   cards — the global centered treatment reads as floating fragments there. */
.cc-fstep__inner .cc-fineprint {
  text-align: left;
  margin-top: 8px;
}

.cc-mail-address-card {
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 22px 24px;
}

.cc-mail-address-h {
  font-family: var(--cc-type-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--cc-ink-100);
  margin-bottom: 4px;
}

.cc-mail-address-sub {
  font-size: 12.5px;
  color: var(--cc-ink-70);
  margin-bottom: 16px;
}

.cc-mail-address {
  font-family: var(--cc-type-mono);
  font-size: 12.5px;
  color: var(--cc-ink-90);
  line-height: 1.7;
  background: var(--cc-paper-warm);
  padding: 14px 16px;
  border-radius: 8px;
  letter-spacing: 0.01em;
  white-space: pre-line;
}

/* ============================================================
 * USCIS — receipt-number card + disclaimer + timeline
 * ============================================================ */

.cc-uscis-card {
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 28px;
  background-image: linear-gradient(135deg, var(--cc-brand-softer), transparent);
}

.cc-uscis-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.cc-uscis-receipt__label {
  font-family: var(--cc-type-mono);
  font-size: 10.5px;
  color: var(--cc-ink-50);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.cc-uscis-receipt__num {
  font-family: var(--cc-type-mono);
  font-size: 17px;
  color: var(--cc-ink-100);
  font-weight: 600;
  letter-spacing: 0.04em;
  word-break: break-all;
}

.cc-uscis-status-pill {
  font-family: var(--cc-type-mono);
  font-size: 10.5px;
  color: var(--cc-brand);
  font-weight: 600;
  background: var(--cc-brand-soft);
  padding: 5px 10px;
  border-radius: 999px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Semantic status variants — same token families as cc-pay-status-pill so the
 * USCIS receipt status reads at a glance (approved vs denied vs action-needed)
 * instead of every status sharing one navy pill. Base (brand) = in-progress. */
.cc-uscis-status-pill--success { color: var(--cc-emerald-deep); background: var(--cc-emerald-soft); }
.cc-uscis-status-pill--action { color: var(--cc-amber-deep); background: var(--cc-amber-soft); }
.cc-uscis-status-pill--negative { color: var(--cc-rose-deep); background: var(--cc-rose-soft); }
.cc-uscis-status-pill--neutral { color: var(--cc-ink-70); background: var(--cc-paper-warm); }

.cc-uscis-current-state {
  /* Body type, not display serif: USCIS descriptions are full paragraphs,
   * not the short status phrase this was originally styled for. */
  font-family: var(--cc-type-body);
  font-size: 14px;
  font-weight: 400;
  color: var(--cc-ink-70);
  line-height: 1.6;
  margin-bottom: 4px;
  overflow-wrap: break-word;
}

.cc-uscis-last-sync {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  letter-spacing: 0.02em;
}

.cc-uscis-disclaimer {
  background: var(--cc-paper-warm);
  border: 1px solid var(--cc-line);
  border-radius: 8px;
  padding: 12px 14px;
  font-size: 12px;
  color: var(--cc-ink-70);
  line-height: 1.5;
  margin-bottom: 20px;
}

.cc-uscis-disclaimer strong {
  color: var(--cc-ink-100);
  font-weight: 600;
}

/* ============================================================
 * COMPLETED — celebration badge + next-steps timeline
 * ============================================================ */

.cc-complete-hero {
  text-align: center;
  padding: 24px 0 32px;
}

.cc-complete-badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--cc-emerald-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cc-complete-badge::before {
  content: '';
  position: absolute;
  inset: -8px;
  border: 1px solid var(--cc-emerald-soft);
  border-radius: 50%;
  opacity: 0.5;
}

.cc-complete-badge::after {
  content: '✓';
  font-size: 28px;
  color: var(--cc-emerald-deep);
  font-weight: 600;
}

.cc-complete-meta {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  letter-spacing: 0.04em;
  flex-wrap: wrap;
}

.cc-complete-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cc-complete-meta-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cc-ink-30);
}

.cc-next-steps {
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 28px;
  margin: 32px 0 0;
}

.cc-next-steps__h {
  font-family: var(--cc-type-display);
  font-size: 18px;
  font-weight: 500;
  color: var(--cc-ink-100);
  margin-bottom: 6px;
  letter-spacing: -0.005em;
}

.cc-next-steps__sub {
  font-size: 13.5px;
  color: var(--cc-ink-70);
  margin-bottom: 24px;
}

.cc-next-step {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--cc-line-soft);
}

.cc-next-step:last-child { border-bottom: 0; }

.cc-next-step__num {
  width: 24px;
  height: 24px;
  border: 1px solid var(--cc-line);
  border-radius: 50%;
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-70);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.cc-next-step--done .cc-next-step__num {
  background: var(--cc-emerald-soft);
  border-color: var(--cc-emerald-soft);
  color: var(--cc-emerald-deep);
}

.cc-next-step--active .cc-next-step__num {
  background: var(--cc-brand);
  border-color: var(--cc-brand);
  color: white;
}

.cc-next-step__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink-100);
}

.cc-next-step__sub {
  font-size: 12px;
  color: var(--cc-ink-50);
  margin-top: 2px;
}

.cc-next-step__eta {
  font-family: var(--cc-type-mono);
  font-size: 10.5px;
  color: var(--cc-ink-50);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ============================================================
 * LOCKED — paused-case explanation + contact card
 * ============================================================ */

.cc-locked-hero {
  background: var(--cc-paper-warm);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 32px;
  margin-bottom: 24px;
}

.cc-locked-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--cc-ink-70);
}

.cc-locked-icon::after {
  content: '';
  width: 14px;
  height: 11px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  box-shadow: 0 11px 0 0 currentColor;
  position: relative;
  top: -3px;
}

.cc-locked-h {
  font-family: var(--cc-type-display);
  font-weight: 500;
  font-size: 24px;
  color: var(--cc-ink-100);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  font-variation-settings: 'opsz' 36;
}

.cc-locked-sub {
  font-size: 14px;
  color: var(--cc-ink-70);
  line-height: 1.55;
  margin-bottom: 20px;
  max-width: 50ch;
}

.cc-locked-reason {
  padding: 12px 14px;
  background: var(--cc-paper-elev);
  border-radius: 8px;
  font-family: var(--cc-type-mono);
  font-size: 11.5px;
  color: var(--cc-ink-70);
  letter-spacing: 0.02em;
}

.cc-locked-reason strong {
  font-family: var(--cc-type-body);
  color: var(--cc-ink-100);
  font-weight: 600;
}

.cc-contact-card {
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 24px 28px;
}

.cc-contact-h {
  font-family: var(--cc-type-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--cc-ink-100);
  margin-bottom: 12px;
}

.cc-contact-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}

.cc-contact-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--cc-paper-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cc-ink-70);
  font-size: 14px;
}

.cc-contact-label {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  color: var(--cc-ink-50);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cc-contact-value {
  font-size: 14px;
  color: var(--cc-ink-100);
  font-weight: 500;
}

/* ============================================================
 * REVIEW ACTION CTA + FOOTER ROW (shared closers)
 * ============================================================ */

.cc-review-action {
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--cc-paper-elev);
  border: 1px dashed var(--cc-ink-30);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  cursor: pointer;
  transition: all var(--cc-motion-quick);
  text-decoration: none;
  color: inherit;
}

.cc-review-action:hover {
  border-style: solid;
  border-color: var(--cc-brand);
}

.cc-review-action__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--cc-ink-100);
}

.cc-review-action__sub {
  font-size: 12.5px;
  color: var(--cc-ink-70);
  margin-top: 4px;
}

.cc-review-action__meta {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.cc-footer {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--cc-line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  letter-spacing: 0.02em;
  gap: 16px;
  flex-wrap: wrap;
}

.cc-footer__back {
  background: transparent;
  border: 0;
  color: var(--cc-ink-70);
  cursor: pointer;
  font-family: var(--cc-type-body);
  font-size: 13px;
  padding: 8px 0;
  min-height: 32px;
}

.cc-footer__back:hover { color: var(--cc-ink-100); }

.cc-footer__back:focus-visible {
  outline: 2px solid var(--cc-brand);
  outline-offset: 2px;
}

/* ============================================================
 * RESPONSIVE
 * ============================================================ */

/* Tablet → narrower frame padding */
@media (max-width: 880px) {
  .cc-body { padding: 32px 32px 48px; }
  .cc-frame { margin: 16px; }
  .cc-h1 { font-size: 32px; }
  .cc-h1--big { font-size: 38px; }
}

/* Mobile */
@media (max-width: 600px) {
  .cc-body { padding: 24px 20px 40px; }
  .cc-header { padding: 14px 16px; gap: 10px; }
  .cc-header__logo-row { gap: 10px; }
  .cc-header__logo-img { max-width: 90px; }
  .cc-header__nav { gap: 6px; }
  .cc-header__nav-btn { padding: 8px 10px; font-size: 11.5px; }
  .cc-h1 { font-size: 28px; }
  .cc-h1--big { font-size: 32px; }
  .cc-q-question { font-size: 24px; }
  .cc-phase-tab { padding: 10px 8px; }
  .cc-phase-tab__title { font-size: 12.5px; }
  .cc-progress-card { padding: 16px 18px; }
  .cc-progress-card__numbers { font-size: 24px; }
  .cc-progress-card__bar { width: 100px; }
  .cc-module { padding: 16px 16px; }
  .cc-module__title { font-size: 14.5px; }
  .cc-status-bar__meta { display: none; }  /* tight spot — drop the meta */
}

/* Small phones — stack phase tabs vertically for clarity */
@media (max-width: 420px) {
  .cc-phase-tabs { flex-direction: column; }
  .cc-phase-tab { flex-direction: row; justify-content: flex-start; padding: 12px 14px; min-height: 52px; gap: 12px; }
  .cc-phase-tab__label { order: 0; }
  .cc-phase-tab__title { order: 1; flex: 1; text-align: left; }
  .cc-phase-tab__status { order: 2; margin-top: 0; }
  .cc-complete-meta { gap: 12px; }
  .cc-complete-meta-dot { display: none; }
}

/* ============================================================
 * PRINT — clean summaries for the completed view
 * ============================================================ */

@media print {
  body { background: white; }
  .cc-frame { box-shadow: none; border: 0; max-width: 100%; }
  .cc-header__nav, .cc-footer__back, .cc-review-qa__edit { display: none; }
  .cc-status-bar__dot::after { animation: none; }
}

/* ============================================================
   Auth surfaces (login, forgot password, reset password)
   Single-column centered card. Tenant brand surfaces via logo
   and name; no firm brand-color tinting.
   ============================================================ */

.cc-auth {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.cc-auth__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px 32px 20px;
}

.cc-auth__card {
  width: 100%;
  max-width: 440px;
  background: var(--cc-paper-warm);
  border: 1px solid rgba(11, 10, 9, 0.08);
  border-radius: 20px;
  padding: 40px 36px 32px 36px;
  box-shadow:
    0 1px 2px rgba(11, 10, 9, 0.04),
    0 12px 32px -8px rgba(11, 10, 9, 0.10);
}

@media (max-width: 480px) {
  .cc-auth__main { padding: 24px 16px; }
  .cc-auth__card { padding: 28px 22px 24px 22px; border-radius: 16px; }
}

.cc-auth__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.cc-auth__logo-img {
  height: 36px;
  width: auto;
  max-width: 160px;
  object-fit: contain;
}

.cc-auth__logo-letter {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--cc-brand);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-type-display);
  font-size: 18px;
  font-weight: 600;
  font-variation-settings: "opsz" 32;
}

.cc-auth__brand-name {
  font-family: var(--cc-type-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink-90);
  letter-spacing: -0.005em;
}

.cc-auth__h1 {
  font-family: var(--cc-type-display);
  font-size: 32px;
  font-weight: 500;
  font-variation-settings: "opsz" 72;
  line-height: 1.15;
  letter-spacing: -0.015em;
  color: var(--cc-ink-90);
  margin: 0 0 12px 0;
}

.cc-auth__sub {
  font-family: var(--cc-type-body);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--cc-ink-70);
  margin: 0 0 28px 0;
}

.cc-auth__form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cc-auth__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-auth__label {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
}

.cc-auth__input {
  width: 100%;
  padding: 14px 16px;
  font-family: var(--cc-type-body);
  font-size: 16px; /* iOS Safari: prevents zoom on focus */
  line-height: 1.4;
  color: var(--cc-ink-90);
  background: var(--cc-paper);
  border: 1px solid rgba(11, 10, 9, 0.16);
  border-radius: 10px;
  outline: none;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.cc-auth__input::placeholder {
  color: var(--cc-ink-30);
}

.cc-auth__input:focus {
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 3px rgba(var(--cc-brand-rgb),0.12);
}

.cc-auth__error {
  font-family: var(--cc-type-body);
  font-size: 13px;
  color: #B43E3E;
  line-height: 1.45;
}

.cc-auth__loading {
  display: flex;
  justify-content: center;
}

.cc-auth__btn {
  width: 100%;
  margin-top: 6px;
}

.cc-auth__links {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}

.cc-auth__link {
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cc-brand);
  text-decoration: none;
  padding: 8px 4px;
  transition: opacity 160ms ease;
}

.cc-auth__link:hover {
  opacity: 0.75;
}

.cc-auth__contact {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(11, 10, 9, 0.08);
}

.cc-auth__contact-label {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  margin-bottom: 8px;
}

.cc-auth__contact-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cc-auth__contact-link {
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  color: var(--cc-ink-70);
  text-decoration: none;
  transition: color 160ms ease;
}

.cc-auth__contact-link:hover {
  color: var(--cc-ink-90);
}

.cc-auth__footer {
  margin-top: 32px;
  font-family: var(--cc-type-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--cc-ink-30);
  text-align: center;
}

/* ============================================================
   Account dropdown (header) + question-screen help row
   ============================================================ */

.cc-acct { position: relative; }

.cc-acct__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 6px;
  background: transparent;
  border: 1px solid rgba(11, 10, 9, 0.10);
  border-radius: 999px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.cc-acct__btn:hover { background: rgba(11, 10, 9, 0.04); border-color: rgba(11, 10, 9, 0.18); }
.cc-acct__btn:focus-visible { outline: 2px solid var(--cc-brand); outline-offset: 2px; }

.cc-acct__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--cc-brand);
  color: #fff;
  font-family: var(--cc-type-display);
  font-size: 12px;
  font-weight: 600;
  font-variation-settings: "opsz" 18;
  letter-spacing: 0;
}

.cc-acct__chev {
  font-family: var(--cc-type-mono);
  font-size: 9px;
  color: var(--cc-ink-50);
}

.cc-acct__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 260px;
  max-width: 320px;
  background: var(--cc-paper);
  border: 1px solid rgba(11, 10, 9, 0.10);
  border-radius: 12px;
  box-shadow: 0 8px 32px -8px rgba(11, 10, 9, 0.18), 0 2px 4px rgba(11, 10, 9, 0.06);
  padding: 6px;
  z-index: 50;
}

[x-cloak] { display: none !important; }

.cc-acct__header {
  padding: 10px 12px 12px 12px;
  border-bottom: 1px solid rgba(11, 10, 9, 0.06);
  margin-bottom: 6px;
}

.cc-acct__name {
  font-family: var(--cc-type-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink-90);
  line-height: 1.3;
}

.cc-acct__email {
  font-family: var(--cc-type-body);
  font-size: 12.5px;
  color: var(--cc-ink-50);
  margin-top: 2px;
  word-break: break-all;
}

.cc-acct__section-label {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  padding: 6px 12px 4px 12px;
}

.cc-acct__case {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: 0;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  color: var(--cc-ink-90);
  transition: background 120ms ease;
}

.cc-acct__case:hover { background: rgba(11, 10, 9, 0.05); }

.cc-acct__case-num {
  font-family: var(--cc-type-mono);
  font-size: 12px;
  color: var(--cc-ink-50);
  letter-spacing: 0.02em;
  min-width: 48px;
}

.cc-acct__case-label {
  flex: 1;
  font-weight: 500;
  color: var(--cc-ink-90);
}

.cc-acct__divider {
  height: 1px;
  background: rgba(11, 10, 9, 0.06);
  margin: 6px 0;
}

.cc-acct__item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  color: var(--cc-ink-90);
  transition: background 120ms ease;
}

.cc-acct__item:hover { background: rgba(11, 10, 9, 0.05); }

.cc-acct__item--logout {
  color: var(--cc-ink-70);
}

/* ============================================================
   Client notification bell (Phase C2b)
   Symmetric to the firm-staff Studio bell; reads the same store.
   ============================================================ */
.cc-bell { position: relative; }

.cc-bell__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid rgba(11, 10, 9, 0.10);
  border-radius: 999px;
  color: var(--cc-ink-70);
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.cc-bell__btn:hover { background: rgba(11, 10, 9, 0.04); border-color: rgba(11, 10, 9, 0.18); color: var(--cc-ink-90); }
.cc-bell__btn:focus-visible { outline: 2px solid var(--cc-brand); outline-offset: 2px; }

.cc-bell__badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 17px;
  height: 17px;
  padding: 0 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-brand);
  color: #fff;
  border: 2px solid var(--cc-paper);
  border-radius: 999px;
  font-family: var(--cc-type-mono);
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1;
}

.cc-bell__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: var(--cc-paper);
  border: 1px solid rgba(11, 10, 9, 0.10);
  border-radius: 12px;
  box-shadow: 0 8px 32px -8px rgba(11, 10, 9, 0.18), 0 2px 4px rgba(11, 10, 9, 0.06);
  padding: 6px;
  z-index: 50;
}

.cc-bell__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 10px 12px;
  border-bottom: 1px solid rgba(11, 10, 9, 0.06);
  margin-bottom: 4px;
}

.cc-bell__title {
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--cc-ink-90);
}

.cc-bell__markall {
  background: transparent;
  border: 0;
  padding: 2px 4px;
  cursor: pointer;
  font-family: var(--cc-type-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--cc-brand);
  border-radius: 6px;
  transition: background 120ms ease;
}

.cc-bell__markall:hover { background: rgba(var(--cc-brand-rgb),0.06); }
.cc-bell__markall:focus-visible { outline: 2px solid var(--cc-brand); outline-offset: 1px; }

.cc-bell__list {
  max-height: 380px;
  overflow-y: auto;
}

.cc-bell__item {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  transition: background 120ms ease;
}

.cc-bell__item:hover { background: rgba(11, 10, 9, 0.04); }

.cc-bell__item--unread { background: rgba(var(--cc-brand-rgb),0.035); }
.cc-bell__item--unread:hover { background: rgba(var(--cc-brand-rgb),0.06); }

.cc-bell__dot {
  flex: 0 0 auto;
  width: 8px;
  margin-top: 6px;
  display: flex;
  justify-content: center;
}

.cc-bell__dot-fill {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cc-brand);
}

.cc-bell__dot--status .cc-bell__dot-fill { background: var(--cc-amber-deep); }
.cc-bell__dot--payment .cc-bell__dot-fill { background: var(--cc-brand); }

.cc-bell__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cc-bell__item-title {
  font-family: var(--cc-type-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-ink-90);
  line-height: 1.35;
}

.cc-bell__item-text {
  font-family: var(--cc-type-body);
  font-size: 12.5px;
  color: var(--cc-ink-70);
  line-height: 1.4;
}

.cc-bell__time {
  font-family: var(--cc-type-mono);
  font-size: 10.5px;
  color: var(--cc-ink-50);
  margin-top: 2px;
}

.cc-bell__empty {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--cc-type-body);
  font-size: 13px;
  color: var(--cc-ink-50);
}

@media (max-width: 600px) {
  .cc-bell__menu { right: -8px; width: 300px; }
}

/* Question-screen help row (replaces D2C Intercom chat button) */
.cc-q-help-row {
  margin-top: 24px;
  padding: 14px 16px;
  background: var(--cc-paper-warm);
  border-radius: 12px;
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  color: var(--cc-ink-70);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  line-height: 1.5;
}

.cc-q-help-row__text { color: var(--cc-ink-50); }

.cc-q-help-row__link {
  color: var(--cc-brand);
  text-decoration: none;
  font-weight: 500;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.cc-q-help-row__link:hover { border-bottom-color: var(--cc-brand); }

.cc-q-help-row__sep { color: var(--cc-ink-30); }

@media (max-width: 600px) {
  .cc-acct__menu { right: -8px; min-width: 240px; }
}

/* ============================================================
   Application Tracker timeline (Journey tab — Phase 1)
   ============================================================ */

.cc-tracker {
  margin: 8px 0 28px 0;
  padding: 0;
  position: relative;
}

.cc-tracker__step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 10px 0 14px 0;
  position: relative;
}

/* Connector line between dots */
.cc-tracker__step:not(:last-child)::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 38px;
  bottom: -4px;
  width: 2px;
  background: rgba(11, 10, 9, 0.10);
  z-index: 0;
}

.cc-tracker__step--done:not(:last-child)::before {
  background: var(--cc-brand);
  opacity: 0.35;
}

.cc-tracker__dot {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--cc-type-mono);
  font-size: 11px;
  font-weight: 600;
  background: var(--cc-paper);
  border: 2px solid rgba(11, 10, 9, 0.14);
  color: var(--cc-ink-50);
}

.cc-tracker__dot--done {
  background: var(--cc-brand);
  border-color: var(--cc-brand);
  color: #fff;
  font-size: 13px;
}

.cc-tracker__dot--active {
  background: var(--cc-paper);
  border-color: var(--cc-brand);
  color: var(--cc-brand);
  box-shadow: 0 0 0 4px rgba(var(--cc-brand-rgb),0.10);
}

.cc-tracker__body {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.cc-tracker__title-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
}

.cc-tracker__title {
  font-family: var(--cc-type-body);
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink-90);
  letter-spacing: -0.005em;
}

.cc-tracker__step--pending .cc-tracker__title {
  color: var(--cc-ink-70);
  font-weight: 500;
}

.cc-tracker__eta {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  white-space: nowrap;
}

.cc-tracker__desc {
  margin-top: 4px;
  font-family: var(--cc-type-body);
  font-size: 13px;
  line-height: 1.5;
  color: var(--cc-ink-70);
}

.cc-tracker__step--pending .cc-tracker__desc {
  color: var(--cc-ink-50);
}

/* ------------------------------------------------------------------
   Phase C3 — plain-English status clarity (active step explainer).
   A calm, brand-tinted callout under the active step's description:
   a "what's happening now" line plus a quieter "what's next" line.
   Only rendered on the active step (blade-gated) to keep the journey
   scannable.
   ------------------------------------------------------------------ */
.cc-tracker__explainer {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--cc-brand-softer);
  border-left: 2px solid var(--cc-brand);
  border-radius: 8px;
}

.cc-tracker__explainer-now {
  margin: 0;
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cc-ink-90);
}

.cc-tracker__explainer-next {
  margin: 6px 0 0;
  font-family: var(--cc-type-body);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--cc-ink-70);
}

.cc-tracker__explainer-next-label {
  font-weight: 600;
  color: var(--cc-brand);
}

/* ============================================================
   Basic-form question screen: focused column
   The partial's input grid would otherwise span the full 840px
   cc-body. A narrower form column keeps the eye in one place
   and prevents wide inputs from looking stretched on desktop.
   ============================================================ */

.cc-q-progress,
.cc-q-question,
.cc-q-help,
.cc-q-existing-render,
.cc-q-actions,
.cc-q-help-row {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

/* Restore the existing margin pattern on each (max-width + auto
   shouldn't override their existing top/bottom margins) */
.cc-q-progress { margin-bottom: 32px; }
.cc-q-help { margin-bottom: 32px; }
.cc-q-actions { margin-top: 32px; }
.cc-q-help-row { margin-top: 24px; }

/* ============================================================
   Scoped input reskin (cc-root only)
   Overrides the Tailwind tokens (form-input, accent100, indigo)
   used across the 48 question-screen input components, so they
   adopt the calm-productivity palette without forking any blade.
   D2C inputs (no .cc-root ancestor) are not affected.
   ============================================================ */

/* Base input chrome */
/* Color + font only — DO NOT override structural Tailwind classes
   (padding, border-radius, height, etc.). Each component sets its
   own dimensions; we just swap the brand palette underneath. */
.cc-root .form-input,
.cc-root .form-select,
.cc-root input.form-input,
.cc-root select.form-input,
.cc-root select.form-select,
.cc-root textarea.form-input {
  background-color: #FFFFFF;
  border-color: rgba(11, 10, 9, 0.18);
  font-family: var(--cc-type-body);
  color: var(--cc-ink-90);
  box-shadow: 0 1px 2px rgba(11, 10, 9, 0.04);
}

.cc-root .form-input::placeholder,
.cc-root .form-select::placeholder {
  color: var(--cc-ink-30);
}

.cc-root .form-input:focus,
.cc-root .form-select:focus {
  border-color: var(--cc-brand) !important;
  box-shadow: 0 0 0 3px rgba(var(--cc-brand-rgb),0.12) !important;
  outline: none !important;
}

.cc-root .form-input:disabled,
.cc-root .form-select:disabled {
  background-color: rgba(11, 10, 9, 0.03);
  color: var(--cc-ink-50);
  cursor: not-allowed;
}

/* Labels — quiet mono-caption style */
.cc-root label.text-text100,
.cc-root label.text-gray-700,
.cc-root label.font-medium.text-sm,
.cc-root label.text-sm.font-medium {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  font-weight: 500;
  margin-bottom: 8px;
}

/* Accent100 → cc-brand wherever it appears */
.cc-root .bg-accent100 { background-color: var(--cc-brand) !important; }
.cc-root .border-accent100 { border-color: var(--cc-brand) !important; }
.cc-root .text-accent100 { color: var(--cc-brand) !important; }
.cc-root .hover\:bg-accent120:hover { background-color: var(--cc-brand-deep) !important; }
.cc-root .hover\:border-accent100:hover { border-color: var(--cc-brand) !important; }
.cc-root .hover\:text-accent100:hover { color: var(--cc-brand) !important; }
.cc-root .hover\:text-accent120:hover { color: var(--cc-brand-deep) !important; }

/* Toggle "on" state: the "No middle name" switch (and any peer-checked track)
   used a dull gray-500 when active, nearly indistinguishable from off. Light it
   up in the tenant brand — matching the option cards' selected state. */
.cc-root .peer:checked ~ .peer-checked\:bg-gray-500 {
  background-color: var(--cc-brand) !important;
}

/* Tailwind ring color override (utility name is .focus\:ring-accent100) */
.cc-root .focus\:ring-accent100:focus {
  --tw-ring-color: rgba(var(--cc-brand-rgb),0.18) !important;
}
.cc-root .focus\:border-accent100:focus {
  border-color: var(--cc-brand) !important;
}

/* Indigo outliers (select-input, file-input) fold into brand */
.cc-root .text-indigo-500,
.cc-root .text-indigo-600,
.cc-root .hover\:text-indigo-500:hover {
  color: var(--cc-brand) !important;
}
.cc-root .focus\:ring-indigo-500:focus,
.cc-root .focus-within\:ring-indigo-500:focus-within {
  --tw-ring-color: rgba(var(--cc-brand-rgb),0.18) !important;
}
.cc-root .focus\:border-indigo-500:focus {
  border-color: var(--cc-brand) !important;
}

/* Radio-select button (h-12 with border-2) — calmer rounded-lg */
.cc-root button[type='button'].rounded-lg.border-2 {
  border-radius: 10px;
}

/* File upload dashed border + label color */
.cc-root .border-dashed.border-gray-300,
.cc-root .border-dashed.border-gray-200 {
  border-color: rgba(11, 10, 9, 0.20) !important;
  background: var(--cc-paper);
}

/* Error states — gentler red */
.cc-root .text-red-600,
.cc-root .text-red-500,
.cc-root .text-red-900 {
  color: #B43E3E !important;
}
.cc-root .border-red-300,
.cc-root .border-red-500 {
  border-color: #E5A6A6 !important;
}

/* Optional callouts (e.g. "(Optional)" annotations and the No-Other-Names
   gray pill in other-names-input) — soften gray backgrounds */
.cc-root .bg-gray-50 { background-color: var(--cc-paper-warm) !important; }
.cc-root .bg-gray-100 { background-color: rgba(11, 10, 9, 0.05) !important; }
.cc-root .text-gray-500,
.cc-root .text-gray-600 { color: var(--cc-ink-50) !important; }
.cc-root .text-gray-700 { color: var(--cc-ink-70) !important; }
.cc-root .border-gray-200,
.cc-root .border-gray-300 { border-color: rgba(11, 10, 9, 0.10) !important; }

/* ============================================================
   Compound builder polish (other-names, prior-marriages,
   employment-history, address-history-multi)
   ============================================================ */

/* Yes/No segmented pill toggle (other-names-input)
   The unselected button retains the gray-50 paper container; the
   selected button switches from bg-white to a brand-tinted state so
   it reads as "this is the active choice". */
.cc-root .inline-flex.rounded-lg.border.bg-gray-50 {
  background: var(--cc-paper) !important;
  border: 1px solid rgba(11, 10, 9, 0.10) !important;
  padding: 4px;
  border-radius: 12px;
}

.cc-root .inline-flex.rounded-lg.border.bg-gray-50 > button {
  font-family: var(--cc-type-body);
  font-weight: 500;
  font-size: 13.5px;
  padding: 8px 18px;
  border-radius: 8px;
  transition: background 160ms ease, color 160ms ease;
}

/* Selected pill: bg-white + shadow-sm → brand-tinted */
.cc-root .inline-flex.rounded-lg.border.bg-gray-50 > button.bg-white {
  background: rgba(var(--cc-brand-rgb),0.10) !important;
  color: var(--cc-brand) !important;
  box-shadow: none !important;
}

/* Brand-tinted alpha utilities (accent100/5, accent100/10, accent100/30,
   accent100/50) used by address-history-multi's add button */
.cc-root [class*='accent100/5'],
.cc-root .bg-accent100\/5 { background-color: rgba(var(--cc-brand-rgb),0.04) !important; }
.cc-root .bg-accent100\/10,
.cc-root .hover\:bg-accent100\/10:hover { background-color: rgba(var(--cc-brand-rgb),0.08) !important; }
.cc-root .border-accent100\/30 { border-color: rgba(var(--cc-brand-rgb),0.30) !important; }
.cc-root .hover\:border-accent100\/50:hover { border-color: rgba(var(--cc-brand-rgb),0.50) !important; }

/* Entry / row cards across all four compound builders.
   Already touched by bg-gray-50 → paper-warm in PR #102; this just
   refines the radius and border so the cards feel calm. */
.cc-root .bg-gray-50.border.border-gray-200.rounded-lg,
.cc-root .bg-paper-warm.border.border-gray-200.rounded-lg {
  background: var(--cc-paper-warm) !important;
  border: 1px solid rgba(11, 10, 9, 0.08) !important;
  border-radius: 12px;
}

/* "Add Another" / "Add another address" dashed CTA — heavier padding,
   calmer hover, mono caption to feel intentional, not chrome-y */
.cc-root button.border-2.border-dashed {
  padding: 14px 16px !important;
  border-radius: 12px !important;
  font-family: var(--cc-type-body) !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease !important;
}

.cc-root button.border-2.border-dashed:hover {
  background: rgba(var(--cc-brand-rgb),0.04) !important;
}

/* Warning callouts (amber-50 / amber-200 / text-amber-600) used by
   address-history & employment-history "gaps" warnings. Calm amber. */
.cc-root .bg-amber-50 { background-color: rgba(245, 158, 11, 0.08) !important; }
.cc-root .border-amber-200 { border-color: rgba(245, 158, 11, 0.28) !important; }
.cc-root .text-amber-600 { color: #B07013 !important; }

/* Success callouts (green-100 / green-600 / green-800) — calm emerald,
   not the saturated Tailwind green. */
.cc-root .bg-green-100 { background-color: rgba(16, 122, 67, 0.10) !important; }
.cc-root .text-green-600 { color: #107A43 !important; }
.cc-root .text-green-800 { color: #0A5430 !important; }
.cc-root .border-green-200 { border-color: rgba(16, 122, 67, 0.24) !important; }

/* Other-names entry header label ("Other Name #1") — already converted
   to ink-50 via gray-500 override in PR #102. Tighten margins. */
.cc-root .text-xs.font-medium.text-gray-500 {
  font-family: var(--cc-type-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Remove (x) icon on row cards — softer hover red */
.cc-root .hover\:text-red-500:hover { color: #B43E3E !important; }

/* Disabled phase tab — Phase 2 before the application is ready
   for signature. Reads as 'upcoming, not yet active', not 'broken'. */
.cc-phase-tab--disabled {
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}

.cc-phase-tab--disabled .cc-phase-tab__label {
  color: var(--cc-ink-30);
}

.cc-phase-tab--disabled .cc-phase-tab__title {
  color: var(--cc-ink-50);
  font-weight: 500;
}

.cc-phase-tab--disabled .cc-phase-tab__status {
  color: var(--cc-ink-30);
}

/* ============================================================
   Radio-select button: text overflow fix
   The component renders buttons with fixed h-12 which clips
   wrapped text like "Lawful Permanent Resident". Switch to
   min-height with auto wrap so long-text options breathe.
   Leave font-size, padding, etc. to the component's own classes.
   ============================================================ */
.cc-root button.h-12.rounded-lg.border-2,
.cc-root button.h-12.px-4.text-sm.font-medium.rounded-lg.border-2 {
  height: auto !important;
  min-height: 48px;
  white-space: normal !important;
  overflow-wrap: break-word;
  line-height: 1.35;
  hyphens: none;
}

/* When buttons stack 2-up horizontally with long-text options,
   reflow gracefully on narrow viewports */
@media (max-width: 520px) {
  .cc-root .flex.gap-3 > button.h-12 {
    flex: 1 1 100%;
  }
  .cc-root .flex.gap-3 {
    flex-direction: column;
  }
}

/* ============================================================
   Dropdown selected-value truncation fix
   PR #102 added padding-right: 36px on .cc-root select.form-input
   for the custom caret SVG. In tight 2-col grids (e.g.
   city-state-separate-input on a narrow viewport) that 36px ate
   into text area and clipped values like "California". Tighten
   the right padding, add ellipsis as a graceful fallback, and
   collapse 2-col field grids on small screens.
   ============================================================ */

/* Custom dropdown (Alpine-powered) gets the same color treatment as
   form-input — keep its own padding so the caret SVG inside it stays
   correctly positioned. */
.cc-root .relative.w-full.bg-white.border.rounded-lg.shadow-sm {
  border-color: rgba(11, 10, 9, 0.16) !important;
  background: var(--cc-paper) !important;
}

.cc-root .absolute.z-50.mt-1.w-full.bg-white.rounded-lg.shadow-lg {
  background: var(--cc-paper) !important;
  border: 1px solid rgba(11, 10, 9, 0.10) !important;
  box-shadow: 0 8px 32px -8px rgba(11, 10, 9, 0.18), 0 2px 4px rgba(11, 10, 9, 0.06) !important;
}

/* Collapse 2-col field grids (City + State, etc.) on narrow viewports
   so each field has full width breathing room */
@media (max-width: 520px) {
  .cc-root .grid.grid-cols-2.gap-3 {
    grid-template-columns: 1fr !important;
  }
}

/* Tiny labels above sub-fields (City / State) — quiet mono caption */
.cc-root label.block.text-xs.text-gray-500 {
  font-family: var(--cc-type-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  margin-bottom: 6px;
}

/* Ensure inputs inside compound builders span the full grid cell width.
   Components use w-full Tailwind class — this is a width: 100% safeguard
   for any input that loses width when sitting inside the compound card. */
.cc-root .bg-gray-50.border.rounded-lg input.form-input,
.cc-root .grid.grid-cols-1.md\:grid-cols-3 input.form-input {
  width: 100%;
  min-width: 0;
}

/* ============================================================
   Aurora suggestion · Tenant palette
   The aurora-suggestion partial uses Tailwind yellow tokens
   (yellow-50, yellow-200, yellow-600, yellow-700, yellow-900)
   which read as a bright "alert" inside the calm cc-* surfaces.
   Soften to amber-tinted + brand-blue CTAs so suggestions feel
   like a quiet attorney note, not a system warning.
   ============================================================ */

.cc-root .bg-yellow-50 {
  background-color: rgba(245, 158, 11, 0.06) !important;
}

.cc-root .border-yellow-200,
.cc-root .border-yellow-300 {
  border-color: rgba(245, 158, 11, 0.28) !important;
}

.cc-root .text-yellow-700,
.cc-root .text-yellow-800,
.cc-root .text-yellow-900 {
  color: var(--cc-ink-90) !important;
}

.cc-root .text-yellow-800\/80 {
  color: var(--cc-ink-70) !important;
}

.cc-root .text-yellow-700 svg,
.cc-root .text-yellow-800 svg {
  color: #B07013 !important;
}

/* Accept suggestion button — was yellow-600/700; switch to brand-blue
   so it reads as the primary action in the cc-* system */
.cc-root .bg-yellow-600,
.cc-root .hover\:bg-yellow-700:hover {
  background-color: var(--cc-brand) !important;
  color: #fff !important;
}

/* Conflict candidate button hover */
.cc-root .hover\:border-yellow-400:hover {
  border-color: var(--cc-brand) !important;
}

.cc-root .hover\:bg-yellow-100:hover,
.cc-root .hover\:bg-yellow-50:hover {
  background-color: rgba(var(--cc-brand-rgb),0.04) !important;
}

/* Confidence radio circle on candidate buttons */
.cc-root .border-yellow-500 {
  border-color: var(--cc-brand) !important;
  opacity: 0.6;
}

/* "Type my own" dismiss link */
.cc-root .text-yellow-800.underline,
.cc-root .hover\:text-yellow-900:hover {
  color: var(--cc-brand) !important;
}

/* Radius consistency: the partial uses rounded-lg/md/full, which look a touch
   sharp (banner) and a touch pill-y (buttons) next to the cc field + card radii.
   Marker class scopes this to the aurora banner only; D2C never matches it. */
.cc-root .cc-aurora-banner { border-radius: 14px !important; }
.cc-root .cc-aurora-banner button { border-radius: 10px !important; }

/* Tracker step badge (e.g. "Done Mar 18") + action link */
.cc-tracker__badge {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cc-brand);
  background: rgba(var(--cc-brand-rgb),0.08);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Phase C1 — case deadline countdown on the active journey step. Upcoming uses
   the amber "attention" token; overdue (--at-risk) escalates to the rose token
   so an at-risk case reads immediately. Read-only for the client. */
.cc-tracker__deadline {
  font-family: var(--cc-type-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cc-amber-deep);
  background: rgba(179, 137, 47, 0.10);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.cc-tracker__deadline--at-risk {
  color: var(--cc-rose-deep);
  background: rgba(161, 78, 69, 0.10);
}

.cc-tracker__action {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--cc-brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 160ms ease;
}

.cc-tracker__action:hover {
  border-bottom-color: var(--cc-brand);
}

/* ============================================================
   Case Center two-column layout (Journey tab)
   Below 1024px: single column, status bar above main, timeline
   below sections. Above 1024px: 60/40 grid, status + timeline
   in sticky right aside. Reorder driven by display: none toggles
   on the two status-bar copies so each appears once.
   ============================================================ */

.cc-layout {
  display: block;
}

.cc-sub--tight {
  margin-bottom: 24px;
  max-width: 60ch;
}

.cc-status-bar--phone { display: flex; }
.cc-status-bar--desktop { display: none; }

/* On phones .cc-layout is a single block, so the aside stacks directly
   under the main column's section cards. Give its heading a clear top
   margin so "What's happening at …" doesn't butt against the boxes above.
   The desktop rule below resets this (the sticky aside aligns to the top
   of the main column, where a large margin would misalign the columns). */
.cc-layout__side .cc-section-label {
  margin-top: 32px;
}

@media (min-width: 1024px) {
  .cc-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.65fr);
    gap: 32px;
    align-items: start;
  }

  .cc-layout__main { min-width: 0; }
  .cc-layout__side {
    min-width: 0;
    position: sticky;
    top: 24px;
  }

  /* Swap which status bar copy is visible */
  .cc-status-bar--phone { display: none; }
  .cc-status-bar--desktop { display: flex; }

  /* Tighten the aside's first section label so it doesn't get
     overshadowed by its own top margin */
  .cc-layout__side .cc-section-label {
    margin-top: 24px;
  }

  /* cc-body is 840px max-width — bump to 1080px on desktop so the
     two-column layout has room without feeling cramped */
  .cc-body { max-width: 1080px; }
}

/* ============================================================
   Final Application Review · inner component palette overrides
   The shared livewire.final-application-review uses Tailwind
   tokens (indigo, orange-500, green-50, blue-50, red-100) that
   don't fit the calm cc palette. Scoped overrides bring them in
   line when rendered inside .cc-root (tenant context only).
   ============================================================ */

/* Primary CTAs that used indigo or accent — fold to brand-blue */
.cc-root .bg-indigo-600,
.cc-root .hover\:bg-indigo-700:hover,
.cc-root .bg-blue-600,
.cc-root .hover\:bg-blue-700:hover {
  background-color: var(--cc-brand) !important;
  color: #fff !important;
}

.cc-root .text-blue-600,
.cc-root .text-blue-700,
.cc-root .text-blue-800,
.cc-root .text-blue-900 { color: var(--cc-brand) !important; }

.cc-root .bg-blue-50 { background-color: rgba(var(--cc-brand-rgb),0.06) !important; }
.cc-root .border-blue-200 { border-color: rgba(var(--cc-brand-rgb),0.20) !important; }

/* Annotation mode toggle — was bg-orange-500 when active. Use a
   muted amber so it doesn't shout against the cream paper. */
.cc-root .bg-orange-500 { background-color: #B07013 !important; color: #fff !important; }

/* Success states (e.g. "PDF loaded" green) */
.cc-root .bg-green-50 { background-color: rgba(16, 122, 67, 0.06) !important; }

/* Error state pill */
.cc-root .bg-red-100 { background-color: rgba(180, 62, 62, 0.10) !important; }

/* Toolbar rows inside the review (page nav, zoom) */
.cc-root .bg-gray-100 { background-color: rgba(11, 10, 9, 0.04) !important; }
.cc-root .hover\:bg-gray-200:hover { background-color: rgba(11, 10, 9, 0.08) !important; }
.cc-root .border-gray-100 { border-color: rgba(11, 10, 9, 0.06) !important; }

/* Final-app review PDF canvas wrapper — give it a calm paper bg so
   the white PDF stands out and the toolbar matches */
.cc-root [x-data*="pdfAnnotationViewer"] {
  background: var(--cc-paper);
  border-radius: 12px;
}

/* ============================================================
   Review Q/A — more breathing room between question and answer
   ============================================================ */
.cc-review-qa { padding: 18px 0; }

.cc-review-qa__body { display: flex; flex-direction: column; gap: 6px; }
.cc-review-qa__q { margin-bottom: 8px; line-height: 1.5; }
.cc-review-qa__a { line-height: 1.5; }

/* Grouped questions (e.g. address with street/city/state/zip) — each
   sub-field gets its own row with label + value */
.cc-review-qa__grouped {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.cc-review-qa__grouped-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 2px 0;
}

.cc-review-qa__grouped-label {
  flex: 0 0 auto;
  font-family: var(--cc-type-mono);
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  min-width: 100px;
}

.cc-review-qa__grouped-val {
  flex: 1;
  font-family: var(--cc-type-body);
  font-size: 14px;
  color: var(--cc-ink-90);
  word-break: break-word;
}

/* ============================================================
   Radio-select button — ensure text is centered and contained
   The prior fix added height: auto + word-break, but on desktop
   the button had no display rule so text could sit awkwardly.
   Force inline-flex centering + sensible padding so the option
   label always fits inside the button silhouette.
   ============================================================ */
.cc-root button.h-12.rounded-lg.border-2,
.cc-root button.h-12.px-4.text-sm.font-medium.rounded-lg.border-2 {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 10px 18px !important;
  text-align: center;
}

/* ============================================================
   Header overflow fix — name/sub text was bleeding into the
   right-nav (Save & exit) on mobile because the title wrapper
   under .cc-header__logo-row had no min-width: 0 and so its
   children's text-overflow: ellipsis never kicked in.
   Target .cc-header__title specifically — a bare `> div` selector
   also matches the .cc-header__logo avatar div (no-logo tenants),
   which would override its fixed 28px size and stretch it to fill.
   ============================================================ */
.cc-header__title {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
}

/* Tighten header on narrow viewports so the Save & exit button has
   guaranteed room and the name+sub gets to ellipsize cleanly. */
@media (max-width: 600px) {
  .cc-header { padding: 14px 14px; gap: 10px; }
  .cc-header__name { font-size: 13px; }
  .cc-header__sub { font-size: 10px; }
}

@media (max-width: 420px) {
  .cc-header__logo-img { max-width: 80px; }
}

/* ============================================================
   Validation error banner on question screen
   Shown above Continue when $errors->any() — surfaces what
   failed so users aren't stuck clicking a button that silently
   re-renders.
   ============================================================ */
.cc-validation-banner {
  margin-top: 24px;
  padding: 14px 18px;
  background: rgba(180, 62, 62, 0.06);
  border-left: 3px solid #B43E3E;
  border-radius: 0 12px 12px 0;
}

.cc-validation-banner__title {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B43E3E;
  margin-bottom: 8px;
}

.cc-validation-banner__list {
  margin: 0;
  padding-left: 18px;
  font-family: var(--cc-type-body);
  font-size: 13.5px;
  color: var(--cc-ink-90);
  line-height: 1.55;
}

.cc-validation-banner__list li { padding: 2px 0; }

/* Safety belt — make the brand-blue Continue button impossible to lose
   to any future override. NO .cc-root ancestor requirement, because
   the basic-form-content partial sometimes leaks cc-q-actions outside
   .cc-root, and white-text-on-transparent-bg makes the button invisible.
   cc-btn--primary is a tenant-only class, so this doesn't leak to D2C. */
.cc-btn.cc-btn--primary,
button.cc-btn.cc-btn--primary {
  background: var(--cc-brand) !important;
  background-color: var(--cc-brand) !important;
  color: #FFFFFF !important;
  border: 0 !important;
}

.cc-btn.cc-btn--primary:hover,
button.cc-btn.cc-btn--primary:hover {
  background: var(--cc-brand-hover, #002A7D) !important;
  background-color: var(--cc-brand-hover, #002A7D) !important;
}

/* ============================================================
   First-run setup CTA — landing point for clients who just got
   their magic link and haven't started any modules yet.
   ============================================================ */
.cc-setup-cta {
  margin-top: 24px;
  margin-bottom: 24px;
  background: var(--cc-paper-warm);
  border: 1px solid rgba(11, 10, 9, 0.08);
  border-radius: 16px;
  padding: 24px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: 0 1px 2px rgba(11, 10, 9, 0.04);
}

.cc-setup-cta__copy {
  flex: 1;
  min-width: 0;
}

.cc-setup-cta__eyebrow {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-brand);
  margin-bottom: 6px;
}

.cc-setup-cta__title {
  font-family: var(--cc-type-display);
  font-size: 22px;
  font-weight: 500;
  font-variation-settings: "opsz" 48;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--cc-ink-90);
  margin-bottom: 6px;
}

.cc-setup-cta__sub {
  font-family: var(--cc-type-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-ink-70);
}

.cc-setup-cta__btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 600px) {
  .cc-setup-cta {
    flex-direction: column;
    align-items: stretch;
    padding: 20px;
    gap: 16px;
  }
  .cc-setup-cta__btn { width: 100%; }
}

/* ============================================================
   Grouped questions — inline rendering in basic-form-tenant
   (replaces the legacy partial path which leaked divs outside
   .cc-root and broke Continue/Previous on grouped questions).
   ============================================================ */
.cc-q-grouped {
  display: flex;
  flex-direction: column;
  gap: 24px;
  text-align: left;
}

.cc-q-grouped__field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cc-q-grouped__label {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  font-weight: 500;
}

.cc-q-grouped__exp {
  font-family: var(--cc-type-body);
  font-size: 12.5px;
  color: var(--cc-ink-50);
  line-height: 1.5;
  margin: 4px 0 0 0;
}

/* ============================================================
 * COMMENTS — attorney comment thread on a question/document
 * Embedded inside basic-form, doc-uploaded-files, module-review,
 * final-application-review. Must render correctly whether the
 * host scopes .cc-root or not, so each rule uses cc-cmt-* tokens
 * directly with no ancestor requirement.
 * ============================================================ */

.cc-cmt-thread {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: 500px;
  overflow-y: auto;
  padding-right: 4px;
  scroll-behavior: smooth;
}

.cc-cmt-thread::-webkit-scrollbar { width: 6px; }
.cc-cmt-thread::-webkit-scrollbar-track { background: transparent; }
.cc-cmt-thread::-webkit-scrollbar-thumb {
  background-color: var(--cc-ink-30);
  border-radius: 3px;
}
.cc-cmt-thread::-webkit-scrollbar-thumb:hover { background-color: var(--cc-ink-50); }

.cc-cmt-card {
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-left: 2px solid var(--cc-brand);
  border-radius: 0 10px 10px 0;
  padding: 16px 18px;
  transition: border-color var(--cc-motion-quick);
}

.cc-cmt-card--resolved {
  background: var(--cc-paper-warm);
  border: 1px solid var(--cc-line-soft);
  border-left: 2px solid var(--cc-emerald-deep);
  opacity: 0.92;
}

.cc-cmt-resolved-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--cc-type-body);
}

.cc-cmt-resolved-header__left {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.cc-cmt-resolved-header__preview {
  font-size: 12.5px;
  color: var(--cc-ink-50);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 32ch;
}

.cc-cmt-resolved-header__chevron {
  width: 16px;
  height: 16px;
  color: var(--cc-ink-50);
  transition: transform var(--cc-motion-base);
  flex-shrink: 0;
}

.cc-cmt-resolved-header__chevron--open { transform: rotate(180deg); }

.cc-cmt-body {
  padding-top: 12px;
}

.cc-cmt-card--resolved .cc-cmt-body {
  border-top: 1px dashed var(--cc-line);
  margin-top: 10px;
}

.cc-cmt-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.cc-cmt-row + .cc-cmt-row { margin-top: 14px; }

.cc-cmt-row--user {
  justify-content: flex-end;
}

.cc-cmt-row--follow-up {
  margin-left: 44px;
}

.cc-cmt-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.cc-cmt-avatar svg { width: 18px; height: 18px; }

.cc-cmt-avatar--admin {
  background: var(--cc-brand);
  color: #fff;
}

.cc-cmt-avatar--admin-mini {
  background: var(--cc-brand-soft);
  color: var(--cc-brand);
  width: 28px;
  height: 28px;
}
.cc-cmt-avatar--admin-mini svg { width: 14px; height: 14px; }

.cc-cmt-avatar--user {
  background: var(--cc-paper-warm);
  color: var(--cc-ink-70);
  border: 1px solid var(--cc-line);
}

.cc-cmt-content {
  max-width: 85%;
  min-width: 0;
}

.cc-cmt-content--user {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.cc-cmt-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.cc-cmt-meta--user { justify-content: flex-end; }

.cc-cmt-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--cc-type-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 500;
}

.cc-cmt-badge--admin {
  background: var(--cc-brand-soft);
  color: var(--cc-brand);
}

.cc-cmt-badge--resolved {
  background: var(--cc-emerald-soft);
  color: var(--cc-emerald-deep);
}

.cc-cmt-badge svg { width: 11px; height: 11px; }

.cc-cmt-time {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  color: var(--cc-ink-50);
  cursor: help;
}

.cc-cmt-author {
  font-family: var(--cc-type-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--cc-ink-70);
}

.cc-cmt-bubble {
  font-family: var(--cc-type-body);
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 16px;
  border-radius: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.cc-cmt-bubble--admin {
  background: var(--cc-paper-warm);
  color: var(--cc-ink-90);
  border-top-left-radius: 4px;
}

.cc-cmt-bubble--user {
  background: var(--cc-brand);
  color: #fff;
  border-top-right-radius: 4px;
}

.cc-cmt-divider {
  margin: 16px 0 0;
  padding-top: 12px;
  border-top: 1px dashed var(--cc-line);
}

.cc-cmt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.cc-cmt-action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cc-type-body);
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  transition: all var(--cc-motion-quick);
  letter-spacing: -0.005em;
}

.cc-cmt-action svg { width: 14px; height: 14px; }

.cc-cmt-action--resolve {
  background: var(--cc-brand);
  color: #fff;
}
.cc-cmt-action--resolve:hover { background: var(--cc-brand-hover); }

.cc-cmt-action--reply {
  background: transparent;
  color: var(--cc-ink-70);
  border: 1px solid var(--cc-line);
}
.cc-cmt-action--reply:hover {
  color: var(--cc-ink-100);
  border-color: var(--cc-ink-50);
}

.cc-cmt-action[disabled],
.cc-cmt-action.cc-is-loading {
  opacity: 0.6;
  cursor: not-allowed;
}

.cc-cmt-resolved-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--cc-emerald-soft);
  color: var(--cc-emerald-deep);
  font-weight: 500;
}
.cc-cmt-resolved-pill svg { width: 12px; height: 12px; }

.cc-cmt-reply-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.cc-cmt-reply-input {
  flex: 1;
  font-family: var(--cc-type-body);
  font-size: 14px;
  line-height: 1.5;
  color: var(--cc-ink-100);
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  padding: 12px 14px;
  resize: vertical;
  min-height: 64px;
  transition: border-color var(--cc-motion-quick), box-shadow var(--cc-motion-quick);
}

.cc-cmt-reply-input:focus {
  outline: 0;
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 3px var(--cc-brand-soft);
}

.cc-cmt-reply-input::placeholder {
  color: var(--cc-ink-50);
}

.cc-cmt-reply-controls {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cc-cmt-icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background var(--cc-motion-quick), color var(--cc-motion-quick);
}

.cc-cmt-icon-btn svg { width: 18px; height: 18px; }

.cc-cmt-icon-btn--primary {
  background: var(--cc-brand);
  color: #fff;
}
.cc-cmt-icon-btn--primary:hover { background: var(--cc-brand-hover); }

.cc-cmt-icon-btn--ghost {
  background: var(--cc-paper-warm);
  color: var(--cc-ink-70);
}
.cc-cmt-icon-btn--ghost:hover { color: var(--cc-ink-100); }

.cc-cmt-icon-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@keyframes cc-cmt-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes cc-cmt-slide-up {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.cc-cmt-anim-fade { animation: cc-cmt-fade-in 0.25s ease-out forwards; }
.cc-cmt-anim-slide { animation: cc-cmt-slide-up 0.22s ease-out forwards; }

/* Narrow viewports: stop using 85% width bubbles + bring follow-ups in line */
@media (max-width: 480px) {
  .cc-cmt-content { max-width: 100%; }
  .cc-cmt-row--follow-up { margin-left: 0; }
  .cc-cmt-reply-form { flex-direction: column; align-items: stretch; }
  .cc-cmt-reply-controls { flex-direction: row; justify-content: flex-end; }
}

/* ============================================================
 * PRE-CASE FUNNEL (tenant variants of visa search / eligibility /
 * payment screens reached from the admin-minted magic link)
 * ============================================================ */

/* --- Info list (what-to-expect feature rows) --- */

.cc-info-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 28px 0;
}

.cc-info-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line-soft);
  border-radius: 12px;
}

.cc-info-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--cc-brand-soft);
  color: var(--cc-brand);
}

.cc-info-item__icon svg {
  width: 18px;
  height: 18px;
}

.cc-info-item__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--cc-ink-100);
  line-height: 1.4;
}

.cc-info-item__desc {
  font-size: 13.5px;
  color: var(--cc-ink-70);
  line-height: 1.5;
  margin-top: 2px;
}

/* --- Price cards (consular pricing, fees, payment amounts) --- */

.cc-price-card {
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 12px 0;
  box-shadow: var(--cc-shadow-card);
}

.cc-price-card--primary {
  border-color: var(--cc-brand);
  border-width: 1.5px;
}

.cc-price-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.cc-price-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink-100);
  line-height: 1.4;
}

.cc-price-sub {
  font-size: 13px;
  color: var(--cc-ink-70);
  line-height: 1.5;
  margin-top: 2px;
}

.cc-price-amount {
  font-family: var(--cc-type-display);
  font-size: 22px;
  font-weight: 600;
  color: var(--cc-ink-100);
  white-space: nowrap;
}

.cc-price-strike {
  font-size: 14px;
  font-weight: 400;
  color: var(--cc-ink-50);
  text-decoration: line-through;
  margin-left: 6px;
}

.cc-price-check {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  color: var(--cc-ink-70);
  line-height: 1.6;
}

.cc-price-check::before {
  content: '✓';
  color: var(--cc-emerald-deep);
  font-weight: 700;
  flex-shrink: 0;
}

/* --- Funnel page centering (narrow single-column screens) --- */

.cc-funnel-body {
  max-width: 560px;
  margin: 0 auto;
  padding: 40px 20px 64px;
  min-height: 70vh;
}

.cc-funnel-body .cc-h1 {
  text-align: center;
}

.cc-funnel-body .cc-sub {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.cc-funnel-eyebrow {
  text-align: center;
  margin-bottom: 10px;
}

.cc-funnel-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-top: 32px;
  text-align: center;
}

.cc-funnel-actions .cc-sub {
  margin: 0;
}

@media (max-width: 480px) {
  .cc-funnel-body { padding: 28px 16px 48px; }
}

/* --- Generic form fields (funnel forms outside the auth card) --- */

.cc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 16px 0;
  text-align: left;
}

.cc-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-ink-90);
  letter-spacing: 0.01em;
}

.cc-input {
  width: 100%;
  font-family: var(--cc-type-body);
  font-size: 16px; /* >=16px so iOS Safari doesn't zoom on focus */
  color: var(--cc-ink-100);
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 10px;
  padding: 12px 14px;
  outline: none;
  transition: border-color var(--cc-motion-quick), box-shadow var(--cc-motion-quick);
}

.cc-input:focus {
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 3px var(--cc-brand-soft);
}

.cc-input::placeholder {
  color: var(--cc-ink-30);
}

.cc-field-error {
  font-size: 12.5px;
  color: var(--cc-rose-deep);
}

.cc-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 16px 0;
  font-size: 14px;
  color: var(--cc-ink-90);
  line-height: 1.5;
  cursor: pointer;
  text-align: left;
}

.cc-checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--cc-brand);
}

.cc-section-h {
  font-family: var(--cc-type-display);
  font-size: 19px;
  font-weight: 600;
  color: var(--cc-ink-100);
  margin: 28px 0 4px;
  text-align: left;
}

.cc-fineprint {
  font-size: 12.5px;
  color: var(--cc-ink-50);
  line-height: 1.6;
  text-align: center;
  margin-top: 18px;
}

.cc-fineprint a {
  color: var(--cc-brand);
  text-decoration: none;
}

/* --- Modal (agent-call dialog on eligibility preview) --- */

.cc-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.cc-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 20, 25, 0.45);
}

.cc-modal__card {
  position: relative;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 16px;
  padding: 32px 28px;
  box-shadow: 0 12px 48px rgba(15, 20, 25, 0.18);
}

.cc-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--cc-ink-50);
  cursor: pointer;
  transition: background var(--cc-motion-quick), color var(--cc-motion-quick);
}

.cc-modal__close:hover {
  background: var(--cc-paper-warm);
  color: var(--cc-ink-100);
}

.cc-modal__close svg {
  width: 18px;
  height: 18px;
}

/* --- Payment options --- */

.cc-pay-options {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 24px;
}

.cc-divider-or {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: var(--cc-ink-50);
  text-transform: lowercase;
}

.cc-divider-or::before,
.cc-divider-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cc-line);
}

.cc-pay-option {
  width: 100%;
  font-family: var(--cc-type-body);
  font-size: 15px;
  font-weight: 600;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 10px;
  border: 1.5px solid var(--cc-line);
  background: var(--cc-paper-elev);
  color: var(--cc-ink-90);
  cursor: pointer;
  transition: border-color var(--cc-motion-quick), background var(--cc-motion-quick), color var(--cc-motion-quick);
}

.cc-pay-option:hover {
  border-color: var(--cc-brand);
  color: var(--cc-brand);
}

.cc-pay-option--selected {
  border-color: var(--cc-brand);
  background: var(--cc-brand-soft);
  color: var(--cc-brand);
}

.cc-pay-panel {
  margin-top: 12px;
  padding: 18px;
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  text-align: left;
}

.cc-pay-panel__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink-100);
  margin-bottom: 12px;
}

.cc-pay-panel .cc-fineprint {
  text-align: left;
}

.cc-pay-summary {
  background: var(--cc-paper-warm);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.cc-pay-summary__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  color: var(--cc-ink-70);
  padding: 3px 0;
}

.cc-pay-summary__row--total {
  border-top: 1px solid var(--cc-line);
  margin-top: 6px;
  padding-top: 8px;
}

.cc-pay-summary__value {
  font-weight: 600;
  color: var(--cc-ink-100);
}

.cc-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  margin: 4px auto;
}

.cc-badge--success {
  background: var(--cc-emerald-soft);
  color: var(--cc-emerald-deep);
}

.cc-badge--error {
  background: var(--cc-rose-soft);
  color: var(--cc-rose-deep);
  border-radius: 10px;
  width: 100%;
  justify-content: center;
}

.cc-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cc-price-discount {
  color: var(--cc-emerald-deep);
}

.cc-calendly-frame {
  min-width: 320px;
  height: 600px;
}

.cc-pay-confirmed {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--cc-emerald-soft);
  border-radius: 10px;
  padding: 14px 16px;
}

.cc-pay-confirmed__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cc-emerald-deep);
  margin-bottom: 2px;
}

.cc-pay-confirmed__sub {
  font-size: 13.5px;
  color: var(--cc-ink-90);
  line-height: 1.5;
}

.cc-input-currency {
  position: relative;
  display: flex;
  align-items: center;
}

.cc-input-currency > span {
  position: absolute;
  left: 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink-70);
}

.cc-input-currency .cc-input {
  padding-left: 28px;
}

/* --- Case-center payment surfaces (trial banner, deferral status,
 *     final / custom balance payment) --- */

.cc-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 10px;
  margin-bottom: 20px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
}

.cc-banner--warning {
  background: var(--cc-amber-soft);
  color: var(--cc-amber-deep);
}

.cc-banner svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.cc-progress-track {
  width: 100%;
  height: 8px;
  border-radius: 999px;
  background: var(--cc-paper-warm);
  overflow: hidden;
}

.cc-progress-fill {
  height: 100%;
  border-radius: 999px;
  background: var(--cc-brand);
  transition: width var(--cc-motion-base);
}

.cc-pay-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
}

.cc-pay-status-pill--scheduled { background: var(--cc-amber-soft); color: var(--cc-amber-deep); }
.cc-pay-status-pill--charged { background: var(--cc-emerald-soft); color: var(--cc-emerald-deep); }
.cc-pay-status-pill--failed,
.cc-pay-status-pill--canceled { background: var(--cc-rose-soft); color: var(--cc-rose-deep); }
.cc-pay-status-pill--default { background: var(--cc-paper-warm); color: var(--cc-ink-70); }

.cc-pay-alert {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border-left: 3px solid var(--cc-rose-deep);
  background: var(--cc-rose-soft);
}

.cc-pay-alert__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cc-rose-deep);
}

.cc-pay-alert__body {
  font-size: 13.5px;
  color: var(--cc-ink-90);
  line-height: 1.5;
  margin-top: 4px;
}

.cc-pay-collapse {
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 12px;
  margin: 20px 0;
  overflow: hidden;
  box-shadow: var(--cc-shadow-card);
}

.cc-pay-collapse__head {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--cc-type-body);
}

.cc-pay-collapse__title {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--cc-ink-100);
}

.cc-pay-collapse__amount {
  font-size: 13px;
  color: var(--cc-ink-70);
  margin-top: 2px;
}

.cc-pay-collapse__chev {
  flex-shrink: 0;
  color: var(--cc-ink-50);
  transition: transform var(--cc-motion-quick);
}

.cc-pay-collapse__chev--open {
  transform: rotate(180deg);
}

.cc-pay-collapse__body {
  padding: 0 18px 18px;
}

.cc-pay-history {
  border-top: 1px solid var(--cc-line);
  margin-top: 14px;
  padding-top: 10px;
}

.cc-pay-history__row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--cc-ink-70);
  padding: 3px 0;
}

/* --- USCIS tab: multi-receipt cards, on-demand check, flash rows --- */

.cc-uscis-flash {
  padding: 11px 16px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 14px;
}

.cc-uscis-flash--ok {
  background: var(--cc-emerald-soft);
  color: var(--cc-emerald-deep);
}

.cc-uscis-flash--err {
  background: var(--cc-rose-soft);
  color: var(--cc-rose-deep);
}

.cc-uscis-card + .cc-uscis-card {
  margin-top: 14px;
}

.cc-uscis-card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.cc-uscis-card__actions {
  display: flex;
  gap: 8px;
}

.cc-uscis-action {
  min-height: 36px;
  padding: 6px 14px;
  font-size: 13px;
}

.cc-uscis-action--remove {
  color: var(--cc-rose-deep);
}

@media (max-width: 480px) {
  .cc-uscis-card__foot { flex-direction: column; align-items: stretch; }
  .cc-uscis-card__actions { justify-content: stretch; }
  .cc-uscis-card__actions .cc-uscis-action { flex: 1; }
}

.cc-uscis-current-state a {
  color: var(--cc-brand);
  text-decoration: underline;
  word-break: break-all;
}

/* --- USCIS official event history (per-receipt collapsible timeline) --- */

.cc-uscis-history {
  margin-top: 14px;
  border-top: 1px solid var(--cc-line-soft);
  padding-top: 4px;
}

.cc-uscis-history__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 44px;
  padding: 8px 2px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  transition: color var(--cc-motion-quick);
}

.cc-uscis-history__toggle:hover { color: var(--cc-ink-100); }

.cc-uscis-history__chev {
  transition: transform var(--cc-motion-quick);
}

.cc-uscis-history__chev--open { transform: rotate(180deg); }

.cc-uscis-history__timeline {
  position: relative;
  padding: 8px 0 4px 6px;
}

/* the spine */
.cc-uscis-history__timeline::before {
  content: "";
  position: absolute;
  left: 11px;
  top: 14px;
  bottom: 14px;
  width: 2px;
  background: var(--cc-line);
}

.cc-uscis-history__event {
  position: relative;
  display: flex;
  gap: 16px;
  padding: 10px 0;
}

.cc-uscis-history__dot {
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  width: 12px;
  height: 12px;
  margin-top: 4px;
  border-radius: 50%;
  background: var(--cc-ink-30);
  border: 2px solid var(--cc-paper-elev);
}

.cc-uscis-history__event--latest .cc-uscis-history__dot {
  background: var(--cc-brand);
  box-shadow: 0 0 0 3px var(--cc-brand-soft);
}

.cc-uscis-history__date {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--cc-ink-50);
  font-variant-numeric: tabular-nums;
}

.cc-uscis-history__latest-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cc-brand);
}

.cc-uscis-history__status {
  font-size: 14px;
  font-weight: 600;
  color: var(--cc-ink-100);
  margin-top: 2px;
  line-height: 1.4;
}

.cc-uscis-history__event--latest .cc-uscis-history__status {
  font-size: 14.5px;
}

.cc-uscis-history__desc {
  font-size: 13px;
  color: var(--cc-ink-70);
  line-height: 1.55;
  margin-top: 3px;
  overflow-wrap: break-word;
}

.cc-uscis-history__desc a {
  color: var(--cc-brand);
  text-decoration: underline;
  word-break: break-all;
}

/* Floating Aurora status widget — draggable; bottom-left default (clear of Intercom).
   On-theme: built on --cc-* tokens so it adapts to each tenant's brand. The panel is
   absolutely positioned around the FAB (so the icon never shifts on open) and flips
   side/vertical by the icon's screen quadrant to stay on-screen when dragged. */
.aurora-widget{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:60;width:48px;height:48px;touch-action:none}
.aurora-fab{width:48px;height:48px;border-radius:50%;border:0;cursor:grab;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:var(--cc-shadow-card);line-height:1;user-select:none;-webkit-tap-highlight-color:transparent;transition:transform var(--cc-motion-base),box-shadow var(--cc-motion-base)}
.aurora-fab:hover{transform:translateY(-1px)}
.aurora-fab:active{cursor:grabbing;transform:scale(.94)}
.aurora-fab:focus-visible{outline:none;box-shadow:0 0 0 3px var(--cc-paper-elev),0 0 0 5px var(--cc-brand),var(--cc-shadow-card)}
.aurora-fab--working{background:var(--cc-brand);animation:aurora-pulse 2.2s ease-in-out infinite}
.aurora-fab--done{background:var(--cc-emerald-deep)}
.aurora-fab--failed{background:var(--cc-amber-deep)}
.aurora-fab__icon{width:23px;height:23px;color:#fff;pointer-events:none}
.aurora-fab__wand{width:24px;height:24px;color:#fff;overflow:visible;pointer-events:none}
.aurora-wand__stick{stroke:currentColor;stroke-width:2;stroke-linecap:round;fill:none}
.aurora-spark{fill:currentColor;transform-box:fill-box;transform-origin:center}
.aurora-fab--working .aurora-spark{animation:aurora-twinkle 1.6s ease-in-out infinite}
.aurora-fab--working .aurora-spark--tip{animation-delay:0s}
.aurora-fab--working .aurora-spark--a{animation-delay:.5s}
.aurora-fab--working .aurora-spark--b{animation-delay:1s}
@keyframes aurora-twinkle{0%,100%{opacity:.4;transform:scale(.6)}50%{opacity:1;transform:scale(1.12)}}
@keyframes aurora-spin{to{transform:rotate(360deg)}}
@keyframes aurora-pulse{0%,100%{box-shadow:0 4px 24px rgba(var(--cc-brand-rgb),.20)}50%{box-shadow:0 6px 28px rgba(var(--cc-brand-rgb),.42)}}

.aurora-panel{position:absolute;bottom:calc(100% + 10px);left:0;width:min(320px,calc(100vw - 32px));max-height:min(70vh,440px);overflow-y:auto;background:var(--cc-paper-elev);border:1px solid var(--cc-line);border-radius:16px;box-shadow:var(--cc-shadow-card);padding:14px 16px;font-size:14px;line-height:1.5;color:var(--cc-ink-90);transform-origin:bottom left}
.aurora-widget--flip-x .aurora-panel{left:auto;right:0;transform-origin:bottom right}
.aurora-widget--flip-y .aurora-panel{bottom:auto;top:calc(100% + 10px);transform-origin:top left}
.aurora-widget--flip-x.aurora-widget--flip-y .aurora-panel{transform-origin:top right}
.aurora-panel__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.aurora-panel__brand{display:inline-flex;align-items:center;gap:6px;font-family:var(--cc-type-mono);font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--cc-brand)}
.aurora-panel__brand svg{width:13px;height:13px}
.aurora-panel__hide{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:30px;padding:4px 8px;margin:-4px -8px -4px 0;background:none;border:0;border-radius:8px;color:var(--cc-ink-50);cursor:pointer;font-size:13px;transition:color var(--cc-motion-base),background var(--cc-motion-base)}
.aurora-panel__hide:hover{background:var(--cc-paper-warm);color:var(--cc-ink-90)}
.aurora-panel__hide:focus-visible{outline:none;box-shadow:0 0 0 2px var(--cc-brand)}
.aurora-item{display:flex;flex-direction:column;gap:8px;padding:11px 0;border-top:1px solid var(--cc-line-soft)}
.aurora-item:first-of-type{border-top:0;padding-top:2px}
.aurora-item__main{display:flex;align-items:flex-start;gap:9px;color:var(--cc-ink-90)}
.aurora-item__ic{flex:0 0 auto;width:18px;height:18px;margin-top:1px}
.aurora-item--processing .aurora-item__ic{color:var(--cc-brand)}
.aurora-item--done .aurora-item__ic{color:var(--cc-emerald-deep)}
.aurora-item__count{font-weight:700}
.aurora-item__spinner{flex:0 0 auto;width:15px;height:15px;border:2px solid var(--cc-brand-soft);border-top-color:var(--cc-brand);border-radius:50%;animation:aurora-spin .8s linear infinite;margin-top:2px}
.aurora-item--failed{background:rgba(179,137,47,.10);border-left:2px solid var(--cc-amber-deep);border-radius:0 8px 8px 0;border-top:0;margin-top:6px;padding:11px 13px}
.aurora-item--failed:first-of-type{margin-top:0}
.aurora-item--failed .aurora-item__ic{color:var(--cc-amber-deep)}
.aurora-item__actions{display:flex;gap:8px;margin-left:27px}
.aurora-item__action{display:inline-flex;align-items:center;min-height:36px;padding:7px 15px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;border:0;transition:background var(--cc-motion-base)}
.aurora-item__action--primary{background:var(--cc-brand);color:#fff}
.aurora-item__action--primary:hover{background:var(--cc-brand-hover)}
.aurora-item__action--muted{background:transparent;color:var(--cc-ink-50)}
.aurora-item__action--muted:hover{background:var(--cc-paper-warm);color:var(--cc-ink-70)}
.aurora-item__action:focus-visible{outline:none;box-shadow:0 0 0 2px var(--cc-paper-elev),0 0 0 4px var(--cc-brand)}
.aurora-item__review{color:var(--cc-amber-deep);font-size:12.5px;margin-left:27px;font-weight:500}
@media (prefers-reduced-motion: reduce){
  .aurora-fab,.aurora-fab--working,.aurora-fab--working .aurora-spark,.aurora-item__spinner{animation:none !important}
  .aurora-fab{transition:none}
  .aurora-fab--working .aurora-spark{opacity:.85}
}

/* ============================================================
 * MOBILE-FIRST QUESTION FLOW  (scoped to .cc-root--question)
 * Pinned bottom action bar + header back-arrow, and mobile fixes
 * for the embedded Tailwind field components.
 * ============================================================ */

/* Full-height flex column so the action bar pins to the viewport bottom on short
   questions and stays reachable (sticky) on tall ones. */
.cc-root--question { display: flex; flex-direction: column; }
.cc-root--question .cc-body { flex: 1 1 auto; padding-bottom: 32px; }

/* Header: logo-row grows to fill, with a truncating title, opposite Save & exit.
   (Back moved out of the header and down beside Continue in the action bar.) */
.cc-header__logo-row { flex: 1 1 auto; }
.cc-btn__spinner--ink { border-color: var(--cc-ink-50); border-top-color: transparent; }

/* Pinned bottom action bar — full-bleed, content centered to the focus column. */
.cc-actionbar {
  position: sticky; bottom: 0; z-index: 20;
  background: var(--cc-paper-elev);
  border-top: 1px solid var(--cc-line);
  padding: 14px 24px calc(14px + env(safe-area-inset-bottom, 0px));
}
.cc-actionbar__inner {
  max-width: 640px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.cc-actionbar__saved {
  font-family: var(--cc-type-mono); font-size: 11px; letter-spacing: 0.02em;
  color: var(--cc-ink-40); text-align: right;
}
/* Back + Continue share the bar, adjacent. Continue is the primary target and
   grows to fill; Back is a compact secondary beside it. */
.cc-actionbar__buttons { display: flex; align-items: center; gap: 12px; }
.cc-actionbar__back { flex: 0 0 auto; min-height: 52px; font-size: 16px; }
.cc-actionbar__continue { flex: 1 1 auto; min-height: 52px; font-size: 16px; }

/* Desktop: one row — the auto-saved note on the left pushes the button pair right. */
@media (min-width: 700px) {
  .cc-actionbar__inner { flex-direction: row; align-items: center; gap: 20px; }
  .cc-actionbar__saved { flex: 1 1 auto; text-align: left; }
  .cc-actionbar__buttons { flex: 0 0 auto; }
  .cc-actionbar__continue { flex: 0 0 auto; min-width: 220px; }
}

/* ---- Mobile fixes for the embedded Tailwind field components ---- */
/* 16px kills iOS zoom-on-focus — the color-only reskin never set font-size, so the
   Tailwind inputs stayed at 14px (sm:text-sm). */
@media (max-width: 600px) {
  .cc-root--question .cc-q-existing-render input,
  .cc-root--question .cc-q-existing-render select,
  .cc-root--question .cc-q-existing-render textarea {
    font-size: 16px;
  }
}
/* Collapse the multi-column field grids (address / employment / education /
   passport / prior-marriages / city-state) to a single column so nothing is
   squeezed on a ~390px screen. */
@media (max-width: 480px) {
  .cc-root--question .cc-q-existing-render [class*="grid-cols-"] {
    grid-template-columns: 1fr !important;
  }
}

/* One vertical rhythm: the single-question renderer wraps fields in a `text-center`
   grid, which centered every label. Left-align labels (both mobile + desktop) so
   labels sit above their full-width fields in a clean reading column. Button/option
   text keeps its own centering. */
.cc-root--question .cc-q-existing-render label {
  text-align: left;
}

/* ---- Field-unification layer ----------------------------------------------
   The embedded field components ship raw Tailwind form utilities (form-input,
   border-gray-300, shadow-sm, rounded-md, sm:text-sm). Inside the calm cream
   case-center chrome they read as generic/foreign. Map them onto the design
   system's own input treatment (.cc-q-input: white surface, ink-30 hairline,
   10px radius, brand focus ring) so every field looks native — without
   rewriting 26 components. Scoped to .cc-root--question, so D2C (which never
   renders inside it) is untouched. background-COLOR (not the shorthand) keeps
   the .form-select arrow image intact. Radio/checkbox/hidden inputs opt out so
   toggles and option cards keep their own styling. */
.cc-root--question .cc-q-existing-render input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]),
.cc-root--question .cc-q-existing-render select,
.cc-root--question .cc-q-existing-render textarea {
  background-color: var(--cc-paper-elev);
  border: 1px solid var(--cc-ink-30);
  border-radius: 10px;
  color: var(--cc-ink-100);
  box-shadow: none;
}
.cc-root--question .cc-q-existing-render input:not([type="radio"]):not([type="checkbox"]):not([type="hidden"]):focus,
.cc-root--question .cc-q-existing-render select:focus,
.cc-root--question .cc-q-existing-render textarea:focus {
  outline: none;
  border-color: var(--cc-brand);
  box-shadow: 0 0 0 3px var(--cc-brand-soft);
}

/* ---- Full-width stacked option cards (radio / Yes-No) ----------------------
   The radio component is rendered with layout=vertical in the ccChrome path, so
   options stack w-full. Give them a taller thumb target, cc radius, and 16px
   text so they read as first-class cards aligned with the fields above. The
   selected/hover colors stay the component's own Alpine-bound brand classes. */
.cc-q-options button {
  min-height: 54px;
  border-radius: 10px;
  font-size: 16px;
}

/* ---- "Review answers" link (eyebrow row) ----------------------------------
   Sits opposite the module eyebrow: "SECTION LABEL .......... Review answers".
   Opens this module's review so a client can jump straight to any earlier
   answer (the header back arrow only steps one question at a time). Same spot
   on mobile and desktop; wraps under the eyebrow only if the row is too narrow. */
.cc-eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cc-eyebrow-row .cc-eyebrow { margin-bottom: 0; }
.cc-review-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-height: 36px;
  padding: 6px 2px;
  background: transparent;
  border: 0;
  font-family: var(--cc-type-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--cc-brand);
  cursor: pointer;
  transition: color var(--cc-motion-quick);
}
.cc-review-link:hover { color: var(--cc-brand-hover); text-decoration: underline; text-underline-offset: 3px; }
.cc-review-link:focus-visible { outline: 2px solid var(--cc-brand); outline-offset: 2px; border-radius: 6px; }
.cc-review-link:disabled { opacity: 0.5; cursor: progress; }
.cc-review-link__ic { width: 16px; height: 16px; flex-shrink: 0; }

/* ---- "Need help?" support disclosure ---------------------------------------
   Replaces the always-on filled help box with a quiet single line that reveals
   the team's contact only when tapped, so it never competes with the question. */
.cc-help { margin-top: 28px; }
.cc-help__trigger {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 36px; padding: 8px 0;
  background: transparent; border: 0;
  font-family: var(--cc-type-body); font-size: 13px; font-weight: 500;
  color: var(--cc-ink-50); cursor: pointer;
  transition: color var(--cc-motion-quick);
}
.cc-help__trigger:hover { color: var(--cc-brand); }
.cc-help__trigger:focus-visible { outline: 2px solid var(--cc-brand); outline-offset: 2px; border-radius: 6px; }
.cc-help__ic { width: 16px; height: 16px; flex-shrink: 0; }
.cc-help__panel {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin-top: 4px; padding: 10px 14px;
  background: var(--cc-paper-warm); border-radius: 10px;
  font-size: 13px;
}
.cc-help__link { color: var(--cc-brand); font-weight: 600; text-decoration: none; }
.cc-help__link:hover { text-decoration: underline; text-underline-offset: 2px; }
.cc-help__sep { color: var(--cc-ink-30); }

/* ============================================================
 * MODULE REVIEW — tenant (cc chrome)   [module-review-tenant]
 * Reached from a question via "Review answers". Same actions as the D2C review
 * (edit any answer, back), re-dressed in cc chrome for a continuous feel.
 * ============================================================ */
.cc-root--review { display: flex; flex-direction: column; }
.cc-root--review .cc-body { flex: 1 1 auto; padding-bottom: 32px; }
/* Centered summary heading — a review reads as a recap, not a single prompt. */
.cc-root--review .cc-eyebrow,
.cc-root--review .cc-q-question,
.cc-root--review .cc-q-help { text-align: center; }
.cc-root--review .cc-q-help { margin-top: 4px; }

.cc-review-list {
  max-width: 620px;
  margin: 28px auto 0;
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  overflow: hidden;
}
.cc-review-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  min-height: 60px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--cc-line-soft);
  cursor: pointer;
  font-family: var(--cc-type-body);
  transition: background var(--cc-motion-quick);
}
.cc-review-row:last-of-type { border-bottom: 0; }
.cc-review-row:hover { background: var(--cc-paper-warm); }
.cc-review-row:active { transform: scale(0.995); }
.cc-review-row:focus-visible { outline: 2px solid var(--cc-brand); outline-offset: -2px; }
.cc-review-row__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.cc-review-row__q {
  font-size: 14px; font-weight: 600; color: var(--cc-ink-100); line-height: 1.35;
  display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.cc-review-row__a {
  font-size: 14px; color: var(--cc-ink-50); line-height: 1.4;
  word-break: break-word; white-space: pre-line;
}
.cc-review-row__a--empty { color: var(--cc-amber-deep); font-style: italic; }
.cc-review-row__edit { width: 18px; height: 18px; flex-shrink: 0; color: var(--cc-ink-30); margin-top: 1px; }
.cc-review-row:hover .cc-review-row__edit { color: var(--cc-brand); }
.cc-review-row__badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: #D64545; color: #fff; border-radius: 9px;
  font-size: 11px; font-weight: 700;
}
.cc-review-comments { max-width: 620px; margin: 0 auto; padding: 0 20px 14px; }
.cc-review-empty { padding: 40px 20px; text-align: center; color: var(--cc-ink-50); font-size: 14px; }

/* Single "Back to sections" action: full-width on mobile, compact left on desktop. */
.cc-root--review .cc-actionbar__inner { flex-direction: row; align-items: center; }
.cc-root--review .cc-actionbar__back { flex: 1 1 auto; }
@media (min-width: 700px) {
  .cc-root--review .cc-actionbar__back { flex: 0 0 auto; min-width: 200px; }
}

/* ============================================================
 * D2C-ONLY PORTS (cc-d2c-*)
 * ------------------------------------------------------------
 * The consumer (alvva.co) surface reuses the calm-productivity
 * cc-* skin but layers back a few D2C-only blocks — down-payment
 * upsell, referral share, Track My Visa, resources, Intercom
 * help — that firm tenants never see. Every block here is
 * rendered under a !tenant() guard in case-center-tenant.blade;
 * these styles just give them the cc-* look instead of the
 * legacy bootstrap-era markup.
 * ============================================================ */

/* Shared calm card the D2C blocks sit in. */
.cc-d2c-card {
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}

.cc-d2c-card__row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cc-d2c-card__icon {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cc-brand-soft);
  color: var(--cc-brand);
}

.cc-d2c-card__icon svg { width: 22px; height: 22px; }

.cc-d2c-card__body { flex: 1; min-width: 0; }

.cc-d2c-card__title {
  font-family: var(--cc-type-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--cc-ink-100);
  letter-spacing: -0.005em;
}

.cc-d2c-card__desc {
  font-size: 13px;
  color: var(--cc-ink-70);
  line-height: 1.5;
  margin-top: 2px;
}

.cc-d2c-card__amount {
  flex: 0 0 auto;
  font-family: var(--cc-type-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--cc-ink-100);
}

/* Down-payment upsell — clickable cream callout. */
.cc-d2c-downpayment {
  cursor: pointer;
  background: var(--cc-paper-warm);
  border: 1px solid rgba(11, 10, 9, 0.08);
  transition: border-color var(--cc-motion-quick);
}

.cc-d2c-downpayment:hover { border-color: var(--cc-brand); }

.cc-d2c-downpayment__includes {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--cc-line);
}

.cc-d2c-includes-label {
  font-family: var(--cc-type-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cc-ink-50);
  margin-bottom: 8px;
}

.cc-d2c-includes-list {
  display: grid;
  gap: 6px;
}

.cc-d2c-includes-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--cc-ink-70);
  line-height: 1.45;
}

.cc-d2c-includes-item__check {
  flex: 0 0 auto;
  color: var(--cc-brand);
  font-weight: 700;
}

/* Promotion banner. */
.cc-d2c-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, var(--cc-paper-elev) 0%, var(--cc-paper-warm) 100%);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 16px 20px;
  margin-bottom: 16px;
}

.cc-d2c-promo__main {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.cc-d2c-promo__badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--cc-brand);
  color: #fff;
  font-family: var(--cc-type-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 0 8px;
}

.cc-d2c-promo__title {
  font-weight: 600;
  font-size: 14px;
  color: var(--cc-ink-100);
}

.cc-d2c-promo__desc {
  font-size: 12.5px;
  color: var(--cc-ink-70);
  margin-top: 2px;
  line-height: 1.45;
}

/* Referral reward + share block. */
.cc-d2c-share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}

.cc-d2c-share__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--cc-line);
  background: var(--cc-paper-elev);
  color: var(--cc-ink-90);
  font-family: var(--cc-type-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: border-color var(--cc-motion-quick), color var(--cc-motion-quick);
}

.cc-d2c-share__btn:hover { border-color: var(--cc-ink-50); color: var(--cc-ink-100); }
.cc-d2c-share__btn svg { width: 16px; height: 16px; }

.cc-d2c-referral__link {
  margin-top: 12px;
  text-align: center;
}

/* Intercom help card (in-journey + bottom). */
.cc-d2c-chat {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  cursor: pointer;
  background: var(--cc-paper-elev);
  border: 1px solid var(--cc-line);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 16px 0;
  transition: border-color var(--cc-motion-quick);
}

.cc-d2c-chat:hover { border-color: var(--cc-brand); }
.cc-d2c-chat__arrow { flex: 0 0 auto; color: var(--cc-ink-30); }
.cc-d2c-chat:hover .cc-d2c-chat__arrow { color: var(--cc-brand); }

.cc-d2c-help {
  text-align: center;
  background: var(--cc-paper-warm);
  border: 1px solid rgba(11, 10, 9, 0.08);
  border-radius: 16px;
  padding: 28px 24px;
  margin: 32px 0 8px;
}

.cc-d2c-help__title {
  font-family: var(--cc-type-display);
  font-weight: 500;
  font-size: 18px;
  color: var(--cc-ink-100);
  margin-bottom: 16px;
}

/* D2C "resources" group heading. */
.cc-d2c-resources { margin-top: 32px; }

@media (max-width: 600px) {
  .cc-d2c-share { grid-template-columns: 1fr; }
  .cc-d2c-promo { flex-direction: column; align-items: stretch; }
}