/* ===========================================================
   OFFERINGS INDEX — premium stylesheet (indigo)
   Lightweight, mobile-first, no external CSS frameworks.
   =========================================================== */

:root {
  /* Brand */
  --indigo-50:  #eef2ff;
  --indigo-100: #e0e7ff;
  --indigo-200: #c7d2fe;
  --indigo-300: #a5b4fc;
  --indigo-400: #818cf8;
  --indigo-500: #6366f1;
  --indigo-600: #4f46e5;
  --indigo-700: #4338ca;
  --indigo-900: #312e81;

  /* Neutrals */
  --ink:        #171432;
  --ink-soft:   #3a3654;
  --muted:      #6b6880;
  --line:       #e9e7f1;
  --bg:         #fbfbfe;
  --bg-soft:    #f4f3fb;
  --card:       #ffffff;
  --white:      #ffffff;

  /* Effects */
  --radius:     18px;
  --radius-sm:  12px;
  --radius-lg:  26px;
  --shadow-sm:  0 1px 2px rgba(23,20,50,.05), 0 1px 1px rgba(23,20,50,.04);
  --shadow:     0 6px 24px -10px rgba(49,46,129,.18), 0 2px 6px -2px rgba(23,20,50,.06);
  --shadow-lg:  0 24px 60px -24px rgba(49,46,129,.35);
  --ring:       0 0 0 4px var(--indigo-100);

  --maxw: 1160px;
  --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  min-width: 320px;
}

img, svg, video, iframe { max-width: 100%; display: block; height: auto; }
svg { display: inline-block; }

a { color: var(--indigo-700); text-decoration: none; }
a:hover { color: var(--indigo-600); }
a:focus-visible { outline: 2px solid var(--indigo-500); outline-offset: 3px; border-radius: 4px; }

