/* GLOBAL STYLES — loaded once site-wide */

  /* ============ TOKENS ============ */
  :root{
    --navy:#15314D;
    --navy-2:#1F4A74;
    --ink:#0E2236;
    --gold:#E8A33D;
    --gold-2:#F4C271;
    --gold-soft:#FBE7C6;
    --blue:#4F8FE0;
    --blue-soft:#EAF2FD;
    --green:#2E9E6B;
    --green-soft:#E3F6ED;

    --bg:#FFFFFF;
    --surface:#F5F8FC;
    --surface-2:#EEF3FA;
    --border:#E6ECF4;
    --border-strong:#D7E1ED;

    --text:#15314D;
    --text-dim:#6E7E94;
    --text-faint:#A6B2C4;

    --radius-lg:24px;
    --radius-md:16px;
    --radius-sm:10px;

    --font-display:'Plus Jakarta Sans', sans-serif;
    --font-body:'Plus Jakarta Sans', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;

    --container:1180px;

    /* ============ MASTER SECTION TYPOGRAPHY ============
       One source of truth for every major section intro.
       Each breakpoint changes these variables once, so every section stays matched. */
    --type-eyebrow-size:11.5px;
    --type-heading-size:42px;
    --type-description-size:16.5px;
    --type-heading-line:1.08;
    --type-description-line:1.6;
    --type-heading-spacing:-0.025em;
  }

  *{ margin:0; padding:0; box-sizing:border-box; }
  html{ scroll-behavior:smooth; }

  body{
    background:var(--ink); color:var(--text); font-family:var(--font-body);
    line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased;
  }

  ::selection{ background:var(--gold-soft); color:var(--navy); }
  a{ color:inherit; text-decoration:none; }
  img, svg{ display:block; max-width:100%; }

  .container{ width:100%; max-width:var(--container); margin:0 auto; padding:0 28px; }
  .section{ position:relative; padding:110px 0; }
  @media (max-width: 860px){ .section{ padding:72px 0; } }

  .eyebrow{
    font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    color:var(--blue); background:var(--blue-soft); margin-bottom:16px;
    display:inline-flex; align-items:center; padding:6px 16px; border-radius:999px;
  }

  h1, h2, h3, h4{ font-family:var(--font-display); font-weight:700; letter-spacing:-0.01em; line-height:1.14; color:var(--navy); }
  h2{ font-size:clamp(30px, 4vw, 46px); max-width:680px; }
  h3{ font-size:21px; }
  .lede{ color:var(--text-dim); font-size:17px; max-width:540px; margin-top:16px; }

  /* ============ BUTTONS ============ */
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    font-weight:600; font-size:15px; padding:13px 26px; border-radius:999px;
    border:1px solid transparent; cursor:pointer;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
    white-space:nowrap;
  }
  .btn:active{ transform:scale(0.97); }
  .btn-primary{ background:var(--navy); color:#fff; }
  .btn-primary:hover{ background:var(--ink); transform:translateY(-2px); box-shadow:0 10px 28px -12px rgba(21,49,77,0.5); }
  .btn-outline{ background:#fff; color:var(--blue); border:1px solid var(--blue); }
  .btn-outline:hover{ background:var(--blue-soft); transform:translateY(-2px); }
  .btn-gold{ background:var(--gold); color:var(--ink); }
  .btn-gold:hover{ transform:translateY(-2px); box-shadow:0 10px 28px -12px rgba(232,163,61,0.55); }
  .btn-block{ width:100%; }
  .btn svg{ width:15px; height:15px; }

  /* ============ REVEAL ============ */
  /* Page-builder safe: content is visible by default. JS only adds the hidden
     starting state after it has successfully initialized IntersectionObserver. */
  .reveal{
    opacity:1; transform:none;
    transition:opacity .8s cubic-bezier(.22,.61,.36,1), transform .8s cubic-bezier(.22,.61,.36,1);
  }
  .reveal.reveal-pending{ opacity:0; transform:scale(0.94) translateY(26px); }
  .reveal.reveal-pending.is-visible{ opacity:1; transform:scale(1) translateY(0); }
  @media (prefers-reduced-motion: reduce){ .reveal,.reveal.reveal-pending{ opacity:1; transform:none; transition:none; } }

  /* ============ NAV ============ */
  .nav{
    position:sticky; top:0; z-index:50; background:transparent; border-bottom:1px solid transparent;
    transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease, box-shadow .3s ease;
    position:sticky; /* sticky overrides relative for scroll but child absolute still works */
  }
  .nav.is-scrolled{
    background:rgba(255,255,255,0.85); backdrop-filter:blur(14px); border-bottom-color:var(--border);
    box-shadow:0 8px 30px -20px rgba(21,49,77,0.25);
  }
  .nav-inner{ display:flex; align-items:center; justify-content:space-between; height:80px; }
  .logo{ display:flex; align-items:center; gap:14px; font-family:var(--font-display); font-weight:800; font-size:28px; letter-spacing:-0.02em; color:var(--navy); transition:color .3s ease; }
  .logo svg{ width:42px; height:42px; flex-shrink:0; }
  .logo .logo-light{ font-weight:500; margin-left:0.06em; }

  /* Official Instant Financial image logo */
  .brand-logo{
    display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
    width:178px; height:64px; overflow:hidden; border-radius:10px;
    transition:background-color .3s ease, box-shadow .3s ease, transform .25s ease;
  }
  .brand-logo-image{
    width:100%; height:100%; object-fit:contain; object-position:center;
    transform:scale(1.48); transform-origin:center;
    display:block; pointer-events:none;
  }
  .nav.is-scrolled .brand-logo{
    background:var(--navy);
    box-shadow:0 8px 24px -16px rgba(14,34,54,.55);
  }
  .footer-brand .brand-logo{ width:206px; height:74px; background:transparent; }
  @media (max-width:880px){
    .brand-logo{ width:142px; height:51px; }
  }
  .nav-links{ display:flex; align-items:center; gap:34px; font-size:15px; font-weight:500; color:var(--text-dim); }
  .nav-links a{ transition:color .3s ease; }
  .nav-links a:hover{ color:var(--navy); }
  .nav-cta{ display:flex; align-items:center; gap:14px; }
  .nav-cta .btn{ transition:background .3s ease, color .3s ease, border-color .3s ease, transform .2s ease, box-shadow .2s ease; }
  @media (max-width: 880px){
    .nav-links{ display:none; }
    .nav-cta .btn-outline{ display:none; }
    .nav-cta .btn-primary{ font-size:13px; padding:10px 18px; }
    .hamburger{
      display:flex; flex-direction:column; justify-content:center; gap:5px;
      width:40px; height:40px; background:none; border:none; cursor:pointer; padding:6px;
      border-radius:10px; transition:background .2s ease;
    }
    .hamburger:hover{ background:rgba(255,255,255,0.1); }
    .hamburger span{
      display:block; height:2px; border-radius:2px; background:#fff;
      transition:transform .3s ease, opacity .3s ease, width .3s ease;
    }
    .nav.is-scrolled .hamburger span{ background:var(--navy); }
    .hamburger span:nth-child(1){ width:22px; }
    .hamburger span:nth-child(2){ width:16px; }
    .hamburger span:nth-child(3){ width:22px; }
    .nav.menu-open .hamburger span:nth-child(1){ transform:translateY(7px) rotate(45deg); width:22px; }
    .nav.menu-open .hamburger span:nth-child(2){ opacity:0; }
    .nav.menu-open .hamburger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); width:22px; }
    .mobile-menu{
      position:absolute; top:100%; left:0; right:0; overflow:hidden;
      max-height:0; transition:max-height .35s ease;
      background:rgba(14,34,54,0.97); backdrop-filter:blur(16px);
      border-top:1px solid rgba(255,255,255,0.08);
    }
    .nav.is-scrolled .mobile-menu{ background:rgba(255,255,255,0.97); border-top-color:var(--border); }
    .nav.menu-open .mobile-menu{ max-height:400px; }
    .mobile-menu-inner{ padding:16px 24px 24px; display:flex; flex-direction:column; gap:4px; }
    .mobile-menu a{
      display:block; padding:13px 0; font-size:17px; font-weight:600;
      color:rgba(255,255,255,0.85); border-bottom:1px solid rgba(255,255,255,0.08);
      transition:color .2s ease;
    }
    .nav.is-scrolled .mobile-menu a{ color:var(--navy); border-bottom-color:var(--border); }
    .mobile-menu a:last-of-type{ border-bottom:none; }
    .mobile-menu a:hover{ color:#fff; }
    .nav.is-scrolled .mobile-menu a:hover{ color:var(--blue); }
    .mobile-menu-cta{ margin-top:16px; display:flex; flex-direction:column; gap:10px; }
    .mobile-menu-cta .btn{ text-align:center; padding:14px; font-size:16px; }
    .mobile-menu-cta .btn-outline{
      display:block; background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.25);
    }
    .nav.is-scrolled .mobile-menu-cta .btn-outline{ color:var(--navy); border-color:var(--border-strong); }
  }
  @media (min-width: 881px){ .hamburger{ display:none; } .mobile-menu{ display:none; } }

  /* transparent nav over the dark hero */
  .nav:not(.is-scrolled) .logo{ color:#fff; }
  .nav:not(.is-scrolled) .nav-links a{ color:rgba(255,255,255,0.7); }
  .nav:not(.is-scrolled) .nav-links a:hover{ color:#fff; }
  .nav:not(.is-scrolled) .nav-cta .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,0.25); }
  .nav:not(.is-scrolled) .nav-cta .btn-outline:hover{ background:rgba(255,255,255,0.08); }
  .nav:not(.is-scrolled) .nav-cta .btn-primary{ background:var(--gold); color:var(--ink); }

  /* ============ HERO ============ */
  .hero{
    margin-top:-80px; padding:170px 0 110px;
    background:
      radial-gradient(120% 70% at 80% 0%, var(--navy-2) 0%, transparent 55%),
      radial-gradient(140% 100% at 50% 100%, #050D18 0%, var(--ink) 60%);
    position:relative; overflow:hidden;
  }
  .hl-gold{ color:var(--gold); }
  .hero-grid{ display:grid; grid-template-columns:1.05fr 0.95fr; gap:60px; align-items:center; }

  .hero-pill{
    display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.14);
    border-radius:999px; padding:9px 18px; font-size:13px; font-weight:600; color:#fff;
    margin-bottom:22px; box-shadow:0 6px 20px -10px rgba(0,0,0,0.3);
  }
  .hero-pill svg{ width:15px; height:15px; }

  .hero h1{ font-size:clamp(38px, 5.4vw, 60px); max-width:600px; color:#fff; }
  .hero .lede{ max-width:480px; color:rgba(255,255,255,0.6); }
  .hero-actions{ display:flex; gap:14px; margin-top:32px; flex-wrap:wrap; align-items:center; }
  .hero-actions .btn-primary{ background:var(--gold); color:var(--ink); }
  .hero-actions .btn-primary:hover{ background:var(--gold-2); box-shadow:0 10px 28px -12px rgba(232,163,61,0.55); }
  .hero-actions .btn-outline{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,0.25); }
  .hero-actions .btn-outline:hover{ background:rgba(255,255,255,0.08); transform:translateY(-2px); }

  .hero-badges{ display:flex; gap:16px; margin-top:34px; flex-wrap:nowrap; align-items:center; }
  .hero-badge{ display:flex; align-items:center; gap:6px; font-size:12px; color:rgba(255,255,255,0.6); font-weight:600; white-space:nowrap; }
  .hero-badge svg{ width:16px; height:16px; flex-shrink:0; }

  @media (max-width: 880px){
    .logo{ font-size:18px; gap:8px; }
    .logo svg{ width:24px; height:24px; }
    .nav-inner{ height:64px; }
    .hero-badges{ gap:12px; }
    .hero-badge{ font-size:11px; gap:5px; }
    .hero-badge svg{ width:14px; height:14px; }
    .nav-cta .btn-primary{ font-size:13px; padding:10px 16px; }
  }




  /* ============ APPLICATION FLOW DEMO ============ */
  .phone-wrap{ position:relative; display:flex; justify-content:center; }

  .app-demo{
    width:340px; background:#fff; border-radius:22px; overflow:hidden;
    box-shadow:0 50px 90px -30px rgba(21,49,77,0.35), 0 0 0 1px var(--border);
    position:relative; z-index:1;
  }
  .app-demo-bar{ display:flex; align-items:center; gap:8px; padding:14px 16px; background:var(--surface); border-bottom:1px solid var(--border); }
  .app-demo-bar .ad-dot{ width:9px; height:9px; border-radius:50%; background:var(--border-strong); }
  .app-demo-url{
    margin-left:8px; font-family:var(--font-mono); font-size:11px; color:var(--text-faint);
    background:#fff; border:1px solid var(--border); border-radius:6px; padding:4px 10px; flex:1;
  }
  .app-demo-screens{ position:relative; min-height:520px; }
  .app-demo-screen{
    position:absolute; inset:0; padding:24px; display:flex; flex-direction:column; gap:14px;
    opacity:0; animation:appDemoFade 12s infinite;
  }
  .app-demo-screen.step2{ animation-delay:-8s; }
  .app-demo-screen.step3{ animation-delay:-4s; }
  @keyframes appDemoFade{
    0%, 100%{ opacity:0; transform:translateY(10px); }
    3%, 30%{ opacity:1; transform:translateY(0); }
    33%{ opacity:0; transform:translateY(-10px); }
  }

  .ad-eyebrow{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--blue); font-weight:700; }
  .ad-title{ font-size:19px; font-weight:700; color:var(--navy); line-height:1.25; }
  .ad-text{ font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-top:-6px; }

  .ad-checklist{ background:var(--navy); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:10px; }
  .ad-checklist .ad-check{ display:flex; align-items:flex-start; gap:8px; font-size:12px; color:#fff; line-height:1.4; }
  .ad-checklist .ad-check svg{ width:16px; height:16px; color:var(--gold); flex-shrink:0; margin-top:1px; }

  .ad-field label{ display:block; font-size:11.5px; font-weight:700; color:var(--navy); margin-bottom:6px; }
  .ad-input{ height:34px; border-radius:8px; background:var(--surface); border:1px solid var(--border); }

  .ad-btn{
    display:flex; align-items:center; justify-content:center; gap:8px; background:var(--gold); color:var(--ink);
    font-weight:700; font-size:13.5px; border-radius:10px; padding:12px; margin-top:auto;
  }

  .ad-step-row{
    display:flex; align-items:center; gap:12px; border:1px solid var(--border-strong); border-radius:12px;
    padding:12px 14px; font-size:12.5px; color:var(--navy); font-weight:600;
  }
  .ad-num{
    width:24px; height:24px; border-radius:50%; background:var(--navy); color:#fff; font-size:12px; font-weight:700;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }

  .ad-signed{
    display:flex; align-items:center; gap:10px; background:var(--green-soft); border-radius:12px; padding:12px 14px;
    font-size:12px; font-weight:700; color:var(--navy); line-height:1.4;
  }
  .ad-signed svg{ width:20px; height:20px; color:var(--green); flex-shrink:0; }
  .ad-doc{ border:1px solid var(--border-strong); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:8px; }
  .ad-doc-header{ font-size:11px; font-weight:700; color:var(--navy); margin-bottom:4px; }
  .ad-doc-line{ height:6px; border-radius:3px; background:var(--surface-2); }

  .step-dots{ display:flex; justify-content:center; gap:8px; padding:14px; background:var(--surface); border-top:1px solid var(--border); }
  .step-dot{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); animation:appDemoDot 12s infinite; }
  .step-dot.step2{ animation-delay:-8s; }
  .step-dot.step3{ animation-delay:-4s; }
  @keyframes appDemoDot{
    0%, 100%{ background:var(--border-strong); transform:scale(1); }
    3%, 30%{ background:var(--blue); transform:scale(1.2); }
    33%{ background:var(--border-strong); transform:scale(1); }
  }

  /* floating toast cards */
  .toast{
    position:absolute; background:#fff; border:1px solid var(--border-strong); border-radius:16px;
    padding:14px 16px; box-shadow:0 24px 50px -20px rgba(21,49,77,0.3); z-index:2; max-width:220px;
  }
  .toast-etransfer{ bottom:8%; left:-10%; }
  .toast-etransfer .toast-head{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .toast-etransfer .toast-icon{
    width:34px; height:34px; border-radius:10px; background:var(--gold);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .toast-etransfer .toast-icon svg{ width:17px; height:17px; color:var(--ink); }
  .toast-etransfer .toast-title{ font-size:12px; font-weight:700; color:var(--navy); }
  .toast-etransfer .toast-sub{ font-size:10.5px; color:var(--text-faint); }
  .toast-etransfer .toast-amount{ font-family:var(--font-mono); font-size:19px; font-weight:700; color:var(--green); }

  .toast-approved{ top:6%; right:-12%; display:flex; align-items:center; gap:10px; }
  .toast-approved .toast-icon{
    width:34px; height:34px; border-radius:50%; background:var(--gold-soft);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .toast-approved .toast-icon svg{ width:16px; height:16px; color:var(--gold); }
  .toast-approved .toast-title{ font-size:12px; font-weight:700; color:var(--navy); }
  .toast-approved .toast-sub{ font-size:10.5px; color:var(--text-faint); }

  @media (max-width: 980px){
    .hero-grid{ grid-template-columns:1fr; gap:60px; }
    .hero h1, .hero .lede{ max-width:none; }
    .phone-wrap{ margin-top:10px; }
    .toast-etransfer{ display:none; }
    .toast-approved{ display:none; }
  }
  @media (max-width: 420px){
    .app-demo{ width:280px; }
    .app-demo-screens{ min-height:460px; }
  }

/* ==========================================================
   HERO RESPONSIVE OVERRIDES
   KEEP AT THE VERY END OF GLOBAL STYLES
   Desktop design remains unchanged.
========================================================== */


/* ==========================================================
   SMALLER DESKTOP / LAPTOP
   Keeps the original 2-column design
========================================================== */

@media (max-width: 1180px) and (min-width: 981px) {

  .hero-grid {
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
    gap: 42px;
  }

  .hero h1 {
    font-size: clamp(42px, 5vw, 56px);
  }

  .hero .lede {
    font-size: 16px;
  }

  .phone-wrap {
    min-width: 0;
  }

  .app-demo {
    width: 320px;
    max-width: 100%;
  }

}


/* ==========================================================
   TABLET / SMALL LAPTOP
   Stack text above application demo
========================================================== */

@media (max-width: 980px) {

  .hero {
    padding-top: 150px;
    padding-bottom: 90px;
  }

  .hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 58px;
    align-items: start;
  }

  /* Keep the copy readable instead of stretching edge-to-edge */
  .hero-grid > div:first-child {
    width: 100%;
    max-width: 720px;
  }

  .hero h1 {
    max-width: 680px;
    font-size: clamp(42px, 6.5vw, 56px);
    line-height: 1.07;
  }

  .hero .lede {
    max-width: 600px;
    font-size: 16px;
    line-height: 1.65;
  }

  .hero-actions {
    margin-top: 28px;
  }

  /* Center application demo underneath */
  .phone-wrap {
    width: 100%;
    margin-top: 0;
    display: flex;
    justify-content: center;
  }

  .app-demo {
    width: 340px;
    max-width: 100%;
  }

  /* Prevent fixed mockup width from creating horizontal overflow */
  .app-demo-screens {
    width: 100%;
  }

}


/* ==========================================================
   TABLET PORTRAIT
========================================================== */

@media (max-width: 760px) {

  /*
    Mobile nav is 64px high in your existing CSS.
    Change hero overlap from desktop -80px to -64px.
  */
  .hero {
    margin-top: -64px;
    padding-top: 124px;
    padding-bottom: 76px;
  }

  .hero .container {
    padding-left: 22px;
    padding-right: 22px;
  }

  .hero-grid {
    gap: 48px;
  }

  .hero-grid > div:first-child {
    max-width: 100%;
  }

  .hero h1 {
    max-width: 620px;
    font-size: clamp(38px, 8.3vw, 50px);
    line-height: 1.06;
    letter-spacing: -0.04em;
  }

  .hero .lede {
    max-width: 560px;
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.62;
  }

  .hero-actions {
    gap: 12px;
    margin-top: 26px;
  }

  .hero-actions .btn {
    min-height: 48px;
  }

  .phone-wrap {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .app-demo {
    width: min(340px, 100%) !important;
    max-width: 340px;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 640px) {

  /*
    Overrides the old:
    .hero { padding-top:142px; }

    This gives better spacing below the mobile nav.
  */
  .hero {
    margin-top: -64px;
    padding: 116px 0 68px;
  }

  .hero .container {
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .hero-grid {
    gap: 44px;
  }

  .hero h1 {
    font-size: clamp(36px, 10.2vw, 46px);
    line-height: 1.06;
    letter-spacing: -0.042em;
    text-wrap: balance;
  }

  .hero .lede {
    margin-top: 18px;
    font-size: 15px;
    line-height: 1.62;
  }


  /* ---------- HERO BUTTONS ---------- */

  .hero-actions {
    width: 100%;
    margin-top: 26px;
    gap: 10px;
  }

  .hero-actions .btn {
    flex: 1 1 100%;
    width: 100%;
    min-height: 50px;
    padding-left: 20px;
    padding-right: 20px;
  }


  /* ---------- APPLICATION DEMO ---------- */

  .phone-wrap {
    width: 100%;
    padding: 0;
    overflow: visible;
  }

  .app-demo {
    width: min(340px, 100%) !important;
    max-width: 340px !important;
    margin: 0 auto;
    border-radius: 20px;
  }

  .app-demo-bar {
    padding: 12px 14px;
    gap: 6px;
  }

  .app-demo-bar .ad-dot {
    width: 8px;
    height: 8px;
  }

  .app-demo-url {
    min-width: 0;
    margin-left: 5px;
    padding: 4px 8px;
    font-size: 9.5px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
    Keep enough vertical room for all three screens.
    Do not shrink it to 460px like the old 420px rule did.
  */
  .app-demo-screens {
    min-height: 510px !important;
  }

  .app-demo-screen {
    padding: 21px;
    gap: 12px;
  }

  .ad-eyebrow {
    font-size: 10px;
  }

  .ad-title {
    font-size: 18px;
  }

  .ad-text {
    font-size: 12px;
  }

  .ad-checklist {
    padding: 14px;
    gap: 9px;
  }

  .ad-checklist .ad-check {
    font-size: 11.5px;
  }

  .ad-field label {
    font-size: 11px;
  }

  .ad-input {
    height: 34px;
  }

  .ad-btn {
    min-height: 44px;
    padding: 11px 12px;
  }

  .step-dots {
    padding: 13px;
  }

}


/* ==========================================================
   SMALL MOBILE
   iPhone-sized / narrow Android screens
========================================================== */

@media (max-width: 420px) {

  .hero {
    padding-top: 110px;
    padding-bottom: 62px;
  }

  .hero .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .hero-grid {
    gap: 40px;
  }

  .hero h1 {
    font-size: clamp(34px, 10.5vw, 41px);
    line-height: 1.07;
  }

  .hero .lede {
    font-size: 14.5px;
  }

  /*
    IMPORTANT:
    Overrides your old fixed width:280px rule.
    The mockup now uses all available safe space.
  */
  .app-demo {
    width: 100% !important;
    max-width: 330px !important;
  }

  .app-demo-screens {
    min-height: 510px !important;
  }

  .app-demo-screen {
    padding: 19px;
  }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 350px) {

  .hero .container {
    padding-left: 15px;
    padding-right: 15px;
  }

  .hero h1 {
    font-size: 33px;
  }

  .hero .lede {
    font-size: 14px;
  }

  .app-demo {
    max-width: 100% !important;
  }

  .app-demo-screen {
    padding: 17px;
  }

  .ad-title {
    font-size: 17px;
  }

  .ad-checklist {
    padding: 12px;
  }

  .ad-checklist .ad-check {
    font-size: 11px;
  }

}

  /* ============ HOW IT WORKS ============ */
  .steps-wrap{ position:relative; margin-top:64px; }
  .steps-line{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--border-strong); transform:translateX(-0.5px); }
  .steps-line-fill{
    position:absolute; left:50%; top:0; width:2px; height:0; border-radius:2px;
    background:linear-gradient(180deg, var(--blue), var(--navy-2));
    box-shadow:0 0 14px rgba(79,143,224,0.55);
    transform:translateX(-1px); pointer-events:none;
    transition:height .25s ease-out;
  }
  .steps-glow{
    position:absolute; left:50%; top:0; width:26px; height:26px; transform:translate(-50%,-50%);
    border-radius:50%; pointer-events:none; z-index:3; opacity:0;
    background:radial-gradient(circle, #ffffff 0%, var(--blue) 40%, rgba(79,143,224,0) 75%);
    box-shadow:0 0 24px 8px rgba(79,143,224,0.6), 0 0 60px 22px rgba(79,143,224,0.28);
    transition:opacity .35s ease, top .25s ease-out;
  }
  .steps-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0; }
  .step-item{ padding:0 48px 120px; }
  .step-item:nth-child(even){ padding-top:160px; }
  .step-badge{
    display:inline-block; background:var(--blue-soft); color:var(--blue); font-size:12.5px; font-weight:700;
    padding:6px 14px; border-radius:8px; margin-bottom:14px;
    transition:background .4s ease, color .4s ease, box-shadow .4s ease, transform .4s ease;
  }
  .step-item h3{ margin-bottom:8px; transition:color .4s ease; }
  .step-item p{ color:var(--text-dim); font-size:14.5px; max-width:320px; }

  .step-item.is-active .step-badge{
    background:var(--navy); color:#fff; box-shadow:0 0 22px rgba(79,143,224,0.4); transform:scale(1.05);
  }
  .step-item:not(.is-active){ opacity:0.5; }

  @media (prefers-reduced-motion: reduce){
    .step-item:not(.is-active){ opacity:1; }
    .steps-glow, .steps-line-fill{ display:none; }
  }

  @media (max-width: 760px){
    .steps-line{ left:18px; }
    .steps-line-fill{ left:18px; }
    .steps-glow{ left:18px; }
    .steps-grid{ grid-template-columns:1fr; }
    .step-item, .step-item:nth-child(even){ padding:0 0 96px 48px; }
  }

/* ==========================================================
   HOW IT WORKS — RESPONSIVE OVERRIDES
   Keep this at the END of the #ifw-root <style>
========================================================== */


/* Make all visual content safely shrink */
#ifw-root img,
#ifw-root svg {
  max-width: 100%;
}

#ifw-root [data-ifw-panel] > * {
  min-width: 0;
}


/* ==========================================================
   SMALLER DESKTOP / LAPTOP
========================================================== */

@media (max-width: 1100px) {

  /* Main section spacing */
  #ifw-root > section > div {
    padding: 82px 28px !important;
  }

  /* Heading */
  #ifw-root > section > div > div:first-child h2 {
    font-size: 39px !important;
  }

  /* Step navigation */
  #ifw-root > section > div > div:nth-child(2) {
    max-width: 820px !important;
    margin-top: 56px !important;
  }

  /* Main content area */
  #ifw-root > section > div > div:nth-child(3) {
    gap: 48px !important;
    margin-top: 58px !important;
  }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 820px) {

  #ifw-root > section > div {
    padding: 72px 24px !important;
  }


  /* ---------- INTRO ---------- */

  #ifw-root > section > div > div:first-child {
    max-width: 620px !important;
  }

  #ifw-root > section > div > div:first-child h2 {
    font-size: 36px !important;
    line-height: 1.1 !important;
  }

  #ifw-root > section > div > div:first-child p {
    font-size: 15.5px !important;
    max-width: 500px !important;
  }


  /* ---------- FIVE STEP NAV ---------- */

  #ifw-root > section > div > div:nth-child(2) {
    width: 100% !important;
    max-width: 720px !important;
    margin-top: 50px !important;
  }

  #ifw-root [data-ifw-circle] {
    width: 44px !important;
    height: 44px !important;
    font-size: 13px !important;
  }

  /* Lines between numbered circles */
  #ifw-root
  > section
  > div
  > div:nth-child(2)
  > div:first-child
  > div {
    flex: 0 1 34px !important;
    min-width: 7px !important;
  }

  /* Matching spaces under the connecting lines */
  #ifw-root
  > section
  > div
  > div:nth-child(2)
  > div:nth-child(2)
  > div {
    flex: 0 1 34px !important;
    min-width: 7px !important;
  }

  #ifw-root [data-ifw-label] {
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }


  /* ---------- ACTIVE STEP CONTENT ---------- */

  #ifw-root > section > div > div:nth-child(3) {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px !important;

    margin-top: 52px !important;

    min-height: 0 !important;
  }

  /*
    The active panel uses display:contents,
    so its text and visual automatically become
    two stacked grid items here.
  */

  #ifw-root [data-ifw-panel] > div:first-child {
    width: 100%;
    max-width: 600px;

    margin-left: auto;
    margin-right: auto;
  }

  #ifw-root [data-ifw-panel] > div:nth-child(2) {
    width: 100%;
    max-width: 560px;

    margin-left: auto;
    margin-right: auto;

    padding: 28px !important;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

  #ifw-root > section > div {
    padding: 60px 18px !important;
  }


  /* ---------- INTRO ---------- */

  #ifw-root > section > div > div:first-child > div:first-child {
    font-size: 10px !important;
    letter-spacing: .15em !important;

    padding: 6px 12px !important;
  }

  #ifw-root > section > div > div:first-child h2 {
    font-size: clamp(30px, 8vw, 36px) !important;

    line-height: 1.09 !important;
    letter-spacing: -.025em !important;

    margin-top: 16px !important;
  }

  #ifw-root > section > div > div:first-child p {
    font-size: 14.5px !important;
    line-height: 1.6 !important;

    margin-top: 14px !important;

    max-width: 430px !important;
  }


  /* ========================================================
     FIVE STEP NAVIGATION
     Keep all 5 visible instead of making it horizontally scroll.
  ======================================================== */

  #ifw-root > section > div > div:nth-child(2) {
    margin-top: 42px !important;
  }

  #ifw-root [data-ifw-circle] {
    width: 36px !important;
    height: 36px !important;

    font-size: 11px !important;
  }


  /* Connecting lines */

  #ifw-root
  > section
  > div
  > div:nth-child(2)
  > div:first-child
  > div {

    flex: 0 1 20px !important;

    min-width: 5px !important;

    height: 2px !important;
  }


  /* Matching spacing in label row */

  #ifw-root
  > section
  > div
  > div:nth-child(2)
  > div:nth-child(2)
  > div {

    flex: 0 1 20px !important;

    min-width: 5px !important;
  }


  #ifw-root
  > section
  > div
  > div:nth-child(2)
  > div:nth-child(2) {

    margin-top: 9px !important;
  }


  #ifw-root [data-ifw-label] {
    font-size: 9px !important;

    line-height: 1.15 !important;

    white-space: normal !important;

    overflow-wrap: normal;
  }


  /* Give labels room to wrap cleanly */

  #ifw-root
  > section
  > div
  > div:nth-child(2)
  > div:nth-child(2)
  > button {

    min-height: 26px;
  }


  /* ========================================================
     ACTIVE STEP CONTENT
  ======================================================== */

  #ifw-root > section > div > div:nth-child(3) {
    grid-template-columns: minmax(0, 1fr) !important;

    gap: 28px !important;

    margin-top: 42px !important;

    min-height: 0 !important;
  }


  /* Text */

  #ifw-root [data-ifw-panel] > div:first-child {
    max-width: 100%;
  }

  #ifw-root [data-ifw-panel] > div:first-child h3 {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }

  #ifw-root [data-ifw-panel] > div:first-child p {
    font-size: 14.5px !important;
    line-height: 1.65 !important;

    margin-top: 11px !important;

    max-width: none !important;
  }


  /*
    Benefit/check rows beneath the paragraph.
    Keeps SVG checkmarks from shrinking.
  */

  #ifw-root [data-ifw-panel] > div:first-child > div {
    font-size: 13px !important;

    line-height: 1.45;

    align-items: flex-start !important;
  }

  #ifw-root [data-ifw-panel] > div:first-child > div svg {
    flex: 0 0 16px;
    margin-top: 2px;
  }


  /* ---------- VISUAL DEMO CARD ---------- */

  #ifw-root [data-ifw-panel] > div:nth-child(2) {
    width: 100% !important;

    max-width: 500px !important;

    padding: 20px !important;

    border-radius: 18px !important;
  }


  /*
    Prevent URLs/browser bars/flex content
    from forcing the card wider than the phone.
  */

  #ifw-root [data-ifw-panel] * {
    min-width: 0;
  }

}


