/* =====================================================
   SELAUS ACADEMY
   PREMIUM WEBSITE CSS
===================================================== */

*{
  box-sizing:border-box;
  margin:0;
  padding:0;
}

html{
  scroll-behavior:smooth;
}

body{
  font-family:
    Inter,
    "Noto Sans Bengali",
    "Noto Sans",
    Arial,
    sans-serif;

  color:#172033;
  background:#ffffff;
  line-height:1.65;
}

body.modal-open{
  overflow:hidden;
}

a{
  color:inherit;
  text-decoration:none;
}

button{
  font:inherit;
}

.wrap{
  width:min(1180px,92%);
  margin:auto;
}


/* =====================================================
   HEADER
===================================================== */

header{
  position:sticky;
  top:0;
  z-index:1000;

  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);

  border-bottom:1px solid #e8ecf3;
}

.nav{
  min-height:76px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;

  font-size:20px;
  font-weight:800;
  color:#111827;
}

.logo b{
  width:40px;
  height:40px;

  display:grid;
  place-items:center;

  border-radius:12px;

  background:#111827;
  color:#fff;

  font-size:20px;
}

.logo em{
  font-style:normal;
  color:#667085;
  font-weight:500;
}

nav{
  display:flex;
  align-items:center;
  gap:8px;
}

nav a{
  padding:10px 14px;
  border-radius:10px;

  color:#475467;
  font-size:14px;
  font-weight:600;

  transition:.2s ease;
}

nav a:hover{
  background:#f2f4f7;
  color:#111827;
}

nav a.cta{
  background:#111827;
  color:#fff;
  padding:11px 18px;
}

nav a.cta:hover{
  background:#273043;
}

#menu{
  display:none;

  border:0;
  background:transparent;

  font-size:27px;
  cursor:pointer;
}


/* =====================================================
   HERO
===================================================== */

.hero{
  padding:95px 0 80px;

  background:
    radial-gradient(circle at 85% 20%,#eef3ff 0,transparent 35%),
    linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
}

.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:70px;
}

.eyebrow{
  display:inline-block;

  margin-bottom:16px;

  font-size:11px;
  font-weight:800;
  letter-spacing:1.5px;

  color:#667085;
}

.hero h1{
  font-size:clamp(42px,5vw,68px);
  line-height:1.06;
  letter-spacing:-2.5px;

  color:#101828;

  margin-bottom:24px;
}

.hero h1 span{
  color:#667085;
}

.hero-content > p{
  max-width:650px;

  font-size:18px;
  color:#667085;

  margin-bottom:30px;
}

.actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:48px;

  padding:0 20px;

  border:1px solid #d0d5dd;
  border-radius:12px;

  background:#fff;
  color:#172033;

  font-size:14px;
  font-weight:700;

  transition:.2s ease;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 25px rgba(16,24,40,.08);
}

.btn.dark{
  background:#111827;
  border-color:#111827;
  color:#fff;
}

.btn.dark:hover{
  background:#273043;
}

.trust{
  margin-top:22px;

  font-size:13px;
  color:#667085;
}


/* HERO VISUAL */

.visual{
  position:relative;
  min-height:440px;

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

.visual > label{
  position:absolute;
  top:20px;

  font-size:10px;
  letter-spacing:1.5px;
  font-weight:800;

  color:#667085;
}

.screen{
  width:min(470px,100%);
  min-height:300px;

  padding:42px;

  border-radius:28px;

  background:#111827;
  color:#fff;

  box-shadow:
    0 30px 80px rgba(16,24,40,.18);
}

.screen small{
  font-size:10px;
  letter-spacing:2px;
  color:#98a2b3;
}

.screen h2{
  margin-top:35px;

  font-size:34px;
  line-height:1.15;
  letter-spacing:-1px;
}

.screen .bar{
  height:6px;

  margin:35px 0 20px;

  background:#344054;
  border-radius:99px;
  overflow:hidden;
}

.screen .bar i{
  display:block;

  width:62%;
  height:100%;

  background:#fff;
  border-radius:99px;
}

.screen p{
  font-size:13px;
  color:#98a2b3;
}

.bubble{
  position:absolute;

  width:60px;
  height:60px;

  display:grid;
  place-items:center;

  border-radius:18px;

  background:#fff;
  border:1px solid #e4e7ec;

  box-shadow:0 15px 35px rgba(16,24,40,.12);

  font-style:normal;
  font-weight:900;
  color:#111827;
}

.b1{
  top:100px;
  left:5%;
}

.b2{
  top:80px;
  right:8%;
}

.b3{
  bottom:100px;
  left:10%;
}

.b4{
  bottom:80px;
  right:5%;
}

.visual footer{
  position:absolute;
  bottom:0;

  max-width:480px;

  font-size:11px;
  text-align:center;

  color:#667085;
}


/* =====================================================
   STATS
===================================================== */

.stats{
  background:#111827;
  color:#fff;
}

.statsgrid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}

