/* ==========================================================================
   Claim Design System · claim.css
   Source of truth: claimmoney.com production CSS (design tokens read from the
   live site's :root, component recipes mined from its compiled bundles).
   Claim finds class action settlements you qualify for. Light mode only.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Color tokens (site's own names) ---- */
  --color-text-primary: #121212;
  --color-text-secondary: #6a6a6a;
  --color-text-tertiary: #98a2b3;
  --color-text-brand: #0051ff;
  --color-text-error: #ff3b30;
  --color-text-primary-inverted: #ffffff;
  --color-text-secondary-inverted: rgba(255, 255, 255, 0.6);

  --color-icon-primary: #121212;
  --color-icon-secondary: #6a6a6a;
  --color-icon-tertiary: #98a2b3;
  --color-icon-brand: #0051ff;
  --color-icon-success: #15ba00;
  --color-icon-error: #ff3b30;

  --color-background-primary: #ffffff;
  --color-background-surface: #f0f2f6;
  --color-background-brand: #0051ff;
  --color-background-gradient: linear-gradient(180deg, rgba(0, 81, 255, 0.2) 0%, rgba(0, 81, 255, 0) 100%);

  --color-border-default: #f0f2f6;
  --color-border-brand: #0051ff;

  --color-button-primary: #0051ff;
  --color-button-primary-hover: #1c46d8;
  --color-button-primary-active: #1a43ce;
  --color-button-secondary: #000000;
  --color-badge-process: rgba(0, 81, 255, 0.15); /* #0051ff26 */

  /* Success chip (the "No proof" chip ships as a baked image on the site;
     these values reconstruct it from --color-icon-success + the site's
     15%-alpha badge pattern) */
  --color-badge-success: rgba(21, 186, 0, 0.15);
  --color-badge-success-text: #15ba00;

  /* Ratings (reconstruction: the site renders stars as baked images; this
     hex is sampled from the hero screenshot, not present in its CSS) */
  --color-star: #ffc53d;

  /* Deep navy (selected pricing card, trial badge) */
  --color-navy: #0f2a5f;

  /* ---- Gradients ---- */
  --gradient-enforce: linear-gradient(#3d7aff, #0051ff 53.29%);
  --gradient-sheen: linear-gradient(163deg, rgba(255, 255, 255, 0) 0% 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 75% 100%);
  /* B2B (For Lawyers page): mass-arbitration gold panel */
  --gradient-gold: linear-gradient(#6b4004, #fab933);

  /* ---- Typography ---- */
  --font-family: "Inter", "SF Pro", "Roboto", -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", Arial, sans-serif;

  /* ---- Radius ---- */
  --radius-card: 32px;   /* tiles, cards, modals, gradient panels */
  --radius-inner: 16px;  /* inner panels, frosted chips, dropdowns */
  --radius-cta: 14px;    /* checkout pay buttons, trial badge */
  --radius-input: 12px;  /* text inputs */
  --radius-pill: 100px;  /* every standard button */

  /* ---- Shadows ---- */
  --shadow-card: 0 12px 32px rgba(15, 23, 42, 0.08);          /* #0f172a14 */
  --shadow-card-on-blue: 0 18px 42px rgba(0, 22, 90, 0.2);    /* #00165a33 */
  --shadow-sticker: 0 18.431px 46.078px rgba(0, 52, 210, 0.4);/* #0034d266 */
  --shadow-cta: 0 10px 24px rgba(0, 81, 255, 0.24);           /* #0051ff3d */
  --shadow-cta-hover: 0 12px 28px rgba(0, 81, 255, 0.28);     /* #0051ff47 */
  --shadow-dropdown: 0 4px 16px rgba(0, 0, 0, 0.08);
  --ring-focus: 0 0 0 3px rgba(0, 81, 255, 0.16);             /* #0051ff29 */
  --ring-error: 0 0 0 3px rgba(220, 38, 38, 0.12);            /* #dc26261f */
  --border-on-blue: rgba(255, 255, 255, 0.58);                /* #ffffff94 */

  /* ---- Motion ---- */
  --transition-standard: all 0.3s ease-in-out; /* buttons, interactive */
  --transition-quick: all 0.2s;                /* accordion headers (default ease) */
  --dur-micro: 0.16s;                          /* input borders and rings */

  /* ---- Layout ---- */
  --container-content: 1200px; /* footer, trusted-by content */
  --container-narrow: 1026px;  /* award strip, CTA band content */
  --breakpoint-mobile: 768px;  /* the dominant breakpoint; 480px for small tweaks */
  /* Spacing runs on a fixed gap scale:
     0 2 4 8 12 16 20 24 28 32 40 48 56 64 72 80 88 96 (px).
     Section padding-x: 32px desktop, 24px mobile. */
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */

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

body {
  margin: 0;
  font: 400 16px/24px var(--font-family); /* --typography-body */
  color: var(--color-text-primary);
  background: var(--color-background-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --------------------------------------------------------------------------
   Typography classes (one per site token)
   Headlines are sentence case — never uppercase. Tracking tightens with size.
   -------------------------------------------------------------------------- */

/* Letter-spacing values are the exact flat px values from the compiled
   typography classes. Note headline3 (-3.6px) vs heading-xl (-2.24px):
   two distinct 56px voices — headlines are tighter than headings. */
.headline1 { font: 700 90px/90px var(--font-family); letter-spacing: -3.6px; }
.headline2 { font: 600 64px/64px var(--font-family); letter-spacing: -3.6px; }
.headline3 { font: 600 56px/56px var(--font-family); letter-spacing: -3.6px; }
.headline3-bold { font: 700 56px/56px var(--font-family); letter-spacing: -3.6px; }
.headline3-extrabold { font: 800 56px/56px var(--font-family); letter-spacing: -3.6px; }
.headline4 { font: 600 32px/32px var(--font-family); letter-spacing: 0; }
.headline5 { font: 500 24px/24px var(--font-family); letter-spacing: 0; }
.headline5-bold { font: 700 24px/24px var(--font-family); letter-spacing: 0; }
.headline5-extrabold { font: 800 24px/24px var(--font-family); letter-spacing: 0; }
.headline6 { font: 500 20px/20px var(--font-family); letter-spacing: 0; }
.headline6-bold { font: 500 20px/20px var(--font-family); letter-spacing: 0; font-weight: 700; }

.heading-md { font: 700 24px/24px var(--font-family); letter-spacing: -0.48px; }
.heading-lg { font: 700 32px/32px var(--font-family); letter-spacing: -0.64px; }
.heading-lg-bold { font: 800 32px/32px var(--font-family); letter-spacing: -0.64px; }
.heading-xl { font: 700 56px/56px var(--font-family); letter-spacing: -2.24px; }
.heading-xl-bold { font: 800 56px/56px var(--font-family); letter-spacing: -2.24px; }

.display-lg { font: 900 32px/32px var(--font-family); letter-spacing: -0.64px; }
/* Money and stat numerals are ITALIC 900 — a signature detail */
.numeric-lg { font: italic 900 60px/66px var(--font-family); letter-spacing: -2.4px; }
.numeric-md { font: italic 900 30px/30px var(--font-family); letter-spacing: -0.6px; }

.body { font: 400 16px/24px var(--font-family); }
.body-medium { font: 500 16px/24px var(--font-family); }
.body-bold { font: 600 16px/24px var(--font-family); }
.body-lg-700 { font: 700 20px/30px var(--font-family); }
.body-sm-700 { font: 700 14px/21px var(--font-family); }

.label { font: 400 14px/21px var(--font-family); letter-spacing: -0.28px; }
.label-medium { font: 500 14px/21px var(--font-family); letter-spacing: -0.28px; }
.label-bold { font: 600 14px/21px var(--font-family); letter-spacing: -0.28px; }
.label-sm { font: 400 12px/18px var(--font-family); letter-spacing: -0.24px; }
.label-sm-bold { font: 600 12px/18px var(--font-family); letter-spacing: -0.24px; }

.caption { font: 400 10px/14px var(--font-family); }
.caption-medium { font: 500 10px/14px var(--font-family); }
.caption-bold { font: 600 10px/14px var(--font-family); }

/* Color helpers */
.color-primary { color: var(--color-text-primary); }
.color-secondary { color: var(--color-text-secondary); }
.color-tertiary { color: var(--color-text-tertiary); }
.color-brand { color: var(--color-text-brand); }
.color-error { color: var(--color-text-error); }
.color-inverted { color: var(--color-text-primary-inverted); }
.color-secondary-inverted { color: var(--color-text-secondary-inverted); }

/* --------------------------------------------------------------------------
   Buttons — every button is a pill
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 52px;
  padding: 20px 28px;
  border: 0;
  border-radius: var(--radius-pill);
  font: 600 16px/24px var(--font-family); /* body-bold */
  color: var(--color-text-primary-inverted);
  background: var(--color-button-primary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition: var(--transition-standard);
}
.btn:hover { background: var(--color-button-primary-hover); }
.btn:active { background: var(--color-button-primary-active); }
.btn:focus-visible { outline: none; box-shadow: var(--ring-focus); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; }
.btn svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn--small {
  height: 40px;
  padding: 12px 16px;
  font: 500 14px/21px var(--font-family); /* label-medium */
}
.btn--small svg { width: 16px; height: 16px; }

/* White pill on blue bands */
.btn--inverted {
  background: #fff;
  color: var(--color-text-primary);
}
.btn--inverted:hover,
.btn--inverted:active { background: #fff; opacity: 0.8; }

/* Black pill */
.btn--secondary {
  background: var(--color-button-secondary);
  color: var(--color-text-secondary-inverted);
}
.btn--secondary:hover,
.btn--secondary:active { background: var(--color-button-secondary); opacity: 0.8; }

/* Blue-tint pill (quiet emphasis) */
.btn--tint {
  background: var(--color-badge-process);
  color: var(--color-text-brand);
}
.btn--tint:hover,
.btn--tint:active { background: var(--color-badge-process); opacity: 0.8; }

/* Text-only */
.btn--tertiary {
  background: transparent;
  color: var(--color-text-primary);
}
.btn--tertiary:hover { background: transparent; color: var(--color-text-brand); }
.btn--tertiary:active { background: transparent; color: var(--color-button-primary-active); }

/* Checkout CTA: rounded-rect with the blue glow (in-app pay button) */
.btn--glow {
  height: auto;
  min-height: 50px;
  padding: 14px 18px;
  font: 600 16px/20px var(--font-family);
  border-radius: var(--radius-cta);
  box-shadow: var(--shadow-cta);
}
.btn--glow:hover { background: #0048e6; box-shadow: var(--shadow-cta-hover); }
.btn--glow:active { transform: translateY(1px); }

.btn--block { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.input {
  display: block;
  width: 100%;
  height: 42px;
  padding: 0 12px;
  font: 500 14px/20px var(--font-family);
  color: #111827;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: var(--radius-input);
  outline: none;
  transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
}
.input::placeholder { color: #9ca3af; }
.input:focus { border-color: var(--color-border-brand); box-shadow: var(--ring-focus); }
.input--error,
.input--error:focus { border-color: #dc2626; box-shadow: var(--ring-error); }
.input-msg { margin: 8px 0 0; font: 600 12px/16px var(--font-family); color: #dc2626; }

/* Promo-code apply button (checkout) */
.promo-apply {
  height: 42px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--radius-input);
  background: #eef4ff;
  color: var(--color-text-brand);
  font: 700 14px/20px var(--font-family);
  cursor: pointer;
  transition: background-color var(--dur-micro);
}
.promo-apply:hover { background: #dbe8ff; }

/* Applied-promo pill (checkout) */
.promo-applied {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-input);
  background: #eff6ff;
  color: #1d4ed8;
  font: 600 14px/20px var(--font-family);
}

/* Directory search: gray pill with a leading icon */
.search {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  background: var(--color-background-surface);
  border-radius: var(--radius-pill);
}
.search svg { width: 20px; height: 20px; color: var(--color-icon-secondary); flex-shrink: 0; }
.search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: transparent;
  font: 400 16px/24px var(--font-family);
  color: var(--color-text-primary);
}
.search input::placeholder { color: var(--color-text-secondary); }

/* Category filter list (directory sidebar) */
.category {
  display: block;
  padding: 6px 0;
  font: 400 14px/21px var(--font-family);
  color: var(--color-text-primary);
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-quick);
}
.category:hover { opacity: 0.8; }
.category--active { color: var(--color-text-brand); }

/* --------------------------------------------------------------------------
   Chips and badges
   -------------------------------------------------------------------------- */

/* "No proof" success chip (reconstructed; the site bakes it as an image) */
.chip-success {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  background: var(--color-badge-success);
  color: var(--color-badge-success-text);
  font: 600 14px/21px var(--font-family);
}
.chip-success svg { width: 16px; height: 16px; }
.chip-success--sm { height: 22px; padding: 0 8px; gap: 4px; font: 600 10px/14px var(--font-family); }
.chip-success--sm svg { width: 11px; height: 11px; }

/* Blue process badge */
.badge-process {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--color-badge-process);
  color: var(--color-text-brand);
  font: 600 14px/21px var(--font-family);
}

/* Navy uppercase micro badge (trial/plan states) */
.badge-navy {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 4px 12px;
  border-radius: var(--radius-cta);
  background: var(--color-navy);
  color: #fff;
  font: 600 12px/16px var(--font-family);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

/* Frosted chip on gradient panels (B2B) */
.chip-frosted {
  padding: 12px 16px;
  border-radius: var(--radius-inner);
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
.chip-frosted .chip-frosted-title { font: 500 14px/21px var(--font-family); }
.chip-frosted .chip-frosted-body { font: 400 12px/18px var(--font-family); color: rgba(255, 255, 255, 0.75); }

/* Statute chip (enforce section) */
.chip-statute {
  display: inline-flex;
  align-items: center;
  padding: 10px 16px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-input);
  background: #fff;
  color: var(--color-text-secondary);
  font: 400 16px/24px var(--font-family);
}

/* Star rating row */
.stars { display: inline-flex; gap: 2px; color: var(--color-star); }
.stars svg { width: 16px; height: 16px; }

/* --------------------------------------------------------------------------
   Tiles, cards, panels
   -------------------------------------------------------------------------- */

/* App icon tile: FIXED 32px radius at every marketing size (260/200/160px).
   Tiny in-app icons (~56px) drop to ~14px (reconstruction from mockups). */
.app-icon {
  display: block;
  border-radius: var(--radius-card);
  object-fit: cover;
}

.card {
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
/* Checkout/payment card: tighter radius with a visible hairline */
.card--checkout {
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-inner);
}

/* White card sitting on a blue band */
.card-on-blue {
  background: #fff;
  border: 1px solid var(--border-on-blue);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card-on-blue);
}

.panel-surface {
  background: var(--color-background-surface);
  border-radius: var(--radius-card);
}
.panel-inner {
  background: var(--color-background-surface);
  border-radius: var(--radius-inner);
}

/* The blue explainer sticker: rotated, glowing, with an animated sheen */
.sticker {
  max-width: 352px;
  padding: 32px;
  border-radius: var(--radius-card);
  color: #fff;
  transform: rotate(-2deg);
  box-shadow: var(--shadow-sticker);
  background:
    var(--gradient-sheen) 0 200% / 100% 200% no-repeat,
    var(--gradient-enforce) 0 0 / 100% 100% no-repeat;
  animation: sheen 3s linear infinite;
}
@keyframes sheen {
  0% { background-position: 0 200%, 0 0; }
  100% { background-position: 0 -200%, 0 0; }
}

/* B2B gradient panels */
.panel-gradient {
  padding: 24px;
  border-radius: var(--radius-card);
  color: #fff;
  background:
    var(--gradient-sheen) 0 200% / 100% 200% no-repeat,
    var(--gradient-enforce) 0 0 / 100% 100% no-repeat;
}
.panel-gradient--gold {
  background: var(--gradient-gold);
}

/* How-it-works step badge */
.step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 4px solid var(--color-text-tertiary);
  border-radius: 50%;
  color: var(--color-text-tertiary);
  font: 700 36px/1 var(--font-family);
}

.divider { height: 1px; border: 0; margin: 0; background: var(--color-border-default); }

/* --------------------------------------------------------------------------
   FAQ accordion
   -------------------------------------------------------------------------- */

.faq { border-bottom: 1px solid var(--color-border-default); }
.faq-header {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 12px;
  padding: 20px 0;
  background: none;
  border: 0;
  font: 400 16px/1.15 var(--font-family);
  color: #000;
  text-align: left;
  cursor: pointer;
  transition: var(--transition-quick);
}
.faq-header:hover { opacity: 0.8; }
.faq-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  font-weight: 300;
  transition: transform 0.3s;
}
.faq[data-open] .faq-icon { transform: rotate(90deg); }
.faq-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s; }
.faq[data-open] .faq-panel { max-height: 300px; }
.faq-panel p {
  margin: 0;
  padding: 0 40px 20px 0;
  font: 400 16px/24px var(--font-family);
  color: var(--color-text-secondary);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.animate-fade-in { animation: fade-in 0.2s ease-out both; }

@keyframes slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-slide-up { animation: slide-up 0.3s ease-out both; }

@keyframes sheet-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.animate-sheet-up { animation: sheet-up 0.35s ease-out both; }

@keyframes skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.skeleton {
  background: var(--color-background-surface);
  border-radius: var(--radius-card);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}
/* Image-slot placeholder: tighter radius, fixed height */
.skeleton--image {
  border-radius: var(--radius-inner);
  height: 128px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* --------------------------------------------------------------------------
   Modal / bottom sheet
   -------------------------------------------------------------------------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  animation: fade-in 0.2s ease-out both;
  z-index: 50;
}
.modal {
  width: 100%;
  max-width: 480px; /* sizes observed: 360 / 420 / 480 / 900 */
  background: #fff;
  border-radius: var(--radius-card);
  padding: 32px;
  animation: slide-up 0.3s ease-out both;
}
.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  transition: transform var(--transition-quick);
}
.modal-close:hover { transform: scale(1.1); }
@media (max-width: 768px) {
  /* Every modal becomes a bottom sheet on mobile */
  .modal-overlay { align-items: flex-end; }
  .modal {
    max-width: none;
    border-radius: var(--radius-inner) var(--radius-inner) 0 0;
    animation: sheet-up 0.35s ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}