/* ==========================================================
   SMALL MOBILE
   Around iPhone SE / narrow Android
========================================================== */

@media (max-width: 420px) {

  #ifw-root > section > div {
    padding: 52px 15px !important;
  }


  /* Intro */

  #ifw-root > section > div > div:first-child h2 {
    font-size: clamp(28px, 8.5vw, 33px) !important;
  }

  #ifw-root > section > div > div:first-child p {
    font-size: 14px !important;
  }


  /* Step navigation */

  #ifw-root > section > div > div:nth-child(2) {
    margin-top: 38px !important;
  }

  #ifw-root [data-ifw-circle] {
    width: 34px !important;
    height: 34px !important;

    font-size: 10.5px !important;
  }


  #ifw-root
  > section
  > div
  > div:nth-child(2)
  > div:first-child
  > div {

    flex-basis: 13px !important;
    min-width: 3px !important;
  }


  #ifw-root
  > section
  > div
  > div:nth-child(2)
  > div:nth-child(2)
  > div {

    flex-basis: 13px !important;
    min-width: 3px !important;
  }


  #ifw-root [data-ifw-label] {
    font-size: 8.5px !important;
    line-height: 1.12 !important;
  }


  /* Active content */

  #ifw-root > section > div > div:nth-child(3) {
    margin-top: 36px !important;
    gap: 24px !important;
  }

  #ifw-root [data-ifw-panel] > div:first-child h3 {
    font-size: 21px !important;
  }

  #ifw-root [data-ifw-panel] > div:first-child p {
    font-size: 14px !important;
  }

  #ifw-root [data-ifw-panel] > div:first-child > div {
    font-size: 12.5px !important;
  }


  /* Demo card */

  #ifw-root [data-ifw-panel] > div:nth-child(2) {
    padding: 16px !important;

    border-radius: 16px !important;
  }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 350px) {

  #ifw-root > section > div {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  #ifw-root > section > div > div:first-child h2 {
    font-size: 27px !important;
  }

  #ifw-root [data-ifw-circle] {
    width: 31px !important;
    height: 31px !important;

    font-size: 9.5px !important;
  }

  #ifw-root [data-ifw-label] {
    font-size: 7.8px !important;
  }

  #ifw-root [data-ifw-panel] > div:nth-child(2) {
    padding: 13px !important;
  }

}

  /* ============ BANK LOGO MARQUEE ============ */
  .marquee-section{ padding:48px 0 56px; background:#fff; }
  .marquee-head{
    text-align:center; font-family:var(--font-mono); font-size:12.5px; letter-spacing:0.18em;
    text-transform:uppercase; color:var(--text-faint); margin-bottom:28px;
  }
  .logo-marquee{
    overflow:hidden; position:relative;
    -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
  .logo-track{
    display:flex; align-items:center; gap:64px; width:max-content;
    animation:marqueeScroll 55s linear infinite;
    will-change:transform;
  }
  .logo-item{
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; opacity:0.85; transition:opacity .25s ease, transform .25s ease;
  }
  .logo-item:hover{ opacity:1; transform:translateY(-2px); }
  .logo-item img{ height:60px; width:auto; object-fit:contain; display:block; }
  @keyframes marqueeScroll{
    from{ transform:translateX(0%); }
    to{ transform:translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .logo-track{ animation:none; }
  }
  
  /* ==========================================================
   RESPONSIVE BANK LOGO MARQUEE
   Keep at the bottom of Global Styles
========================================================== */


/* ==========================================================
   LAPTOP / SMALLER DESKTOP
========================================================== */

@media (max-width: 1100px) {

  .marquee-section {
    padding: 44px 0 50px;
  }

  .marquee-head {
    margin-bottom: 25px;
  }

  .logo-track {
    gap: 50px;
  }

  .logo-item img {
    height: 68px;
    width: auto;
    max-width: none;
  }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 820px) {

  .marquee-section {
    padding: 38px 0 44px;
  }

  .marquee-head {
    margin-bottom: 23px;

    font-size: 11.5px;
    letter-spacing: 0.16em;

    padding-left: 20px;
    padding-right: 20px;
  }

  .logo-marquee {
    /*
      Slightly smaller fade area so more logos
      remain visible on narrow screens.
    */
    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent,
        #000 5%,
        #000 95%,
        transparent
      );

    mask-image:
      linear-gradient(
        90deg,
        transparent,
        #000 5%,
        #000 95%,
        transparent
      );
  }

  .logo-track {
    gap: 42px;
  }

  .logo-item {
    flex-shrink: 0;
  }

  .logo-item img {
    height: 58px;
    width: auto;
    max-width: none;
    object-fit: contain;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 640px) {

  .marquee-section {
    padding: 32px 0 38px;
  }

  .marquee-head {
    margin-bottom: 22px;

    font-size: 10.5px;
    line-height: 1.5;

    letter-spacing: 0.14em;

    text-align: center;
  }

  .logo-marquee {
    width: 100%;
    overflow: hidden;

    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent,
        #000 3%,
        #000 97%,
        transparent
      );

    mask-image:
      linear-gradient(
        90deg,
        transparent,
        #000 3%,
        #000 97%,
        transparent
      );
  }

  .logo-track {
    gap: 34px;

    /*
      Slightly faster on mobile because fewer
      logos are visible at one time.
    */
    animation-duration: 48s;
  }

  .logo-item {
    flex: 0 0 auto;
  }

  .logo-item img {
    height: 50px;
    width: auto;
    max-width: none;

    object-fit: contain;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

  .marquee-section {
    padding: 28px 0 34px;
  }

  .marquee-head {
    max-width: 300px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;

    padding-left: 16px;
    padding-right: 16px;

    font-size: 10px;
    letter-spacing: 0.12em;
  }

  .logo-track {
    gap: 28px;

    animation-duration: 44s;
  }

  .logo-item img {
    height: 45px;
  }

}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media (max-width: 350px) {

  .logo-track {
    gap: 24px;
  }

  .logo-item img {
    height: 42px;
  }

}

  /* ============ FEATURES (3-card) ============ */
  .features-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
  .feature-card{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:28px; display:flex; flex-direction:column; transition:transform .3s ease, border-color .3s ease;
    box-shadow:0 2px 12px -4px rgba(21,49,77,0.06);
  }
  .feature-card:hover{ transform:translateY(-4px); border-color:var(--border-strong); }
  .feature-card h3{ margin-bottom:8px; font-size:20px; }
  .feature-card p{ color:var(--text-dim); font-size:14px; line-height:1.6; margin-bottom:24px; }
  .feature-visual{ margin-top:auto; }

  /* icon badge — small dark rounded square */
  .feature-icon-wrap{
    width:48px; height:48px; border-radius:14px; margin-bottom:22px;
    display:flex; align-items:center; justify-content:center;
  }
  .feature-icon-wrap svg{ width:22px; height:22px; }
  .fic-green{ background:var(--green-soft); }
  .fic-green svg{ color:var(--green); }
  .fic-gold{ background:var(--gold-soft); }
  .fic-gold svg{ color:var(--gold); }
  .fic-navy{ background:var(--navy); }
  .fic-navy svg{ color:#fff; }

  /* inset visual cards */
  .fv-card{
    background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px;
  }
  .fv-row{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--text-dim); margin-bottom:10px; }
  .fv-row span:last-child{ font-weight:600; }

  /* card 1: credit score */
  .fv-label-green{ color:var(--green); font-weight:700 !important; }
  .fv-big{ font-family:var(--font-mono); font-size:28px; font-weight:700; color:var(--navy); margin-bottom:10px; }
  .fv-bar{ height:7px; border-radius:999px; background:var(--border); overflow:hidden; margin-bottom:14px; }
  .fv-bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg, var(--green), #6FD3A8); }
  .fv-checklist{ display:flex; flex-direction:column; gap:7px; border-top:1px solid var(--border); padding-top:12px; }
  .fv-check{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--navy); font-weight:600; }
  .fv-check-dot{ width:17px; height:17px; border-radius:50%; background:var(--green-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .fv-check-dot svg{ width:9px; height:9px; color:var(--green); }

  /* card 2: balance + sparkline */
  .fv-balance{ font-family:var(--font-mono); font-size:24px; font-weight:700; color:var(--navy); margin-bottom:2px; }
  .fv-delta{ font-size:11.5px; font-weight:700; color:var(--green); margin-left:6px; }
  .fv-spark{ width:100%; height:44px; display:block; margin:10px 0; }
  .fv-pill{
    display:inline-flex; align-items:center; gap:8px;
    background:#fff; border:1px solid var(--border); border-radius:999px; padding:7px 12px;
    font-size:11.5px; font-weight:600; color:var(--navy);
  }
  .fv-pill-dot{ width:22px; height:22px; border-radius:8px; background:var(--gold-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
  .fv-pill-dot svg{ width:11px; height:11px; color:var(--gold); }
  .fv-pill-val{ font-weight:700; color:var(--green); margin-left:auto; }

  /* card 3: payment schedule */
  .fv-schedule-row{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; color:var(--text-dim); margin-bottom:8px; }
  .fv-schedule-row span:last-child{ font-weight:700; color:var(--navy); }
  .fv-payment{ font-family:var(--font-mono); font-size:28px; font-weight:700; color:var(--navy); margin-bottom:12px; }
  .fv-timeline{ display:flex; align-items:center; margin-bottom:12px; }
  .fv-timeline .n{ width:11px; height:11px; border-radius:50%; background:var(--blue); flex-shrink:0; }
  .fv-timeline .n.next{ background:#fff; border:2px solid var(--gold); width:13px; height:13px; }
  .fv-timeline .n.dim{ background:var(--border); }
  .fv-timeline .l{ flex:1; height:2px; background:var(--blue); }
  .fv-timeline .l.dim{ background:var(--border); }
  .fv-next-row{ display:flex; align-items:center; justify-content:space-between; font-size:11.5px; }
  .fv-next-row span{ color:var(--text-dim); }
  .fv-next-row strong{ font-family:var(--font-mono); font-weight:700; color:var(--navy); }

  @media (max-width: 980px){ .features-grid{ grid-template-columns:1fr; } }

  /* ============ ADVANCE SIMULATOR ============ */
  .sim-card{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:32px; margin-top:56px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
    box-shadow: 0 4px 24px -8px rgba(21,49,77,0.08);
  }
  .sim-left h3{ margin-bottom:10px; font-size:20px; }
  .sim-left p{ color:var(--text-dim); font-size:14px; margin-bottom:24px; max-width:380px; }
  .sim-label{ display:block; font-size:13px; color:var(--text-dim); margin-bottom:8px; font-weight:600; }
  .sim-select{
    width:100%; appearance:none; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="%236E7E94" stroke-width="2"><path d="M6 9l6 6 6-6"/></svg>') no-repeat right 16px center;
    border:1px solid var(--border-strong); color:var(--navy); font-family:var(--font-body); font-size:15px; font-weight:600;
    padding:14px 40px 14px 16px; border-radius:var(--radius-sm); cursor:pointer;
  }
  .sim-result{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  .sim-stat{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm); padding:16px 18px; }
  .sim-stat.is-wide{
    grid-column:1/-1; background:var(--navy); border-color:var(--navy); border-radius:var(--radius-sm); padding:20px 22px;
  }
  .sim-stat.is-wide .sim-stat-label{ color:rgba(255,255,255,0.55); }
  .sim-stat.is-wide .sim-stat-value{ color:#fff; font-size:28px; }
  .sim-stat.is-wide .sim-stat-value span{ font-family:var(--font-mono); font-size:16px; font-weight:500; color:rgba(255,255,255,0.55); margin-left:4px; }
  .sim-stat.is-wide .sim-stat-sub{ color:rgba(255,255,255,0.5); }
  @media (max-width: 640px){
    .sim-stat.is-wide .sim-stat-value{ font-size:22px; }
    .sim-stat.is-wide .sim-stat-value span{ font-size:14px; }
  }
  .sim-stat-label{ font-size:12px; color:var(--text-dim); margin-bottom:8px; }
  .sim-stat-value{ font-family:var(--font-mono); font-size:26px; font-weight:700; color:var(--navy); }
  .sim-stat-value.is-accent{ color:var(--gold); font-size:30px; }
  .sim-stat-sub{ font-size:12px; color:var(--text-faint); margin-top:6px; }
  @media (max-width: 900px){ .sim-card{ grid-template-columns:1fr; } }

  /* ============ PLANS ============ */
  .plans-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:40px; }
  .plan-card{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:28px; display:flex; flex-direction:column; transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
  }
  .plan-card:hover{ transform:translateY(-6px); border-color:var(--border-strong); }
  .plan-card.is-popular{ border:2px solid var(--gold); box-shadow:0 24px 60px -28px rgba(232,163,61,0.3); position:relative; }
  .plan-badge{
    position:absolute; top:-14px; left:50%; transform:translateX(-50%);
    font-size:11px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
    background:var(--gold); color:var(--ink); padding:5px 16px; border-radius:999px; white-space:nowrap;
  }
  .plan-name{ font-size:20px; font-weight:700; color:var(--navy); margin-bottom:4px; }
  .plan-tagline{ font-size:13px; color:var(--text-dim); margin-bottom:20px; }
  .plan-amount{ display:flex; align-items:baseline; gap:8px; margin-bottom:6px; }
  .plan-amount .amount{ font-family:var(--font-mono); font-size:34px; font-weight:700; color:var(--navy); }
  .plan-amount .period{ font-size:13px; color:var(--text-dim); font-weight:500; }
  .plan-terms{ font-size:13px; color:var(--gold); font-weight:700; margin-bottom:22px; }
  .plan-features{ list-style:none; display:flex; flex-direction:column; gap:10px; margin-bottom:24px; flex:1; }
  .plan-features li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; color:var(--text-dim); }
  .plan-features svg{ width:16px; height:16px; flex-shrink:0; margin-top:2px; color:var(--gold); }
  .plans-note{ margin-top:24px; font-size:12.5px; color:var(--text-faint); }

  @media (max-width: 1100px){ .plans-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width: 640px){
    .plans-grid{
      display:flex; gap:16px;
      overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
      -ms-overflow-style:none; scrollbar-width:none;
      margin-left:-24px; margin-right:-24px; padding-left:24px; padding-right:24px; padding-bottom:12px;
    }
    .plans-grid::-webkit-scrollbar{ display:none; }
    .plan-card{ flex:0 0 78vw; max-width:300px; scroll-snap-align:start; }
  }

  .plans-controls{ display:none; }
  @media (max-width: 640px){
    .plans-controls{ display:flex; justify-content:flex-end; margin-top:16px; }
  }
  .academy-title-row{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
  .academy-title-row h2{ margin-bottom:0; }
  .academy-learn-more{ flex-shrink:0; }
  .academy-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }
  .video-card{
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden;
    transition:transform .3s ease, border-color .3s ease; cursor:pointer;
  }
  .video-card:hover{ transform:translateY(-6px); border-color:var(--border-strong); }
  .video-thumb{ aspect-ratio:16/10; position:relative; overflow:hidden; background:var(--surface); }
  .video-thumb svg{ width:100%; height:100%; display:block; transition:transform .5s ease; }
  .video-card:hover .video-thumb svg{ transform:scale(1.045); }
  .video-duration{
    position:absolute; bottom:12px; right:12px; background:rgba(21,49,77,0.7); backdrop-filter:blur(6px);
    font-family:var(--font-mono); font-size:12px; color:#fff; padding:5px 10px; border-radius:6px;
  }
  .play-button{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
  .play-circle{
    width:50px; height:50px; border-radius:50%; background:rgba(255,255,255,0.9);
    border:1px solid rgba(255,255,255,0.6); display:flex; align-items:center; justify-content:center;
    transition:transform .3s ease; box-shadow:0 10px 24px -10px rgba(21,49,77,0.4);
  }
  .video-card:hover .play-circle{ transform:scale(1.1); }
  .play-circle svg{ width:17px; height:17px; margin-left:2px; color:var(--navy); }
  .video-body{ padding:18px 20px 22px; }
  .video-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-faint); margin-bottom:8px; }
  .video-title{ font-size:16px; font-weight:700; color:var(--navy); line-height:1.35; }

  @media (max-width: 980px){ .academy-grid{ grid-template-columns:repeat(2,1fr); } }
  @media (max-width: 640px){ .academy-grid{ grid-template-columns:1fr; } }
  
  /* ==========================================================
   ADVANCE SIMULATOR + PLANS — RESPONSIVE OVERRIDES
   KEEP AT THE VERY END OF GLOBAL STYLES
========================================================== */


/* ==========================================================
   SMALLER DESKTOP / LAPTOP
========================================================== */

@media (max-width: 1100px) {

  #plans .sim-card {
    gap: 32px;
    padding: 30px;
  }

  #plans .plans-grid {
    gap: 20px;
  }

  #plans .plan-card {
    padding: 25px;
  }

}


/* ==========================================================
   TABLET
   2 PLAN CARDS PER ROW
========================================================== */

@media (max-width: 980px) {

  /* Section spacing */
  #plans.section {
    padding-top: 82px;
    padding-bottom: 82px;
  }


  /* ---------- HEADER ---------- */

  #plans > .container > h2 {
    max-width: 680px;
  }

  #plans > .container > .lede {
    max-width: 580px;
  }


  /* ---------- SIMULATOR ---------- */

  #plans .sim-card {
    grid-template-columns: 1fr !important;

    gap: 30px;

    margin-top: 46px;

    padding: 28px;
  }

  #plans .sim-left {
    width: 100%;
  }

  #plans .sim-left p {
    max-width: 600px;
  }

  #plans .sim-result {
    width: 100%;

    grid-template-columns: 1fr 1fr;

    gap: 12px;
  }


  /* ---------- PLAN CARDS ---------- */

  #plans .plans-grid {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;

    margin-top: 36px;
  }

  #plans .plan-card {
    min-width: 0;

    padding: 26px;
  }

  #plans .plan-amount {
    flex-wrap: wrap;
  }


  /*
    No arrows needed yet.
    Tablet uses a normal two-column grid.
  */

  #plans .plans-controls {
    display: none;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 640px) {

  /* ---------- SECTION ---------- */

  #plans.section {
    padding-top: 68px;
    padding-bottom: 68px;
  }


  #plans > .container {
    padding-left: 20px;
    padding-right: 20px;
  }


  /* ---------- HEADING ---------- */

  #plans .eyebrow {
    margin-bottom: 14px;

    font-size: 10.5px;

    padding: 6px 13px;
  }

  #plans > .container > h2 {
    max-width: 100%;

    font-size: clamp(30px, 8vw, 38px);

    line-height: 1.1;
  }

  #plans > .container > .lede {
    max-width: 100%;

    margin-top: 14px;

    font-size: 15px;
    line-height: 1.6;
  }


  /* ========================================================
     PLAN PREVIEW / SIMULATOR
  ======================================================== */

  #plans .sim-card {
    grid-template-columns: 1fr !important;

    gap: 25px;

    margin-top: 36px;

    padding: 22px;

    border-radius: 20px;
  }


  /* Left side */

  #plans .sim-left h3 {
    font-size: 19px;
  }

  #plans .sim-left p {
    margin-bottom: 20px;

    font-size: 13.5px;
    line-height: 1.6;

    max-width: none;
  }

  #plans .sim-label {
    font-size: 12px;
  }

  #plans .sim-select {
    width: 100%;

    min-height: 48px;

    padding-top: 12px;
    padding-bottom: 12px;

    font-size: 14px;
  }


  /* ---------- RESULTS ---------- */

  #plans .sim-result {
    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 10px;

    width: 100%;
  }

  #plans .sim-stat {
    min-width: 0;

    padding: 15px;
  }

  #plans .sim-stat-label {
    margin-bottom: 6px;

    font-size: 11px;
  }

  #plans .sim-stat-value {
    font-size: clamp(20px, 6vw, 25px);

    overflow-wrap: anywhere;
  }

  #plans .sim-stat-value.is-accent {
    font-size: clamp(22px, 6.5vw, 28px);
  }


  /* Full repayment schedule card */

  #plans .sim-stat.is-wide {
    grid-column: 1 / -1;

    padding: 18px;
  }

  #plans .sim-stat.is-wide .sim-stat-value {
    font-size: clamp(22px, 6.5vw, 27px);
  }

  #plans .sim-stat.is-wide .sim-stat-value span {
    display: inline;

    font-size: 13px;
  }


  /* ========================================================
     PLAN CARDS — MOBILE GRID
  ======================================================== */

  #plans .plans-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px;
    width: 100%;
    margin-top: 34px;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    overflow: visible;
    scroll-snap-type: none;
  }

  #plans .plan-card {
    flex: none;
    width: 100%;
    max-width: none;
    min-height: 0;
    padding: 24px;
  }


  /* Prevent hover/tilt effects from creating mobile overflow */

  #plans .plan-card,
  #plans .plan-card:hover,
  #plans .plan-card.is-tilting {
    transform: none;
  }


  /* ---------- PLAN TEXT ---------- */

  #plans .plan-name {
    font-size: 19px;
  }

  #plans .plan-tagline {
    min-height: 0;

    margin-bottom: 18px;

    font-size: 12.5px;
  }

  #plans .plan-amount {
    display: flex;

    flex-wrap: wrap;
    align-items: baseline;

    gap: 5px 8px;
  }

  #plans .plan-amount .amount {
    font-size: 30px;
  }

  #plans .plan-amount .period {
    font-size: 11.5px;
  }

  #plans .plan-terms {
    margin-bottom: 20px;

    font-size: 12px;
    line-height: 1.45;
  }

  #plans .plan-features {
    gap: 9px;

    margin-bottom: 22px;
  }

  #plans .plan-features li {
    gap: 8px;

    font-size: 12.5px;
    line-height: 1.4;
  }

  #plans .plan-features svg {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;
  }


  /* Buttons */

  #plans .plan-card .btn {
    width: 100%;

    min-height: 46px;

    padding: 11px 18px;

    font-size: 13px;
  }


  /* Popular badge */

  #plans .plan-badge {
    max-width: calc(100% - 34px);

    overflow: hidden;
    text-overflow: ellipsis;

    font-size: 9.5px;
  }


  /* ========================================================
     MOBILE CAROUSEL CONTROLS
  ======================================================== */

  #plans .plans-controls {
    display: flex;

    justify-content: flex-end;
    align-items: center;

    margin-top: 10px;
  }

  #plans .plans-controls .reviews-arrows {
    display: flex;

    gap: 9px;
  }

  #plans .plans-controls button {
    width: 42px;
    height: 42px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: #ffffff;

    border: 1px solid var(--border-strong);
    border-radius: 50%;

    cursor: pointer;
  }

  #plans .plans-controls button svg {
    width: 16px;
    height: 16px;
  }


  /* ---------- DISCLAIMER ---------- */

  #plans .plans-note {
    margin-top: 18px;

    font-size: 11px;
    line-height: 1.55;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

  #plans.section {
    padding-top: 58px;
    padding-bottom: 62px;
  }

  #plans > .container {
    padding-left: 17px;
    padding-right: 17px;
  }


  /* Heading */

  #plans > .container > h2 {
    font-size: clamp(28px, 8.6vw, 34px);
  }

  #plans > .container > .lede {
    font-size: 14px;
  }


  /* Simulator */

  #plans .sim-card {
    margin-top: 32px;

    padding: 18px;

    gap: 22px;

    border-radius: 18px;
  }

  #plans .sim-result {
    gap: 8px;
  }

  #plans .sim-stat {
    padding: 13px;
  }

  #plans .sim-stat-value {
    font-size: 20px;
  }

  #plans .sim-stat-value.is-accent {
    font-size: 23px;
  }

  #plans .sim-stat.is-wide {
    padding: 16px;
  }

  #plans .sim-stat.is-wide .sim-stat-value {
    font-size: 22px;
  }


  #plans .plans-grid {
    gap: 14px;
  }

  #plans .plan-card {
    width: 100%;
    max-width: none;
    padding: 21px;
  }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 350px) {

  #plans > .container {
    padding-left: 14px;
    padding-right: 14px;
  }


  /* Stack top two simulator values if screen is extremely narrow */

  #plans .sim-result {
    grid-template-columns: 1fr;
  }

  #plans .sim-stat.is-wide {
    grid-column: auto;
  }


  #plans .plans-grid {
    margin: 0;
    padding: 0;
  }

  #plans .plan-card {
    width: 100%;
    padding: 20px;
  }

}

  /* ============ REVIEWS (Trustpilot-style slider) ============ */
  .reviews-head{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:32px; }
  .tp-badge{
    display:inline-flex; align-items:center; gap:12px; background:#fff; border:1px solid var(--border-strong);
    border-radius:12px; padding:12px 18px;
  }
  .tp-stars{ display:flex; gap:3px; }
  .tp-star{ width:22px; height:22px; background:#00B67A; border-radius:3px; display:flex; align-items:center; justify-content:center; }
  .tp-star svg{ width:13px; height:13px; fill:#fff; }
  .tp-text{ display:flex; flex-direction:column; line-height:1.3; }
  .tp-text strong{ font-size:14px; color:var(--navy); }
  .tp-text span{ font-size:12.5px; color:var(--text-dim); }
  .tp-wordmark{ display:inline-flex; align-items:center; gap:6px; font-weight:800; font-size:15px; color:#15314D; }
  .tp-wordmark .tp-star{ width:18px; height:18px; }
  .tp-wordmark .tp-star svg{ width:11px; height:11px; }

  .reviews-slider{ position:relative; margin-top:40px; }
  .reviews-track{
    display:flex; gap:20px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
    padding-bottom:4px; -ms-overflow-style:none; scrollbar-width:none;
  }
  .reviews-track::-webkit-scrollbar{ display:none; }
  .review-card{
    flex:0 0 calc(33.333% - 14px); scroll-snap-align:start;
    background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg);
    padding:24px; display:flex; flex-direction:column; gap:14px;
  }
  .review-head{ display:flex; align-items:center; justify-content:space-between; }
  .review-stars{ display:flex; gap:3px; }
  .review-star{ width:18px; height:18px; background:#00B67A; border-radius:3px; display:flex; align-items:center; justify-content:center; }
  .review-star svg{ width:11px; height:11px; fill:#fff; }
  .review-date{ font-size:12px; color:var(--text-faint); }
  .review-text{ font-size:14.5px; color:var(--navy); line-height:1.6; flex:1; }
  .review-person{ display:flex; align-items:center; gap:12px; }
  .review-avatar{ width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:14px; flex-shrink:0; }
  .review-name{ font-size:14px; font-weight:700; color:var(--navy); display:flex; align-items:center; gap:6px; }
  .review-role{ font-size:12px; color:var(--text-dim); }
  .review-verified{ display:inline-flex; align-items:center; gap:3px; font-size:11px; color:#00B67A; font-weight:700; }
  .review-verified svg{ width:12px; height:12px; }

  .reviews-controls{ display:flex; align-items:center; justify-content:space-between; margin-top:24px; }
  .reviews-dots{ display:flex; gap:6px; }
  .reviews-dot{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); cursor:pointer; transition:background .2s ease, width .2s ease; border:none; padding:0; }
  .reviews-dot.is-active{ background:var(--navy); width:22px; border-radius:4px; }
  .reviews-arrows{ display:flex; gap:10px; }
  .reviews-arrows button{
    width:42px; height:42px; border-radius:50%; border:1px solid var(--border-strong); background:#fff;
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .2s ease, border-color .2s ease;
  }
  .reviews-arrows button:hover{ background:var(--surface); border-color:var(--border-strong); }
  .reviews-arrows button svg{ width:16px; height:16px; color:var(--navy); }

  @media (max-width: 980px){ .review-card{ flex:0 0 calc(50% - 10px); } }
  @media (max-width: 640px){ .review-card{ flex:0 0 100%; } }

  /* ============ MEMBER VIDEOS ============ */
  .vc-viewport{ width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; overflow:hidden; padding:32px 0 8px; margin-top:40px; }
  .vc-belt{ display:flex; gap:20px; will-change:transform; padding-left:calc((100vw - var(--container)) / 2 + 24px); }
  @media (max-width: 1180px){ .vc-belt{ padding-left:24px; } }
  .vc-card{
    position:relative; flex:0 0 auto; width:255px; aspect-ratio:9/16; border-radius:24px; overflow:hidden;
    cursor:default; transition:transform .3s ease;
  }
  .vc-card:hover{ transform:translateY(-6px); }
  .vc-card .vc-bg{ position:absolute; inset:0; }
  .vc-card .vc-initial{
    position:absolute; right:-16px; bottom:-42px; font-family:var(--font-display); font-weight:800;
    font-size:200px; color:#fff; opacity:0.08; line-height:1; user-select:none; pointer-events:none;
  }
  .vc-card .vc-overlay{ position:absolute; inset:0; background:linear-gradient(to bottom, rgba(14,34,54,0.45) 0%, rgba(14,34,54,0.05) 40%, rgba(14,34,54,0.15) 65%, rgba(14,34,54,0.65) 100%); }
  .vc-quote{ position:absolute; top:20px; left:20px; right:18px; color:#fff; font-size:17px; line-height:1.3; font-weight:700; letter-spacing:-0.01em; }
  .vc-name{ display:block; margin-top:8px; font-size:12px; font-weight:600; opacity:0.85; }
  .vc-play{
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:50px; height:50px; border-radius:50%;
    background:var(--blue); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 22px rgba(0,0,0,0.28);
    transition:transform .2s ease, box-shadow .2s ease;
  }
  .vc-card:hover .vc-play{ transform:translate(-50%,-50%) scale(1.1); box-shadow:0 12px 28px rgba(79,143,224,0.5); }
  .vc-play svg{ width:19px; height:19px; fill:#fff; margin-left:2px; }
  .vc-tag{ position:absolute; left:20px; right:20px; bottom:46px; color:#fff; font-size:11px; font-weight:500; opacity:0.85; }
  .vc-brand{ position:absolute; left:20px; bottom:18px; color:#fff; font-size:16px; font-weight:800; letter-spacing:-0.02em; }

  .vc-g1{ background:linear-gradient(160deg, var(--navy), var(--navy-2)); }
  .vc-g2{ background:linear-gradient(160deg, var(--gold), #C9852E); }
  .vc-g3{ background:linear-gradient(160deg, var(--blue), var(--navy-2)); }
  .vc-g4{ background:linear-gradient(160deg, var(--green), var(--navy)); }
  .vc-g5{ background:linear-gradient(160deg, var(--navy-2), var(--gold)); }
  .vc-g6{ background:linear-gradient(160deg, var(--blue), var(--green)); }

  @media (max-width: 1024px){ .vc-card{ width:215px; } .vc-quote{ font-size:15px; } }
  @media (max-width: 767px){
    .vc-card{ width:175px; border-radius:20px; }
    .vc-belt{ gap:14px; }
    .vc-quote{ font-size:13px; top:16px; left:16px; right:16px; }
    .vc-brand{ left:16px; bottom:16px; font-size:14px; }
    .vc-tag{ left:16px; right:16px; bottom:38px; font-size:9.5px; }
  }

  /* ============ FAQ ============ */
  .faq-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:48px; align-items:start; margin-top:56px; }
  .faq-list{ display:flex; flex-direction:column; gap:14px; }
  .faq-item{ background:#fff; border:1px solid var(--border-strong); border-radius:var(--radius-md); padding:20px 22px; cursor:pointer; }
  .faq-item summary{ display:flex; align-items:center; justify-content:space-between; gap:16px; font-weight:700; font-size:15.5px; color:var(--navy); list-style:none; cursor:pointer; }
  .faq-item summary::-webkit-details-marker{ display:none; }
  .faq-icon{ width:26px; height:26px; border-radius:50%; border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:transform .25s ease; }
  .faq-icon svg{ width:12px; height:12px; color:var(--navy); }
  .faq-item[open] .faq-icon{ transform:rotate(45deg); }
  .faq-body{ padding-top:14px; font-size:14.5px; color:var(--text-dim); line-height:1.7; }
  @media (max-width: 860px){ .faq-grid{ grid-template-columns:1fr; gap:32px; } }

/* ==========================================================
   FAQ — RESPONSIVE OVERRIDES
   KEEP AT THE VERY END OF GLOBAL STYLES
========================================================== */


/* ==========================================================
   SMALLER DESKTOP / LAPTOP
========================================================== */

@media (max-width: 1100px) {

  #faq .faq-grid {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 55px;
  }

}


/* ==========================================================
   TABLET
   Stack intro above FAQ list
========================================================== */

@media (max-width: 900px) {

  #faq .faq-grid {
    grid-template-columns: 1fr !important;
    gap: 40px !important;
  }


  /* Intro section */

  #faq .faq-grid > div:first-child {
    max-width: 620px;
  }

  #faq .faq-grid > div:first-child h2 {
    max-width: 520px;
  }

  #faq .faq-grid > div:first-child .lede {
    max-width: 560px;
  }


  /* FAQ list */

  #faq .faq-list {
    width: 100%;
    max-width: 760px;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 640px) {

  /* ---------- SECTION ---------- */

  #faq.section {
    padding-top: 68px;
    padding-bottom: 68px;
  }

  #faq > .container {
    padding-left: 20px;
    padding-right: 20px;
  }


  /* ---------- INTRO ---------- */

  #faq .faq-grid {
    gap: 34px !important;
  }

  #faq .eyebrow {
    margin-bottom: 14px;

    font-size: 10px;

    padding: 6px 12px;
  }

  #faq .faq-grid > div:first-child h2 {
    max-width: 100%;

    font-size: clamp(31px, 8.5vw, 38px);

    line-height: 1.08;

    letter-spacing: -.035em;
  }

  #faq .faq-grid > div:first-child .lede {
    max-width: 100%;

    margin-top: 14px;

    font-size: 15px;
    line-height: 1.6;
  }


  /* Contact support button */

  #faq .faq-grid > div:first-child > .btn {
    min-height: 50px;

    margin-top: 22px !important;

    padding-left: 24px;
    padding-right: 24px;
  }


  /* ========================================================
     FAQ QUESTIONS
  ======================================================== */

  #faq .faq-list {
    width: 100%;

    gap: 10px;
  }

  #faq .faq-item {
    width: 100%;

    border-radius: 14px;
  }

  #faq .faq-item summary {
    min-height: 64px;

    padding: 18px 16px;

    gap: 14px;

    font-size: 14px;
    line-height: 1.4;

    /*
      Important:
      lets long questions wrap instead of
      pushing the + icon outside the screen.
    */
    white-space: normal;
  }


  /* Question text stays flexible */

  #faq .faq-item summary {
    overflow-wrap: break-word;
  }


  /* Plus icon */

  #faq .faq-icon {
    width: 26px;
    height: 26px;

    flex: 0 0 26px;
  }

  #faq .faq-icon svg {
    width: 13px;
    height: 13px;
  }


  /* Answer */

  #faq .faq-body {
    padding:
      0
      16px
      18px;

    font-size: 13.5px;
    line-height: 1.65;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

  #faq.section {
    padding-top: 58px;
    padding-bottom: 60px;
  }

  #faq > .container {
    padding-left: 17px;
    padding-right: 17px;
  }


  /* Heading */

  #faq .faq-grid > div:first-child h2 {
    font-size: clamp(29px, 9vw, 34px);
  }

  #faq .faq-grid > div:first-child .lede {
    font-size: 14px;
  }


  /* Support button full width */

  #faq .faq-grid > div:first-child > .btn {
    width: 100%;

    justify-content: center;
  }


  /* FAQ cards */

  #faq .faq-list {
    gap: 9px;
  }

  #faq .faq-item {
    border-radius: 13px;
  }

  #faq .faq-item summary {
    min-height: 60px;

    padding: 16px 14px;

    gap: 12px;

    font-size: 13.5px;
  }

  #faq .faq-icon {
    width: 25px;
    height: 25px;

    flex-basis: 25px;
  }

  #faq .faq-body {
    padding:
      0
      14px
      16px;

    font-size: 13px;
    line-height: 1.65;
  }

}