.statsgrid > div{
  padding:30px 20px;

  text-align:center;

  border-right:1px solid rgba(255,255,255,.08);
}

.statsgrid > div:last-child{
  border-right:0;
}

.statsgrid b{
  display:block;

  font-size:30px;
  line-height:1;

  margin-bottom:8px;
}

.statsgrid span{
  font-size:12px;
  color:#98a2b3;
}


/* =====================================================
   SECTIONS
===================================================== */

.section{
  padding:95px 0;
}

.soft{
  background:#f8fafc;
}

.head{
  display:flex;
  justify-content:space-between;
  align-items:end;

  gap:40px;

  margin-bottom:45px;
}

.head h2,
.center h2,
.about h2{
  max-width:700px;

  font-size:clamp(30px,4vw,46px);
  line-height:1.15;
  letter-spacing:-1.5px;

  color:#101828;
}

.head > p{
  max-width:440px;
  color:#667085;
}

.center{
  text-align:center;
  margin-bottom:50px;
}

.center p{
  max-width:650px;
  margin:15px auto 0;
  color:#667085;
}


/* =====================================================
   COURSE CARDS
===================================================== */

.cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.cards article{
  position:relative;

  padding:28px;

  border:1px solid #e4e7ec;
  border-radius:20px;

  background:#fff;

  transition:.25s ease;
}

.cards article:hover{
  transform:translateY(-5px);
  box-shadow:0 18px 45px rgba(16,24,40,.08);
}

.cards article > strong{
  display:inline-grid;
  place-items:center;

  width:46px;
  height:46px;

  border-radius:14px;

  background:#f2f4f7;

  font-size:12px;
  font-weight:900;
}

.cards mark{
  position:absolute;
  top:20px;
  right:20px;

  padding:5px 9px;

  border-radius:99px;

  background:#111827;
  color:#fff;

  font-size:9px;
  font-weight:800;
}

.cards h3{
  margin:22px 0 10px;

  font-size:20px;
  line-height:1.3;
}

.cards p{
  color:#667085;
  font-size:14px;
}

.cards ul{
  margin:18px 0;

  list-style:none;
}

.cards li{
  margin:7px 0;

  font-size:13px;
  color:#475467;
}

.cards li::first-letter{
  color:#111827;
}

.cards a{
  display:inline-block;

  margin-top:8px;

  font-size:13px;
  font-weight:800;
}


/* =====================================================
   FEATURES
===================================================== */

.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}

.features > div{
  padding:30px;

  background:#fff;

  border:1px solid #e4e7ec;
  border-radius:20px;
}

.features b{
  font-size:12px;
  color:#98a2b3;
}

.features h3{
  margin:20px 0 10px;
  font-size:19px;
}

.features p{
  font-size:14px;
  color:#667085;
}


/* =====================================================
   DIGITAL PRODUCTS
===================================================== */

.products-section{
  background:#fff;
}

.product-notice{
  display:flex;
  align-items:flex-start;
  gap:18px;

  margin-bottom:35px;
  padding:20px 22px;

  border:1px solid #dbe3ef;
  border-radius:18px;

  background:#f8fafc;
}

.notice-icon{
  width:46px;
  height:46px;

  flex:0 0 46px;

  display:grid;
  place-items:center;

  border-radius:13px;

  background:#111827;
  color:#fff;
}

