/* BTR Prime Design System — v4.0 (light • gradient-forward • UNFCCC-polish)
   Upgrades: section bands, pro timeline, enterprise tables, button system,
   glass-sticky header & mega menu, credibility footer utilities.
   Maintains accessibility + print fidelity.
*/

/* ------------------------------
   Tokens (colors, type, spacing)
---------------------------------*/
:root{
  /* Brand palette (kept) */
  --brand-900:#0B2E59; --brand-800:#0F4C81; --brand-700:#145DA0; --brand-600:#1A6EB8; --brand-500:#1F7ABD; --brand-050:#F0F6FC;
  --teal-700:#0C6B64; --teal-600:#0F766E; --teal-100:#D1FAF5;

  --success-600:#15803D; --warning-600:#B45309; --urgent-600:#B91C1C;

  --neutral-950:#0A0A0A; --neutral-900:#131313; --neutral-800:#1E1E1E;
  --neutral-700:#3F3F3F; --neutral-600:#525252; --neutral-500:#6B7280; --neutral-400:#A3A3A3;
  --neutral-300:#D4D4D4; --neutral-200:#E5E5E5; --neutral-150:#ECECEC; --neutral-100:#F5F5F5; --neutral-050:#FAFAFA;

  /* Layout & radius */
  --max-content: 65rem; /* slightly narrower fixed desktop width */
  --radius-md:.75rem; --radius-lg:1rem; --radius-xl:1.25rem; --radius-2xl:1.5rem; --radius-3xl:2rem;

  /* Shadows */
  --shadow-card:0 1px 2px rgba(16,24,40,.06), 0 1px 1px rgba(16,24,40,.04);
  --shadow-elev:0 10px 20px rgba(16,24,40,.06), 0 6px 12px rgba(16,24,40,.04);
  --shadow-float:0 12px 28px rgba(20,93,160,.10), 0 2px 6px rgba(0,0,0,.04);

  /* Type scale */
  --font-sans: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif;
  --fs-xxl: clamp(2.5rem, 5vw, 3.25rem);
  --fs-xl:  clamp(1.875rem, 3vw, 2.25rem);
  --fs-lg:  clamp(1.375rem, 2vw, 1.5rem);
  --fs-md:  1.0625rem;
  --fs-sm:  0.95rem;

  /* Spacing */
  --sp-0:.25rem; --sp-1:.5rem; --sp-2:.75rem; --sp-3:1rem; --sp-4:1.5rem;
  --sp-5:2rem; --sp-6:2.5rem; --sp-7:3rem; --sp-8:4rem;

  /* Gradients */
  --grad-sky:    linear-gradient(180deg, #F7FBFF 0%, #FFFFFF 100%);
  --grad-band:   linear-gradient(180deg, rgba(31,122,189,0.08), rgba(31,122,189,0));
  --grad-soft:   radial-gradient(1200px 600px at 50% -10%, rgba(20,93,160,.10) 0%, rgba(20,93,160,0) 60%),
                 linear-gradient(180deg, #FFFFFF 0%, #F9FBFF 100%);
  --grad-muted:  linear-gradient(180deg, #FAFAFA 0%, #FFFFFF 100%);

  /* NEW: Surfaces + glass */
  --surface:#fff; --surface-2:#fbfdff; --glass:rgba(255,255,255,.72);
  --hairline: color-mix(in oklab, var(--neutral-200) 70%, transparent);

  /* Motion */
  --dur-fast:120ms; --dur-med:200ms; --dur-slow:280ms;
  --ease: cubic-bezier(.2,.6,.2,1);
}

/* Reset & base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  color:var(--neutral-900);
  background:#FCFEFF; /* lighter overall page tone */
  line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  /* gentle page-wide soft wash */
  background-image:
    radial-gradient(800px 500px at 80% -5%, rgba(31,122,189,.06), rgba(31,122,189,0) 60%),
    radial-gradient(700px 400px at 10% -10%, rgba(18,184,134,.05), rgba(18,184,134,0) 55%);
  background-attachment: fixed;
}
a{color:var(--brand-700); text-decoration:none}
a:hover{text-decoration:underline}
.img-fluid, img, svg{ max-width:100%; height:auto }
.container{max-width:var(--max-content); margin:0 auto; padding:0 var(--sp-3)}
:focus-visible{outline:2px solid var(--brand-700); outline-offset:2px; border-radius:.25rem}
summary:focus-visible{ outline:2px solid var(--brand-700); outline-offset:2px; border-radius:.25rem }

/* ------------------------------
   Header / Navbar (glass-sticky)
---------------------------------*/
header.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.92);
  border-bottom:1px solid var(--neutral-100);
  -webkit-backdrop-filter:saturate(180%) blur(8px);
  backdrop-filter:saturate(180%) blur(8px);
  transition: box-shadow var(--dur-med) var(--ease), background var(--dur-med) var(--ease);
}
header.site-header.is-scrolled{ box-shadow:0 6px 18px rgba(15,23,42,.06) }