/* Skip to main content — keyboard accessibility */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 10000;
  padding: 10px 20px;
  background: var(--indigo-600);
  color: #fff;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  font-size: .9rem;
  transition: top .15s;
}
.skip-link:focus { top: 0; color: #fff; }

h1, h2, h3, h4 { color: var(--ink); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 .5em; font-weight: 800; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); }
h2 { font-size: clamp(1.55rem, 3.5vw, 2.3rem); }
h3 { font-size: 1.2rem; }
p  { margin: 0 0 1rem; color: var(--ink-soft); }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.section   { padding: 64px 0; }
.section-sm{ padding: 40px 0; }
.center    { text-align: center; }
.muted     { color: var(--muted); }
.eyebrow {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--indigo-600); margin-bottom: 14px;
}
.lead { font-size: 1.12rem; color: var(--ink-soft); max-width: min(640px, 100%); }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  font-family: var(--font); font-weight: 700; font-size: .98rem; line-height: 1;
  padding: 15px 26px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
  text-align: center; white-space: nowrap; max-width: 100%;
  touch-action: manipulation; /* removes 300ms tap delay on mobile */
  -webkit-tap-highlight-color: transparent;
}
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-primary {
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
  color: #fff; box-shadow: 0 10px 24px -12px rgba(79,70,229,.7);
}
.btn-primary:hover { color:#fff; transform: translateY(-2px); box-shadow: 0 16px 30px -12px rgba(79,70,229,.75); }
.btn-ghost {
  background: var(--white); color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm);
}
.btn-ghost:hover { border-color: var(--indigo-200); color: var(--indigo-700); transform: translateY(-2px); }
.btn-light { background: rgba(255,255,255,.12); color:#fff; border-color: rgba(255,255,255,.28); }
.btn-light:hover { background: rgba(255,255,255,.2); color:#fff; }
.btn-block { display: flex; width: 100%; }
.btn-lg { padding: 17px 32px; font-size: 1.05rem; }
.arrow { transition: transform .15s ease; }
.btn:hover .arrow { transform: translateX(3px); }

/* ---------- Header / Nav ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,251,254,.82); backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.site-header .container { max-width: var(--maxw); }
.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.nav-logo img { height: 34px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; flex-wrap: nowrap; }
.nav-links a {
  color: var(--ink-soft); font-weight: 600; font-size: .9rem; padding: 8px 12px; border-radius: 8px;
  white-space: nowrap; transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--indigo-600); background: rgba(99,102,241,.07); }
.nav-cta { display: none; }
.nav-cta .btn-primary {
  background: #fff;
  color: var(--indigo-600);
  border-color: var(--indigo-300);
  box-shadow: 0 2px 8px -2px rgba(79,70,229,.18);
}
.nav-cta .btn-primary:hover {
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
  color: #fff;
  border-color: transparent;
  box-shadow: 0 8px 20px -8px rgba(79,70,229,.6);
  transform: translateY(-2px);
}
/* Browse Offers button — anchored in nav-actions, stays put regardless of category count */
.nav-browse {
  font-size: .88rem; padding: 10px 18px;
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
  color: #fff !important; border-color: transparent;
  box-shadow: 0 4px 14px -4px rgba(79,70,229,.55);
  white-space: nowrap;
}
.nav-browse:hover { color: #fff !important; transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(79,70,229,.7); }
@media (max-width: 880px) { .nav-browse { display: none; } }
/* ---------- Search ---------- */
.search-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line);
  background: var(--white); color: var(--ink-soft); cursor: pointer;
  margin-left: 10px; transition: background .15s, color .15s, border-color .15s;
  box-shadow: var(--shadow-sm);
}
.search-btn:hover { background: var(--indigo-50); color: var(--indigo-700); border-color: var(--indigo-200); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.search-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(16,14,34,.6); backdrop-filter: blur(6px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 80px 16px 40px;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.search-overlay.open { opacity: 1; pointer-events: all; }
.search-box {
  background: var(--white); border-radius: 20px; width: 100%; max-width: 620px;
  box-shadow: 0 32px 80px -20px rgba(0,0,0,.4); overflow: hidden;
  transform: translateY(-16px); transition: transform .2s;
}
.search-overlay.open .search-box { transform: translateY(0); }
.search-input-wrap {
  display: flex; align-items: center; gap: 12px; padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.search-input-wrap svg { color: var(--muted); flex: none; }
.search-input-wrap input {
  flex: 1; font: inherit; font-size: 1.1rem; border: none; outline: none;
  color: var(--ink); background: transparent;
}
.search-input-wrap input::placeholder { color: var(--muted); }
/* Hide browser-native clear button so the custom ✕ button is the only one */
.search-input-wrap input[type="search"]::-webkit-search-cancel-button,
.search-input-wrap input[type="search"]::-webkit-search-decoration { display: none; -webkit-appearance: none; }
.search-input-wrap input[type="search"] { -moz-appearance: none; }
.search-close {
  flex: none; background: var(--bg); border: none; border-radius: 8px;
  width: 32px; height: 32px; cursor: pointer; font-size: 1rem; color: var(--muted);
  display: grid; place-items: center;
}
.search-close:hover { background: var(--line); color: var(--ink); }
.search-results { max-height: 420px; overflow-y: auto; }
.search-result {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--line); transition: background .12s;
}
.search-result:last-child { border-bottom: none; }
.search-result:hover, .search-result.sr-active { background: var(--indigo-50); }
.search-result .sr-icon {
  width: 42px; height: 42px; flex: none; border-radius: 10px; font-size: 1.3rem;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--indigo-50), var(--indigo-100));
  border: 1px solid var(--indigo-100);
}
.search-result .sr-info { flex: 1; min-width: 0; }
.search-result .sr-title { font-weight: 700; font-size: .97rem; }
.search-result .sr-meta { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.search-empty { padding: 24px 20px; text-align: center; color: var(--muted); font-size: .95rem; }
.search-empty p { margin: 0 0 8px; }
.search-empty-hint { font-size: .85rem; margin-bottom: 10px !important; }
.search-empty-cats { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.search-empty-cat { display: inline-flex; align-items: center; padding: 7px 14px; border: 1.5px solid var(--line); border-radius: 999px; font-size: .85rem; font-weight: 700; color: var(--ink); transition: border-color .15s, color .15s; }
.search-empty-cat:hover { border-color: var(--indigo-400); color: var(--indigo-700); }
.search-hint { padding: 10px 20px; font-size: .78rem; color: var(--muted); border-top: 1px solid var(--line); text-align: center; }

.nav-toggle {
  display: none; background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  width: 46px; height: 46px; cursor: pointer; align-items: center; justify-content: center; box-shadow: var(--shadow-sm);
}
@media (max-width: 880px) { .nav-toggle { display: inline-flex; } }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ''; display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px;
  position: relative; transition: .25s;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { top: 0; transform: rotate(45deg); }
.nav-open .nav-toggle span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 880px) {
  .nav-links {
    position: fixed; inset: 72px 0 auto 0; flex-direction: column; align-items: stretch; gap: 4px;
    background: var(--white); border-bottom: 1px solid var(--line); padding: 14px 20px 22px;
    box-shadow: var(--shadow-lg); transform: translateY(-120%); transition: transform .28s ease; visibility: hidden;
  }
  .nav-open .nav-links { transform: translateY(0); visibility: visible; }
  .nav-links a { padding: 13px 14px; font-size: 1.02rem; }
  .nav-cta { margin: 8px 0 0; display: block; }
  .nav-cta .btn { width: 100%; }
  .search-btn { margin-left: 0; }
  .nav-actions { display: flex; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 72px 0 56px; width: 100%; }
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 15% 0%, rgba(99,102,241,.14), transparent 60%),
    radial-gradient(50% 50% at 95% 10%, rgba(67,56,202,.12), transparent 60%),
    linear-gradient(180deg, var(--indigo-50), var(--bg) 70%);
}
.hero h1 { max-width: 16ch; }
.hero .lead { font-size: 1.18rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.center .hero-actions { justify-content: center; }
.hero-stats { display: flex; flex-wrap: wrap; gap: 36px; margin-top: 44px; }
.center .hero-stats { justify-content: center; }
.hero-stats .num { font-size: 1.7rem; font-weight: 800; color: var(--ink); }
.hero-stats .lbl { font-size: .85rem; color: var(--muted); }
.hero-stats > div { flex: 1 1 80px; min-width: 70px; }

/* ---------- Trust strip ---------- */
.trust-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--white); overflow: hidden; }
.trust-row { display: flex; flex-wrap: wrap; gap: 14px 30px; justify-content: center; align-items: center; padding: 22px 0; }
.trust-item { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-weight: 600; font-size: .92rem; white-space: nowrap; }
.trust-item svg { color: var(--indigo-600); flex: none; }

/* ---------- Filter bar ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 0 36px; }
.chip {
  font: inherit; font-weight: 600; font-size: .9rem; padding: 10px 18px; border-radius: 999px; cursor: pointer;
  background: var(--white); border: 1px solid var(--line); color: var(--ink-soft); box-shadow: var(--shadow-sm);
  transition: .18s;
}
.chip:hover { border-color: var(--indigo-200); color: var(--indigo-700); }
.chip.active { background: var(--ink); color: #fff; border-color: var(--ink); }


/* ---------- Offer cards grid ---------- */
.grid { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 980px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .grid { grid-template-columns: 1fr; } }

.card {
  position: relative; display: flex; flex-direction: column; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .25s ease, border-color .2s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--indigo-200); }