/* ==========================================================
   VERY SMALL MOBILE
========================================================== */

@media (max-width: 350px) {

  #faq > .container {
    padding-left: 14px;
    padding-right: 14px;
  }

  #faq .faq-grid > div:first-child h2 {
    font-size: 28px;
  }

  #faq .faq-item summary {
    padding-left: 13px;
    padding-right: 13px;

    font-size: 13px;
  }

  #faq .faq-body {
    padding-left: 13px;
    padding-right: 13px;
  }

}
  /* ============ FINAL CTA ============ */
  .final-cta{
    border-radius:var(--radius-lg); overflow:hidden; background:radial-gradient(120% 100% at 30% 0%, #DCEBFC 0%, #FFFFFF 60%);
    border:1px solid var(--border); padding:64px; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center;
  }
  .final-cta h2{ max-width:420px; }
  .final-cta .lede{ max-width:420px; }
  .final-cta-actions{ display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
  .final-cta-visual{ display:flex; align-items:stretch; justify-content:center; position:relative; overflow:hidden; margin:-64px -64px -64px 0; border-radius:0 var(--radius-lg) var(--radius-lg) 0; }
  .cta-person{ width:100%; height:100%; object-fit:cover; object-position:center top; min-height:480px; display:block; }

  @media (max-width: 900px){
    .final-cta{ grid-template-columns:1fr; padding:36px 28px; }
    .final-cta h2, .final-cta .lede{ max-width:none; }
    .final-cta-visual{ order:-1; margin:-36px -28px 0; border-radius:0; }
    .cta-person{ min-height:220px; max-height:300px; object-position:center 15%; }
  }

  /* ============ FOOTER ============ */
  footer{ background:var(--ink); color:#fff; padding:64px 0 32px; }
  .footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:48px; margin-bottom:48px; }
  .footer-brand .logo{ color:#fff; margin-bottom:16px; }
  .footer-brand p{ color:rgba(255,255,255,0.55); font-size:14px; max-width:280px; margin-bottom:22px; line-height:1.6; }
  .footer-soc{ display:flex; align-items:center; gap:12px; max-width:280px; }
  .footer-soc .soc-badge{
    width:46px; height:46px; border-radius:50%; flex-shrink:0;
    background:radial-gradient(circle at 30% 30%, #6FC6F2, #1565C0);
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#fff; font-family:var(--font-mono); font-size:8px; font-weight:700; line-height:1.3; letter-spacing:0.04em;
  }
  .footer-soc .soc-text strong{ display:block; font-size:13px; color:#fff; margin-bottom:2px; }
  .footer-soc .soc-text span{ font-size:11.5px; color:rgba(255,255,255,0.5); line-height:1.4; }
  .footer-col h4{ font-size:13px; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.45); margin-bottom:18px; font-family:var(--font-mono); font-weight:500; }
  .footer-col ul{ list-style:none; display:flex; flex-direction:column; gap:12px; }
  .footer-col a{ font-size:14px; color:rgba(255,255,255,0.75); transition:color .2s ease; }
  .footer-col a:hover{ color:#fff; }

  .footer-bottom{ border-top:1px solid rgba(255,255,255,0.1); padding-top:24px; display:grid; grid-template-columns:280px 1fr; gap:40px; }
  .footer-copyright{ font-size:13px; color:rgba(255,255,255,0.45); line-height:1.6; }
  .footer-legal-text{ display:flex; flex-direction:column; gap:10px; }
  .footer-legal-text p{ font-size:12px; color:rgba(255,255,255,0.4); line-height:1.7; margin:0; }
  .footer-legal-text a{ color:rgba(255,255,255,0.55); text-decoration:underline; }
  .footer-legal-text a:hover{ color:#fff; }

  @media (max-width: 860px){
    .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; }
    .footer-brand{ grid-column:1/-1; }
    .footer-bottom{ grid-template-columns:1fr; gap:20px; }
  }

  @media (max-width: 860px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:36px; } .footer-brand{ grid-column:1/-1; } }


  /* ============ 2026 INTERACTION + VISUAL POLISH ============ */
  :root{
    --ease-out:cubic-bezier(.16,1,.3,1);
    --shadow-soft:0 22px 70px -34px rgba(14,34,54,.34);
  }

  body{
    background:#fff;
  }

  /* slim reading progress reinforces momentum without taking space */
  .scroll-progress{
    position:fixed; inset:0 auto auto 0; width:0; height:3px; z-index:1000;
    background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--blue));
    box-shadow:0 0 18px rgba(232,163,61,.35);
    pointer-events:none;
  }

  /* richer glass navigation */
  .nav.is-scrolled{
    background:rgba(255,255,255,.76);
    border-bottom-color:rgba(215,225,237,.8);
    box-shadow:0 10px 40px -30px rgba(14,34,54,.42);
  }
  @supports (backdrop-filter:blur(18px)){
    .nav.is-scrolled{ backdrop-filter:blur(18px) saturate(145%); }
  }
  .nav-links a{ position:relative; }
  .nav-links a::after{
    content:""; position:absolute; left:0; right:100%; bottom:-9px; height:2px;
    border-radius:999px; background:var(--gold); transition:right .35s var(--ease-out);
  }
  .nav-links a:hover::after,.nav-links a.is-active::after{ right:0; }
  .nav-links a.is-active{ color:var(--navy); }
  .nav:not(.is-scrolled) .nav-links a.is-active{ color:#fff; }

  /* premium buttons: subtle light sweep, not a loud gimmick */
  .btn{ position:relative; overflow:hidden; isolation:isolate; }
  .btn::before{
    content:""; position:absolute; inset:-2px; z-index:-1; opacity:0;
    background:linear-gradient(115deg,transparent 20%,rgba(255,255,255,.34) 45%,transparent 70%);
    transform:translateX(-115%); transition:transform .65s var(--ease-out),opacity .2s ease;
  }
  .btn:hover::before{ opacity:1; transform:translateX(115%); }

  /* hero ambient depth */
  .hero{ isolation:isolate; }
  .hero::before{
    content:""; position:absolute; inset:0; z-index:-1; opacity:.22; pointer-events:none;
    background-image:
      linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
    background-size:64px 64px;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 82%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,.75),transparent 82%);
  }
  .hero::after{
    content:""; position:absolute; width:680px; height:680px; right:-330px; top:-320px; z-index:-1;
    border-radius:50%; pointer-events:none;
    background:radial-gradient(circle,rgba(79,143,224,.25),rgba(79,143,224,0) 68%);
    animation:heroAura 8s ease-in-out infinite alternate;
  }
  @keyframes heroAura{ to{ transform:translate(-50px,55px) scale(1.08); opacity:.7; } }
  .hero-grid{ position:relative; z-index:1; }
  .hero h1{ letter-spacing:-.045em; text-wrap:balance; }
  .hl-gold{
    background:linear-gradient(100deg,var(--gold) 10%,#FFD99A 48%,var(--gold) 82%);
    background-size:220% auto; color:transparent; -webkit-background-clip:text; background-clip:text;
    animation:goldShimmer 5.5s linear infinite;
  }
  @keyframes goldShimmer{ to{ background-position:220% center; } }
  .hero-pill{ backdrop-filter:blur(12px); box-shadow:inset 0 1px rgba(255,255,255,.08),0 14px 40px -28px #000; }
  .hero-badge{
    padding:7px 10px; margin-left:-10px; border-radius:999px;
    transition:background .25s ease,color .25s ease,transform .25s ease;
  }
  .hero-badge:hover{ background:rgba(255,255,255,.07); color:#fff; transform:translateY(-2px); }

  /* application demo feels like a live product instead of a looping GIF */
  .phone-wrap{ perspective:1200px; }
  .app-demo{
    transform-style:preserve-3d;
    box-shadow:0 54px 110px -38px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);
    transition:transform .25s ease-out,box-shadow .35s ease;
  }
  .app-demo:hover{ box-shadow:0 62px 120px -36px rgba(0,0,0,.62),0 0 0 1px rgba(255,255,255,.12); }
  .app-demo.is-interactive .app-demo-screen{ animation:none!important; opacity:0; transform:translateY(12px) scale(.985); pointer-events:none; transition:opacity .45s var(--ease-out),transform .45s var(--ease-out); }
  .app-demo.is-interactive .app-demo-screen.is-active{ opacity:1; transform:none; pointer-events:auto; }
  .app-demo.is-interactive .step-dot{ animation:none!important; cursor:pointer; transition:width .3s var(--ease-out),background .3s ease,transform .3s ease; }
  .app-demo.is-interactive .step-dot.is-active{ width:26px; border-radius:999px; background:var(--gold); transform:none; }
  .ad-btn{ cursor:pointer; transition:transform .22s ease,box-shadow .22s ease,background .22s ease; }
  .ad-btn:hover{ transform:translateY(-2px); background:var(--gold-2); box-shadow:0 12px 30px -18px rgba(232,163,61,.8); }
  .toast{ animation:toastFloat 5s ease-in-out infinite; }
  .toast-approved{ animation-delay:-2.3s; }
  @keyframes toastFloat{ 0%,100%{ transform:translateY(0) rotate(-.4deg); } 50%{ transform:translateY(-9px) rotate(.4deg); } }

  /* modern section rhythm */
  .section{ overflow:clip; }
  .eyebrow{ border:1px solid rgba(79,143,224,.12); box-shadow:inset 0 1px rgba(255,255,255,.75); }
  h2{ letter-spacing:-.035em; text-wrap:balance; }
  .lede{ text-wrap:pretty; }

  /* cursor-reactive cards, powered by CSS variables from JS */
  .feature-card,.plan-card,.video-card,.review-card,.sim-card,.final-cta{
    --mx:50%; --my:50%; --rx:0deg; --ry:0deg;
  }
  .feature-card,.plan-card,.video-card{
    position:relative; transform-style:preserve-3d; will-change:transform;
  }
  .feature-card::before,.plan-card::before,.video-card::before{
    content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0;
    background:radial-gradient(420px circle at var(--mx) var(--my),rgba(79,143,224,.11),transparent 42%);
    transition:opacity .25s ease; z-index:0;
  }
  .feature-card:hover::before,.plan-card:hover::before,.video-card:hover::before{ opacity:1; }
  .feature-card > *,.plan-card > *,.video-card > *{ position:relative; z-index:1; }
  .feature-card.is-tilting,.plan-card.is-tilting,.video-card.is-tilting{
    transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-5px);
    box-shadow:var(--shadow-soft);
  }
  .feature-card,.plan-card,.video-card{ transition:transform .35s var(--ease-out),border-color .3s ease,box-shadow .35s ease; }

  /* plan selection behaves like a real configurator */
  .plan-card{ cursor:pointer; }
  .plan-card.is-selected{
    border-color:rgba(79,143,224,.7);
    box-shadow:0 24px 65px -34px rgba(79,143,224,.48),0 0 0 3px rgba(79,143,224,.08);
  }
  .plan-card.is-selected .btn-outline{ background:var(--navy); border-color:var(--navy); color:#fff; }
  .plan-card.is-selected::after{
    content:"Selected"; position:absolute; top:16px; right:16px; z-index:4;
    font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
    background:var(--blue-soft); color:var(--blue); padding:5px 9px; border-radius:999px;
  }
  .plan-card.is-popular.is-selected::after{ top:18px; }
  .sim-card{ position:relative; overflow:hidden; }
  .sim-card::after{
    content:""; position:absolute; width:300px; height:300px; right:-120px; top:-160px; border-radius:50%;
    background:radial-gradient(circle,rgba(79,143,224,.12),transparent 70%); pointer-events:none;
  }
  .sim-stat-value.is-updating{ animation:valuePop .42s var(--ease-out); }
  @keyframes valuePop{ 0%{ transform:translateY(7px); opacity:.45; } 100%{ transform:none; opacity:1; } }

  /* how-it-works cards gain a soft active surface */
  .step-item{ border-radius:20px; transition:opacity .4s ease,background .4s ease,transform .4s var(--ease-out); }
  .step-item.is-active{ background:linear-gradient(135deg,rgba(234,242,253,.72),rgba(255,255,255,0)); transform:translateY(-3px); }

  /* FAQ feels smoother and more tactile */
  .faq-item{ transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease; overflow:hidden; }
  .faq-item:hover{ transform:translateY(-2px); box-shadow:0 14px 40px -30px rgba(14,34,54,.45); }
  .faq-item[open]{ border-color:rgba(79,143,224,.35); box-shadow:0 18px 48px -34px rgba(79,143,224,.42); }

  /* floating mobile conversion bar after hero */
  .mobile-apply-bar{ display:none; }
  @media(max-width:760px){
    .mobile-apply-bar{
      display:flex; position:fixed; left:14px; right:14px; bottom:14px; z-index:60;
      align-items:center; justify-content:space-between; gap:12px; padding:10px 10px 10px 15px;
      border:1px solid rgba(255,255,255,.16); border-radius:18px;
      background:rgba(14,34,54,.9); color:#fff; backdrop-filter:blur(16px) saturate(140%);
      box-shadow:0 18px 50px -20px rgba(0,0,0,.55);
      transform:translateY(120%); opacity:0; transition:transform .4s var(--ease-out),opacity .3s ease;
    }
    .mobile-apply-bar.is-visible{ transform:none; opacity:1; }
    .mobile-apply-copy{ line-height:1.15; }
    .mobile-apply-copy strong{ display:block; font-size:13px; }
    .mobile-apply-copy span{ color:rgba(255,255,255,.58); font-size:10.5px; }
    .mobile-apply-bar .btn{ padding:10px 15px; font-size:12px; background:var(--gold); color:var(--ink); }
    footer{ padding-bottom:110px; }
  }

  @media(max-width:640px){
    .hero{ padding-top:142px; }
    .hero h1{ font-size:clamp(38px,11vw,52px); }
    .hero-actions .btn{ flex:1 1 100%; }
    .hero-badges{ overflow-x:auto; margin-right:-28px; padding-right:28px; scrollbar-width:none; }
    .hero-badges::-webkit-scrollbar{ display:none; }
    .hero-badge{ flex:0 0 auto; }
  }

  @media(prefers-reduced-motion:reduce){
    .hero::after,.hl-gold,.toast{ animation:none!important; }
    .feature-card,.plan-card,.video-card,.app-demo{ transform:none!important; }
    .scroll-progress{ transition:none; }
  }



  /* ============ ELEMENTOR HARD VISIBILITY FAILSAFE ============ */
  /* Elementor's editor/preview iframe can prevent IntersectionObserver callbacks.
     Nothing on the page is ever allowed to stay hidden waiting for JavaScript. */
  .reveal,
  .reveal.reveal-pending,
  .reveal.reveal-pending.is-visible{
    opacity:1 !important;
    transform:none !important;
    visibility:visible !important;
  }

  /* The application mockup still shows useful content if CSS animations or JS are blocked. */
  .app-demo-screen.step1{ opacity:1; transform:none; }

  /* Elementor sometimes adds wrapper containment; keep hero contents paintable. */
  .hero, .hero-grid, .hero-grid > *, .phone-wrap{
    visibility:visible !important;
  }
  
 /* ==================================================
   STATIC LOGO + SEPARATE SCROLLED LOGO
   Keep this at the very end of the stylesheet
================================================== */

/* Logo container */
.brand-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 178px;
  height: 64px;
  overflow: hidden;
  flex-shrink: 0;
  background: transparent !important;
  box-shadow: none !important;
}

/* Both logos occupy the same position */
.brand-logo .brand-logo-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
}

/* Current original logo */
.brand-logo .logo-static {
  opacity: 1;
  visibility: visible;
  transform: scale(1.48);
}

/* New scroll logo is hidden initially */
.brand-logo .logo-scrolled {
  opacity: 0;
  visibility: hidden;
  transform: none;
}

/* Solid white header only after scrolling */
.nav.is-scrolled {
  background: #ffffff !important;
  opacity: 1 !important;
  border-bottom: 1px solid var(--border) !important;
  box-shadow: 0 8px 30px -22px rgba(21, 49, 77, 0.35) !important;

  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Remove the old navy tile behind the logo */
.nav.is-scrolled .brand-logo {
  background: transparent !important;
  box-shadow: none !important;
}

/* Hide original logo after scrolling */
.nav.is-scrolled .logo-static {
  opacity: 0;
  visibility: hidden;
}

/* Show new navy-text logo after scrolling */
.nav.is-scrolled .logo-scrolled {
  opacity: 1;
  visibility: visible;
}

/* Mobile sizing */
@media (max-width: 880px) {
  .brand-logo {
    width: 142px;
    height: 51px;
  }
}

/* ==========================================================
   INSTANT ACADEMY — RESPONSIVE OVERRIDES
   Add at the END of the #ac-root <style>
========================================================== */

#ac-root img,
#ac-root svg {
  max-width: 100%;
}

#ac-root button {
  -webkit-tap-highlight-color: transparent;
}


