/* Advanta — brand chrome.
 *
 * Single source of truth for the cross-surface brand layer:
 *   1. Tokens (color, type, easing, radii, shadow)
 *   2. The mark (horse logo + breathing pulse ring)
 *   3. Cross-surface header pattern
 *   4. Page-head pattern
 *   5. Cross-surface refrain footer
 *   6. Stripe-inspired primitive layer (utility classes that marketing
 *      pages opt into to inherit the new design language)
 *
 * Loaded on every customer-facing page. Marketing pages historically kept
 * their own visual system; the wave-GG repaint added the primitives in
 * section 6 so any page can reach for the new system by class name.
 *
 * Mirrors live in website/public/brand.css and website-tech/public/brand.css
 * — if this file changes here, copy it to the other.
 *
 * CSP-safe: pure CSS, no JS, no external font fetches. */


/* ─── 1. Tokens ────────────────────────────────────────────────────────── */
:root{
  /* ─ Original (legacy) palette — kept for utility pages already using it ── */
  --c-ink:        #0f172a;
  --c-ink-soft:   #334155;
  --c-mute:       #475569;
  --c-mute-soft:  #64748b;
  --c-line:       #e2e8f0;
  --c-line-soft:  #f1f5f9;
  --c-bg:         #ffffff;
  --c-bg-soft:    #f8fafc;
  --c-brand:      #4f46e5;          /* wave-GG: was #1e40af; now indigo-600 */
  --c-brand-pale: #eef2ff;          /* indigo-50 */

  /* ─ Wave-GG new palette (Stripe-inspired, distinct from Stripe) ──────── */
  /* Headings: deep navy with warmth (not pure black). */
  --c-navy:       #0a1f44;          /* primary heading colour */
  --c-navy-soft:  #1e293b;
  /* Body: slate, AAA on white */
  --c-slate:      #475569;
  --c-slate-soft: #64748b;
  /* CTA: indigo-violet — Stripe-feel, distinct from Stripe purple */
  --c-cta:        #4f46e5;          /* indigo-600 */
  --c-cta-hover:  #4338ca;          /* indigo-700 */
  --c-cta-deep:   #3730a3;          /* indigo-800 */
  --c-cta-soft:   #e0e7ff;          /* indigo-100, hover bgs */
  /* Dark brand sections */
  --c-dark:       #1e1b4b;          /* indigo-950 */
  --c-dark-soft:  #312e81;          /* indigo-900 */
  /* Borders & surfaces */
  --c-edge:       #e5edf5;          /* Stripe's signature soft border blue */
  --c-edge-soft:  #f1f5f9;
  /* Decorative accents (use sparingly) */
  --c-success:    #15be53;
  --c-success-bg: rgba(21,190,83,.18);
  --c-success-fg: #108c3d;
  --c-amber:      #b45309;
  --c-ruby:       #e11d48;          /* for very limited decorative use only */

  /* Family aliases */
  --f-display: 'Inter', 'Plus Jakarta Sans', system-ui, sans-serif;
  --f-body:    'Inter', system-ui, sans-serif;
  --f-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Easing palette */
  --ease-fast:    cubic-bezier(.17, .67, .1, .99);
  --ease-stripe:  cubic-bezier(.16, 1, .3, 1);

  /* Radii — wave-GG tightened from 12/6/9999 to 4/6/8 */
  --r-chip:   4px;
  --r-btn:    6px;
  --r-card:   8px;
  --r-panel:  12px;
  --r-pill:   9999px;               /* kept for legacy callers */

  /* Shadows — wave-GG: multi-layer blue-tinted (the Stripe signature).
     Use these via class names below to keep the formula consistent. */
  --shadow-ambient:  rgba(23,23,23,.06) 0px 3px 6px;
  --shadow-card:     rgba(23,23,23,.08) 0px 15px 35px;
  --shadow-elevated: rgba(50,50,93,.25) 0px 30px 45px -30px, rgba(0,0,0,.1) 0px 18px 36px -18px;
  --shadow-deep:     rgba(3,3,39,.25) 0px 14px 21px -14px, rgba(0,0,0,.1) 0px 8px 17px -8px;
  --shadow-cta:      rgba(79,70,229,.35) 0px 8px 24px -8px;
}


/* ─── 2. The mark ──────────────────────────────────────────────────────── */
.advanta-mark{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;height:56px;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--c-line);
  flex-shrink:0;
}
.advanta-mark img{
  width:32px;height:32px;
  object-fit:contain;
}
.advanta-mark::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:18px;
  border:2px solid rgba(79,70,229,.22);     /* wave-GG: was rgba(30,64,175,.22) */
  animation:advanta-pulse 3.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes advanta-pulse{
  0%,100%{transform:scale(1);opacity:.5}
  50%    {transform:scale(1.08);opacity:.18}
}
@media (prefers-reduced-motion: reduce){
  .advanta-mark::before{animation:none}
}
.advanta-mark--lg{ width:80px;height:80px;border-radius:18px; }
.advanta-mark--lg img{ width:48px;height:48px }
.advanta-mark--lg::before{ inset:-8px;border-radius:22px }


