:root{
    --navy:#0A1C36;
    --navy-2:#102748;
    --ink:#0F0F14;
    --bone:#F5EFE0;
    --bone-2:#EAE2CC;
    --paper:#FDFAF2;
    --gold:#D4A84B;
    --gold-dk:#A8822F;
    --wa:#25D366;
    --wa-dk:#128C7E;
    --mint:#1FB871;
    --rule:rgba(15,15,20,0.1);
    --rule-d:rgba(245,239,224,0.12);
  }

  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:"Inter",sans-serif;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    overflow-x:hidden;
    line-height:1.5;
  }

  /* =========== STICKY MOBILE CTA BAR (the secret weapon) =========== */
  .sticky-cta{
    position:fixed;
    bottom:0;left:0;right:0;
    background:var(--wa);
    color:#fff;
    padding:14px 20px;
    display:none;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    font-weight:500;
    font-size:14px;
    z-index:200;
    box-shadow:0 -4px 20px rgba(0,0,0,0.15);
    text-decoration:none;
  }
  .sticky-cta .wa-icon{
    width:24px;height:24px;
    background:#fff;
    color:var(--wa-dk);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13px;
    flex-shrink:0;
  }
  .sticky-cta .arrow{
    background:rgba(255,255,255,0.2);
    padding:8px 14px;
    border-radius:6px;
    font-weight:600;
    font-size:13px;
  }
  @media(max-width:900px){
    .sticky-cta{display:flex}
    body{padding-bottom:60px}
  }

  /* =========== NAV =========== */
  nav{
    position:fixed;top:0;left:0;right:0;
    padding:18px 40px;
    z-index:100;
    display:flex;justify-content:space-between;align-items:center;
    background:rgba(253,250,242,0.9);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    border-bottom:1px solid var(--rule);
    box-sizing:border-box;
    width:100%;
  }
  /* On inner pages (those with a navy page-hero), nav flips to dark mode */
  body.has-dark-hero nav{
    background:rgba(10,28,54,0.92);
    border-bottom-color:rgba(245,239,224,0.1);
  }
  body.has-dark-hero .logo{color:var(--bone)}
  body.has-dark-hero .logo::before{background:var(--gold)}
  body.has-dark-hero .nav-links a{color:var(--bone)}
  body.has-dark-hero .nav-links a:hover{color:var(--gold)}
  .logo{
    font-family:"Fraunces",serif;
    font-weight:500;
    font-size:22px;
    letter-spacing:-0.02em;
    color:var(--navy);
    text-decoration:none;
    display:flex;align-items:center;gap:8px;
  }
  .logo::before{
    content:"";
    width:10px;height:10px;
    background:var(--gold);
    border-radius:50%;
    display:inline-block;
  }
  .nav-links{
    display:flex;gap:32px;list-style:none;
  }
  .nav-links a{
    color:var(--navy);
    text-decoration:none;
    font-size:14px;
    font-weight:500;
  }
  .nav-links a:hover{color:var(--gold-dk)}

  .nav-cta{
    background:var(--wa);
    color:#fff;
    padding:10px 18px;
    border-radius:6px;
    text-decoration:none;
    font-size:14px;
    font-weight:600;
    display:flex;align-items:center;gap:8px;
    transition:background .2s;
  }
  .nav-cta:hover{background:var(--wa-dk)}
  .nav-cta::before{
    content:"";
    width:8px;height:8px;
    background:#fff;
    border-radius:50%;
    animation:pulse 1.8s ease-in-out infinite;
  }
  @keyframes pulse{
    0%,100%{opacity:1;transform:scale(1)}
    50%{opacity:.6;transform:scale(1.3)}
  }

  @media(max-width:900px){
    nav{padding:14px 20px}
    .nav-links{display:none}
    .logo{font-size:18px}
    .nav-cta{padding:8px 14px;font-size:12px}
  }

  /* =========== HERO — the sales engine =========== */
  .hero{
    padding:110px 40px 60px;
    max-width:1400px;
    margin:0 auto;
    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:60px;
    align-items:center;
    min-height:100vh;
    position:relative;
  }

  .hero-left{max-width:620px}

  .trust-pill{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--bone-2);
    color:var(--navy);
    padding:6px 14px;
    border-radius:100px;
    font-size:13px;
    font-weight:500;
    margin-bottom:24px;
  }
  .trust-pill .dot{
    width:6px;height:6px;
    background:var(--mint);
    border-radius:50%;
    animation:pulse 2s ease-in-out infinite;
  }

  .hero h1{
    font-family:"Fraunces",serif;
    font-weight:400;
    font-size:clamp(44px, 6vw, 76px);
    line-height:1.02;
    letter-spacing:-0.025em;
    color:var(--navy);
    margin-bottom:20px;
  }
  .hero h1 em{
    font-style:italic;
    color:var(--gold-dk);
    font-weight:500;
  }
  .hero h1 .highlight{
    position:relative;
    display:inline-block;
  }
  .hero h1 .highlight::after{
    content:"";
    position:absolute;
    left:-4px;right:-4px;bottom:4px;
    height:14px;
    background:var(--gold);
    opacity:0.35;
    z-index:-1;
    transform:skew(-2deg);
  }

  .hero-sub{
    font-size:19px;
    line-height:1.55;
    color:#3a3a44;
    margin-bottom:12px;
    max-width:540px;
  }
  .hero-sw{
    font-family:"Fraunces",serif;
    font-style:italic;
    font-size:16px;
    color:#6a6a72;
    margin-bottom:32px;
  }

  /* The three proof chips right under the headline */
  .proof-row{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
    margin-bottom:32px;
  }
  .proof{
    background:#fff;
    border:1px solid var(--rule);
    padding:12px 16px;
    border-radius:10px;
    display:flex;
    align-items:center;
    gap:10px;
    font-size:13px;
    font-weight:500;
    color:var(--navy);
  }
  .proof .ico{
    width:28px;height:28px;
    background:var(--bone-2);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    color:var(--gold-dk);
    flex-shrink:0;
  }
  .proof .ico svg{width:14px;height:14px}

  /* CTA */
  .cta-row{
    display:flex;
    gap:12px;
    align-items:center;
    margin-bottom:32px;
    flex-wrap:wrap;
  }
  .btn-wa{
    background:var(--wa);
    color:#fff;
    padding:18px 28px;
    border-radius:10px;
    text-decoration:none;
    font-weight:600;
    font-size:16px;
    display:inline-flex;align-items:center;gap:12px;
    transition:background .2s,transform .2s;
    box-shadow:0 4px 20px rgba(37,211,102,0.25);
  }
  .btn-wa:hover{background:var(--wa-dk);transform:translateY(-2px)}
  .btn-wa .wa-ico{
    width:20px;height:20px;
    background:#fff;
    color:var(--wa-dk);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:12px;
  }

  .btn-ghost{
    color:var(--navy);
    padding:18px 0;
    text-decoration:none;
    font-weight:500;
    font-size:15px;
    display:inline-flex;align-items:center;gap:8px;
    border-bottom:2px solid var(--navy);
    transition:color .2s,border-color .2s;
  }
  .btn-ghost:hover{color:var(--gold-dk);border-color:var(--gold-dk)}

  /* Live activity strip — SOCIAL PROOF IN MOTION */
  .live-strip{
    background:#fff;
    border:1px solid var(--rule);
    border-radius:10px;
    padding:14px 18px;
    display:flex;
    align-items:center;
    gap:14px;
    font-size:13px;
    overflow:hidden;
    position:relative;
  }
  .live-strip .live-dot{
    width:8px;height:8px;
    background:var(--mint);
    border-radius:50%;
    flex-shrink:0;
    animation:pulse 1.6s ease-in-out infinite;
  }
  .live-strip .live-label{
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--gold-dk);
    font-weight:500;
    flex-shrink:0;
  }
  .live-strip .live-msg{
    color:var(--navy);
    font-weight:500;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* =========== HERO RIGHT — THE BIKE & THE CALCULATOR =========== */
  .hero-right{
    position:relative;
  }

  .calc-card{
    background:var(--navy);
    color:var(--bone);
    border-radius:16px;
    padding:28px;
    position:relative;
    box-shadow:0 20px 60px rgba(10,28,54,0.25);
    overflow:hidden;
  }
  /* subtle grid pattern */
  .calc-card::before{
    content:"";
    position:absolute;inset:0;
    background-image:
      linear-gradient(rgba(245,239,224,0.04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(245,239,224,0.04) 1px, transparent 1px);
    background-size:32px 32px;
    pointer-events:none;
  }
  .calc-card > *{position:relative;z-index:1}

  .calc-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:20px;
    padding-bottom:16px;
    border-bottom:1px solid var(--rule-d);
  }
  .calc-title{
    font-size:13px;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--gold);
    font-weight:500;
    font-family:"JetBrains Mono",monospace;
  }
  .calc-badge{
    font-size:11px;
    color:var(--bone);
    opacity:.6;
    font-family:"JetBrains Mono",monospace;
  }

  .calc-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    margin-bottom:20px;
  }
  .tab{
    background:transparent;
    border:1px solid rgba(245,239,224,0.18);
    color:var(--bone);
    padding:12px;
    border-radius:8px;
    cursor:pointer;
    font-size:13px;
    font-weight:500;
    font-family:inherit;
    transition:all .2s;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
  }
  .tab:hover{border-color:var(--gold)}
  .tab.active{
    background:var(--gold);
    color:var(--navy);
    border-color:var(--gold);
    font-weight:600;
  }

  .bike-viz{
    background:linear-gradient(180deg, rgba(212,168,75,0.12), transparent);
    border-radius:10px;
    padding:24px;
    margin-bottom:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:140px;
  }
  .bike-viz svg{
    width:100%;
    max-width:220px;
    height:auto;
    transition:transform .4s;
  }

  .calc-field{
    margin-bottom:16px;
  }
  .calc-field label{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    margin-bottom:10px;
    color:var(--bone);
    opacity:.75;
    font-weight:500;
  }
  .calc-field label .val{
    color:var(--gold);
    opacity:1;
    font-family:"JetBrains Mono",monospace;
    font-weight:500;
  }
  .calc-field input[type=range]{
    -webkit-appearance:none;
    width:100%;
    height:4px;
    background:rgba(245,239,224,0.15);
    border-radius:2px;
    outline:none;
  }
  .calc-field input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:20px;height:20px;
    background:var(--gold);
    border-radius:50%;
    cursor:pointer;
    border:3px solid var(--navy);
    box-shadow:0 0 0 1px var(--gold);
  }
  .calc-field input[type=range]::-moz-range-thumb{
    width:20px;height:20px;
    background:var(--gold);
    border-radius:50%;
    cursor:pointer;
    border:3px solid var(--navy);
  }

  .freq-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }
  .freq-btn{
    background:transparent;
    border:1px solid rgba(245,239,224,0.18);
    color:var(--bone);
    padding:10px;
    border-radius:6px;
    cursor:pointer;
    font-size:12px;
    font-weight:500;
    font-family:inherit;
    transition:all .2s;
  }
  .freq-btn:hover{border-color:var(--gold)}
  .freq-btn.active{
    background:var(--bone);
    color:var(--navy);
    border-color:var(--bone);
  }

  .tenor-row{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
  }
  .tenor-btn{
    background:transparent;
    border:1px solid rgba(245,239,224,0.18);
    color:var(--bone);
    padding:10px 8px;
    border-radius:6px;
    cursor:pointer;
    font-size:12px;
    font-weight:500;
    font-family:inherit;
    transition:all .2s;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    line-height:1.1;
  }
  .tenor-btn small{
    font-size:10px;
    opacity:.7;
    font-weight:400;
    font-family:"JetBrains Mono",monospace;
  }
  .tenor-btn:hover{border-color:var(--gold)}
  .tenor-btn.active{
    background:var(--bone);
    color:var(--navy);
    border-color:var(--bone);
  }
  .tenor-btn.active small{opacity:.8}

  .rate-note{
    font-size:11px;
    color:var(--bone);
    opacity:.55;
    font-family:"JetBrains Mono",monospace;
    letter-spacing:0.05em;
    text-align:center;
    margin-top:10px;
    line-height:1.5;
  }
  .rate-note strong{
    color:var(--gold);
    opacity:1;
    font-weight:500;
  }

  .calc-result{
    background:rgba(212,168,75,0.1);
    border:1px solid rgba(212,168,75,0.3);
    border-radius:10px;
    padding:18px 20px;
    margin-top:20px;
  }
  .result-main{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    margin-bottom:10px;
  }
  .result-main .label{
    font-size:12px;
    color:var(--bone);
    opacity:.75;
    text-transform:uppercase;
    letter-spacing:0.08em;
  }
  .result-main .amt{
    font-family:"Fraunces",serif;
    font-size:32px;
    font-weight:500;
    color:var(--gold);
    letter-spacing:-0.02em;
  }
  .result-sub{
    display:flex;
    justify-content:space-between;
    font-size:12px;
    color:var(--bone);
    opacity:.6;
    font-family:"JetBrains Mono",monospace;
  }

  .calc-cta{
    display:block;
    width:100%;
    background:var(--wa);
    color:#fff;
    padding:14px;
    border:none;
    border-radius:8px;
    text-align:center;
    text-decoration:none;
    font-weight:600;
    font-size:15px;
    font-family:inherit;
    margin-top:16px;
    cursor:pointer;
    transition:background .2s;
  }
  .calc-cta:hover{background:var(--wa-dk)}
  .calc-cta small{
    display:block;
    font-size:11px;
    font-weight:400;
    opacity:.85;
    margin-top:2px;
  }

  /* =========== SECTION: How it works =========== */
  section.steps{
    padding:100px 40px;
    background:#fff;
    border-top:1px solid var(--rule);
  }
  .steps-inner{
    max-width:1200px;
    margin:0 auto;
  }
  .sec-label{
    font-family:"JetBrains Mono",monospace;
    font-size:11px;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--gold-dk);
    margin-bottom:16px;
    font-weight:500;
  }
  .sec-head{
    font-family:"Fraunces",serif;
    font-weight:400;
    font-size:clamp(32px,4vw,52px);
    line-height:1.05;
    letter-spacing:-0.02em;
    color:var(--navy);
    max-width:700px;
    margin-bottom:60px;
  }
  .sec-head em{font-style:italic;color:var(--gold-dk)}

  .steps-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
    counter-reset:step;
  }
  .step{
    background:var(--paper);
    border:1px solid var(--rule);
    border-radius:14px;
    padding:32px 28px;
    position:relative;
  }
  .step::before{
    counter-increment:step;
    content:"0" counter(step);
    position:absolute;
    top:-14px;left:24px;
    background:var(--gold);
    color:var(--navy);
    font-family:"JetBrains Mono",monospace;
    font-weight:500;
    font-size:13px;
    padding:4px 10px;
    border-radius:4px;
    letter-spacing:0.05em;
  }
  .step h3{
    font-family:"Fraunces",serif;
    font-weight:500;
    font-size:22px;
    color:var(--navy);
    margin:12px 0 10px;
    line-height:1.2;
  }
  .step p{
    font-size:14px;
    color:#4a4a54;
    line-height:1.6;
  }
  .step .time{
    display:inline-block;
    margin-top:12px;
    font-size:12px;
    font-family:"JetBrains Mono",monospace;
    color:var(--gold-dk);
    font-weight:500;
  }

  /* =========== SECTION: Proof (testimonials) =========== */
  section.proof-sec{
    padding:100px 40px;
    background:var(--navy);
    color:var(--bone);
  }
  .proof-inner{
    max-width:1200px;
    margin:0 auto;
  }
  .proof-sec .sec-label{color:var(--gold)}
  .proof-sec .sec-head{color:var(--bone)}
  .proof-sec .sec-head em{color:var(--gold)}

  .testi-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:20px;
    margin-bottom:60px;
  }
  .testi{
    background:var(--navy-2);
    border:1px solid var(--rule-d);
    border-radius:14px;
    padding:28px;
  }
  .testi .quote{
    font-family:"Fraunces",serif;
    font-size:18px;
    line-height:1.5;
    color:var(--bone);
    margin-bottom:20px;
  }
  .testi .quote::before{
    content:"\201C";
    font-size:40px;
    color:var(--gold);
    line-height:0;
    margin-right:4px;
    position:relative;
    top:12px;
  }
  .testi .who{
    display:flex;
    align-items:center;
    gap:12px;
    padding-top:16px;
    border-top:1px solid var(--rule-d);
  }
  .testi .avatar{
    width:40px;height:40px;
    background:var(--gold);
    color:var(--navy);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:600;
    font-size:14px;
  }
  .testi .name{
    font-weight:500;
    font-size:14px;
    color:var(--bone);
  }
  .testi .meta{
    font-size:12px;
    color:var(--bone);
    opacity:.55;
    font-family:"JetBrains Mono",monospace;
  }

  /* Stats band */
  .stats-band{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
    background:var(--navy-2);
    border:1px solid var(--rule-d);
    border-radius:14px;
    overflow:hidden;
  }
  .stat{
    padding:28px 24px;
    border-right:1px solid var(--rule-d);
    text-align:center;
  }
  .stat:last-child{border-right:none}
  .stat .num{
    font-family:"Fraunces",serif;
    font-size:40px;
    font-weight:500;
    color:var(--gold);
    letter-spacing:-0.02em;
    display:block;
    line-height:1;
    margin-bottom:8px;
  }
  .stat .lbl{
    font-size:12px;
    color:var(--bone);
    opacity:.65;
    text-transform:uppercase;
    letter-spacing:0.1em;
  }

  /* =========== SECTION: Objection crushers =========== */
  section.objections{
    padding:100px 40px;
    background:var(--paper);
  }
  .obj-inner{
    max-width:1000px;
    margin:0 auto;
  }
  .obj-list{
    margin-top:40px;
  }
  .obj{
    border-bottom:1px solid var(--rule);
    padding:24px 0;
    cursor:pointer;
  }
  .obj-q{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    font-family:"Fraunces",serif;
    font-size:22px;
    font-weight:400;
    color:var(--navy);
    letter-spacing:-0.01em;
  }
  .obj-q::after{
    content:"+";
    font-family:"Inter",sans-serif;
    font-size:24px;
    color:var(--gold-dk);
    font-weight:300;
    transition:transform .3s;
  }
  .obj.open .obj-q::after{transform:rotate(45deg)}
  .obj-a{
    max-height:0;
    overflow:hidden;
    transition:max-height .4s, padding .3s;
    font-size:15px;
    line-height:1.65;
    color:#3a3a44;
  }
  .obj.open .obj-a{
    max-height:300px;
    padding-top:16px;
  }

  /* =========== FINALE CTA =========== */
  section.finale{
    padding:120px 40px;
    background:var(--navy);
    color:var(--bone);
    text-align:center;
    position:relative;
    overflow:hidden;
  }
  .finale-inner{
    max-width:900px;
    margin:0 auto;
    position:relative;
    z-index:2;
  }
  .finale h2{
    font-family:"Fraunces",serif;
    font-weight:400;
    font-size:clamp(44px,6vw,80px);
    line-height:1;
    letter-spacing:-0.025em;
    color:var(--bone);
    margin-bottom:20px;
  }
  .finale h2 em{
    font-style:italic;
    color:var(--gold);
  }
  .finale .sw-line{
    font-family:"Fraunces",serif;
    font-style:italic;
    font-size:18px;
    color:var(--bone);
    opacity:.6;
    margin-bottom:40px;
  }
  .finale-cta{
    display:flex;
    gap:16px;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
  }
  .finale-phone{
    font-family:"JetBrains Mono",monospace;
    font-size:13px;
    color:var(--bone);
    opacity:.55;
    margin-top:32px;
    letter-spacing:0.1em;
  }

  /* Footer */
  footer{
    padding:40px;
    background:var(--navy);
    border-top:1px solid var(--rule-d);
    color:var(--bone);
  }
  .foot-inner{
    max-width:1200px;
    margin:0 auto;
    display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px;
  }
  .foot-col h4{
    font-family:"JetBrains Mono",monospace;
    font-size:11px;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gold);
    margin-bottom:14px;
    font-weight:500;
  }
  .foot-col a,.foot-col p{
    display:block;
    color:var(--bone);
    opacity:.7;
    text-decoration:none;
    font-size:13px;
    line-height:2;
  }
  .foot-col a:hover{opacity:1;color:var(--gold)}

  .contact-block{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .contact-line{
    display:flex !important;
    align-items:flex-start;
    gap:10px;
    text-decoration:none;
    color:var(--bone);
    opacity:.8;
    font-size:13px;
    line-height:1.45 !important;
    padding:2px 0;
    transition:color .2s, opacity .2s;
  }
  .contact-line:hover{
    opacity:1;
    color:var(--gold);
  }
  .contact-line.no-hover{cursor:default}
  .contact-line.no-hover:hover{opacity:.8;color:var(--bone)}
  .c-ico{
    width:16px;height:16px;
    flex-shrink:0;
    margin-top:2px;
    color:var(--gold);
    opacity:.85;
  }
  .c-ico svg{width:100%;height:100%}
  .foot-legal{
    max-width:1200px;margin:40px auto 0;
    padding-top:24px;
    border-top:1px solid var(--rule-d);
    font-size:11px;
    color:var(--bone);
    opacity:.5;
    display:flex;
    justify-content:space-between;
    font-family:"JetBrains Mono",monospace;
    letter-spacing:0.08em;
  }

  /* =========== QUOTE MODAL =========== */
  .modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(10,28,54,0.55);
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
    z-index:300;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    opacity:0;
    pointer-events:none;
    transition:opacity .25s;
  }
  .modal-overlay.open{
    opacity:1;
    pointer-events:auto;
  }
  .modal{
    background:var(--paper);
    border-radius:16px;
    width:100%;
    max-width:440px;
    padding:32px;
    position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,0.4);
    transform:translateY(20px);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .modal-overlay.open .modal{transform:translateY(0)}

  .modal-close{
    position:absolute;
    top:14px;right:14px;
    background:none;
    border:none;
    width:32px;height:32px;
    border-radius:50%;
    font-size:22px;
    color:var(--navy);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .2s;
    font-family:inherit;
  }
  .modal-close:hover{background:var(--bone-2)}

  .modal-label{
    font-family:"JetBrains Mono",monospace;
    font-size:10px;
    letter-spacing:0.25em;
    text-transform:uppercase;
    color:var(--gold-dk);
    font-weight:500;
    margin-bottom:12px;
  }
  .modal h3{
    font-family:"Fraunces",serif;
    font-weight:500;
    font-size:26px;
    line-height:1.15;
    color:var(--navy);
    margin-bottom:8px;
    letter-spacing:-0.01em;
  }
  .modal h3 em{
    font-style:italic;
    color:var(--gold-dk);
  }
  .modal p{
    font-size:14px;
    color:#4a4a54;
    margin-bottom:24px;
    line-height:1.55;
  }

  .quote-summary{
    background:var(--bone-2);
    border-radius:10px;
    padding:14px 16px;
    margin-bottom:20px;
    font-size:13px;
    display:flex;
    justify-content:space-between;
    align-items:center;
  }
  .quote-summary .qs-left{
    color:var(--navy);
    line-height:1.4;
  }
  .quote-summary .qs-left strong{
    display:block;
    font-family:"Fraunces",serif;
    font-size:17px;
    font-weight:500;
    color:var(--gold-dk);
  }
  .quote-summary .qs-right{
    font-size:11px;
    color:#6a6a72;
    font-family:"JetBrains Mono",monospace;
    text-align:right;
    line-height:1.4;
  }

  .field{
    margin-bottom:16px;
  }
  .field label{
    display:block;
    font-size:12px;
    font-weight:500;
    color:var(--navy);
    margin-bottom:6px;
    letter-spacing:0.02em;
  }
  .field input{
    width:100%;
    border:1px solid var(--rule);
    border-radius:8px;
    padding:12px 14px;
    font-size:15px;
    font-family:inherit;
    color:var(--navy);
    background:#fff;
    transition:border-color .2s, box-shadow .2s;
  }
  .field input:focus{
    outline:none;
    border-color:var(--gold);
    box-shadow:0 0 0 3px rgba(212,168,75,0.15);
  }
  .field input.error{
    border-color:#e54d4d;
    box-shadow:0 0 0 3px rgba(229,77,77,0.12);
  }
  .field .err{
    font-size:12px;
    color:#c43434;
    margin-top:5px;
    display:none;
  }
  .field.err-on .err{display:block}

  .modal-submit{
    width:100%;
    background:var(--wa);
    color:#fff;
    border:none;
    padding:16px;
    border-radius:10px;
    font-size:15px;
    font-weight:600;
    font-family:inherit;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    transition:background .2s, transform .15s;
    margin-top:4px;
  }
  .modal-submit:hover{background:var(--wa-dk)}
  .modal-submit:active{transform:scale(0.98)}
  .modal-submit .wa-ico{
    width:20px;height:20px;
    background:#fff;
    color:var(--wa-dk);
    border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    font-weight:700;
    font-size:12px;
  }

  .modal-privacy{
    font-size:11px;
    color:#6a6a72;
    text-align:center;
    margin-top:14px;
    line-height:1.55;
  }
  .modal-privacy a{color:var(--gold-dk)}

  @media(max-width:900px){
    .modal{padding:24px 22px}
    .modal h3{font-size:22px}
    .quote-summary{flex-direction:column;align-items:flex-start;gap:8px}
    .quote-summary .qs-right{text-align:left}
  }
  @media(max-width:900px){
    .hero{
      padding:90px 20px 40px;
      grid-template-columns:1fr;
      gap:32px;
      min-height:auto;
    }
    .hero h1{font-size:40px}
    .hero-sub{font-size:16px}
    section.steps,section.proof-sec,section.objections,section.finale{padding:60px 20px}
    .steps-grid{grid-template-columns:1fr;gap:16px}
    .testi-grid{grid-template-columns:1fr}
    .stats-band{grid-template-columns:1fr 1fr}
    .stat{border-right:none;border-bottom:1px solid var(--rule-d)}
    .stat:nth-child(2){border-right:none}
    .foot-inner{grid-template-columns:1fr 1fr;gap:24px}
    .foot-legal{flex-direction:column;gap:8px;text-align:left}
    .calc-card{padding:20px}
    .result-main .amt{font-size:26px}
    footer{padding:40px 20px}
  }