.product-notice strong{
  display:block;
  margin-bottom:4px;
}

.product-notice p{
  font-size:13px;
  color:#667085;
}


.product-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}


.product-card{
  position:relative;

  display:flex;
  flex-direction:column;

  padding:28px;

  min-height:520px;

  background:#fff;

  border:1px solid #e4e7ec;
  border-radius:22px;

  box-shadow:0 8px 30px rgba(16,24,40,.04);

  transition:.25s ease;
}

.product-card:hover{
  transform:translateY(-5px);

  box-shadow:
    0 20px 55px rgba(16,24,40,.09);
}


.product-top{
  display:flex;
  align-items:center;
  justify-content:space-between;

  margin-bottom:22px;
}

.product-icon{
  width:52px;
  height:52px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:#111827;
  color:#fff;

  font-size:12px;
  font-weight:900;
  letter-spacing:.5px;
}

.popular,
.coming-badge{
  padding:6px 10px;

  border-radius:99px;

  font-size:9px;
  font-weight:900;
  letter-spacing:.5px;
}

.popular{
  background:#111827;
  color:#fff;
}

.coming-badge{
  background:#f2f4f7;
  color:#667085;
}

.product-card h3{
  margin-bottom:12px;

  font-size:21px;
  line-height:1.3;

  color:#101828;
}

.product-card > p{
  font-size:14px;
  color:#667085;

  min-height:72px;
}


.product-list{
  display:flex;
  flex-direction:column;
  gap:8px;

  margin:20px 0;
}

.product-list span{
  font-size:13px;
  color:#475467;
}


.price{
  margin-top:auto;

  font-size:27px;
  font-weight:900;

  color:#111827;
}


.file-info{
  display:flex;
  flex-wrap:wrap;
  gap:7px;

  margin:12px 0 18px;
}

.file-info span{
  padding:5px 8px;

  border:1px solid #e4e7ec;
  border-radius:7px;

  background:#f8fafc;

  font-size:10px;
  font-weight:700;

  color:#667085;
}


.product-actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
}

.preview-btn,
.buy-btn,
.disabled-btn{
  min-height:45px;

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

  border-radius:10px;

  font-size:12px;
  font-weight:800;

  cursor:pointer;

  transition:.2s ease;
}

.preview-btn{
  border:1px solid #d0d5dd;
  background:#fff;
  color:#344054;
}

.preview-btn:hover{
  background:#f8fafc;
}

.buy-btn{
  background:#111827;
  color:#fff;
  border:1px solid #111827;
}

.buy-btn:hover{
  background:#273043;
}

.disabled-btn{
  width:100%;

  border:1px solid #e4e7ec;

  background:#f2f4f7;
  color:#98a2b3;

  cursor:not-allowed;
}


/* =====================================================
   BUNDLE
===================================================== */

.bundle{
  margin-top:35px;

  padding:34px;

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

  gap:35px;

  border-radius:24px;

  background:#111827;
  color:#fff;

  box-shadow:0 25px 70px rgba(16,24,40,.15);
}

.bundle .eyebrow{
  color:#98a2b3;
}

.bundle h2{
  margin-bottom:10px;

  font-size:32px;
  line-height:1.2;
}

.bundle p{
  max-width:680px;

  color:#c5cad3;
  font-size:14px;
}

.bundle-items{
  margin-top:15px;

  font-size:12px;
  color:#d0d5dd;
}

.bundle-price{
  min-width:210px;
  text-align:center;
}

.bundle-price span{
  display:block;

  font-size:11px;
  color:#98a2b3;
}

.bundle-price strong{
  display:block;

  margin:5px 0 15px;

  font-size:36px;
}

.bundle-btn{
  display:flex;
  align-items:center;
  justify-content:center;

  min-height:45px;
  padding:0 18px;

  border-radius:10px;

  background:#fff;
  color:#111827;

  font-size:12px;
  font-weight:900;
}


/* =====================================================
   FREE RESOURCES
===================================================== */

.free-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}

.free-card{
  padding:30px;

  border:1px solid #e4e7ec;
  border-radius:20px;

  background:#fff;
}

