/* ============================================================================
   KAIROS FINANCIAL — BRAND STYLESHEET  (kairos-brand.css)
   Link this on every marketing page:
     <link rel="stylesheet" href="kairos-brand.css">
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   Then build pages with the component classes below.
   ============================================================================ */

/* ---------- DESIGN TOKENS ---------- */
:root{
  --navy:#122a47;        /* primary brand */
  --navy-deep:#0e2138;   /* hero / dark sections */
  --gold:#c8a24a;        /* accent */
  --gold-deep:#b4892c;   /* accent hover / fine type */
  --cream:#faf7ef;       /* warm tint fills */
  --ink:#1f2733;         /* body text */
  --muted:#5b6675;       /* secondary text */
  --line:#e2e5ea;        /* hairline framing */
  --white:#ffffff;
  --maxw:1120px;
  --radius:14px;
  --font:'Inter','Segoe UI','Roboto',Helvetica,Arial,sans-serif;
}

/* ---------- BASE ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; font-family:var(--font); color:var(--ink); background:var(--white);
     line-height:1.6; -webkit-font-smoothing:antialiased;}
a{color:inherit; text-decoration:none;}
img{max-width:100%; display:block;}
h1,h2,h3{color:var(--navy); letter-spacing:-0.3px;}

/* ---------- LAYOUT HELPERS ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
.block{padding:84px 0;}
.alt{background:var(--cream);}
.eyebrow{font-size:12px; letter-spacing:4px; text-transform:uppercase; color:var(--gold); font-weight:700;}
.section-head{max-width:720px; margin-bottom:44px;}
.section-head h2{font-size:clamp(26px,3.4vw,36px); font-weight:700; margin:10px 0; }
.section-head p{color:var(--muted); font-size:16px; margin:0;}

/* ---------- BUTTONS ---------- */
.btn{display:inline-block; font-weight:600; font-size:14px; padding:11px 20px; border-radius:10px;
     border:1px solid transparent; cursor:pointer;
     transition:transform .12s, background .15s, color .15s, border-color .15s;}
.btn-gold{background:var(--gold); color:var(--navy);}
.btn-gold:hover{background:var(--gold-deep); transform:translateY(-1px);}
.btn-navy{background:var(--navy); color:var(--white);}
.btn-navy:hover{background:var(--navy-deep); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--white); border-color:rgba(255,255,255,0.35);}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold);}

/* ---------- NAV ---------- */
.nav{position:sticky; top:0; z-index:20; background:rgba(255,255,255,0.92);
     backdrop-filter:saturate(140%) blur(8px); border-bottom:1px solid var(--line);}
.nav .row{display:flex; align-items:center; justify-content:space-between; height:72px;}
.brand{display:flex; align-items:baseline; gap:8px; font-weight:800; letter-spacing:1px; color:var(--navy);}
.brand span{color:var(--gold); font-weight:700; font-size:12px; letter-spacing:3px; text-transform:uppercase;}
.nav nav{display:flex; align-items:center; gap:28px;}
.nav nav a{font-size:14px; font-weight:500; color:var(--muted); transition:color .15s;}
.nav nav a:hover{color:var(--navy);}
.nav .btn{padding:9px 18px;}

/* ---------- HERO ---------- */
.hero{position:relative; color:var(--white); overflow:hidden;
      background:radial-gradient(1200px 500px at 80% -10%, rgba(200,162,74,0.18), transparent 60%),
                 linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);}
.hero:after{content:""; position:absolute; left:0; right:0; bottom:0; height:3px;
            background:linear-gradient(90deg, transparent, var(--gold), transparent);}
.hero .wrap{padding:84px 24px 92px;}
.hero .eyebrow{margin-bottom:18px;}
.hero h1{color:var(--white); font-size:clamp(34px,5vw,56px); line-height:1.08; font-weight:800;
         letter-spacing:-0.5px; margin:0 0 18px; max-width:18ch;}