/* ==========================================================
   SMALLER DESKTOP / LAPTOP
========================================================== */

@media (max-width: 1100px) {

  /* Main section container */
  #ac-root > section > div {
    padding: 82px 28px !important;
  }

  /* Main 2-column content */
  #ac-root > section > div > div:nth-child(2) {
    gap: 30px !important;
  }

  /* Featured visual */
  #ac-root > section > div > div:nth-child(2)
  > div:first-child > div:first-child {
    height: 260px !important;
  }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 820px) {

  #ac-root > section > div {
    padding: 72px 24px !important;
  }


  /* ========================================================
     INTRO
  ======================================================== */

  #ac-root > section > div > div:first-child {
    max-width: 650px;
  }

  #ac-root > section > div > div:first-child h2 {
    font-size: 38px !important;
    line-height: 1.09 !important;

    max-width: 520px !important;
  }

  #ac-root > section > div > div:first-child p {
    font-size: 15.5px !important;

    max-width: 570px !important;
  }


  /* Educational disclaimer */

  #ac-root > section > div > div:first-child > div:last-child {
    max-width: 580px;

    line-height: 1.5;
  }


  /* ========================================================
     MAIN ACADEMY LAYOUT
     Stack featured card above categories
  ======================================================== */

  #ac-root > section > div > div:nth-child(2) {
    display: grid !important;

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 24px !important;

    margin-top: 42px !important;
  }


  /* Featured lesson card */

  #ac-root > section > div > div:nth-child(2)
  > div:first-child {

    width: 100%;

    max-width: 680px;

    margin-left: auto;
    margin-right: auto;
  }


  /* Featured visual */

  #ac-root > section > div > div:nth-child(2)
  > div:first-child > div:first-child {

    height: 300px !important;
  }


  /* Featured text */

  #ac-root > section > div > div:nth-child(2)
  > div:first-child > div:last-child {

    padding: 26px !important;
  }


  /* ========================================================
     CATEGORY BUTTONS — 2 x 2 GRID
  ======================================================== */

  #ac-root > section > div > div:nth-child(2)
  > div:nth-child(2) {

    display: grid !important;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 14px !important;

    width: 100%;

    max-width: 680px;

    margin-left: auto;
    margin-right: auto;
  }


  #ac-root [data-ac-cat] {
    width: 100%;

    min-width: 0;

    padding: 16px !important;
  }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 600px) {

  #ac-root > section > div {
    padding: 60px 18px !important;
  }


  /* ========================================================
     INTRO
  ======================================================== */

  #ac-root > section > div > div:first-child > div:first-child {

    font-size: 10px !important;

    letter-spacing: .15em !important;

    padding: 6px 12px !important;
  }


  #ac-root > section > div > div:first-child h2 {

    max-width: 100% !important;

    margin-top: 16px !important;

    font-size: clamp(31px, 8.5vw, 38px) !important;

    line-height: 1.08 !important;

    letter-spacing: -.03em !important;
  }


  #ac-root > section > div > div:first-child p {

    max-width: 100% !important;

    margin-top: 14px !important;

    font-size: 14.5px !important;

    line-height: 1.62 !important;
  }


  /* Educational disclaimer */

  #ac-root > section > div > div:first-child > div:last-child {

    align-items: flex-start !important;

    margin-top: 14px !important;

    font-size: 11.5px !important;

    line-height: 1.5 !important;
  }


  #ac-root > section > div > div:first-child
  > div:last-child svg {

    flex: 0 0 13px;

    margin-top: 2px;
  }


  /* ========================================================
     MAIN CONTENT
  ======================================================== */

  #ac-root > section > div > div:nth-child(2) {

    grid-template-columns: minmax(0, 1fr) !important;

    gap: 20px !important;

    margin-top: 34px !important;
  }


  /* ========================================================
     FEATURED LESSON CARD
  ======================================================== */

  #ac-root > section > div > div:nth-child(2)
  > div:first-child {

    width: 100%;

    max-width: 100%;

    border-radius: 18px !important;
  }


  /* Featured visual */

  #ac-root > section > div > div:nth-child(2)
  > div:first-child > div:first-child {

    height: 230px !important;
  }


  /* Featured content */

  #ac-root > section > div > div:nth-child(2)
  > div:first-child > div:last-child {

    padding: 22px !important;
  }


  #ac-root [data-ac-title] {

    font-size: 20px !important;

    line-height: 1.3 !important;
  }


  #ac-root [data-ac-desc] {

    max-width: none !important;

    margin-top: 10px !important;

    font-size: 14px !important;

    line-height: 1.6 !important;
  }


  /* ========================================================
     GRAPHICS INSIDE FEATURED CARD
  ======================================================== */

  /*
    Budget graphic has labels extending left of the chart.
    Scale it slightly so everything stays inside the card.
  */

  #ac-root [data-ac-graphic="0"] {

    transform: scale(.86);

    transform-origin: center center;
  }


  #ac-root [data-ac-graphic="1"] {

    transform: scale(.92);

    transform-origin: center center;
  }


  #ac-root [data-ac-graphic="2"] {

    transform: scale(.9);

    transform-origin: center center;
  }


  #ac-root [data-ac-graphic="3"] {

    transform: scale(.92);

    transform-origin: center center;
  }


  /* Main play button */

  #ac-root > section > div > div:nth-child(2)
  > div:first-child > div:first-child
  > span:last-child {

    width: 54px !important;

    height: 54px !important;
  }


  /* Category + duration labels */

  #ac-root [data-ac-category] {

    left: 15px !important;

    bottom: 15px !important;

    font-size: 10px !important;
  }


  #ac-root [data-ac-duration] {

    top: 15px !important;

    right: 15px !important;

    font-size: 10px !important;
  }


  /* ========================================================
     CATEGORY BUTTONS
     Stack vertically on mobile
  ======================================================== */

  #ac-root > section > div > div:nth-child(2)
  > div:nth-child(2) {

    display: flex !important;

    flex-direction: column !important;

    gap: 10px !important;

    width: 100%;

    max-width: 100%;
  }


  #ac-root [data-ac-cat] {

    width: 100% !important;

    min-height: 76px;

    gap: 13px !important;

    padding: 13px !important;

    border-radius: 14px !important;
  }


  /* Colored category icons */

  #ac-root [data-ac-cat] > div:first-child {

    width: 46px !important;

    height: 46px !important;

    flex: 0 0 46px !important;

    border-radius: 12px !important;
  }


  #ac-root [data-ac-cat] > div:first-child svg {

    width: 20px !important;

    height: 20px !important;
  }


  /* Category title */

  #ac-root [data-ac-cat-label] {

    font-size: 15px !important;

    line-height: 1.25;
  }


  /* Lesson duration */

  #ac-root [data-ac-cat]
  > div:nth-child(2)
  > div:last-child {

    margin-top: 2px !important;

    font-size: 11.5px !important;
  }

}