.announce{
  background:var(--brand-050); color:var(--urgent-600);
  padding:.6rem 0; font-size:.95rem; border-bottom:1px solid var(--neutral-100)
}
.navbar{display:flex; align-items:center; justify-content:space-between; padding:var(--sp-3) 0}
.brand{display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--brand-900); letter-spacing:-.01em}
header.site-header .brand{ position:relative; z-index:60 }
/* Use new logo image from favicon folder */
.brand-badge{
  width:150px; height:34px; border-radius:0;
  /* styles.css lives in /assets, so favicon is /assets/favicon/... */
  background:url('./favicon/logo-blue.png') left center/contain no-repeat;
  display:block; color:transparent; font-size:0; line-height:0;
  position:relative; z-index:1;
}
@media (max-width:960px){
  .brand-badge{ width:140px; height:32px }
}
/* Hide visible brand text next to the logo image */
.brand .brand-badge + span{ display:none !important }
@media (max-width:960px){
  .navbar .brand{ padding-left:.5rem }
}

/* Primary nav */
.nav{display:flex; gap:.5rem; align-items:center; flex-wrap:wrap}
.nav > li{list-style:none; position:relative}
.nav a{padding:.55rem .7rem; border-radius:.6rem; font-weight:600}
.nav a:hover{background:var(--brand-050); text-decoration:none}
.nav .current{background:var(--brand-050); color:var(--brand-800)}
.nav .dropdown > a:after{content:" ▾"; font-size:.9em; opacity:.8}

/* Dropdowns */
.dropdown-menu{
  position:absolute; top:100%; left:0; min-width:260px;
  background:#fff; border:1px solid var(--neutral-100);
  border-radius:.75rem; padding:.5rem; display:none; box-shadow:var(--shadow-card)
}
.dropdown:hover .dropdown-menu{display:block}
.dropdown-menu a{display:block; padding:.55rem .65rem; border-radius:.5rem}
.dropdown-menu a:hover{background:var(--brand-050)}
.nav-toggle{display:none}
/* Show the pancake button and hide the list on mobile */
@media (max-width:960px){
  .nav-toggle{ display:inline-flex }
  .nav{ display:none }
  .nav.open{ display:block }
}
@media (min-width:961px){ .nav-toggle{ display:none !important } }

/* NEW: Mega menu variant */
.dropdown-menu.mega{
  width:min(760px, 92vw);
  display:grid; grid-template-columns:1fr 1fr; gap:.25rem 1rem;
  padding:1rem; border-radius:1rem; box-shadow:var(--shadow-elev);
}
.dropdown-menu .menu-note{display:block; font-size:.85rem; color:var(--neutral-600); margin-top:.15rem}

/* ------------------------------
   Buttons / Badges
---------------------------------*/
.btn{display:inline-flex; align-items:center; gap:.45rem; font-weight:700; border-radius:.9rem; border:1px solid transparent; cursor:pointer; transition:transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease)}
.btn:active{ transform:translateY(1px) }

