/* ==========================================================
   Atominic Shared Styles
   Extracted from design templates — used across all pages
   ========================================================== */

/* --- Reset --- */
*{box-sizing:border-box}
body{margin:0;background:#fff;font-family:'Plus Jakarta Sans',system-ui,sans-serif;color:#14151A}

/* --- CSS Variables --- */
:root{
  --grad:linear-gradient(90deg,#2E7CF6 0%,#8B3FE0 27%,#E64B9E 52%,#FF7A3C 78%,#FFC23C 100%);
  --biz:#2E7CF6;
  --biz-tint:#EAF1FE;
  --edu:#FF8A3C;
  --edu-tint:#FFF1E5;
  --ink:#14151A;
  --ink2:#697079;
  --bg:#FFFFFF;
  --panel:#F6F8FA;
  --line:#ECEEF1;
}

/* --- Selection --- */
::selection{background:#14151A;color:#fff}

/* --- Animations --- */
@keyframes floaty{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-9px)}
}
@keyframes floaty2{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(7px)}
}

/* --- Lift (hover card effect) --- */
.lift{
  transition:transform .4s cubic-bezier(.2,.8,.2,1),
             box-shadow .4s cubic-bezier(.2,.8,.2,1),
             border-color .3s ease;
}
.lift:hover{
  transform:translateY(-4px);
  box-shadow:0 26px 50px -30px rgba(22,23,26,.35);
}

/* --- Underline link --- */
.ul{position:relative}
.ul::after{
  content:"";position:absolute;left:0;bottom:-3px;
  height:1.5px;width:0;background:currentColor;
  transition:width .3s ease;border-radius:2px;
}
.ul:hover::after{width:100%}

/* --- Button --- */
.btn{transition:transform .22s ease,opacity .2s ease}
.btn:hover{transform:translateY(-2px)}

/* --- Nav link --- */
.navlink{transition:color .2s ease}
.navlink:hover{color:#14151A}

/* --- Arrow reveal on hover --- */
.arw{
  display:inline-flex;align-items:center;
  width:0;max-width:0;opacity:0;margin-left:0;
  transform:translateX(-3px);
  transition:all .25s cubic-bezier(.2,.8,.2,1);
  overflow:hidden;vertical-align:middle;
}
a:hover .arw,button:hover .arw{
  width:15px;max-width:15px;opacity:1;
  margin-left:7px;transform:translateX(0);
}

/* --- Quiz / assessment option --- */
.opt{transition:border-color .2s ease}
.opt:hover{border-color:#c3d2f7 !important}

/* --- Form field --- */
.fld{
  width:100%;font:500 15px 'Plus Jakarta Sans';color:#14151A;
  padding:13px 15px;border:1px solid #ECEEF1;border-radius:12px;
  outline:none;background:#fff;transition:border-color .2s ease;
}
.fld:focus{border-color:#2E7CF6}

/* --- Form label --- */
.lbl{
  font:600 12px 'Plus Jakarta Sans';letter-spacing:.05em;
  text-transform:uppercase;color:#697079;
  display:block;margin-bottom:8px;
}

/* --- Document / legal page band --- */
.band{
  border-bottom:1px solid #ECEEF1;
  background:linear-gradient(180deg,#FAFBFC,#fff);
}

/* --- Document body --- */
.doc{max-width:820px;margin:0 auto;padding:56px 40px 96px}
.doc h1{font:800 44px/1.08 'Plus Jakarta Sans';letter-spacing:-.04em;margin:0;text-wrap:balance}
.doc h2{font:800 25px/1.25 'Plus Jakarta Sans';letter-spacing:-.02em;margin:46px 0 0}
.doc h3{font:700 17px 'Plus Jakarta Sans';margin:28px 0 0;color:#16171A}
.doc p{font:400 16px/1.72 'Plus Jakarta Sans';color:#4a4f57;margin:14px 0 0}
.doc ul{margin:14px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:9px}
.doc li{font:400 16px/1.62 'Plus Jakarta Sans';color:#4a4f57}
.doc a{color:#2E7CF6;text-decoration:none}
.doc a:hover{text-decoration:underline}
.doc strong{color:#16171A;font-weight:700}

/* --- Effective-date label --- */
.eff{
  display:inline-block;font:700 12px 'Plus Jakarta Sans';
  letter-spacing:.08em;text-transform:uppercase;
  color:#8B3FE0;margin:0 0 18px;
}

/* --- FAQ details/summary --- */
details{border-top:1px solid var(--line)}
details>summary{
  list-style:none;cursor:pointer;
  padding:22px 2px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;
}
details>summary::-webkit-details-marker{display:none}
details .plus{transition:transform .25s ease;flex:none}
details[open] .plus{transform:rotate(45deg)}

/* --- Hamburger button (hidden on desktop) --- */
.hamburger{display:none}
.hamburger button{
  background:none;border:none;cursor:pointer;padding:6px;
  display:flex;flex-direction:column;gap:5px;
  width:32px;
}
.hamburger button span{
  display:block;height:2px;width:100%;
  background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .15s ease;
}

/* --- Mobile nav overlay (hidden on desktop) --- */
.mobile-nav{
  display:none;position:fixed;inset:0;z-index:100;
  background:rgba(255,255,255,.97);backdrop-filter:blur(14px);
  flex-direction:column;align-items:center;justify-content:center;gap:28px;
}
.mobile-nav.open{display:flex}
.mobile-nav a{
  text-decoration:none;font:700 20px 'Plus Jakarta Sans';
  color:var(--ink);
}
.mobile-nav .close-btn{
  position:absolute;top:20px;right:24px;
  background:none;border:none;cursor:pointer;
  font-size:28px;color:var(--ink);line-height:1;
}

/* ==========================================================
   Responsive — mobile (<= 768px)
   ========================================================== */
@media (max-width:768px){
  /* show hamburger, hide desktop nav */
  .hamburger{display:block}
  .desktop-nav{display:none !important}

  /* grids become single column */
  .grid-2{grid-template-columns:1fr !important}
  .grid-4{grid-template-columns:1fr 1fr !important}

  /* hero typography */
  h1{font-size:32px !important}
  h2{font-size:26px !important}

  /* reduce section padding */
  section{padding-left:20px !important;padding-right:20px !important}
  .doc{padding:32px 20px 64px}
  .band>div{padding-left:20px !important;padding-right:20px !important}

  /* footer columns stack */
  footer>div:first-child{
    grid-template-columns:1fr !important;
    gap:36px !important;
  }
  footer .footer-bottom{
    flex-direction:column;align-items:flex-start;gap:10px;
    padding-left:20px !important;padding-right:20px !important;
  }
}

/* ==========================================================
   Reduced motion
   ========================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
}