.card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.card-icon {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem;
  background: linear-gradient(135deg, var(--indigo-50), var(--indigo-100)); border: 1px solid var(--indigo-100);
}
.badge {
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--indigo-700); background: var(--indigo-50); border: 1px solid var(--indigo-100);
  padding: 5px 10px; border-radius: 999px;
}
.card h3 { margin-bottom: 6px; font-size: 1.18rem; }
.card .tag { font-size: .78rem; font-weight: 700; color: var(--indigo-600); letter-spacing: .04em; text-transform: uppercase; }
.card p { font-size: .95rem; margin: 8px 0 14px; }
.card .value {
  display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; color: var(--ink-soft);
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; margin-bottom: 18px; font-weight: 600;
}
.card .value svg { color: var(--indigo-600); flex: none; margin-top: 2px; }
.card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rating { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: .88rem; color: var(--ink); }
.rating svg { color: #f5a623; }
.card-link { font-weight: 700; font-size: .92rem; display: inline-flex; align-items: center; gap: 5px; }

/* stretch whole card clickable while keeping buttons focusable */
.card-cover { position: absolute; inset: 0; border-radius: var(--radius); }

/* ---------- Section heading ---------- */
.sec-head { max-width: 680px; margin: 0 auto 38px; text-align: center; }

/* ---------- Category cards ---------- */
.cat-grid { display: grid; gap: 22px; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 720px) { .cat-grid { grid-template-columns: 1fr; } }
.cat-card {
  position: relative; overflow: hidden; border-radius: var(--radius-lg); padding: 34px;
  background: linear-gradient(135deg, var(--indigo-600), var(--indigo-900)); color: #fff;
  box-shadow: var(--shadow); display: flex; flex-direction: column; min-height: 210px;
}
.cat-card h3 { color: #fff; font-size: 1.5rem; }
.cat-card p { color: rgba(255,255,255,.86); }
.cat-card .cat-count { font-size: .85rem; color: rgba(255,255,255,.75); font-weight: 600; margin-bottom: 12px; }
.cat-card .btn { margin-top: auto; align-self: flex-start; }
.cat-card.alt { background: linear-gradient(135deg, #0f766e, #134e4a); }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 22px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 820px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; box-shadow: var(--shadow-sm); }
.step .n { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff; background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700)); margin-bottom: 14px; }

/* =========================================================
   OFFER LANDING PAGE
   ========================================================= */
.breadcrumb { font-size: .85rem; color: var(--muted); padding: 22px 0 0; }
.breadcrumb a { color: var(--muted); font-weight: 600; }
.breadcrumb a:hover { color: var(--indigo-700); }
.breadcrumb span { margin: 0 7px; opacity: .6; }

.offer-hero { position: relative; overflow: hidden; padding: 40px 0 56px; }
.offer-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(55% 60% at 80% 0%, rgba(99,102,241,.13), transparent 60%),
              linear-gradient(180deg, var(--indigo-50), var(--bg) 75%);
}
.offer-hero-grid { display: grid; grid-template-columns: 1.3fr .9fr; gap: 44px; align-items: center; }
@media (max-width: 880px) { .offer-hero-grid { grid-template-columns: 1fr; gap: 30px; } }
.offer-hero .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.offer-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.offer-hero .sub { font-size: 1.15rem; color: var(--ink-soft); max-width: min(40ch, 100%); }
.offer-aside {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow); padding: 28px; overflow: hidden;
}
.offer-aside .aside-icon { width: 64px; height: 64px; border-radius: 16px; display:grid; place-items:center; font-size: 2rem; background: linear-gradient(135deg, var(--indigo-50), var(--indigo-100)); border: 1px solid var(--indigo-100); margin-bottom: 16px; }
.offer-aside h3 { font-size: 1.15rem; margin-bottom: 4px; }
.offer-aside .aside-list { list-style: none; padding: 0; margin: 16px 0 22px; }
.offer-aside .aside-list li { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; font-size: .94rem; color: var(--ink-soft); font-weight: 600; }
.offer-aside .aside-list svg { color: var(--indigo-600); flex: none; margin-top: 3px; }
.aside-note { font-size: .8rem; color: var(--muted); text-align: center; margin-top: 12px; }

/* generic content blocks */
.prose p { font-size: 1.04rem; }
.offer-article { background: var(--bg-soft); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.article-inner { max-width: 720px; margin: 0 auto; }
.article-inner .article-lead {
  font-size: 1.18rem; line-height: 1.75; color: var(--ink);
  font-weight: 500; padding-bottom: 22px; margin-bottom: 22px;
  border-bottom: 1px solid var(--line);
}
.article-inner p {
  font-size: 1.04rem; line-height: 1.85; color: var(--ink-soft);
  margin: 0 0 1.35em;
}
.article-inner p:last-child { margin-bottom: 0; }
.article-inner h2 {
  font-size: 1.3rem; font-weight: 800; color: var(--ink);
  margin: 1.8em 0 .6em; letter-spacing: -.02em;
}
.article-inner h3 {
  font-size: 1.08rem; font-weight: 700; color: var(--ink);
  margin: 1.5em 0 .5em;
}
.article-inner strong { color: var(--ink); font-weight: 700; }
.article-inner h2:first-child, .article-inner h3:first-child { margin-top: 0; }
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
@media (max-width: 820px) { .two-col { grid-template-columns: 1fr; gap: 26px; } }

.feature-list { display: grid; gap: 16px; grid-template-columns: 1fr 1fr; }
@media (max-width: 680px) { .feature-list { grid-template-columns: 1fr; } }
.feature {
  display: flex; gap: 14px; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-sm);
}
.feature .fi { width: 42px; height: 42px; flex: none; border-radius: 11px; display: grid; place-items: center; background: var(--indigo-50); color: var(--indigo-700); border: 1px solid var(--indigo-100); }
.feature h4 { margin: 0 0 4px; font-size: 1.02rem; }
.feature p { margin: 0; font-size: .92rem; }

.benefit-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.benefit-list li { display: flex; gap: 13px; align-items: flex-start; font-size: 1.02rem; color: var(--ink-soft); }
.benefit-list .ck { width: 26px; height: 26px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--indigo-50); color: var(--indigo-700); border: 1px solid var(--indigo-100); }