/* =========================================================================
   INNER PAGE TEMPLATES — shared layout
   ========================================================================= */

.page-hero{
  padding:140px 40px 60px;
  background:var(--navy);
  color:var(--bone);
  border-bottom:1px solid var(--rule-d);
  position:relative;
  overflow:hidden;
  box-sizing:border-box;
  width:100%;
}
.page-hero::before{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(245,239,224,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,239,224,0.03) 1px, transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}
.page-hero-inner{
  max-width:1100px;
  margin:0 auto;
  position:relative;
  z-index:1;
  box-sizing:border-box;
  width:100%;
}
.page-hero .sec-label{color:var(--gold);margin-bottom:20px;font-size:11px;font-family:"JetBrains Mono",monospace;letter-spacing:0.25em;text-transform:uppercase;font-weight:500;display:flex;align-items:center;gap:14px}
.page-hero .sec-label::before{content:"";width:36px;height:1px;background:var(--gold)}
.page-hero h1{
  font-family:"Fraunces",serif;
  font-weight:400;
  font-size:clamp(44px,6vw,76px);
  line-height:1.02;
  letter-spacing:-0.025em;
  color:var(--bone);
  margin-bottom:20px;
  max-width:900px;
}
.page-hero h1 em{
  font-style:italic;
  color:var(--gold);
  font-weight:500;
}
.page-hero .lead{
  font-size:19px;
  line-height:1.55;
  color:var(--bone);
  opacity:.78;
  max-width:720px;
}
.page-hero .lead-sw{
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:16px;
  color:var(--gold);
  opacity:.85;
  margin-top:12px;
}