/* ==========================================================
   SMALL MOBILE
========================================================== */

@media (max-width: 420px) {

  #ac-root > section > div {

    padding: 52px 16px !important;
  }


  /* Heading */

  #ac-root > section > div > div:first-child h2 {

    font-size: clamp(29px, 8.8vw, 34px) !important;
  }


  #ac-root > section > div > div:first-child p {

    font-size: 14px !important;
  }


  /* Featured lesson */

  #ac-root > section > div > div:nth-child(2)
  > div:first-child > div:first-child {

    height: 210px !important;
  }


  #ac-root > section > div > div:nth-child(2)
  > div:first-child > div:last-child {

    padding: 19px !important;
  }


  #ac-root [data-ac-title] {

    font-size: 19px !important;
  }


  #ac-root [data-ac-desc] {

    font-size: 13.5px !important;
  }


  /* Budget graphic */

  #ac-root [data-ac-graphic="0"] {

    transform: scale(.75);
  }


  /* Other graphics */

  #ac-root [data-ac-graphic="1"],
  #ac-root [data-ac-graphic="2"],
  #ac-root [data-ac-graphic="3"] {

    transform: scale(.84);
  }


  /* Category cards */

  #ac-root [data-ac-cat] {

    min-height: 70px;

    padding: 11px !important;

    gap: 11px !important;
  }


  #ac-root [data-ac-cat] > div:first-child {

    width: 43px !important;

    height: 43px !important;

    flex-basis: 43px !important;
  }

}


/* ==========================================================
   VERY SMALL PHONES
========================================================== */

@media (max-width: 350px) {

  #ac-root > section > div {

    padding-left: 13px !important;

    padding-right: 13px !important;
  }


  #ac-root > section > div > div:first-child h2 {

    font-size: 28px !important;
  }


  #ac-root > section > div > div:nth-child(2)
  > div:first-child > div:first-child {

    height: 195px !important;
  }


  #ac-root [data-ac-graphic="0"] {

    transform: scale(.68);
  }


  #ac-root [data-ac-cat-label] {

    font-size: 14px !important;
  }

}


/* ==========================================================
   MASTER SECTION TYPOGRAPHY SYSTEM
   KEEP THIS AS THE LAST TYPOGRAPHY BLOCK IN GLOBAL STYLES.

   Applies to the INTRO of each major content section:
   - eyebrow / section label
   - main section heading
   - main section description

   Hero, navigation, card titles, UI labels and footer keep their
   intentionally different type hierarchy.
========================================================== */

.type-eyebrow,
.eyebrow.type-eyebrow {
  font-family:var(--font-mono) !important;
  font-size:var(--type-eyebrow-size) !important;
  line-height:1.2 !important;
  font-weight:700 !important;
  letter-spacing:.14em !important;
  text-transform:uppercase !important;
}

.type-section-heading {
  font-family:var(--font-display) !important;
  font-size:var(--type-heading-size) !important;
  line-height:var(--type-heading-line) !important;
  letter-spacing:var(--type-heading-spacing) !important;
  font-weight:800 !important;
}

.type-section-description {
  font-family:var(--font-body) !important;
  font-size:var(--type-description-size) !important;
  line-height:var(--type-description-line) !important;
  font-weight:400 !important;
}

/* Tablet: one shared scale for every section */
@media (max-width:820px) {
  :root {
    --type-eyebrow-size:10.5px;
    --type-heading-size:38px;
    --type-description-size:15.5px;
  }
}

/* Mobile: one shared scale for every section */
@media (max-width:600px) {
  :root {
    --type-eyebrow-size:10px;
    --type-heading-size:34px;
    --type-description-size:14.5px;
  }
}

/* Very narrow phones: keep the same mobile hierarchy */
@media (max-width:350px) {
  :root {
    --type-heading-size:32px;
    --type-description-size:14px;
  }
}



/* ==========================================================
   WHY INSTANT FINANCIAL — TRUST DASHBOARD
   Used by the redesigned #why-instant-financial section
========================================================== */

.if-why{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 82% 45%, rgba(232,163,61,.09), transparent 29%),
    linear-gradient(180deg,#fff 0%,#f7f9fc 100%);
}

.if-why::before,
.if-why::after{
  content:"";
  position:absolute;
  border:1px solid rgba(14,43,70,.05);
  border-radius:50%;
  pointer-events:none;
}

.if-why::before{
  top:80px;
  right:-160px;
  width:520px;
  height:520px;
}

.if-why::after{
  top:145px;
  right:-90px;
  width:380px;
  height:380px;
}

.if-why-layout{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(520px,1.12fr);
  align-items:center;
  gap:clamp(60px,7vw,112px);
}

.if-why-content{
  min-width:0;
  max-width:560px;
}

.if-why-content .type-section-heading{
  max-width:530px;
  margin-top:20px;
  margin-bottom:20px;
}

.if-why-content .type-section-heading span{
  display:block;
  color:var(--navy);
}

.if-why-intro{
  max-width:515px;
  margin-top:0;
  margin-bottom:38px;
  color:var(--text-dim);
}

/* Benefit rows */

.if-benefit-list{
  display:grid;
  gap:14px;
}

.if-benefit{
  display:grid;
  grid-template-columns:52px minmax(0,1fr) auto;
  align-items:center;
  gap:17px;
  padding:17px 18px;
  background:rgba(255,255,255,.82);
  border:1px solid var(--border-strong);
  border-radius:17px;
  box-shadow:0 12px 34px rgba(14,43,70,.04);
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease;
}

.if-benefit:hover{
  transform:translateY(-3px);
  border-color:rgba(79,143,224,.38);
  box-shadow:0 18px 42px rgba(14,43,70,.08);
}

.if-benefit-icon{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:15px;
}

.if-benefit-icon svg{
  width:23px;
  height:23px;
}

.if-benefit-icon--green{
  color:var(--green);
  background:var(--green-soft);
}

.if-benefit-icon--gold{
  color:#d78b15;
  background:var(--gold-soft);
}

.if-benefit-icon--navy{
  color:#fff;
  background:var(--navy);
}

.if-benefit-copy{
  min-width:0;
}

.if-benefit-copy h3{
  margin:0 0 4px;
  color:var(--navy);
  font-size:17px;
  font-weight:700;
  line-height:1.25;
  letter-spacing:-.02em;
}

.if-benefit-copy p{
  margin:0;
  color:var(--text-dim);
  font-size:14px;
  line-height:1.55;
}

.if-benefit-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:5px 11px;
  color:#54677d;
  background:var(--surface-2);
  border-radius:999px;
  font-size:11px;
  font-weight:700;
  white-space:nowrap;
}

.if-benefit-status--green{
  color:#168556;
  background:var(--green-soft);
}

/* Dashboard visual */

.if-why-visual{
  position:relative;
  width:100%;
  max-width:680px;
  min-width:0;
  margin-left:auto;
  padding:38px 44px 40px 24px;
}

.if-dashboard{
  position:relative;
  z-index:2;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border-strong);
  border-radius:25px;
  box-shadow:
    0 36px 80px rgba(14,43,70,.14),
    0 8px 24px rgba(14,43,70,.06);
}

.if-dashboard-browser{
  min-height:52px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:15px;
  padding:0 18px;
  background:var(--surface);
  border-bottom:1px solid var(--border);
}

.if-browser-dots{
  display:flex;
  gap:6px;
}

.if-browser-dots span{
  width:8px;
  height:8px;
  background:var(--border-strong);
  border-radius:50%;
}

.if-browser-address{
  min-width:0;
  overflow:hidden;
  padding:8px 13px;
  color:var(--text-faint);
  background:#fff;
  border:1px solid var(--border);
  border-radius:8px;
  font-family:var(--font-mono);
  font-size:10px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.if-browser-secure{
  color:#8ea0b4;
}

.if-browser-secure svg{
  width:16px;
  height:16px;
}

.if-dashboard-body{
  padding:27px;
}

.if-dashboard-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:20px;
}