.free-card > span{
  display:block;

  margin-bottom:15px;

  font-size:30px;
}

.free-card h3{
  font-size:19px;
  margin-bottom:10px;
}

.free-card p{
  min-height:60px;

  color:#667085;
  font-size:14px;

  margin-bottom:18px;
}


/* =====================================================
   ROADMAP
===================================================== */

.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

.steps > div{
  padding:30px;

  border-top:2px solid #111827;

  background:#f8fafc;
}

.steps b{
  font-size:12px;
  color:#98a2b3;
}

.steps h3{
  margin:18px 0 8px;
  font-size:20px;
}

.steps p{
  color:#667085;
  font-size:14px;
}


/* =====================================================
   ABOUT
===================================================== */

.about{
  background:#f8fafc;
}

.aboutgrid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:70px;
  align-items:center;
}

.about p{
  max-width:700px;

  margin-top:18px;

  color:#667085;
}

.ticks{
  margin-top:25px;

  font-size:13px;
  font-weight:700;

  color:#344054;
}

.profile{
  padding:35px;

  background:#fff;

  border:1px solid #e4e7ec;
  border-radius:24px;

  box-shadow:0 15px 50px rgba(16,24,40,.06);
}

.avatar{
  width:70px;
  height:70px;

  display:grid;
  place-items:center;

  margin-bottom:20px;

  border-radius:20px;

  background:#111827;
  color:#fff;

  font-size:28px;
  font-weight:900;
}

.profile small{
  font-size:9px;
  font-weight:900;
  letter-spacing:1px;

  color:#98a2b3;
}

.profile h3{
  margin:8px 0;

  font-size:25px;
}

.profile p{
  margin:0;

  font-size:14px;
}

.tags{
  margin:20px 0;
  padding:14px;

  border-radius:12px;

  background:#f8fafc;

  font-size:12px;
  line-height:1.9;
  color:#475467;
}

.profile > a{
  font-size:13px;
  font-weight:800;
}


/* =====================================================
   OFFER
===================================================== */

.offer{
  padding:60px 0;

  background:#111827;
  color:#fff;
}

.offerbox{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:40px;
}

.offer h2{
  margin-bottom:10px;

  font-size:38px;
  line-height:1.2;
}

.offer p{
  color:#98a2b3;
}

.btn.white{
  background:#fff;
  color:#111827;
  border-color:#fff;

  white-space:nowrap;
}


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

.narrow{
  max-width:850px;
}

details{
  margin:12px 0;

  padding:0 20px;

  background:#fff;

  border:1px solid #e4e7ec;
  border-radius:14px;
}

summary{
  padding:20px 0;

  cursor:pointer;

  font-weight:800;
  font-size:15px;

  list-style:none;
}

summary::-webkit-details-marker{
  display:none;
}

details p{
  padding:0 0 20px;

  color:#667085;
  font-size:14px;
}


/* =====================================================
   ENROLL
===================================================== */

.enroll{
  display:grid;
  grid-template-columns:1fr 420px;

  gap:70px;
  align-items:center;
}

.enroll h2{
  margin-bottom:15px;

  font-size:42px;
  line-height:1.15;
}

.enroll p{
  color:#667085;
}

.enroll p + p{
  margin-top:12px;
}

.enroll a{
  font-weight:700;
}

.formcard{
  padding:30px;

  border:1px solid #e4e7ec;
  border-radius:20px;

  background:#fff;

  box-shadow:0 20px 60px rgba(16,24,40,.07);
}

.formcard h3{
  margin-bottom:8px;
  font-size:21px;
}

.formcard p{
  margin-bottom:20px;
  font-size:14px;
}

.full{
  width:100%;
}


/* =====================================================
   FOOTER
===================================================== */

footer{
  padding:45px 0;

  background:#0b0f18;
  color:#fff;
}

.foot{
  text-align:center;
}

.foot .logo{
  justify-content:center;
  color:#fff;
}

.foot .logo em{
  color:#98a2b3;
}

.foot > p{
  margin:15px 0;

  color:#98a2b3;
  font-size:13px;
}