.breadcrumb{
  display:flex;
  gap:10px;
  align-items:center;
  font-size:12px;
  color:var(--bone);
  opacity:.55;
  margin-bottom:28px;
  font-family:"JetBrains Mono",monospace;
  letter-spacing:0.08em;
  text-transform:uppercase;
}
.breadcrumb a{color:var(--bone);text-decoration:none;opacity:.65}
.breadcrumb a:hover{color:var(--gold);opacity:1}
.breadcrumb .sep{opacity:.35}

.page-body{
  padding:80px 40px;
  max-width:1100px;
  margin:0 auto;
  box-sizing:border-box;
  width:100%;
}
.page-body.narrow{max-width:820px}

/* Also protect page-hero-inner and other fixed-width wrappers */
.page-hero-inner{
  box-sizing:border-box;
}

.prose{
  font-size:17px;
  line-height:1.7;
  color:#2a2a34;
}
.prose h2{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-size:32px;
  line-height:1.15;
  color:var(--navy);
  margin:48px 0 16px;
  letter-spacing:-0.02em;
}
.prose h2:first-child{margin-top:0}
.prose h2 em{font-style:italic;color:var(--gold-dk);font-weight:400}
.prose h3{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-size:22px;
  line-height:1.2;
  color:var(--navy);
  margin:32px 0 12px;
  letter-spacing:-0.01em;
}
.prose h4{
  font-weight:600;
  font-size:15px;
  color:var(--navy);
  margin:24px 0 8px;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.prose p{margin-bottom:18px}
.prose ul,.prose ol{margin:12px 0 20px 22px}
.prose li{margin-bottom:8px}
.prose strong{font-weight:600;color:var(--navy)}
.prose a{color:var(--gold-dk);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{color:var(--navy)}
.prose blockquote{
  border-left:3px solid var(--gold);
  padding:8px 0 8px 20px;
  margin:24px 0;
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:18px;
  color:#3a3a44;
}

.callout{
  background:var(--bone-2);
  border-left:3px solid var(--gold);
  padding:20px 24px;
  margin:28px 0;
  border-radius:0 8px 8px 0;
  font-size:15px;
  line-height:1.65;
  color:#2a2a34;
}
.callout .callout-label{
  display:block;
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:var(--gold-dk);
  margin-bottom:8px;
  font-weight:500;
}

.review-banner{
  background:#FFF4DE;
  border:1px solid #E8C678;
  padding:14px 20px;
  border-radius:8px;
  font-size:13px;
  color:#5a3e0a;
  margin-bottom:32px;
  display:flex;
  align-items:center;
  gap:12px;
}
.review-banner .rb-ico{
  width:20px;height:20px;
  flex-shrink:0;
  color:#A8822F;
}
.review-banner strong{color:#3a2905;font-weight:600}

.prose table,
.data-table{
  width:100%;
  border-collapse:collapse;
  margin:24px 0;
  font-size:14px;
}
.prose table th,
.prose table td,
.data-table th,
.data-table td{
  border:1px solid var(--rule);
  padding:12px 14px;
  text-align:left;
  vertical-align:top;
  word-wrap:break-word;
  overflow-wrap:break-word;
}
.prose table th,
.data-table th{
  background:var(--navy);
  color:var(--bone);
  font-weight:500;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.06em;
}
.prose table tr:nth-child(even) td,
.data-table tr:nth-child(even) td{
  background:var(--paper);
}

/* Dealer directory cards */
.dealer-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:16px;
  margin:32px 0;
}
.dealer-card{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:12px;
  padding:22px;
  transition:border-color .2s, transform .2s;
}
.dealer-card:hover{
  border-color:var(--gold);
  transform:translateY(-2px);
}
.dealer-card h3{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-size:19px;
  margin-bottom:4px;
  color:var(--navy);
}
.dealer-card .region{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  color:var(--gold-dk);
  font-weight:500;
  margin-bottom:14px;
}
.dealer-card .detail{
  font-size:13px;
  line-height:1.6;
  color:#4a4a54;
  margin-bottom:4px;
  display:flex;
  gap:8px;
  align-items:flex-start;
}
.dealer-card .detail svg{
  width:14px;height:14px;
  flex-shrink:0;
  color:var(--gold-dk);
  margin-top:2px;
}
.dealer-card .stock{
  display:inline-flex;
  gap:4px;
  margin-top:12px;
  padding-top:12px;
  border-top:1px dashed var(--rule);
}
.dealer-card .tag{
  font-size:10px;
  background:var(--bone-2);
  color:var(--navy);
  padding:3px 8px;
  border-radius:4px;
  font-weight:500;
  letter-spacing:0.03em;
  text-transform:uppercase;
}

.region-filter{
  display:flex;
  gap:8px;
  margin:24px 0 32px;
  flex-wrap:wrap;
}
.region-btn{
  background:#fff;
  border:1px solid var(--rule);
  padding:8px 14px;
  border-radius:100px;
  font-size:13px;
  font-weight:500;
  cursor:pointer;
  color:var(--navy);
  font-family:inherit;
  transition:all .2s;
}
.region-btn:hover{border-color:var(--gold)}
.region-btn.active{
  background:var(--navy);
  color:#fff;
  border-color:var(--navy);
}

/* Forms for partner applications */
.mf-form{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:14px;
  padding:32px;
  margin:32px 0;
}
.mf-form h3{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-size:24px;
  color:var(--navy);
  margin-bottom:8px;
}
.mf-form .form-intro{
  font-size:14px;
  color:#4a4a54;
  margin-bottom:24px;
  line-height:1.6;
}
.mf-form .field{
  margin-bottom:18px;
}
.mf-form .field label{
  display:block;
  font-size:13px;
  font-weight:500;
  color:var(--navy);
  margin-bottom:6px;
}
.mf-form .field input,
.mf-form .field textarea,
.mf-form .field select{
  width:100%;
  border:1px solid var(--rule);
  border-radius:8px;
  padding:12px 14px;
  font-size:15px;
  font-family:inherit;
  color:var(--navy);
  background:#fff;
  transition:border-color .2s, box-shadow .2s;
}
.mf-form .field input:focus,
.mf-form .field textarea:focus,
.mf-form .field select:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(212,168,75,0.15);
}
.mf-form .field textarea{
  min-height:100px;
  resize:vertical;
}
.mf-form .field-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}
.mf-form .submit{
  background:var(--navy);
  color:#fff;
  border:none;
  padding:14px 28px;
  border-radius:8px;
  font-size:15px;
  font-weight:600;
  font-family:inherit;
  cursor:pointer;
  transition:background .2s;
}
.mf-form .submit:hover{background:#0E2748}
.mf-form .field .help{
  font-size:12px;
  color:#6a6a72;
  margin-top:5px;
  line-height:1.5;
}
.mf-form .success{
  background:#E8F6EE;
  border:1px solid #8FD3AD;
  color:#1F5A36;
  padding:16px 20px;
  border-radius:10px;
  margin-bottom:20px;
  font-size:14px;
}

/* Investor page - darker, editorial */
.investor-page{background:var(--navy);color:var(--bone)}
.investor-page .page-body{max-width:1100px}
.investor-page .prose{color:rgba(245,239,224,0.85)}
.investor-page .prose h2{color:var(--bone)}
.investor-page .prose h2 em{color:var(--gold)}
.investor-page .prose h3{color:var(--bone)}
.investor-page .prose h4{color:var(--gold)}
.investor-page .prose strong{color:var(--bone)}
.investor-page .prose a{color:var(--gold-2)}
.investor-page .prose blockquote{color:rgba(245,239,224,0.75)}
.investor-page .callout{
  background:var(--navy-2);
  color:var(--bone);
  border-left-color:var(--gold);
  border-radius:0 8px 8px 0;
}
.investor-page .callout .callout-label{color:var(--gold)}
.investor-page .prose table th,
.investor-page .data-table th{background:#000;border-color:var(--rule-d)}
.investor-page .prose table td,
.investor-page .data-table td{
  border-color:var(--rule-d);
  color:rgba(245,239,224,0.85);
}
.investor-page .prose table tr:nth-child(even) td,
.investor-page .data-table tr:nth-child(even) td{background:var(--navy-2)}

/* Large paybill for Pay My Loan */
.paybill-card{
  background:var(--navy);
  color:var(--bone);
  border-radius:16px;
  padding:36px;
  margin:32px 0;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.paybill-card::before{
  content:"";
  position:absolute;inset:0;
  background:radial-gradient(circle at top right, rgba(212,168,75,0.15), transparent 60%);
  pointer-events:none;
}
.paybill-card > *{position:relative}
.paybill-label{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:16px;
  font-weight:500;
}
.paybill-num{
  font-family:"Fraunces",serif;
  font-weight:400;
  font-size:clamp(48px,8vw,96px);
  letter-spacing:0.02em;
  color:var(--bone);
  line-height:1;
  margin:8px 0 16px;
}
.paybill-sub{
  font-size:15px;
  color:var(--bone);
  opacity:.7;
  max-width:440px;
  margin:0 auto;
  line-height:1.55;
}

/* CTA block at bottom of pages */
.page-cta{
  background:var(--bone-2);
  padding:48px;
  border-radius:16px;
  margin:60px 0 0;
  text-align:center;
}
.page-cta h3{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-size:28px;
  color:var(--navy);
  margin-bottom:12px;
  letter-spacing:-0.015em;
}
.page-cta h3 em{font-style:italic;color:var(--gold-dk)}
.page-cta p{
  font-size:15px;
  color:#4a4a54;
  margin-bottom:24px;
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.6;
}
.page-cta .cta-row{justify-content:center;display:flex;gap:14px;flex-wrap:wrap}

@media (max-width:900px){
  .page-hero{padding:110px 20px 40px}
  .page-body{padding:50px 20px}
  .prose{font-size:16px}
  .prose h2{font-size:26px}
  .prose h3{font-size:19px}
  .mf-form{padding:22px}
  .mf-form .field-row{grid-template-columns:1fr}
  .paybill-card{padding:28px 20px}
  .page-cta{padding:32px 22px}
  .page-cta h3{font-size:22px}
  .dealer-grid{grid-template-columns:1fr}
}

/* =========================================================================
   MOBILE UX IMPROVEMENTS
   ========================================================================= */

/* Respect the user's motion preference. Anyone who has enabled
   reduced-motion at the OS level gets a still site. */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero-title .line span,.headline .line span{transform:none !important;animation:none !important}
  .live-strip .live-dot,.nav-cta::before,.trust-pill .dot,.sticky-cta .wa-icon{animation:none !important}
  .live-msg{transition:none !important}
}

/* Ticker layout on narrow screens — stop labels wrapping awkwardly */
@media (max-width:600px){
  .live-strip{
    flex-wrap:wrap;
    gap:8px 10px;
    padding:12px 14px;
  }
  .live-strip .live-label{
    order:1;
  }
  .live-strip .live-dot{
    order:0;
  }
  .live-strip .live-msg{
    order:2;
    flex:1 1 100%;
    white-space:normal;
    font-size:12.5px;
    line-height:1.45;
  }
}

/* Calculator — tighter rhythm on narrow screens, smaller bike illustration */
@media (max-width:600px){
  .calc-card{padding:18px 16px;border-radius:14px}
  .calc-head{margin-bottom:14px;padding-bottom:12px}
  .calc-title{font-size:12px}
  .calc-tabs{margin-bottom:14px}
  .tab{padding:10px;font-size:12px}
  .bike-viz{padding:14px;margin-bottom:14px;min-height:auto}
  .bike-viz svg{max-width:160px}
  .calc-field{margin-bottom:12px}
  .calc-field label{font-size:11.5px;margin-bottom:7px}
  .freq-btn,.tenor-btn{padding:9px 6px;font-size:11.5px}
  .tenor-btn small{font-size:9.5px}
  .calc-result{padding:14px 16px;margin-top:14px}
  .result-main .label{font-size:11px}
  .result-main .amt{font-size:24px}
  .result-sub{font-size:11px}
  .rate-note{font-size:10.5px;margin-top:8px}
  .calc-cta{padding:13px;font-size:14px;margin-top:14px}
  .calc-cta small{font-size:10.5px}
}

/* Hero proof chips wrap to a cleaner 2-col on narrow screens */
@media (max-width:600px){
  .proof-row{gap:8px}
  .proof{padding:10px 12px;font-size:12px;flex:1 1 calc(50% - 4px)}
  .proof .ico{width:24px;height:24px}
  .proof .ico svg{width:12px;height:12px}
}

/* Modal as a bottom-sheet on phones — slides up from bottom,
   feels native, easier to dismiss with a swipe */
@media (max-width:600px){
  .modal-overlay{
    align-items:flex-end;
    padding:0;
  }
  .modal{
    border-radius:20px 20px 0 0;
    max-width:100%;
    width:100%;
    padding:24px 22px 28px;
    max-height:92vh;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    transform:translateY(100%);
    transition:transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .modal-overlay.open .modal{
    transform:translateY(0);
  }
  .modal::before{
    content:"";
    display:block;
    width:40px;
    height:4px;
    background:#D8D0BE;
    border-radius:2px;
    margin:-8px auto 16px;
  }
  .modal h3{font-size:22px;padding-right:32px}
  .modal-close{top:10px;right:10px}
  .quote-summary{padding:12px 14px}
  .quote-summary .qs-left strong{font-size:15px}
}

/* Tables on narrow screens become stacked key-value pairs.
   Applies to .prose table and .data-table. */
@media (max-width:640px){
  .prose table,
  .data-table{
    border:none;
    font-size:14px;
  }
  .prose table thead,
  .data-table thead{
    position:absolute;
    left:-9999px;
    top:-9999px;
  }
  .prose table tr,
  .data-table tr{
    display:block;
    background:#fff;
    border:1px solid var(--rule);
    border-radius:10px;
    margin-bottom:10px;
    padding:6px 2px;
  }
  .prose table tr:nth-child(even) td,
  .data-table tr:nth-child(even) td{background:transparent}
  .prose table td,
  .data-table td{
    display:block;
    border:none;
    border-bottom:1px dashed var(--rule);
    padding:10px 14px;
    font-size:14px;
    line-height:1.5;
  }
  .prose table td:last-child,
  .data-table td:last-child{border-bottom:none}
  .prose table td:first-child,
  .data-table td:first-child{
    font-weight:600;
    color:var(--navy);
    padding-bottom:4px;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.04em;
  }
  /* On investor page (navy background) flip card colours */
  .investor-page .prose table tr,
  .investor-page .data-table tr{
    background:var(--navy-2);
    border-color:var(--rule-d);
  }
  .investor-page .prose table td,
  .investor-page .data-table td{
    border-bottom-color:var(--rule-d);
    color:rgba(245,239,224,0.9);
  }
  .investor-page .prose table td:first-child,
  .investor-page .data-table td:first-child{color:var(--gold)}
}

/* Slightly larger tap targets on nav for mobile */
@media (max-width:600px){
  nav{padding:12px 16px}
  .logo{font-size:17px}
  .logo::before{width:8px;height:8px}
  .nav-cta{padding:9px 13px;font-size:12px;border-radius:6px}
  .nav-cta::before{width:6px;height:6px}
}

/* Region filter chips on dealer page — wrap cleanly on narrow screens */
@media (max-width:600px){
  .region-filter{
    gap:6px;
    padding:4px 0;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    flex-wrap:nowrap;
    margin:16px -20px 24px;
    padding-left:20px;
    padding-right:20px;
    scrollbar-width:none;
  }
  .region-filter::-webkit-scrollbar{display:none}
  .region-btn{
    flex-shrink:0;
    padding:7px 13px;
    font-size:12.5px;
  }
}

/* Sticky mobile CTA — slightly smaller text, clearer tap target */
@media (max-width:600px){
  .sticky-cta{
    padding:12px 14px;
    font-size:13px;
    gap:10px;
  }
  .sticky-cta .wa-icon{width:22px;height:22px;font-size:12px}
  .sticky-cta .arrow{padding:6px 10px;font-size:12px}
  body{padding-bottom:56px}
}

/* Hero section — balance the main CTA row on phones */
@media (max-width:600px){
  .hero{padding:80px 18px 30px}
  .hero h1{font-size:36px;line-height:1.05;margin-bottom:16px}
  .hero-sub{font-size:15px}
  .hero-sw{font-size:14px;margin-bottom:24px}
  .trust-pill{font-size:12px;padding:5px 12px}
  .cta-row{flex-direction:column;align-items:stretch;gap:10px}
  .cta-row .btn-wa{justify-content:center;padding:15px 20px;font-size:15px}
  .cta-row .btn-ghost{text-align:center;padding:12px 0;font-size:14px}
}

/* Page hero tighter on phones */
@media (max-width:600px){
  .page-hero{padding:90px 18px 32px}
  .page-hero h1{font-size:34px;line-height:1.05}
  .page-hero .lead{font-size:16px}
  .page-hero .lead-sw{font-size:14px}
  .breadcrumb{font-size:10.5px;margin-bottom:20px}
}

/* Footer on phones */
@media (max-width:600px){
  .foot-inner{grid-template-columns:1fr;gap:28px}
  footer{padding:36px 18px 24px}
  .foot-col h4{margin-bottom:10px}
  .contact-line{font-size:13px}
}

/* =========================================================================
   CALCULATOR — input-first money fields
   ========================================================================= */
.calc-field.calc-money label{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  font-size:12px;
  margin-bottom:8px;
  color:var(--bone);
  opacity:.75;
  font-weight:500;
}
.calc-field.calc-money label .hint{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  letter-spacing:0.05em;
  color:var(--gold);
  opacity:.85;
  font-weight:400;
  text-transform:none;
}
.calc-field.calc-money .money-wrap{
  position:relative;
  display:flex;
  align-items:center;
  background:rgba(245,239,224,0.06);
  border:1px solid rgba(245,239,224,0.14);
  border-radius:10px;
  padding:2px 2px 2px 14px;
  transition:border-color .2s, background .2s;
}
.calc-field.calc-money .money-wrap:focus-within{
  border-color:var(--gold);
  background:rgba(212,168,75,0.06);
}
.calc-field.calc-money .money-wrap.shake{
  animation:mfShake .32s ease;
  border-color:#E57C4D;
}
@keyframes mfShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
.calc-field.calc-money .money-prefix{
  font-family:"JetBrains Mono",monospace;
  font-size:12px;
  color:var(--bone);
  opacity:.55;
  letter-spacing:0.06em;
  padding-right:8px;
  user-select:none;
}
.calc-field.calc-money input[type=text]{
  flex:1;
  background:transparent;
  border:none;
  outline:none;
  padding:12px 14px 12px 0;
  font-family:"Fraunces",serif;
  font-size:22px;
  font-weight:500;
  color:var(--gold);
  letter-spacing:-0.01em;
  font-feature-settings:"tnum";
  min-width:0;
  width:100%;
}
.calc-field.calc-money input[type=text]::placeholder{
  color:rgba(245,239,224,0.3);
}

/* Slider beneath the money input — thinner, secondary role */
.calc-field.calc-money .adjust-slider{
  -webkit-appearance:none;
  appearance:none;
  width:100%;
  height:3px;
  background:rgba(245,239,224,0.12);
  border-radius:2px;
  outline:none;
  margin-top:14px;
  cursor:pointer;
}
.calc-field.calc-money .adjust-slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:18px;height:18px;
  background:var(--gold);
  border-radius:50%;
  cursor:grab;
  border:3px solid var(--navy);
  box-shadow:0 0 0 1px var(--gold), 0 2px 6px rgba(0,0,0,0.3);
  transition:transform .15s;
}
.calc-field.calc-money .adjust-slider::-webkit-slider-thumb:active{
  cursor:grabbing;
  transform:scale(1.12);
}
.calc-field.calc-money .adjust-slider::-moz-range-thumb{
  width:18px;height:18px;
  background:var(--gold);
  border-radius:50%;
  cursor:grab;
  border:3px solid var(--navy);
}

@media(max-width:600px){
  .calc-field.calc-money input[type=text]{font-size:20px;padding:11px 12px 11px 0}
  .calc-field.calc-money .money-prefix{font-size:11px}
  .calc-field.calc-money label{font-size:11.5px}
  .calc-field.calc-money label .hint{font-size:9.5px}
}

/* =========================================================================
   "FROM KSh X PER DAY" — homepage hero price anchor
   ========================================================================= */
.from-price{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  margin:20px 0 6px;
  padding:10px 18px 10px 16px;
  background:var(--navy);
  color:var(--bone);
  border-radius:10px;
  box-shadow:0 6px 24px rgba(10,28,54,0.18);
  position:relative;
}
.from-price::before{
  content:"";
  position:absolute;
  top:-2px;left:-2px;right:-2px;bottom:-2px;
  background:linear-gradient(135deg, var(--gold) 0%, transparent 60%);
  border-radius:12px;
  z-index:-1;
  opacity:0.4;
}
.from-price .from-label{
  font-family:"JetBrains Mono",monospace;
  font-size:10px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--gold);
  font-weight:500;
  padding-top:4px;
}
.from-price .from-amt{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-size:34px;
  letter-spacing:-0.015em;
  color:var(--bone);
  line-height:1;
  font-feature-settings:"tnum";
}
.from-price .from-amt em{font-style:italic;color:var(--gold)}
.from-price .from-unit{
  font-size:13px;
  color:var(--bone);
  opacity:.75;
  font-weight:500;
  letter-spacing:0.02em;
}
.from-caveat{
  font-size:12px;
  color:#6a6a72;
  margin:4px 0 18px;
  line-height:1.5;
  max-width:520px;
  font-style:italic;
}

@media (max-width:600px){
  .from-price{padding:8px 14px 8px 12px;gap:8px;margin:14px 0 4px}
  .from-price .from-label{font-size:9.5px;padding-top:3px}
  .from-price .from-amt{font-size:28px}
  .from-price .from-unit{font-size:12px}
  .from-caveat{font-size:11px;margin-bottom:14px}
}

/* =========================================================================
   WHAT WE FINANCE — strip between hero and steps
   ========================================================================= */
.finance-strip{
  padding:56px 40px;
  background:var(--paper);
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.finance-inner{
  max-width:1200px;
  margin:0 auto;
}
.finance-label{
  font-family:"JetBrains Mono",monospace;
  font-size:11px;
  letter-spacing:0.25em;
  text-transform:uppercase;
  color:var(--gold-dk);
  margin-bottom:24px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:14px;
}
.finance-label::before{content:"";width:36px;height:1px;background:var(--gold-dk)}
.finance-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
}
.badge-coming{
  position:absolute;
  top:12px;
  right:12px;
  background:var(--gold);
  color:var(--navy);
  font-family:"JetBrains Mono",monospace;
  font-size:9px;
  letter-spacing:0.15em;
  text-transform:uppercase;
  padding:2px 7px;
  border-radius:4px;
  font-weight:600;
  z-index:2;
}

@media (max-width:600px){
  .finance-strip{padding:40px 20px}
  .finance-grid{grid-template-columns:1fr}
  .badge-coming{font-size:8.5px;top:10px;right:10px;padding:2px 6px}
}

/* Coming-soon link style in footer */
.foot-col .coming-link{
  display:block;
  color:var(--bone);
  opacity:.45;
  font-size:13px;
  line-height:2;
  cursor:default;
}
.foot-col .coming-link em{
  font-style:italic;
  color:var(--gold);
  opacity:.7;
  font-size:11px;
  margin-left:2px;
}

/* =========================================================================
   CTA LANGUAGE LADDER — soft, medium, strong
   Same brand colour (green), different weights and emphasis
   ========================================================================= */

/* SOFT: subtle link with arrow — used for low-commitment asks ("Calculate", "Notify me") */
.cta-soft{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--wa-dk);
  font-weight:600;
  font-size:14px;
  text-decoration:none;
  padding:8px 0;
  border-bottom:2px solid transparent;
  transition:color .2s, border-color .2s, gap .2s;
  line-height:1.2;
}
.cta-soft:hover{
  color:var(--wa);
  border-bottom-color:var(--wa);
  gap:10px;
}

