/* ==========================================================================
   YOUBANKINGBUDDY — Design System
   Your Trusted Banking & Financial Services Companion
   --------------------------------------------------------------------------
   Naming convention : ybb-block__element--modifier  (all classes prefixed ybb-)
   Utilities         : u-* (layout/spacing/colour helpers only)
   State hooks       : is-* / has-* (toggled by JS, never styled standalone)
   Behaviour hooks   : data-yb-* attributes (JS never selects by class)
   Theme             : permanent LIGHT. Calm, airy, trust-first. No dark mode,
                       no theme toggle, ever.
   Geometry          : 12px inputs / 16px cards / 28px panels / pill buttons.
                       Soft, wide, low-opacity shadows only. 1px #e3e8f2 rules.
   Type              : Fraunces (display serif, sentence case) /
                       Plus Jakarta Sans (body) / DM Mono (every numeral)
   --------------------------------------------------------------------------
   TABLE OF CONTENTS
   01. Fonts & Tokens
   02. Reset & Base
   03. Typography primitives
   04. Layout shells, bands & grids
   05. Buttons, chips & pills
   06. Section headings (centred) & rules
   07. Header / Nav / Mega menu / Announce bar / Drawer
   08. Hero & growth curve
   09. Trust bar & partner marks
   10. Product category grid
   11. Comparison tables (bank compare, sortable)
   12. Frosted comparison cards & credit cards
   13. Featured loan offers & eligibility teaser
   14. Calculators (EMI / SIP / Interest / Eligibility) & rings
   15. Calculator strip tiles
   16. Credit-score guide band
   17. How-it-works spine
   18. Counters & statistics
   19. Blog / financial-news cards
   20. Testimonials & quote cards
   21. Trust, compliance & disclaimer blocks
   22. CTA bands & appointment booking
   23. Forms (lead-gen, newsletter, contact)
   24. FAQ accordion & tabs
   25. Interior page hero, breadcrumbs, share, pagination
   26. Footer
   27. Floating UI (WhatsApp, back-to-top, cookie, progress)
   28. Scroll reveal & motion utilities
   29. Utilities
   30. Responsive
   31. Reduced motion & print
   ========================================================================== */

/* ---------- 01. FONTS & TOKENS ------------------------------------------ */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&family=Plus+Jakarta+Sans:wght@400;500;600&family=DM+Mono:wght@400;500&display=swap");

:root {
  /* surfaces — light, calm, airy */
  --ybb-bg:          #ffffff;
  --ybb-paper:       #f4f6fb;   /* cool paper, alternating bands */
  --ybb-surface:     #ffffff;   /* cards */
  --ybb-navy:        #0d2149;   /* primary — inverted bands, headings */
  --ybb-navy-deep:   #081530;   /* deepest navy — footer, CTA gradient tail */
  --ybb-navy-tint:   #eef2f9;   /* 6% navy wash */
  --ybb-line:        #e3e8f2;   /* the 1px rule, everywhere */
  --ybb-line-soft:   #eef1f8;   /* inner divider */

  /* ink */
  --ybb-ink:         #0d2149;   /* headlines */
  --ybb-ink-body:    #48546b;   /* slate ink — body copy */
  --ybb-meta:        #6b7789;   /* meta / captions */
  --ybb-meta-faint:  #97a1b3;   /* tertiary */
  --ybb-ink-invert:  #ffffff;

  /* accents — emerald = growth/positive ONLY, gold = premium ONLY */
  --ybb-emerald:      #0f9d58;
  --ybb-emerald-dark: #0b7c45;
  --ybb-emerald-wash: rgba(15, 157, 88, .10);
  --ybb-gold:         #c8a33e;
  --ybb-gold-wash:    rgba(200, 163, 62, .12);

  /* the single permitted red — negative financial deltas only */
  --ybb-negative:    #c0392b;

  /* type */
  --ybb-font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ybb-font-body:    "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ybb-font-num:     "DM Mono", ui-monospace, "SFMono-Regular", monospace;

  /* scale */
  --ybb-step--2: .75rem;
  --ybb-step--1: .8125rem;
  --ybb-step-0:  1rem;
  --ybb-step-1:  1.125rem;
  --ybb-step-2:  1.375rem;
  --ybb-step-3:  1.75rem;
  --ybb-step-4:  2.25rem;
  --ybb-step-5:  clamp(2.4rem, 4.4vw, 3.25rem);
  --ybb-step-6:  clamp(2.9rem, 6vw, 4.5rem);

  /* rhythm — generous by mandate */
  --ybb-gap:        24px;
  --ybb-gap-sm:     14px;
  --ybb-gap-lg:     40px;
  --ybb-shell:      1180px;
  --ybb-shell-wide: 1320px;
  --ybb-shell-narrow: 760px;
  --ybb-band:       clamp(64px, 8vw, 118px);

  /* geometry — calm rounded */
  --ybb-r-input: 12px;
  --ybb-r-card:  16px;
  --ybb-r-panel: 28px;
  --ybb-r-pill:  999px;

  /* shadows — soft, wide, low opacity. Never harsh. */
  --ybb-shadow-xs: 0 1px 2px rgba(13, 33, 73, .04);
  --ybb-shadow-sm: 0 6px 18px -12px rgba(13, 33, 73, .22);
  --ybb-shadow:    0 22px 54px -34px rgba(13, 33, 73, .32);
  --ybb-shadow-lg: 0 46px 100px -60px rgba(13, 33, 73, .48);
  --ybb-ring-focus: 0 0 0 3px rgba(13, 33, 73, .16);

  /* motion — unhurried, never bouncy */
  --ybb-fast:   160ms;
  --ybb-med:    240ms;
  --ybb-slow:   420ms;
  --ybb-reveal: 760ms;
  --ybb-ease:   cubic-bezier(.22, .68, .28, 1);

  /* chrome */
  --ybb-header-h:   74px;
  --ybb-announce-h: 38px;
  --ybb-z-nav:    600;
  --ybb-z-float:  700;
  --ybb-z-cookie: 800;
}

/* ---------- 02. RESET & BASE -------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ybb-header-h) + var(--ybb-announce-h) + 20px);
}

body {
  margin: 0;
  background: var(--ybb-bg);
  color: var(--ybb-ink-body);
  font-family: var(--ybb-font-body);
  font-size: var(--ybb-step-0);
  line-height: 1.72;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img, svg { max-width: 100%; }
svg { display: block; }

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ybb-navy); }

button, input, select, textarea { font: inherit; color: inherit; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ybb-font-display);
  font-weight: 600;
  font-optical-sizing: auto;
  color: var(--ybb-ink);
  line-height: 1.18;
  letter-spacing: -.012em;
  margin: 0 0 .5em;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

hr { border: 0; border-top: 1px solid var(--ybb-line); margin: 0; }

:focus-visible {
  outline: 2px solid var(--ybb-navy);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: rgba(13, 33, 73, .12); color: var(--ybb-navy); }

::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--ybb-paper); }
::-webkit-scrollbar-thumb { background: #ccd5e6; border-radius: var(--ybb-r-pill); border: 3px solid var(--ybb-paper); }
::-webkit-scrollbar-thumb:hover { background: #b4c0d8; }

.ybb-skip {
  position: absolute;
  left: 16px; top: -80px;
  z-index: 999;
  padding: 12px 22px;
  background: var(--ybb-navy);
  color: #fff;
  border-radius: var(--ybb-r-pill);
  font-weight: 600;
  font-size: var(--ybb-step--1);
  transition: top var(--ybb-fast) var(--ybb-ease);
}
.ybb-skip:focus { top: 16px; color: #fff; }

/* ---------- 03. TYPOGRAPHY PRIMITIVES ----------------------------------- */
.ybb-d1 { font-size: var(--ybb-step-6); line-height: 1.06; letter-spacing: -.022em; }
.ybb-d2 { font-size: var(--ybb-step-5); line-height: 1.12; letter-spacing: -.018em; }
.ybb-d3 { font-size: var(--ybb-step-4); line-height: 1.18; }
.ybb-d4 { font-size: var(--ybb-step-3); line-height: 1.24; }
.ybb-d5 { font-size: var(--ybb-step-2); line-height: 1.32; }

.ybb-lede {
  font-size: var(--ybb-step-1);
  line-height: 1.72;
  color: var(--ybb-ink-body);
  max-width: 64ch;
}
.ybb-lede--center { margin-left: auto; margin-right: auto; }