.links{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;

  gap:18px;

  margin:20px 0;
}

.links a{
  font-size:12px;
  color:#c5cad3;
}

.links a:hover{
  color:#fff;
}

.foot small{
  color:#667085;
  font-size:11px;
}


/* =====================================================
   WHATSAPP
===================================================== */

.wa{
  position:fixed;

  right:22px;
  bottom:22px;

  z-index:900;

  width:58px;
  height:58px;

  display:grid;
  place-items:center;

  border-radius:50%;

  background:#111827;
  color:#fff;

  font-size:11px;
  font-weight:900;

  box-shadow:0 12px 35px rgba(16,24,40,.22);
}

.wa:hover{
  transform:scale(1.05);
}


/* =====================================================
   PREVIEW MODAL
===================================================== */

.modal{
  position:fixed;

  inset:0;

  z-index:3000;

  display:none;

  padding:25px;

  overflow-y:auto;
}

.modal.show{
  display:flex;

  align-items:center;
  justify-content:center;
}

.modal-overlay{
  position:fixed;
  inset:0;

  background:rgba(7,12,22,.72);

  backdrop-filter:blur(6px);
}

.modal-box{
  position:relative;
  z-index:2;

  width:min(760px,100%);

  max-height:92vh;

  overflow-y:auto;

  padding:30px;

  border-radius:24px;

  background:#fff;

  box-shadow:0 30px 100px rgba(0,0,0,.3);
}

.modal-close{
  position:absolute;

  top:15px;
  right:15px;

  width:38px;
  height:38px;

  border:1px solid #e4e7ec;

  border-radius:50%;

  background:#fff;

  font-size:25px;
  line-height:1;

  cursor:pointer;

  z-index:5;
}

.modal-close:hover{
  background:#f2f4f7;
}


/* PREVIEW HEADER */

.preview-header{
  display:flex;
  align-items:center;

  gap:18px;

  padding-right:45px;
}

.preview-icon{
  width:60px;
  height:60px;

  flex:0 0 60px;

  display:grid;
  place-items:center;

  border-radius:17px;

  background:#111827;
  color:#fff;

  font-size:13px;
  font-weight:900;
}

.preview-label{
  margin-bottom:4px;

  font-size:9px;
  letter-spacing:1.5px;
  font-weight:900;

  color:#98a2b3;
}

.preview-header h2{
  font-size:28px;
  line-height:1.2;
}


/* PREVIEW COVER */

.preview-cover{
  margin:28px 0;

  min-height:240px;

  display:grid;
  place-items:center;

  border-radius:20px;

  background:
    radial-gradient(circle at 20% 20%,#344054 0,transparent 30%),
    #111827;

  color:#fff;

  text-align:center;
}

.preview-cover-inner{
  width:80%;

  padding:35px;

  border:1px solid rgba(255,255,255,.14);

  border-radius:16px;

  background:rgba(255,255,255,.04);
}

.preview-cover span{
  display:block;

  margin-bottom:25px;

  font-size:9px;
  letter-spacing:2px;

  color:#98a2b3;
}

.preview-cover strong{
  display:block;

  font-size:30px;
  line-height:1.2;
}

.preview-cover small{
  display:block;

  margin-top:20px;

  color:#98a2b3;
}


/* PREVIEW CONTENT */

.preview-description,
.preview-features{
  margin-top:24px;
}

.preview-description h3,
.preview-features h3{
  margin-bottom:8px;

  font-size:18px;
}

.preview-description p{
  color:#667085;
  font-size:14px;
}

.preview-features ul{
  display:grid;
  grid-template-columns:1fr 1fr;

  gap:8px;

  list-style:none;
}

.preview-features li{
  padding:9px 12px;

  border-radius:9px;

  background:#f8fafc;

  color:#475467;

  font-size:12px;
}


/* SECURITY */

.preview-security{
  margin-top:25px;
  padding:18px;

  border:1px solid #e4e7ec;

  border-radius:14px;

  background:#f8fafc;
}

.preview-security strong{
  font-size:13px;
}

.preview-security p{
  margin-top:5px;

  color:#667085;

  font-size:12px;
}


/* PREVIEW BOTTOM */

.preview-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:20px;

  margin-top:25px;
  padding-top:22px;

  border-top:1px solid #e4e7ec;
}