/* MEDIUM: outlined button — used for "Get a quote", "Start yours", "Run the numbers" */
.cta-medium{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:12px 22px;
  border:2px solid var(--wa);
  color:var(--wa-dk);
  font-weight:600;
  font-size:14px;
  border-radius:10px;
  text-decoration:none;
  background:transparent;
  transition:background .2s, color .2s, transform .15s;
  white-space:nowrap;
}
.cta-medium:hover{
  background:var(--wa);
  color:#fff;
  transform:translateY(-1px);
}

/* STRONG: solid green button — reserved for "Apply now" */
.cta-strong{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:14px 24px;
  background:var(--wa);
  color:#fff;
  font-weight:600;
  font-size:14px;
  border-radius:10px;
  text-decoration:none;
  box-shadow:0 4px 16px rgba(37,211,102,0.3);
  transition:background .2s, transform .15s, box-shadow .2s;
  white-space:nowrap;
}
.cta-strong:hover{
  background:var(--wa-dk);
  transform:translateY(-2px);
  box-shadow:0 6px 20px rgba(37,211,102,0.4);
}
.cta-strong .wa-ico{
  width:20px;height:20px;
  background:#fff;
  color:var(--wa-dk);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
  font-size:12px;
  flex-shrink:0;
}

/* Context adjustments when on dark background */
.page-hero .cta-soft,
.mid-banner .cta-soft,
.finale .cta-soft{
  color:var(--wa);
}
.page-hero .cta-soft:hover,
.mid-banner .cta-soft:hover{
  color:#fff;
  border-bottom-color:#fff;
}