.ybb-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ybb-font-body);
  font-size: var(--ybb-step--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ybb-emerald);
}
.ybb-eyebrow--gold { color: var(--ybb-gold); }
.ybb-eyebrow--navy { color: var(--ybb-navy); }
.ybb-eyebrow::before {
  content: "";
  width: 22px; height: 2px;
  background: currentColor;
  border-radius: var(--ybb-r-pill);
  opacity: .85;
}

.ybb-meta {
  font-size: var(--ybb-step--1);
  color: var(--ybb-meta);
  line-height: 1.6;
}
.ybb-meta__dot { margin: 0 8px; color: var(--ybb-meta-faint); }

/* every rate, EMI, percentage, amount and counter */
.ybb-num {
  font-family: var(--ybb-font-num);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
  color: var(--ybb-ink);
}
.ybb-num--lg { font-size: var(--ybb-step-4); }
.ybb-num--xl { font-size: var(--ybb-step-5); line-height: 1.05; }
.ybb-num--emerald { color: var(--ybb-emerald); }
.ybb-num--gold { color: var(--ybb-gold); }

.ybb-delta { font-family: var(--ybb-font-num); font-size: var(--ybb-step--1); font-weight: 500; }
.ybb-delta--up { color: var(--ybb-emerald); }
.ybb-delta--down { color: var(--ybb-negative); }

.ybb-link {
  color: var(--ybb-navy);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-bottom: 1px solid rgba(13, 33, 73, .22);
  padding-bottom: 1px;
  transition: border-color var(--ybb-fast) var(--ybb-ease), gap var(--ybb-fast) var(--ybb-ease);
}
.ybb-link:hover { border-color: var(--ybb-emerald); gap: 11px; }
.ybb-link--emerald { color: var(--ybb-emerald-dark); border-color: rgba(15, 157, 88, .3); }

.ybb-prose > * + * { margin-top: 1.05em; }
.ybb-prose h2 { margin-top: 1.7em; }
.ybb-prose h3 { margin-top: 1.4em; }
.ybb-prose a { color: var(--ybb-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.ybb-prose ul { list-style: none; }
.ybb-prose li { position: relative; padding-left: 24px; margin-bottom: .55em; }
.ybb-prose li::before {
  content: "";
  position: absolute; left: 3px; top: .72em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ybb-emerald);
  opacity: .7;
}

/* ---------- 04. LAYOUT SHELLS, BANDS & GRIDS ---------------------------- */
.ybb-shell {
  width: 100%;
  max-width: var(--ybb-shell);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 40px);
}
.ybb-shell--wide   { max-width: var(--ybb-shell-wide); }
.ybb-shell--narrow { max-width: var(--ybb-shell-narrow); }

