/* =========================================================================
   Affinity HVAC Training — ported from the approved concept design.
   Tokens, components, and layout match affinity-design.html 1:1; the
   "App additions" block at the bottom adds forms, catalog, membership,
   mobile nav, and flash messages for the live MVC app.
   ========================================================================= */

:root{
  --ink:#0d1b2a;
  --steel:#1b3a5b;
  --blue:#0a6ebd;
  --blue-bright:#1789e6;
  --amber:#f6a609;
  --amber-deep:#d6850a;
  --paper:#f7f4ee;
  --paper-2:#efe9df;
  --line:#d8d0c2;
  --white:#ffffff;
  --green:#1f8a52;
  --red:#c0392b;
  --shadow:0 12px 40px -12px rgba(13,27,42,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Source Serif 4',Georgia,serif;
  color:var(--ink);
  background:var(--paper);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display,.nav,.btn,.eyebrow,.stat-num{font-family:'Archivo',system-ui,sans-serif}
.wrap{max-width:1180px;margin:0 auto;padding:0 28px}

/* ---------- top bar ---------- */
.topbar{background:var(--ink);color:#cdd8e4;font-family:'Archivo',sans-serif;font-size:13px;font-weight:500}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:40px}
.topbar .badge{display:inline-flex;align-items:center;gap:7px;color:#fff}
.topbar .badge svg{width:15px;height:15px}
.topbar a{color:#9fb4c9;text-decoration:none}
.topbar a:hover{color:#fff}
/* Mobile: the two topbar items collide — keep the ICC badge centered, drop the contact line. */
@media(max-width:600px){
  .topbar .wrap{justify-content:center;height:auto;min-height:40px;text-align:center}
  .topbar .wrap span:not(.badge){display:none}
}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(247,244,238,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:78px}
.logo{display:flex;align-items:center;gap:13px;text-decoration:none;color:var(--ink)}
.logo .mark{width:46px;height:46px;border-radius:11px;background:linear-gradient(140deg,var(--blue),var(--steel));display:grid;place-items:center;box-shadow:var(--shadow)}
.logo .mark svg{width:26px;height:26px;color:#fff}
/* Oversized badge that sits below the dark topbar and bleeds only downward into the
   section's top padding. Negative bottom margin keeps its layout footprint at 78px so
   the nav height is unchanged; the positive top margin drops it clear of the topbar. */
.logo .logo-badge{width:104px;height:104px;border-radius:50%;object-fit:cover;display:block;flex-shrink:0;margin:12px 0 -38px;position:relative;z-index:2}
.footer-badge{width:56px;height:56px;border-radius:50%;object-fit:cover;display:block;flex-shrink:0;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
/* Content that sits right under the header (admin nav, flash banner) needs extra top room
   so the downward-bleeding logo doesn't overlap it. (No bleed on mobile — see media query.) */
.wrap.below-logo{padding-top:52px}
.logo .name{font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;letter-spacing:-.4px;line-height:1.05}
.logo .name span{display:block;font-weight:600;font-size:11px;letter-spacing:2px;color:var(--blue);text-transform:uppercase}
nav.nav{display:flex;align-items:center;gap:30px;font-weight:600;font-size:15px}
nav.nav a{text-decoration:none;color:var(--steel)}
nav.nav a:hover{color:var(--blue)}
nav.nav form{display:inline-flex}
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:15px;text-decoration:none;border:none;cursor:pointer;border-radius:10px;padding:12px 22px;transition:transform .15s ease,box-shadow .15s ease;font-family:'Archivo',sans-serif}
.btn-primary{background:var(--amber);color:var(--ink);box-shadow:0 6px 18px -6px rgba(214,133,10,.7)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px -6px rgba(214,133,10,.8)}
.btn-ghost{background:transparent;color:var(--steel);border:1.5px solid var(--line)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;background:
  radial-gradient(1100px 500px at 78% -10%,rgba(23,137,230,.16),transparent 60%),
  linear-gradient(180deg,var(--paper),var(--paper-2))}
.hero::after{content:"";position:absolute;inset:0;background-image:
  linear-gradient(rgba(27,58,91,.05) 1px,transparent 1px),
  linear-gradient(90deg,rgba(27,58,91,.05) 1px,transparent 1px);
  background-size:34px 34px;mask:radial-gradient(700px 400px at 70% 30%,#000,transparent 75%);pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center;padding:78px 28px 44px;position:relative;z-index:2}
.hero-note{max-width:1180px;margin:0 auto;padding:0 28px 32px;display:flex;justify-content:center;position:relative;z-index:2}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:700;font-size:12.5px;letter-spacing:1.8px;text-transform:uppercase;color:var(--blue);background:rgba(10,110,189,.09);border:1px solid rgba(10,110,189,.2);padding:7px 14px;border-radius:100px}
.icc-badge{display:inline-flex;align-items:center;gap:7px;font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--green);background:rgba(31,138,82,.1);border:1px solid rgba(31,138,82,.3);padding:6px 13px;border-radius:100px}
.icc-badge svg{width:15px;height:15px}
.teach-note{display:inline-flex;align-items:center;gap:12px;max-width:960px;margin:0 auto;font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:500;line-height:1.45;color:var(--steel);background:var(--white);border:1px solid var(--line);border-radius:100px;padding:14px 28px;box-shadow:var(--shadow)}
.teach-note svg{width:22px;height:22px;color:var(--blue);flex-shrink:0}
.teach-note strong{color:var(--ink);font-weight:800}
h1{font-size:clamp(38px,5.2vw,62px);font-weight:900;line-height:1.02;letter-spacing:-1.5px;color:var(--ink);margin:22px 0 18px}
h1 em{font-style:normal;color:var(--blue);position:relative}
.lede{font-size:20px;max-width:520px;color:#3a4a5a}
.cta-row{display:flex;gap:14px;margin:32px 0 26px;flex-wrap:wrap}
.reassure{display:flex;gap:22px;font-family:'Archivo',sans-serif;font-size:13.5px;font-weight:600;color:#52606d;flex-wrap:wrap}
.reassure span{display:flex;align-items:center;gap:7px}
.reassure svg{width:17px;height:17px;color:var(--green)}

.hero-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow)}
.hero-card .img{height:300px;background:linear-gradient(135deg,var(--steel),var(--ink));position:relative;display:grid;place-items:center;border-radius:20px 20px 0 0}
.hero-card .img svg{width:120px;height:120px;color:rgba(255,255,255,.13)}
.hero-card .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:20px 20px 0 0;z-index:1}
.hero-card .tag{position:absolute;top:16px;left:16px;z-index:2;background:var(--white);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;letter-spacing:.5px;padding:7px 13px;border-radius:8px;box-shadow:var(--shadow)}
.hero-card .body{padding:22px 24px 24px}
.hero-card h3{font-size:21px;font-weight:800;letter-spacing:-.3px}
.hero-card p{font-size:15px;color:#52606d;margin:6px 0 16px}
.price{display:flex;align-items:baseline;gap:8px}
.price b{font-family:'Archivo',sans-serif;font-size:30px;font-weight:900;color:var(--ink)}
.price s{color:#94a0ac;font-size:16px}
.float-badge{position:absolute;bottom:-18px;right:-14px;background:var(--amber);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;padding:12px 16px;border-radius:12px;box-shadow:var(--shadow);transform:rotate(-4deg)}

/* ---------- trust strip ---------- */
.trust{background:var(--ink);color:#9fb4c9}
.trust .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:26px 28px;flex-wrap:wrap}
.trust .label{font-family:'Archivo',sans-serif;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.trust .items{display:flex;gap:40px;flex-wrap:wrap;align-items:center}
.trust .item{font-family:'Archivo',sans-serif;font-weight:700;color:#cdd8e4;font-size:15px;display:flex;align-items:center;gap:9px;opacity:.9}
.trust .item svg{width:20px;height:20px;color:var(--amber)}

/* ---------- stats ---------- */
.stats{padding:64px 0}
.stats .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.stat{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:26px;text-align:center}
.stat-num{font-size:42px;font-weight:900;color:var(--blue);letter-spacing:-1px;line-height:1}
.stat-lbl{font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;color:#52606d;margin-top:8px}

/* ---------- sections ---------- */
section.block{padding:78px 0}
.head{max-width:640px;margin-bottom:46px}
.head .eyebrow{margin-bottom:14px}
h2{font-size:clamp(28px,3.6vw,42px);font-weight:900;letter-spacing:-1px;line-height:1.06}
/* Section H1 (Packages / Package detail) — styled to match the section H2 look. */
.head h1{font-size:clamp(28px,3.6vw,42px);font-weight:900;letter-spacing:-1px;line-height:1.06;margin:0;color:var(--ink)}
.head p{font-size:18px;color:#52606d;margin-top:14px}

.feat{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.card{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:30px}
/* Hover-lift only on content/linked cards (e.g. home feature cards) — not utility cards (admin lists, forms, etc.) */
.feat .card{transition:transform .18s ease,box-shadow .18s ease}
.feat .card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card .ic{width:50px;height:50px;border-radius:12px;background:rgba(10,110,189,.1);display:grid;place-items:center;margin-bottom:18px}
.card .ic svg{width:26px;height:26px;color:var(--blue)}
.card h3{font-family:'Archivo',sans-serif;font-size:20px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px}
.card p{font-size:15.5px;color:#52606d}

/* ---------- code violations ---------- */
.viol{background:linear-gradient(180deg,var(--paper-2),var(--paper))}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.shot{aspect-ratio:3/4;border-radius:14px;border:1px solid var(--line);background:linear-gradient(150deg,#2a4259,#16293a);position:relative;overflow:hidden;display:grid;place-items:center}
.shot:nth-child(even){aspect-ratio:4/3}
.shot svg{width:46px;height:46px;color:rgba(255,255,255,.16)}
.shot .fail{position:absolute;top:11px;left:11px;background:#c0392b;color:#fff;font-family:'Archivo',sans-serif;font-weight:800;font-size:10.5px;letter-spacing:.5px;padding:5px 9px;border-radius:6px;display:flex;align-items:center;gap:5px}
.shot .fail svg{width:12px;height:12px;color:#fff}

/* ---------- instructor ---------- */
.inst .wrap{display:grid;grid-template-columns:.8fr 1.2fr;gap:50px;align-items:center}
.inst .photo{aspect-ratio:1;border-radius:20px;background:linear-gradient(150deg,var(--steel),var(--ink));display:grid;place-items:center;box-shadow:var(--shadow)}
.inst .photo svg{width:100px;height:100px;color:rgba(255,255,255,.18)}
.inst .photo img{width:100%;height:100%;object-fit:cover;object-position:center top;border-radius:20px;display:block}
.inst blockquote{font-size:22px;line-height:1.5;color:var(--ink);border-left:3px solid var(--amber);padding-left:22px;margin:18px 0 22px}
.inst .who{font-family:'Archivo',sans-serif;font-weight:800;font-size:18px}
.inst .who small{display:block;font-weight:600;color:var(--blue);font-size:13px;letter-spacing:.5px}

/* ---------- cta band ---------- */
.band{background:linear-gradient(135deg,var(--steel),var(--ink));color:#fff;border-radius:24px;padding:58px;text-align:center;position:relative;overflow:hidden}
.band::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:30px 30px;mask:radial-gradient(500px 300px at 50% 0%,#000,transparent)}
.band h2{color:#fff;position:relative}
.band p{color:#bcd0e3;font-size:18px;max-width:540px;margin:14px auto 28px;position:relative}
.band .btn-primary{position:relative}

/* ---------- footer ---------- */
footer{background:var(--ink);color:#9fb4c9;padding:56px 0 28px;font-family:'Archivo',sans-serif}
footer .top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.1)}
footer h4{color:#fff;font-size:13px;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:16px;font-weight:700}
footer a{display:block;color:#9fb4c9;text-decoration:none;font-size:14.5px;margin-bottom:10px;font-weight:500}
footer a:hover{color:#fff}
footer .brand p{font-size:14px;max-width:280px;margin-top:12px;line-height:1.6}
footer .socials{display:flex;gap:10px;margin-top:18px}
footer .socials a{width:36px;height:36px;border-radius:9px;background:rgba(255,255,255,.07);display:grid;place-items:center;margin:0}
footer .socials svg{width:17px;height:17px}
footer .socials a:hover{background:var(--blue)}
footer .bottom{padding-top:24px;font-size:13px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}

@media(max-width:880px){
  .hero .wrap,.inst .wrap{grid-template-columns:1fr}
  .feat,.stats .grid{grid-template-columns:1fr 1fr}
  .gal{grid-template-columns:1fr 1fr}
  footer .top{grid-template-columns:1fr 1fr}
  nav.nav a:not(.btn){display:none}
}
@media(max-width:520px){.feat,.stats .grid,.gal,footer .top{grid-template-columns:1fr}}

/* =========================================================================
   App additions — not in the static mockup; shared across the live app.
   ========================================================================= */

/* ---- mobile nav toggle ---- */
.nav-toggle{display:none;background:transparent;border:1.5px solid var(--line);border-radius:10px;width:44px;height:44px;cursor:pointer;color:var(--steel);align-items:center;justify-content:center}
.nav-toggle svg{width:22px;height:22px}
.mobile-menu{display:none;flex-direction:column;gap:4px;background:var(--white);border-bottom:1px solid var(--line);padding:14px 28px 22px}
.mobile-menu a,.mobile-menu button{font-family:'Archivo',sans-serif;font-weight:600;font-size:16px;color:var(--steel);text-decoration:none;padding:10px 0;border:none;background:none;text-align:left;cursor:pointer;width:100%}
.mobile-menu a:hover{color:var(--blue)}
.mobile-menu .btn{justify-content:center;margin-top:8px;color:var(--ink)}
@media(max-width:880px){
  .nav-toggle{display:inline-flex}
  .mobile-menu.open{display:flex}
  .logo .logo-badge{width:64px;height:64px;margin:0}
  .wrap.below-logo{padding-top:24px}
}

/* ---- generic content page ---- */
.page-narrow{max-width:760px}
.prose p{font-size:16.5px;color:#3a4a5a;margin-bottom:16px}
.prose h2{margin:32px 0 12px}
.prose h3{font-family:'Archivo',sans-serif;font-size:20px;font-weight:800;margin:24px 0 10px}
.prose ul{margin:0 0 16px 22px;color:#3a4a5a}
.prose li{margin-bottom:8px}
.muted{color:#52606d}
.text-center{text-align:center}
.mt-0{margin-top:0}

/* ---- forms / auth ---- */
.form-card{max-width:460px;margin:0 auto;background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:38px 36px}
.form-card h1{font-size:30px;margin:0 0 6px}
.form-card .sub{color:#52606d;font-size:15.5px;margin-bottom:24px}
.field{margin-bottom:18px;display:flex;flex-direction:column}
.field label{font-family:'Archivo',sans-serif;font-weight:600;font-size:13.5px;color:var(--steel);margin-bottom:7px}
.field input,.field select,.field textarea{
  font-family:'Source Serif 4',serif;font-size:16px;color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line);border-radius:10px;padding:12px 14px;transition:border-color .15s ease,box-shadow .15s ease;width:100%}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,110,189,.12)}
.field textarea{min-height:130px;resize:vertical}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.btn-block{width:100%;justify-content:center}
.btn-lg{padding:15px 26px;font-size:16px}
.btn-sm{padding:9px 16px;font-size:14px}
/* Compact inline admin toolbars (edit/add rows) — inputs sized to match the buttons. */
.inline-form{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.admin-input{font-family:'Source Serif 4',serif;font-size:15px;color:var(--ink);background:var(--paper);border:1.5px solid var(--line);border-radius:10px;padding:9px 14px;transition:border-color .15s ease,box-shadow .15s ease}
.admin-input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,110,189,.12)}
.form-foot{margin-top:20px;font-family:'Archivo',sans-serif;font-size:14px;color:#52606d;text-align:center}
.form-foot a{color:var(--blue);font-weight:600;text-decoration:none}
.form-foot a:hover{text-decoration:underline}
.field-validation-error,.text-danger{color:var(--red);font-size:13.5px;font-family:'Archivo',sans-serif;margin-top:6px;display:block}
.validation-summary-errors{background:rgba(192,57,43,.08);border:1px solid rgba(192,57,43,.25);border-radius:10px;padding:12px 16px;margin-bottom:20px;color:#8c2c20;font-family:'Archivo',sans-serif;font-size:14px}
.validation-summary-errors ul{list-style:none;margin:0}
.checkrow{display:flex;align-items:center;gap:9px;font-family:'Archivo',sans-serif;font-size:14px;color:var(--steel)}
.checkrow input{width:auto}

/* ---- flash / alerts ---- */
.alert{font-family:'Archivo',sans-serif;font-size:14.5px;font-weight:500;border-radius:12px;padding:14px 18px;margin:0 0 22px;border:1px solid}
.alert-success{background:rgba(31,138,82,.1);border-color:rgba(31,138,82,.3);color:#176b40}
.alert-error{background:rgba(192,57,43,.09);border-color:rgba(192,57,43,.28);color:#8c2c20}
.alert-info{background:rgba(10,110,189,.09);border-color:rgba(10,110,189,.25);color:#0a4f87}

/* ---- catalog ---- */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.course-card{background:var(--white);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .18s ease,box-shadow .18s ease}
.course-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.course-card .thumb{height:170px;background:linear-gradient(135deg,var(--steel),var(--ink));display:grid;place-items:center;position:relative}
.course-card .thumb svg{width:64px;height:64px;color:rgba(255,255,255,.16)}
.course-card .body{padding:24px;display:flex;flex-direction:column;flex:1}
.course-card h3{font-family:'Archivo',sans-serif;font-size:19px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px}
.course-card p{font-size:14.5px;color:#52606d;flex:1}
.course-card .foot{display:flex;align-items:center;justify-content:space-between;margin-top:18px}
.tag-pill{display:inline-block;font-family:'Archivo',sans-serif;font-weight:700;font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:var(--blue);background:rgba(10,110,189,.1);padding:5px 10px;border-radius:6px}

/* ---- course detail ---- */
.detail-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:46px;align-items:start}
.pkg-hero{width:100%;max-height:360px;object-fit:cover;border-radius:18px;border:1px solid var(--line);box-shadow:var(--shadow);display:block;margin:0 0 34px}
.plan-img{width:100%;height:150px;object-fit:cover;border-radius:12px;display:block;margin-bottom:16px}
.reorder-item{cursor:default}
.reorder-item .drag-handle{cursor:grab;color:#9aa5b1;font-size:16px;line-height:1;user-select:none;letter-spacing:-2px}
.reorder-item.dragging{opacity:.45}
.reorder-list.saving{opacity:.6;pointer-events:none}
.curriculum{list-style:none;counter-reset:mod;margin-top:8px}
.curriculum li{counter-increment:mod;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:20px 22px 20px 64px;position:relative;margin-bottom:14px}
.curriculum li::before{content:counter(mod);position:absolute;left:18px;top:18px;width:32px;height:32px;border-radius:9px;background:rgba(10,110,189,.1);color:var(--blue);font-family:'Archivo',sans-serif;font-weight:800;display:grid;place-items:center;font-size:15px}
.curriculum h4{font-family:'Archivo',sans-serif;font-size:16.5px;font-weight:700;margin-bottom:4px}
.curriculum p{font-size:14.5px;color:#52606d}
.curriculum .mins{font-family:'Archivo',sans-serif;font-size:12.5px;color:#94a0ac;font-weight:600}
.buy-card{position:sticky;top:100px;background:var(--white);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);padding:28px}
.buy-card .price{margin:6px 0 18px}
.buy-card ul{list-style:none;margin:18px 0 0}
.buy-card li{display:flex;gap:9px;align-items:flex-start;font-size:14.5px;color:#3a4a5a;margin-bottom:10px}
.buy-card li svg{width:18px;height:18px;color:var(--green);flex-shrink:0;margin-top:2px}

/* ---- membership / pricing ---- */
.plan-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;max-width:820px;margin:0 auto}
.plan{background:var(--white);border:1px solid var(--line);border-radius:18px;padding:34px;display:flex;flex-direction:column;position:relative}
.plan.featured{border-color:var(--amber);box-shadow:var(--shadow)}
.plan .ribbon{position:absolute;top:-13px;right:24px;background:var(--amber);color:var(--ink);font-family:'Archivo',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.5px;padding:6px 12px;border-radius:8px}
.plan h3{font-family:'Archivo',sans-serif;font-size:21px;font-weight:800;margin-bottom:6px}
.plan .amount{font-family:'Archivo',sans-serif;font-size:44px;font-weight:900;color:var(--ink);letter-spacing:-1.5px;line-height:1;margin:14px 0 4px}
.plan .per{font-family:'Archivo',sans-serif;font-size:14px;color:#52606d}
.plan ul{list-style:none;margin:22px 0;flex:1}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:#3a4a5a;margin-bottom:12px}
.plan li svg{width:18px;height:18px;color:var(--green);flex-shrink:0;margin-top:3px}

@media(max-width:880px){
  .detail-grid{grid-template-columns:1fr}
  .buy-card{position:static}
  .course-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .course-grid,.plan-grid,.form-row{grid-template-columns:1fr}
  .form-card{padding:30px 22px}
  .wrap{padding:0 20px}
}
/* ---- extra mobile polish ---- */
@media(max-width:520px){
  .logo .name{font-size:16px}
  .logo .name span{font-size:10px;letter-spacing:1.5px}
  .stat-num{font-size:32px}
  .hero-card .img{height:210px}
  .teach-note{padding:11px 16px;font-size:13.5px;gap:9px}
}
@media(max-width:400px){
  .card{padding:22px}
  .plan .ribbon{right:14px}
  .icc-badge{font-size:11px;padding:5px 10px}
  .curriculum li{padding:16px 16px 16px 52px}
}

/* ---- learn outline ---- */
.learn-cat{margin-bottom:30px}
.learn-cat h3{font-family:'Archivo',sans-serif;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--blue);margin-bottom:12px}
.learn-list{list-style:none;display:flex;flex-direction:column;gap:10px}
.learn-item{display:flex;align-items:center;justify-content:space-between;gap:14px;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 20px;text-decoration:none;color:var(--ink);transition:transform .15s ease,box-shadow .15s ease}
.learn-item:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.learn-item .t{font-family:'Archivo',sans-serif;font-weight:700;font-size:15.5px}
.learn-item .s{font-size:13.5px;color:#52606d}
.score-pill{font-family:'Archivo',sans-serif;font-weight:700;font-size:12.5px;padding:5px 11px;border-radius:100px;white-space:nowrap}
.score-pill.none{background:var(--paper-2);color:#52606d}
.score-pill.ok{background:rgba(31,138,82,.12);color:#176b40}
.score-pill.mid{background:rgba(246,166,9,.16);color:#9a6500}
.score-pill.low{background:rgba(192,57,43,.1);color:#8c2c20}

/* ---- lesson content (rendered markdown) ---- */
.lesson{max-width:760px}
.lesson h1,.lesson h2,.lesson h3{font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.3px;margin:26px 0 10px}
.lesson h2{font-size:24px}
.lesson h3{font-size:19px}
.lesson p{font-size:16.5px;color:#3a4a5a;margin-bottom:14px}
.lesson ul,.lesson ol{margin:0 0 16px 22px;color:#3a4a5a}
.lesson li{margin-bottom:7px}
.lesson blockquote{border-left:3px solid var(--amber);padding-left:18px;margin:16px 0;color:var(--ink);font-style:italic}
.lesson code{background:var(--paper-2);padding:2px 6px;border-radius:5px;font-size:.92em}
.lesson strong{color:var(--ink)}
/* Keep embedded lesson images inside the reading column and cap their height (portrait
   photos otherwise render enormous). Aspect ratio is preserved. */
.lesson img{display:block;max-width:100%;max-height:480px;width:auto;height:auto;margin:18px auto;border-radius:12px;border:1px solid var(--line);box-shadow:var(--shadow);cursor:zoom-in}
.lesson figure{margin:18px 0}
.lesson figure img{margin:0 auto 8px}
.lesson figcaption{font-family:'Archivo',sans-serif;font-size:13px;color:#7a8794;text-align:center}
/* Safety for images in other rendered-Markdown areas (descriptions, quiz explanations). */
.prose img,.quiz-explain-body img,.exp img{max-width:100%;height:auto;border-radius:10px;margin:10px 0}
/* Click-to-enlarge overlay for lesson images (wired up automatically in site.js). */
.lightbox{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(13,27,42,.9);cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:95vw;max-height:92vh;width:auto;height:auto;border-radius:10px;box-shadow:0 24px 70px rgba(0,0,0,.55)}
.lightbox-close{position:absolute;top:16px;right:20px;width:44px;height:44px;border:none;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:26px;line-height:44px;text-align:center;cursor:pointer;font-family:'Archivo',sans-serif}
.lightbox-close:hover{background:rgba(255,255,255,.3)}

/* ---- quiz ---- */
.quiz{max-width:760px}
.quiz-q{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:18px}
.quiz-qtext{font-family:'Archivo',sans-serif;font-weight:700;font-size:17px;margin-bottom:16px}
.quiz-opts{display:flex;flex-direction:column;gap:10px}
.quiz-opt{display:flex;align-items:center;gap:12px;border:1.5px solid var(--line);border-radius:11px;padding:13px 16px;cursor:pointer;transition:border-color .12s ease,background .12s ease}
.quiz-opt:hover{border-color:var(--blue)}
.quiz-opt input{margin:0}
.quiz-opt-letter{font-family:'Archivo',sans-serif;font-weight:800;color:var(--steel);width:22px}
.quiz-opt-text{font-size:15.5px}
.quiz-opt.locked{cursor:default}
.quiz-opt.correct{border-color:var(--green);background:rgba(31,138,82,.08)}
.quiz-opt.incorrect{border-color:var(--red);background:rgba(192,57,43,.07)}
.quiz-explain{margin-top:16px;border-top:1px dashed var(--line);padding-top:14px}
.quiz-verdict{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px;margin-bottom:6px}
.quiz-verdict.ok{color:var(--green)}
.quiz-verdict.bad{color:var(--red)}
.quiz-explain-body{font-size:15px;color:#3a4a5a}
.quiz-explain-body p{margin:0}
.quiz-finish{margin-top:8px}

/* ---- score summary ---- */
.score-ring{display:inline-grid;place-items:center;width:140px;height:140px;border-radius:50%;background:conic-gradient(var(--blue) var(--pct),var(--paper-2) 0);margin-bottom:18px}
.score-ring .inner{width:108px;height:108px;border-radius:50%;background:var(--white);display:grid;place-items:center;font-family:'Archivo',sans-serif}
.score-ring .inner b{font-size:30px;font-weight:900;color:var(--ink);line-height:1}
.score-ring .inner span{font-size:12px;color:#52606d}
.result-item{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin-bottom:12px;text-align:left}
.result-item .mark{flex-shrink:0;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;color:#fff}
.result-item .mark.ok{background:var(--green)}
.result-item .mark.bad{background:var(--red)}
.result-item .body{flex:1}
.result-item .q{font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;margin-bottom:4px}
.result-item .a{font-size:14px;color:#52606d}
.result-item .exp{font-size:14px;color:#3a4a5a;margin-top:6px}