/* =========================================================================
   FROM-PRICE CTA — scroll-to-calculator button
   ========================================================================= */
.from-price-wrap{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin:20px 0 6px;
}
.from-price-wrap .from-price{margin:0}
.cta-from{
  color:var(--gold-dk);
  font-family:"Inter",sans-serif;
  font-weight:600;
  font-size:14px;
  padding:10px 0;
  border-bottom:2px solid var(--gold);
}
.cta-from:hover{
  color:var(--navy);
  border-bottom-color:var(--navy);
}

/* =========================================================================
   WHAT WE FINANCE — tiles (single clean layout for all widths)
   ========================================================================= */
.finance-item{
  background:#fff;
  border:1px solid var(--rule);
  border-radius:12px;
  padding:22px 22px 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
  text-decoration:none;
  color:inherit;
  min-height:180px;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
a.finance-item{cursor:pointer}
.finance-item.available:hover{
  border-color:var(--gold);
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(10,28,54,0.08);
}
.finance-item.coming{
  background:transparent;
  border-style:dashed;
  opacity:0.9;
}
.finance-item .finance-ico{
  width:40px;
  height:40px;
  background:var(--bone-2);
  border-radius:10px;
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--gold-dk);
}
.finance-item.coming .finance-ico{
  background:transparent;
  border:1px dashed var(--rule);
  color:#9a9aa2;
}
.finance-item .finance-ico svg{width:20px;height:20px}
.finance-item .finance-text{
  flex:1;
  min-width:0;
}
.finance-item .finance-text strong{
  display:block;
  color:var(--navy);
  font-size:15px;
  font-weight:600;
  line-height:1.25;
  margin-bottom:4px;
}
.finance-item.coming .finance-text strong{color:#4a4a54}
.finance-item .finance-text span{
  display:block;
  font-size:13px;
  color:#6a6a72;
  line-height:1.5;
}
.finance-cta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding-top:14px;
  margin-top:auto;
  border-top:1px solid var(--rule);
  font-size:13px;
  font-weight:600;
  color:var(--wa-dk);
  text-decoration:none;
  transition:color .2s;
}
a.finance-item:hover .finance-cta{color:var(--wa)}
.finance-cta.soft{color:var(--gold-dk)}
.finance-cta.soft:hover{color:var(--navy)}
.finance-item.coming .finance-cta{border-top-color:var(--rule)}