.audience { display: grid; gap: 16px; grid-template-columns: repeat(3,1fr); }
@media (max-width: 820px) { .audience { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .audience { grid-template-columns: 1fr; } }
.aud-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.aud-card .emoji { font-size: 1.6rem; }
.aud-card h4 { margin: 10px 0 6px; }
.aud-card p { margin: 0; font-size: .94rem; }

.panel {
  background: linear-gradient(135deg, var(--bg-soft), var(--white));
  border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 36px;
}
.trust-points { display: grid; gap: 18px; grid-template-columns: repeat(3,1fr); margin-top: 10px; }
@media (max-width: 820px) { .trust-points { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .trust-points { grid-template-columns: 1fr; } }
.tp { display: flex; gap: 12px; align-items: flex-start; }
.tp svg { color: var(--indigo-600); flex: none; margin-top: 3px; }
.tp h4 { margin: 0 0 3px; font-size: 1rem; }
.tp p { margin: 0; font-size: .92rem; }

/* FAQ */
.faq { max-width: 760px; margin: 0 auto; }
.faq details {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 22px; margin-bottom: 12px; box-shadow: var(--shadow-sm);
}
.faq summary {
  cursor: pointer; list-style: none; font-weight: 700; color: var(--ink); padding: 16px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 1.04rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: .2s; color: var(--indigo-700); }
.faq details[open] summary .pm { transform: rotate(45deg); background: var(--indigo-50); }
.faq details p { margin: 0 0 16px; font-size: .98rem; }

/* CTA band */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--indigo-600), var(--indigo-900)); color: #fff;
  padding: 52px 44px; text-align: center; box-shadow: var(--shadow-lg);
  width: 100%; box-sizing: border-box;
}
.cta-band::after {
  content: ''; position: absolute; inset: 0; z-index: 0; opacity: .5;
  background: radial-gradient(40% 80% at 20% 0%, rgba(255,255,255,.18), transparent 60%),
              radial-gradient(40% 90% at 90% 100%, rgba(255,255,255,.12), transparent 60%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.88); max-width: 560px; margin: 0 auto 22px; }
.cta-band .hero-actions { justify-content: center; }

/* related */
.related-grid { display: grid; gap: 18px; grid-template-columns: repeat(3,1fr); }
@media (max-width: 820px) { .related-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 560px) { .related-grid { grid-template-columns: 1fr; } }

/* ---------- Generic content pages ---------- */
.page-hero { padding: 48px 0 12px; }
.doc-wrap { max-width: 100%; }
.doc { }
.doc h2 { margin-top: 40px; font-size: 1.45rem; }
.doc h3 { margin-top: 26px; }
.doc p, .doc li { color: var(--ink-soft); text-align: justify; }
.doc ul { padding-left: 20px; }
.doc li { margin-bottom: 8px; }
.callout {
  background: var(--indigo-50); border: 1px solid var(--indigo-100); border-radius: var(--radius);
  padding: 20px 22px; color: var(--ink-soft);
}

/* contact */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 820px) { .contact-grid { grid-template-columns: 1fr; } }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: 7px; }
.field input, .field textarea, .field select {
  width: 100%; font: inherit; padding: 13px 15px; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: var(--white); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--indigo-300); box-shadow: var(--ring); }
.field-error { display: none; font-size: .82rem; color: #dc2626; margin-top: 5px; }
.input-error { border-color: #dc2626 !important; }
.input-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.15) !important; }
.form-error { color: #dc2626; font-size: .88rem; margin-bottom: 10px; }
.form-success { color: #16a34a; font-weight: 600; font-size: .95rem; margin-top: 12px; text-align: center; }
.contact-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 28px; box-shadow: var(--shadow-sm); }
.contact-card .row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.contact-card .row:last-child { border-bottom: none; }
.contact-card svg { color: var(--indigo-600); flex: none; margin-top: 3px; }

/* 404 */
.nf-section { position: relative; padding: 90px 0 80px; text-align: center; overflow: hidden; }
.nf-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(60% 60% at 50% 0%, rgba(99,102,241,.12), transparent 70%),
              linear-gradient(180deg, var(--indigo-50) 0%, var(--bg) 60%);
}
.nf-inner { position: relative; z-index: 1; }
.nf-badge {
  display: inline-block;
  font-size: clamp(4.5rem, 16vw, 8rem); font-weight: 800; line-height: 1;
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 10px;
  letter-spacing: -.04em;
}
.nf-cats-wrap { margin-top: 16px; }
.nf-cats-label { font-size: .85rem; color: var(--muted); margin-bottom: 12px; }
.nf-section h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 14px; }
.nf-section .lead { max-width: 520px; margin: 0 auto 28px; }

