/* ═══════════════════════════════════════════════════════════════
   BANKABLE BRAND — canon token file + component library
   Ruled Sept 7 2026: "this is the brand look and design I want
   and expect of every Bankable brand now."

   This file is the single source of truth for color, type, radius,
   grid pitch, and the reusable component classes below. Nothing in
   here deletes or overrides page layout/structure — it defines new
   tokens and new .bnk- prefixed utility classes that pages opt into.
   Load this AFTER op-base-*.css / op-chrome.css / the page's own
   CSS so these values win the cascade on anything that uses them.

   No asset (page, video-still export, email) writes a color, font,
   radius, or shadow outside these tokens. That is the whole point
   of this file existing.
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── CORE PALETTE ── */
  --primary:   #0A1F3D;   /* navy ink */
  --secondary: #78829A;
  --highlight: #02B0F5;   /* cyan */
  --soft:      #F8F7F4;   /* paper ground */
  --divider:   #DDD9CF;
  --text:      #0A1F3D;
  --body-text: #4A5670;   /* body copy, per DESIGN SYSTEM */
  --white:     #FFFFFF;

  /* ── LOGO GRADIENT, locked 6-stop, sampled left to right off the mark ── */
  --gradient-logo: linear-gradient(
    90deg,
    #2C398B 0%,
    #24509F 20%,
    #1A69B4 40%,
    #1182C9 60%,
    #02A7E9 80%,
    #02B0F5 100%
  );

  /* ── RADIUS, two-tier and locked. Never a third number. ──
     --radius (12px) is the small-element standard: buttons, chips,
     ledger rows, icon boxes, badges.
     --radius-lg (22px) is approved for large surfaces only: price
     cards, accordions, panel grids, compare tables. Ruled Sept 9
     2026 — a large surface at 12px reads as an oversized button,
     not a card, so the two-tier system stands as canon. */
  --radius: 12px;
  --radius-lg: 22px;

  /* ── BLUEPRINT GRID, locked pitch. Never another number. ── */
  --grid-pitch: 46px;
  --grid-line: rgba(10, 31, 61, 0.06);

  /* ── TYPE ── */
  --font-display: 'Poppins', 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-body:    'Inter', 'Google Sans Flex', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* ── CHIPS ── */
  --chip-you-bg:    rgba(2, 176, 245, 0.10);
  --chip-you-text:  #0284C7;
  --chip-you-ring:  rgba(2, 176, 245, 0.35);
  --chip-teams-bg:   rgba(10, 31, 61, 0.06);
  --chip-teams-text: var(--primary);
  --chip-teams-ring: rgba(10, 31, 61, 0.20);

  /* ── SHADOW ── */
  --shadow-card: 0 2px 16px rgba(10, 31, 61, 0.07);
  --shadow-card-hover: 0 8px 32px rgba(10, 31, 61, 0.13);
}

body {
  font-family: var(--font-body);
  color: var(--body-text);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
}

/* Dead wordmark rule removed — the Bankable logo is always the
   img asset (img/bankable-logo.webp), never set in type or built
   as a CSS wordmark. See .nav-logo img in every page header. */


/* ═══════════════════════════════════════════════════════════════
   BLUEPRINT GRID BACKGROUND
   Apply to any full-bleed section on the paper ground.
   ═══════════════════════════════════════════════════════════════ */
.bnk-grid-bg {
  background-color: var(--soft) !important;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px) !important;
  background-size: var(--grid-pitch) var(--grid-pitch) !important;
}


/* ═══════════════════════════════════════════════════════════════
   MONO LABEL — uppercase, Plex Mono, cyan dot
   ═══════════════════════════════════════════════════════════════ */
.bnk-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.bnk-label::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--highlight);
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════
   HEADLINE — Poppins 600, exactly one italic gradient accent word
   Wrap the ONE word/phrase that carries the accent in <em>.
   Never zero <em> elements in a .bnk-headline, never two.
   ═══════════════════════════════════════════════════════════════ */
.bnk-headline {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--primary);
}
.bnk-headline em {
  font-style: italic;
  background: var(--heading-gradient, var(--gradient-logo));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.bnk-headline.on-dark {
  color: var(--white);
}


/* ═══════════════════════════════════════════════════════════════
   MONO LABEL ENFORCEMENT — retroactive, site-wide
   Every eyebrow/badge label already has the correct size, weight,
   letter-spacing, and uppercase treatment. It's just rendering in
   the body sans font instead of Plex Mono, and (with one exception)
   has no cyan dot. .badge is font-only here: it already renders its
   dot as a live <span class="pulse"> child on every page that uses
   it, so injecting a ::before dot would double it up.
   ═══════════════════════════════════════════════════════════════ */
.eyebrow, .eyebrow-light, .eyebrow--on-dark, .badge {
  font-family: var(--font-mono) !important;
}
.eyebrow::before, .eyebrow-light::before {
  content: '' !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--highlight) !important;
  margin-right: 8px !important;
  vertical-align: middle !important;
}