.ybb-band { padding-block: var(--ybb-band); position: relative; }
.ybb-band--tight { padding-block: calc(var(--ybb-band) * .58); }
.ybb-band--paper { background: var(--ybb-paper); }
.ybb-band--tint  { background: var(--ybb-navy-tint); }
.ybb-band--navy  {
  background: linear-gradient(160deg, var(--ybb-navy) 0%, var(--ybb-navy-deep) 100%);
  color: rgba(255, 255, 255, .78);
}
.ybb-band--navy h1, .ybb-band--navy h2, .ybb-band--navy h3, .ybb-band--navy h4 { color: #fff; }
.ybb-band--navy .ybb-lede { color: rgba(255, 255, 255, .78); }
.ybb-band--navy .ybb-num  { color: #fff; }
.ybb-band--navy .ybb-meta { color: rgba(255, 255, 255, .6); }
.ybb-band--ruled { border-top: 1px solid var(--ybb-line); }

/* the calm vertical rhythm: single-focus, centred, generous */
.ybb-focus { max-width: 780px; margin-inline: auto; text-align: center; }
.ybb-focus--wide { max-width: 940px; }

.ybb-grid { display: grid; gap: var(--ybb-gap); }
.ybb-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ybb-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ybb-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ybb-grid--lg { gap: var(--ybb-gap-lg); }

.ybb-split {
  display: grid;
  gap: clamp(28px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.ybb-split--wide-left { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

.ybb-stack { display: grid; gap: var(--ybb-gap-sm); }
.ybb-stack--lg { gap: var(--ybb-gap); }

.ybb-panel {
  background: var(--ybb-surface);
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-panel);
  box-shadow: var(--ybb-shadow);
  padding: clamp(24px, 3.4vw, 44px);
}
.ybb-panel--flat { box-shadow: none; }
.ybb-panel--paper { background: var(--ybb-paper); box-shadow: none; }

.ybb-hairline { height: 1px; background: var(--ybb-line); border: 0; }
.ybb-hairline--soft { background: var(--ybb-line-soft); }

/* ---------- 05. BUTTONS, CHIPS & PILLS ---------------------------------- */
.ybb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 14px 30px;
  border: 1px solid var(--ybb-navy);
  border-radius: var(--ybb-r-pill);
  background: var(--ybb-navy);
  color: #fff;
  font-family: var(--ybb-font-body);
  font-size: var(--ybb-step--1);
  font-weight: 600;
  letter-spacing: .01em;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--ybb-shadow-sm);
  transition: transform var(--ybb-fast) var(--ybb-ease),
              box-shadow var(--ybb-med) var(--ybb-ease),
              background var(--ybb-fast) var(--ybb-ease),
              color var(--ybb-fast) var(--ybb-ease);
}
.ybb-btn:hover { background: var(--ybb-navy-deep); color: #fff; transform: translateY(-2px); box-shadow: var(--ybb-shadow); }
.ybb-btn:active { transform: translateY(0); }
.ybb-btn[disabled] { opacity: .55; cursor: not-allowed; transform: none; }

.ybb-btn--ghost {
  background: transparent;
  color: var(--ybb-navy);
  border-color: var(--ybb-line);
  box-shadow: none;
}
.ybb-btn--ghost:hover { background: var(--ybb-navy-tint); color: var(--ybb-navy); border-color: #ccd5e6; }

.ybb-btn--emerald { background: var(--ybb-emerald); border-color: var(--ybb-emerald); }
.ybb-btn--emerald:hover { background: var(--ybb-emerald-dark); border-color: var(--ybb-emerald-dark); }

.ybb-btn--gold { background: var(--ybb-gold); border-color: var(--ybb-gold); color: var(--ybb-navy-deep); }
.ybb-btn--gold:hover { background: #b8942f; border-color: #b8942f; color: var(--ybb-navy-deep); }

.ybb-btn--light { background: #fff; border-color: #fff; color: var(--ybb-navy); }
.ybb-btn--light:hover { background: #f2f5fb; border-color: #f2f5fb; color: var(--ybb-navy); }

.ybb-btn--outline-light { background: transparent; border-color: rgba(255, 255, 255, .34); color: #fff; box-shadow: none; }
.ybb-btn--outline-light:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .55); }

.ybb-btn--sm { padding: 10px 20px; font-size: var(--ybb-step--2); }
.ybb-btn--lg { padding: 17px 38px; font-size: var(--ybb-step-0); }
.ybb-btn--block { display: flex; width: 100%; }

.ybb-chipset { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

.ybb-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 15px;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-pill);
  background: #fff;
  color: var(--ybb-ink-body);
  font-size: var(--ybb-step--2);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ybb-fast) var(--ybb-ease);
}
.ybb-chip:hover { border-color: #ccd5e6; background: var(--ybb-navy-tint); color: var(--ybb-navy); }
.ybb-chip.is-active { background: var(--ybb-navy); border-color: var(--ybb-navy); color: #fff; }
.ybb-chip--emerald { color: var(--ybb-emerald-dark); background: var(--ybb-emerald-wash); border-color: rgba(15, 157, 88, .22); }
.ybb-chip--gold { color: #8f7420; background: var(--ybb-gold-wash); border-color: rgba(200, 163, 62, .3); }
.ybb-chip--static { cursor: default; }
.ybb-chip--static:hover { border-color: var(--ybb-line); background: #fff; color: var(--ybb-ink-body); }

.ybb-badge {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--ybb-r-pill);
  font-size: var(--ybb-step--2);
  font-weight: 600;
  letter-spacing: .04em;
  background: var(--ybb-navy-tint);
  color: var(--ybb-navy);
}
.ybb-badge--emerald { background: var(--ybb-emerald-wash); color: var(--ybb-emerald-dark); }
.ybb-badge--gold { background: var(--ybb-gold-wash); color: #8f7420; }

.ybb-iconbtn {
  display: inline-grid;
  place-items: center;
  width: 42px; height: 42px;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-pill);
  background: #fff;
  color: var(--ybb-navy);
  cursor: pointer;
  transition: all var(--ybb-fast) var(--ybb-ease);
}
.ybb-iconbtn:hover { background: var(--ybb-navy-tint); border-color: #ccd5e6; }

/* ---------- 06. SECTION HEADINGS (CENTRED) ------------------------------ */
.ybb-sechead {
  max-width: 720px;
  margin: 0 auto clamp(34px, 4vw, 58px);
  text-align: center;
}
.ybb-sechead--left { margin-left: 0; text-align: left; }
.ybb-sechead__title { margin: 14px 0 0; }
.ybb-sechead__lede { margin: 16px auto 0; color: var(--ybb-ink-body); font-size: var(--ybb-step-1); }
.ybb-sechead--left .ybb-sechead__lede { margin-left: 0; }
.ybb-sechead__acts { margin-top: 26px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.ybb-sechead--left .ybb-sechead__acts { justify-content: flex-start; }

/* ---------- 07. HEADER / NAV / MEGA / ANNOUNCE / DRAWER ----------------- */
.ybb-announce {
  height: var(--ybb-announce-h);
  background: var(--ybb-navy);
  color: rgba(255, 255, 255, .84);
  font-size: var(--ybb-step--2);
  display: flex;
  align-items: center;
  overflow: hidden;
}
.ybb-announce__inner {
  display: flex;
  align-items: center;
  gap: 26px;
  width: 100%;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}
.ybb-announce__inner::-webkit-scrollbar { display: none; }
.ybb-announce__item { display: inline-flex; align-items: center; gap: 8px; }
.ybb-announce__item .ybb-num { color: #fff; font-size: var(--ybb-step--2); }
.ybb-announce__item .ybb-delta--up { color: #5fd39a; }
.ybb-announce__item .ybb-delta--down { color: #e88b7f; }
.ybb-announce__sep { color: rgba(255, 255, 255, .26); }

.ybb-header {
  position: sticky;
  top: 0;
  z-index: var(--ybb-z-nav);
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--ybb-med) var(--ybb-ease), box-shadow var(--ybb-med) var(--ybb-ease);
}
.ybb-header.is-stuck { border-bottom-color: var(--ybb-line); box-shadow: 0 12px 34px -30px rgba(13, 33, 73, .5); }

.ybb-header__bar {
  height: var(--ybb-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.ybb-header__tools { display: flex; align-items: center; gap: 10px; }

.ybb-logo { display: inline-flex; align-items: center; gap: 12px; }
.ybb-logo__mark { width: 40px; height: 40px; flex: none; border-radius: 11px; }
.ybb-logo__word {
  display: block;
  font-family: var(--ybb-font-display);
  font-weight: 700;
  font-size: 1.24rem;
  color: var(--ybb-navy);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.ybb-logo__word em { font-style: normal; color: var(--ybb-emerald); }
.ybb-logo__tag {
  display: block;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ybb-meta);
  font-weight: 600;
  margin-top: 2px;
}

.ybb-nav__list { display: flex; align-items: center; gap: 4px; }
.ybb-nav__item { position: relative; }
.ybb-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 15px;
  border: 0;
  background: none;
  border-radius: var(--ybb-r-pill);
  font-size: var(--ybb-step--1);
  font-weight: 600;
  color: var(--ybb-ink-body);
  cursor: pointer;
  transition: all var(--ybb-fast) var(--ybb-ease);
}
.ybb-nav__link:hover { background: var(--ybb-navy-tint); color: var(--ybb-navy); }
.ybb-nav__link[aria-current="page"] { color: var(--ybb-navy); background: var(--ybb-navy-tint); }
.ybb-nav__caret {
  width: 7px; height: 7px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--ybb-fast) var(--ybb-ease);
}
.ybb-nav__link[aria-expanded="true"] .ybb-nav__caret { transform: rotate(-135deg) translateY(-2px); }

.ybb-mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  width: min(880px, 88vw);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 26px;
  background: #fff;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-panel);
  box-shadow: var(--ybb-shadow-lg);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ybb-med) var(--ybb-ease), transform var(--ybb-med) var(--ybb-ease), visibility var(--ybb-med);
}
.ybb-mega.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translate(-50%, 0); }
.ybb-mega__col { padding: 4px 12px; }
.ybb-mega__title {
  font-family: var(--ybb-font-body);
  font-size: var(--ybb-step--2);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ybb-meta);
  margin-bottom: 12px;
}
.ybb-mega__link {
  display: block;
  padding: 9px 12px;
  border-radius: var(--ybb-r-input);
  font-size: var(--ybb-step--1);
  font-weight: 600;
  color: var(--ybb-ink);
  transition: background var(--ybb-fast) var(--ybb-ease);
}
.ybb-mega__link small { display: block; font-weight: 400; color: var(--ybb-meta); font-size: var(--ybb-step--2); margin-top: 1px; }
.ybb-mega__link:hover { background: var(--ybb-navy-tint); color: var(--ybb-navy); }
.ybb-mega__promo {
  background: var(--ybb-paper);
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-card);
  padding: 20px;
  height: 100%;
}
.ybb-mega__promo h4 { font-size: var(--ybb-step-1); margin: 10px 0 8px; }

.ybb-burger { display: none; }
.ybb-burger__box { display: grid; gap: 4px; width: 17px; }
.ybb-burger__box i { display: block; height: 1.8px; background: currentColor; border-radius: 2px; transition: transform var(--ybb-fast) var(--ybb-ease); }

.ybb-drawer {
  position: fixed;
  inset: 0 0 0 auto;
  width: min(400px, 88vw);
  z-index: calc(var(--ybb-z-nav) + 10);
  background: #fff;
  border-left: 1px solid var(--ybb-line);
  box-shadow: var(--ybb-shadow-lg);
  padding: 26px 24px 44px;
  overflow-y: auto;
  transform: translateX(102%);
  transition: transform var(--ybb-slow) var(--ybb-ease);
}
.ybb-drawer.is-open { transform: translateX(0); }
.ybb-drawer__group {
  font-family: var(--ybb-font-body);
  font-size: var(--ybb-step--2);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--ybb-meta);
  margin: 26px 0 8px;
}
.ybb-drawer__link {
  display: block;
  padding: 13px 14px;
  border-radius: var(--ybb-r-input);
  font-weight: 600;
  color: var(--ybb-ink);
  border-bottom: 1px solid var(--ybb-line-soft);
}
.ybb-drawer__link:hover { background: var(--ybb-navy-tint); }
.ybb-drawer__foot { margin-top: 28px; display: grid; gap: 10px; }

/* ---------- 08. HERO & GROWTH CURVE ------------------------------------- */
.ybb-hero {
  position: relative;
  padding-block: clamp(56px, 7vw, 104px) clamp(48px, 6vw, 88px);
  background:
    radial-gradient(1100px 460px at 50% -10%, rgba(15, 157, 88, .07), transparent 62%),
    radial-gradient(900px 420px at 12% 8%, rgba(13, 33, 73, .06), transparent 60%),
    var(--ybb-bg);
  overflow: hidden;
}
.ybb-hero__inner { max-width: 880px; margin-inline: auto; text-align: center; position: relative; z-index: 2; }
.ybb-hero__title { margin: 20px 0 0; }
.ybb-hero__title em { font-style: normal; color: var(--ybb-emerald); }
.ybb-hero__lede { margin: 22px auto 0; font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 62ch; }
.ybb-hero__acts { margin-top: 34px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ybb-hero__note { margin-top: 20px; font-size: var(--ybb-step--1); color: var(--ybb-meta); }
.ybb-hero__calc { margin: clamp(38px, 5vw, 62px) auto 0; max-width: 940px; text-align: left; }
.ybb-hero__art {
  position: absolute;
  inset: auto 0 0 0;
  height: 260px;
  z-index: 1;
  opacity: .55;
  pointer-events: none;
}

/* signature device: animated growth curve with gradient area fill */
.ybb-curve { width: 100%; height: auto; display: block; }
.ybb-curve__line {
  fill: none;
  stroke: var(--ybb-emerald);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation: ybbDraw 2.6s var(--ybb-ease) forwards;
}
.ybb-curve__line--navy { stroke: var(--ybb-navy); animation-delay: .35s; }
.ybb-curve__area { opacity: 0; animation: ybbFadeArea 1.4s var(--ybb-ease) 1.1s forwards; }
.ybb-curve__dot { opacity: 0; animation: ybbFadeArea .6s var(--ybb-ease) 2.2s forwards; }
@keyframes ybbDraw { to { stroke-dashoffset: 0; } }
@keyframes ybbFadeArea { to { opacity: 1; } }

/* ---------- 09. TRUST BAR & PARTNER MARKS ------------------------------- */
.ybb-trustbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 52px);
  flex-wrap: wrap;
  padding: 26px 0;
}
.ybb-trustbar__label {
  font-size: var(--ybb-step--2);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ybb-meta-faint);
  width: 100%;
  text-align: center;
  margin-bottom: 4px;
}
.ybb-trustbar__mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ybb-meta);
  font-weight: 600;
  font-size: var(--ybb-step--1);
  opacity: .82;
  transition: opacity var(--ybb-fast) var(--ybb-ease), color var(--ybb-fast) var(--ybb-ease);
}
.ybb-trustbar__mark:hover { opacity: 1; color: var(--ybb-navy); }
.ybb-trustbar__mark svg { width: 30px; height: 30px; flex: none; }

/* ---------- 10. PRODUCT CATEGORY GRID ----------------------------------- */
.ybb-cat {
  display: block;
  position: relative;
  padding: 30px 26px 28px;
  background: var(--ybb-surface);
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-card);
  box-shadow: var(--ybb-shadow-xs);
  transition: transform var(--ybb-med) var(--ybb-ease),
              box-shadow var(--ybb-med) var(--ybb-ease),
              border-color var(--ybb-med) var(--ybb-ease);
  height: 100%;
}
.ybb-cat:hover { transform: translateY(-4px); box-shadow: var(--ybb-shadow); border-color: #d3dcee; }
.ybb-cat__icon {
  width: 54px; height: 54px;
  border-radius: 15px;
  display: grid;
  place-items: center;
  background: var(--ybb-navy-tint);
  color: var(--ybb-navy);
  margin-bottom: 18px;
}
.ybb-cat__icon--emerald { background: var(--ybb-emerald-wash); color: var(--ybb-emerald-dark); }
.ybb-cat__icon--gold { background: var(--ybb-gold-wash); color: #8f7420; }
.ybb-cat__title { font-size: var(--ybb-step-2); margin: 0 0 8px; }
.ybb-cat__text { font-size: var(--ybb-step--1); color: var(--ybb-ink-body); margin: 0 0 16px; }
.ybb-cat__list { display: grid; gap: 6px; margin-bottom: 18px; }
.ybb-cat__list li { font-size: var(--ybb-step--1); color: var(--ybb-meta); display: flex; gap: 8px; align-items: baseline; }
.ybb-cat__list li::before { content: "—"; color: var(--ybb-emerald); }
.ybb-cat__rate {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-top: 15px;
  border-top: 1px solid var(--ybb-line-soft);
  font-size: var(--ybb-step--1);
  color: var(--ybb-meta);
}
.ybb-cat__cta { margin-top: 14px; font-size: var(--ybb-step--1); font-weight: 600; color: var(--ybb-navy); display: inline-flex; gap: 7px; }
.ybb-cat:hover .ybb-cat__cta { color: var(--ybb-emerald-dark); }

/* ---------- 11. COMPARISON TABLES --------------------------------------- */
.ybb-tablewrap {
  overflow-x: auto;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-panel);
  background: #fff;
  box-shadow: var(--ybb-shadow);
}
.ybb-tabletools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}
.ybb-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.ybb-table thead th {
  background: var(--ybb-paper);
  text-align: left;
  padding: 16px 20px;
  font-family: var(--ybb-font-body);
  font-size: var(--ybb-step--2);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ybb-meta);
  border-bottom: 1px solid var(--ybb-line);
  white-space: nowrap;
}
.ybb-table__sort {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  letter-spacing: inherit;
  text-transform: inherit;
}
.ybb-table__sort::after {
  content: "";
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .35;
  transition: transform var(--ybb-fast) var(--ybb-ease), opacity var(--ybb-fast) var(--ybb-ease);
}
.ybb-table__sort:hover::after { opacity: .8; }
.ybb-table__sort[aria-sort="ascending"]::after { transform: rotate(180deg); opacity: 1; color: var(--ybb-emerald); }
.ybb-table__sort[aria-sort="descending"]::after { opacity: 1; color: var(--ybb-emerald); }
.ybb-table tbody td {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ybb-line-soft);
  font-size: var(--ybb-step--1);
  vertical-align: middle;
}
.ybb-table tbody tr:last-child td { border-bottom: 0; }
.ybb-table tbody tr { transition: background var(--ybb-fast) var(--ybb-ease); }
.ybb-table tbody tr:hover { background: var(--ybb-paper); }
.ybb-table tbody tr.is-hidden { display: none; }
.ybb-table__bank { display: flex; align-items: center; gap: 12px; }
.ybb-table__crest { width: 36px; height: 36px; flex: none; border-radius: 10px; }
.ybb-table__name { font-weight: 600; color: var(--ybb-ink); display: block; }
.ybb-table__sub { font-size: var(--ybb-step--2); color: var(--ybb-meta); display: block; }
.ybb-table__hi { color: var(--ybb-emerald-dark); font-weight: 500; }
.ybb-table caption { caption-side: top; }