/* ---------- Footer ---------- */
.site-footer { background: #100e22; color: #c9c7da; margin-top: 0; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 34px; padding-top: 40px; padding-bottom: 40px; }
@media (max-width: 820px) { .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; } }
@media (max-width: 480px) { .footer-top { grid-template-columns: 1fr; } }
.footer-brand img { height: 32px; margin-bottom: 14px; filter: brightness(0) invert(1); }
.footer-brand .name { display:flex; align-items:center; gap: 10px; margin-bottom: 14px; }
.footer-brand .name img { height: 34px; margin: 0; filter: none; }
.footer-brand .name b { color: #fff; font-size: 1.1rem; letter-spacing: .02em; }
.footer-brand p { color: #9a98ad; font-size: .92rem; max-width: 34ch; }
.footer-col h5 { color: #fff; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 14px; }
.footer-col a { display: block; color: #b6b4c8; padding: 6px 0; font-size: .94rem; }
.footer-col a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding-top: 22px; padding-bottom: 22px; display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.footer-bottom p { margin: 0; color: #807e93; font-size: .86rem; }
/* utility */
.mb-0 { margin-bottom: 0; }
.hide { display: none !important; }
.fade-up { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.fade-up.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .fade-up { opacity: 1; transform: none; transition: none; } html { scroll-behavior: auto; } }

/* ===========================================================
   READING PROGRESS BAR
   =========================================================== */
#progress-bar {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 3px; width: 0%;
  background: linear-gradient(90deg, var(--indigo-500), #a78bfa);
  transition: width .08s linear;
  pointer-events: none;
}

/* ===========================================================
   OFFER META ROW (rating, reading time, share, updated)
   =========================================================== */
.offer-meta-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px;
}
.read-time {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .82rem; color: var(--muted); font-weight: 600;
}
.read-time svg { opacity: .6; }
.last-updated {
  font-size: .78rem; color: var(--muted); font-weight: 500;
}
.share-btn {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-weight: 700; font-size: .82rem;
  color: var(--indigo-600); background: var(--indigo-50);
  border: 1.5px solid var(--indigo-200); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; transition: background .15s, border-color .15s;
}
.share-btn:hover { background: var(--indigo-100); border-color: var(--indigo-400); }
.share-btn.copied { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }

/* ===========================================================
   OFFER TAGS
   =========================================================== */
.offer-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.offer-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .77rem; font-weight: 700; color: var(--indigo-700);
  background: var(--indigo-50); border: 1px solid var(--indigo-100);
  border-radius: 999px; padding: 4px 11px;
}
.offer-tag svg { opacity: .7; }

/* ===========================================================
   OFFER IMAGE / THUMBNAIL
   =========================================================== */
.card-thumb {
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  overflow: hidden; margin: -20px -20px 16px; height: 180px;
}
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.aside-thumb {
  border-radius: var(--radius-sm); overflow: hidden;
  margin-bottom: 14px; max-height: 200px;
}
.aside-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* ===========================================================
   OFFER STICKY TOC
   =========================================================== */
.offer-toc {
  position: sticky; top: 72px; z-index: 40;
  background: var(--white); border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 8px rgba(23,20,50,.06);
}

/* Context row — slides in above links when hero scrolls out of view */
.toc-context-row {
  overflow: hidden;
  max-height: 0;
  transition: max-height .22s ease;
  border-bottom: 0 solid var(--line);
}
.toc-context-row.ctx-visible {
  max-height: 38px;
  border-bottom-width: 1px;
}
.toc-ctx-inner {
  display: flex; align-items: center; gap: 7px;
  padding-top: 6px; padding-bottom: 6px;
}
.toc-ctx-cat {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; color: var(--indigo-600); white-space: nowrap; flex-shrink: 0;
}
.toc-ctx-sep { color: var(--muted); font-size: .75rem; flex-shrink: 0; }
.toc-ctx-title {
  font-size: .82rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}

/* TOC links row */
.toc-inner {
  display: flex; align-items: center; gap: 0;
  overflow-x: auto; scrollbar-width: none;
  overscroll-behavior-x: contain; /* prevent page scroll when TOC scrollbar ends */
  -webkit-overflow-scrolling: touch;
}
.toc-inner::-webkit-scrollbar { display: none; }
.toc-link {
  flex-shrink: 0; display: block;
  padding: 13px 14px; font-size: .82rem; font-weight: 600;
  color: var(--muted); border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s; white-space: nowrap;
}
.toc-link:first-child { padding-left: 0; }
.toc-link:hover { color: var(--indigo-600); }
.toc-link.toc-active { color: var(--indigo-700); border-bottom-color: var(--indigo-600); }

@media (max-width: 768px) {
  .toc-link { padding: 11px 10px; font-size: .76rem; }
}

/* ===========================================================
   PROCESS / HOW IT WORKS — redesigned horizontal timeline
   =========================================================== */
.proc-section .sec-head { margin-bottom: 40px; }
.proc-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0;
  position: relative;
}
.proc-list::before {
  content: ''; position: absolute;
  top: 28px; left: 5%; right: 5%; height: 2px;
  background: linear-gradient(90deg, var(--indigo-200), var(--indigo-300), var(--indigo-200));
  z-index: 0;
}
.proc-step {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 0 12px 28px; position: relative; z-index: 1;
}
.proc-connector {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 18px;
}
.proc-num {
  width: 56px; height: 56px; border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.1rem;
  box-shadow: 0 6px 18px rgba(79,70,229,.35), 0 0 0 4px var(--white), 0 0 0 6px var(--indigo-100);
  flex-shrink: 0;
}
.proc-body { flex: 1; }
.proc-body h3 { font-size: 1rem; margin-bottom: 6px; }
.proc-body p { margin: 0; font-size: .91rem; color: var(--ink-soft); }
@media (max-width: 720px) {
  .proc-list { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .proc-list::before { display: none; }
  .proc-step { flex-direction: row; text-align: left; gap: 16px; padding: 0 0 28px; }
  .proc-connector { margin-bottom: 0; }
  .proc-num { width: 44px; height: 44px; font-size: .95rem; }
}

/* ===========================================================
   KEY CONSIDERATIONS — card grid redesign
   =========================================================== */
.cons-grid {
  display: grid;
  /* columns set via inline style by build.js; fallback below */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.cons-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cons-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--indigo-500), var(--indigo-300));
  opacity: 0; transition: opacity .18s;
}
.cons-card:hover { border-color: var(--indigo-200); box-shadow: var(--shadow); transform: translateY(-3px); }
.cons-card:hover::after { opacity: 1; }
.cons-num {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--indigo-600), var(--indigo-500));
  color: #fff; font-weight: 800; font-size: .95rem;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px -4px rgba(99,102,241,.45);
}
.cons-card p { margin: 0; font-size: .9rem; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 720px) { .cons-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .cons-grid { grid-template-columns: 1fr !important; } }


/* ===========================================================
   MOBILE STICKY CTA (offer pages only)
   =========================================================== */
.offer-sticky-cta {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 800;
  background: var(--white); border-top: 1px solid var(--line);
  box-shadow: 0 -4px 20px rgba(23,20,50,.12);
  padding: 12px 16px;
}
.osc-inner { display: flex; align-items: center; gap: 12px; }
@media (max-width: 768px) {
  .offer-sticky-cta { display: block; padding: 10px 16px; }
  .offer-page { padding-bottom: 76px; }
  .osc-inner { padding-right: 0; }
  .osc-inner .btn { width: 100%; text-align: center; justify-content: center; }
}
#cb-wrap { transition: bottom .25s ease; }
#cb-wrap.lift-for-cta { bottom: calc(var(--sticky-cta-h, 90px) + 12px); }

/* Hide sticky CTA until user scrolls past hero */
.offer-sticky-cta.cta-hidden { display: none !important; }

/* ===========================================================
   NEWSLETTER SECTION
   =========================================================== */