.btn-primary{
  padding:.8rem 1rem; background:linear-gradient(180deg, var(--brand-600), var(--brand-700)); color:#fff;
  border-color:color-mix(in oklab, var(--brand-700) 35%, #fff 65%); box-shadow:0 8px 20px rgba(20,93,160,.18)
}
.btn-primary:hover{ filter:brightness(1.03) }
.btn-primary:focus-visible{ outline:2px solid #145DA0; outline-offset:2px }

.btn-secondary{background:#fff; color:var(--teal-600); border-color:var(--teal-600); padding:.8rem 1rem}
.btn-secondary:hover{background:var(--teal-600); color:#fff; transform:translateY(-1px)}

/* Bright green primary for Learn more actions */
.btn-success{
  padding:.8rem 1rem;
  background:linear-gradient(180deg, #1A9E4A, var(--success-600));
  color:#fff;
  border-color:color-mix(in oklab, var(--success-600) 45%, #fff 55%);
  box-shadow:0 8px 20px rgba(21,128,61,.18)
}
.btn-success:hover{ filter:brightness(1.03) }
.btn-success:focus-visible{ outline:2px solid #16A34A; outline-offset:2px }

.btn-tonal{
  padding:.7rem .95rem; border:1px solid var(--neutral-150);
  background:linear-gradient(180deg,#fff 0%, #F7FBFF 100%); color:#0b1530;
}
.btn-ghost{color:var(--brand-700); font-weight:700; padding:.7rem .95rem; border:1px solid var(--neutral-200); background:#fff}

/* Ribbons & chips */
.ribbon{display:inline-block; background:var(--urgent-600); color:#fff; padding:.3rem .6rem; border-radius:.5rem; font-size:.85rem; margin-top:.6rem; box-shadow:var(--shadow-card)}
.chip{ display:inline-block; padding:.18rem .5rem; border:1px solid var(--neutral-200); border-radius:.55rem; background:#fff; font-size:.82rem }

/* Mobile: make hero/CTA buttons full-width for better tap targets */
@media (max-width:600px){
  .hero .btn,
  .hero-cta .btn,
  .qs-cta .btn,
  .cta-band .actions .btn { width:100%; justify-content:center; }
}
/* Perf: assist browsers in skipping offscreen work */
img[loading="lazy"]{ content-visibility:auto }

/* ------------------------------
   Typography
---------------------------------*/
h1{font-size:var(--fs-xxl); line-height:1.12; margin:.25rem 0 1rem 0; letter-spacing:-.012em; color:var(--brand-900)}
h2{font-size:var(--fs-xl); margin:0 0 1rem 0; color:var(--brand-900)}
h3{font-size:var(--fs-lg); margin:1.25rem 0 .5rem 0; color:var(--brand-900)}
p{font-size:var(--fs-md); max-width:68ch}
.sub{color:var(--neutral-600)}
.meta{font-size:var(--fs-sm); color:var(--neutral-600)}
.eyebrow{letter-spacing:.12em; text-transform:uppercase; font-weight:800; color:var(--brand-700); font-size:.9rem}

/* ------------------------------
   Layout / Sections
---------------------------------*/
.split{
  padding:var(--sp-8) 0;
  border-top:1px solid var(--neutral-100);
  background: var(--grad-muted); /* base gentle gradient for all sections */
  position: relative;
  isolation: isolate;
}

/* NEW: Premium section band + header pattern */
.band.pro{
  padding:4rem 0;
  background:
    radial-gradient(1200px 560px at 10% -10%, #EAF3FE 0%, transparent 60%),
    radial-gradient(900px 520px at 90% 0%, #ECF8F5 0%, transparent 60%),
    var(--surface);
  border-top:1px solid var(--neutral-100);
  position:relative;
}
.band.pro .container{ max-width:1100px }

.section-head.pro{
  display:grid; gap:.35rem;
  border:1px solid var(--neutral-100);
  border-radius:1rem; padding:1rem 1.1rem;
  background:linear-gradient(180deg,#fff 0%, #FAFCFF 100%);
  box-shadow:var(--shadow-card);
}

/* Hero */
.hero{
  padding:var(--sp-8) 0;
  position: relative;
  isolation: isolate;
  --hero-img:none;                  /* set per-page: .hero{ --hero-img:url('...') } */
  --hero-tint: rgba(20,93,160, .06);/* faint institutional blue tint */
  background: var(--grad-sky);
}
.hero-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:2.5rem; align-items:center}

/* Faint hero image layer */
.hero::before{
  content:"";
  position:absolute; inset:0;
  background-image: var(--hero-img);
  background-size:cover; background-position:center;
  opacity:.12; /* faint */
  z-index:-2;
}
.hero::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, var(--hero-tint) 0%, transparent 40%) , radial-gradient(900px 500px at 70% 0%, rgba(255,255,255,.6), rgba(255,255,255,0));
  z-index:-1;
}

/* Section gradient helpers */
.section-gradient{ background: var(--grad-soft); }
.section-gradient[data-theme="blue"]{
  background-image:
    radial-gradient(1200px 600px at 10% -10%, rgba(31,122,189,.12), rgba(31,122,189,0) 60%),
    linear-gradient(180deg,#FFFFFF 0%, #F2F7FC 100%);
}
.section-gradient[data-theme="teal"]{
  background-image:
    radial-gradient(1200px 600px at 90% -10%, rgba(18,184,134,.12), rgba(18,184,134,0) 60%),
    linear-gradient(180deg,#FFFFFF 0%, #F3FBF8 100%);
}

/* Kicker callout */
.kicker{background:var(--teal-100); padding:1.1rem; border-radius:1rem; border:1px solid #BDEBE5; box-shadow:var(--shadow-card)}

/* ------------------------------
   Cards (crisper borders & depth)
---------------------------------*/
.card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem}
.card{
  background:#fff;
  border:1px solid var(--neutral-100);
  border-radius:var(--radius-2xl);
  padding:1.25rem;
  box-shadow:var(--shadow-card);
  transition:transform var(--dur-med) var(--ease), box-shadow var(--dur-med) var(--ease), border-color var(--dur-med) var(--ease);
}
@media (hover:hover){
  .card:hover{transform:translateY(-2px); box-shadow:var(--shadow-elev); border-color:#E8EEF6}
}
.card .meta{font-size:.95rem; color:var(--neutral-600)}
.card.emphasis{
  border-color:#E0ECF7;
  box-shadow: 0 1px 0 rgba(31,122,189,.04), 0 10px 20px rgba(16,24,40,.06);
}
.card-header{
  padding:.5rem .75rem .6rem;
  margin:-.25rem - .25rem  .75rem;
  border-radius:.8rem;
  background: var(--grad-band);
}

/* Feature card accent (optional) */
.card.featured{ border-color:#E0ECF7; box-shadow:var(--shadow-float); position:relative }
.card.featured::before{
  content:""; position:absolute; left:0; right:0; top:0; height:4px;
  background:linear-gradient(90deg, #1F7ABD, #12B886);
  border-top-left-radius:inherit; border-top-right-radius:inherit;
}

/* ------------------------------
   Tables (dense, readable, enterprise)
---------------------------------*/
.table{width:100%; border-collapse:collapse; font-size:.98rem; border:1px solid var(--neutral-100); border-radius:var(--radius-lg); overflow:hidden}
.table thead th{background:var(--neutral-050); color:var(--neutral-700); font-weight:700; text-transform:none; letter-spacing:.01em}
.table th,.table td{padding:.75rem .9rem; border-bottom:1px solid var(--neutral-100); text-align:left}
.table tr:nth-child(even) td{background:var(--brand-050)}
.table .num{text-align:right}

/* Responsive table helper */
.table-scroll{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch }
.table{ min-width: 720px }
.table thead th, .table .num{ white-space:nowrap }
@media (max-width: 560px){ .table{ min-width: 640px } }

/* NEW: Pro variant with sticky header & hover */
.table.pro thead th{
  position:sticky; top:0; z-index:1;
  background:linear-gradient(180deg,#f7fbff 0%, #f2f8ff 100%);
  border-bottom:1px solid var(--neutral-200);
}
.table.pro tbody tr:nth-child(odd){ background:#fcfeff }
.table.pro tbody tr:hover{ background:#f8fbff }
.table--compact th,.table--compact td{ padding:.5rem .6rem }

/* ------------------------------
   Stepper & Timelines
---------------------------------*/
.stepper{display:flex; gap:1.25rem; align-items:center; flex-wrap:wrap}
.step{display:flex; align-items:center; gap:.6rem; position:relative; padding-right:.5rem}
.step .dot{
  width:30px; height:30px; border-radius:999px; background:var(--neutral-300); color:#fff;
  display:grid; place-items:center; font-weight:800; box-shadow:var(--shadow-card)
}
.step .dot.active{background:var(--brand-700)}
.step + .step::before{
  content:""; position:absolute; left:-.6rem; top:50%; transform:translateY(-50%);
  width:1.25rem; height:2px; background:linear-gradient(90deg, var(--neutral-200), var(--brand-050));
}

/* Default vertical timeline (with shared x-position var for perfect alignment) */
.timeline{ position:relative; --tl-x:2.4rem; padding-left:calc(var(--tl-x) + 1.5rem) }
.timeline:before{ content:""; position:absolute; left:var(--tl-x); top:.25rem; bottom:.25rem; width:2px; background:var(--neutral-300) }
.t-item{ position:relative; margin:0 0 1.35rem 0 }
.t-item .dot{ position:absolute; left:var(--tl-x); top:.35rem; width:16px; height:16px; border-radius:50%; background:var(--brand-700); transform:translateX(-50%); box-shadow:0 0 0 4px #fff; z-index:1 }
.t-item .content{ margin-left:calc(var(--tl-x) + 1.5rem) }
.t-item h3{ margin:0 0 .25rem 0; font-size:1.1rem }
.t-item p{ margin:0; color:var(--neutral-600) }

/* NEW: Pro timeline (vertical -> horizontal) */
.timeline.pro{ position:relative; padding-left:5rem }
.timeline.pro::before{
  content:""; position:absolute; left:2.4rem; top:.25rem; bottom:.25rem;
  width:2px; background:linear-gradient(180deg,#dbeafe,#bbf7d0); border-radius:2px;
}
.t-item.pro{ position:relative; margin:0 0 1.25rem }
.t-item.pro .dot{
  position:absolute; left:2.4rem; top:.35rem; transform:translateX(-50%);
  width:18px; height:18px; border-radius:999px;
  background:linear-gradient(135deg,var(--brand-700),#1f51ff);
  box-shadow:0 0 0 4px #fff, 0 6px 16px rgba(31,81,255,.18);
}
.t-item.pro .content{ margin-left:4.1rem }
.t-item.pro .now{ display:inline-block; padding:.15rem .45rem; border-radius:.5rem; border:1px solid var(--neutral-200); background:#fff; font-size:.8rem }

@media (min-width:1100px){
  .timeline.pro{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; padding-left:0 }
  .timeline.pro::before{ display:none }
  .t-item.pro{ margin:0; padding-top:2rem; text-align:left }
  .t-item.pro .dot{ position:static; transform:none; margin-bottom:.4rem }
  .t-item.pro .content{ margin:0 }
}
@media (max-width: 640px){
  .timeline{ --tl-x:1.5rem; padding-left:calc(var(--tl-x) + 1.25rem) }
  .t-item .content{ margin-left:calc(var(--tl-x) + 1.25rem) }
}

/* Media slots */
.media-slot, .media-portrait, .media-wide{
  background:var(--neutral-100); border:1px solid var(--neutral-200); border-radius:var(--radius-xl);
  overflow:hidden; display:block; width:100%;
}
.media-slot{aspect-ratio:16/9}
.media-portrait{aspect-ratio:3/4}
.media-wide{aspect-ratio:21/9}
.media-slot > img, .media-portrait > img, .media-wide > img{width:100%; height:100%; object-fit:cover; display:block}

/* Utilities */
.container-narrow{max-width:56rem}
.stack > * + *{margin-top:var(--sp-4)}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4)}
.grid-3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--sp-4)}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3)}
@media (max-width: 960px){ .grid-3, .card-grid{grid-template-columns:1fr} }

/* ------------------------------
   Footer (dark, credible)
---------------------------------*/
.site-footer{margin-top:2rem;padding:2rem 0;border-top:1px solid var(--neutral-100);background:#0f172a;color:#e5e7eb}
.footer-grid{display:grid;gap:3rem;grid-template-columns:2.6fr 1fr 1fr 1fr;align-items:start;}
.footer-col h3{margin:.25rem 0 .5rem;font-size:1rem;color:#fff}
.list-plain{list-style:none;margin:0;padding:0}
.list-plain li{margin:.35rem 0}
.site-footer a{ color:#e5e7eb; text-decoration:none }
.site-footer a:hover{ color:#fff; text-decoration:underline }
.footer-brand .meta{margin:.5rem 0 1rem; color:#fff}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1rem;padding-top:1rem;border-top:1px solid rgba(255,255,255,.12);}
.back-to-top{text-decoration:none;font-weight:600}
@media (max-width:960px){ .footer-grid{grid-template-columns:1fr;}}

/* Footer brand: use white logo variant */
.site-footer .brand-badge{
  width:150px; height:34px;
  background:url('./favicon/logo-blue-white.png') left center/contain no-repeat;
}
@media (max-width:960px){ .site-footer .brand-badge{ width:140px; height:32px } }

/* Footer meta arrow sequence: desktop vs mobile */
.footer-seq-mobile{ display:none }
@media (max-width:640px){
  .site-footer .footer-seq-desktop{ display:none }
  .site-footer .footer-seq-mobile{ display:block; font-weight:600; color:#fff; margin-top:.15rem }
}

/* Footer CTAs */
.footer-ctas{ display:flex; flex-wrap:wrap; gap:2rem; margin-top:1rem }
.footer-ctas .btn{ flex:1 1 auto; text-align:center; min-width:200px }
.footer-ctas.stacked{ display:flex; flex-direction:column; gap:1rem; margin-top:1.25rem; max-width:420px }
.footer-ctas .eligibility-grid{ display:grid; gap:2rem; grid-template-columns:repeat(2, minmax(0, 1fr)); max-width:720px }
.footer-ctas .eligibility-grid .btn{
  width:100%; height:100%; min-height:56px;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:1rem 1.2rem; white-space:nowrap; border-radius:var(--radius-2xl);
  font-weight:600; box-shadow:var(--shadow-float); font-size:1rem;
}
@media (max-width:640px){ .footer-ctas .eligibility-grid{ grid-template-columns:1fr } }
.site-footer .footer-ctas .btn--gov    { background:linear-gradient(180deg,#1A6EB8,#145DA0); border-color:#145DA0; color:#fff }
.site-footer .footer-ctas .btn--gov:hover    { filter:brightness(1.03) }
.site-footer .footer-ctas .btn--dev    { background:linear-gradient(180deg,#12B886,#0F9D73); border-color:#0F9D73; color:#fff }
.site-footer .footer-ctas .btn--dev:hover    { filter:brightness(1.03) }
.site-footer .footer-ctas .btn--trader { background:linear-gradient(180deg,#8F70F8,#6E4AE8); border-color:#6E4AE8; color:#fff }
.site-footer .footer-ctas .btn--trader:hover { filter:brightness(1.03) }
.site-footer .footer-ctas .btn--buyer  { background:linear-gradient(180deg,#F59F00,#DB8E00); border-color:#DB8E00; color:#fff }
.site-footer .footer-ctas .btn--buyer:hover  { filter:brightness(1.03) }

/* Credibility footer utilities */
.site-footer .grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:1rem }
.site-footer .title{ font-weight:800; margin-bottom:.45rem; color:#fff }
.site-footer .trustbar{ margin-top:1rem; padding-top:.75rem; border-top:1px dashed rgba(255,255,255,.22); display:flex; gap:.75rem; flex-wrap:wrap; align-items:center }
.site-footer .trustbar img{ height:26px; opacity:.9; filter:grayscale(1) invert(1) }

/* ------------------------------
   Lists & icon bullets
---------------------------------*/
.list-check{list-style:none; padding-left:0}
.list-check li{position:relative; padding-left:1.6rem}
.list-check li::before{
  content:"✓"; position:absolute; left:0; top:.1rem; width:1rem; height:1rem;
  display:grid; place-items:center; color:#fff; background:var(--success-600);
  border-radius:.4rem; font-size:.8rem; line-height:1
}

/* ------------------------------
   Announce bar variant (urgent)
---------------------------------*/
.announce.warn{background:#FEF3C7; color:#92400E; border-bottom:1px solid #FDE68A}

/* ------------------------------
   Responsive & mobile nav
---------------------------------*/
@media (max-width: 1200px){
  .card-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 960px){
  .hero-grid{grid-template-columns:1fr}
  .card-grid{grid-template-columns:1fr}
  .nav{display:none}
  .nav-toggle{display:inline-flex}
  .dropdown:hover .dropdown-menu{display:none}
  .table{font-size:.96rem}
  .nav.open { display:block; }
  header.site-header .nav.open{ display:block !important }
}

/* Mobile safe-guards: prevent horizontal overflow and heavy fixed BG */
@media (max-width: 960px){
  html, body{ overflow-x:hidden; max-width:100%; }
  body{ background-attachment: scroll; }
}

/* Segmented controls: wrap on small screens to avoid overflow */
@media (max-width: 560px){
  .seg{ display:flex !important; flex-wrap:wrap; max-width:100%; }
  .seg button{ flex:1 1 auto; }
}

/* Mobile nav: drawer + light theme, dropdowns behave like accordions */
@media (max-width: 960px){
  :root{ --mnav-bg:#ffffff; --mnav-fg:#0b1530; --mnav-muted:#475569; }
  .navbar{ align-items:center; justify-content:space-between; gap:0 }
  /* Drawer panel */
  header.site-header .nav.open{
    position:fixed; top:var(--header-h,56px); left:0; right:0; bottom:0; width:auto;
    background:var(--mnav-bg); color:var(--mnav-fg);
    padding:var(--sp-3) var(--sp-3) var(--sp-4);
    overflow:auto; z-index:1000; border:0; box-shadow:none;
    min-height:calc(100vh - var(--header-h,56px));
  }
  body.mnav-lock{ overflow:hidden }
  /* Scrim behind drawer */
  .nav-scrim{ position:fixed; left:0; right:0; bottom:0; top:var(--header-h,56px); background:rgba(0,0,0,.45); z-index:40 }

  /* List presentation */
  .nav{ width:100%; flex-direction:column; gap:.25rem; padding:.25rem 0; margin:0 }
  .nav > li{ width:100% }
  .nav > li > a{ display:flex; align-items:center; justify-content:space-between; width:100%; color:var(--mnav-fg); padding:.85rem 1rem; border-radius:.6rem }
  .nav a:hover{ background:var(--brand-050); text-decoration:none }
  .nav .current{ background:var(--brand-050); color:var(--brand-800) }

  /* Accordion dropdowns */
  .nav .dropdown > a:after{ content:'▾'; opacity:.8 }
  .dropdown.open > a:after{ transform:rotate(180deg) }
  .dropdown-menu{ position:static; display:none; border:0; box-shadow:none; padding:.2rem 0 .35rem; background:transparent; min-width:0 }
  .dropdown.open .dropdown-menu{ display:block }
  .dropdown-menu a{ padding:.85rem 1rem; border-radius:.6rem; border:1px solid var(--neutral-100); background:#fff; color:var(--mnav-fg); margin:.2rem 0; width:100% }
  .dropdown-menu a:hover{ background:var(--brand-050) }
}

/* Burger/pancake icon on mobile */
@media (max-width:960px){
  .nav-toggle{
    width:44px; height:44px; padding:0; border:1px solid var(--neutral-200);
    border-radius:.65rem; background:#fff; position:relative; font-size:0;
    align-items:center; justify-content:center; box-shadow:var(--shadow-card);
  }
  /* Add some space from the right screen edge */
  .navbar .nav-toggle{ margin-right:.5rem }
  .nav-toggle::before{
    content:""; position:absolute; left:50%; top:50%; width:22px; height:2px;
    background:var(--brand-900); border-radius:2px; transform:translate(-50%,-50%);
    box-shadow:0 -6px 0 0 var(--brand-900), 0 6px 0 0 var(--brand-900);
  }
}

/* Home tiles: stack on mobile (override inline styles) */
@media (max-width: 1200px){
  .value-grid, .why-cards{ grid-template-columns:1fr 1fr !important; }
}
@media (max-width: 900px){
  .value-grid, .why-cards{ grid-template-columns:1fr !important; }
}

/* Home role tabs: 3x2 grid on mobile */
@media (max-width: 900px){
  .hero-home .seg{
    display:grid !important;
    width:100% !important;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    grid-auto-rows:48px;
    grid-auto-flow:row dense;
    gap:.5rem;
    padding:.5rem;
    border-radius:1rem;
    justify-items:stretch; align-items:stretch;
  }
  .hero-home .seg .role, .hero-home .seg button{
    width:100%; height:100%;
    min-width:0; /* allow text to fit within grid tracks */
    display:flex; align-items:center; justify-content:center;
    padding:.5rem .4rem; text-align:center;
    border:1px solid var(--neutral-200); border-radius:.75rem;
    background:#fff; font-weight:700;
  }
  .hero-home .seg .role[aria-pressed="true"], .hero-home .seg button[aria-pressed="true"]{
    background:var(--brand-050); color:var(--brand-800);
  }
}

/* ------------------------------
   Lead overlay (mail/contact panels)
   Standardize across pages so it doesn't fill laptop screens
---------------------------------*/
.lead-overlay{ position:fixed; inset:0; display:none; z-index:60 }
.lead-overlay.open{ display:block }
.lead-overlay .lead-backdrop{ position:absolute; inset:0; background:rgba(11,16,32,.55) }
.lead-overlay .lead-panel{
  position:fixed !important;
  top:24px !important; right:24px !important; bottom:24px !important; left:auto !important;
  width:min(720px, calc(100% - 48px)) !important;
  height:auto !important;
  background:#fff; box-shadow:var(--shadow-elev); border-left:1px solid var(--neutral-100);
  border-radius:1rem; padding:1rem 1.1rem; overflow:auto;
}
@media (max-width: 960px){
  .lead-overlay .lead-panel{
    top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
    width:100% !important; height:100% !important; border-radius:0;
  }
}

/* ------------------------------
   Print (for PDF/term sheets)
---------------------------------*/
@media print{
  header.site-header, .announce, .btn, .ribbon, .kicker{display:none !important}
  .split{padding:1rem 0; border:0; background:#fff}
  a{color:inherit; text-decoration:none}
}

/* ------------------------------
   BTR Outline: Stronger separation
   Scoped accents for section cards on btr-outline
---------------------------------*/
#tables .outline-vertical.luxe{ gap:1.6rem }
#tables .section-card{
  border-color:#E0ECF7;
  box-shadow:0 12px 36px rgba(15,23,42,.10);
  background:linear-gradient(180deg,#FFFFFF 0%, #F9FBFF 100%);
  position:relative;
}
#tables .section-card::before{
  content:""; display:block; height:4px;
  background:linear-gradient(90deg, #1F7ABD, #12B886);
}
#tables .section-card::after{
  content:""; position:absolute; left:16px; top:12px; bottom:12px; width:2px;
  background:linear-gradient(180deg,#DBEAFE, #D3F9D8);
  opacity:.55; border-radius:2px; pointer-events:none;
}
#tables .outline-vertical.luxe li:nth-child(odd) .section-card{
  background:linear-gradient(180deg,#FFFFFF 0%, #F4F9FF 100%);
}
#tables .section-header{ padding:1.15rem 1.25rem .9rem }
#tables .section-body{ padding:1.1rem 1.25rem 1.25rem }

/* ------------------------------
   Alt tiers layout (kept)
---------------------------------*/
.tiers-alt{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem }
.tier-card{ background:#fff; border:1px solid var(--neutral-100); border-radius:var(--radius-2xl); box-shadow:var(--shadow-card); overflow:hidden }
.tier-head-alt{ padding:1rem 1.25rem; background:var(--grad-sky); border-bottom:1px solid var(--neutral-100) }
.tier-head-alt h3{ margin:0 0 .35rem 0; font-size:1.25rem; letter-spacing:.2px }
.tier-sub{display:flex; flex-wrap:wrap; gap:.5rem}
.pill{ display:inline-block; padding:.25rem .6rem; border-radius:.6rem; background:#fff; border:1px solid var(--neutral-100); font-size:.9rem }
.tier-features{margin:1rem 1.25rem 0 1.75rem}
.tier-cta{margin:1rem 1.25rem 1.25rem}
@media (max-width:1200px){ .tiers-alt{grid-template-columns:1fr 1fr} }
@media (max-width:960px){ .tiers-alt{grid-template-columns:1fr} }

/* ------------------------------
   Sovereign risk list
---------------------------------*/
.risk-list{ margin:.5rem 0 0 0; padding:0; list-style:none; display:grid; gap:.5rem }
.risk-list li{ position:relative; padding-left:1.4rem; line-height:1.5 }
.risk-list li::before{
  content:""; position:absolute; left:.2rem; top:.6rem; width:8px; height:8px; border-radius:50%; background:var(--brand-700)
}

/* ------------------------------
   Forms (walkthrough & tracker)
---------------------------------*/
.form label{ display:block; margin-bottom:.6rem; font-weight:600 }
.form input, .form select, .form textarea{
  width:100%; padding:.8rem .9rem; border:1px solid var(--neutral-200); border-radius:.75rem; font-size:var(--fs-md);
  background:#fff;
}
.form .actions{ margin-top:1rem }
.form-note{ font-size:.95rem; color:var(--neutral-600) }