@media (max-width:600px){
  .finance-item{padding:18px 18px 14px;min-height:0}
  .finance-item .finance-ico{width:36px;height:36px}
  .finance-item .finance-ico svg{width:18px;height:18px}
  .finance-item .finance-text strong{font-size:14.5px}
  .finance-item .finance-text span{font-size:12.5px}
}

/* =========================================================================
   STEP CTAs
   ========================================================================= */
.step-cta{
  display:inline-block;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--rule);
  color:var(--wa-dk);
  font-weight:600;
  font-size:13.5px;
  text-decoration:none;
  transition:color .2s;
}
.step-cta:hover{color:var(--wa)}

/* =========================================================================
   TESTIMONIAL SECTION CTA
   ========================================================================= */
.testi-cta{
  margin:48px auto 0;
  max-width:700px;
  text-align:center;
  padding:32px 24px;
  border:1px solid var(--rule-d);
  border-radius:14px;
  background:rgba(245,239,224,0.03);
}
.testi-cta p{
  font-family:"Fraunces",serif;
  font-style:italic;
  font-size:22px;
  color:var(--bone);
  margin-bottom:18px;
  letter-spacing:-0.01em;
}
.testi-cta .cta-medium{
  border-color:var(--gold);
  color:var(--gold);
}
.testi-cta .cta-medium:hover{
  background:var(--gold);
  color:var(--navy);
  border-color:var(--gold);
}