/* ─── 3. Cross-surface header pattern ─────────────────────────────────── */
.advanta-chrome{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
  padding-bottom:24px;
  margin-bottom:36px;
  border-bottom:1px solid var(--c-line);
}
.advanta-chrome .brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.advanta-chrome .brand-mark{
  width:32px;height:32px;
  display:inline-flex;align-items:center;justify-content:center;
}
.advanta-chrome .brand-mark img{width:28px;height:28px;object-fit:contain}
.advanta-chrome .wordmark{
  font-family:var(--f-display);
  font-weight:600;                          /* wave-GG: 800 → 600 */
  font-size:18px;
  letter-spacing:-0.02em;
  color:var(--c-navy);                      /* wave-GG: was --c-ink */
}
.advanta-chrome .crumb{
  font-family:var(--f-display);
  font-size:11px;
  font-weight:500;
  letter-spacing:.14em;
  color:var(--c-mute);
  text-transform:uppercase;
  margin-left:14px;
}
.advanta-chrome nav{
  display:flex;
  gap:14px;
  font-size:14px;
}
.advanta-chrome nav a{
  color:var(--c-slate);
  text-decoration:none;
  font-weight:500;                          /* wave-GG: 600 → 500 */
  padding:6px 10px;
  border-radius:var(--r-chip);
  transition:background .2s var(--ease-fast), color .2s var(--ease-fast);
}
.advanta-chrome nav a:hover{ background:var(--c-cta-soft); color:var(--c-cta) }
.advanta-chrome nav a.active,
.advanta-chrome nav a[aria-current="page"]{
  background:var(--c-cta-soft); color:var(--c-cta);
}
.advanta-chrome nav a:focus-visible,
.advanta-chrome .brand:focus-visible{
  outline:2px solid var(--c-cta);
  outline-offset:2px;
}


/* ─── 4. Page-head pattern ─────────────────────────────────────────────── */
.page-head{ margin:8px 0 28px }
.page-head h1{
  font-family:var(--f-display);
  font-size:clamp(36px, 4.6vw, 56px);       /* wave-GG: bumped ceiling */
  font-weight:300;                          /* wave-GG: 800 → 300 (Stripe weight) */
  letter-spacing:-0.025em;
  margin:0 0 12px;
  color:var(--c-navy);                      /* wave-GG: was --c-ink */
  line-height:1.05;
}
.page-head .meta,
.page-head .lead{
  font-family:var(--f-body);
  font-size:14px;
  color:var(--c-slate);
  margin:0;
  line-height:1.6;
}
.page-head .lead{
  font-size:18px;
  font-weight:300;                          /* wave-GG: light body lead */
  color:var(--c-slate);
  margin-top:10px;
  max-width:62ch;
  line-height:1.5;
}


/* ─── 5. Refrain at footer ─────────────────────────────────────────────── */
.advanta-refrain{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  flex-wrap:wrap;
  margin-top:64px;
  padding-top:24px;
  border-top:1px solid var(--c-line);
  font-family:var(--f-body);
  font-size:13px;
  color:var(--c-slate);
}
.advanta-refrain .chant{
  font-family:var(--f-display);
  font-weight:500;                          /* wave-GG: 700 → 500 */
  font-size:14px;
  color:var(--c-navy);
  letter-spacing:-0.01em;
}
.advanta-refrain .links{
  display:inline-flex;
  gap:14px;
  flex-wrap:wrap;
}
.advanta-refrain a{font-weight:500;color:var(--c-cta);text-decoration:none}
.advanta-refrain a:hover{text-decoration:underline}