/* ---------- 12. FROSTED COMPARISON CARDS & CREDIT CARDS ----------------- */
.ybb-compare {
  position: relative;
  padding: 30px 28px;
  border-radius: var(--ybb-r-panel);
  border: 1px solid rgba(255, 255, 255, .6);
  background: rgba(255, 255, 255, .62);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow: var(--ybb-shadow);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: transform var(--ybb-med) var(--ybb-ease), box-shadow var(--ybb-med) var(--ybb-ease);
}
.ybb-compare:hover { transform: translateY(-5px); box-shadow: var(--ybb-shadow-lg); }
.ybb-compare--featured { border-color: rgba(200, 163, 62, .55); background: rgba(255, 255, 255, .82); }
.ybb-compare__flag {
  position: absolute;
  top: -13px; left: 28px;
  padding: 5px 15px;
  border-radius: var(--ybb-r-pill);
  background: var(--ybb-gold);
  color: var(--ybb-navy-deep);
  font-size: var(--ybb-step--2);
  font-weight: 600;
  letter-spacing: .05em;
}
.ybb-compare__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.ybb-compare__title { font-size: var(--ybb-step-2); margin: 0; }
.ybb-compare__sub { font-size: var(--ybb-step--2); color: var(--ybb-meta); }
.ybb-compare__rate { display: flex; align-items: baseline; gap: 9px; margin-bottom: 4px; }
.ybb-compare__specs { display: grid; gap: 11px; margin: 20px 0; }
.ybb-compare__spec { display: flex; justify-content: space-between; gap: 14px; font-size: var(--ybb-step--1); }
.ybb-compare__spec dt { color: var(--ybb-meta); }
.ybb-compare__spec dd { margin: 0; font-family: var(--ybb-font-num); font-weight: 500; color: var(--ybb-ink); }
.ybb-compare__foot { margin-top: auto; padding-top: 20px; border-top: 1px solid var(--ybb-line); }

/* credit cards */
.ybb-ccard {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-panel);
  background: #fff;
  overflow: hidden;
  box-shadow: var(--ybb-shadow-xs);
  transition: transform var(--ybb-med) var(--ybb-ease), box-shadow var(--ybb-med) var(--ybb-ease);
}
.ybb-ccard:hover { transform: translateY(-5px); box-shadow: var(--ybb-shadow); }
.ybb-ccard__art { padding: 24px 24px 0; }
.ybb-ccard__plastic { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--ybb-shadow-sm); }
.ybb-ccard__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.ybb-ccard__bank { font-size: var(--ybb-step--2); letter-spacing: .1em; text-transform: uppercase; color: var(--ybb-meta); font-weight: 600; }
.ybb-ccard__name { font-size: var(--ybb-step-2); margin: 6px 0 12px; }
.ybb-ccard__perks { display: grid; gap: 8px; margin-bottom: 18px; }
.ybb-ccard__perks li { display: flex; gap: 9px; font-size: var(--ybb-step--1); color: var(--ybb-ink-body); }
.ybb-ccard__perks svg { flex: none; margin-top: 5px; color: var(--ybb-emerald); }
.ybb-ccard__fee {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 0;
  margin-top: auto;
  border-top: 1px solid var(--ybb-line-soft);
  font-size: var(--ybb-step--1);
  color: var(--ybb-meta);
}