/* ═══════════════════════════════════════════════════════════════
   HEADLINE ACCENT ENFORCEMENT — retroactive, site-wide
   Every page already wraps exactly one accent word/phrase per
   headline in <em> (content discipline is already there). The
   violation lives entirely in CSS: every page-specific selector
   below currently renders font-style:normal + a flat solid color,
   never italic, never the gradient. This overrides all of them at
   once instead of editing 20+ page stylesheets individually.
   !important is deliberate: this file's job is to win the cascade
   over the selectors it is superseding.
   Excluded on purpose: .stat-num em / .s-stat-num em / .hero-stat-num
   em / .video-trigger-stat em — those live in div/span money
   displays, not headings, and keep their own solid-color treatment.
   ═══════════════════════════════════════════════════════════════ */
h1 em, h2 em, h3 em,
.hero-l h1 em, .hero h1 em, .hero-left h1 em, .hero-headline em,
.section-h em, .section-title em, .hs-title em, .bridge-text h2 em,
.but-wait-heading em, .page-hero h1 em, .hero-wrap h1 em,
.hero-wrap .hero-left h1 em {
  font-style: italic !important;
  background: var(--heading-gradient, var(--gradient-logo)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}


/* ═══════════════════════════════════════════════════════════════
   MONEY — Poppins 600, cyan, tabular numerals
   ═══════════════════════════════════════════════════════════════ */
.bnk-money {
  font-family: var(--font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--highlight);
}


/* ═══════════════════════════════════════════════════════════════
   PILL BUTTON — logo gradient fill, arrow suffix
   ═══════════════════════════════════════════════════════════════ */
.bnk-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 15px;
  color: var(--white);
  background: var(--heading-gradient, var(--gradient-logo));
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
}
.bnk-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-card-hover);
}
.bnk-btn svg { width: 14px; height: 14px; flex-shrink: 0; }


/* ═══════════════════════════════════════════════════════════════
   CARD — white chrome frame, 12px radius, navy card-head
   ═══════════════════════════════════════════════════════════════ */
.bnk-card {
  background: var(--white);
  border: 1px solid var(--divider);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.bnk-card-head {
  background: var(--primary);
  color: var(--white);
  padding: 14px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bnk-card-body {
  padding: 20px;
}


/* ═══════════════════════════════════════════════════════════════
   CHIPS — YOU (cyan) / THE TEAMS (navy)
   ═══════════════════════════════════════════════════════════════ */
.bnk-chip {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}
.bnk-chip-you {
  background: var(--chip-you-bg);
  color: var(--chip-you-text);
  border-color: var(--chip-you-ring);
}
.bnk-chip-teams {
  background: var(--chip-teams-bg);
  color: var(--chip-teams-text);
  border-color: var(--chip-teams-ring);
}


/* ═══════════════════════════════════════════════════════════════
   LEDGER ROW — numerals + status chip, for scan/report style lists
   ═══════════════════════════════════════════════════════════════ */
.bnk-ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  border-bottom: 1px solid var(--divider);
  font-family: var(--font-body);
}
.bnk-ledger-row:last-child { border-bottom: none; }
.bnk-ledger-num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--secondary);
  min-width: 28px;
}


/* ═══════════════════════════════════════════════════════════════
   FULL-BLEED NAVY BAND — for stats sections
   One per asset, per DESIGN LAW.
   ═══════════════════════════════════════════════════════════════ */
.bnk-band {
  background: var(--primary);
  color: var(--white);
  padding: 64px 24px;
}
.bnk-band .bnk-money { color: var(--highlight); }


/* ═══════════════════════════════════════════════════════════════
   BLACK FULL-BLEED BAR — one per asset
   ═══════════════════════════════════════════════════════════════ */
.bnk-black-bar {
  background: #0A0A0B;
  color: var(--white);
  padding: 20px 24px;
}


/* ═══════════════════════════════════════════════════════════════
   WARM STAKES STRIP — one per asset
   ═══════════════════════════════════════════════════════════════ */
.bnk-stakes-strip {
  background: #FBF1E7;
  color: var(--primary);
  padding: 16px 24px;
  border-top: 1px solid rgba(10, 31, 61, 0.08);
  border-bottom: 1px solid rgba(10, 31, 61, 0.08);
}


/* ═══════════════════════════════════════════════════════════════
   ENGRAVED PLATE WATERMARK — vault/column/temple illustrations
   Background-only, 30% opacity, multiply blend. Never foreground.
   Actual plate artwork ships as data-URI background-image values
   from the asset module (not yet present in this project — supply
   the data URIs and set --bnk-plate here or inline per section).
   ═══════════════════════════════════════════════════════════════ */
.bnk-engraved-plate {
  position: relative;
  isolation: isolate;
}
.bnk-engraved-plate::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--bnk-plate, none);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.3;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 0;
}
.bnk-engraved-plate > * {
  position: relative;
  z-index: 1;
}