.if-dashboard-kicker{
  display:block;
  margin-bottom:5px;
  color:var(--blue);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.if-dashboard-top h3{
  margin:0;
  color:var(--navy);
  font-size:22px;
  font-weight:700;
  letter-spacing:-.03em;
}

.if-dashboard-live{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  color:#18865a;
  background:var(--green-soft);
  border-radius:999px;
  font-size:10px;
  font-weight:700;
  white-space:nowrap;
}

.if-dashboard-live span{
  width:7px;
  height:7px;
  background:var(--green);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(46,158,107,.13);
}

/* Advance card */

.if-advance-card{
  padding:21px;
  color:#fff;
  background:
    radial-gradient(circle at 85% 20%,rgba(255,255,255,.13),transparent 28%),
    linear-gradient(135deg,var(--ink) 0%,var(--navy-2) 100%);
  border-radius:18px;
}

.if-advance-card-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.if-small-label{
  display:block;
  margin-bottom:5px;
  color:#9fb0c3;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.if-advance-card-top strong{
  display:block;
  color:#fff;
  font-family:var(--font-mono);
  font-size:40px;
  line-height:1;
  letter-spacing:-.04em;
}

.if-transfer-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:var(--ink);
  background:var(--gold);
  border-radius:13px;
}

.if-transfer-icon svg{
  width:20px;
  height:20px;
}

.if-transfer-confirmation{
  display:flex;
  align-items:center;
  gap:11px;
  margin-top:20px;
  padding:12px;
  color:var(--ink);
  background:#fff;
  border-radius:12px;
}

.if-confirm-icon{
  flex:0 0 auto;
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--green);
  border-radius:50%;
}

.if-confirm-icon svg{
  width:15px;
  height:15px;
}

.if-transfer-confirmation strong,
.if-transfer-confirmation span{
  display:block;
}

.if-transfer-confirmation strong{
  margin-bottom:2px;
  font-size:12px;
}

.if-transfer-confirmation div>span{
  color:var(--text-dim);
  font-size:10px;
}

/* Dashboard statistics */

.if-dashboard-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}

.if-dashboard-stat{
  min-width:0;
  padding:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
}

.if-dashboard-stat>span,
.if-dashboard-stat strong,
.if-dashboard-stat small{
  display:block;
}

.if-dashboard-stat>span{
  margin-bottom:8px;
  color:var(--text-dim);
  font-size:10px;
}

.if-dashboard-stat strong{
  color:var(--navy);
  font-family:var(--font-mono);
  font-size:19px;
  letter-spacing:-.02em;
}

.if-dashboard-stat small{
  margin-top:3px;
  color:var(--text-faint);
  font-size:10px;
}

/* Payment timeline */

.if-payment-card{
  margin-top:12px;
  padding:17px 17px 14px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:15px;
}

.if-payment-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:15px;
}

.if-payment-heading span,
.if-payment-heading strong{
  display:block;
}

.if-payment-heading div>span{
  margin-bottom:4px;
  color:var(--text-dim);
  font-size:10px;
}

.if-payment-heading div>strong{
  color:var(--navy);
  font-size:12px;
}

.if-payment-price{
  color:var(--navy);
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:700;
}

.if-payment-track{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:22px;
}

.if-track-line{
  position:absolute;
  z-index:0;
  top:10px;
  left:11%;
  right:11%;
  height:2px;
  background:var(--border-strong);
}

.if-track-step{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:7px;
}

.if-track-step>span{
  width:21px;
  height:21px;
  display:grid;
  place-items:center;
  background:#fff;
  border:2px solid var(--border-strong);
  border-radius:50%;
}

.if-track-step>span svg{
  width:11px;
  height:11px;
}

.if-track-step small{
  color:var(--text-faint);
  font-size:8px;
  white-space:nowrap;
}

.if-track-step.is-complete>span{
  color:#fff;
  background:var(--navy);
  border-color:var(--navy);
}

.if-track-step.is-current>span{
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 0 0 5px rgba(232,163,61,.14);
}

.if-track-step.is-current small{
  color:var(--navy);
  font-weight:700;
}

/* Security strip */

.if-security-strip{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:13px 15px;
  background:#eef8f4;
  border:1px solid #d7eee4;
  border-radius:13px;
}

.if-security-icon{
  flex:0 0 auto;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  color:var(--green);
  background:#fff;
  border-radius:10px;
}

.if-security-icon svg{
  width:17px;
  height:17px;
}

.if-security-strip strong,
.if-security-strip span{
  display:block;
}

.if-security-strip strong{
  margin-bottom:2px;
  color:var(--navy);
  font-size:11px;
}

.if-security-strip span{
  color:#718a80;
  font-size:9px;
}

/* Floating status cards */

.if-floating-card{
  position:absolute;
  z-index:3;
  display:flex;
  align-items:center;
  gap:11px;
  min-width:190px;
  padding:12px 14px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--border-strong);
  border-radius:14px;
  box-shadow:0 18px 40px rgba(14,43,70,.14);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}

.if-floating-card--top{
  top:2px;
  right:0;
  animation:ifFloatTop 5.5s ease-in-out infinite;
}

.if-floating-card--bottom{
  bottom:2px;
  left:0;
  animation:ifFloatBottom 6s ease-in-out infinite;
}

.if-floating-check{
  flex:0 0 auto;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--green);
  border-radius:10px;
}

.if-floating-check svg{
  width:15px;
  height:15px;
}

.if-floating-calendar{
  flex:0 0 auto;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  color:var(--navy);
  background:var(--gold-soft);
  border-radius:10px;
  font-size:12px;
  font-weight:700;
}

.if-floating-card strong,
.if-floating-card span{
  display:block;
}

.if-floating-card div>strong{
  margin-bottom:2px;
  color:var(--navy);
  font-size:11px;
}

.if-floating-card div>span{
  color:var(--text-dim);
  font-size:9px;
}

@keyframes ifFloatTop{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}

@keyframes ifFloatBottom{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(7px)}
}

/* Smaller desktop */

@media (max-width:1100px){
  .if-why-layout{
    grid-template-columns:minmax(0,.9fr) minmax(460px,1.1fr);
    gap:48px;
  }

  .if-why-visual{
    padding-right:26px;
  }

  .if-floating-card{
    min-width:175px;
  }
}

/* Tablet */

@media (max-width:900px){
  .if-why-layout{
    grid-template-columns:minmax(0,1fr);
    gap:52px;
  }

  .if-why-content{
    max-width:680px;
  }

  .if-why-content .type-section-heading{
    max-width:650px;
  }

  .if-why-visual{
    max-width:680px;
    margin:0 auto;
    padding:30px 28px 34px;
  }
}

/* Mobile */

@media (max-width:640px){
  .if-why::before,
  .if-why::after{
    display:none;
  }

  .if-why-content .type-section-heading span{
    display:inline;
  }

  .if-why-intro{
    margin-bottom:28px;
  }

  .if-benefit{
    grid-template-columns:46px minmax(0,1fr);
    gap:14px;
    padding:15px;
  }

  .if-benefit-icon{
    width:46px;
    height:46px;
    border-radius:13px;
  }

  .if-benefit-status{
    grid-column:2;
    justify-self:start;
    margin-top:2px;
  }

  .if-why-visual{
    width:100%;
    margin:0;
    padding:18px 0 30px;
  }

  .if-dashboard{
    border-radius:19px;
  }

  .if-dashboard-browser{
    min-height:46px;
    padding:0 13px;
    gap:10px;
  }

  .if-browser-address{
    padding:7px 9px;
    font-size:8px;
  }

  .if-dashboard-body{
    padding:18px;
  }

  .if-dashboard-top h3{
    font-size:19px;
  }

  .if-dashboard-live{
    padding:6px 8px;
    font-size:9px;
  }

  .if-advance-card{
    padding:17px;
  }

  .if-advance-card-top strong{
    font-size:34px;
  }

  .if-dashboard-grid{
    grid-template-columns:1fr;
  }

  .if-dashboard-stat{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
  }

  .if-dashboard-stat>span{
    grid-column:1;
    margin-bottom:3px;
  }

  .if-dashboard-stat strong{
    grid-column:1;
  }

  .if-dashboard-stat small{
    grid-column:2;
    grid-row:1 / span 2;
    margin:0;
  }

  .if-track-step small{
    font-size:7px;
  }

  .if-floating-card{
    position:relative;
    inset:auto;
    width:100%;
    min-width:0;
    margin-top:10px;
    animation:none;
  }

  .if-floating-card--top{
    display:none;
  }
}

/* Narrow mobile */

@media (max-width:400px){
  .if-dashboard-top{
    display:block;
  }

  .if-dashboard-live{
    margin-top:10px;
  }

  .if-payment-heading{
    display:block;
  }

  .if-payment-price{
    margin-top:8px;
  }

  .if-security-strip{
    align-items:flex-start;
  }

  .if-payment-card{
    padding-left:12px;
    padding-right:12px;
  }

  .if-track-step small{
    max-width:58px;
    text-align:center;
    white-space:normal;
    line-height:1.2;
  }
}

@media (prefers-reduced-motion:reduce){
  .if-floating-card{
    animation:none;
  }

  .if-benefit{
    transition:none;
  }
}



/* ==========================================================
   WHY INSTANT FINANCIAL — COURSE-FIRST VERSION
========================================================== */

.if-course-dashboard .if-dashboard-body{
  padding:25px;
}

/* Primary education card */

.if-course-primary{
  overflow:hidden;
  background:#fff;
  border:1px solid var(--border);
  border-radius:17px;
}

.if-course-video{
  position:relative;
  min-height:185px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:16px;
  color:#fff;
  background:
    radial-gradient(circle at 75% 35%,rgba(79,143,224,.3),transparent 32%),
    linear-gradient(135deg,var(--ink) 0%,var(--navy-2) 100%);
}

.if-course-video::before{
  content:"";
  position:absolute;
  top:25px;
  right:50px;
  width:115px;
  height:115px;
  border:22px solid rgba(255,255,255,.045);
  border-radius:50%;
}

.if-course-video-top,
.if-course-video-bottom{
  position:relative;
  z-index:1;
}

.if-course-video-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:600;
  letter-spacing:.11em;
  text-transform:uppercase;
}

.if-course-video-top span:last-child{
  padding:5px 8px;
  background:rgba(255,255,255,.12);
  border-radius:6px;
}

.if-course-video-bottom{
  max-width:280px;
  font-size:15px;
  font-weight:700;
}

.if-course-play{
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
}

.if-course-play span{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  color:var(--navy);
  background:rgba(255,255,255,.94);
  border-radius:50%;
  box-shadow:0 12px 26px rgba(0,0,0,.2);
}

.if-course-play svg{
  width:19px;
  height:19px;
  margin-left:3px;
}

.if-course-primary-body{
  padding:18px;
}

.if-course-primary-body h4{
  margin:3px 0 6px;
  color:var(--navy);
  font-size:18px;
}

.if-course-primary-body p{
  margin:0;
  color:var(--text-dim);
  font-size:11px;
  line-height:1.55;
}

.if-course-progress-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:16px;
  color:var(--text-dim);
  font-size:10px;
}

.if-course-progress-row strong{
  color:var(--navy);
  font-family:var(--font-mono);
}

.if-course-progress{
  height:7px;
  overflow:hidden;
  margin-top:8px;
  background:var(--surface-2);
  border-radius:999px;
}

.if-course-progress span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  border-radius:inherit;
}

/* Course categories */

.if-course-categories{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.if-course-category{
  min-width:0;
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
}

.if-course-category-icon{
  flex:0 0 auto;
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  border-radius:9px;
}

.if-course-category-icon svg{
  width:15px;
  height:15px;
}

.if-course-category-icon--gold{
  color:#d78b15;
  background:var(--gold-soft);
}

.if-course-category-icon--green{
  color:var(--green);
  background:var(--green-soft);
}

.if-course-category-icon--navy{
  color:#fff;
  background:var(--navy);
}

.if-course-category strong,
.if-course-category span{
  display:block;
}

.if-course-category strong{
  overflow:hidden;
  color:var(--navy);
  font-size:10px;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.if-course-category div>span{
  margin-top:2px;
  color:var(--text-faint);
  font-size:8px;
  line-height:1.3;
}

/* Secondary cashback/advance card */

.if-secondary-advance{
  display:grid;
  grid-template-columns:42px minmax(0,1fr) auto;
  align-items:center;
  gap:12px;
  margin-top:12px;
  padding:14px;
  background:#fff8eb;
  border:1px solid #f2ddb9;
  border-radius:14px;
}

.if-secondary-advance-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  color:var(--ink);
  background:var(--gold);
  border-radius:12px;
}

.if-secondary-advance-icon svg{
  width:19px;
  height:19px;
}

.if-secondary-advance-copy{
  min-width:0;
}

.if-secondary-advance-copy span,
.if-secondary-advance-copy strong,
.if-secondary-advance-copy small{
  display:block;
}

.if-secondary-advance-copy>span{
  color:#a16c18;
  font-family:var(--font-mono);
  font-size:8px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.if-secondary-advance-copy strong{
  margin-top:2px;
  color:var(--navy);
  font-size:11px;
}

.if-secondary-advance-copy small{
  margin-top:2px;
  color:var(--text-dim);
  font-size:8px;
  line-height:1.4;
}

.if-secondary-advance-amount{
  padding-left:12px;
  text-align:right;
  border-left:1px solid #efd8b2;
}

.if-secondary-advance-amount span,
.if-secondary-advance-amount strong{
  display:block;
}

.if-secondary-advance-amount span{
  color:#a16c18;
  font-size:8px;
}

.if-secondary-advance-amount strong{
  color:var(--navy);
  font-family:var(--font-mono);
  font-size:16px;
}

.if-floating-money{
  font-family:var(--font-mono);
  font-size:16px;
}

@media (max-width:900px){
  .if-course-video{
    min-height:220px;
  }
}

@media (max-width:640px){
  .if-course-dashboard .if-dashboard-body{
    padding:17px;
  }

  .if-course-video{
    min-height:180px;
  }

  .if-course-categories{
    grid-template-columns:1fr;
  }

  .if-course-category{
    padding:10px 12px;
  }

  .if-course-category strong{
    font-size:11px;
  }

  .if-course-category div>span{
    font-size:9px;
  }

  .if-secondary-advance{
    grid-template-columns:40px minmax(0,1fr);
  }

  .if-secondary-advance-amount{
    grid-column:2;
    padding:8px 0 0;
    text-align:left;
    border-top:1px solid #efd8b2;
    border-left:0;
  }

  .if-secondary-advance-amount span,
  .if-secondary-advance-amount strong{
    display:inline;
  }

  .if-secondary-advance-amount strong{
    margin-left:5px;
  }
}



/* ==========================================================
   WHY INSTANT FINANCIAL — FOUR ACADEMY COURSES
   Final override: no cards floating outside the dashboard.
========================================================== */

.if-why-visual{
  padding:0;
}

.if-floating-card,
.if-floating-card--top,
.if-floating-card--bottom{
  display:none!important;
}

/* Make the Academy the visual priority */
.if-course-dashboard{
  width:100%;
  max-width:650px;
  margin-left:auto;
}

.if-course-dashboard .if-dashboard-body{
  padding:24px;
}

/* Featured lesson card */
.if-course-primary{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(190px,.95fr);
  min-height:220px;
}

.if-course-video{
  min-height:220px;
}

.if-course-primary-body{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

/* Four selectable-looking course rows */
.if-course-categories{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.if-course-category{
  min-height:64px;
  padding:11px 12px;
  transition:
    transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}

.if-course-category:hover{
  transform:translateY(-2px);
  border-color:#c9dcff;
  background:#f8fbff;
  box-shadow:0 10px 24px rgba(14,43,70,.06);
}

.if-course-category.is-active{
  background:var(--blue-soft);
  border-color:#c9dcff;
}

.if-course-category strong{
  font-size:11px;
}

.if-course-category div>span{
  font-size:9px;
}

/* Fourth Investing icon */
.if-course-category-icon--purple{
  color:#fff;
  background:linear-gradient(150deg,#7048b6,#5a3690);
}

/* Keep the secondary cash advance clearly secondary */
.if-secondary-advance{
  margin-top:12px;
  background:#fffaf1;
}

.if-secondary-advance-copy>span{
  color:#9a691d;
}

.if-secondary-advance-copy strong{
  font-size:11px;
}

/* Tablet */
@media (max-width:1100px){
  .if-why-layout{
    grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr);
    gap:44px;
  }

  .if-course-primary{
    grid-template-columns:1fr;
  }

  .if-course-video{
    min-height:210px;
  }
}

@media (max-width:900px){
  .if-why-visual{
    max-width:680px;
    margin:0 auto;
  }

  .if-course-dashboard{
    max-width:680px;
    margin:0 auto;
  }

  .if-course-primary{
    grid-template-columns:minmax(0,1.05fr) minmax(190px,.95fr);
  }
}

/* Mobile */
@media (max-width:640px){
  .if-course-dashboard .if-dashboard-body{
    padding:17px;
  }

  .if-course-primary{
    grid-template-columns:1fr;
  }

  .if-course-video{
    min-height:190px;
  }

  .if-course-categories{
    grid-template-columns:1fr;
  }

  .if-course-category{
    min-height:62px;
  }
}



/* ==========================================================
   WHY INSTANT FINANCIAL — FINAL THREE-CARD CONTENT
========================================================== */

/*
  The final section uses the original .features-grid and .feature-card
  structure. Hide any dashboard-only elements from previous variations.
*/
#why-instant-financial .if-why-layout,
#why-instant-financial .if-why-content,
#why-instant-financial .if-why-visual,
#why-instant-financial .if-dashboard,
#why-instant-financial .if-floating-card{
  display:none;
}

/* Course list */

.if-course-list-card{
  display:flex;
  flex-direction:column;
  gap:8px;
  padding:12px;
}

.if-mini-course{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:9px 10px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:10px;
}

.if-mini-course.is-active{
  background:var(--blue-soft);
  border-color:#c9dcff;
}

.if-mini-course-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:10px;
}

.if-mini-course-icon svg{
  width:17px;
  height:17px;
}

.if-mini-course-icon--gold{
  color:#a96a0d;
  background:var(--gold-soft);
}

.if-mini-course-icon--green{
  color:var(--green);
  background:var(--green-soft);
}

.if-mini-course-icon--navy{
  color:var(--gold);
  background:var(--navy);
}

.if-mini-course-icon--purple{
  color:#fff;
  background:linear-gradient(150deg,#7048b6,#5a3690);
}

.if-mini-course-copy{
  min-width:0;
}

.if-mini-course-copy strong,
.if-mini-course-copy span{
  display:block;
}

.if-mini-course-copy strong{
  color:var(--navy);
  font-size:11px;
  line-height:1.3;
}

.if-mini-course-copy span{
  margin-top:2px;
  color:var(--text-faint);
  font-size:9px;
}

.if-mini-course-arrow{
  color:var(--text-faint);
  font-size:18px;
  line-height:1;
}

.if-mini-course-play{
  width:25px;
  height:25px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--navy);
  border-radius:50%;
}

.if-mini-course-play svg{
  width:10px;
  height:10px;
  margin-left:1px;
}

/* Cashback visual */

.if-cashback-card{
  padding:17px;
}

.if-cashback-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.if-cashback-top span,
.if-cashback-top strong{
  display:block;
}

.if-cashback-top div>span{
  margin-bottom:3px;
  color:var(--text-dim);
  font-size:10px;
}

.if-cashback-top div>strong{
  color:var(--green);
  font-size:13px;
}

.if-cashback-status{
  padding:5px 8px;
  color:#168556;
  background:var(--green-soft);
  border-radius:999px;
  font-size:8px;
  font-weight:700;
  white-space:nowrap;
}

.if-cashback-amount{
  margin-top:20px;
}

.if-cashback-amount span,
.if-cashback-amount strong{
  display:block;
}

.if-cashback-amount span{
  color:var(--text-dim);
  font-size:10px;
}

.if-cashback-amount strong{
  margin-top:2px;
  color:var(--navy);
  font-family:var(--font-mono);
  font-size:30px;
  line-height:1.1;
}

.if-cashback-track{
  height:7px;
  overflow:hidden;
  margin-top:14px;
  background:var(--border);
  border-radius:999px;
}

.if-cashback-track span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,var(--green),#6fd3a8);
  border-radius:inherit;
}

.if-cashback-detail{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:16px;
  padding-top:14px;
  border-top:1px solid var(--border);
}

.if-cashback-check{
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:var(--green);
  background:var(--green-soft);
  border-radius:50%;
}

.if-cashback-check svg{
  width:13px;
  height:13px;
}

.if-cashback-detail strong,
.if-cashback-detail span{
  display:block;
}

.if-cashback-detail div>strong{
  color:var(--navy);
  font-size:10px;
}

.if-cashback-detail div>span{
  margin-top:2px;
  color:var(--text-dim);
  font-size:9px;
}

/* Support visual */

.if-support-card{
  padding:16px;
}

.if-support-header{
  display:grid;
  grid-template-columns:38px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
}

.if-support-avatar{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  color:#fff;
  background:var(--navy);
  border-radius:11px;
}

.if-support-avatar svg{
  width:18px;
  height:18px;
}

.if-support-header strong,
.if-support-header span{
  display:block;
}

.if-support-header div>strong{
  color:var(--navy);
  font-size:10px;
}

.if-support-header div>span{
  margin-top:2px;
  color:var(--text-faint);
  font-size:8px;
}

.if-support-online{
  display:flex!important;
  align-items:center;
  gap:5px;
  padding:5px 8px;
  color:#168556;
  background:var(--green-soft);
  border-radius:999px;
  font-size:8px;
  font-weight:700;
}

.if-support-online>span{
  width:6px;
  height:6px;
  background:var(--green);
  border-radius:50%;
}

.if-support-message{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:15px;
  padding:13px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:11px;
}

.if-support-message-icon{
  width:31px;
  height:31px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  color:var(--blue);
  background:var(--blue-soft);
  border-radius:9px;
}

.if-support-message-icon svg{
  width:15px;
  height:15px;
}

.if-support-message strong,
.if-support-message span{
  display:block;
}

.if-support-message div>strong{
  color:var(--navy);
  font-size:10px;
}

.if-support-message div>span{
  margin-top:2px;
  color:var(--text-dim);
  font-size:9px;
}

.if-support-rating{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-top:15px;
}

.if-support-rating div>strong{
  display:block;
  margin-top:3px;
  color:var(--navy);
  font-size:10px;
}

.if-rating-stars{
  display:block;
  color:var(--gold);
  font-size:13px;
  letter-spacing:1px;
  line-height:1;
}

.if-support-rating>span{
  color:var(--text-faint);
  font-size:8px;
}

/* Card alignment */

#why-instant-financial .features-grid{
  align-items:stretch;
}