.newsletter-section {
  background: linear-gradient(135deg, var(--indigo-900), #1e1b4b);
  padding: 72px 0;
}
.newsletter-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center;
}
.nl-text h2 { color: #fff; margin-bottom: 12px; font-size: clamp(1.5rem, 3vw, 2rem); }
.nl-text p { color: rgba(255,255,255,.72); max-width: 44ch; margin: 0; }
.nl-form { display: flex; flex-direction: column; gap: 10px; }
.nl-input-wrap { display: flex; gap: 10px; }
#nl-email {
  flex: 1; font: inherit; font-size: .95rem; padding: 14px 18px;
  border: 1.5px solid rgba(255,255,255,.2); border-radius: 999px;
  background: rgba(255,255,255,.1); color: #fff; outline: none;
  transition: border-color .15s, background .15s;
}
#nl-email::placeholder { color: rgba(255,255,255,.45); }
#nl-email:focus { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.15); }
.nl-success { color: #4ade80; font-weight: 600; font-size: .9rem; margin: 0; }
.nl-error   { color: #fca5a5; font-size: .9rem; margin: 0; }
@media (max-width: 760px) {
  .newsletter-inner { grid-template-columns: 1fr; gap: 28px; }
  .nl-input-wrap { flex-direction: column; }
  #nl-email { border-radius: 14px; }
}

/* ===========================================================
   EMPTY STATE (category / search)
   =========================================================== */
.empty-state {
  text-align: center; padding: 60px 24px; max-width: 560px; margin: 0 auto;
}
.empty-state .es-icon { font-size: 2.5rem; margin-bottom: 16px; }
.empty-state h2 { margin-bottom: 12px; }
.empty-state p { color: var(--muted); margin-bottom: 20px; }
.es-cats {
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; margin-bottom: 8px;
}
.es-cat {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border: 1.5px solid var(--line); border-radius: 999px;
  font-weight: 700; font-size: .9rem; color: var(--ink);
  background: var(--white); transition: border-color .15s, color .15s;
}
.es-cat:hover { border-color: var(--indigo-400); color: var(--indigo-700); }
.empty-state-related { padding: 20px 0; text-align: center; }

/* ===========================================================
   BREADCRUMB (updated to use <ol>)
   =========================================================== */
.breadcrumb ol {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: .83rem; padding: 14px 0;
}
.breadcrumb li { color: var(--muted); }
.breadcrumb li a { color: var(--muted); }
.breadcrumb li a:hover { color: var(--indigo-600); }
.breadcrumb li[aria-current="page"] { color: var(--ink); font-weight: 600; }

/* ===========================================================
   OFFER ARTICLE (updated headings)
   =========================================================== */
.article-h2 { font-size: clamp(1.3rem, 2.5vw, 1.7rem); margin: 1.8em 0 .6em; }
.article-h3 { font-size: 1.15rem; margin: 1.4em 0 .5em; color: var(--indigo-700); }

/* ===========================================================
   CHATBOT WIDGET
   =========================================================== */

/* Wrapper — anchors the toggle button at bottom-right */
#cb-wrap {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
}

/* Toggle button */
#cb-toggle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo-600), var(--indigo-700));
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(79,70,229,.45);
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
  color: #fff;
}
#cb-toggle:hover { transform: scale(1.07); box-shadow: 0 8px 30px rgba(79,70,229,.55); }
#cb-toggle .cb-icon-chat,
#cb-toggle .cb-icon-close { position: absolute; transition: opacity .2s ease, transform .2s ease; }
#cb-toggle .cb-icon-close { opacity: 0; transform: rotate(-90deg) scale(.7); }
#cb-toggle.cb-open .cb-icon-chat { opacity: 0; transform: rotate(90deg) scale(.7); }
#cb-toggle.cb-open .cb-icon-close { opacity: 1; transform: rotate(0) scale(1); }

/* Notification dot */
#cb-toggle::after {
  content: '';
  position: absolute;
  top: 4px; right: 4px;
  width: 10px; height: 10px;
  background: #22c55e;
  border: 2px solid #fff;
  border-radius: 50%;
}

/* Panel — floats above the button, out of layout flow */
#cb-panel {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 360px;
  max-height: 580px;
  background: var(--white);
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(23,20,50,.18), 0 4px 16px rgba(79,70,229,.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  opacity: 0;
  transform: translateY(16px) scale(.97);
  transform-origin: bottom right;
  pointer-events: none;
  visibility: hidden;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s;
}
#cb-panel.cb-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
  visibility: visible;
  transition: opacity .25s ease, transform .25s ease, visibility 0s linear 0s;
}

/* Header */
#cb-head {
  background: linear-gradient(135deg, var(--indigo-600) 0%, var(--indigo-900) 100%);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 11px;
  flex-shrink: 0;
}
.cb-avatar {
  width: 34px; height: 34px;
  background: rgba(255,255,255,.2);
  border: 1.5px solid rgba(255,255,255,.28);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem; color: #fff;
  flex-shrink: 0;
}
.cb-head-info { flex: 1; min-width: 0; }
.cb-head-name { color: #fff; font-weight: 700; font-size: .9rem; line-height: 1.25; letter-spacing: -.01em; }
.cb-head-status {
  color: rgba(255,255,255,.72); font-size: .74rem;
  display: flex; align-items: center; gap: 5px;
  margin-top: 2px;
}
.cb-head-status::before {
  content: '';
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(74,222,128,.6);
}
.cb-head-btns { display: flex; gap: 4px; flex-shrink: 0; }
.cb-head-btns button {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  cursor: pointer;
  color: rgba(255,255,255,.85);
  width: 30px; height: 30px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, border-color .15s;
}
.cb-head-btns button:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.3); }

/* Messages area */
#cb-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px 16px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  scroll-behavior: smooth;
}
#cb-messages::-webkit-scrollbar { width: 4px; }
#cb-messages::-webkit-scrollbar-track { background: transparent; }
#cb-messages::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* Rows */
.cb-row { display: flex; align-items: flex-end; gap: 8px; }
.cb-row-user { flex-direction: row-reverse; }

/* Avatar (small) */
.cb-avatar-sm {
  width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; color: #fff;
  flex-shrink: 0;
  align-self: flex-end;
}

/* Bubbles */
.cb-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 16px;
  font-size: .88rem;
  line-height: 1.5;
}
.cb-bubble-bot {
  background: var(--bg-soft);
  color: var(--ink);
  border-bottom-left-radius: 4px;
}
.cb-bubble-bot p { margin: 0 0 4px; }
.cb-bubble-bot p:last-child { margin-bottom: 0; }
.cb-bubble-user {
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-600));
  color: #fff;
  border-bottom-right-radius: 4px;
}