/* ═══════════════════════════════════════════════════════════════
   PORTRAIT AVATAR — pre-framed 256px crop, never a squeezed cutout
   ═══════════════════════════════════════════════════════════════ */
.bnk-avatar {
  width: 256px;
  height: 256px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Scroll-reveal animations translate elements off-axis before they animate in.
   Without this, .reveal-right causes a brief horizontal scrollbar on wide
   viewports. Clipping at the root contains it without affecting the effect. */
html { overflow-x: hidden; }

/* Readable section markers on light surfaces. */
.num-feat-n,.ed-num,.expect-num,.stage-n,.step-num,.faq-num,.feature-card-num,
.visual-card-label,.vc-note,.feat-sidebar-label,.sidebar-label,.cat-count{color:var(--body-text)}
.eyebrow-light{color:#67d3ff!important}
/* The dark end of the logo gradient disappears on navy sections. */
.dark-s .section-h em,.section-h.light em,.cta-section h2 em{background-image:linear-gradient(90deg,#8acfff,#02B0F5)!important}

.article-tag,.feat-num,.sample-num,.step-label-text,.category-desc,.series-link-label,
.scan-part-num,.how-num,.goal-num,.help-num,.win-title,.doc-size,.notif-meta,.funnel-step-sub,
.funnel-arrow,.b-label,.component-pct,.score-prog-val,.program-badge-rate,.prog-tag,.vendor-num{color:#4A5670}
.cta-band h2 em{background-image:linear-gradient(90deg,#8acfff,#02B0F5)!important}

/* Shared surface and motion tokens. */
:root{--dark-band:var(--primary);--soft2:var(--soft);--motion-fast:180ms;--motion-reveal:450ms;--motion-ease:cubic-bezier(.2,.7,.2,1)}
/* Static status dots: no perpetual decorative glow or shimmer. */
.pulse,.ticker-dot-live,.hero-badge::before,.hero-eyebrow::before,.hero-badge-dot,
.hero-eyebrow-dot,.hero-series-tag .dot,.page-hero-eyebrow::before,
.hero-wrap .pulse,.visual-card:hover::before{animation:none!important;box-shadow:none!important}
.reveal,.reveal-left,.reveal-right,.reveal-scale{transition-duration:var(--motion-reveal)!important;transition-timing-function:var(--motion-ease)!important;transition-delay:0ms!important}
/* Shared CTA feedback without page-specific neon glows. */
a:is(.btn-primary,.btn-primary-lg,.btn-highlight,.btn-green,.btn-dark,.btn-demo,.bnk-btn,.tax-button){transition:background-color var(--motion-fast),color var(--motion-fast),box-shadow var(--motion-fast),transform var(--motion-fast)!important;box-shadow:var(--shadow-card)!important}
a:is(.btn-primary,.btn-primary-lg,.btn-highlight,.btn-green,.btn-dark,.btn-demo,.bnk-btn,.tax-button):hover{transform:translateY(-1px)!important;box-shadow:var(--shadow-card-hover)!important}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--highlight);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
 .reveal,.reveal-left,.reveal-right,.reveal-scale{opacity:1!important;transform:none!important}
 .illo-trend{stroke-dashoffset:0!important}.illo-msg,.illo-dot{opacity:1!important}
}
/* Dark-section captions and white-surface markers. */
.eyebrow{color:#4A5670!important}
:is(.dark-s,.cta-band,.section-dark,.dark,.navy-section) .eyebrow,.eyebrow--on-dark{color:#b7c5d5!important}
footer .footer-contact a{color:#aeb8c6}

/* Component contrast corrections. */
.op-i104a4396{color:#c6d1df!important}

/* Benefit cards sit on paper, clearly separated from their navy section. */
.dark-s .scope-grid-3,.dark-s .scope-grid-2{gap:16px;background:transparent;overflow:visible}
.dark-s .scope-card{background:var(--soft);border:1px solid var(--divider);border-radius:var(--radius-lg);box-shadow:var(--shadow-card)}
.dark-s .scope-card:hover{background:var(--white);box-shadow:var(--shadow-card-hover)}
.dark-s .scope-card h3{color:var(--primary)}
.dark-s .scope-card p{color:var(--body-text)}
.dark-s .scope-card .eyebrow-light{color:var(--body-text)!important}
.dark-s .scope-card-icon{background:#e6f2fa;border-color:#b6d5eb;color:#1A69B4}
.dark-s .scope-card-icon svg{stroke:#1A69B4}


:is(.demo-section,.bottom-cta,.bridge-section,.cta-strip,.feature-links-section,.but-wait-section) .eyebrow{color:#b7c5d5!important}
.scan-stat .lbl,.stat-strip .lbl,.mini-card .lbl,.wif-source,.wif-source a{color:#4A5670!important}

.bnk-accent-on-dark{--heading-gradient:linear-gradient(90deg,#8acfff,#02B0F5)}