/* ---------- 13. FEATURED LOAN OFFERS & ELIGIBILITY TEASER --------------- */
.ybb-offer {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 26px 30px;
  background: #fff;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-card);
  box-shadow: var(--ybb-shadow-xs);
  transition: border-color var(--ybb-med) var(--ybb-ease), box-shadow var(--ybb-med) var(--ybb-ease);
}
.ybb-offer:hover { border-color: #d3dcee; box-shadow: var(--ybb-shadow-sm); }
.ybb-offer--featured { border-color: rgba(200, 163, 62, .45); background: linear-gradient(180deg, rgba(200, 163, 62, .05), transparent 60%); }
.ybb-offer__head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ybb-offer__title { font-size: var(--ybb-step-2); margin: 0; }
.ybb-offer__grid { display: flex; flex-wrap: wrap; gap: 28px; margin-top: 16px; }
.ybb-offer__stat { min-width: 108px; }
.ybb-offer__key { display: block; font-size: var(--ybb-step--2); letter-spacing: .09em; text-transform: uppercase; color: var(--ybb-meta); margin-bottom: 3px; }
.ybb-offer__val { font-family: var(--ybb-font-num); font-weight: 500; font-size: var(--ybb-step-1); color: var(--ybb-ink); }
.ybb-offer__acts { display: grid; gap: 10px; justify-items: stretch; min-width: 172px; }

.ybb-elig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ybb-elig__meter { display: grid; gap: 16px; }
.ybb-elig__row { display: grid; gap: 7px; }
.ybb-elig__bar { height: 9px; border-radius: var(--ybb-r-pill); background: var(--ybb-navy-tint); overflow: hidden; }
.ybb-elig__fill { display: block; height: 100%; border-radius: var(--ybb-r-pill); background: linear-gradient(90deg, var(--ybb-emerald), #37c07d); transition: width var(--ybb-slow) var(--ybb-ease); }
.ybb-elig__label { display: flex; justify-content: space-between; font-size: var(--ybb-step--1); color: var(--ybb-meta); }

/* ---------- 14. CALCULATORS & RINGS ------------------------------------- */
.ybb-calc {
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-panel);
  background: #fff;
  box-shadow: var(--ybb-shadow);
  overflow: hidden;
}
.ybb-calc__head {
  padding: 22px clamp(20px, 3vw, 34px);
  border-bottom: 1px solid var(--ybb-line);
  background: var(--ybb-paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.ybb-calc__title { font-size: var(--ybb-step-2); margin: 0; }
.ybb-calc__body {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(24px, 3vw, 44px);
  padding: clamp(24px, 3vw, 38px);
}
.ybb-calc__body--single { grid-template-columns: minmax(0, 1fr); }
.ybb-calc__controls { display: grid; gap: 24px; align-content: start; }

.ybb-calc__field { display: grid; gap: 10px; }
.ybb-calc__label { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.ybb-calc__label span:first-child { font-size: var(--ybb-step--1); font-weight: 600; color: var(--ybb-ink); }
.ybb-calc__value {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  padding: 5px 13px;
  border-radius: var(--ybb-r-pill);
  background: var(--ybb-navy-tint);
  font-family: var(--ybb-font-num);
  font-weight: 500;
  font-size: var(--ybb-step--1);
  color: var(--ybb-navy);
}
.ybb-calc__num {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-input);
  background: #fff;
  font-family: var(--ybb-font-num);
  font-weight: 500;
  color: var(--ybb-ink);
  transition: border-color var(--ybb-fast) var(--ybb-ease), box-shadow var(--ybb-fast) var(--ybb-ease);
}
.ybb-calc__num:focus { outline: 0; border-color: var(--ybb-navy); box-shadow: var(--ybb-ring-focus); }
.ybb-calc__hint { font-size: var(--ybb-step--2); color: var(--ybb-meta); }

.ybb-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--ybb-r-pill);
  background: var(--ybb-navy-tint);
  cursor: pointer;
}
.ybb-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ybb-emerald);
  box-shadow: 0 4px 12px -4px rgba(13, 33, 73, .4);
  transition: transform var(--ybb-fast) var(--ybb-ease);
}
.ybb-range::-webkit-slider-thumb:hover { transform: scale(1.12); }
.ybb-range::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--ybb-emerald);
  box-shadow: 0 4px 12px -4px rgba(13, 33, 73, .4);
}
.ybb-range:focus-visible { outline-offset: 6px; }

.ybb-calc__result {
  border-radius: var(--ybb-r-card);
  background: linear-gradient(165deg, var(--ybb-navy) 0%, var(--ybb-navy-deep) 100%);
  color: rgba(255, 255, 255, .74);
  padding: clamp(22px, 3vw, 30px);
  display: grid;
  gap: 18px;
  align-content: start;
}
.ybb-calc__headline { display: grid; gap: 4px; }
.ybb-calc__headline span { font-size: var(--ybb-step--2); letter-spacing: .12em; text-transform: uppercase; color: rgba(255, 255, 255, .58); }
.ybb-calc__headline strong {
  font-family: var(--ybb-font-num);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem);
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.ybb-calc__breakdown { display: grid; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .14); }
.ybb-calc__line { display: flex; justify-content: space-between; gap: 14px; font-size: var(--ybb-step--1); }
.ybb-calc__line b { font-family: var(--ybb-font-num); font-weight: 500; color: #fff; }
.ybb-calc__note { font-size: var(--ybb-step--2); color: rgba(255, 255, 255, .55); line-height: 1.6; }
.ybb-calc__acts { display: flex; gap: 10px; flex-wrap: wrap; }
.ybb-calc__error { font-size: var(--ybb-step--2); color: #ffb4a8; }

/* percentage ring — signature device */
.ybb-ring { display: inline-grid; place-items: center; position: relative; }
.ybb-ring__svg { transform: rotate(-90deg); }
.ybb-ring__track { fill: none; stroke: rgba(255, 255, 255, .16); }
.ybb-ring__value {
  fill: none;
  stroke: var(--ybb-emerald);
  stroke-linecap: round;
  transition: stroke-dashoffset var(--ybb-slow) var(--ybb-ease);
}
.ybb-ring__value--gold { stroke: var(--ybb-gold); }
.ybb-ring__value--navy { stroke: var(--ybb-navy); }
.ybb-ring__track--light { stroke: var(--ybb-navy-tint); }
.ybb-ring__center {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.15;
}
.ybb-ring__pct { font-family: var(--ybb-font-num); font-weight: 500; font-size: var(--ybb-step-2); color: inherit; }
.ybb-ring__label { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; opacity: .65; }
.ybb-ringset { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; }
.ybb-ringset__item { display: flex; align-items: center; gap: 12px; font-size: var(--ybb-step--1); }

/* ---------- 15. CALCULATOR STRIP TILES ---------------------------------- */
.ybb-calctile {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px 24px;
  background: #fff;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-card);
  height: 100%;
  transition: transform var(--ybb-med) var(--ybb-ease), box-shadow var(--ybb-med) var(--ybb-ease);
}
.ybb-calctile:hover { transform: translateY(-4px); box-shadow: var(--ybb-shadow); }
.ybb-calctile__icon {
  width: 46px; height: 46px;
  border-radius: 13px;
  display: grid; place-items: center;
  background: var(--ybb-emerald-wash);
  color: var(--ybb-emerald-dark);
}
.ybb-calctile__title { font-size: var(--ybb-step-1); margin: 0; }
.ybb-calctile__text { font-size: var(--ybb-step--1); color: var(--ybb-meta); margin: 0; }
.ybb-calctile__cta { margin-top: auto; padding-top: 12px; font-size: var(--ybb-step--1); font-weight: 600; color: var(--ybb-navy); }

/* ---------- 16. CREDIT-SCORE GUIDE BAND --------------------------------- */
.ybb-score { display: grid; gap: 26px; }
.ybb-score__bar {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  border-radius: var(--ybb-r-pill);
  overflow: hidden;
}
.ybb-score__seg {
  height: 14px;
  border-radius: var(--ybb-r-pill);
  background: var(--ybb-navy-tint);
}
.ybb-score__seg--poor { background: rgba(192, 57, 43, .38); }
.ybb-score__seg--fair { background: rgba(200, 163, 62, .45); }
.ybb-score__seg--good { background: rgba(15, 157, 88, .35); }
.ybb-score__seg--vgood { background: rgba(15, 157, 88, .62); }
.ybb-score__seg--excellent { background: var(--ybb-emerald); }
.ybb-score__legend {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
}
.ybb-score__band { display: grid; gap: 3px; padding-right: 10px; }
.ybb-score__range { font-family: var(--ybb-font-num); font-weight: 500; font-size: var(--ybb-step--1); color: var(--ybb-ink); }
.ybb-score__word { font-size: var(--ybb-step--2); letter-spacing: .09em; text-transform: uppercase; color: var(--ybb-meta); }
.ybb-score__what { font-size: var(--ybb-step--2); color: var(--ybb-meta); line-height: 1.55; }

/* ---------- 17. HOW-IT-WORKS SPINE -------------------------------------- */
.ybb-spine { position: relative; display: grid; gap: 0; }
.ybb-spine::before {
  content: "";
  position: absolute;
  left: 27px; top: 30px; bottom: 30px;
  width: 2px;
  background: linear-gradient(180deg, var(--ybb-emerald), rgba(13, 33, 73, .18));
  border-radius: 2px;
}
.ybb-spine__step {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  padding: 22px 0;
}
.ybb-spine__no {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--ybb-line);
  box-shadow: var(--ybb-shadow-sm);
  font-family: var(--ybb-font-num);
  font-weight: 500;
  font-size: var(--ybb-step-1);
  color: var(--ybb-navy);
  position: relative;
  z-index: 2;
}
.ybb-spine__step:first-child .ybb-spine__no { border-color: var(--ybb-emerald); color: var(--ybb-emerald-dark); }
.ybb-spine__body { padding-top: 4px; }
.ybb-spine__title { font-size: var(--ybb-step-2); margin: 0 0 8px; }
.ybb-spine__text { font-size: var(--ybb-step--1); color: var(--ybb-ink-body); margin: 0; }
.ybb-spine__time { display: inline-block; margin-top: 10px; font-size: var(--ybb-step--2); color: var(--ybb-emerald-dark); font-weight: 600; }

/* ---------- 18. COUNTERS & STATISTICS ----------------------------------- */
.ybb-counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--ybb-line);
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-panel);
  overflow: hidden;
}
.ybb-counter { background: #fff; padding: 34px 28px; text-align: center; }
.ybb-band--navy .ybb-counters { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .16); }
.ybb-band--navy .ybb-counter { background: transparent; }
.ybb-counter__n {
  display: block;
  font-family: var(--ybb-font-num);
  font-weight: 500;
  font-size: clamp(1.9rem, 3.6vw, 2.7rem);
  color: var(--ybb-navy);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.ybb-band--navy .ybb-counter__n { color: #fff; }
.ybb-counter__label { display: block; margin-top: 8px; font-size: var(--ybb-step--1); color: var(--ybb-meta); }
.ybb-band--navy .ybb-counter__label { color: rgba(255, 255, 255, .66); }
.ybb-counter__sub { display: block; margin-top: 4px; font-size: var(--ybb-step--2); color: var(--ybb-meta-faint); }

/* ---------- 19. BLOG / FINANCIAL-NEWS CARDS ----------------------------- */
.ybb-post {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-card);
  overflow: hidden;
  box-shadow: var(--ybb-shadow-xs);
  transition: transform var(--ybb-med) var(--ybb-ease), box-shadow var(--ybb-med) var(--ybb-ease);
}
.ybb-post:hover { transform: translateY(-4px); box-shadow: var(--ybb-shadow); }
.ybb-post__art { position: relative; aspect-ratio: 16 / 9; background: var(--ybb-paper); }
.ybb-post__art svg { width: 100%; height: 100%; }
.ybb-post__tag {
  position: absolute; left: 16px; top: 16px;
  padding: 5px 13px;
  border-radius: var(--ybb-r-pill);
  background: rgba(255, 255, 255, .92);
  color: var(--ybb-navy);
  font-size: var(--ybb-step--2);
  font-weight: 600;
  backdrop-filter: blur(6px);
}
.ybb-post__body { padding: 22px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.ybb-post__title { font-size: var(--ybb-step-1); margin: 0 0 10px; }
.ybb-post__title a:hover { color: var(--ybb-emerald-dark); }
.ybb-post__excerpt { font-size: var(--ybb-step--1); color: var(--ybb-ink-body); margin: 0 0 16px; }
.ybb-post__foot { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--ybb-line-soft); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }

/* ---------- 20. TESTIMONIALS -------------------------------------------- */
.ybb-quote {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-panel);
  box-shadow: var(--ybb-shadow-xs);
}
.ybb-quote__stars { display: flex; gap: 3px; color: var(--ybb-gold); margin-bottom: 16px; }
.ybb-quote__text {
  font-family: var(--ybb-font-display);
  font-weight: 600;
  font-size: var(--ybb-step-1);
  line-height: 1.55;
  color: var(--ybb-ink);
  margin: 0 0 22px;
}
.ybb-quote__who { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--ybb-line-soft); }
.ybb-quote__avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; }
.ybb-quote__name { font-weight: 600; color: var(--ybb-ink); font-size: var(--ybb-step--1); display: block; }
.ybb-quote__role { font-size: var(--ybb-step--2); color: var(--ybb-meta); display: block; }