/* Typing indicator */
.cb-typing {
  display: flex !important;
  align-items: center;
  gap: 4px;
  padding: 12px 16px;
}
.cb-typing span {
  width: 6px; height: 6px;
  background: var(--muted);
  border-radius: 50%;
  animation: cb-bounce 1.2s ease-in-out infinite;
}
.cb-typing span:nth-child(2) { animation-delay: .2s; }
.cb-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes cb-bounce {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-6px); }
}

/* Chips */
.cb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 4px 0 6px 34px;
}
.cb-chip {
  background: var(--white);
  border: 1.5px solid var(--indigo-200);
  color: var(--indigo-600);
  font-size: .81rem;
  font-weight: 600;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.cb-chip:hover { background: var(--indigo-50); border-color: var(--indigo-500); }
.cb-chip-used { opacity: .5; cursor: default; }
.cb-chip:disabled { cursor: default; }

/* Offer cards */
.cb-cards {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 34px;
}
.cb-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--line);
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cb-card:hover {
  border-color: var(--indigo-300);
  box-shadow: 0 3px 14px rgba(79,70,229,.1);
  transform: translateX(2px);
}
.cb-card-icon {
  font-size: 1.3rem;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--indigo-50);
  border-radius: 9px;
  flex-shrink: 0;
}
.cb-card-body { flex: 1; min-width: 0; }
.cb-card-title {
  font-size: .85rem;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cb-card-sub { font-size: .76rem; color: var(--muted); margin-top: 1px; }
.cb-card-arr { color: var(--indigo-400); flex-shrink: 0; }

/* Input area */
#cb-input-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  background: var(--white);
  flex-shrink: 0;
}
#cb-input {
  flex: 1;
  border: 1.5px solid var(--line);
  border-radius: 22px;
  padding: 9px 14px;
  font-size: .88rem;
  color: var(--ink);
  background: var(--bg-soft);
  outline: none;
  transition: border-color .15s;
}
#cb-input::placeholder { color: var(--muted); }
#cb-input:focus { border-color: var(--indigo-400); background: #fff; }
#cb-send {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--indigo-500), var(--indigo-600));
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  flex-shrink: 0;
  transition: opacity .15s, transform .15s;
}
#cb-send:hover { opacity: .9; transform: scale(1.05); }

/* Mobile adjustments — chatbot (covers full mobile range ≤640px) */
@media (max-width: 640px) {
  #cb-wrap { bottom: 18px; right: 16px; }
  #cb-panel {
    width: calc(100vw - 32px);
    max-width: none;   /* override any wildcard max-width rule */
    right: 0;
    max-height: 70vh;
    border-radius: 16px;
  }
}

/* ===========================================================
   MOBILE OPTIMISATION — comprehensive ≤640px overrides
   =========================================================== */
/* ===========================================================
   TABLET — 768px–1023px
   =========================================================== */
@media (max-width: 1023px) and (min-width: 768px) {
  .hero { padding: 60px 0 44px; }
  .newsletter-inner { gap: 36px; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 30px; }
  /* Reduce proc-list connector line to 80% width on tablet */
  .proc-list::before { left: 8%; right: 8%; }
  /* Ensure offer hero stacks gracefully on tablet */
  .offer-hero-grid { gap: 28px; }
}

/* ===========================================================
   MOBILE — ≤640px
   =========================================================== */
@media (max-width: 640px) {
  /* Prevent content elements from causing horizontal scroll.
     Do NOT apply to all (*) — that breaks absolutely-positioned panels
     like the chatbot whose containing block is only 56px wide. */
  img, video, iframe, svg, table, pre { max-width: 100%; height: auto; }

  /* Sections */
  .section    { padding: 44px 0; }
  .section-sm { padding: 28px 0; }

  /* Typography */
  h1 { font-size: clamp(1.7rem, 7vw, 2.2rem); }
  h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  h3 { font-size: 1.1rem; }

  /* Hero */
  .hero { padding: 48px 0 36px; }
  .hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); max-width: 100%; }
  .hero .lead { font-size: 1rem; max-width: 100%; }
  .hero-stats { gap: 22px; margin-top: 32px; flex-wrap: wrap; }
  .hero-stats .num { font-size: 1.4rem; }
  .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .nf-section .hero-actions { align-items: center; }

  /* Page hero */
  .page-hero { padding: 32px 0 8px; }
  .page-hero h1 { font-size: clamp(1.6rem, 7vw, 2.2rem); }

  /* CTA band */
  .cta-band { padding: 38px 20px; border-radius: var(--radius); }
  .cta-band h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }

  /* Trust strip */
  .trust-row { gap: 10px 20px; }
  .trust-item { font-size: .85rem; }

  /* Filter chips */
  .chip { font-size: .82rem; padding: 8px 14px; }
  .filters { gap: 8px; }

  /* Cards */
  .card { padding: 20px; }

  /* Offer TOC */
  .toc-link { padding: 10px 12px; font-size: .78rem; }

  /* Offer hero */
  .offer-hero h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  .offer-hero .sub { font-size: 1rem; }
  .offer-meta-row { gap: 7px; flex-wrap: wrap; }

  /* Offer aside */
  .offer-aside { padding: 20px; }

  /* Offer article */
  .article-inner { padding: 0 4px; }
  .prose p, .article-inner p { font-size: .97rem; }

  /* Panel */
  .panel { padding: 22px 18px; }

  /* Category cards */
  .cat-card { padding: 24px; min-height: 160px; }
  .cat-card h3 { font-size: 1.2rem; }

  /* Steps */
  .step { padding: 20px; }
  .proc-step { padding: 0 6px 22px; }

  /* Considerations */
  .cons-card { padding: 20px 16px; }

  /* Audience cards */
  .aud-card { padding: 18px; }

  /* Feature list */
  .feature { padding: 16px; }

  /* Footer */
  .footer-top { gap: 22px; }
  .footer-col h4 { font-size: 1rem; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* Newsletter */
  .newsletter-section { padding: 48px 0; }
  .nl-input-wrap { flex-direction: column; }
  #nl-email { border-radius: 14px; }
  #nl-btn { width: 100%; }

  /* Search overlay */
  .search-box { border-radius: var(--radius); }
  .search-overlay { padding: 60px 12px 24px; align-items: flex-start; }
  .search-input-wrap input { font-size: 1rem; }

  /* Breadcrumb */
  .breadcrumb ol { font-size: .78rem; }

  /* Offer sticky CTA */
  .offer-sticky-cta { padding: 10px 14px; }

  /* Doc pages */
  .doc-wrap { padding: 0; }
  .doc h2 { font-size: 1.25rem; }

  /* Empty state */
  .empty-state { padding: 44px 16px; }
  .es-cats { flex-direction: column; }
  .es-cat { justify-content: center; }

  /* Share button */
  .share-btn { padding: 8px 14px; font-size: .82rem; }

  /* Reading progress */
  #progress-bar { height: 2px; }

  /* CTA band — buttons centered, not stretched */
  .cta-band .hero-actions { align-items: center; }
  .cta-band .hero-actions .btn { width: auto; min-width: 220px; }

  /* 404 page actions — stack vertically centered */
  .nf-section .hero-actions { flex-direction: column; align-items: center; }
  .nf-section .hero-actions .btn { width: auto; min-width: 220px; }

  /* Touch target improvement — snappier taps, no double-tap zoom */
  .btn, .chip, button, .nav-toggle, #cb-toggle, .toc-link, .card-cover,
  .search-btn, .search-close, .search-result, .faq summary { touch-action: manipulation; }

  /* Offer article prose max-width overrides on mobile */
  .prose { max-width: 100% !important; }

  /* Ensure all sections don't cause horizontal overflow */
  .section, .section-sm, .hero, .offer-hero, .page-hero,
  .newsletter-section, .trust-strip, .site-footer { overflow-x: clip; }

  /* Ensure table / pre / code don't overflow */
  table { display: block; overflow-x: auto; width: 100%; }
  pre, code { overflow-x: auto; white-space: pre-wrap; word-break: break-word; }

  /* Better hero-actions on mobile — prevent overflow */
  .hero-actions { width: 100%; max-width: 100%; }
  .hero-actions .btn { max-width: 100%; box-sizing: border-box; }

  /* Fix cta-band on offer hero for mobile */
  .offer-hero .hero-actions { flex-direction: column; }
  .offer-hero .hero-actions .btn { width: 100%; }

  /* Prevent long words/URLs breaking layout */
  p, li, h1, h2, h3, h4 { overflow-wrap: break-word; word-break: break-word; }
}