#why-instant-financial .feature-card{
  min-width:0;
  height:100%;
}

#why-instant-financial .feature-card>p{
  min-height:68px;
}

#why-instant-financial .feature-visual{
  width:100%;
}

#why-instant-financial .fv-card{
  min-height:218px;
}

/* Tablet */

@media (max-width:980px){
  #why-instant-financial .features-grid{
    grid-template-columns:1fr;
  }

  #why-instant-financial .feature-card{
    width:100%;
    max-width:680px;
  }

  #why-instant-financial .feature-card>p{
    min-height:0;
  }

  #why-instant-financial .fv-card{
    min-height:auto;
  }
}

/* Mobile */

@media (max-width:640px){
  #why-instant-financial .feature-card{
    padding:22px;
  }

  .if-support-header{
    grid-template-columns:38px minmax(0,1fr);
  }

  .if-support-online{
    grid-column:2;
    justify-self:start;
  }
}

@media (max-width:380px){
  .if-mini-course{
    grid-template-columns:34px minmax(0,1fr) auto;
    gap:8px;
    padding:8px;
  }

  .if-mini-course-icon{
    width:34px;
    height:34px;
  }

  .if-cashback-top{
    display:block;
  }

  .if-cashback-status{
    display:inline-flex;
    margin-top:8px;
  }

  .if-support-rating{
    align-items:flex-start;
    flex-direction:column;
  }
}



/* ==========================================================
   WHY INSTANT FINANCIAL — SVG ICON RENDERING FIX
   Prevents emoji/glyph substitution in stars and arrows.
========================================================== */

#why-instant-financial svg{
  display:block;
  flex-shrink:0;
}

.if-mini-course-arrow{
  width:18px;
  height:18px;
  display:grid;
  place-items:center;
  color:var(--text-faint);
  font-size:0;
}

.if-mini-course-arrow svg{
  width:13px;
  height:13px;
}

.if-rating-stars{
  display:flex;
  align-items:center;
  gap:2px;
  color:var(--gold);
  font-size:0;
  letter-spacing:0;
}

.if-rating-stars svg{
  width:13px;
  height:13px;
  fill:currentColor;
  stroke:none;
}



/* ==========================================================
   WHY INSTANT FINANCIAL — ICON CENTERING FIX
========================================================== */

/* Remove inline SVG baseline spacing everywhere in this section */
#why-instant-financial svg{
  display:block!important;
  margin:0!important;
  vertical-align:middle!important;
}

/* Every icon holder uses true two-axis centering */
#why-instant-financial .feature-icon-wrap,
#why-instant-financial .if-mini-course-icon,
#why-instant-financial .if-mini-course-play,
#why-instant-financial .if-mini-course-arrow,
#why-instant-financial .if-cashback-check,
#why-instant-financial .if-support-avatar,
#why-instant-financial .if-support-message-icon{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  line-height:0!important;
  text-align:center!important;
  padding:0!important;
}

/* Keep SVGs optically centered and prevent inherited sizing issues */
#why-instant-financial .feature-icon-wrap > svg{
  width:22px!important;
  height:22px!important;
  flex:0 0 22px!important;
}

#why-instant-financial .if-mini-course-icon > svg{
  width:17px!important;
  height:17px!important;
  flex:0 0 17px!important;
}

#why-instant-financial .if-mini-course-play > svg{
  width:10px!important;
  height:10px!important;
  flex:0 0 10px!important;
  transform:translateX(1px);
}

#why-instant-financial .if-mini-course-arrow > svg{
  width:13px!important;
  height:13px!important;
  flex:0 0 13px!important;
}

#why-instant-financial .if-cashback-check > svg{
  width:13px!important;
  height:13px!important;
  flex:0 0 13px!important;
}

#why-instant-financial .if-support-avatar > svg{
  width:18px!important;
  height:18px!important;
  flex:0 0 18px!important;
}

#why-instant-financial .if-support-message-icon > svg{
  width:15px!important;
  height:15px!important;
  flex:0 0 15px!important;
}

/* Rating stars */
#why-instant-financial .if-rating-stars{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:2px!important;
  line-height:0!important;
}

#why-instant-financial .if-rating-stars svg{
  width:13px!important;
  height:13px!important;
  flex:0 0 13px!important;
}

/* Prevent pseudo-elements or text line-height from shifting icon boxes */
#why-instant-financial .feature-icon-wrap::before,
#why-instant-financial .feature-icon-wrap::after,
#why-instant-financial .if-mini-course-icon::before,
#why-instant-financial .if-mini-course-icon::after{
  content:none!important;
}



/* ==========================================================
   HERO — INTERACTIVE PLATFORM PREVIEW
========================================================== */

.hero-platform-wrap{
  position:relative;
  width:100%;
  max-width:620px;
  margin-left:auto;
}

.hero-platform{
  overflow:hidden;
  background:#fff;
  border:1px solid rgba(215,225,237,.95);
  border-radius:25px;
  box-shadow:
    0 42px 90px -34px rgba(0,0,0,.58),
    0 14px 34px -18px rgba(14,34,54,.3);
}

.hero-platform-bar{
  min-height:54px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:14px;
  padding:0 17px;
  background:#f5f8fc;
  border-bottom:1px solid var(--border);
}

.hero-platform-dots{
  display:flex;
  gap:7px;
}

.hero-platform-dots span{
  width:9px;
  height:9px;
  background:#d3dfec;
  border-radius:50%;
}

.hero-platform-url{
  min-width:0;
  overflow:hidden;
  padding:8px 13px;
  color:#98a7bb;
  background:#fff;
  border:1px solid var(--border);
  border-radius:9px;
  font-family:var(--font-mono);
  font-size:10px;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.hero-platform-lock{
  width:18px;
  height:18px;
  color:#8ca0b5;
}

.hero-platform-body{
  padding:24px;
}

.hero-platform-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:18px;
}

.hero-platform-kicker{
  display:block;
  margin-bottom:6px;
  color:var(--blue);
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
}

.hero-platform-heading h3{
  max-width:430px;
  margin:0;
  color:var(--navy);
  font-size:24px;
  line-height:1.16;
  letter-spacing:-.035em;
}

.hero-platform-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  flex:0 0 auto;
  padding:8px 11px;
  color:#168556;
  background:var(--green-soft);
  border-radius:999px;
  font-size:10px;
  font-weight:700;
}

.hero-platform-status::before{
  content:"";
  width:7px;
  height:7px;
  background:var(--green);
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(46,158,107,.12);
}

.hero-platform-tabs{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  margin-top:20px;
  padding:5px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:13px;
}

.hero-platform-tab{
  appearance:none;
  min-width:0;
  padding:10px 8px;
  color:var(--text-dim);
  background:transparent;
  border:0;
  border-radius:9px;
  font-family:var(--font-body);
  font-size:11px;
  font-weight:700;
  cursor:pointer;
  transition:background .2s ease,color .2s ease,box-shadow .2s ease;
}

.hero-platform-tab.is-active{
  color:var(--navy);
  background:#fff;
  box-shadow:0 5px 16px rgba(14,34,54,.08);
}

.hero-platform-panels{
  position:relative;
  margin-top:14px;
}

.hero-platform-panel{
  display:none;
}

.hero-platform-panel.is-active{
  display:block;
  animation:heroPanelIn .35s ease both;
}

@keyframes heroPanelIn{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

/* Academy panel */

.hero-academy-feature{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(180px,.92fr);
  overflow:hidden;
  min-height:238px;
  border:1px solid var(--border);
  border-radius:17px;
}

.hero-academy-media{
  position:relative;
  min-height:238px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:18px;
  color:#fff;
  background:
    radial-gradient(circle at 68% 42%,rgba(79,143,224,.36),transparent 32%),
    linear-gradient(145deg,#0e2b46,#234f79);
}

.hero-academy-media::before{
  content:"";
  position:absolute;
  top:45px;
  left:50%;
  width:108px;
  height:108px;
  transform:translateX(-50%);
  border:19px solid rgba(255,255,255,.05);
  border-radius:50%;
}

.hero-academy-top,
.hero-academy-title{
  position:relative;
  z-index:1;
}

.hero-academy-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-family:var(--font-mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.hero-academy-top span:last-child{
  padding:5px 8px;
  background:rgba(255,255,255,.13);
  border-radius:7px;
}

.hero-academy-play{
  position:relative;
  z-index:1;
  align-self:center;
  width:58px;
  height:58px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--navy);
  background:#fff;
  border:0;
  border-radius:50%;
  cursor:pointer;
  box-shadow:0 13px 30px rgba(0,0,0,.2);
  transition:transform .2s ease;
}

.hero-academy-play:hover{
  transform:scale(1.06);
}

.hero-academy-play svg{
  width:20px;
  height:20px;
  margin-left:3px;
}

.hero-academy-title{
  font-size:16px;
  font-weight:700;
}

.hero-academy-info{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:22px;
}

.hero-academy-label{
  color:#9aabc0;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.hero-academy-info h4{
  margin:8px 0;
  color:var(--navy);
  font-size:20px;
  line-height:1.2;
}

.hero-academy-info p{
  margin:0;
  color:var(--text-dim);
  font-size:12px;
  line-height:1.55;
}

.hero-progress-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:20px;
  color:var(--text-dim);
  font-size:10px;
}

.hero-progress-row strong{
  color:var(--navy);
  font-family:var(--font-mono);
}

.hero-progress{
  height:7px;
  margin-top:8px;
  overflow:hidden;
  background:var(--surface-2);
  border-radius:999px;
}

.hero-progress span{
  display:block;
  width:42%;
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  border-radius:inherit;
}

.hero-course-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:12px;
}

.hero-course{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
  padding:12px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
}

.hero-course.is-active{
  background:var(--blue-soft);
  border-color:#c9dcff;
}

.hero-course-icon{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
  border-radius:10px;
}

.hero-course-icon svg{
  width:16px;
  height:16px;
}

.hero-course-icon.gold{color:#a96a0d;background:var(--gold-soft)}
.hero-course-icon.green{color:var(--green);background:var(--green-soft)}
.hero-course-icon.navy{color:var(--gold);background:var(--navy)}
.hero-course-icon.purple{color:#fff;background:linear-gradient(150deg,#7048b6,#5a3690)}

.hero-course strong,
.hero-course span{
  display:block;
}

.hero-course strong{
  color:var(--navy);
  font-size:10px;
}

.hero-course div>span{
  margin-top:2px;
  color:var(--text-faint);
  font-size:8px;
}

/* Cashback panel */

.hero-cashback-card{
  padding:22px;
  background:
    radial-gradient(circle at 90% 10%,rgba(232,163,61,.18),transparent 30%),
    #fffaf1;
  border:1px solid #f0d8ad;
  border-radius:17px;
}

.hero-cashback-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.hero-cashback-head span{
  display:block;
  color:#9a691d;
  font-size:10px;
}

.hero-cashback-head strong{
  display:block;
  margin-top:3px;
  color:var(--navy);
  font-size:16px;
}

.hero-cashback-badge{
  padding:7px 10px;
  color:#168556!important;
  background:var(--green-soft);
  border-radius:999px;
  font-size:9px!important;
  font-weight:700;
}

.hero-cashback-amount{
  margin-top:25px;
}

.hero-cashback-amount span{
  display:block;
  color:var(--text-dim);
  font-size:11px;
}

.hero-cashback-amount strong{
  display:block;
  margin-top:4px;
  color:var(--navy);
  font-family:var(--font-mono);
  font-size:44px;
  line-height:1;
}

.hero-cashback-track{
  height:8px;
  overflow:hidden;
  margin-top:18px;
  background:#ebdfcb;
  border-radius:999px;
}

.hero-cashback-track span{
  display:block;
  width:74%;
  height:100%;
  background:linear-gradient(90deg,var(--gold),var(--gold-2));
  border-radius:inherit;
}

.hero-cashback-benefits{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin-top:18px;
}

.hero-cashback-benefit{
  display:flex;
  align-items:center;
  gap:9px;
  padding:12px;
  background:#fff;
  border:1px solid #f0dfc2;
  border-radius:11px;
}

.hero-cashback-benefit svg{
  width:16px;
  height:16px;
  color:var(--green);
  flex:0 0 16px;
}

.hero-cashback-benefit span{
  color:var(--navy);
  font-size:10px;
  font-weight:700;
}

/* Account panel */

.hero-account-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.hero-account-stat{
  padding:16px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:13px;
}

.hero-account-stat span,
.hero-account-stat strong,
.hero-account-stat small{
  display:block;
}

.hero-account-stat span{
  color:var(--text-dim);
  font-size:9px;
}

.hero-account-stat strong{
  margin-top:6px;
  color:var(--navy);
  font-family:var(--font-mono);
  font-size:20px;
}

.hero-account-stat small{
  margin-top:3px;
  color:var(--text-faint);
  font-size:8px;
}

.hero-payment-preview{
  margin-top:10px;
  padding:17px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:13px;
}

.hero-payment-head{
  display:flex;
  justify-content:space-between;
  gap:12px;
}

.hero-payment-head span{
  color:var(--text-dim);
  font-size:9px;
}

.hero-payment-head strong{
  color:var(--navy);
  font-family:var(--font-mono);
  font-size:12px;
}

.hero-payment-line{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:22px;
}

.hero-payment-line::before{
  content:"";
  position:absolute;
  top:8px;
  left:12%;
  right:12%;
  height:2px;
  background:var(--border-strong);
}

.hero-payment-step{
  position:relative;
  z-index:1;
  display:grid;
  justify-items:center;
  gap:6px;
}

.hero-payment-step i{
  width:18px;
  height:18px;
  display:block;
  background:#fff;
  border:2px solid var(--border-strong);
  border-radius:50%;
}

.hero-payment-step.is-complete i{
  background:var(--navy);
  border-color:var(--navy);
}

.hero-payment-step.is-current i{
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:0 0 0 5px rgba(232,163,61,.15);
}

.hero-payment-step small{
  color:var(--text-faint);
  font-size:7px;
}

/* Responsive */

@media (max-width:1180px) and (min-width:981px){
  .hero-platform-body{padding:20px}
  .hero-platform-heading h3{font-size:21px}
  .hero-academy-info{padding:18px}
}

@media (max-width:980px){
  .hero-platform-wrap{
    max-width:680px;
    margin:0 auto;
  }
}

@media (max-width:640px){
  .hero-platform{
    border-radius:20px;
  }

  .hero-platform-bar{
    min-height:47px;
    padding:0 13px;
    gap:9px;
  }

  .hero-platform-url{
    font-size:8px;
    padding:7px 9px;
  }

  .hero-platform-body{
    padding:16px;
  }

  .hero-platform-heading{
    display:block;
  }

  .hero-platform-heading h3{
    font-size:20px;
  }

  .hero-platform-status{
    margin-top:10px;
  }

  .hero-platform-tabs{
    grid-template-columns:1fr;
  }

  .hero-platform-tab{
    text-align:left;
    padding:10px 12px;
  }

  .hero-academy-feature{
    grid-template-columns:1fr;
  }

  .hero-academy-media{
    min-height:200px;
  }

  .hero-course-grid,
  .hero-cashback-benefits,
  .hero-account-grid{
    grid-template-columns:1fr;
  }

  .hero-cashback-amount strong{
    font-size:38px;
  }
}



/* ==========================================================
   CUSTOMER REVIEWS SECTION
========================================================== */

.reviews-section{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 10%,rgba(79,143,224,.08),transparent 28%),
    linear-gradient(180deg,#f8faff 0%,#fff 100%);
}

.reviews-section::before{
  content:"";
  position:absolute;
  top:-160px;
  right:-120px;
  width:420px;
  height:420px;
  border:1px solid rgba(21,49,77,.05);
  border-radius:50%;
  pointer-events:none;
}

.reviews-intro{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:32px;
}

.reviews-copy{
  max-width:620px;
}

.reviews-summary{
  flex:0 0 auto;
  min-width:230px;
  padding:20px 22px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:0 14px 34px rgba(21,49,77,.06);
}

.reviews-summary-top{
  display:flex;
  align-items:center;
  gap:12px;
}

.reviews-score{
  color:var(--navy);
  font-family:var(--font-mono);
  font-size:34px;
  font-weight:700;
  line-height:1;
}

.reviews-summary-stars{
  display:flex;
  gap:3px;
  color:var(--gold);
}

.reviews-summary-stars svg{
  width:17px;
  height:17px;
  fill:currentColor;
}

.reviews-summary p{
  margin:10px 0 0;
  color:var(--text-dim);
  font-size:12px;
}

.reviews-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
  margin-top:50px;
}

.review-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:26px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:0 16px 42px rgba(21,49,77,.05);
  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.review-card:hover{
  transform:translateY(-5px);
  border-color:var(--border-strong);
  box-shadow:0 22px 48px rgba(21,49,77,.09);
}

.review-card::before{
  content:"“";
  position:absolute;
  top:18px;
  right:22px;
  color:var(--blue-soft);
  font-family:Georgia,serif;
  font-size:72px;
  line-height:1;
  pointer-events:none;
}

.review-stars{
  position:relative;
  z-index:1;
  display:flex;
  gap:3px;
  color:var(--gold);
}

.review-stars svg{
  width:16px;
  height:16px;
  fill:currentColor;
}

.review-card blockquote{
  position:relative;
  z-index:1;
  margin:20px 0 24px;
  color:var(--navy);
  font-size:15px;
  font-weight:600;
  line-height:1.65;
}

.review-meta{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:auto;
  padding-top:18px;
  border-top:1px solid var(--border);
}

.review-avatar{
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 44px;
  color:#fff;
  background:linear-gradient(145deg,var(--navy-2),var(--navy));
  border-radius:50%;
  font-size:14px;
  font-weight:700;
}

.review-person{
  min-width:0;
}

.review-person strong,
.review-person span{
  display:block;
}

.review-person strong{
  color:var(--navy);
  font-size:13px;
}

.review-person span{
  margin-top:2px;
  color:var(--text-faint);
  font-size:10px;
}

.review-verified{
  display:inline-flex!important;
  align-items:center;
  gap:5px;
  margin-left:auto;
  padding:6px 8px;
  color:#168556!important;
  background:var(--green-soft);
  border-radius:999px;
  font-size:8px!important;
  font-weight:700;
  white-space:nowrap;
}

.review-verified svg{
  width:11px;
  height:11px;
}

.reviews-disclaimer{
  margin-top:22px;
  color:var(--text-faint);
  font-size:11px;
  line-height:1.55;
}

@media (max-width:980px){
  .reviews-intro{
    align-items:flex-start;
    flex-direction:column;
  }

  .reviews-summary{
    min-width:0;
  }

  .reviews-grid{
    grid-template-columns:1fr;
  }

  .review-card{
    max-width:680px;
  }
}

@media (max-width:640px){
  .reviews-summary{
    width:100%;
  }

  .reviews-grid{
    margin-top:36px;
    gap:16px;
  }

  .review-card{
    padding:22px;
  }

  .review-card blockquote{
    font-size:14px;
  }

  .review-meta{
    align-items:flex-start;
  }

  .review-verified{
    margin-left:0;
  }
}

@media (max-width:420px){
  .review-meta{
    display:grid;
    grid-template-columns:44px minmax(0,1fr);
  }

  .review-verified{
    grid-column:2;
    justify-self:start;
  }
}



/* =====================================================================
   FINAL SITE-WIDE RESPONSIVE SYSTEM
   Keep this block at the very end of Global Styles.
   It standardizes typography and responsiveness across every section.
===================================================================== */

:root{
  /* One typography system for every section */
  --type-eyebrow-size:11.5px;
  --type-eyebrow-line:1.2;
  --type-eyebrow-spacing:.14em;

  --type-section-heading:42px;
  --type-section-heading-line:1.08;
  --type-section-heading-spacing:-.025em;

  --type-subheading:24px;
  --type-subheading-line:1.22;
  --type-subheading-spacing:-.02em;

  --type-section-description:16.5px;
  --type-section-description-line:1.6;

  --type-body:14.5px;
  --type-body-line:1.62;

  --site-section-space:104px;
  --site-container-pad:28px;
}

/* Prevent any widget or grid child from forcing horizontal overflow */
html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden!important;
}