/* ---------- 21. TRUST, COMPLIANCE & DISCLAIMER -------------------------- */
.ybb-trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ybb-gap); }
.ybb-trust__item { display: grid; gap: 12px; }
.ybb-trust__icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  color: #fff;
}
.ybb-band--paper .ybb-trust__icon, .ybb-band--tint .ybb-trust__icon { background: var(--ybb-navy-tint); color: var(--ybb-navy); }
.ybb-trust__title { font-size: var(--ybb-step-1); margin: 0; }
.ybb-trust__text { font-size: var(--ybb-step--1); margin: 0; }

.ybb-disclaimer {
  border: 1px solid var(--ybb-line);
  border-left: 3px solid var(--ybb-gold);
  border-radius: var(--ybb-r-card);
  background: var(--ybb-paper);
  padding: 22px 26px;
  font-size: var(--ybb-step--1);
  color: var(--ybb-ink-body);
  line-height: 1.7;
}
.ybb-disclaimer strong { color: var(--ybb-ink); }
.ybb-disclaimer--risk { border-left-color: var(--ybb-negative); }
.ybb-disclaimer__title {
  display: block;
  font-family: var(--ybb-font-body);
  font-size: var(--ybb-step--2);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ybb-meta);
  margin-bottom: 8px;
}
.ybb-note {
  font-size: var(--ybb-step--2);
  color: var(--ybb-meta);
  line-height: 1.65;
}

/* ---------- 22. CTA BANDS & APPOINTMENT BOOKING ------------------------- */
.ybb-cta {
  position: relative;
  border-radius: var(--ybb-r-panel);
  background: linear-gradient(150deg, var(--ybb-navy) 0%, var(--ybb-navy-deep) 100%);
  color: rgba(255, 255, 255, .8);
  padding: clamp(38px, 5.5vw, 72px) clamp(26px, 4vw, 64px);
  overflow: hidden;
  text-align: center;
}
.ybb-cta__inner { position: relative; z-index: 2; max-width: 720px; margin-inline: auto; }
.ybb-cta__title { color: #fff; margin: 0 0 16px; }
.ybb-cta__sub { color: rgba(255, 255, 255, .78); margin: 0 auto 30px; max-width: 58ch; }
.ybb-cta__acts { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.ybb-cta__art { position: absolute; inset: 0; z-index: 1; opacity: .42; pointer-events: none; }
.ybb-cta__foot { margin-top: 22px; font-size: var(--ybb-step--2); color: rgba(255, 255, 255, .55); }

.ybb-appoint {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: center;
}
.ybb-appoint__slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 20px; }
.ybb-appoint__slot {
  padding: 11px 8px;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-input);
  background: #fff;
  text-align: center;
  font-family: var(--ybb-font-num);
  font-size: var(--ybb-step--1);
  color: var(--ybb-ink);
  cursor: pointer;
  transition: all var(--ybb-fast) var(--ybb-ease);
}
.ybb-appoint__slot:hover { border-color: var(--ybb-emerald); color: var(--ybb-emerald-dark); }
.ybb-appoint__slot.is-active { background: var(--ybb-navy); border-color: var(--ybb-navy); color: #fff; }
.ybb-appoint__expert { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--ybb-line-soft); }
.ybb-appoint__avatar { width: 48px; height: 48px; border-radius: 50%; flex: none; }
.ybb-appoint__name { font-weight: 600; color: var(--ybb-ink); font-size: var(--ybb-step--1); display: block; }
.ybb-appoint__role { font-size: var(--ybb-step--2); color: var(--ybb-meta); display: block; }

/* ---------- 23. FORMS --------------------------------------------------- */
.ybb-field { display: grid; gap: 8px; margin-bottom: 18px; }
.ybb-field__label { font-size: var(--ybb-step--1); font-weight: 600; color: var(--ybb-ink); }
.ybb-field__label .u-req { color: var(--ybb-emerald); }
.ybb-field__error { font-size: var(--ybb-step--2); color: var(--ybb-negative); min-height: 0; }
.ybb-field.has-error .ybb-input,
.ybb-field.has-error .ybb-select,
.ybb-field.has-error .ybb-textarea { border-color: var(--ybb-negative); box-shadow: 0 0 0 3px rgba(192, 57, 43, .1); }