/* ===========================================================
   VERY SMALL — ≤414px
   =========================================================== */
@media (max-width: 414px) {
  .container { padding: 0 16px; }
  .hero-stats { gap: 16px; }
  .hero-stats > div { min-width: 70px; }
  .nav-browse { display: none; }
  .proc-step { flex-direction: row; gap: 12px; }
  .trust-item { font-size: .82rem; }
  .cta-band { padding: 32px 18px; }
  .offer-aside { padding: 18px; }
}

/* ===========================================================
   TINY — ≤380px
   =========================================================== */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .hero h1 { font-size: 1.6rem; }
  .btn-lg { padding: 13px 18px; font-size: .93rem; }
  .nav-logo img { height: 28px; }
  .card { padding: 16px; }
  /* Match card-thumb negative margin to reduced card padding */
  .card-thumb { margin: -16px -16px 12px; }
  .chip { padding: 7px 12px; font-size: .78rem; }
  .hero-stats .num { font-size: 1.25rem; }
  h2 { font-size: 1.25rem; }
  .hero-stats { gap: 14px; }
  .hero-stats > div { min-width: 60px; }
  .faq summary { font-size: .95rem; }
  .faq details { padding: 4px 14px; }
  .panel { padding: 18px 14px; }
}

/* ===========================================================
   320px — absolute minimum
   =========================================================== */
@media (max-width: 320px) {
  .container { padding: 0 12px; }
  h1 { font-size: 1.5rem; }
  h2 { font-size: 1.15rem; }
  .btn { font-size: .88rem; padding: 12px 16px; }
  .btn-lg { padding: 12px 16px; font-size: .9rem; }
  .hero-stats { flex-direction: column; gap: 10px; }
  .trust-item { font-size: .78rem; gap: 6px; }
  .cta-band { padding: 26px 14px; }
  .cat-card { padding: 18px; min-height: 140px; }
  .cat-card h3 { font-size: 1.05rem; }
  .nav-logo img { height: 26px; }
}

/* ===========================================================
   TABLET chatbot panel — prevent it clipping off left edge
   =========================================================== */
@media (min-width: 641px) and (max-width: 767px) {
  #cb-panel {
    width: calc(100vw - 56px);
    right: 0;
  }
}

/* ===========================================================
   SCROLL OFFSET — compensate for sticky header + TOC
   Without this, anchor targets jump under the sticky bars.
   Header = 72px, TOC links ≈ 44px, context row up to 38px.
   =========================================================== */
.offer-page [id] {
  scroll-margin-top: 165px;
}
/* Non-offer pages just need to clear the sticky header */
[id] {
  scroll-margin-top: 80px;
}

/* ===========================================================
   PERFORMANCE — GPU-accelerated interactive elements
   =========================================================== */
/* Promote sticky elements to their own compositor layer */
.site-header, .offer-toc {
  will-change: transform;
  transform: translateZ(0);
}
/* Cards and buttons — hint the browser about upcoming transforms */
.card, .cons-card, .cat-card {
  backface-visibility: hidden;
}

/* ===========================================================
   TOUCH & INTERACTION IMPROVEMENTS (global)
   =========================================================== */
button, a, .chip, .toc-link, summary, .card-cover,
.search-btn, .search-close, .search-result, .faq summary,
#cb-toggle, .nav-toggle, .cb-chip, .cb-card {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* ===========================================================
   IMAGE RENDERING — prevent blurry scaling on Retina
   =========================================================== */
.card-thumb img, .aside-thumb img, .offer-aside img {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}