/*
Theme Name: Skill Civil
Theme URI: https://skillcivil.com
Author: Skill Civil
Description: Custom homepage theme for Skill Civil - civil engineering training platform.
Version: 8.8
Text Domain: skillcivil
*/

  :root{
    --bg:#F7F9FB;
    --ink:#16222E;
    --ink-soft:#5C6B7A;
    --blue:#1E64C8;
    --blue-deep:#124A9E;
    --blue-tint:#EAF1FC;
    --amber:#F2A93B;
    --card:#FFFFFF;
    --border:#E4E9EF;
    --radius:12px;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'IBM Plex Sans', sans-serif;
    --font-bn:'Hind Siliguri', sans-serif;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  body{font-family:var(--font-body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased;}
  .bn{font-family:var(--font-bn);}
  a{color:inherit; text-decoration:none;}
  img{max-width:100%; display:block;}
  .wrap{max-width:1180px; margin:0 auto; padding-left:24px; padding-right:24px;}
  button{cursor:pointer; font-family:inherit;}

  /* ===== HEADER ===== */
  header{position:sticky; top:0; z-index:60; background:#fff; border-bottom:1px solid var(--border);}
  .topbar{background:var(--blue-deep); color:#fff; font-size:13px; padding:6px 0; text-align:center;}
  .topbar .bn{font-weight:500;}
  .nav{display:flex; align-items:center; justify-content:space-between; height:78px; gap:18px;}
  .logo{font-family:var(--font-display); font-weight:700; font-size:21px; display:flex; align-items:center; gap:9px; flex-shrink:0;}
  .logo-custom{display:flex; align-items:center;}
  .logo-footer{display:inline-flex; margin-bottom:12px;}
  .logo-footer img{max-height:58px;}
  .logo-custom img{max-height:44px; width:auto; display:block;}
  .logo .mark{width:30px; height:30px; border-radius:7px; background:linear-gradient(135deg, var(--blue), var(--blue-deep));}
  .navlinks{display:flex; gap:4px; font-size:14px; font-weight:500; color:var(--ink-soft); flex-shrink:0;}
  .navlinks a{padding:9px 14px; border-radius:8px; transition:background .18s ease, color .18s ease, transform .15s ease, box-shadow .15s ease;}
  .navlinks a:hover{color:var(--blue-deep); background:var(--blue-tint); transform:translateY(-2px); box-shadow:0 6px 14px rgba(30,100,200,.18);}
  .navlinks a.active{color:var(--blue-deep); font-weight:700; background:var(--blue-tint);}
  .navlinks a.active:hover{transform:translateY(-2px);}
  .mobile-menu a.active{color:var(--blue-deep); font-weight:700;}
  .header-search{
    flex:1; max-width:230px; display:flex; align-items:center; gap:6px;
    background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:4px 4px 4px 14px;
  }
  .header-search input{flex:1; min-width:0; border:none; outline:none; background:transparent; font-size:12.5px; font-family:var(--font-bn); padding:8px 0; text-overflow:ellipsis;}
  .header-search button{background:var(--blue); color:#fff; border:none; padding:8px 14px; border-radius:6px; font-size:12.5px; font-weight:600;}
  .nav-right{display:flex; align-items:center; gap:10px; flex-shrink:0;}
  .icon-btn{width:38px; height:38px; border-radius:50%; border:1px solid var(--border); background:#fff; display:flex; align-items:center; justify-content:center; font-size:15px; color:var(--ink-soft); cursor:pointer; font-family:inherit; position:relative; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, color .15s ease;}
  .icon-btn:hover, .icon-btn:active{background:var(--blue-tint); border-color:var(--blue); color:var(--blue-deep); transform:translateY(-2px) scale(1.08); box-shadow:0 8px 16px rgba(30,100,200,.22);}
  .cart-badge{position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 3px; border-radius:100px; background:#E11D48; color:#fff; font-size:10px; font-weight:700; display:none; align-items:center; justify-content:center; line-height:1;}
  .cart-badge.show{display:flex;}
  .login-link{font-size:13.5px; font-weight:600; color:var(--blue-deep); border:1.5px solid var(--blue); padding:9px 16px; border-radius:8px;}
  .login-link:hover{background:var(--blue-tint);}
  .register-btn{background:var(--blue); color:#fff; padding:10px 18px; border-radius:8px; font-weight:600; font-size:13.5px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
  .register-btn:hover, .register-btn:active{background:var(--blue-deep); transform:translateY(-2px) scale(1.03); box-shadow:0 8px 18px rgba(30,100,200,.32);}
  .hamburger{display:none; width:38px; height:38px; border-radius:9px; border:1px solid var(--border); background:#fff; align-items:center; justify-content:center; font-size:18px; color:var(--ink); flex-shrink:0;}
  .mobile-menu{display:none; flex-direction:column; padding:16px 24px 22px; border-top:1px solid var(--border); background:#fff; box-shadow:0 10px 24px rgba(20,40,70,.08);}
  .mobile-menu.open{display:flex;}
  .mobile-menu a{padding:14px 4px; font-size:15px; font-weight:600; color:var(--ink); border-bottom:1px solid var(--border); display:flex; align-items:center; gap:10px; transition:color .15s, padding-left .15s;}
  .mobile-menu a:hover, .mobile-menu a.active{color:var(--blue-deep); padding-left:8px;}
  .mobile-menu a::before{content:""; width:6px; height:6px; border-radius:50%; background:var(--border); flex-shrink:0; transition:background .15s;}
  .mobile-menu a:hover::before, .mobile-menu a.active::before{background:var(--blue);}
  .mobile-menu-search{max-width:none; margin-top:16px; display:flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:4px 4px 4px 14px;}
  .mobile-menu-search input{flex:1; border:none; outline:none; background:transparent; font-size:13px; font-family:var(--font-bn); padding:8px 0;}
  .mobile-menu-search button{background:var(--blue); color:#fff; border:none; padding:8px 14px; border-radius:6px; font-size:12.5px; font-weight:600;}
  @media(min-width:961px){ .mobile-menu{display:none !important;} }

  /* ===== HERO ===== */
  .hero{padding-top:28px; padding-bottom:8px;}
  .banner{background:linear-gradient(120deg, #123B7A 0%, #1E64C8 60%, #3D86E8 100%); border-radius:18px; padding:52px 48px; color:#fff; position:relative; overflow:hidden; z-index:0; display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center;}
  .banner::after{content:""; position:absolute; right:-60px; top:-60px; width:280px; height:280px; border-radius:50%; background:rgba(255,255,255,.08);}
  .banner-bgtex{
    position:absolute; inset:0; z-index:-1;
    background-image:url('https://images.pexels.com/photos/4134179/pexels-photo-4134179.jpeg?cs=srgb&fm=jpg&w=1200');
    background-size:cover; background-position:center;
    opacity:.16; filter:grayscale(1) contrast(1.1);
    mix-blend-mode:overlay;
  }
  .banner-copy{position:relative; z-index:1;}
  .banner .eyebrow{font-size:12.5px; letter-spacing:.03em; color:#BFD8FA; margin-bottom:12px; display:block;}
  .banner h1{font-family:var(--font-display); font-size:32px; font-weight:700; line-height:1.25; margin-bottom:16px; max-width:480px;}
  .banner h1 .hl-amber{color:var(--amber);}
  .banner p{font-family:var(--font-bn); font-size:14.5px; color:#D6E5FB; max-width:460px; margin-bottom:22px; line-height:1.9;}
  .banner-ctas{display:flex; flex-wrap:wrap; gap:12px;}
  .btn-white{background:#fff; color:var(--blue-deep); padding:12px 22px; border-radius:8px; font-weight:700; font-size:14px; transition:transform .15s ease, box-shadow .15s ease;}
  .btn-white:hover, .btn-white:active{transform:translateY(-3px) scale(1.04); box-shadow:0 12px 24px rgba(0,0,0,.18);}
  .btn-outline{border:1.5px solid rgba(255,255,255,.5); color:#fff; padding:12px 22px; border-radius:8px; font-weight:600; font-size:14px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
  .btn-outline:hover, .btn-outline:active{background:rgba(255,255,255,.15); border-color:#fff; transform:translateY(-3px) scale(1.04); box-shadow:0 12px 24px rgba(0,0,0,.18);}
  .btn-live{background:#fff; border-color:#fff; color:#E11D48;}
  .btn-live:hover, .btn-live:active{background:#FFE4E8; border-color:#fff; color:#C81E3A; transform:translateY(-3px) scale(1.04); box-shadow:0 12px 24px rgba(0,0,0,.18);}
  .btn-offline{background:#fff; border-color:#fff; color:#C2620A;}
  .btn-offline:hover, .btn-offline:active{background:#FFF3E0; border-color:#fff; color:#9B4B08; transform:translateY(-3px) scale(1.04); box-shadow:0 12px 24px rgba(0,0,0,.18);}

  /* Pulsing "live" dot — used anywhere a 🔴 marks something as a live
     (not recorded) course, so it visibly reads as "live" rather than
     sitting there as a static icon. */
  .live-dot{display:inline-block; animation:scLiveDotPulse 1.4s ease-in-out infinite;}
  @keyframes scLiveDotPulse{0%,100%{transform:scale(0.85);} 50%{transform:scale(1.3);}}
  .banner-art{position:relative; z-index:1; display:flex; align-items:center; justify-content:center; height:320px;}
  .banner-art .art-glow{position:absolute; width:280px; height:280px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.16), transparent 70%); z-index:0;}
  .banner-art-img{position:relative; z-index:1; max-width:100%; max-height:100%; filter:drop-shadow(0 18px 30px rgba(6,20,45,.4));}

  section{padding:46px 0;}
  #courses{padding-bottom:0;}
  .quiz-section{padding-top:0; padding-bottom:28px;}
  #top, #courses, #about, #contact{scroll-margin-top:120px;}
  .sec-head{text-align:center; margin-bottom:30px;}
  .sec-head .kicker{font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--blue);}
  .yt-kicker{display:inline-flex; align-items:center; gap:7px;}
  .yt-kicker .yt-word{color:#FF0000;}
  .sec-head h2{font-family:var(--font-display); font-size:28px; font-weight:700; margin-top:8px;}
  .sec-head p{color:var(--ink-soft); font-size:14.5px; margin-top:8px; max-width:520px; margin-left:auto; margin-right:auto;}

  /* ===== COURSES ===== */
  .tabs{display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:22px; margin-bottom:34px;}
  .tab{font-size:13.5px; font-weight:600; padding:9px 18px; border-radius:100px; border:1px solid var(--border); background:#fff; color:var(--ink-soft); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease; cursor:pointer;}
  /* Bigger variant — used for the Recorded/Live Courses toggle on the
     /courses/ archive page, where the tabs are the whole page header
     (no separate heading), so they need more visual weight. */
  .tabs-lg{margin-top:6px; margin-bottom:8px;}
  .tabs-lg .tab{font-size:16px; padding:14px 30px;}
  .tab:hover, .tab:active{transform:translateY(-2px) scale(1.05); box-shadow:0 6px 14px rgba(20,40,70,.12); border-color:var(--blue); color:var(--blue-deep);}
  .tab.active{background:var(--ink); color:#fff; border-color:var(--ink);}
  .tab.active:hover, .tab.active:active{color:#fff;}
  .grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; align-items:start;}
  .card{background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 6px 18px rgba(20,40,70,.08); transition:box-shadow .25s ease, border-color .25s ease; cursor:pointer;}
  .card:hover{box-shadow:0 20px 40px rgba(20,40,70,.16); border-color:var(--blue); z-index:2;}
  .card-img-link{display:block; text-decoration:none; color:inherit;}
  .card-title-link{color:inherit; text-decoration:none;}
  .card-img{aspect-ratio:16/9; background:linear-gradient(135deg, var(--blue-deep), var(--blue)); display:flex; align-items:center; justify-content:center; position:relative; overflow:hidden;}
  .card-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease;}
  .card:hover .card-img img{transform:scale(1.1);}
  .card-img .glyph{transition:transform .4s ease;}
  .card:hover .card-img .glyph{transform:scale(1.1);}
  .card-img.has-thumb{background:#fff; padding:10px;}
  .card-img.has-thumb .badge{top:20px; left:20px;}
  .card-img.has-thumb img{border-radius:8px;}
  .card-img .badge{position:absolute; top:10px; left:10px; background:var(--amber); color:#3A2600; font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:100px; z-index:2;}
  .card-img .glyph{font-family:var(--font-display); font-size:38px; color:#fff; font-weight:700; opacity:.85; letter-spacing:.02em;}
  /* No longer flex:1 — that used to force this box to stretch and fill
     whatever leftover height the grid row's tallest card left behind,
     which is exactly the empty gap under a short title. Cards now size
     to their own content ( .grid's align-items:start above stops the
     grid from stretching every card to match its row's tallest one). */
  .card-body{padding:16px 16px 14px;}
  /* Title + category pill share one row, pill pinned to the top-right
     (even across a wrapped 2-line title), title wraps instead of
     truncating with an ellipsis. */
  .card-title-row{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
  .card-title-row h3{flex:1 1 auto; min-width:0;}
  .card-body h3{font-size:14.4px; font-weight:700; line-height:1.35; transition:color .2s ease;}
  .card:hover .card-body h3{color:var(--blue-deep);}
  /* Sits right above the Add to Cart button, same right edge as the
     title row's pill above it. */
  .card-actions{display:flex; gap:8px; padding:0 16px 16px; align-items:stretch;}
  .btn-cart-add{flex:0 0 42px; display:flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--border); background:#fff; font-size:15px; cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;}
  .btn-cart-add:hover, .btn-cart-add:active{background:var(--blue-tint); border-color:var(--blue); transform:translateY(-2px) scale(1.06); box-shadow:0 8px 16px rgba(30,100,200,.2);}
  .btn-cart-add.added{background:#DCFCE7; border-color:#22C55E;}
  .btn-view{flex:1; text-align:center; font-size:13px; font-weight:700; padding:11px 0; border-radius:8px; background:var(--blue); color:#fff; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
  .btn-view:hover, .btn-view:active{background:var(--blue-deep); transform:translateY(-2px) scale(1.04); box-shadow:0 8px 16px rgba(30,100,200,.32);}
  .btn-enroll{flex:1; text-align:center; font-size:13px; font-weight:700; padding:11px 0; border-radius:8px; background:var(--blue-tint); border:1px solid #CFE0F2; color:var(--blue-deep); transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
  .btn-enroll:hover, .btn-enroll:active{background:#DCE9FA; border-color:var(--blue); transform:translateY(-2px) scale(1.04); box-shadow:0 8px 16px rgba(30,100,200,.18);}
  .viewall{display:flex; justify-content:center; margin:28px 0;}
  .viewall a{border:1.5px solid var(--blue); color:var(--blue-deep); font-weight:700; font-size:14px; padding:11px 26px; border-radius:8px;}
  .viewall .btn-viewall{background:var(--blue); color:#fff; border-color:var(--blue); font-size:15.5px; padding:14px 38px; box-shadow:0 10px 22px rgba(30,100,200,.28); transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
  .viewall .btn-viewall:hover, .viewall .btn-viewall:active{background:var(--blue-deep); transform:translateY(-3px) scale(1.03); box-shadow:0 14px 28px rgba(30,100,200,.36);}
  .beyond-preview{display:none;}

  /* Small pill under a course-card title saying which listing it
     belongs to (Recorded / Online Live / Offline Live) — shown on the
     homepage and every course archive/hub page. */
  .card-cat{flex:0 0 auto; white-space:nowrap; margin-top:1px; font-size:9px; font-weight:700; letter-spacing:.02em; padding:3px 9px; border-radius:100px;}
  .card-cat.cat-recorded{background:var(--blue-tint); color:var(--blue-deep);}
  .card-cat.cat-online{background:#FEE2E2; color:#B91C1C;}
  .card-cat.cat-offline{background:#FFF3CD; color:#8A6116;}

  /* Section-level tabs — the 3-way "Ongoing Recorded / Online Live /
     Offline Live" switch that replaces the old plain heading. */
  .sec-tabs{margin-top:0;}
  .sec-tabs .tab{font-family:var(--font-display); font-size:15px;}
  .course-panel{margin-bottom:0;}

  /* ===== QUIZ BANNER ===== */
  .quiz-banner{background:var(--ink); color:#fff; border-radius:18px; padding:44px; text-align:center; position:relative; overflow:hidden;}
  .quiz-banner::before{content:""; position:absolute; inset:0; background:repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 10px, transparent 10px 20px);}
  .quiz-banner .tag{font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; color:#9FB6D6; position:relative;}
  .quiz-banner h2{font-family:var(--font-display); font-size:30px; font-weight:700; margin:10px 0 22px; position:relative;}
  .quiz-banner h2 span{color:var(--amber);}
  .btn-play{background:var(--amber); color:#3A2600; font-weight:700; padding:13px 30px; border-radius:8px; font-size:14.5px; position:relative; display:inline-block; border:none; cursor:pointer; font-family:inherit; transition:transform .15s ease, box-shadow .15s ease;}
  .btn-play:hover, .btn-play:active{transform:translateY(-3px) scale(1.05); box-shadow:0 12px 24px rgba(242,169,59,.45);}

  /* ===== LOGIN / REGISTRATION PAGE ===== */
  .wc-account-page{padding:0;}

  /* Logged-in dashboard (Orders, Downloads, Addresses, Account details, Log out) */
  .wc-account-nav-col .woocommerce-MyAccount-navigation{background:#fff; border:1px solid var(--border); border-radius:14px; padding:10px; box-shadow:0 6px 18px rgba(20,40,70,.06);}
  .wc-account-nav-col .woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0;}
  .wc-account-nav-col .woocommerce-MyAccount-navigation li{margin:0;}
  .wc-account-nav-col .woocommerce-MyAccount-navigation a{display:block; padding:12px 14px; border-radius:8px; color:var(--ink-soft); font-weight:600; font-size:13.5px; text-decoration:none; transition:background .15s ease, color .15s ease; white-space:nowrap;}
  .wc-account-nav-col .woocommerce-MyAccount-navigation a:hover{background:var(--blue-tint); color:var(--blue-deep);}
  .wc-account-nav-col .woocommerce-MyAccount-navigation-link--active a{background:var(--blue); color:#fff;}
  .wc-account-content-col{background:#fff; border:1px solid var(--border); border-radius:14px; padding:32px; box-shadow:0 6px 18px rgba(20,40,70,.06); font-size:14.5px; color:var(--ink); line-height:1.75;}
  .wc-account-content-col p{margin:0 0 14px;}
  .wc-account-content-col a{color:var(--blue-deep); font-weight:600;}
  .wc-account-content-col strong{color:var(--ink);}

  .wc-account-page table.woocommerce-orders-table, .wc-account-page table.shop_table{width:100%; border-collapse:collapse; font-size:13.5px;}
  .wc-account-page table.woocommerce-orders-table th, .wc-account-page table.shop_table th{text-align:left; padding:10px; border-bottom:2px solid var(--border); color:var(--ink-soft); font-weight:700;}
  .wc-account-page table.woocommerce-orders-table td, .wc-account-page table.shop_table td{padding:10px; border-bottom:1px solid var(--border);}

  .wc-account-page .woocommerce-form-row, .wc-account-page p.form-row{margin-bottom:16px;}
  .wc-account-page .woocommerce-form-row label, .wc-account-page p.form-row label{display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px;}
  .wc-account-page input[type=text], .wc-account-page input[type=email], .wc-account-page input[type=password], .wc-account-page input[type=tel], .wc-account-page select, .wc-account-page textarea{width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:var(--font-body); box-sizing:border-box;}
  .wc-account-page input:focus, .wc-account-page select:focus, .wc-account-page textarea:focus{outline:none; border-color:var(--blue);}

  .wc-account-page .button, .wc-account-page button[type=submit]{background:var(--blue); color:#fff; border:none; padding:12px 24px; border-radius:8px; font-weight:700; font-size:14px; cursor:pointer; font-family:inherit; text-decoration:none; display:inline-block; transition:background .15s ease, transform .15s ease;}
  .wc-account-page .button:hover, .wc-account-page button[type=submit]:hover{background:var(--blue-deep); transform:translateY(-2px);}

  .wc-account-page .woocommerce-message, .wc-account-page .woocommerce-info, .wc-account-page .woocommerce-error{list-style:none; padding:14px 18px; border-radius:10px; margin:0 0 20px; font-size:13.5px; background:var(--blue-tint); color:var(--blue-deep); border:1px solid #CFE0F2;}
  .wc-account-page .woocommerce-error{background:#FEE2E2; color:#B91C1C; border-color:#FCA5A5;}
  .wc-account-page .woocommerce-message::before, .wc-account-page .woocommerce-info::before, .wc-account-page .woocommerce-error::before{display:none;}

  /* ===== WOOCOMMERCE NOTICES (sitewide) =====
     Covers the "X has been added to your cart" / error / info banners
     wherever they appear (course grid, single course, cart, checkout —
     not just the account page above). Owns the full flex layout so the
     icon WooCommerce draws with ::before can't drift out of line with
     the text and the "View cart" button after the sitewide *{margin:0}
     reset — we don't touch the icon's `content`, only its position. */
  .woocommerce-message, .woocommerce-error, .woocommerce-info{
    display:flex !important; flex-wrap:wrap; align-items:center; gap:10px;
    list-style:none; margin:0 0 20px; padding:14px 20px 14px 50px !important;
    border-radius:10px; font-size:14px; line-height:1.5; position:relative !important;
  }
  .woocommerce-message::before, .woocommerce-error::before, .woocommerce-info::before{
    position:absolute !important; left:18px !important; top:50% !important;
    transform:translateY(-50%) !important; margin:0 !important; font-size:19px; line-height:1;
  }
  .woocommerce-message a.button, .woocommerce-info a.button, .woocommerce-error a.button{
    margin-left:auto; order:2;
  }
  /* The My Account page already hides this icon entirely (see the rule
     just above), so it doesn't need the reserved icon space — keep its
     original compact block layout instead of the sitewide flex/icon one. */
  .wc-account-page .woocommerce-message, .wc-account-page .woocommerce-info, .wc-account-page .woocommerce-error{
    display:block !important; padding:14px 18px !important;
  }

  .wc-auth-wrap{display:grid; grid-template-columns:1fr 1fr;}
  .wc-auth-left{position:relative; overflow:hidden; background:linear-gradient(120deg, #123B7A 0%, #1E64C8 60%, #3D86E8 100%); color:#fff; display:flex; align-items:center; padding:60px;}
  .wc-auth-bgtex{position:absolute; inset:0; z-index:0; background-image:url('https://images.pexels.com/photos/4134179/pexels-photo-4134179.jpeg?cs=srgb&fm=jpg&w=1200'); background-size:cover; background-position:center; opacity:.16; filter:grayscale(1) contrast(1.1); mix-blend-mode:overlay;}
  .wc-auth-left-inner{position:relative; z-index:1; max-width:440px; margin:0 auto;}
  .wc-auth-eyebrow{display:block; font-size:12.5px; color:#BFD8FA; margin-bottom:14px;}
  .wc-auth-left-inner h1{font-family:var(--font-display); font-size:32px; font-weight:700; margin-bottom:16px; line-height:1.25;}
  .wc-auth-left-inner h1 span{color:var(--amber);}
  .wc-auth-left-inner p{font-family:var(--font-bn); font-size:14.5px; color:#D6E5FB; line-height:1.8; margin-bottom:26px;}
  .wc-auth-illustration{max-width:100%; filter:drop-shadow(0 18px 30px rgba(6,20,45,.4));}

  .wc-auth-right{display:flex; align-items:center; justify-content:center; padding:60px 40px; background:#fff;}
  .wc-auth-panel{display:none; width:100%; max-width:400px;}
  .wc-auth-panel.active{display:block;}
  /* No-JS safety net: if the URL's #hash matches the register panel's id,
     it shows even if JavaScript never ran. */
  .wc-auth-right:has(#modalAuthRegister:target) #modalAuthLogin{display:none;}
  .wc-auth-right:has(#modalAuthRegister:target) #modalAuthRegister{display:block;}
  .wc-auth-panel h2{font-family:var(--font-display); font-size:26px; font-weight:700; margin-bottom:24px; color:var(--ink);}
  .wc-auth-panel .form-row{margin-bottom:16px;}
  .wc-auth-panel label{display:block; font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:6px;}
  .wc-auth-panel input[type=text], .wc-auth-panel input[type=email], .wc-auth-panel input[type=password]{width:100%; padding:12px 14px; border:1px solid var(--border); border-radius:8px; font-size:14px; font-family:var(--font-body); box-sizing:border-box;}
  .wc-auth-input-icon{position:relative; display:block;}
  .wc-auth-input-icon input{padding-left:40px !important;}
  .wc-auth-input-icon .wc-auth-icon{position:absolute; left:12px; top:50%; transform:translateY(-50%); font-size:14px; opacity:.6; pointer-events:none;}
  .wc-auth-input-icon .wc-auth-eye{position:absolute; right:10px; top:50%; transform:translateY(-50%); background:none; border:none; font-size:15px; cursor:pointer; padding:4px; opacity:.6;}
  .wc-auth-input-icon .wc-auth-eye:hover{opacity:1;}
  .wc-auth-panel input:focus{outline:none; border-color:var(--blue);}
  .wc-auth-row-actions{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
  .wc-auth-row-actions label{display:flex; align-items:center; gap:6px; font-weight:500; font-size:13px; margin-bottom:0;}
  .wc-auth-submit{width:100%; background:var(--blue); color:#fff; border:none; padding:13px 0; border-radius:8px; font-weight:700; font-size:15px; cursor:pointer; font-family:inherit; transition:background .15s ease, transform .15s ease, box-shadow .15s ease;}
  .wc-auth-submit:hover, .wc-auth-submit:active{background:var(--blue-deep); transform:translateY(-2px); box-shadow:0 10px 20px rgba(30,100,200,.3);}
  .woocommerce-LostPassword{display:flex; align-items:center; justify-content:space-between; margin-top:16px; font-size:13px; flex-wrap:wrap; gap:8px;}
  .woocommerce-LostPassword a{color:var(--ink-soft);}
  .wc-auth-switch a{color:var(--blue-deep); font-weight:600;}
  .wc-auth-switch-bottom{text-align:center; margin-top:18px; font-size:13.5px; color:var(--ink-soft);}
  .wc-auth-switch-bottom a{color:var(--blue-deep); font-weight:600;}
  .wc-auth-note{font-size:13px; color:var(--ink-soft); margin-bottom:16px;}
  .wc-auth-panel .required{color:#DC2626;}

  @media(max-width:900px){
    .wc-auth-wrap{grid-template-columns:1fr;}
    .wc-auth-left{padding:40px 24px;}
    .wc-auth-illustration{display:none;}
    .wc-auth-right{padding:40px 24px;}
  }

  /* ===== HEADER PROFILE AVATAR ===== */
  .profile-menu-wrap{position:relative;}
  .profile-avatar-btn{width:38px; height:38px; border-radius:50%; border:2px solid var(--blue); padding:0; overflow:hidden; cursor:pointer; background:#fff; display:flex; align-items:center; justify-content:center; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;}
  .profile-avatar-btn:hover, .profile-avatar-btn:active{border-color:var(--blue-deep); transform:translateY(-2px) scale(1.08); box-shadow:0 8px 18px rgba(30,100,200,.3);}
  .profile-avatar-btn img{width:100%; height:100%; object-fit:cover; display:block;}
  .profile-dropdown{display:none; position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 32px rgba(20,40,70,.16); min-width:180px; padding:8px; z-index:120;}
  .profile-dropdown.open{display:block;}
  .profile-dropdown a{display:block; padding:10px 14px; border-radius:8px; color:var(--ink-soft); font-weight:600; font-size:13.5px; text-decoration:none; transition:background .15s ease, color .15s ease;}
  .profile-dropdown a:hover{background:var(--blue-tint); color:var(--blue-deep);}

  /* ===== NOTIFICATION BELL ===== */
  .notify-menu-wrap{position:relative;}
  .notify-dropdown{display:none; position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow:0 16px 32px rgba(20,40,70,.16); width:320px; max-width:88vw; max-height:420px; overflow-y:auto; z-index:120;}
  .notify-dropdown.open{display:block;}
  .notify-dropdown-head{font-weight:700; font-size:13.5px; padding:12px 14px; border-bottom:1px solid var(--border);}
  .notify-items-list{padding:6px;}
  .notify-item{display:block; padding:10px 10px; border-radius:8px; text-decoration:none; color:var(--ink); transition:background .15s ease;}
  .notify-item:hover{background:var(--blue-tint);}
  .notify-item.unread{background:#EAF1FC;}
  .notify-item p{margin:0; font-size:13px; line-height:1.5;}
  .notify-item span{display:block; margin-top:3px; font-size:11px; color:var(--ink-soft);}
  .notify-empty{color:var(--ink-soft); font-size:13px; text-align:center; padding:26px 10px; margin:0;}

  /* ===== LOGIN / REGISTER POPUP MODAL ===== */
  .auth-modal{display:none; position:fixed; inset:0; z-index:230;}
  .auth-modal.open{display:block;}
  .auth-modal-backdrop{position:absolute; inset:0; background:rgba(10,18,32,.6);}
  .auth-modal-panel{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:min(920px, 94vw); max-height:90vh; background:#fff; border-radius:18px; overflow-y:auto; box-shadow:0 30px 70px rgba(10,18,32,.4);}
  .wc-auth-wrap--modal .wc-auth-left, .wc-auth-wrap--modal .wc-auth-right{padding:40px 32px;}
  .auth-modal-close{position:absolute; top:14px; right:14px; width:34px; height:34px; border-radius:50%; border:none; background:rgba(20,40,70,.5); color:#fff; font-size:15px; cursor:pointer; z-index:2;}
  .auth-modal-close:hover{background:rgba(20,40,70,.75);}
  @media(max-width:700px){
    .auth-modal-panel{width:100vw; height:100vh; border-radius:0; top:0; left:0; transform:none;}
  }

  /* ===== MY COURSES PAGE ===== */
  .my-courses-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
  .my-course-card{background:#fff; border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 4px 14px rgba(20,40,70,.06);}
  .my-course-thumb{aspect-ratio:16/9; background:linear-gradient(135deg,var(--blue-deep),var(--blue)); display:flex; align-items:center; justify-content:center;}
  .my-course-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
  .my-course-thumb .glyph{color:#fff; font-family:var(--font-display); font-weight:700; font-size:22px;}
  .my-course-body{padding:16px;}
  .my-course-body h4{font-size:14px; font-weight:700; margin:0 0 12px;}
  @media(max-width:800px){ .my-courses-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .my-courses-grid{grid-template-columns:1fr;} }

  /* ===== MY PROFILE PAGE ===== */
  .skillcivil-profile-form .profile-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:20px;}
  .skillcivil-profile-form label{display:block; font-size:13px; font-weight:600; color:var(--ink-soft); margin-bottom:6px;}
  .skillcivil-profile-form input[type=text], .skillcivil-profile-form input[type=email], .skillcivil-profile-form input[type=date]{width:100%; padding:11px 14px; border:1px solid var(--border); border-radius:8px; font-size:14px; box-sizing:border-box; font-family:var(--font-body);}
  .skillcivil-profile-form input:disabled{background:var(--bg); color:var(--ink-soft);}
  .profile-photo-preview{margin-top:8px; width:52px; height:52px; border-radius:10px; object-fit:cover;}
  .profile-gender-field .radio-inline{display:inline-flex; align-items:center; gap:5px; font-weight:500; color:var(--ink); margin-right:14px; font-size:13.5px;}
  @media(max-width:800px){ .skillcivil-profile-form .profile-grid{grid-template-columns:1fr 1fr;} }
  @media(max-width:560px){ .skillcivil-profile-form .profile-grid{grid-template-columns:1fr;} }

  /* ===== DASHBOARD ===== */
  .dash-welcome h2{font-family:var(--font-display); font-size:22px; font-weight:700; margin-bottom:6px;}
  .dash-welcome p{font-size:13.5px; color:var(--ink-soft); margin-bottom:24px;}
  .dash-stats{display:flex; gap:14px; margin-bottom:28px; flex-wrap:wrap;}
  .dash-stat-box{background:var(--blue-tint); border:1px solid #CFE0F2; border-radius:12px; padding:16px 22px; min-width:160px;}
  .dash-stat-label{display:block; font-size:12px; color:var(--blue-deep); font-weight:600; margin-bottom:6px;}
  .dash-stat-value{font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--ink);}
  .dash-table-title{font-family:var(--font-display); font-size:16px; font-weight:700; margin-bottom:14px;}
  .dash-orders-table{width:100%; border-collapse:collapse; font-size:13px;}
  .dash-orders-table th{text-align:left; padding:10px; border-bottom:2px solid var(--border); color:var(--ink-soft); font-weight:700;}
  .dash-orders-table td{padding:10px; border-bottom:1px solid var(--border);}
  .status-pill{display:inline-block; padding:4px 10px; border-radius:100px; font-size:11.5px; font-weight:700; background:var(--blue-tint); color:var(--blue-deep);}
  .status-pill.status-completed, .status-pill.status-processing{background:#DCFCE7; color:#15803D;}
  .status-pill.status-on-hold, .status-pill.status-pending{background:#FEF3C7; color:#B45309;}
  .status-pill.status-cancelled, .status-pill.status-failed, .status-pill.status-refunded{background:#FEE2E2; color:#B91C1C;}

  /* ===== CART LIST MODAL ===== */
  .cart-modal{display:none; position:fixed; inset:0; z-index:220;}
  .cart-modal.open{display:block;}
  .cart-modal-backdrop{position:absolute; inset:0; background:rgba(10,18,32,.55);}
  .cart-modal-panel{position:absolute; top:0; right:0; height:100%; width:360px; max-width:90vw; background:#fff; box-shadow:-16px 0 40px rgba(10,18,32,.25); display:flex; flex-direction:column; padding:24px; overflow-y:auto;}
  .cart-modal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
  .cart-modal-head h3{font-family:var(--font-display); font-size:18px; font-weight:700; margin:0;}
  .cart-close{width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:#fff; font-size:14px; color:var(--ink-soft); cursor:pointer; line-height:1;}
  .cart-close:hover{background:var(--bg);}
  .cart-items-list{display:flex; flex-direction:column; gap:10px;}
  .cart-item-row{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid var(--border); border-radius:10px; font-size:13.5px; font-weight:600;}
  .cart-item-row button{width:26px; height:26px; border-radius:50%; border:none; background:var(--bg); color:var(--ink-soft); font-size:14px; cursor:pointer; flex-shrink:0;}
  .cart-item-row button:hover{background:#FDE2E2; color:#DC2626;}
  .cart-empty{color:var(--ink-soft); font-size:13.5px; text-align:center; padding:40px 0;}

  /* ===== SITE KNOWLEDGE QUIZ ===== */
  .quiz-modal{display:none; position:fixed; inset:0; background:rgba(10,18,32,.72); z-index:200; align-items:center; justify-content:center; padding:20px;}
  .quiz-modal.open{display:flex;}
  .quiz-modal-inner{background:#fff; border-radius:18px; max-width:560px; width:100%; padding:32px; position:relative; max-height:90vh; overflow-y:auto; color:var(--ink);}
  .quiz-close{position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:1px solid var(--border); background:#fff; font-size:14px; color:var(--ink-soft); cursor:pointer; line-height:1;}
  .quiz-close:hover{background:var(--bg);}
  .quiz-progress{height:6px; background:var(--blue-tint); border-radius:100px; overflow:hidden; margin-bottom:16px;}
  .quiz-progress-bar{height:100%; background:var(--blue); width:5%; transition:width .3s ease;}
  .quiz-meta{display:flex; justify-content:space-between; font-size:12px; font-weight:700; color:var(--ink-soft); margin-bottom:14px;}
  .quiz-modal h3{font-family:var(--font-display); font-size:18px; font-weight:700; margin:0 0 18px; line-height:1.45; max-width:460px;}
  .quiz-options{display:flex; flex-direction:column; gap:10px; margin-bottom:22px;}
  .quiz-opt{text-align:left; padding:13px 16px; border:1.5px solid var(--border); border-radius:10px; font-size:14px; font-weight:500; background:#fff; color:var(--ink); cursor:pointer; transition:border-color .15s, background .15s; font-family:inherit;}
  .quiz-opt:hover:not(.disabled){border-color:var(--blue);}
  .quiz-opt.correct{border-color:#0E9F6E; background:#EFFCF6; color:#0E9F6E; font-weight:700;}
  .quiz-opt.wrong{border-color:#E11D48; background:#FEF1F3; color:#E11D48; font-weight:700;}
  .quiz-opt.disabled{cursor:default;}
  .quiz-actions{display:flex; justify-content:flex-end;}
  .quiz-next-btn{background:var(--blue); color:#fff; font-weight:700; padding:11px 24px; border-radius:8px; font-size:13.5px; border:none; cursor:pointer; opacity:.35; pointer-events:none; transition:opacity .15s;}
  .quiz-next-btn.active{opacity:1; pointer-events:auto;}
  .quiz-result{text-align:center; padding-top:6px;}
  .quiz-result .badge{display:inline-block; background:var(--blue-tint); color:var(--blue-deep); font-weight:700; font-size:12.5px; padding:7px 16px; border-radius:100px; margin-bottom:16px;}
  .quiz-result .score-big{font-family:var(--font-display); font-size:46px; font-weight:700; color:var(--blue-deep); margin-bottom:4px;}
  .quiz-result .score-label{font-size:13.5px; color:var(--ink-soft); margin-bottom:22px;}
  .quiz-result-actions{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
  .quiz-btn-primary{background:var(--blue); color:#fff; font-weight:700; padding:12px 22px; border-radius:8px; font-size:13.5px; border:none; cursor:pointer; font-family:inherit;}
  .quiz-btn-secondary{background:#fff; color:var(--blue-deep); border:1.5px solid var(--blue); font-weight:700; padding:12px 22px; border-radius:8px; font-size:13.5px; cursor:pointer; font-family:inherit; text-decoration:none; display:inline-block;}
  .quiz-btn-primary:disabled{opacity:.4; cursor:not-allowed;}
  .quiz-email-input{width:100%; padding:13px 16px; border:1.5px solid var(--border); border-radius:10px; font-size:14.5px; font-family:inherit; color:var(--ink); text-align:center;}
  .quiz-email-input:focus{outline:none; border-color:var(--blue);}
  .quiz-email-error{color:#E11D48; font-size:12px; font-weight:600; margin-top:8px; display:none;}
  @media(max-width:600px){
    .quiz-modal-inner{padding:24px 20px;}
    .quiz-result .score-big{font-size:38px;}
  }

  /* ===== MENTOR SUPPORT (beautified) ===== */
  .support{
    background:linear-gradient(135deg, #123B7A 0%, #1E64C8 55%, #3D86E8 100%);
    border-radius:22px; padding:0; position:relative; overflow:hidden;
    display:grid; grid-template-columns:1.3fr .7fr;
  }
  .support::before{content:""; position:absolute; inset:0; background:
    radial-gradient(circle at 90% 15%, rgba(255,255,255,.14), transparent 45%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.04) 0 10px, transparent 10px 22px);}
  .support-text{padding:48px; position:relative; z-index:1;}
  .support-badge{display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); color:#EAF1FC; font-size:12px; font-weight:600; padding:6px 14px; border-radius:100px; margin-bottom:18px;}
  .support h2{font-family:var(--font-bn); color:#fff; font-size:24px; font-weight:700; margin-bottom:16px; line-height:1.5;}
  .support p{font-family:var(--font-bn); font-size:14.5px; color:#D6E5FB; line-height:2; max-width:600px; margin-bottom:26px;}
  .btn-mentor{background:#25D366; color:#fff; font-weight:700; font-size:14.5px; padding:14px 26px; border-radius:10px; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
  .btn-mentor:hover, .btn-mentor:active{background:#1FB855; transform:translateY(-3px) scale(1.04); box-shadow:0 12px 24px rgba(37,211,102,.4);}
  .support-note{display:flex; align-items:center; gap:8px; margin-top:14px; font-size:12.5px; color:#BFD8FA;}
  .support-feats{position:relative; z-index:1; padding:48px 40px 48px 0; display:flex; flex-direction:column; gap:18px; justify-content:center;}
  .support-feat{display:flex; gap:12px; align-items:center;}
  .support-feat .ico{width:36px; height:36px; border-radius:9px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0;}
  .support-feat span{font-family:var(--font-bn); font-size:13px; color:#EAF1FC; line-height:1.6;}

  /* ===== REVIEWS ===== */
  #reviews{padding-top:78px;}
  .reviews-marquee{position:relative;}
  .reviews-marquee::before, .reviews-marquee::after{
    content:""; position:absolute; top:0; bottom:0; width:60px; z-index:2; pointer-events:none;
  }
  .reviews-marquee::before{left:0; background:linear-gradient(90deg, var(--bg), transparent);}
  .reviews-marquee::after{right:0; background:linear-gradient(270deg, var(--bg), transparent);}
  .reviews-track{
    display:flex; gap:18px; overflow-x:auto; scroll-behavior:smooth; padding:4px 4px 14px;
    scrollbar-width:none; -ms-overflow-style:none; cursor:grab;
  }
  .reviews-track::-webkit-scrollbar{display:none;}
  .quote{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:22px; flex:0 0 280px;}
  .quote .stars{color:var(--amber); font-size:13px; margin-bottom:10px;}
  .quote p{font-size:13.5px; line-height:1.6; margin-bottom:16px; color:var(--ink);}
  .quote .who{display:flex; align-items:center; gap:10px;}
  .quote .who .dot{width:34px; height:34px; border-radius:50%; background:var(--blue-tint); color:var(--blue-deep); font-family:var(--font-display); font-weight:700; font-size:13px; display:flex; align-items:center; justify-content:center;}
  .quote .name{font-size:13px; font-weight:700;}
  .quote .role{font-size:11.5px; color:var(--ink-soft);}

  /* ===== FLOATING LAUNCHER ===== */
  .launcher{padding-top:46px; padding-bottom:46px;}
  .launch-row{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start;}
  .launch-item{display:flex; flex-direction:column; flex:0 1 calc(33.333% - 11px); min-width:240px;}
  .launch-btn{
    background:var(--card); border:1px solid var(--border); border-radius:16px; padding:18px 18px 16px;
    cursor:pointer; text-align:left; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease;
    animation:float 5s ease-in-out infinite; position:relative; overflow:visible;
  }
  .launch-btn::before{
    content:""; position:absolute; top:-14px; left:14px; width:64px; height:64px; border-radius:50%;
    background:var(--accent, var(--blue)); opacity:.16; filter:blur(16px); z-index:0; pointer-events:none;
  }
  .launch-btn:nth-child(1){--accent:#2B6CB0;}
  .launch-btn:nth-child(2){--accent:#D97706;}
  .launch-btn:nth-child(3){--accent:#0E9F6E;}
  .launch-btn:nth-child(4){--accent:#7C3AED;}
  .launch-btn:nth-child(5){--accent:#DB2777;}
  .launch-btn:nth-child(2){animation-delay:.4s;}
  .launch-btn:nth-child(3){animation-delay:.8s;}
  .launch-btn:nth-child(4){animation-delay:1.2s;}
  .launch-btn:nth-child(5){animation-delay:1.6s;}
  .launch-btn:hover{transform:translateY(-8px) scale(1.015); box-shadow:0 18px 36px rgba(20,40,70,.14); border-color:var(--accent);}
  .launch-btn.active{border-color:var(--accent); box-shadow:0 18px 36px rgba(20,40,70,.16);}
  @keyframes float{0%,100%{transform:translateY(0);}50%{transform:translateY(-6px);}}
  .launch-body{position:relative; z-index:1;}
  .launch-btn .ico{
    width:42px; height:42px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:18px; margin-bottom:11px; background:var(--accent); box-shadow:0 8px 16px color-mix(in srgb, var(--accent) 45%, transparent);
    transform:translateY(-4px); transition:transform .22s ease;
  }
  .launch-btn:hover .ico{transform:translateY(-8px) scale(1.06);}
  .launch-btn h3{font-family:var(--font-display); font-size:14.5px; font-weight:700; margin-bottom:5px;}
  .launch-btn p{font-family:var(--font-bn); font-size:11.5px; color:var(--ink-soft); line-height:1.5; max-width:88%;}
  .launch-arrow{
    position:absolute; top:14px; right:14px; width:26px; height:26px; border-radius:50%; z-index:1;
    background:color-mix(in srgb, var(--accent) 12%, #fff); border:1px solid var(--accent); color:var(--accent);
    display:flex; align-items:center; justify-content:center; font-size:11px; transition:transform .25s ease, background .2s ease, color .2s ease;
  }
  .launch-btn:hover .launch-arrow, .launch-btn.active .launch-arrow{background:var(--accent); color:#fff; transform:rotate(180deg);}

  .panel{display:none; flex:0 0 100%; width:100%; scroll-margin-top:110px;}
  .panel.open{display:block; animation:panelFadeIn .3s ease;}
  @keyframes panelFadeIn{from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);}}
  .panel-inner{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:32px; cursor:default;}

  .benefit-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .benefit{padding:16px; border:1px solid var(--border); border-radius:12px;}
  .benefit .ico{font-size:20px; margin-bottom:8px;}
  .benefit h4{font-family:var(--font-bn); font-size:14px; font-weight:700; margin-bottom:6px;}
  .benefit p{font-family:var(--font-bn); font-size:12.5px; color:var(--ink-soft); line-height:1.6;}

  .why-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px;}
  .why-item{display:flex; gap:16px; padding:16px; border:1px solid var(--border); border-radius:12px;}
  .why-num{font-family:var(--font-display); font-size:24px; font-weight:700; color:var(--blue-tint); -webkit-text-stroke:1.5px var(--blue); flex-shrink:0;}
  .why-item h4{font-size:14.5px; font-weight:700; margin-bottom:6px;}
  .why-item p{font-family:var(--font-bn); font-size:12.5px; color:var(--ink-soft); line-height:1.6;}

  .gloss-cats{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:22px;}
  .gloss-cat{font-size:13px; font-weight:700; padding:9px 18px; border-radius:100px; border:1.5px solid var(--border); background:#fff; color:var(--ink-soft); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease, background .15s ease; user-select:none;}
  .gloss-cat:hover{transform:translateY(-2px); box-shadow:0 6px 14px rgba(20,40,70,.12); border-color:var(--blue); color:var(--blue-deep);}
  .gloss-cat.active{background:var(--blue); border-color:var(--blue); color:#fff; box-shadow:0 8px 18px rgba(30,100,200,.28);}
  .gloss-cat.active:hover{color:#fff;}
  .gloss-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:14px;}
  .gloss-term{padding:16px; border:1px solid var(--border); border-radius:10px;}
  .gloss-term b{font-family:var(--font-display); font-size:14.5px; font-weight:700; display:block; margin-bottom:6px; color:var(--blue-deep);}
  .gloss-term span{font-family:var(--font-bn); font-size:12.5px; color:var(--ink-soft); line-height:1.6;}

  .soft-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
  .soft-card{border:1px solid var(--border); border-radius:12px; padding:20px; text-align:center;}
  .soft-card .ico2{width:48px; height:48px; border-radius:12px; background:var(--blue-tint); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; margin:0 auto 12px; font-family:var(--font-display); font-weight:700; font-size:14px;}
  .soft-card h4{font-size:14px; font-weight:700; margin-bottom:6px;}
  .soft-card p{font-size:12px; color:var(--ink-soft); line-height:1.5;}

  /* About-us panel */
  .about-intro{text-align:center; margin-bottom:30px;}
  .about-intro .kicker{color:var(--blue); font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;}
  .about-intro h3{font-family:var(--font-display); font-size:22px; font-weight:700; margin:8px 0 10px;}
  .about-intro p{font-family:var(--font-bn); font-size:13.5px; color:var(--ink-soft); max-width:620px; margin:0 auto; line-height:1.8;}
  .mentor-full{display:grid; grid-template-columns:180px 1fr; gap:26px; padding:26px 0; border-top:1px solid var(--border);}
  .mentor-full:first-of-type{border-top:none;}
  .mentor-photo{width:100%; aspect-ratio:1; border-radius:14px; background:linear-gradient(135deg, var(--blue), var(--blue-deep)); display:flex; align-items:center; justify-content:center; color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; text-align:center; padding:10px;}
  .mentor-photo-img{object-fit:cover; padding:0; background:var(--border);}
  .mentor-tag{font-size:11px; font-weight:700; color:var(--blue-deep); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px;}
  .mentor-role{font-size:12.5px; color:var(--ink-soft); font-weight:600; margin-bottom:4px;}
  .mentor-full h4{font-size:19px; font-weight:700; margin-bottom:12px; font-family:var(--font-display);}
  .mentor-full p{font-size:13.5px; color:var(--ink-soft); line-height:1.75; margin-bottom:12px;}
  .mentor-full p:last-child{margin-bottom:0;}

  /* ===== YOUTUBE ===== */
  .yt-carousel{position:relative;}
  .yt-track{
    display:flex; gap:14px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x proximity;
    padding:4px 4px 8px; scrollbar-width:none; -ms-overflow-style:none;
  }
  .yt-track::-webkit-scrollbar{display:none;}
  .yt-card{background:var(--card); border:1px solid var(--border); border-radius:10px; overflow:hidden; flex:0 0 115px; scroll-snap-align:start; box-shadow:0 4px 14px rgba(20,40,70,.07); transition:transform .2s ease, box-shadow .2s ease; cursor:pointer; display:block; text-decoration:none; color:inherit;}
  .yt-card:hover{transform:translateY(-5px) scale(1.03); box-shadow:0 16px 32px rgba(20,40,70,.16); z-index:2;}
  .yt-thumb{aspect-ratio:9/16; background:linear-gradient(160deg,#16222E,#1E64C8); position:relative; display:flex; align-items:center; justify-content:center;}
  .yt-thumb .play{width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; color:var(--ink); font-size:10px;}
  .yt-thumb .badge{position:absolute; top:6px; left:6px; background:#E11D48; color:#fff; font-size:8px; font-weight:700; padding:2px 6px; border-radius:100px;}
  .yt-body{padding:8px;}
  .yt-body h5{font-size:10.5px; font-weight:700; line-height:1.3; margin-bottom:3px;}
  .yt-body span{font-size:9px; color:var(--ink-soft);}
  .yt-arrow{
    position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; border-radius:50%;
    background:#fff; border:1px solid var(--border); box-shadow:0 6px 18px rgba(20,40,70,.12);
    display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--ink); z-index:3;
  }
  .yt-arrow.left{left:-14px;}
  .yt-arrow.right{right:-14px;}

  /* ===== FAQ ===== */
  .faq-wrap{max-width:760px; margin:0 auto;}
  .faq-item{background:var(--card); border:1px solid var(--border); border-radius:10px; padding:18px 20px; margin-bottom:10px;}
  .faq-q{display:flex; justify-content:space-between; align-items:center; cursor:pointer; font-weight:600; font-size:15px;}
  .faq-a{max-height:0; overflow:hidden; transition:max-height .25s ease; font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
  .faq-item.open .faq-a{max-height:200px; margin-top:10px;}
  .faq-q .plus{color:var(--blue); font-size:18px;}
  .faq-contact{text-align:center; margin-top:20px; font-size:13.5px; color:var(--ink-soft);}
  .faq-contact a{color:var(--blue-deep); font-weight:600;}

  /* ===== FOOTER ===== */
  footer{background:linear-gradient(180deg, var(--ink), #0F1822); color:#C9D2DB; padding:56px 0 0; margin-top:20px; position:relative;}
  footer::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg, var(--blue), var(--amber), var(--blue));}
  .foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1.3fr; gap:28px; margin-bottom:34px;}
  footer h5{color:#fff; font-size:14px; margin-bottom:16px; font-family:var(--font-display); position:relative; padding-bottom:10px;}
  footer h5::after{content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; background:var(--blue);}
  footer a{display:block; font-size:13.5px; color:#9FADBB; margin-bottom:10px; transition:color .15s;}
  footer a:hover{color:#fff;}
  .socials{display:flex; gap:10px; margin-top:16px;}
  .socials a{width:36px; height:36px; border-radius:10px; background:#1E2C3D; color:#C9D2DB; display:flex; align-items:center; justify-content:center; font-size:14px; margin-bottom:0; transition:background .15s, transform .15s, color .15s;}
  .socials a:hover{background:var(--blue); color:#fff; transform:translateY(-3px);}
  .contact-block .c-row{display:flex; gap:10px; align-items:flex-start; margin-bottom:12px;}
  .contact-block .c-ico{width:30px; height:30px; border-radius:8px; background:#1E2C3D; display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0;}
  .contact-block .c-row a, .contact-block .c-row span{font-size:13.5px; color:#9FADBB; margin:0; padding-top:5px;}
  .contact-block .c-row a:hover{color:#fff;}
  .payment-strip{border-top:1px solid #24344A; padding:20px 0; display:flex; justify-content:center; gap:10px; flex-wrap:wrap;}
  .pay-chip{font-size:11.5px; font-weight:600; color:#B7C2CE; border:1px solid #2C3E52; padding:6px 14px; border-radius:100px;}
  .foot-bottom{border-top:1px solid #24344A; padding:18px 0; font-size:12.5px; color:#7E8D9C; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; align-items:center;}
  .foot-bottom-left{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px;}
  .foot-bottom-left span{white-space:nowrap;}
  .foot-bottom-left span + span{position:relative; padding-left:14px;}
  .foot-bottom-left span + span::before{content:"•"; position:absolute; left:0; color:#3A4C60;}
  .back-top{color:#9FADBB; font-weight:600; display:inline-flex; align-items:center; gap:6px; margin:0; white-space:nowrap;}
  .back-top:hover{color:#fff;}

  @media(max-width:960px){
    .navlinks, .header-search{display:none;}
    .hamburger{display:flex;}
    .banner{grid-template-columns:1fr; padding:36px 26px;}
    .grid, .soft-grid, .benefit-grid, .why-grid, .gloss-grid{grid-template-columns:repeat(2,1fr);}
    .foot-grid{grid-template-columns:1fr 1fr;}
    .support{grid-template-columns:1fr;}
    .support-feats{padding:0 48px 48px;}
    .launch-item{flex-basis:100%;}
    .mentor-full{grid-template-columns:1fr;}
    .mentor-photo{max-width:140px;}
    h1{font-size:26px;}
  }

  @media(max-width:600px){
    #top, #courses, #about, #contact{scroll-margin-top:96px;}
    .topbar{font-size:11.5px; padding:8px 14px;}
    .nav{height:66px; gap:8px;}
    .logo{font-size:18px;}
    .nav-right{gap:6px;}
    .nav-right .icon-btn{display:none;}
    .nav-right .login-link{padding:9px 12px; font-size:12px;}
    .register-btn{padding:9px 14px; font-size:12.5px;}
    .banner{padding:28px 20px; border-radius:14px;}
    .banner h1{font-size:22px;}
    .banner p{font-size:13.5px;}
    .banner-ctas{flex-direction:column; gap:10px;}
    .btn-white, .btn-outline{text-align:center;}
    section{padding:34px 0;}
    #reviews{padding-top:56px;}
    .sec-head h2{font-size:22px;}
    .grid, .soft-grid, .benefit-grid, .why-grid, .gloss-grid{grid-template-columns:1fr;}
    .card-actions{gap:6px;}
    .card-actions .btn-view, .card-actions .btn-enroll{font-size:11.5px; padding:10px 0;}
    .card-actions .btn-cart-add{flex:0 0 36px; font-size:13px;}
    .quiz-banner{padding:30px 20px;}
    .quiz-banner h2{font-size:24px;}
    .support-text{padding:30px 22px;}
    .support h2{font-size:19px;}
    .support-feats{padding:0 22px 30px;}
    .launch-btn h3{font-size:15px;}
    .mentor-full{padding:20px 0;}
    .yt-card{flex:0 0 90px;}
    .yt-arrow{width:34px; height:34px; font-size:14px;}
    .yt-arrow.left{left:-6px;}
    .yt-arrow.right{right:-6px;}
    .quote{flex:0 0 240px;}
    .foot-grid{grid-template-columns:1fr;}
    .foot-bottom{flex-direction:column; align-items:flex-start; gap:10px;}
    .foot-bottom-left{gap:4px 12px;}
  }

  /* ================================================================
     COURSE DETAILS PAGE (single-skillcivil_course.php)
     ================================================================ */

  /* Breadcrumb */
  .breadcrumb{background:#fff; border-bottom:1px solid var(--border); padding:14px 0; font-size:13px; color:var(--ink-soft);}
  .breadcrumb a{color:var(--blue-deep);}
  .breadcrumb a:hover{text-decoration:underline;}
  .breadcrumb .sep{margin:0 6px; color:#C3CBD3;}

  /* Legal pages (Terms & Conditions, Privacy Policy, etc.) */
  .legal-page{max-width:820px; padding:48px 24px 80px;}
  .legal-page h1{font-family:var(--font-display); font-size:30px; margin:0 0 6px;}
  .legal-content{margin-top:20px; color:var(--ink); font-size:15px; line-height:1.8;}
  .legal-content p{margin:0 0 16px;}
  .legal-content h2{font-family:var(--font-display); font-size:19px; color:var(--ink); margin:34px 0 12px; padding-top:14px; border-top:1px solid var(--border);}
  .legal-content h2:first-child{margin-top:0; padding-top:0; border-top:none;}
  .legal-content ul{margin:0 0 16px; padding-left:22px;}
  .legal-content li{margin-bottom:10px;}
  .legal-content a{color:var(--blue-deep); text-decoration:underline;}
  .legal-content strong{color:var(--ink);}

  /* Hero — sits inside the existing .banner gradient card */
  .course-hero{padding-top:8px;}
  /* .banner is normally a 2-column grid (copy + illustration) for the
     homepage hero — the course page reuses the same card but only has
     ONE child (.course-hero-inner), so force it back to a plain block
     here or that single child collapses into the grid's first column
     and leaves the whole right half of the card empty. */
  .course-hero .banner{display:block;}
  .course-hero-inner{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:start; position:relative; z-index:1;}
  .course-hero-copy .tagline{margin-bottom:22px;}
  .course-tags{display:flex; gap:8px; flex-wrap:wrap; margin:14px 0 26px;}
  .course-tags .tag{font-size:10.5px; font-weight:700; letter-spacing:.03em; color:#EAF1FC; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); padding:5px 11px; border-radius:100px;}
  .meta-row{display:flex; gap:22px; flex-wrap:wrap; padding-top:20px; margin-bottom:22px; border-top:1px solid rgba(255,255,255,.16);}
  .meta-row .m-item{display:flex; align-items:center; gap:9px; color:#D6E5FB; font-size:13.5px;}
  .meta-row .m-item svg{color:var(--amber); flex:none;}
  .call-box{display:inline-flex; align-items:center; gap:12px; background:#25D366; padding:12px 20px; border-radius:12px; box-shadow:0 10px 24px rgba(37,211,102,.35); transition:transform .15s ease, box-shadow .15s ease;}
  .call-box:hover{transform:translateY(-3px) scale(1.02); box-shadow:0 14px 30px rgba(37,211,102,.45);}
  .call-box-ico{width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.22); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;}
  .call-box-text{display:flex; flex-direction:column; gap:2px; color:#fff; line-height:1.3;}
  .call-box-text strong{font-size:13px; font-weight:700;}
  .call-box-text span:last-child{font-size:15.5px; font-weight:700; font-family:var(--font-display);}

  /* Price card */
  .price-card{background:var(--card); border-radius:16px; box-shadow:0 20px 48px -12px rgba(10,20,40,.4); overflow:hidden;}
  .price-card-top{padding:22px 24px 18px; border-bottom:1px solid var(--border);}
  .old-price{font-size:13px; color:var(--ink-soft); text-decoration:line-through;}
  .price-line{display:flex; align-items:baseline; gap:10px; margin-top:4px; flex-wrap:wrap;}
  .new-price{font-family:var(--font-display); font-size:26px; font-weight:700; color:var(--blue-deep);}
  .discount-badge{background:var(--blue-tint); color:var(--blue-deep); font-size:11px; font-weight:700; padding:4px 10px; border-radius:100px;}
  .price-card-body{padding:20px 24px;}
  .price-card-body ul{list-style:none; display:flex; flex-direction:column; gap:11px; margin-bottom:20px; padding:0;}
  .price-card-body li{display:flex; align-items:center; gap:9px; font-size:13.5px; color:var(--ink-soft);}
  .price-card-body li svg{color:var(--blue); flex:none;}
  .btn-buy-now{display:block; text-align:center; font-size:14px; font-weight:700; padding:13px 0; border-radius:9px; background:var(--blue); color:#fff; transition:transform .15s ease, box-shadow .15s ease, background .15s ease;}
  .btn-buy-now:hover, .btn-buy-now:active{background:var(--blue-deep); transform:translateY(-2px) scale(1.02); box-shadow:0 8px 16px rgba(30,100,200,.32);}
  .price-card-foot{display:flex; justify-content:space-between; padding:12px 24px; background:var(--bg); font-size:11.5px; color:var(--ink-soft); border-top:1px solid var(--border); gap:8px; flex-wrap:wrap;}

  /* Section shell + tabs (Overview / Syllabus / Audience) */
  .card-shell{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:28px; box-shadow:0 6px 18px rgba(20,40,70,.06);}
  .page-tabs{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px;}
  .page-tab{font-size:13.5px; font-weight:600; padding:10px 18px; border-radius:9px; border:1px solid var(--border); background:#fff; color:var(--ink-soft); transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;}
  .page-tab:hover{border-color:var(--blue); color:var(--blue-deep); background:var(--blue-tint); transform:translateY(-2px) scale(1.03); box-shadow:0 8px 16px rgba(30,100,200,.18);}
  .page-tab.active{background:var(--blue); border-color:var(--blue); color:#fff;}
  .page-tab.active:hover{color:#fff; transform:translateY(-2px) scale(1.03);}
  .tab-panel{display:none;}
  .tab-panel.active{display:block;}

  /* Overview — skill checklist */
  .skill-chip-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .skill-chip{display:flex; align-items:center; gap:10px; padding:13px 16px; border:1px solid var(--border); border-radius:10px; font-size:13.5px; background:var(--bg);}
  .check-badge{width:22px; height:22px; border-radius:50%; background:var(--blue-tint); color:var(--blue-deep); display:flex; align-items:center; justify-content:center; flex-shrink:0;}

  /* Syllabus — topics with an open/closed lock icon next to the chevron */
  .module-list{display:flex; flex-direction:column; gap:10px;}
  .module-item{border:1px solid var(--border); border-radius:10px; overflow:hidden;}
  .module-head{display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer; background:#fff;}
  .module-num{font-family:var(--font-display); font-size:12px; color:var(--blue); font-weight:700;}
  .module-head h4{font-size:14.5px; flex:1;}
  .module-lock{display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .module-lock.unlocked{color:#0E9F6E;}
  .module-lock.locked{color:#B45309;}
  .module-head .chev{transition:transform .2s ease; color:var(--ink-soft); flex-shrink:0;}
  .module-item.open > .module-head .chev{transform:rotate(180deg);}
  .module-body{max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .module-item.open .module-body{max-height:3000px;}
  .module-body > p{font-family:var(--font-bn); font-size:13px; color:var(--ink-soft); padding:0 18px 16px 50px; line-height:1.7;}
  .module-video{position:relative; margin:0 18px 16px 50px; border-radius:8px; overflow:hidden; background:#000;}
  .module-video::before{content:""; display:block; padding-top:56.25%;}
  .module-video iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  /* Invisible panels sitting ON TOP of the iframe's own title/channel link
     (top) and Share / "Watch on YouTube" buttons (bottom corners) — those
     are YouTube's own UI and can't be removed from the embed itself, so
     this blocks clicks on just those spots instead. The seek bar, volume,
     play/pause and fullscreen controls along the bottom stay untouched. */
  .module-video-shield{position:absolute; z-index:3; cursor:default;}
  .module-video-shield-top{top:0; left:0; right:0; height:15%;}
  .module-video-shield-share{left:0; bottom:0; width:20%; height:17%;}
  .module-video-shield-watch{right:0; bottom:0; width:34%; height:17%;}
  .module-video-locked-inner{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#BFD8FA; background:linear-gradient(135deg,#0B1B36,#173B72); text-align:center; padding:16px;}
  .module-video-locked-inner svg{width:26px; height:26px;}
  .module-video-locked-inner p{margin:0; font-size:12.5px; font-family:var(--font-bn); max-width:260px; line-height:1.6;}
  @media (max-width:640px){ .module-video{margin-left:18px;} }

  /* Live Course — Syllabus tab: online (accordion, reuses .module-*
     above) and offline (simple title-left/location-right list). */
  .live-notice{margin:0 18px 12px 50px; padding:10px 14px; background:#FFF7E6; border:1px solid #F3D9A0; border-radius:8px; font-size:13px; color:#8A6116; font-weight:600;}
  .live-actions{display:flex; flex-wrap:wrap; gap:10px; padding:0 18px 16px 50px;}
  .btn-pdf{display:inline-flex; align-items:center; gap:6px; padding:9px 18px; border:1.5px solid var(--blue); border-radius:8px; color:var(--blue-deep); background:#fff; font-weight:600; font-size:13.5px; transition:background .15s ease;}
  .btn-pdf:hover{background:var(--blue-tint);}
  @media (max-width:640px){ .live-notice, .live-actions{margin-left:18px; padding-left:18px;} }

  .syll-offline-list{display:flex; flex-direction:column; gap:10px;}
  .syll-offline-row{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding:16px 18px; border:1px solid var(--border); border-radius:10px; background:#fff;}
  .syll-offline-main h4{font-size:14.5px; margin-bottom:4px;}
  .syll-offline-main p{font-size:13px; color:var(--ink-soft); line-height:1.6; margin:0;}
  .syll-offline-location{flex:0 0 auto; font-size:13px; color:var(--blue-deep); font-weight:600; text-align:right; white-space:nowrap;}
  @media (max-width:560px){ .syll-offline-row{flex-direction:column;} .syll-offline-location{text-align:left;} }

  /* Nested "Comments for Student and Feedback from Instructor" accordion —
     visible to everyone, but the panel content itself is locked unless
     skillcivil_user_has_course_access() is true for the viewer. */
  .qa-block{padding:0 18px 18px 50px;}
  .qa-toggle{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; background:var(--bg); border:1px dashed var(--border); border-radius:8px; padding:10px 14px; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;}
  .qa-toggle:hover{border-color:var(--blue); color:var(--blue-deep); background:var(--blue-tint);}
  .qa-toggle .chev-sm{transition:transform .2s ease; flex-shrink:0;}
  .qa-block.open .qa-toggle .chev-sm{transform:rotate(180deg);}
  .qa-block.open .qa-toggle{border-style:solid; border-color:var(--blue); color:var(--blue-deep); background:var(--blue-tint);}
  .qa-panel{max-height:0; overflow:hidden; transition:max-height .3s ease;}
  .qa-block.open .qa-panel{max-height:3000px; margin-top:12px;}

  .qa-locked{display:flex; align-items:flex-start; gap:10px; background:#FFF7ED; border:1px solid #FDE7CB; border-radius:10px; padding:14px 16px; color:#9A5B0A;}
  .qa-locked svg{flex-shrink:0; margin-top:2px;}
  .qa-locked p{font-size:12.5px; line-height:1.6; margin:0;}

  /* Live Course — Google Classroom access box, shown once a seat is booked. */
  .classroom-box{background:#EAF6EE; border:1px solid #CDEBD6; border-radius:10px; padding:18px 20px;}
  .classroom-box p{color:#1C6B3A;}

  .qa-thread-list{display:flex; flex-direction:column; gap:12px; margin-bottom:14px;}
  .qa-thread{border:1px solid var(--border); border-radius:10px; overflow:hidden;}
  .qa-msg, .qa-reply{padding:12px 14px; font-size:12.5px; line-height:1.6;}
  .qa-msg{background:#fff;}
  .qa-reply{background:var(--blue-tint); border-top:1px solid #CFE0F2;}
  .qa-msg-head{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:11.5px; color:var(--ink-soft); flex-wrap:wrap;}
  .qa-msg-head strong{color:var(--ink);}
  .qa-reply .qa-msg-head strong{color:var(--blue-deep);}
  .qa-attachment{margin-top:8px;}
  .qa-attachment img{border-radius:6px;}

  .qa-form textarea{width:100%; border:1px solid var(--border); border-radius:8px; padding:10px 12px; font-size:13px; font-family:inherit; resize:vertical; min-height:64px;}
  .qa-form textarea:focus{outline:none; border-color:var(--blue);}
  .qa-form-row{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px; flex-wrap:wrap;}
  .qa-file-label{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--ink-soft); border:1px solid var(--border); border-radius:8px; padding:8px 12px; cursor:pointer; position:relative;}
  .qa-file-label:hover{border-color:var(--blue); color:var(--blue-deep);}
  .qa-file-label input[type=file]{position:absolute; inset:0; opacity:0; cursor:pointer;}
  .qa-submit-btn{background:var(--blue); color:#fff; border:none; font-weight:700; font-size:12.5px; padding:9px 20px; border-radius:8px; cursor:pointer; font-family:inherit; transition:background .15s ease, transform .15s ease;}
  .qa-submit-btn:hover, .qa-submit-btn:active{background:var(--blue-deep); transform:translateY(-2px);}

  /* Audience & Prerequisites */
  .two-col-lists{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  .two-col-lists h4{font-size:14.5px; margin-bottom:14px;}
  .two-col-lists ul{list-style:none; display:flex; flex-direction:column; gap:12px; padding:0;}
  .two-col-lists li{display:flex; gap:10px; align-items:flex-start; font-family:var(--font-bn); font-size:13.5px; color:var(--ink-soft); line-height:1.6;}
  .two-col-lists li svg{color:var(--blue); flex:none; margin-top:2px;}

  @media(max-width:960px){
    .course-hero-inner{grid-template-columns:1fr;}
    .skill-chip-grid, .two-col-lists{grid-template-columns:1fr;}
  }
  @media(max-width:600px){
    .price-card-foot{flex-direction:column; align-items:flex-start;}
    .qa-form-row{flex-direction:column; align-items:stretch;}
    .qa-submit-btn{width:100%;}
    .module-body > p{padding-left:18px;}
    .qa-block{padding-left:18px;}
  }