.ybb-input, .ybb-select, .ybb-textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-input);
  background: #fff;
  color: var(--ybb-ink);
  font-size: var(--ybb-step--1);
  transition: border-color var(--ybb-fast) var(--ybb-ease), box-shadow var(--ybb-fast) var(--ybb-ease);
}
.ybb-input::placeholder, .ybb-textarea::placeholder { color: var(--ybb-meta-faint); }
.ybb-input:focus, .ybb-select:focus, .ybb-textarea:focus {
  outline: 0;
  border-color: var(--ybb-navy);
  box-shadow: var(--ybb-ring-focus);
}
.ybb-textarea { min-height: 132px; resize: vertical; line-height: 1.65; }
.ybb-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2348546b' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 17px;
  padding-right: 42px;
}
.ybb-check { display: flex; gap: 11px; align-items: flex-start; font-size: var(--ybb-step--2); color: var(--ybb-meta); line-height: 1.6; }
.ybb-check input { margin-top: 3px; accent-color: var(--ybb-emerald); width: 16px; height: 16px; flex: none; }

.ybb-formnote {
  margin: 8px 0 0;
  font-size: var(--ybb-step--1);
  padding: 0;
  color: var(--ybb-meta);
}
.ybb-formnote.is-ok {
  color: var(--ybb-emerald-dark);
  background: var(--ybb-emerald-wash);
  padding: 12px 16px;
  border-radius: var(--ybb-r-input);
}
.ybb-formnote.is-bad {
  color: var(--ybb-negative);
  background: rgba(192, 57, 43, .07);
  padding: 12px 16px;
  border-radius: var(--ybb-r-input);
}

.ybb-lead {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}
.ybb-lead__form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.ybb-lead__form .ybb-field--full { grid-column: 1 / -1; }
.ybb-lead__points { display: grid; gap: 16px; margin-top: 26px; }
.ybb-lead__point { display: flex; gap: 13px; }
.ybb-lead__point svg { flex: none; color: var(--ybb-emerald); margin-top: 3px; }

.ybb-news {
  text-align: center;
  border-radius: var(--ybb-r-panel);
  border: 1px solid var(--ybb-line);
  background: var(--ybb-paper);
  padding: clamp(32px, 4.5vw, 58px);
}
.ybb-news__form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 520px;
  margin: 26px auto 0;
}
.ybb-news__note { margin-top: 14px; font-size: var(--ybb-step--2); color: var(--ybb-meta); }

/* ---------- 24. FAQ ACCORDION & TABS ------------------------------------ */
.ybb-faq { display: grid; gap: 12px; }
.ybb-faq__item {
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-card);
  background: #fff;
  overflow: hidden;
  transition: border-color var(--ybb-fast) var(--ybb-ease), box-shadow var(--ybb-med) var(--ybb-ease);
}
.ybb-faq__item:hover { border-color: #d3dcee; }
.ybb-faq__item h3 { margin: 0; }
.ybb-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 26px;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--ybb-font-display);
  font-weight: 600;
  font-size: var(--ybb-step-1);
  color: var(--ybb-ink);
  line-height: 1.4;
}
.ybb-faq__sign {
  position: relative;
  width: 22px; height: 22px;
  flex: none;
  border-radius: 50%;
  background: var(--ybb-navy-tint);
  transition: background var(--ybb-fast) var(--ybb-ease), transform var(--ybb-med) var(--ybb-ease);
}
.ybb-faq__sign::before, .ybb-faq__sign::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  background: var(--ybb-navy);
  border-radius: 2px;
  transform: translate(-50%, -50%);
  transition: opacity var(--ybb-fast) var(--ybb-ease);
}
.ybb-faq__sign::before { width: 10px; height: 1.8px; }
.ybb-faq__sign::after { width: 1.8px; height: 10px; }
.ybb-faq__q[aria-expanded="true"] .ybb-faq__sign { background: var(--ybb-emerald); }
.ybb-faq__q[aria-expanded="true"] .ybb-faq__sign::before,
.ybb-faq__q[aria-expanded="true"] .ybb-faq__sign::after { background: #fff; }
.ybb-faq__q[aria-expanded="true"] .ybb-faq__sign::after { opacity: 0; }
.ybb-faq__a {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--ybb-slow) var(--ybb-ease);
}
.ybb-faq__a > div { padding: 0 26px 24px; font-size: var(--ybb-step--1); color: var(--ybb-ink-body); }