body{
  font-size:var(--type-body);
  line-height:var(--type-body-line);
}

.container,
.hero-grid,
.features-grid,
.faq-grid,
.plans-grid,
.sim-card,
#ifw-root *,
#ac-root *,
#cs-root *,
#ft-root *{
  min-width:0;
}

img,
video,
iframe,
svg{
  max-width:100%;
}

/* =====================================================================
   SHARED SECTION SPACING
===================================================================== */

.section{
  padding-top:var(--site-section-space)!important;
  padding-bottom:var(--site-section-space)!important;
}

.container{
  width:100%;
  max-width:var(--container);
  padding-left:var(--site-container-pad)!important;
  padding-right:var(--site-container-pad)!important;
}

/* Custom widgets use the same vertical rhythm as .section */
#ifw-root .ifw-wrap,
#ac-root .ac-shell,
#cs-root > section > div,
#ft-root footer > div:not(:first-child){
  box-sizing:border-box;
}

/* =====================================================================
   MASTER TYPOGRAPHY
===================================================================== */

/* Eyebrows */
.type-eyebrow,
.eyebrow,
#ac-root .ac-eyebrow,
#ifw-root .ifw-eyebrow,
#cs-root .type-eyebrow{
  font-family:var(--font-mono)!important;
  font-size:var(--type-eyebrow-size)!important;
  line-height:var(--type-eyebrow-line)!important;
  letter-spacing:var(--type-eyebrow-spacing)!important;
  font-weight:700!important;
  text-transform:uppercase!important;
}

/* Main section headings */
.type-section-heading,
#ac-root .ac-heading,
#ifw-root .ifw-intro h2,
#cs-root .type-section-heading,
.reviews-copy .type-section-heading{
  font-family:var(--font-display)!important;
  font-size:var(--type-section-heading)!important;
  line-height:var(--type-section-heading-line)!important;
  letter-spacing:var(--type-section-heading-spacing)!important;
  font-weight:800!important;
}

/* Section descriptions */
.type-section-description,
.lede.type-section-description,
#ac-root .ac-description,
#ifw-root .ifw-intro p,
#cs-root .type-section-description{
  font-family:var(--font-body)!important;
  font-size:var(--type-section-description)!important;
  line-height:var(--type-section-description-line)!important;
  font-weight:400!important;
}

/* Repeated subsection/card headings */
.feature-card h3,
.plan-name,
.sim-left h3,
.video-title,
.faq-item summary,
.review-card h3,
#ac-root [data-ac-title],
#ifw-root .ifw-copy h3,
#cs-root h3{
  font-family:var(--font-display)!important;
  font-size:var(--type-subheading)!important;
  line-height:var(--type-subheading-line)!important;
  letter-spacing:var(--type-subheading-spacing)!important;
  font-weight:800!important;
}

/* Repeated body copy */
.feature-card > p,
.feature-card p,
.sim-left p,
.plan-tagline,
.plan-features li,
.faq-body,
.review-card blockquote,
#ac-root [data-ac-desc],
#ifw-root .ifw-copy p,
#cs-root p{
  font-family:var(--font-body)!important;
  line-height:var(--type-body-line)!important;
}

/* Keep card text smaller than section intro text, but consistent */
.feature-card > p,
.sim-left p,
.plan-tagline,
.plan-features li,
.faq-body,
#ac-root [data-ac-desc],
#ifw-root .ifw-copy p,
#cs-root h3 + p{
  font-size:var(--type-body)!important;
}

/* =====================================================================
   NAVIGATION
===================================================================== */

.nav{
  width:100%;
}

.nav-inner{
  min-width:0;
}

.brand-logo{
  flex:0 0 170px!important;
}

.nav-links{
  justify-content:center;
  min-width:0;
}

.nav-cta{
  flex:0 0 auto;
}

@media (max-width:980px){
  .nav-links{
    gap:22px;
  }

  .nav-cta{
    gap:10px;
  }
}

@media (max-width:880px){
  .nav-inner{
    height:64px!important;
  }

  .nav-links{
    display:none!important;
  }

  .mobile-menu-inner{
    padding-left:var(--site-container-pad)!important;
    padding-right:var(--site-container-pad)!important;
  }
}

/* =====================================================================
   HERO + INTERACTIVE PLATFORM PREVIEW
===================================================================== */

.hero-grid{
  grid-template-columns:minmax(0,1fr) minmax(440px,.95fr)!important;
  gap:clamp(40px,5vw,72px)!important;
}

.hero-grid > *{
  min-width:0;
}

.hero h1{
  max-width:650px;
}

.hero-platform-wrap,
.phone-wrap,
.app-demo{
  width:100%;
  min-width:0;
}

.hero-platform{
  width:100%;
}

@media (max-width:1050px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr) minmax(390px,.9fr)!important;
    gap:38px!important;
  }
}

@media (max-width:980px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .hero-grid > div:first-child{
    max-width:720px;
  }

  .hero-platform-wrap,
  .phone-wrap{
    max-width:680px;
    margin-inline:auto;
  }
}

@media (max-width:640px){
  .hero h1{
    font-size:clamp(36px,10vw,46px)!important;
    line-height:1.06!important;
  }

  .hero-actions,
  .hero-actions .btn{
    width:100%;
  }

  .hero-social{
    max-width:100%;
  }
}

/* =====================================================================
   BANK MARQUEE
===================================================================== */

.logo-track{
  max-width:none;
}

.logo-item{
  flex:0 0 auto;
}

.logo-item img{
  width:auto!important;
  max-width:none!important;
  object-fit:contain;
}

/* =====================================================================
   WHY INSTANT FINANCIAL
===================================================================== */

#why-instant-financial .features-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  align-items:stretch;
}

#why-instant-financial .feature-card{
  width:100%;
  min-width:0;
  height:100%;
}

#why-instant-financial .feature-card > p{
  min-height:68px;
}

#why-instant-financial .feature-visual,
#why-instant-financial .fv-card{
  width:100%;
}

@media (max-width:980px){
  #why-instant-financial .features-grid{
    grid-template-columns:1fr!important;
  }

  #why-instant-financial .feature-card{
    max-width:680px;
  }

  #why-instant-financial .feature-card > p{
    min-height:0;
  }
}

/* =====================================================================
   HOW IT WORKS
===================================================================== */

#ifw-root{
  --ifw-step-space:64px;
}

#ifw-root .ifw-wrap{
  width:100%;
  max-width:var(--container)!important;
  padding:var(--ifw-step-space) var(--site-container-pad)!important;
}

/* Keep the section intro breathing room without adding a full section gap
   before Step 01. */
#ifw-root .ifw-section:first-of-type .ifw-wrap{
  padding-top:var(--site-section-space)!important;
  padding-bottom:24px!important;
}

#ifw-root .ifw-section[data-ifw-step="0"] .ifw-wrap{
  padding-top:52px!important;
}

#ifw-root .ifw-section[data-ifw-step="2"] .ifw-wrap{
  padding-bottom:88px!important;
}

/* Match the standard blue eyebrow bubbles used across the website. */
#ifw-root .ifw-pill{
  font-family:var(--font-mono)!important;
  font-size:var(--type-eyebrow-size)!important;
  font-weight:700!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  color:var(--blue)!important;
  background:var(--blue-soft)!important;
  padding:6px 16px!important;
  border-radius:999px!important;
  gap:0!important;
}

#ifw-root .ifw-pill .dot{
  display:none!important;
}

#ifw-root .ifw-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

#ifw-root .ifw-card{
  width:100%;
  min-width:0;
}

#ifw-root .ifw-copy h3{
  max-width:520px;
}

@media (max-width:820px){
  #ifw-root{
    --ifw-step-space:48px;
  }

  #ifw-root .ifw-section:first-of-type .ifw-wrap{
    padding-top:72px!important;
    padding-bottom:18px!important;
  }

  #ifw-root .ifw-section[data-ifw-step="0"] .ifw-wrap{
    padding-top:38px!important;
  }

  #ifw-root .ifw-section[data-ifw-step="2"] .ifw-wrap{
    padding-bottom:64px!important;
  }

  #ifw-root .ifw-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  #ifw-root .ifw-copy,
  #ifw-root .ifw-viz{
    width:100%;
    max-width:680px;
    margin-inline:auto;
  }
}

/* =====================================================================
   PLANS + SIMULATOR
===================================================================== */

#plans .sim-card{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

#plans .plans-grid{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  width:100%;
  overflow:visible!important;
}
@media (max-width:1100px){
  #plans .plans-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

#plans .plan-card{
  min-width:0;
}

@media (max-width:900px){
  #plans .sim-card{
    grid-template-columns:minmax(0,1fr)!important;
  }
}

@media (max-width:640px){
  #plans .plans-grid{
    display:grid!important;
    grid-template-columns:1fr!important;
    margin-left:0!important;
    margin-right:0!important;
    padding-left:0!important;
    padding-right:0!important;
    overflow:visible!important;
  }

  #plans .plan-card{
    flex:none!important;
    width:100%!important;
    max-width:none!important;
  }

  #plans .plans-strip{
    align-items:flex-start!important;
    flex-direction:column;
  }
}

/* =====================================================================
   INSTANT ACADEMY
===================================================================== */

#ac-root .ac-shell{
  width:100%;
  max-width:var(--container)!important;
  padding:var(--site-section-space) var(--site-container-pad)!important;
}

#ac-root .ac-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

#ac-root .ac-feature-card,
#ac-root .ac-categories{
  width:100%;
}

#ac-root .ac-category-btn{
  min-width:0;
}

@media (max-width:820px){
  #ac-root .ac-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  #ac-root .ac-feature-card,
  #ac-root .ac-categories{
    max-width:680px;
    margin-inline:auto;
  }
}

/* =====================================================================
   CREDIT SCORE
===================================================================== */

#cs-root > section > div{
  width:100%;
  max-width:var(--container)!important;
  padding:var(--site-section-space) var(--site-container-pad)!important;
}

#cs-root > section > div > div:nth-child(2){
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}

#cs-root button{
  max-width:100%;
}

@media (max-width:760px){
  #cs-root > section > div > div:nth-child(2){
    grid-template-columns:minmax(0,1fr)!important;
    gap:36px!important;
  }

  #cs-root > section > div > div:nth-child(2) > div{
    width:100%;
    max-width:620px;
    margin-inline:auto;
  }
}

/* =====================================================================
   REVIEWS
===================================================================== */

.reviews-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
}

.review-card{
  width:100%;
  min-width:0;
}

@media (max-width:980px){
  .reviews-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  .review-card{
    max-width:680px;
  }
}

/* =====================================================================
   FAQ
===================================================================== */

.faq-grid{
  grid-template-columns:minmax(280px,.75fr) minmax(0,1.25fr)!important;
  gap:clamp(42px,7vw,90px)!important;
  align-items:start;
}

.faq-list{
  min-width:0;
}

.faq-item summary{
  font-size:16px!important;
  line-height:1.4!important;
}

@media (max-width:820px){
  .faq-grid{
    grid-template-columns:minmax(0,1fr)!important;
    gap:38px!important;
  }

  .faq-grid > *{
    width:100%;
    max-width:680px;
  }
}

/* =====================================================================
   FOOTER
===================================================================== */

#ft-root .footer-main-grid{
  grid-template-columns:minmax(240px,1.4fr) repeat(3,minmax(130px,1fr))!important;
}

#ft-root footer > div{
  width:100%;
}

@media (max-width:900px){
  #ft-root .footer-main-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }
}

@media (max-width:600px){
  #ft-root .footer-main-grid{
    grid-template-columns:minmax(0,1fr)!important;
  }

  #ft-root [data-ft-cta]{
    width:100%;
    justify-content:center;
  }
}

/* =====================================================================
   COOKIE BANNER
===================================================================== */

#if-cookie .ifck-bar{
  max-width:100%;
}

#if-cookie .ifck-emoji{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* =====================================================================
   BREAKPOINT TYPOGRAPHY + SPACING
===================================================================== */

@media (max-width:1100px){
  :root{
    --type-section-heading:39px;
    --type-subheading:22px;
    --site-section-space:84px;
  }
}

@media (max-width:820px){
  :root{
    --type-section-heading:36px;
    --type-subheading:21px;
    --type-section-description:15.5px;
    --type-body:14.5px;
    --site-section-space:72px;
    --site-container-pad:24px;
  }
}

@media (max-width:600px){
  :root{
    --type-eyebrow-size:10.5px;
    --type-section-heading:34px;
    --type-subheading:20px;
    --type-section-description:15px;
    --type-body:14px;
    --site-section-space:60px;
    --site-container-pad:18px;
  }

  .type-section-heading,
  #ac-root .ac-heading,
  #ifw-root .ifw-intro h2,
  #cs-root .type-section-heading{
    max-width:100%!important;
  }

  .type-section-description,
  .lede.type-section-description,
  #ac-root .ac-description,
  #ifw-root .ifw-intro p,
  #cs-root .type-section-description{
    max-width:100%!important;
  }
}

@media (max-width:420px){
  :root{
    --type-section-heading:31px;
    --type-subheading:19px;
    --type-section-description:14.5px;
    --type-body:13.5px;
    --site-section-space:52px;
    --site-container-pad:16px;
  }
}

@media (max-width:350px){
  :root{
    --type-section-heading:29px;
    --site-container-pad:13px;
  }
}

/* Reduced-motion accessibility */
@media (prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
  }
}



/* ==========================================================
   HERO HEADING HIGHLIGHT — NO OVERLAP / NO SPLIT
========================================================== */

.hero h1{
  max-width:680px;
  line-height:1.06!important;
  text-wrap:balance;
}

.hero .hl-mark{
  display:inline-block!important;
  position:relative;
  white-space:nowrap!important;
  vertical-align:.02em;
  line-height:.98!important;

  padding:.04em .15em .09em!important;
  margin:.05em .025em!important;

  border-radius:.18em!important;
  box-decoration-break:slice!important;
  -webkit-box-decoration-break:slice!important;

  background:linear-gradient(180deg,var(--gold-2),var(--gold))!important;
  color:var(--ink)!important;

  box-shadow:0 .16em .34em -.22em rgba(232,163,61,.75)!important;
}

/* Stop the highlighted amount from colliding with nearby lines */
.hero .hl-mark + br{
  display:none;
}

@media (max-width:980px){
  .hero h1{
    max-width:760px;
  }
}

@media (max-width:640px){
  .hero h1{
    font-size:clamp(38px,10.5vw,52px)!important;
    line-height:1.08!important;
    letter-spacing:-.04em!important;
    text-wrap:wrap;
  }

  .hero .hl-mark{
    font-size:.9em;
    padding:.06em .13em .1em!important;
    margin:.08em .02em!important;
    border-radius:.2em!important;
  }
}

@media (max-width:390px){
  .hero h1{
    font-size:clamp(35px,10.2vw,44px)!important;
  }

  .hero .hl-mark{
    font-size:.86em;
  }
}
/* ==========================================================
   INSTANT FINANCIAL — FINAL CROSS-DEVICE RESPONSIVE LAYER
   This block intentionally sits last.
========================================================== */

html,
body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
}

*,
*::before,
*::after{
  box-sizing:border-box;
}

img,
video,
iframe,
svg,
canvas{
  max-width:100%;
}

img,
video{
  height:auto;
}

.container,
.nav-inner,
.hero-grid,
.features-grid,
.faq-grid,
.plans-grid,
.sim-card,
.reviews-grid{
  min-width:0;
}

.container{
  width:100%;
  padding-left:clamp(16px,2.4vw,28px) !important;
  padding-right:clamp(16px,2.4vw,28px) !important;
}

.hero-grid > *,
.features-grid > *,
.faq-grid > *,
.plans-grid > *,
.sim-card > *,
.reviews-grid > *{
  min-width:0;
}

/* Navigation */
@media (max-width:880px){
  .nav-inner{
    height:64px !important;
  }

  .nav-links{
    display:none !important;
  }

  .hamburger{
    display:flex !important;
  }

  .nav-cta > .mobile-hide-get-started{
    display:none !important;
  }
}

@media (max-width:520px){
  .brand-logo{
    width:142px !important;
    height:60px !important;
    flex-basis:142px !important;
  }

  .nav-inner{
    gap:8px;
  }

  .nav-cta{
    gap:8px;
  }
}

@media (max-width:360px){
  .brand-logo{
    width:126px !important;
    flex-basis:126px !important;
  }
}

/* Generic section rhythm */
@media (max-width:1100px){
  .section{
    padding-top:84px !important;
    padding-bottom:84px !important;
  }
}

@media (max-width:820px){
  .section{
    padding-top:72px !important;
    padding-bottom:72px !important;
  }
}

@media (max-width:600px){
  .section{
    padding-top:60px !important;
    padding-bottom:60px !important;
  }

  h2,
  .type-section-heading{
    max-width:100%;
  }

  .lede,
  .type-section-description{
    max-width:100%;
  }
}

@media (max-width:420px){
  .section{
    padding-top:52px !important;
    padding-bottom:52px !important;
  }
}

/* Three-card / review grids */
@media (max-width:1050px){
  .features-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media (max-width:760px){
  .features-grid,
  .reviews-grid{
    grid-template-columns:minmax(0,1fr) !important;
  }
}

/* FAQ */
@media (max-width:820px){
  .faq-grid{
    grid-template-columns:minmax(0,1fr) !important;
    gap:36px !important;
  }
}

@media (max-width:520px){
  .faq-item{
    padding:17px 16px !important;
  }
}

/* Forms, buttons and touch targets */
input,
select,
textarea{
  max-width:100%;
}

@media (max-width:600px){
  .hero-actions{
    width:100%;
  }

  .hero-actions .btn{
    width:100%;
  }
}

@media (pointer:coarse){
  button,
  .btn,
  summary,
  input,
  select{
    min-height:44px;
  }
}

/* Short landscape screens */
@media (max-height:620px) and (orientation:landscape){
  .section{
    padding-top:52px !important;
    padding-bottom:52px !important;
  }
}

/* Motion accessibility */
@media (prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto !important;
  }

  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}