/* =========================================================================
   MID-PAGE BANNER CTA
   ========================================================================= */
.mid-banner{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 100%);
  padding:72px 40px;
  position:relative;
  overflow:hidden;
}
.mid-banner::before{
  content:"";
  position:absolute;
  top:0;right:0;width:40%;height:100%;
  background:radial-gradient(circle at 80% 50%, rgba(212,168,75,0.15), transparent 60%);
  pointer-events:none;
}
.mid-banner-inner{
  max-width:1200px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1.2fr auto;
  gap:32px;
  align-items:center;
  position:relative;
}
.mid-banner-text h3{
  font-family:"Fraunces",serif;
  font-weight:400;
  font-size:clamp(28px, 3.5vw, 42px);
  line-height:1.1;
  letter-spacing:-0.02em;
  color:var(--bone);
  margin-bottom:12px;
}
.mid-banner-text h3 em{font-style:italic;color:var(--gold);font-weight:500}
.mid-banner-text p{
  font-size:15.5px;
  line-height:1.55;
  color:rgba(245,239,224,0.75);
  max-width:560px;
  margin:0;
}
.mid-banner-ctas{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
}
.mid-banner-ctas .cta-medium{
  border-color:rgba(245,239,224,0.4);
  color:var(--bone);
}
.mid-banner-ctas .cta-medium:hover{
  background:var(--bone);
  color:var(--navy);
  border-color:var(--bone);
}
@media(max-width:900px){
  .mid-banner{padding:48px 24px}
  .mid-banner-inner{grid-template-columns:1fr;gap:20px;text-align:center}
  .mid-banner-ctas{justify-content:center}
  .mid-banner-text p{margin:0 auto}
}