.ybb-tabs { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 30px; }
.ybb-tab {
  padding: 11px 22px;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-pill);
  background: #fff;
  font-size: var(--ybb-step--1);
  font-weight: 600;
  color: var(--ybb-ink-body);
  cursor: pointer;
  transition: all var(--ybb-fast) var(--ybb-ease);
}
.ybb-tab:hover { border-color: #ccd5e6; background: var(--ybb-navy-tint); }
.ybb-tab[aria-selected="true"] { background: var(--ybb-navy); border-color: var(--ybb-navy); color: #fff; }

/* ---------- 25. INTERIOR HERO, CRUMBS, SHARE, PAGER --------------------- */
.ybb-phero {
  position: relative;
  padding-block: clamp(52px, 6vw, 92px);
  background: linear-gradient(180deg, var(--ybb-paper), #fff);
  border-bottom: 1px solid var(--ybb-line);
  text-align: center;
  overflow: hidden;
}
.ybb-phero__inner { position: relative; z-index: 2; max-width: 760px; margin-inline: auto; }
.ybb-phero__title { margin: 16px 0 0; }
.ybb-phero__lede { margin: 18px auto 0; }

.ybb-crumbs { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; font-size: var(--ybb-step--2); color: var(--ybb-meta); }
.ybb-crumbs li:not(:last-child)::after { content: "/"; margin-left: 8px; color: var(--ybb-meta-faint); }
.ybb-crumbs a:hover { color: var(--ybb-navy); }
.ybb-crumbs [aria-current="page"] { color: var(--ybb-ink); font-weight: 600; }

.ybb-share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ybb-share__label { font-size: var(--ybb-step--2); letter-spacing: .12em; text-transform: uppercase; color: var(--ybb-meta); }
.ybb-share__btn {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--ybb-line);
  border-radius: 50%;
  background: #fff;
  color: var(--ybb-navy);
  cursor: pointer;
  transition: all var(--ybb-fast) var(--ybb-ease);
}
.ybb-share__btn:hover { background: var(--ybb-navy); color: #fff; border-color: var(--ybb-navy); }
.ybb-share__btn.is-copied { background: var(--ybb-emerald); border-color: var(--ybb-emerald); color: #fff; }

.ybb-pager { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.ybb-pager__link {
  min-width: 42px; height: 42px;
  display: inline-grid; place-items: center;
  padding: 0 14px;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-pill);
  font-family: var(--ybb-font-num);
  font-size: var(--ybb-step--1);
  color: var(--ybb-ink-body);
}
.ybb-pager__link:hover { background: var(--ybb-navy-tint); color: var(--ybb-navy); }
.ybb-pager__link[aria-current="page"] { background: var(--ybb-navy); border-color: var(--ybb-navy); color: #fff; }
.ybb-pager__link.is-disabled { opacity: .4; pointer-events: none; }

.ybb-byline { display: flex; align-items: center; gap: 13px; }
.ybb-byline__avatar { width: 42px; height: 42px; border-radius: 50%; flex: none; }
.ybb-byline__name { font-weight: 600; color: var(--ybb-ink); font-size: var(--ybb-step--1); display: block; }
.ybb-byline__role { font-size: var(--ybb-step--2); color: var(--ybb-meta); display: block; }

/* ---------- 26. FOOTER -------------------------------------------------- */
.ybb-footer {
  background: linear-gradient(170deg, var(--ybb-navy) 0%, var(--ybb-navy-deep) 100%);
  color: rgba(255, 255, 255, .68);
  padding-top: clamp(52px, 6vw, 82px);
  font-size: var(--ybb-step--1);
}
.ybb-footer a:hover { color: #fff; }
.ybb-footer .ybb-logo__word { color: #fff; }
.ybb-footer .ybb-logo__word em { color: #5fd39a; }
.ybb-footer .ybb-logo__tag { color: rgba(255, 255, 255, .5); }
.ybb-footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr 1.5fr;
  gap: clamp(24px, 3vw, 44px);
  padding-bottom: 44px;
}
.ybb-footer__about { margin: 18px 0 20px; color: rgba(255, 255, 255, .62); line-height: 1.7; }
.ybb-footer__title {
  font-family: var(--ybb-font-body);
  font-size: var(--ybb-step--2);
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 16px;
}
.ybb-footer__links { display: grid; gap: 10px; }
.ybb-footer__links a { color: rgba(255, 255, 255, .68); }
.ybb-footer__contact { display: grid; gap: 14px; }
.ybb-footer__contact li { display: flex; gap: 11px; align-items: flex-start; color: rgba(255, 255, 255, .68); line-height: 1.6; }
.ybb-footer__contact svg { flex: none; margin-top: 4px; opacity: .7; }
.ybb-footer__contact a { color: rgba(255, 255, 255, .82); }
.ybb-footer__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--ybb-step--2);
  color: rgba(255, 255, 255, .55);
}
.ybb-footer__legal { display: flex; gap: 20px; flex-wrap: wrap; }
.ybb-footer__disclosure {
  padding: 22px 0;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--ybb-step--2);
  color: rgba(255, 255, 255, .5);
  line-height: 1.7;
}
.ybb-footer__parent {
  margin: 0;
  padding: 20px 0 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  text-align: center;
  font-size: var(--ybb-step--2);
  color: rgba(255, 255, 255, .55);
  letter-spacing: .04em;
}
.ybb-footer__parent strong { color: #fff; font-weight: 600; }

.ybb-social { display: flex; gap: 10px; }
.ybb-social__a {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  color: rgba(255, 255, 255, .78);
  transition: all var(--ybb-fast) var(--ybb-ease);
}
.ybb-social__a:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .35); color: #fff; }

/* ---------- 27. FLOATING UI --------------------------------------------- */
.ybb-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, var(--ybb-emerald), var(--ybb-gold));
  z-index: calc(var(--ybb-z-float) + 50);
  border-radius: 0 var(--ybb-r-pill) var(--ybb-r-pill) 0;
}
.ybb-wa {
  position: fixed;
  right: 20px; bottom: 20px;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: #128c3e;
  color: #fff;
  z-index: var(--ybb-z-float);
  box-shadow: 0 16px 34px -16px rgba(18, 140, 62, .7);
  transition: transform var(--ybb-fast) var(--ybb-ease);
}
.ybb-wa:hover { transform: scale(1.07); color: #fff; }
.ybb-top {
  position: fixed;
  right: 20px; bottom: 86px;
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border: 1px solid var(--ybb-line);
  border-radius: 50%;
  background: #fff;
  color: var(--ybb-navy);
  cursor: pointer;
  z-index: var(--ybb-z-float);
  box-shadow: var(--ybb-shadow);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--ybb-med) var(--ybb-ease);
}
.ybb-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.ybb-top:hover { background: var(--ybb-navy); color: #fff; }

.ybb-cookie {
  position: fixed;
  left: 20px; bottom: 20px;
  width: min(430px, calc(100vw - 40px));
  z-index: var(--ybb-z-cookie);
  background: #fff;
  border: 1px solid var(--ybb-line);
  border-radius: var(--ybb-r-panel);
  box-shadow: var(--ybb-shadow-lg);
  padding: 24px 26px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px);
  transition: all var(--ybb-slow) var(--ybb-ease);
}
.ybb-cookie.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.ybb-cookie__text { font-size: var(--ybb-step--2); color: var(--ybb-ink-body); line-height: 1.65; margin: 0 0 16px; }
.ybb-cookie__text a { color: var(--ybb-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ybb-cookie__acts { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---------- 28. SCROLL REVEAL & MOTION ---------------------------------- */
[data-yb-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--ybb-reveal) var(--ybb-ease), transform var(--ybb-reveal) var(--ybb-ease);
  will-change: opacity, transform;
}
[data-yb-reveal="left"]  { transform: translateX(-26px); }
[data-yb-reveal="right"] { transform: translateX(26px); }
[data-yb-reveal="fade"]  { transform: none; }
[data-yb-reveal="scale"] { transform: scale(.97); }
[data-yb-reveal].is-in { opacity: 1; transform: none; }

.u-d1 { transition-delay: 70ms; }
.u-d2 { transition-delay: 140ms; }
.u-d3 { transition-delay: 210ms; }
.u-d4 { transition-delay: 280ms; }
.u-d5 { transition-delay: 350ms; }
.u-d6 { transition-delay: 420ms; }

/* ---------- 29. UTILITIES ----------------------------------------------- */
.u-hide { display: none !important; }
@media (max-width: 1060px) { .u-hide-sm { display: none !important; } }
.u-sr {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-flex { display: flex; }
.u-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.u-wrap { flex-wrap: wrap; }
.u-mt0 { margin-top: 0 !important; }
.u-mt1 { margin-top: 10px; }
.u-mt2 { margin-top: 22px; }
.u-mt3 { margin-top: 36px; }
.u-mt4 { margin-top: 52px; }
.u-mb1 { margin-bottom: 10px; }
.u-mb2 { margin-bottom: 22px; }
.u-mb3 { margin-bottom: 36px; }
.u-gap-sm { gap: var(--ybb-gap-sm); }
.u-navy { color: var(--ybb-navy); }
.u-emerald { color: var(--ybb-emerald-dark); }
.u-gold { color: #8f7420; }
.u-negative { color: var(--ybb-negative); }
.u-ink { color: var(--ybb-ink); }
.u-muted { color: var(--ybb-meta); }
.u-num { font-family: var(--ybb-font-num); font-variant-numeric: tabular-nums; }
.u-nowrap { white-space: nowrap; }
.u-maxch { max-width: 64ch; }
.u-mx { margin-inline: auto; }
.u-full { grid-column: 1 / -1; }

/* ---------- 30. RESPONSIVE ---------------------------------------------- */
@media (max-width: 1180px) {
  .ybb-footer__grid { grid-template-columns: 1.4fr 1fr 1fr; }
  .ybb-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1060px) {
  .ybb-nav { display: none; }
  .ybb-burger { display: inline-grid; }
  .ybb-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ybb-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ybb-calc__body { grid-template-columns: minmax(0, 1fr); }
  .ybb-elig { grid-template-columns: minmax(0, 1fr); }
  .ybb-appoint { grid-template-columns: minmax(0, 1fr); }
  .ybb-lead { grid-template-columns: minmax(0, 1fr); }
  .ybb-counters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ybb-score__legend { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
}

@media (max-width: 780px) {
  :root { --ybb-band: 54px; --ybb-header-h: 66px; }
  .ybb-split, .ybb-split--wide-left { grid-template-columns: minmax(0, 1fr); }
  .ybb-grid--2, .ybb-grid--3, .ybb-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .ybb-offer { grid-template-columns: minmax(0, 1fr); }
  .ybb-offer__acts { min-width: 0; }
  .ybb-lead__form { grid-template-columns: minmax(0, 1fr); }
  .ybb-footer__grid { grid-template-columns: 1fr 1fr; }
  .ybb-logo__tag { display: none; }
  .ybb-score__legend { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ybb-spine__step { grid-template-columns: 44px minmax(0, 1fr); gap: 18px; }
  .ybb-spine__no { width: 44px; height: 44px; font-size: var(--ybb-step--1); }
  .ybb-spine::before { left: 21px; }
}

@media (max-width: 560px) {
  .ybb-counters { grid-template-columns: minmax(0, 1fr); }
  .ybb-footer__grid { grid-template-columns: 1fr; }
  .ybb-news__form { flex-direction: column; }
  .ybb-appoint__slots { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ybb-score__legend { grid-template-columns: minmax(0, 1fr); }
  .ybb-cookie { left: 12px; right: 12px; width: auto; bottom: 12px; }
  .ybb-wa { width: 48px; height: 48px; }
  .ybb-top { bottom: 78px; }
}

/* ---------- 31. REDUCED MOTION & PRINT ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
  [data-yb-reveal] { opacity: 1 !important; transform: none !important; }
  .ybb-curve__line { stroke-dashoffset: 0 !important; animation: none !important; }
  .ybb-curve__area, .ybb-curve__dot { opacity: 1 !important; animation: none !important; }
  .ybb-ring__value { transition: none !important; }
  .ybb-cat:hover, .ybb-post:hover, .ybb-compare:hover, .ybb-ccard:hover,
  .ybb-calctile:hover, .ybb-btn:hover { transform: none !important; }
}

@media print {
  .ybb-header, .ybb-announce, .ybb-drawer, .ybb-wa, .ybb-top,
  .ybb-cookie, .ybb-progress, .ybb-mega { display: none !important; }
  body { background: #fff; color: #000; }
  .ybb-panel, .ybb-cat, .ybb-post, .ybb-calc, .ybb-quote { box-shadow: none; border-color: #ccc; }
  .ybb-band--navy, .ybb-cta, .ybb-calc__result, .ybb-footer { background: #fff !important; color: #000 !important; }
  .ybb-cta__title, .ybb-calc__headline strong { color: #000 !important; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}