.preview-bottom small{
  display:block;

  font-size:10px;
  color:#98a2b3;
}

.preview-bottom strong{
  display:block;

  margin-top:3px;

  font-size:28px;
}

.modal-buy{
  min-height:48px;

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

  padding:0 20px;

  border-radius:10px;

  background:#111827;
  color:#fff;

  font-size:12px;
  font-weight:800;
}

.modal-buy:hover{
  background:#273043;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media(max-width:1050px){

  .cards{
    grid-template-columns:repeat(2,1fr);
  }

  .features{
    grid-template-columns:repeat(2,1fr);
  }

  .product-grid{
    grid-template-columns:repeat(2,1fr);
  }

  .hero-grid{
    gap:40px;
  }

}


@media(max-width:800px){

  #menu{
    display:block;
  }

  nav{
    position:absolute;

    left:4%;
    right:4%;
    top:76px;

    display:none;
    flex-direction:column;
    align-items:stretch;

    padding:12px;

    border:1px solid #e4e7ec;
    border-radius:16px;

    background:#fff;

    box-shadow:0 20px 50px rgba(16,24,40,.12);
  }

  nav.open{
    display:flex;
  }

  nav a{
    padding:12px;
  }

  nav a.cta{
    text-align:center;
  }

  .hero{
    padding:70px 0;
  }

  .hero-grid{
    grid-template-columns:1fr;
  }

  .visual{
    min-height:380px;
  }

  .statsgrid{
    grid-template-columns:repeat(2,1fr);
  }

  .statsgrid > div{
    border-bottom:1px solid rgba(255,255,255,.08);
  }

  .head{
    display:block;
  }

  .head > p{
    margin-top:15px;
  }

  .aboutgrid,
  .enroll{
    grid-template-columns:1fr;
    gap:40px;
  }

  .offerbox{
    flex-direction:column;
    align-items:flex-start;
  }

  .steps{
    grid-template-columns:repeat(2,1fr);
  }

  .bundle{
    flex-direction:column;
    align-items:flex-start;
  }

  .bundle-price{
    width:100%;
    text-align:left;
  }

  .bundle-btn{
    max-width:260px;
  }

}


@media(max-width:600px){

  .section{
    padding:70px 0;
  }

  .hero h1{
    font-size:43px;
    letter-spacing:-1.8px;
  }

  .hero-content > p{
    font-size:16px;
  }

  .actions{
    flex-direction:column;
  }

  .actions .btn{
    width:100%;
  }

  .cards,
  .features,
  .product-grid,
  .free-grid{
    grid-template-columns:1fr;
  }

  .statsgrid{
    grid-template-columns:1fr 1fr;
  }

  .statsgrid b{
    font-size:25px;
  }

  .statsgrid span{
    font-size:10px;
  }

  .screen{
    padding:30px;
  }

  .screen h2{
    font-size:27px;
  }

  .bubble{
    width:50px;
    height:50px;
  }

  .product-card{
    min-height:auto;
  }

  .product-card > p{
    min-height:auto;
  }

  .product-actions{
    grid-template-columns:1fr;
  }

  .bundle{
    padding:25px;
  }

  .bundle h2{
    font-size:27px;
  }

  .steps{
    grid-template-columns:1fr;
  }

  .enroll h2{
    font-size:34px;
  }

  .preview-features ul{
    grid-template-columns:1fr;
  }

  .preview-bottom{
    flex-direction:column;
    align-items:stretch;
  }

  .modal{
    padding:10px;
  }

  .modal-box{
    padding:22px;
    border-radius:18px;
  }

  .preview-header h2{
    font-size:22px;
  }

  .preview-cover{
    min-height:200px;
  }

  .preview-cover strong{
    font-size:23px;
  }

}


/* =====================================================
   ACCESSIBILITY
===================================================== */

button:focus-visible,
a:focus-visible,
summary:focus-visible{
  outline:3px solid #98a2b3;
  outline-offset:3px;
}