/* =========================================================================
   FAQ SECTION FOOTER CTA
   ========================================================================= */
.faq-cta{
  margin-top:40px;
  padding-top:32px;
  border-top:1px dashed var(--rule);
  text-align:center;
}
.faq-cta p{
  font-size:15px;
  color:#4a4a54;
  margin-bottom:12px;
  font-style:italic;
}

/* =========================================================================
   DESKTOP FLOATING CORNER CTA
   ========================================================================= */
.floater{
  position:fixed;
  bottom:24px;
  right:24px;
  background:var(--navy);
  color:var(--bone);
  border-radius:14px;
  padding:20px 22px 20px 22px;
  max-width:320px;
  box-shadow:0 12px 40px rgba(10,28,54,0.25);
  z-index:150;
  border:1px solid rgba(212,168,75,0.25);
  opacity:0;
  transform:translateY(20px) scale(0.96);
  transition:opacity .35s, transform .35s cubic-bezier(.2,.8,.2,1);
  pointer-events:none;
}
.floater.show{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
}
.floater-close{
  position:absolute;
  top:8px;right:8px;
  background:none;
  border:none;
  width:28px;height:28px;
  border-radius:50%;
  font-size:20px;
  line-height:1;
  color:var(--bone);
  opacity:0.5;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:opacity .2s, background .2s;
  font-family:inherit;
}
.floater-close:hover{
  opacity:1;
  background:rgba(245,239,224,0.08);
}
.floater-head{
  font-family:"Fraunces",serif;
  font-weight:500;
  font-size:19px;
  color:var(--bone);
  margin-bottom:4px;
  letter-spacing:-0.01em;
  padding-right:20px;
}
.floater-sub{
  font-size:13px;
  color:rgba(245,239,224,0.7);
  margin-bottom:14px;
  line-height:1.45;
}
.floater-ctas{
  display:flex;
  gap:10px;
  align-items:center;
}
.floater-ctas .cta-soft{
  color:var(--gold);
  padding:10px 0;
}
.floater-ctas .cta-soft:hover{color:#fff;border-bottom-color:#fff}
.floater-ctas .cta-strong{
  padding:10px 16px;
  font-size:13px;
}
.floater-ctas .cta-strong .wa-ico{width:16px;height:16px;font-size:10px}

/* Hide floater on small screens — sticky bar handles mobile */
@media (max-width:900px){
  .floater{display:none !important}
}

/* =========================================================================
   Page-level soft CTAs on inner pages — inline with prose
   ========================================================================= */
.prose .inline-cta{
  display:flex;
  gap:14px;
  align-items:center;
  padding:18px 22px;
  background:var(--bone-2);
  border-left:3px solid var(--gold);
  border-radius:0 10px 10px 0;
  margin:32px 0;
  flex-wrap:wrap;
}
.prose .inline-cta p{
  flex:1;
  min-width:200px;
  font-size:14.5px;
  color:var(--navy);
  margin:0;
  line-height:1.5;
}
.prose .inline-cta p strong{color:var(--navy)}
.investor-page .prose .inline-cta{
  background:var(--navy-2);
  border-left-color:var(--gold);
}
.investor-page .prose .inline-cta p{color:var(--bone)}