.hero h1 .accent, .accent{color:var(--gold);}
.hero p.lead{font-size:clamp(16px,2vw,19px); color:#c9d4e2; max-width:60ch; margin:0 0 30px;}
.cta-row{display:flex; gap:14px; flex-wrap:wrap;}

/* ---------- STAT STRIP ---------- */
.stats{background:var(--cream); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.stats .grid{display:grid; grid-template-columns:repeat(4,1fr);}
.stats .cell{padding:26px 18px; text-align:center; border-right:1px solid var(--line);}
.stats .cell:last-child{border-right:none;}
.stats .num{font-size:26px; font-weight:800; color:var(--navy); letter-spacing:-0.5px;}
.stats .lbl{font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted); margin-top:4px;}

/* ---------- LADDER / STEPPED LIST (signature) ---------- */
.ladder{display:flex; flex-direction:column; gap:14px;}
.step{display:flex; align-items:center; gap:22px; background:var(--white);
      border:1px solid var(--line); border-left:4px solid var(--gold);
      border-radius:0 12px 12px 0; padding:20px 26px; transition:transform .15s, box-shadow .15s;}
.step:hover{transform:translateX(4px); box-shadow:0 12px 28px -16px rgba(18,42,71,0.25);}
.step .rank{font-size:13px; font-weight:700; color:var(--gold); width:30px; flex:none;}
.step .name{font-size:18px; font-weight:700; color:var(--navy); flex:1; min-width:160px;}
.step .note{font-size:14px; color:var(--muted); flex:2; min-width:200px;}
.step .pays{font-size:22px; font-weight:800; color:var(--navy); width:90px; text-align:right; flex:none;}
.step .pays small{display:block; font-size:11px; font-weight:600; color:var(--muted); letter-spacing:1px; text-transform:uppercase;}
.topbar{background:var(--navy); color:var(--white); border-radius:12px; padding:18px 24px; font-size:15px;}
.topbar b{color:var(--gold);}

/* ---------- CARDS ---------- */
.value-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
.vcard{background:var(--white); border:1px solid var(--line); border-radius:var(--radius); padding:28px;}
.vcard .mark{width:42px; height:42px; border-radius:10px; background:var(--cream); border:1px solid var(--line);
             display:flex; align-items:center; justify-content:center; color:var(--gold); font-weight:800; margin-bottom:16px;}
.vcard h3{font-size:18px; margin:0 0 8px; font-weight:700;}
.vcard p{font-size:15px; color:var(--muted); margin:0;}

/* ---------- CALLOUT (cream/gold accent panel) ---------- */
.callout{border-left:4px solid var(--gold); background:var(--cream); border-radius:0 8px 8px 0;
         padding:16px 20px; font-size:14px; color:var(--ink);}

/* ---------- DATA TABLE (reserve for true tabular data) ---------- */
.data-table{width:100%; border-collapse:collapse; font-size:14px;}
.data-table th{background:var(--navy); color:var(--white); font-weight:600; text-align:center;
               padding:12px 14px; border:1px solid var(--navy);}
.data-table th.l{text-align:left;}
.data-table td{padding:14px; border:1px solid var(--line); color:var(--ink); text-align:center;}
.data-table td.l{text-align:left;}
.data-table tr:nth-child(even) td{background:var(--cream);}
.data-table .pct{color:var(--gold); font-weight:600;}

/* ---------- CTA BAND ---------- */
.ctaband{color:var(--white); text-align:center;
         background:linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);}
.ctaband .wrap{padding:72px 24px;}
.ctaband h2{color:var(--white); font-size:clamp(26px,3.6vw,38px); font-weight:800; margin:0 0 12px;}
.ctaband p{color:#c9d4e2; max-width:54ch; margin:0 auto 26px; font-size:16px;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--navy-deep); color:#aebcce; font-size:14px;}
.site-footer .wrap{padding:48px 24px 30px;}
.site-footer .ftop{display:flex; justify-content:space-between; gap:30px; flex-wrap:wrap; margin-bottom:28px;}
.site-footer .brand{color:var(--white);}
.site-footer nav{display:flex; gap:26px; flex-wrap:wrap;}
.site-footer nav a{color:#aebcce; transition:color .15s;}
.site-footer nav a:hover{color:var(--gold);}
.site-footer .fine{border-top:1px solid rgba(255,255,255,0.12); padding-top:20px; font-size:12px; color:#7d8da2; line-height:1.7;}

/* ---------- RESPONSIVE ---------- */
@media (max-width:860px){
  .nav nav{display:none;}
  .stats .grid{grid-template-columns:repeat(2,1fr);}
  .stats .cell:nth-child(2){border-right:none;}
  .stats .cell:nth-child(1), .stats .cell:nth-child(2){border-bottom:1px solid var(--line);}
  .value-grid{grid-template-columns:1fr;}
  .step{flex-wrap:wrap; gap:8px 18px;}
  .step .pays{text-align:left;}
  .block{padding:60px 0;}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; scroll-behavior:auto!important;} }
:focus-visible{outline:2px solid var(--gold); outline-offset:2px; border-radius:4px;}