.advanta-refrain--dark{
  border-top-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.55);
}
.advanta-refrain--dark .chant{color:#fff}
.advanta-refrain--dark a{color:#a5b4fc}     /* wave-GG: indigo-300 on dark */


/* ───────────────────────────────────────────────────────────────────────── */
/* 6. Wave-GG primitives — Stripe-inspired utility classes that any page    */
/*    can opt into. Marketing pages with their own bespoke styling can      */
/*    progressively migrate by swapping their classes to these.             */
/* ───────────────────────────────────────────────────────────────────────── */

/* ─ 6.1 Display typography ────────────────────────────────────────────── */
/* Use on hero H1s. Weight 300 + tight tracking = the Stripe whisper-light. */
.adv-display-hero{
  font-family:var(--f-display);
  font-size:clamp(40px, 5.4vw, 64px);
  font-weight:300;
  letter-spacing:-0.028em;
  line-height:1.04;
  color:var(--c-navy);
  margin:0 0 18px;
}
.adv-display-large{
  font-family:var(--f-display);
  font-size:clamp(32px, 3.6vw, 48px);
  font-weight:300;
  letter-spacing:-0.022em;
  line-height:1.1;
  color:var(--c-navy);
  margin:0 0 16px;
}
.adv-display-section{
  font-family:var(--f-display);
  font-size:clamp(26px, 2.4vw, 36px);
  font-weight:300;
  letter-spacing:-0.018em;
  line-height:1.12;
  color:var(--c-navy);
  margin:0 0 14px;
}
.adv-eyebrow{
  font-family:var(--f-body);
  font-size:13px;
  font-weight:500;
  letter-spacing:.02em;
  text-transform:none;
  color:var(--c-cta);
  margin:0 0 14px;
}
.adv-lead{
  font-family:var(--f-body);
  font-size:18px;
  font-weight:300;
  line-height:1.5;
  color:var(--c-slate);
  margin:0;
  max-width:62ch;
}

/* ─ 6.2 Buttons ──────────────────────────────────────────────────────── */
.adv-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--f-body);
  font-size:15px;
  font-weight:500;
  line-height:1;
  padding:11px 18px;
  border-radius:var(--r-btn);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s var(--ease-stripe), border-color .2s var(--ease-stripe), color .2s var(--ease-stripe), box-shadow .2s var(--ease-stripe), transform .2s var(--ease-stripe);
  white-space:nowrap;
}
.adv-btn--primary{
  background:var(--c-cta);
  color:#fff;
  box-shadow:var(--shadow-cta);
}
.adv-btn--primary:hover{
  background:var(--c-cta-hover);
  transform:translateY(-1px);
}
.adv-btn--ghost{
  background:transparent;
  color:var(--c-cta);
  border-color:#c7d2fe;                      /* indigo-200 */
}
.adv-btn--ghost:hover{
  background:rgba(79,70,229,.06);
  border-color:var(--c-cta);
}
.adv-btn--text{
  background:transparent;
  color:var(--c-navy);
  padding:11px 4px;
}
.adv-btn--text:hover{ color:var(--c-cta); gap:12px }
.adv-btn--on-dark{
  background:#fff;
  color:var(--c-navy);
}
.adv-btn--on-dark:hover{ background:rgba(255,255,255,.92) }
.adv-btn--ghost-dark{
  background:transparent;
  color:#fff;
  border-color:rgba(255,255,255,.28);
}
.adv-btn--ghost-dark:hover{
  border-color:#fff;
  background:rgba(255,255,255,.08);
}

/* ─ 6.3 Surfaces (cards) ──────────────────────────────────────────────── */
.adv-surface{
  background:#fff;
  border:1px solid var(--c-edge);
  border-radius:var(--r-card);
}
.adv-surface--elevated{
  box-shadow:var(--shadow-elevated);
}
.adv-surface--ambient{
  box-shadow:var(--shadow-ambient);
}
.adv-surface--card{
  box-shadow:var(--shadow-card);
}
.adv-surface--hoverable{
  transition:box-shadow .25s var(--ease-stripe), border-color .25s var(--ease-stripe), transform .25s var(--ease-stripe);
}
.adv-surface--hoverable:hover{
  box-shadow:var(--shadow-elevated);
  border-color:#c7d2fe;
  transform:translateY(-2px);
}

/* ─ 6.4 Badges & pills ────────────────────────────────────────────────── */
.adv-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:var(--f-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:.005em;
  padding:3px 10px;
  border-radius:var(--r-chip);
  background:#fff;
  color:var(--c-navy);
  border:1px solid var(--c-edge);
  white-space:nowrap;
}
.adv-badge--success{
  background:var(--c-success-bg);
  color:var(--c-success-fg);
  border-color:rgba(21,190,83,.4);
}
.adv-badge--indigo{
  background:var(--c-cta-soft);
  color:var(--c-cta-deep);
  border-color:#c7d2fe;
}
.adv-badge--ruby{
  background:rgba(225,29,72,.12);
  color:var(--c-ruby);
  border-color:rgba(225,29,72,.3);
}

/* ─ 6.5 Dark brand sections — the alternating rhythm Stripe uses ─────── */
.adv-section-dark{
  background:var(--c-dark);
  color:rgba(255,255,255,.88);
}
.adv-section-dark .adv-display-hero,
.adv-section-dark .adv-display-large,
.adv-section-dark .adv-display-section,
.adv-section-dark h1,
.adv-section-dark h2,
.adv-section-dark h3{
  color:#fff;
}
.adv-section-dark .adv-lead,
.adv-section-dark .adv-eyebrow{
  color:rgba(255,255,255,.7);
}
.adv-section-dark .adv-eyebrow{
  color:#a5b4fc;                             /* indigo-300 — readable on dark */
}
.adv-section-dark .adv-surface{
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.1);
  color:rgba(255,255,255,.88);
}

/* ─ 6.6 Eyebrow dot — pre-headline microbadge ─────────────────────────── */
.adv-eyebrow-dot{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--f-body);
  font-size:12.5px;
  font-weight:500;
  letter-spacing:.005em;
  color:var(--c-slate);
  margin-bottom:18px;
}
.adv-eyebrow-dot::before{
  content:"";
  display:inline-block;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--c-cta);
}

/* ─ 6.7 Focus rings — accessible everywhere ──────────────────────────── */
.adv-btn:focus-visible,
.adv-surface--hoverable:focus-visible{
  outline:2px solid var(--c-cta);
  outline-offset:2px;
}