html{scroll-behavior:smooth}
  body{font-family:var(--sans),sans-serif; -webkit-font-smoothing:antialiased; background:var(--bg); color:var(--ink); min-height:100vh; overflow-x:hidden;}
  a{text-decoration:none}

  .btn-apply{font-family:var(--font-heading);font-size:15px; font-weight:600; color:#fff; background:var(--ink); padding:11px 20px; border-radius:0; display:inline-flex; align-items:center; gap:7px; transition:background .15s;}
  .btn-apply:hover{background:var(--color-accent-800)}

  .chip{font-size:13.5px; font-weight:700; padding:9px 18px; border-radius:0; cursor:pointer; border:1.5px solid var(--line); background:#fff; color:var(--muted); transition:all .15s;}
  .chip:hover{border-color:var(--acc)}
  .chip.active{background:var(--acc); color:#fff; border-color:var(--acc)}

  .track-card{border:1px solid var(--line); border-radius:0; padding:24px; background:#fff; display:flex; flex-direction:column; min-height:230px; transition:border-color .2s, box-shadow .2s, transform .2s;}
  .track-card:hover{border-color:var(--acc); box-shadow:0 16px 38px -20px rgba(12,19,34,0.4); transform:translateY(-2px);}
  .enroll-btn{font-family:var(--font-heading);font-size:13px; font-weight:600; color:#fff; background:var(--acc); border:none; border-radius:0; padding:9px 16px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; transition:background .15s;}
  .enroll-btn:hover{background:var(--acc-deep)}
  .curriculum-btn{width:100%; background:none; border:none; cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); display:inline-flex; align-items:center; justify-content:center; gap:5px; padding:4px; margin-top:10px; transition:color .15s;}
  .curriculum-btn:hover{color:var(--acc-deep)}
  .dash-cta{font-size:13px; font-weight:700; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:0; padding:9px 16px; display:inline-flex; align-items:center; gap:5px; transition:border-color .15s;}
  .dash-cta:hover{border-color:var(--acc)}

  .foot-lnk{font-size:14px; color:rgba(255,255,255,0.75); transition:color .15s;}
  .foot-lnk:hover{color:#fff}

  .dur-input,.mode-input{position:absolute; opacity:0; pointer-events:none;}
  /* The real radio is transparent, so without this a keyboard user arrowing
     through Duration or Mode has no idea where they are. */
  .dur-input:focus-visible + .dur-card,
  .mode-input:focus-visible + .mode-card{outline:2px solid var(--acc); outline-offset:2px;}
  .dur-card{cursor:pointer; border:2px solid var(--line); background:#fff; border-radius:0; padding:13px 6px; text-align:center; transition:all .15s;}
  .dur-input:checked + .dur-card{border-color:var(--acc); background:rgba(56,81,184,0.08);}
  .mode-card{cursor:pointer; border:2px solid var(--line); background:#fff; border-radius:0; padding:14px; text-align:center; font-weight:700; font-size:14px; color:var(--ink); transition:all .15s;}
  .mode-input:checked + .mode-card{border-color:var(--acc); background:rgba(56,81,184,0.08);}

  .curr-tab{background:none; border:none; cursor:pointer; padding:13px 2px; margin-right:18px; font-size:13.5px; font-weight:700; color:var(--muted); border-bottom:2px solid transparent; transition:color .15s;}
  .curr-tab.active{color:var(--acc-deep); border-bottom-color:var(--acc-deep);}

  @media(max-width:920px){
    .main-nav{display:none !important}
    .tracks-grid{grid-template-columns:repeat(2,1fr) !important}
    .trust-grid{grid-template-columns:repeat(2,1fr) !important; gap:28px !important}
    .pricing-grid{grid-template-columns:repeat(2,1fr) !important}
  }
  @media(max-width:620px){
    .tracks-grid{grid-template-columns:1fr !important}
    .trust-grid{grid-template-columns:1fr !important}
    .pricing-grid{grid-template-columns:1fr !important}
  }
  @media(max-width:560px){
    .hero-stats{flex-wrap:wrap; gap:20px !important}
    .foot-top{flex-direction:column; gap:32px !important}
  }
  /* Three duration cards in one row need ~250px of modal; below that they spill. */
  @media(max-width:340px){
    .dur-grid-months{grid-template-columns:repeat(2,1fr) !important}
  }

@keyframes spin{to{transform:rotate(360deg)}}