/* =========================================================================
   SHAHEDIN — PERSONAL BRAND SITE
   Editorial redesign. Requires css/tokens.css to be loaded first.

   Reading order:
     01 Reset & base            10 Tabs / accordion
     02 Texture (grain, glow)   11 Feedback: toast, notice, modal, states
     03 Typography              12 Hero (home)
     04 Icons                   13 Trust bar
     05 Layout primitives       14 Story / timeline / growth / social proof
     06 Buttons                 15 Course detail
     07 Nav                     16 Store / product / checkout
     08 Footer                  17 Portfolio / contact / dashboard
     09 Cards / badges / forms  18 Motion, responsive, a11y, print

   Class names that JavaScript toggles or queries are marked LOAD-BEARING.
   Restyle them freely; renaming one breaks js/ or admin/js/.
   ========================================================================= */

/* =========================================================================
   01. RESET & BASE
   ========================================================================= */
*,*::before,*::after{box-sizing:border-box;}
*{margin:0; padding:0;}

html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  overflow-x:hidden;
}
html.no-smooth{scroll-behavior:auto;}

body{
  background:var(--surface-0);
  color:var(--text-1);
  font-family:var(--font-body);
  font-size:var(--step-0);
  line-height:var(--lh-body);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}

img,video,canvas{max-width:100%; height:auto; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer;}
ul,ol{list-style:none;}
input,textarea,select{font:inherit; color:inherit;}
table{border-collapse:collapse; width:100%;}
code{font-family:var(--font-mono); font-size:.9em; background:var(--surface-3); padding:.12em .4em; border-radius:var(--radius-xs);}
hr{border:none; border-top:1px solid var(--line);}
::selection{background:var(--accent-fill); color:var(--text-on-accent);}

/* Progressive enhancement guard.
   .reveal starts at opacity:0, so if main.js never runs (blocked script,
   network hiccup) every revealed section would stay invisible forever.
   The inline head snippet swaps no-js -> js; without it we never hide. */
html.no-js .reveal{opacity:1 !important; transform:none !important;}

/* =========================================================================
   02. TEXTURE — grain + light
   The old site was one flat dark on another flat dark. A fixed grain layer
   plus a couple of very low-opacity warm gradients give the surfaces
   something to catch, which is most of the difference between "dark theme"
   and "printed". Both are pointer-events:none and paint once.
   ========================================================================= */
body::before{
  content:""; position:fixed; inset:0; z-index:var(--z-grain); pointer-events:none;
  opacity:.32; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  background-size:140px 140px;
}
body::after{
  content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(64rem 40rem at 78% -8%, rgba(255,179,122,0.055), transparent 62%),
    radial-gradient(52rem 34rem at 6% 4%, rgba(193,18,47,0.075), transparent 60%);
}
main,section,nav,footer,.site-nav,.mobile-menu{position:relative; z-index:1;}

/* Section surface variants — used to break the "every band is identical" rhythm. */
.surface-raised{background:var(--surface-1); border-block:1px solid var(--line);}
.surface-inset{
  background:
    radial-gradient(50rem 30rem at 50% 0%, rgba(193,18,47,0.10), transparent 65%),
    var(--surface-1);
  border-block:1px solid var(--line);
}

/* =========================================================================
   03. TYPOGRAPHY
   Bangla-first: a Bengali serif for display, a Bengali sans for text, and a
   Latin sans with tabular figures for every number and Latin fragment.
   The previous `body, body *{font-family:...}` blanket override is gone —
   it cancelled the display face on every heading and made two of the three
   loaded webfonts dead weight.
   ========================================================================= */
h1,h2,h3,h4,h5,h6,.display{
  font-family:var(--font-display);
  font-weight:600;
  line-height:var(--lh-heading);
  letter-spacing:var(--tracking-tight);
  text-wrap:balance;
  color:var(--text-1);
}
h1,.h1{font-size:var(--step-5); line-height:var(--lh-display);}
h2,.h2{font-size:var(--step-4);}
h3,.h3{font-size:var(--step-2);}
h4,.h4{font-size:var(--step-1);}
h5,.h5{font-size:var(--step-0);}

p{color:var(--text-2); text-wrap:pretty;}
strong,b{font-weight:600; color:var(--text-1);}
small{font-size:var(--step--1);}

/* Numeric / Latin contexts. Bengali digits automatically fall through to the
   Bangla face because Inter has no Bengali glyphs, so one stack covers both. */
.num,
.price,
.stars,
.hero-stat b,
.trust-item .num,
.stat-mini .n,
.kit-stat-card .n,
.case-result,
.timeline-h-item .yr,
.growth-dot,
.badge-dur,
.card-meta,
.cert-id,
.len,
.aval,
.pay-icon,
.order-summary-row,
.admin-table td,
.cal-day,
.audience-row .albl{
  font-family:var(--font-mixed);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:"tnum" 1,"lnum" 1;
  font-size-adjust:var(--xheight-match);
  letter-spacing:-0.005em;
}

.eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-family:var(--font-body);
  font-size:var(--step--1);
  font-weight:600;
  line-height:1.4;
  letter-spacing:var(--tracking-normal);
  color:var(--accent-ink);
  margin-bottom:var(--space-4);
  text-transform:none;
}
.eyebrow::before{
  content:""; inline-size:22px; block-size:2px; flex:0 0 auto;
  background:linear-gradient(90deg,var(--accent-ink),transparent);
  border-radius:2px;
}
.section-head.center .eyebrow{justify-content:center;}
.section-head.center .eyebrow::before{background:linear-gradient(90deg,transparent,var(--accent-ink));}

.section-head{max-width:62ch; margin-bottom:var(--space-9);}
.section-head h1,.section-head h2{margin:0;}
.section-head p{margin-top:var(--space-4); font-size:var(--step-1); color:var(--text-2); max-width:56ch;}
.section-head.center{margin-inline:auto; text-align:center;}
.section-head.center p{margin-inline:auto;}

.small-note{font-size:var(--step--1); color:var(--text-3); line-height:var(--lh-tight);}
.lede{font-family:var(--font-display); font-size:var(--step-2); line-height:1.5; color:var(--text-1);}

/* =========================================================================
   04. ICONS
   Fixes the class of bug where a bare inline <svg viewBox> with no width or
   height inflates to the replaced-element default (300px) and then scales
   its height to match — which is exactly what blew up .course-preview-cap.

   The default below is written with :where() so it carries ZERO specificity:
   any context rule (.icon-btn svg, .btn svg, …) still wins, and any SVG that
   declares its own width/height opts out entirely.
   ========================================================================= */
svg{max-width:100%;}
svg:where(:not([width]):not([height])){
  inline-size:1.25em;
  block-size:1.25em;
  flex:0 0 auto;
}
.icon{inline-size:1em; block-size:1em; flex:0 0 auto;}
.icon-sm{inline-size:.85em; block-size:.85em;}
.icon-lg{inline-size:1.5em; block-size:1.5em;}
/* Consistent stroke weight across the whole icon set. */
svg[stroke]{stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;}
.icon-stack{display:inline-flex; align-items:center; gap:var(--space-2);}

/* =========================================================================
   05. LAYOUT PRIMITIVES
   ========================================================================= */
.container{max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter);}
.container-wide{max-width:var(--container-wide);}
.container-text{max-width:var(--container-text);}

.section-pad{padding-block:var(--section-lg);}
.section-pad-sm{padding-block:var(--section-md);}
.section-tight{padding-block:var(--section-sm);}

.grid{display:grid; gap:var(--space-6);}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
.grid > *{min-width:0;}

.two-col{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-10);}
.divider{block-size:1px; background:var(--line); margin-block:var(--space-9); border:none;}
.center{text-align:center;}
.mt-lg{margin-top:var(--space-10);}

/* Horizontal scrollers keep their edges bled to the gutter so cards look
   like they continue off-page rather than stopping at a hard margin. */
.hscroll{
  display:flex; gap:var(--space-5); overflow-x:auto; padding-block-end:var(--space-4);
  scroll-snap-type:x proximity; scrollbar-width:thin;
  scrollbar-color:var(--line-strong) transparent;
  margin-inline:calc(var(--gutter) * -1); padding-inline:var(--gutter);
  -webkit-overflow-scrolling:touch;
}
.hscroll::-webkit-scrollbar{block-size:6px;}
.hscroll::-webkit-scrollbar-track{background:transparent;}
.hscroll::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:99px;}
.hscroll > *{scroll-snap-align:start; flex:0 0 auto;}

.link-row{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-5); flex-wrap:wrap; margin-top:var(--space-8);}
.section-head-links{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;}
/* A section heading and its links sharing one baseline row. */
.section-head-row{margin-top:0; margin-bottom:var(--space-7);}
.section-head-row .section-head{margin-bottom:0;}

.text-link{
  font-weight:600; font-size:var(--step--1); color:var(--text-1);
  display:inline-flex; align-items:center; gap:var(--space-2);
  padding-block:2px; position:relative;
  transition:color var(--dur-2) var(--ease-out);
}
.text-link::after{
  content:""; position:absolute; inset-inline:0; inset-block-end:0; block-size:1px;
  background:var(--accent-ink); transform:scaleX(0); transform-origin:left;
  transition:transform var(--dur-3) var(--ease-out);
}
.text-link:hover{color:var(--accent-ink);}
.text-link:hover::after{transform:scaleX(1);}
.text-link svg{transition:transform var(--dur-2) var(--ease-out);}
.text-link:hover svg{transform:translateX(3px);}

/* =========================================================================
   06. BUTTONS
   ========================================================================= */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text-1); --btn-bd:transparent;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--space-2);
  padding:13px 26px; border-radius:var(--radius-pill);
  border:1px solid var(--btn-bd); background:var(--btn-bg); color:var(--btn-fg);
  font-family:var(--font-body); font-size:var(--step--1); font-weight:600; line-height:1.2;
  white-space:nowrap; position:relative; overflow:hidden; isolation:isolate;
  transition:transform var(--dur-2) var(--ease-spring),
             background var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out),
             color var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out);
}
.btn:hover{transform:translateY(-2px);}
.btn:active{transform:translateY(0) scale(.985); transition-duration:var(--dur-1);}

.btn-primary{--btn-bg:var(--accent-fill); --btn-fg:var(--text-on-accent); box-shadow:var(--shadow-2);}
.btn-primary:hover{--btn-bg:var(--accent-hover); box-shadow:var(--shadow-accent);}
/* Sheen sweep on press-worthy primary actions. Transform-only. */
.btn-primary::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.22) 50%,transparent 80%);
  transform:translateX(-120%);
  transition:transform var(--dur-5) var(--ease-out);
}
.btn-primary:hover::before{transform:translateX(120%);}

.btn-ghost{--btn-bd:var(--line-strong); --btn-fg:var(--text-1);}
.btn-ghost:hover{--btn-bd:var(--text-3); --btn-bg:var(--surface-2);}
.btn-light{--btn-bg:var(--text-1); --btn-fg:var(--surface-0);}
.btn-light:hover{--btn-bg:#fff;}
.btn-quiet{--btn-fg:var(--text-2); padding-inline:var(--space-3);}
.btn-quiet:hover{--btn-fg:var(--text-1);}

.btn-sm{padding:8px 16px; font-size:var(--step--2);}
.btn-lg{padding:16px 34px; font-size:var(--step-0);}
.btn-block{inline-size:100%;}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.45; cursor:not-allowed; pointer-events:none; transform:none;}
.btn.is-busy{pointer-events:none; opacity:.7;}
.btn.is-busy::after{
  content:""; inline-size:.9em; block-size:.9em; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent;
  animation:spin .7s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* =========================================================================
   07. NAV  (.site-nav / .scrolled / .mobile-menu / .open  = LOAD-BEARING)
   ========================================================================= */
.site-nav{
  position:fixed; inset-block-start:0; inset-inline:0; z-index:var(--z-nav);
  min-block-size:var(--nav-h);
  padding:var(--space-4) var(--gutter);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-5);
  border-block-end:1px solid transparent;
  transition:background var(--dur-3) var(--ease-out),
             padding var(--dur-3) var(--ease-out),
             border-color var(--dur-3) var(--ease-out),
             backdrop-filter var(--dur-3);
}
.site-nav.scrolled{
  background:rgba(11,9,8,0.78);
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  padding-block:10px;
  border-block-end-color:var(--line);
}
.nav-logo{
  font-family:var(--font-display); font-weight:700; font-size:var(--step-1);
  letter-spacing:-0.02em; display:inline-flex; align-items:center; gap:var(--space-2);
  color:var(--text-1);
}
.nav-logo .dot{
  inline-size:8px; block-size:8px; border-radius:50%; flex:0 0 auto;
  background:var(--accent-fill); box-shadow:0 0 0 0 var(--accent-glow);
  transition:box-shadow var(--dur-3) var(--ease-out);
}
.nav-logo:hover .dot{box-shadow:0 0 0 6px var(--accent-glow);}

.nav-center{display:flex; align-items:center; gap:var(--space-7);}
.nav-link{
  font-size:var(--step--1); font-weight:500; color:var(--text-2);
  position:relative; padding-block:6px;
  transition:color var(--dur-2) var(--ease-out);
}
.nav-link::after{
  content:""; position:absolute; inset-inline-start:0; inset-block-end:0;
  inline-size:100%; block-size:1px; background:var(--accent-ink);
  transform:scaleX(0); transform-origin:right;
  transition:transform var(--dur-3) var(--ease-out);
}
.nav-link:hover{color:var(--text-1);}
.nav-link:hover::after,.nav-link.active::after{transform:scaleX(1); transform-origin:left;}
.nav-link.active{color:var(--text-1);}

.nav-right{display:flex; align-items:center; gap:var(--space-3);}
.icon-btn{
  inline-size:40px; block-size:40px; border-radius:50%; flex:0 0 auto;
  border:1px solid var(--line-strong); background:transparent; color:var(--text-1);
  display:inline-flex; align-items:center; justify-content:center; position:relative;
  transition:border-color var(--dur-2) var(--ease-out),
             background var(--dur-2) var(--ease-out),
             transform var(--dur-2) var(--ease-spring);
}
.icon-btn:hover{border-color:var(--text-2); background:var(--surface-2); transform:translateY(-2px);}
.icon-btn svg{inline-size:18px; block-size:18px;}

.nav-cta{
  background:var(--accent-fill); color:var(--text-on-accent);
  padding:10px 20px; border-radius:var(--radius-pill);
  font-size:var(--step--1); font-weight:600;
  transition:background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2);
}
.nav-cta:hover{background:var(--accent-hover); transform:translateY(-2px); box-shadow:var(--shadow-accent);}
.nav-burger{
  display:none; inline-size:42px; block-size:42px; border-radius:50%;
  border:1px solid var(--line-strong); color:var(--text-1);
  align-items:center; justify-content:center;
}
.nav-burger svg{inline-size:19px; block-size:19px;}

.mobile-menu{
  position:fixed; inset:0; z-index:var(--z-mobile-menu);
  background:var(--surface-0);
  display:flex; flex-direction:column; padding:var(--space-6) var(--gutter);
  transform:translateY(-100%);
  transition:transform var(--dur-4) var(--ease-in-out);
  overflow-y:auto;
}
.mobile-menu.open{transform:translateY(0);}
.mobile-menu-top{display:flex; justify-content:space-between; align-items:center; margin-block-end:var(--space-10);}
.mobile-menu nav{display:flex; flex-direction:column;}
.mobile-menu .nav-link{
  font-family:var(--font-display); font-size:var(--step-3); color:var(--text-1);
  padding-block:var(--space-4); border-block-end:1px solid var(--line);
  opacity:0; transform:translateY(14px);
}
.mobile-menu.open .nav-link{animation:menuIn var(--dur-4) var(--ease-out) forwards;}
.mobile-menu.open .nav-link:nth-child(1){animation-delay:60ms;}
.mobile-menu.open .nav-link:nth-child(2){animation-delay:110ms;}
.mobile-menu.open .nav-link:nth-child(3){animation-delay:160ms;}
.mobile-menu.open .nav-link:nth-child(4){animation-delay:210ms;}
.mobile-menu.open .nav-link:nth-child(5){animation-delay:260ms;}
.mobile-menu.open .nav-link:nth-child(6){animation-delay:310ms;}
@keyframes menuIn{to{opacity:1; transform:none;}}
.mobile-menu .nav-link::after{display:none;}
.mobile-menu-foot{margin-block-start:auto; padding-block-start:var(--space-7); display:flex; flex-direction:column; gap:var(--space-4);}

/* =========================================================================
   08. FOOTER
   ========================================================================= */
.site-footer{
  position:relative; margin-block-start:var(--space-11);
  background:linear-gradient(180deg,var(--surface-1),var(--surface-0) 70%);
  border-block-start:1px solid var(--line);
  overflow:hidden; padding-block-start:var(--space-11);
}
.site-footer::before{
  content:""; position:absolute; inset-block-start:-1px; inset-inline:0; block-size:1px;
  background:linear-gradient(90deg,transparent,var(--line-accent),transparent);
}
/* Brand block left, link columns anchored right, with the space between them
   as deliberate breathing room rather than a hole left by the removed image.
   `auto` on the second track lets the columns size to their content and sit
   flush to the right edge instead of floating in the middle. */
.footer-inner{
  max-width:var(--container); margin-inline:auto;
  padding:0 var(--gutter) var(--space-9);
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:clamp(40px,8vw,140px);
  align-items:start; position:relative; z-index:2;
}
.footer-brand{max-inline-size:40ch;}
.footer-brand p{margin:var(--space-4) 0 var(--space-6); max-width:36ch; font-size:var(--step--1);}
.footer-social{display:flex; gap:var(--space-3);}
.footer-cols{display:grid; grid-template-columns:repeat(2,minmax(120px,auto)); gap:clamp(40px,6vw,88px); align-content:start;}
/* Footer column headings are <h2>, not <h4>: the footer is its own landmark
   and an h4 straight after the page h1/h2 skipped two outline levels. */
.footer-col h2,.footer-col h4{
  font-family:var(--font-body); font-size:var(--step--2); font-weight:600;
  letter-spacing:var(--tracking-wide); text-transform:uppercase;
  color:var(--text-3); margin-block-end:var(--space-4); line-height:1.4;
}
.footer-col a{
  display:block; font-size:var(--step--1); color:var(--text-2); padding-block:7px;
  transition:color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.footer-col a:hover{color:var(--text-1); transform:translateX(3px);}
.footer-nl{display:flex; margin-block-start:var(--space-2); gap:var(--space-2);}

/* The portrait that used to sit here is gone. Its absolute box occupied the
   right 38% of the footer, which is why the columns were squeezed into the
   left two thirds and stopped short of the right edge. */
.footer-bottom{
  border-block-start:1px solid var(--line); padding:var(--space-5) var(--gutter);
  display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:var(--space-3);
  position:relative; z-index:2; background:rgba(7,5,4,.4);
}
.footer-bottom small{color:var(--text-3); font-size:var(--step--2);}

/* =========================================================================
   09. CARDS, BADGES, FORMS
   ========================================================================= */
.card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-m);
  overflow:hidden; display:flex; flex-direction:column; position:relative; isolation:isolate;
  transition:transform var(--dur-3) var(--ease-out),
             border-color var(--dur-2) var(--ease-out),
             box-shadow var(--dur-3) var(--ease-out);
}
.card::after{
  content:""; position:absolute; inset:0; z-index:-1; border-radius:inherit;
  background:radial-gradient(28rem 14rem at 50% -10%, rgba(244,103,125,.14), transparent 70%);
  opacity:0; transition:opacity var(--dur-3) var(--ease-out);
}
.card:hover{transform:translateY(-5px); border-color:var(--line-strong); box-shadow:var(--shadow-3);}
.card:hover::after{opacity:1;}
.card:focus-visible{transform:translateY(-5px);}

.thumb{
  aspect-ratio:16/9; position:relative; overflow:hidden;
  display:flex; align-items:flex-end; background:var(--surface-3);
}
.thumb::before{content:""; position:absolute; inset:0; opacity:.92;}
.thumb.has-image::before{content:none;}
.thumb img{inline-size:100%; block-size:100%; object-fit:cover; transition:transform var(--dur-5) var(--ease-out);}
.card:hover .thumb img{transform:scale(1.045);}
.thumb .thumb-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(7,5,4,0) 35%,rgba(7,5,4,.62) 100%);
}
.thumb-tone-1::before{background:linear-gradient(150deg,#3a0d17,#c1122f);}
.thumb-tone-2::before{background:linear-gradient(150deg,#12202b,#2b5876);}
.thumb-tone-3::before{background:linear-gradient(150deg,#241a08,#8a5a1f);}
.thumb-tone-4::before{background:linear-gradient(150deg,#1b1420,#5a2a6b);}
.thumb-tone-5::before{background:linear-gradient(150deg,#0e2418,#1f7a54);}
.thumb-tone-6::before{background:linear-gradient(150deg,#241010,#7a1f1f);}
/* Placeholder mark for cards with no artwork (B10: missing course image). */
.thumb-icon{position:relative; z-index:1; margin:auto; opacity:.55; color:#fff;}
.thumb-icon svg{inline-size:40px; block-size:40px;}

.play-btn{
  position:absolute; z-index:2; inset-block-start:50%; inset-inline-start:50%;
  transform:translate(-50%,-50%);
  inline-size:54px; block-size:54px; border-radius:50%;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; color:#fff;
  transition:transform var(--dur-3) var(--ease-spring), background var(--dur-2) var(--ease-out);
}
.play-btn svg{inline-size:17px; block-size:17px; margin-inline-start:2px;}
.card:hover .play-btn{transform:translate(-50%,-50%) scale(1.12); background:var(--accent-fill); border-color:var(--accent-fill);}

.thumb-badges{position:absolute; inset:0; display:flex; align-items:flex-start; z-index:1; pointer-events:none; padding:var(--space-3);}
.badge{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:4px;
  font-family:var(--font-body); font-size:var(--step--2); font-weight:600;
  letter-spacing:0; padding:5px 11px; border-radius:var(--radius-pill);
  line-height:1.3; white-space:nowrap;
}
.badge-free{background:var(--good-dim); color:var(--good); border:1px solid rgba(78,195,138,.3);}
.badge-level{background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.22);}
.badge-dur{margin-inline-start:auto; background:rgba(7,5,4,.62); color:#fff; backdrop-filter:blur(4px);}
.badge-live{background:var(--good-dim); color:var(--good); border:1px solid rgba(78,195,138,.3);}
.badge-warn{background:var(--warn-dim); color:var(--warn); border:1px solid rgba(227,168,60,.3);}
.badge-accent{background:var(--accent-dim); color:var(--accent-ink); border:1px solid var(--line-accent);}

.card-body{padding:var(--space-5) var(--space-5) var(--space-6); display:flex; flex-direction:column; gap:var(--space-2); flex:1;}
.card-meta{display:flex; align-items:center; gap:var(--space-3); font-size:var(--step--2); color:var(--text-3); flex-wrap:wrap;}
/* Category pill inside a card's meta row. */
.card-meta > span:not(.stars):not(.rating-value){
  font-family:var(--font-body);
  padding:2px 9px; border-radius:var(--radius-pill);
  background:var(--surface-3); color:var(--text-2); line-height:1.5;
}
.card-title{font-family:var(--font-display); font-size:var(--step-1); font-weight:600; line-height:1.35; color:var(--text-1);}
.card-title-clamp{display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.card-desc{font-size:var(--step--1); color:var(--text-2); display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.card-foot{display:flex; align-items:center; justify-content:space-between; gap:var(--space-3); margin-block-start:auto; padding-block-start:var(--space-4); border-block-start:1px solid var(--line);}
.price{font-family:var(--font-mixed); font-weight:700; font-size:var(--step-1); color:var(--text-1);}
.price .old{font-size:var(--step--1); color:var(--text-3); text-decoration:line-through; margin-inline-end:var(--space-2); font-weight:400;}
.price-free{color:var(--good);}
.stars{color:var(--accent-ink); font-size:var(--step--1); letter-spacing:.06em;}
.stars .rating-value{color:var(--text-3); font-size:var(--step--2); margin-inline-start:4px;}

/* Catalogue / listing page head — a shallow full-bleed band under the fixed
   nav. It is a wrapper DIV inside the page's existing <section>, not a second
   section: the redesign brief fixes the section count per page. */
.catalog-page{display:block;}
.page-head{padding-block:calc(var(--nav-h) + clamp(44px,6vw,76px)) clamp(36px,5vw,60px);}
.page-head .section-head{margin-bottom:0;}

/* Section titles on the inner pages, replacing per-page inline margins. */
.section-title{margin-block-end:var(--space-6);}
.section-title-spaced{margin-block-start:var(--space-9);}

/* Chips / filters  (.chip.active = LOAD-BEARING) */
.filter-bar{
  display:flex; gap:var(--space-4); flex-wrap:wrap; align-items:center; justify-content:space-between;
  padding:var(--space-4) var(--space-5); border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--surface-1); margin-block-end:var(--space-8);
}
/* Filters stay reachable in a long catalogue. */
.filter-bar.is-sticky{
  position:sticky; inset-block-start:calc(var(--nav-h) + 8px); z-index:var(--z-sticky);
  background:rgba(17,13,12,0.88);
  backdrop-filter:blur(14px) saturate(140%); -webkit-backdrop-filter:blur(14px) saturate(140%);
  box-shadow:var(--shadow-2);
}
.filter-group{display:flex; gap:var(--space-2); flex-wrap:wrap;}
.chip{
  padding:8px 17px; border-radius:var(--radius-pill); border:1px solid var(--line-strong);
  font-size:var(--step--1); font-weight:600; color:var(--text-2); background:transparent;
  transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out),
             border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.chip:hover{color:var(--text-1); border-color:var(--text-3);}
.chip:active{transform:scale(.96);}
.chip.active{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--text-on-accent);}

.search-input-wrap{position:relative; flex:1; min-inline-size:220px;}
.search-input-wrap svg{
  position:absolute; inset-inline-start:15px; inset-block-start:50%; transform:translateY(-50%);
  inline-size:17px; block-size:17px; color:var(--text-3); pointer-events:none;
}
.search-input{
  inline-size:100%; padding:11px 16px 11px 42px; border-radius:var(--radius-pill);
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text-1);
  transition:border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.search-input::placeholder{color:var(--text-3);}
.search-input:focus{outline:none; border-color:var(--accent-ink); background:var(--surface-3);}

/* Form fields */
.field{margin-block-end:var(--space-5);}
.field label{display:block; font-size:var(--step--1); font-weight:600; margin-block-end:var(--space-2); color:var(--text-2);}
.field input,.field select,.field textarea{
  inline-size:100%; padding:12px 15px; border-radius:var(--radius-s);
  border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text-1);
  transition:border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), box-shadow var(--dur-2);
}
.field input::placeholder,.field textarea::placeholder{color:var(--text-3);}
.field textarea{min-block-size:140px; resize:vertical; line-height:1.6;}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--text-3);}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none; border-color:var(--accent-ink); background:var(--surface-3);
  box-shadow:0 0 0 3px var(--accent-dim);
}
.field input[readonly]{background:var(--surface-1); color:var(--text-2); border-style:dashed; cursor:default;}
.field select{appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23968d82' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-inline-end:40px;
}
.form-check{display:flex; align-items:center; gap:var(--space-2); font-size:var(--step--1); color:var(--text-2); cursor:pointer;}
.form-check input{inline-size:17px; block-size:17px; accent-color:var(--accent-fill); cursor:pointer;}
.form-note{font-size:var(--step--2); color:var(--text-3); margin-block-start:var(--space-2);}
.form-success{display:none; color:var(--good); font-size:var(--step--1); margin-block-start:var(--space-2); font-weight:600;}
/* Live result line under the contact form's submit button. */
.form-status{font-size:var(--step--1); font-weight:600; color:var(--good); margin-block-start:var(--space-3); line-height:1.5;}
.form-status.is-error{color:var(--accent-fill);}
.trust-line{font-size:var(--step--1); color:var(--text-3); display:flex; align-items:center; gap:var(--space-2); margin-block-start:var(--space-3);}
.trust-line svg{inline-size:15px; block-size:15px; color:var(--good);}

.qty-row{display:flex; align-items:center; gap:var(--space-4); margin-block:var(--space-6);}
.qty-stepper{display:flex; align-items:center; border:1px solid var(--line-strong); border-radius:var(--radius-pill); overflow:hidden; background:var(--surface-2);}
.qty-stepper button{inline-size:40px; block-size:40px; font-size:1.1rem; color:var(--text-1); transition:background var(--dur-2);}
.qty-stepper button:hover{background:var(--surface-3);}
.qty-stepper span{inline-size:38px; text-align:center; font-weight:600; font-family:var(--font-mixed);}

.pay-icons{display:flex; gap:var(--space-2); margin-block-start:var(--space-5); flex-wrap:wrap;}
.pay-icon{padding:7px 14px; border:1px solid var(--line-strong); border-radius:var(--radius-s); font-size:var(--step--2); font-weight:700; color:var(--text-2);}
.pay-icon.pay-bkash{border-color:rgba(226,19,110,.45); color:#f2569b;}

/* =========================================================================
   10. TABS + ACCORDION
   (.tab-btn/.tab-panel/.active and .accordion-item/.open = LOAD-BEARING;
    main.js writes accordion max-height inline, so keep the mechanism.)
   ========================================================================= */
.tabs{display:flex; gap:var(--space-2); margin-block-end:var(--space-7); flex-wrap:wrap;}
.tab-btn{
  padding:10px 20px; border-radius:var(--radius-pill); border:1px solid var(--line-strong);
  color:var(--text-2); font-size:var(--step--1); font-weight:600; background:transparent;
  transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out), border-color var(--dur-2);
}
.tab-btn:hover{color:var(--text-1); border-color:var(--text-3);}
.tab-btn.active{background:var(--text-1); color:var(--surface-0); border-color:var(--text-1);}
.tab-panel{display:none;}
.tab-panel.active{display:block; animation:panelIn var(--dur-4) var(--ease-out);}
@keyframes panelIn{from{opacity:0; transform:translateY(10px);}to{opacity:1; transform:none;}}

.accordion-item{
  border:1px solid var(--line); border-radius:var(--radius-m); margin-block-end:var(--space-3);
  overflow:hidden; background:var(--surface-1);
  transition:border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.accordion-item:hover{border-color:var(--line-strong);}
.accordion-item.open{background:var(--surface-2); border-color:var(--line-strong);}
/* <button>, not <div>: these were click-handled divs, so the entire
   curriculum and FAQ were unreachable by keyboard. */
.accordion-head{
  display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
  inline-size:100%; text-align:start; background:none; border:none;
  padding:var(--space-4) var(--space-5); cursor:pointer;
  font-family:var(--font-body); font-size:var(--step-0); font-weight:600; color:var(--text-1);
}
.accordion-head:hover{color:var(--accent-ink);}
.accordion-head svg{inline-size:17px; block-size:17px; color:var(--text-3); transition:transform var(--dur-3) var(--ease-out), color var(--dur-2);}
.accordion-item.open .accordion-head svg{transform:rotate(180deg); color:var(--accent-ink);}
.accordion-body{max-height:0; overflow:hidden; transition:max-height var(--dur-4) var(--ease-in-out);}

.lesson-row{
  display:flex; align-items:center; gap:var(--space-3); padding:var(--space-3) var(--space-5);
  border-block-start:1px solid var(--line); font-size:var(--step--1); color:var(--text-2);
}
.lesson-row svg{inline-size:16px; block-size:16px; color:var(--text-3);}
.lesson-row .len{margin-inline-start:auto; font-size:var(--step--2); color:var(--text-3);}
.lesson-row.preview{color:var(--text-1);}
.lesson-row.preview svg{color:var(--accent-ink);}

/* =========================================================================
   11. FEEDBACK — toast, notice, modal, empty / loading / error states
   .notice and .badge-live were previously only defined in admin.css even
   though checkout.js, dashboard.js and course-progress.js emit them on the
   PUBLIC site, where they rendered completely unstyled.
   ========================================================================= */
.toast{
  position:fixed; inset-block-end:24px; inset-inline-start:50%; z-index:var(--z-toast);
  transform:translateX(-50%) translateY(140%);
  background:var(--text-1); color:var(--surface-0);
  padding:13px 24px; border-radius:var(--radius-pill);
  font-size:var(--step--1); font-weight:600; box-shadow:var(--shadow-4);
  max-inline-size:min(90vw,420px); text-align:center;
  transition:transform var(--dur-4) var(--ease-spring);
}
.toast.show{transform:translateX(-50%) translateY(0);}

.notice{
  background:var(--surface-2); border:1px solid var(--line-strong);
  border-inline-start:3px solid var(--accent-ink);
  border-radius:var(--radius-s); padding:var(--space-4) var(--space-5);
  font-size:var(--step--1); color:var(--text-2); margin-block:var(--space-4);
}
.notice code{background:var(--surface-4); color:var(--text-1);}
.notice-good{border-inline-start-color:var(--good);}
.notice-warn{border-inline-start-color:var(--warn);}

.modal-backdrop{
  position:fixed; inset:0; z-index:var(--z-nav);
  background:rgba(6,4,3,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; align-items:flex-start; justify-content:center;
  padding:60px 20px; overflow-y:auto;
  animation:fadeIn var(--dur-3) var(--ease-out);
}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
.modal{
  background:var(--surface-1); border:1px solid var(--line-strong); border-radius:var(--radius-l);
  inline-size:100%; max-inline-size:440px; padding:var(--space-8); position:relative;
  box-shadow:var(--shadow-4);
  animation:modalIn var(--dur-4) var(--ease-spring);
}
@keyframes modalIn{from{opacity:0; transform:translateY(16px) scale(.98);}to{opacity:1; transform:none;}}
.modal-close{
  position:absolute; inset-block-start:14px; inset-inline-end:14px;
  inline-size:34px; block-size:34px; border-radius:50%;
  color:var(--text-3); font-size:1.3rem; line-height:1;
  display:flex; align-items:center; justify-content:center;
  transition:color var(--dur-2), background var(--dur-2);
}
.modal-close:hover{color:var(--text-1); background:var(--surface-3);}

.auth-modal-brand{
  display:flex; align-items:center; justify-content:center; gap:var(--space-2);
  font-family:var(--font-display); font-size:var(--step-1); font-weight:600; margin-block-end:var(--space-5);
}
.auth-error{background:rgba(193,18,47,.14); border:1px solid var(--line-accent); color:#ff9aab; border-radius:var(--radius-s); padding:11px 15px; font-size:var(--step--1); margin-block-end:var(--space-4);}
.auth-info{background:var(--good-dim); border:1px solid rgba(78,195,138,.35); color:var(--good); border-radius:var(--radius-s); padding:11px 15px; font-size:var(--step--1); margin-block-end:var(--space-4);}
.auth-form .field{margin-block-end:var(--space-4);}
.phone-input-group{display:flex; align-items:stretch;}
.phone-input-group .phone-prefix{
  display:flex; align-items:center; padding-inline:15px; background:var(--surface-3);
  border:1px solid var(--line-strong); border-inline-end:none;
  border-radius:var(--radius-s) 0 0 var(--radius-s);
  color:var(--text-2); font-family:var(--font-mixed); font-weight:600; white-space:nowrap;
}
.phone-input-group input{border-radius:0 var(--radius-s) var(--radius-s) 0 !important;}
.auth-otp-sub{font-size:var(--step--1); color:var(--text-2); margin:-4px 0 var(--space-5);}
.auth-otp-actions{display:flex; justify-content:space-between; align-items:center; gap:var(--space-3); margin-block-start:var(--space-4); flex-wrap:wrap;}
.auth-link-btn{color:var(--accent-ink); font-size:var(--step--2); font-weight:600;}
.auth-link-btn:disabled{color:var(--text-3); cursor:default;}

/* --- Empty / loading / error states (B10) --- */
.empty-state{
  text-align:center; padding:var(--space-10) var(--space-5); color:var(--text-3);
  border:1px dashed var(--line-strong); border-radius:var(--radius-m); background:var(--surface-1);
}
.empty-state .empty-icon{
  inline-size:56px; block-size:56px; border-radius:50%; margin:0 auto var(--space-4);
  display:flex; align-items:center; justify-content:center;
  background:var(--surface-3); color:var(--text-3);
}
.empty-state .empty-icon svg{inline-size:24px; block-size:24px;}
.empty-state h3{font-size:var(--step-1); color:var(--text-1); margin-block-end:var(--space-2);}
.empty-state p{font-size:var(--step--1); max-inline-size:44ch; margin-inline:auto;}
.empty-state .btn{margin-block-start:var(--space-5);}
.empty-state-inline{padding:var(--space-7) var(--space-5); background:transparent;}

.state-error{border-color:var(--line-accent);}
.state-error .empty-icon{background:var(--accent-dim); color:var(--accent-ink);}

/* Skeletons — shown while a mount is waiting on the network. */
.skeleton{
  position:relative; overflow:hidden; background:var(--surface-2);
  border:1px solid var(--line); border-radius:var(--radius-m);
}
.skeleton::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,transparent,rgba(246,242,236,.05),transparent);
  transform:translateX(-100%);
  animation:shimmer 1.4s var(--ease-in-out) infinite;
}
@keyframes shimmer{to{transform:translateX(100%);}}
.skeleton-card{block-size:280px;}
.skeleton-line{block-size:12px; border-radius:var(--radius-pill); margin-block-end:var(--space-2);}
.spinner{
  inline-size:18px; block-size:18px; border-radius:50%; flex:0 0 auto;
  border:2px solid var(--line-strong); border-top-color:var(--accent-ink);
  animation:spin .7s linear infinite;
}
.loading-row{display:flex; align-items:center; gap:var(--space-3); color:var(--text-3); font-size:var(--step--1); padding-block:var(--space-5);}

/* Section the admin has hidden from the public (LOAD-BEARING class). */
.section-hidden-from-public{outline:1px dashed var(--line-accent); outline-offset:-1px;}
.section-hidden-from-public::before{
  content:"লুকানো — শুধু অ্যাডমিন হিসেবে আপনি দেখছেন";
  position:absolute; inset-block-start:12px; inset-inline-end:12px; z-index:var(--z-raised);
  background:var(--accent-dim); color:var(--accent-ink); border:1px solid var(--line-accent);
  border-radius:var(--radius-pill); padding:4px 13px; font-size:var(--step--2); font-weight:600;
}

/* Floating WhatsApp support button */
.support-widget-btn{
  position:fixed; inset-inline-end:24px; inset-block-end:24px; z-index:var(--z-sticky);
  inline-size:56px; block-size:56px; border-radius:18px;
  background:linear-gradient(140deg,var(--accent-hover),var(--accent-fill));
  display:flex; align-items:center; justify-content:center; color:#fff;
  box-shadow:var(--shadow-accent), var(--shadow-2);
  transition:transform var(--dur-2) var(--ease-spring), box-shadow var(--dur-2) var(--ease-out);
}
.support-widget-btn svg{inline-size:25px; block-size:25px;}
.support-widget-btn:hover{transform:translateY(-3px) scale(1.04);}
.support-widget-btn:active{transform:translateY(-1px) scale(.98);}

/* =========================================================================
   12. HERO (home)
   ========================================================================= */
.hero{
  position:relative; inline-size:100%; overflow:hidden;
  padding-block:clamp(120px,14vw,180px) clamp(56px,8vw,100px);
}
.hero::before{
  content:""; position:absolute; inset-block-start:0; inset-inline-end:-10%;
  inline-size:70%; block-size:120%; pointer-events:none;
  background:radial-gradient(closest-side, rgba(193,18,47,.16), transparent 72%);
}
.hero-inner{
  position:relative; z-index:2; max-width:var(--container);
  margin-inline:auto; padding-inline:var(--gutter); inline-size:100%;
}
.hero-copy{position:relative;}

.hero-eyebrow{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--step--1); font-weight:600; color:var(--text-2);
  background:rgba(246,242,236,.05); border:1px solid var(--line-strong);
  padding:7px 15px; border-radius:var(--radius-pill);
  backdrop-filter:blur(6px); margin-block-end:var(--space-6);
}
.hero-eyebrow .pulse{
  inline-size:7px; block-size:7px; border-radius:50%; flex:0 0 auto;
  background:var(--accent-ink); animation:pulse 2s var(--ease-in-out) infinite;
}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);}50%{opacity:.35; transform:scale(1.45);}}

.hero-title{
  font-size:var(--step-5); max-inline-size:16ch; margin-block-end:var(--space-5);
  letter-spacing:-0.022em;
}
.hero-title .accent{color:var(--accent-ink); font-style:italic;}
.hero-sub{
  max-inline-size:46ch; font-size:var(--step-1); color:var(--text-2);
  margin-block-end:var(--space-8);
}
.hero-ctas{display:flex; gap:var(--space-3); flex-wrap:wrap; margin-block-end:var(--space-9);}

.hero-stats{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-5);
  border-block-start:1px solid var(--line-strong); padding-block-start:var(--space-6);
}
.hero-stat{min-inline-size:0;}
.hero-stat b{
  display:block; font-size:clamp(1.45rem,2.6vw,2.15rem); font-weight:700;
  line-height:1.1; color:var(--text-1); letter-spacing:-0.02em;
}
.hero-stat span{
  display:block; font-size:var(--step--2); color:var(--text-3);
  margin-block-start:4px; line-height:1.4;
  overflow-wrap:anywhere;
}

/* Hero portrait.
   ASSET NOTE: shahedin-cutout.webp is a feathered footer cutout, so here it
   is deliberately framed — arched card, warm gradient bed behind it and a
   bottom fade that absorbs the feathered edge instead of fighting it.
   A purpose-shot replacement would be: waist-up, shot against a plain
   backdrop, eyes on the upper third, 4:5, >=1600px on the long edge. */
.hero-portrait{
  position:relative; aspect-ratio:4/5; inline-size:100%; max-block-size:600px;
  margin-inline:auto; border-radius:var(--radius-xl) var(--radius-xl) var(--radius-l) var(--radius-l);
  overflow:hidden; border:1px solid var(--line-strong);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(193,18,47,.30), transparent 62%),
    linear-gradient(170deg,var(--surface-3),var(--surface-0));
  box-shadow:var(--shadow-4);
}
.hero-portrait img{
  inline-size:100%; block-size:100%; object-fit:cover; object-position:50% 12%;
  filter:saturate(.94) contrast(1.05);
  -webkit-mask-image:linear-gradient(to top,transparent 0%,#000 11%,#000 100%);
  mask-image:linear-gradient(to top,transparent 0%,#000 11%,#000 100%);
  will-change:transform;
}
.hero-portrait::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 55%,rgba(7,5,4,.55) 100%);
}

/* =========================================================================
   13. TRUST BAR
   B4: grid items get min-width:0 (grid's default `auto` minimum was letting
   long Bangla labels push the 4 columns wider than the container and
   generate a horizontal scrollbar).
   ========================================================================= */
.trust-bar{border-block:1px solid var(--line); background:var(--surface-1); overflow:hidden;}
.trust-grid{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px; background:var(--line);
  max-width:var(--container); margin-inline:auto;
  padding-inline:0; /* the .container padding would frame the cells in hairline */
}
.trust-item{
  min-inline-size:0; background:var(--surface-1);
  padding:var(--space-7) var(--space-4); text-align:center;
  transition:background var(--dur-3) var(--ease-out);
}
.trust-item:hover{background:var(--surface-2);}
.trust-item .ic{
  display:flex; align-items:center; justify-content:center;
  inline-size:38px; block-size:38px; margin:0 auto var(--space-3);
  border-radius:50%; background:var(--accent-dim); color:var(--accent-ink);
}
.trust-item .ic svg{inline-size:18px; block-size:18px;}
.trust-item .num{
  font-size:clamp(1.35rem,2.4vw,1.95rem); font-weight:700; line-height:1.15;
  color:var(--text-1); letter-spacing:-0.02em;
}
.trust-item .lbl{
  font-size:var(--step--2); color:var(--text-3); margin-block-start:4px;
  line-height:1.4; overflow-wrap:anywhere; text-wrap:balance;
}

/* =========================================================================
   14. STORY / TIMELINE / GROWTH / SOCIAL PROOF
   ========================================================================= */
.about-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:var(--space-10); align-items:center;}
.about-grid-text-first{grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);}
.about-grid > *,.product-grid > *,.course-hero-grid > *,.contact-grid > *,.footer-inner > *,.two-col > *{min-inline-size:0;}

/* ASSET NOTE (story portrait): same cutout again. Framed in a soft-arch
   card with a top-weighted crop so the feathered feet land outside the box.
   Replacement: candid working shot, 4:5, warm key light. */
.about-portrait{
  aspect-ratio:4/5; border-radius:var(--radius-l); overflow:hidden; position:relative;
  border:1px solid var(--line);
  background:linear-gradient(165deg,var(--surface-3),var(--surface-0));
}
.about-portrait::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,transparent 60%,rgba(7,5,4,.5) 100%);
}
.about-portrait img{inline-size:100%; block-size:100%; object-fit:cover; object-position:50% top;}
.about-copy > p{margin-block-end:var(--space-4); font-size:var(--step-0);}
.about-copy > div > p{margin-block-end:var(--space-4); font-size:var(--step-0);}
.about-copy p:first-of-type{font-family:var(--font-display); font-size:var(--step-1); line-height:1.55; color:var(--text-1);}

.timeline-h{
  display:flex; border-block-start:1px solid var(--line); margin-block-start:var(--space-6);
  overflow-x:auto; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.timeline-h::-webkit-scrollbar{block-size:5px;}
.timeline-h::-webkit-scrollbar-thumb{background:var(--line-strong); border-radius:3px;}
.timeline-h-item{
  flex:1 0 200px; padding:var(--space-6) var(--space-5) 0;
  border-inline-start:1px solid var(--line); position:relative; font-size:var(--step--1); color:var(--text-2);
}
.timeline-h-item::before{
  content:""; position:absolute; inset-block-start:-1px; inset-inline-start:0;
  inline-size:44px; block-size:2px; background:var(--accent-fill);
  transform-origin:left; transform:scaleX(0);
  transition:transform var(--dur-4) var(--ease-out);
}
.inview .timeline-h-item::before,.timeline-h-item:hover::before{transform:scaleX(1);}
.timeline-h-item .yr{display:block; font-weight:700; color:var(--accent-ink); margin-block-end:6px;}

.growth-track{position:relative; max-width:780px; margin-inline:auto;}
.growth-track::before{
  content:""; position:absolute; inset-inline-start:20px; inset-block:8px;
  inline-size:2px; background:linear-gradient(180deg,var(--line),var(--line-strong),var(--line));
}
.growth-item{position:relative; padding-inline-start:66px; margin-block-end:var(--space-9);}
.growth-item:last-child{margin-block-end:0;}
.growth-dot{
  position:absolute; inset-inline-start:0; inset-block-start:0;
  inline-size:42px; block-size:42px; border-radius:50%;
  background:var(--surface-1); border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--step--1); color:var(--accent-ink);
  transition:background var(--dur-3) var(--ease-spring), border-color var(--dur-3), color var(--dur-3), transform var(--dur-3) var(--ease-spring);
}
.growth-item.inview .growth-dot{background:var(--accent-fill); border-color:var(--accent-fill); color:var(--text-on-accent); transform:scale(1.06);}
.growth-item .g-mark{font-size:var(--step--2); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--text-3); margin-block-end:4px;}
.growth-item h3{margin-block-end:var(--space-2); font-size:var(--step-1);}
.growth-item p{font-size:var(--step--1);}

.t-card{
  background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:var(--space-6); min-inline-size:300px; max-inline-size:350px;
  display:flex; flex-direction:column; gap:var(--space-4);
  transition:border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.t-card:hover{border-color:var(--line-strong); transform:translateY(-4px);}
.t-quote{font-family:var(--font-display); font-size:var(--step-0); line-height:1.6; color:var(--text-1); position:relative;}
.t-person{display:flex; align-items:center; gap:var(--space-3); margin-block-start:auto;}
.t-avatar{
  inline-size:42px; block-size:42px; border-radius:50%; flex:0 0 auto;
  background:linear-gradient(140deg,var(--accent-fill),#5a1120);
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:var(--step--1); color:#fff;
}
.t-name{font-size:var(--step--1); font-weight:600; color:var(--text-1);}
.t-role{font-size:var(--step--2); color:var(--text-3);}

.press-strip{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  border-radius:var(--radius-m); overflow:hidden;
}
.press-item{
  background:var(--surface-1); padding:var(--space-6) var(--space-5);
  display:flex; flex-direction:column; gap:var(--space-2); min-inline-size:0;
  transition:background var(--dur-2) var(--ease-out);
}
.press-item:hover{background:var(--surface-2);}
.press-item .p-logo{font-family:var(--font-display); font-weight:700; font-size:var(--step-0); color:var(--text-1);}
.press-item .p-cap{font-size:var(--step--2); color:var(--text-3);}

/* =========================================================================
   15. COURSE DETAIL
   B2: the hero is a cinematic band. The course thumbnail runs full bleed
   behind it, the copy sits left and the price card right, and the grid is
   vertically centred — so a one-word title and a three-line one both look
   composed rather than leaving a dead gap. The media layer is absolutely
   positioned, so it contributes no height and a course with no thumbnail
   simply falls back to the gradient below without the layout moving.
   ========================================================================= */
.course-hero{
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(46rem 30rem at 88% 0%, rgba(193,18,47,.15), transparent 66%),
    linear-gradient(180deg,var(--surface-1),var(--surface-0));
  border-block-end:1px solid var(--line);
  padding-block:calc(var(--nav-h) + clamp(52px,7.5vw,96px)) clamp(52px,7.5vw,96px);
}

/* Full-bleed course thumbnail.
   The veil is deliberately TWO crossed gradients rather than one flat scrim.
   A single uniform tint either leaves the copy fighting a busy photograph or
   kills the image entirely; this keeps the picture readable on the right,
   where nothing but the card sits, while laying real ink under the title on
   the left. The vertical pass does the other two jobs: it darkens the strip
   the transparent nav floats over, and it lands on --surface-0 at the bottom
   so the band dissolves into the page instead of ending on a hard seam. */
.course-hero-media{position:absolute; inset:0; z-index:-2; overflow:hidden;}
.course-hero-media img{
  inline-size:100%; block-size:100%;
  object-fit:cover; object-position:50% 40%;
  transform:scale(1.04); filter:saturate(.92);
}
.course-hero-media::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(90deg, rgba(11,9,8,.95) 0%, rgba(11,9,8,.90) 34%, rgba(11,9,8,.74) 52%, rgba(11,9,8,.44) 72%, rgba(11,9,8,.34) 100%),
    linear-gradient(180deg, rgba(11,9,8,.80) 0%, rgba(11,9,8,.42) 30%, rgba(11,9,8,.58) 74%, var(--surface-0) 100%);
}
/* Only swap the gradient out once an image is actually mounted, so a course
   with no thumbnail keeps the designed fallback. */
.course-hero.has-media{background:var(--surface-0);}
.course-hero.has-media .course-hero-main{text-shadow:0 1px 20px rgba(7,5,4,.6);}

.course-hero-grid{
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(28px,4.5vw,64px); align-items:center;
}
.course-hero-main{display:flex; flex-direction:column;}
/* Course titles run long and are often bilingual — this is deliberately
   smaller than the site-wide h1 and scoped to this page only. */
.course-hero h1{font-size:var(--step-3); line-height:1.22; margin-block:var(--space-3) 0; text-wrap:balance;}
.crumb{font-size:var(--step--2); color:var(--text-3); margin-block-end:var(--space-4); display:flex; gap:6px; flex-wrap:wrap;}
.crumb a{transition:color var(--dur-2);}
.crumb a:hover{color:var(--text-1);}
.course-hero .course-desc{font-size:var(--step-0); color:var(--text-2); max-inline-size:52ch; margin-block-start:var(--space-4);}

.meta-row{
  display:flex; gap:var(--space-3) var(--space-5); flex-wrap:wrap; align-items:center;
  margin-block-start:var(--space-4); font-size:var(--step--1); color:var(--text-2);
}
.meta-row > span{display:inline-flex; align-items:center; gap:7px;}
.meta-row svg{inline-size:16px; block-size:16px; color:var(--text-3);}
.meta-row .stars{font-size:var(--step--1);}

/* Price + enrol card — the hero's right column.
   It now sits ON the photograph, so the fill is translucent + blurred rather
   than opaque: the artwork stays legible through it and the card reads as
   glass laid over the image instead of a rectangle punched out of it. The
   background stays dark enough on its own that the price and the checklist
   keep their contrast even over a bright thumbnail, and the blur is purely
   decorative — nothing breaks where backdrop-filter isn't supported. */
.course-buy-card{
  padding:var(--space-6);
  border:1px solid var(--line-strong); border-radius:var(--radius-l);
  background:linear-gradient(165deg, rgba(34,29,25,.90), rgba(15,12,11,.94));
  backdrop-filter:blur(20px) saturate(130%);
  -webkit-backdrop-filter:blur(20px) saturate(130%);
  box-shadow:var(--shadow-3), 0 24px 60px rgba(7,5,4,.45);
  position:relative; overflow:hidden;
}
.course-buy-card::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:1px;
  background:linear-gradient(90deg,transparent,var(--line-accent),transparent);
}
.buy-price-row{display:flex; align-items:baseline; gap:var(--space-3); flex-wrap:wrap;}
.course-buy-card .price{font-size:clamp(1.8rem,3.4vw,2.4rem); line-height:1;}
.course-buy-card .small-note{margin-block-start:6px;}
.course-buy-card .btn{margin-block-start:var(--space-5);}
.course-buy-card ul{margin-block-start:var(--space-5); display:flex; flex-direction:column; gap:var(--space-3); font-size:var(--step--1);}
.course-buy-card li{display:flex; gap:var(--space-3); align-items:flex-start; color:var(--text-2);}
.course-buy-card li svg{inline-size:16px; block-size:16px; color:var(--accent-ink); margin-block-start:3px;}
.course-buy-card .pay-icons{margin-block-start:var(--space-5);}

/* B9: enrolled state for the WHOLE card, not just the button label. */
.course-buy-card.is-enrolled{
  background:linear-gradient(165deg,rgba(78,195,138,.10),var(--surface-2));
  border-color:rgba(78,195,138,.34);
}
.course-buy-card.is-enrolled::before{background:linear-gradient(90deg,transparent,rgba(78,195,138,.5),transparent);}
.course-buy-card.is-enrolled .buy-price-row{display:none;}
.enrolled-banner{display:none; align-items:center; gap:var(--space-3);}
.course-buy-card.is-enrolled .enrolled-banner{display:flex;}
.enrolled-banner .enrolled-check{
  inline-size:40px; block-size:40px; border-radius:50%; flex:0 0 auto;
  background:var(--good-dim); color:var(--good);
  display:flex; align-items:center; justify-content:center;
}
.enrolled-banner .enrolled-check svg{inline-size:19px; block-size:19px;}
.enrolled-banner b{display:block; font-size:var(--step-0); color:var(--text-1);}
.enrolled-banner span{display:block; font-size:var(--step--2); color:var(--text-3);}

/* Scroll progress rail, course + long pages. */
.read-progress{
  position:fixed; inset-block-start:0; inset-inline:0; block-size:2px; z-index:calc(var(--z-nav) + 1);
  background:transparent; pointer-events:none;
}
.read-progress span{
  display:block; block-size:100%; transform-origin:left; transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent-fill),var(--accent-ink));
}

/* Curriculum + aside. Deliberately not a 1:1 split — the curriculum is the
   page's substance and the mentor/reviews rail supports it. */
.course-body-grid{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:clamp(32px,4.5vw,64px); align-items:start;}
.course-aside{position:sticky; inset-block-start:calc(var(--nav-h) + 24px);}

/* Course content blocks.
   Each block is a dropdown built on the shared .accordion-item mechanism, so
   the curriculum and the FAQ below it open and close identically. The rules
   here only dress the head — the toggle itself lives in section 10. */
.content-blocks{display:flex; flex-direction:column; gap:var(--space-3);}
.curriculum-accordion .accordion-item{margin-block-end:0;}
.cb-head-main{display:flex; align-items:center; gap:var(--space-4); min-inline-size:0;}
.cb-head-text{display:flex; flex-direction:column; gap:1px; min-inline-size:0;}
.cb-acc .cb-title{line-height:1.35;}
.cb-kind{font-family:var(--font-body); font-size:var(--step--2); font-weight:500; color:var(--text-3); letter-spacing:.01em;}
.cb-acc .accordion-head{align-items:center; padding-block:var(--space-4);}
/* Section 10 rotates every svg inside an open head — that rule is meant for
   the chevron alone, so the type icon and the padlock opt back out here. */
.accordion-head .cb-icon svg,
.accordion-head .cb-lock svg{color:inherit;}
.accordion-item.open .accordion-head .cb-icon svg{transform:none;}
.cb-body{
  padding:var(--space-5); border-block-start:1px solid var(--line);
}
.cb-body > *:first-child{margin-block-start:0;}

/* Locked row: head only, padlock instead of a chevron. There is no
   .accordion-body to reveal — the block's URLs were stripped server-side
   before it reached the page (courses_safe in schema.sql), so this is a
   label for a real restriction rather than a cover over hidden content. */
.cb-acc.is-locked{background:transparent;}
.cb-acc.is-locked:hover{border-color:var(--line-strong); background:var(--surface-1);}
.cb-acc.is-locked .accordion-head{cursor:pointer; color:var(--text-2);}
.cb-acc.is-locked .accordion-head:hover{color:var(--text-1);}
.cb-acc.is-locked .cb-icon{background:var(--surface-3); color:var(--text-3);}
.cb-acc.is-locked .cb-title{color:var(--text-2);}
.cb-lock{
  inline-size:32px; block-size:32px; flex:0 0 auto; border-radius:50%;
  background:var(--surface-3); border:1px solid var(--line); color:var(--text-3);
  display:flex; align-items:center; justify-content:center;
  transition:background var(--dur-2) var(--ease-out), color var(--dur-2) var(--ease-out);
}
.accordion-head .cb-lock svg{inline-size:15px; block-size:15px;}
.cb-acc.is-locked .accordion-head:hover .cb-lock{background:var(--accent-dim); color:var(--accent-ink);}

/* One enrol prompt under the list, not one inside every locked row. */
.curriculum-locked-note{
  display:flex; align-items:center; gap:var(--space-4); flex-wrap:wrap;
  margin-block-start:var(--space-5); padding:var(--space-5);
  border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--surface-1);
}
.curriculum-locked-note .lock-icon{
  inline-size:42px; block-size:42px; flex:0 0 auto; border-radius:50%;
  background:var(--accent-dim); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
}
.curriculum-locked-note .lock-icon svg{inline-size:18px; block-size:18px;}
.curriculum-locked-note .cln-copy{min-inline-size:0; flex:1 1 220px;}
.curriculum-locked-note b{display:block; font-size:var(--step-0); color:var(--text-1);}
.curriculum-locked-note p{font-size:var(--step--1); color:var(--text-3); margin-block-start:3px;}
.curriculum-locked-note .btn{flex:0 0 auto;}

.cb-icon{
  inline-size:36px; block-size:36px; flex:0 0 auto; border-radius:50%;
  background:var(--accent-dim); color:var(--accent-ink);
  display:flex; align-items:center; justify-content:center;
}
.cb-icon svg{inline-size:17px; block-size:17px;}
.cb-title{font-family:var(--font-body); font-size:var(--step-0); font-weight:600; color:var(--text-1);}
/* course-progress.js appends this into .cb-title, which is now a span inside
   the dropdown head rather than its own flex row — so it trails the title
   inline instead of being pushed to the far edge. */
.cb-done-badge{margin-inline-start:8px; vertical-align:middle;}
.cb-progress{display:flex; align-items:center; gap:var(--space-2); font-size:var(--step--1); color:var(--text-2); margin-block-start:var(--space-4); cursor:pointer;}
.cb-progress input{inline-size:17px; block-size:17px; accent-color:var(--accent-fill);}

.video-embed{position:relative; padding-block-start:56.25%; border-radius:var(--radius-s); overflow:hidden; background:#000;}
.video-embed iframe{position:absolute; inset:0; inline-size:100%; block-size:100%; border:0;}
.pdf-embed{inline-size:100%; block-size:560px; border-radius:var(--radius-s); overflow:hidden; background:var(--surface-2); border:1px solid var(--line);}
.pdf-embed iframe{inline-size:100%; block-size:100%; border:0;}
.live-datetime{font-size:var(--step--1); color:var(--text-2); margin-block-end:var(--space-4);}

.quiz-questions{display:flex; flex-direction:column; gap:var(--space-5); margin-block-end:var(--space-4);}
.quiz-q-text{font-size:var(--step-0); font-weight:600; margin-block-end:var(--space-3); color:var(--text-1);}
.quiz-options{display:flex; flex-direction:column; gap:var(--space-2);}
.quiz-option{
  display:flex; align-items:center; gap:var(--space-3);
  padding:11px 15px; border:1px solid var(--line-strong); border-radius:var(--radius-s);
  font-size:var(--step--1); cursor:pointer;
  transition:border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out), transform var(--dur-1);
}
.quiz-option:hover{border-color:var(--line-accent); background:var(--surface-2);}
.quiz-option:active{transform:scale(.995);}
.quiz-option input{accent-color:var(--accent-fill);}
.quiz-option.is-correct{border-color:rgba(78,195,138,.55); background:rgba(78,195,138,.12);}
.quiz-option.is-wrong{border-color:var(--line-accent); background:var(--accent-dim);}
.quiz-score{margin-block-start:var(--space-3); font-size:var(--step--1); font-weight:600; color:var(--text-1);}

.progress-summary{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-m); padding:var(--space-5); margin-block-end:var(--space-4);}
.progress-summary-head{display:flex; justify-content:space-between; gap:var(--space-3); font-size:var(--step--1); font-weight:600; margin-block-end:var(--space-3);}
.progress-summary-head span:last-child{color:var(--accent-ink); font-family:var(--font-mixed);}
.progress-track{inline-size:100%; block-size:6px; border-radius:99px; background:var(--surface-3); overflow:hidden;}
.progress-fill{block-size:100%; border-radius:99px; background:linear-gradient(90deg,var(--accent-fill),var(--accent-ink)); transform-origin:left; transition:width var(--dur-5) var(--ease-out);}

/* Mentor card.
   ASSET NOTE: the default avatar is the full-body footer cutout, which in a
   plain circle crops to a forehead. The frame below uses a wide top-weighted
   crop plus a gradient bed so it reads as an intentional portrait medallion.
   Replacement asset: square head-and-shoulders crop, >=256px, face centred. */
.mentor-card{
  display:flex; align-items:center; gap:var(--space-5);
  padding:var(--space-6); border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--surface-1);
  transition:border-color var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.mentor-card:hover{border-color:var(--line-strong); background:var(--surface-2);}
.mentor-avatar{
  inline-size:72px; block-size:72px; flex:0 0 auto; border-radius:50%; overflow:hidden;
  position:relative; border:1px solid var(--line-strong);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(193,18,47,.34), transparent 70%),
    linear-gradient(165deg,var(--surface-4),var(--surface-1));
  display:flex; align-items:center; justify-content:center;
}
.mentor-avatar img{
  inline-size:150%; block-size:150%; max-inline-size:none;
  object-fit:cover; object-position:50% 8%;
}
.mentor-monogram{font-family:var(--font-display); font-size:var(--step-2); font-weight:700; color:var(--text-1);}
.mentor-body{min-inline-size:0;}
.mentor-body h3{font-family:var(--font-body); font-size:var(--step-0); font-weight:600; margin-block-end:4px;}
.mentor-body p{font-size:var(--step--1); color:var(--text-2);}

/* Loading placeholder cards keep the grid from jumping when data lands. */
.skeleton-video{pointer-events:none;}
.skeleton-video .card-body{gap:var(--space-3); padding-block-start:var(--space-5);}

/* Reviews */
.review-note{
  font-size:var(--step--1); color:var(--text-2); background:var(--surface-2);
  border:1px dashed var(--line-strong); border-radius:var(--radius-s);
  padding:var(--space-4); margin-block-end:var(--space-5);
}
.review-form-card{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-m); padding:var(--space-5); margin-block-end:var(--space-5);}
.review-form-card textarea{
  inline-size:100%; margin-block:var(--space-3) var(--space-4);
  background:var(--surface-3); border:1px solid var(--line-strong); border-radius:var(--radius-s);
  padding:11px 13px; color:var(--text-1); min-block-size:96px; font-family:inherit;
  font-size:var(--step--1); resize:vertical;
}
.review-form-card textarea:focus{outline:none; border-color:var(--accent-ink); box-shadow:0 0 0 3px var(--accent-dim);}
.star-picker{display:flex; gap:4px;}
.star-picker button{
  font-size:1.55rem; line-height:1; padding:2px; color:var(--text-3);
  transition:color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-spring);
}
.star-picker button:hover{transform:scale(1.14);}
.star-picker button.active{color:var(--accent-ink);}
.review-status-badge{display:inline-block; font-size:var(--step--2); font-weight:700; padding:3px 10px; border-radius:99px; margin-inline-start:var(--space-2); vertical-align:middle;}
.review-status-badge.pending{background:var(--warn-dim); color:var(--warn);}
.review-status-badge.approved{background:var(--good-dim); color:var(--good);}

/* =========================================================================
   16. STORE / PRODUCT / CHECKOUT
   ========================================================================= */
.product-page{padding-block:calc(var(--nav-h) + clamp(44px,6vw,80px)) var(--section-lg);}
.product-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,56px); align-items:start;}
.product-media{position:sticky; inset-block-start:calc(var(--nav-h) + 24px);}
.product-info h1{font-size:var(--step-3); margin-block:var(--space-3) 0;}
.gallery-main{
  aspect-ratio:1/1; border-radius:var(--radius-l); overflow:hidden;
  margin-block-end:var(--space-3); position:relative; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.gallery-main img{inline-size:100%; block-size:100%; object-fit:cover;}
.gallery-thumbs[hidden]{display:none;}

/* =========================================================================
   CHECKOUT
   -------------------------------------------------------------------------
   Trust-first transactional layout. The page previously stacked a full-width
   summary above a two-column form, which pushed the price out of view while
   the buyer typed and left the submit button stranded at the bottom of a long
   form, far from the number it was charging. Now: form left, sticky summary
   rail right, submit directly under the total.

   Radius system on this page: --radius-m for surfaces, --radius-s for
   controls, --radius-pill for the step badges only. One accent
   (--accent-fill / --accent-ink); --good is reserved for money coming off.
   ========================================================================= */
.checkout-page{padding-block:calc(var(--nav-h) + clamp(36px,5vw,64px)) var(--section-lg);}

.checkout-head{margin-block-end:var(--space-8);}
.checkout-head h1{margin:0; font-size:var(--step-4);}
.checkout-back{
  display:inline-flex; align-items:center; gap:var(--space-2);
  font-size:var(--step--1); color:var(--text-3); font-family:var(--font-body);
  margin-block-end:var(--space-4);
  transition:color var(--dur-2) var(--ease-out);
}
.checkout-back:hover{color:var(--text-1);}
.checkout-back svg{transition:transform var(--dur-2) var(--ease-out);}
.checkout-back:hover svg{transform:translateX(-3px);}

.checkout-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 384px;
  gap:clamp(28px,3.5vw,60px); align-items:start;
}
/* When the item can't be bought (no item in the URL, or demo data with no
   database id) js/checkout.js sets this. Hiding the form alone would leave an
   orphaned coupon box and a submit button with nothing to submit. */
.checkout-layout.is-unavailable .checkout-main,
.checkout-layout.is-unavailable .summary-actions,
.checkout-layout.is-unavailable .checkout-trust{display:none;}

/* ---- Form column: three grouped steps, not one undifferentiated stack ---- */
.checkout-main{min-inline-size:0;}
.co-group{
  border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--surface-1); padding:var(--space-6) clamp(var(--space-5),3vw,var(--space-7));
  margin-block-end:var(--space-5);
}
.co-group[hidden]{display:none;}
.co-group-head{display:flex; gap:var(--space-4); align-items:flex-start; margin-block-end:var(--space-6);}
.co-step{
  flex:0 0 auto; inline-size:30px; block-size:30px; border-radius:var(--radius-pill);
  display:grid; place-items:center; font-family:var(--font-num); font-size:var(--step--1); font-weight:600;
  background:var(--accent-dim); color:var(--accent-ink); border:1px solid var(--line-accent);
}
.co-group-head h2{margin:0; font-size:var(--step-1); font-family:var(--font-body); font-weight:600;}
.co-group-head p{margin:var(--space-1) 0 0; font-size:var(--step--1); color:var(--text-3);}

.co-fields{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-4) var(--space-5);}
.co-field-wide{grid-column:1/-1;}
.co-fields .field{margin-block-end:0;}
.co-fields textarea{min-block-size:96px;}
.field-optional{font-weight:400; color:var(--text-3); font-size:var(--step--2);}
.field-help{margin:var(--space-2) 0 0; font-size:var(--step--2); color:var(--text-3);}

/* ---- Payment method: a chosen method, not a floating tag ---- */
.pay-method{
  display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  padding:var(--space-4) var(--space-5); border-radius:var(--radius-s);
  border:1px solid var(--line-strong); background:var(--surface-2);
}
.pay-method.is-selected{border-color:var(--line-accent); background:var(--accent-dim);}
.pay-method-check{
  flex:0 0 auto; inline-size:20px; block-size:20px; border-radius:var(--radius-pill);
  display:grid; place-items:center; background:var(--accent-fill); color:var(--text-on-accent);
}
.pay-method .pay-icon{margin:0;}
.pay-method-label{font-size:var(--step--1); color:var(--text-2); font-family:var(--font-body);}

.co-notice{
  display:flex; gap:var(--space-3); align-items:flex-start;
  margin:var(--space-4) 0 0; padding:var(--space-4);
  border-radius:var(--radius-s); background:var(--surface-2);
  font-size:var(--step--2); line-height:1.65; color:var(--text-3);
}
.co-notice svg{flex:0 0 auto; margin-block-start:2px;}

/* ---- Summary rail ---- */
.checkout-rail{position:sticky; inset-block-start:calc(var(--nav-h) + 20px); min-inline-size:0;}
.summary-card{
  border:1px solid var(--line-strong); border-radius:var(--radius-m);
  background:var(--surface-2); padding:var(--space-6);
  box-shadow:var(--shadow-3);
}
.summary-title{
  margin:0 0 var(--space-4); font-size:var(--step--1); font-family:var(--font-body);
  font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
}
.summary-actions{margin-block-start:var(--space-5);}
.summary-actions .coupon-field{margin-block-end:var(--space-5);}
.summary-actions .btn-lg{inline-size:100%;}
.summary-terms{
  margin:var(--space-4) 0 0; font-size:var(--step--2); line-height:1.6;
  color:var(--text-3); text-align:center;
}
.summary-terms a{color:var(--text-2); text-decoration:underline; text-underline-offset:2px;}
.summary-terms a:hover{color:var(--text-1);}

.checkout-trust{
  list-style:none; margin:var(--space-6) 0 0; padding:var(--space-5) 0 0;
  border-block-start:1px solid var(--line);
  display:grid; gap:var(--space-4);
}
.checkout-trust li{display:flex; gap:var(--space-3); align-items:flex-start; color:var(--text-3);}
.checkout-trust svg{flex:0 0 auto; margin-block-start:1px; color:var(--text-2);}
.checkout-trust span{font-size:var(--step--2); line-height:1.55;}
.checkout-trust b{display:block; font-weight:600; color:var(--text-2); margin-block-end:1px;}
.checkout-trust a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;}

/* =========================================================================
   LEGAL PAGES (terms.html / privacy.html)
   -------------------------------------------------------------------------
   A policy is read, not skimmed, so this is a reading column: one measure,
   generous leading, headings that separate without shouting. No cards.
   ========================================================================= */
.legal-page{padding-block:calc(var(--nav-h) + clamp(36px,5vw,64px)) var(--section-lg);}
.legal-head{margin-block-end:var(--space-9);}
.legal-head h1{margin:var(--space-4) 0 0; font-size:var(--step-4);}
.legal-intro{margin:var(--space-4) 0 0; font-size:var(--step-1); color:var(--text-2); max-inline-size:56ch;}
.legal-updated{
  margin:var(--space-5) 0 0; font-size:var(--step--2); color:var(--text-3);
  border-inline-start:2px solid var(--line-accent); padding-inline-start:var(--space-4);
}
.legal-updated[hidden]{display:none;}

.legal-body{max-inline-size:68ch;}
.legal-body h2{
  font-size:var(--step-1); margin-block:var(--space-9) var(--space-4);
  padding-block-end:var(--space-3); border-block-end:1px solid var(--line);
}
.legal-body h2:first-child{margin-block-start:0;}
.legal-body h3{font-size:var(--step-0); margin-block:var(--space-6) var(--space-3); color:var(--text-1);}
.legal-body p{margin-block:0 var(--space-4); color:var(--text-2); line-height:1.85;}
.legal-body ul,.legal-body ol{margin:0 0 var(--space-5); padding-inline-start:var(--space-6); display:grid; gap:var(--space-3);}
.legal-body li{color:var(--text-2); line-height:1.75;}
.legal-body li::marker{color:var(--text-3);}
.legal-body strong{color:var(--text-1); font-weight:600;}
.legal-body a{color:var(--accent-ink); text-decoration:underline; text-underline-offset:2px;}
.legal-foot{
  margin-block-start:var(--space-10); padding-block-start:var(--space-6);
  border-block-start:1px solid var(--line); font-size:var(--step--1); color:var(--text-3);
  display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center;
}
.legal-foot a{color:var(--text-2);}
.legal-foot a:hover{color:var(--text-1);}

/* Admin preview pane reuses the public typography so what the admin sees is
   what ships. Scoped to .legal-preview in admin/css is not possible (different
   stylesheet), so the shared rules live here and admin.css sizes the box. */
.legal-preview h2,.legal-preview h3,.legal-preview p,.legal-preview li{font-family:var(--font-body);}

/* Legal links in the footer of every page. */
.footer-legal{display:flex; gap:var(--space-4); flex-wrap:wrap;}
.footer-legal a{font-size:var(--step--2); color:var(--text-3); transition:color var(--dur-2) var(--ease-out);}
.footer-legal a:hover{color:var(--text-1);}

/* Watch progress under a curriculum video. Hidden until there is something to
   report, so an untouched lesson stays clean. */
.watch-bar{display:flex; align-items:center; gap:var(--space-3); margin-block-start:var(--space-3);}
.watch-bar[hidden]{display:none;}
.watch-track{
  flex:1 1 auto; block-size:4px; border-radius:var(--radius-pill);
  background:var(--surface-4); overflow:hidden; min-inline-size:0;
}
.watch-fill{
  block-size:100%; inline-size:0; border-radius:inherit; background:var(--accent-fill);
  transition:inline-size var(--dur-2) var(--ease-out);
}
.watch-label{flex:0 0 auto; font-size:var(--step--2); color:var(--text-3); font-family:var(--font-mixed);}
.watch-bar.is-done .watch-fill{background:var(--good);}
.watch-bar.is-done .watch-label{color:var(--good);}
@media (prefers-reduced-motion: reduce){ .watch-fill{transition:none;} }

/* =========================================================================
   COMMUNITY TAB (student dashboard)
   -------------------------------------------------------------------------
   Cards, not a link list: each destination is a decision ("do I want Discord
   or the Facebook group?"), and the platform mark is what people actually
   recognise. Brand colours are used only on the icon tile, so the page keeps
   one accent everywhere else.
   ========================================================================= */
.community-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:var(--space-4);}
.community-card{
  display:flex; align-items:center; gap:var(--space-4);
  padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--surface-1); min-inline-size:0;
  transition:border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), background var(--dur-2);
}
.community-card:hover{border-color:var(--line-strong); background:var(--surface-2); transform:translateY(-2px);}
.community-card:active{transform:translateY(0);}

.community-icon{
  flex:0 0 auto; inline-size:44px; block-size:44px; border-radius:var(--radius-s);
  display:grid; place-items:center; background:var(--surface-3); color:var(--text-2);
}
/* Recognisable brand colours, muted to sit in a dark UI. */
.community-discord{background:rgba(88,101,242,.16); color:#8b95f6;}
.community-telegram{background:rgba(42,171,238,.16); color:#4fc0f0;}
.community-whatsapp{background:rgba(37,211,102,.14); color:#4bd07a;}
.community-facebook{background:rgba(24,119,242,.16); color:#5b9bf5;}
.community-youtube{background:rgba(255,0,0,.14); color:#f4677d;}

.community-body{display:flex; flex-direction:column; gap:3px; min-inline-size:0; flex:1;}
.community-label{font-weight:600; color:var(--text-1); font-family:var(--font-body);}
.community-desc{font-size:var(--step--2); color:var(--text-3); line-height:1.5;}
.community-go{flex:0 0 auto; color:var(--text-3); transition:color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);}
.community-card:hover .community-go{color:var(--accent-ink); transform:translate(2px,-2px);}

@media (prefers-reduced-motion: reduce){
  .community-card,.community-go{transition:none;}
  .community-card:hover{transform:none;}
  .community-card:hover .community-go{transform:none;}
}

/* Purchased-download rows in the dashboard's Resources tab. The bought items
   sit above course resources and carry the accent, because someone who just
   paid is looking for that file and nothing else. */
.res-icon{
  flex:0 0 auto; inline-size:34px; block-size:34px; border-radius:var(--radius-s);
  display:grid; place-items:center; background:var(--surface-3); color:var(--text-2);
}
.res-row-buy{border-color:var(--line-accent); background:var(--accent-dim);}
.res-row-buy .res-icon{background:var(--accent-fill); color:var(--text-on-accent);}
.res-row .rleft > span{display:flex; flex-direction:column; gap:2px; min-inline-size:0;}
.res-row .rleft .small-note{color:var(--text-3);}
.res-note{font-style:normal; opacity:.9;}

.gallery-thumbs{display:flex; gap:var(--space-2);}
.gallery-thumbs .g-thumb{
  inline-size:70px; aspect-ratio:1/1; border-radius:var(--radius-s); overflow:hidden;
  border:1px solid var(--line-strong); cursor:pointer; opacity:.55;
  transition:opacity var(--dur-2) var(--ease-out), border-color var(--dur-2), transform var(--dur-2) var(--ease-spring);
}
.gallery-thumbs .g-thumb:hover{opacity:.85; transform:translateY(-2px);}
.gallery-thumbs .g-thumb.active{opacity:1; border-color:var(--accent-ink);}

/* The summary carries no chrome of its own: .summary-card already provides the
   surface, and nesting a bordered card inside a bordered card is the classic
   "card in a card" tell. */
.order-summary{background:none; border:none; padding:0; margin:0;}

/* The line item: thumbnail + name, so the buyer can see WHAT they are paying
   for, not just read its title. */
.osr-item{display:flex; gap:var(--space-4); align-items:flex-start; padding-block-end:var(--space-5);}
.osr-thumb{
  flex:0 0 auto; inline-size:60px; aspect-ratio:1/1; border-radius:var(--radius-s);
  overflow:hidden; background:var(--surface-3); border:1px solid var(--line);
  display:grid; place-items:center; color:var(--text-3);
}
.osr-thumb img{inline-size:100%; block-size:100%; object-fit:cover;}
.osr-item-body{min-inline-size:0; flex:1;}
.osr-item-price{font-family:var(--font-num); font-weight:600; color:var(--text-1); white-space:nowrap;}

.order-summary-row{display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); padding-block:var(--space-2);}
.order-summary-row.total{
  border-block-start:1px solid var(--line-strong); margin-block-start:var(--space-3);
  padding-block-start:var(--space-4); font-weight:700; font-size:var(--step-2);
  align-items:baseline;
}
.order-summary-row.total span:first-child{font-size:var(--step-0); font-weight:600; color:var(--text-2);}
.order-summary .osr-title{font-weight:600; color:var(--text-1); font-family:var(--font-body); line-height:1.4;}
.order-summary .osr-sub{font-size:var(--step--2); color:var(--text-3); font-family:var(--font-body); margin-block-start:var(--space-1);}
.order-summary-row > div:last-child{font-family:var(--font-num); color:var(--text-2); white-space:nowrap;}
/* A successfully applied coupon reads as money coming off, so it takes the
   positive/"good" colour rather than the accent used for prices. */
.order-summary-row.discount{color:var(--good);}
.order-summary-row.discount > div:last-child{color:inherit;}
.order-summary-row.discount .osr-title{color:inherit; font-weight:500;}
.order-summary-row.discount .osr-sub{color:inherit; opacity:.8;}

/* Coupon input + its Apply button sit on one line; the button never shrinks
   below its label, the input takes the rest. */
.coupon-row{display:flex; gap:var(--space-2); align-items:stretch;}
.coupon-row input{flex:1 1 auto; min-inline-size:0;}
.coupon-row .btn{flex:0 0 auto; white-space:nowrap;}
.form-status{margin:var(--space-2) 0 0; font-size:var(--step--2); line-height:1.5;}
.form-status.is-error{color:var(--accent-ink);}
.form-status.is-ok{color:var(--good);}

/* ---- Checkout responsive ----
   The rail stops being a rail below 1000px: it moves above the form so the
   buyer sees the price and the total before filling anything in, and the
   sticky positioning is dropped (a sticky block in normal flow on a phone
   just eats the viewport). */
@media (max-width:1000px){
  .checkout-layout{grid-template-columns:minmax(0,1fr);}
  .checkout-rail{position:static; order:-1;}
  .summary-card{box-shadow:var(--shadow-2);}
}
@media (max-width:560px){
  .co-fields{grid-template-columns:1fr;}
  .co-group{padding:var(--space-5) var(--space-4);}
  .summary-card{padding:var(--space-5) var(--space-4);}
  .checkout-head h1{font-size:var(--step-3);}
}

/* =========================================================================
   17. PORTFOLIO / CONTACT / DASHBOARD
   ========================================================================= */
.kit-hero{padding-block:calc(var(--nav-h) + clamp(48px,7vw,90px)) var(--section-lg);}
.section-head-compact{margin-bottom:var(--space-7);}
.hero-ctas-flush{margin-block-end:0;}
.chart-title{font-size:var(--step-1); margin-block-end:var(--space-4);}
.chart-note{margin-block-start:var(--space-4);}
.kit-stat-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--space-4);}
.kit-stat-card{
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:var(--space-6); min-inline-size:0;
  transition:border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.kit-stat-card:hover{border-color:var(--line-strong); transform:translateY(-3px);}
.kit-stat-card .trend{font-size:var(--step--2); color:var(--good); margin-block-start:6px; overflow-wrap:anywhere;}

.bar-chart{display:flex; align-items:flex-end; gap:var(--space-3); block-size:170px; margin-block-start:var(--space-8);}
.bar-chart .bar{
  flex:1; min-inline-size:0; border-radius:6px 6px 0 0; position:relative;
  background:linear-gradient(180deg,var(--accent-ink),var(--accent-fill));
  transform-origin:bottom; transform:scaleY(0);
  transition:transform var(--dur-5) var(--ease-out);
}
.inview .bar-chart .bar,.bar-chart.inview .bar{transform:scaleY(1);}
.bar-chart .bar:nth-child(1){transition-delay:0ms;}
.bar-chart .bar:nth-child(2){transition-delay:90ms;}
.bar-chart .bar:nth-child(3){transition-delay:180ms;}
.bar-chart .bar:nth-child(4){transition-delay:270ms;}
.bar-chart .bar:nth-child(5){transition-delay:360ms;}
.bar-chart .bar span{
  position:absolute; inset-block-end:100%; inset-inline-start:50%; transform:translateX(-50%);
  font-family:var(--font-mixed); font-size:var(--step--2); color:var(--text-3);
  margin-block-end:6px; white-space:nowrap;
}
.audience-bars{display:flex; flex-direction:column; gap:var(--space-3);}
.audience-row{display:flex; align-items:center; gap:var(--space-4); font-size:var(--step--1);}
.audience-row .albl{inline-size:88px; flex:0 0 auto; color:var(--text-2);}
.audience-row .atrack{flex:1; block-size:8px; background:var(--surface-3); border-radius:99px; overflow:hidden;}
.audience-row .afill{
  block-size:100%; background:linear-gradient(90deg,var(--accent-fill),var(--accent-ink));
  transform-origin:left; transform:scaleX(0);
  transition:transform var(--dur-5) var(--ease-out);
}
.inview .afill{transform:scaleX(1);}
.audience-row .aval{inline-size:38px; text-align:end; color:var(--text-3); font-size:var(--step--2);}

.partner-card{
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:var(--space-7); min-inline-size:0;
  transition:border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out), background var(--dur-2);
}
.partner-card:hover{border-color:var(--line-accent); transform:translateY(-4px); background:var(--surface-2);}
.partner-card h3{font-family:var(--font-body); font-size:var(--step-0); font-weight:600;}
.partner-card p{font-size:var(--step--1); margin-block-start:var(--space-2);}

.case-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--space-5);}
.case-card{
  background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-m);
  padding:var(--space-6); display:flex; flex-direction:column; gap:var(--space-2); min-inline-size:0;
  transition:border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.case-card:hover{border-color:var(--line-accent); transform:translateY(-4px);}
.case-card .case-type{font-size:var(--step--2); color:var(--accent-ink); letter-spacing:var(--tracking-wide); text-transform:uppercase; font-weight:600;}
.case-card .case-brand{font-family:var(--font-display); font-weight:700; font-size:var(--step-1);}
.case-card .case-result{font-family:var(--font-mixed); font-size:var(--step-3); font-weight:700; line-height:1.1; margin-block-start:var(--space-2);}
.case-card .case-result-label{font-size:var(--step--2); color:var(--text-3);}
.case-card .case-desc{font-size:var(--step--1); color:var(--text-2); margin-block-start:var(--space-2);}

.cta-band{
  background:
    radial-gradient(40rem 20rem at 50% 0%, rgba(193,18,47,.18), transparent 70%),
    var(--surface-1);
  border:1px solid var(--line-strong); border-radius:var(--radius-xl);
  padding:clamp(36px,6vw,64px); text-align:center; margin-block-start:var(--space-11);
}
.cta-band p{margin:var(--space-3) auto var(--space-6); max-inline-size:50ch;}

.contact-grid{display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(32px,5vw,64px);}
.contact-stats{margin-block-end:var(--space-9);}
.c-item-text{font-size:var(--step--1);}
.cal-head{display:flex; align-items:center; gap:var(--space-3);}
.cal-note{margin-block-start:var(--space-2);}
.inline-link{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--line-strong); transition:color var(--dur-2), text-decoration-color var(--dur-2);}
.inline-link:hover{color:var(--accent-ink); text-decoration-color:var(--accent-ink);}
.contact-side .c-item{display:flex; gap:var(--space-4); padding-block:var(--space-5); border-block-start:1px solid var(--line);}
.contact-side .c-item:first-child{border-block-start:none; padding-block-start:0;}
.contact-side svg{inline-size:20px; block-size:20px; color:var(--accent-ink); flex:0 0 auto; margin-block-start:3px;}
.contact-side h3,.c-item-title,.cal-widget .c-item-title{font-family:var(--font-body); font-size:var(--step-0); font-weight:600; line-height:1.4;}
.cal-widget{border:1px solid var(--line); border-radius:var(--radius-m); padding:var(--space-5); margin-block-start:var(--space-6); background:var(--surface-1);}
.cal-widget svg{inline-size:18px; block-size:18px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:5px; margin-block-start:var(--space-4);}
.cal-day{
  aspect-ratio:1; display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-xs); font-size:var(--step--2); color:var(--text-2); cursor:pointer;
  transition:background var(--dur-2) var(--ease-out), color var(--dur-2), transform var(--dur-1);
}
.cal-day.avail:hover{background:var(--surface-3); color:var(--text-1);}
.cal-day.avail:active{transform:scale(.92);}
.cal-day.disabled{opacity:.25; pointer-events:none;}
.cal-day.selected{background:var(--accent-fill); color:var(--text-on-accent); font-weight:600;}

.stat-mini{background:var(--surface-1); border:1px solid var(--line); border-radius:var(--radius-m); padding:var(--space-5); min-inline-size:0;}
.stat-mini .n{font-size:var(--step-3); font-weight:700; line-height:1.1; color:var(--text-1);}
.stat-mini .l{font-size:var(--step--2); color:var(--text-3); margin-block-start:4px; overflow-wrap:anywhere;}

.dash-shell{display:grid; grid-template-columns:250px minmax(0,1fr); min-block-size:100vh;}
.dash-side{
  background:var(--surface-1); border-inline-end:1px solid var(--line);
  padding:calc(var(--nav-h) + 48px) var(--space-5) var(--space-8);
  position:sticky; inset-block-start:0; align-self:start; block-size:100vh;
  display:flex; flex-direction:column; gap:4px;
  scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent;
}
.dash-side .side-link{
  display:flex; align-items:center; gap:var(--space-3);
  padding:11px 14px; border-radius:var(--radius-s);
  font-size:var(--step--1); color:var(--text-2); font-weight:500;
  transition:background var(--dur-2) var(--ease-out), color var(--dur-2);
}
.dash-side .side-link svg{inline-size:17px; block-size:17px;}
.dash-side .side-link:hover{background:var(--surface-2); color:var(--text-1);}
.dash-side .side-link.active{background:var(--surface-3); color:var(--text-1);}
.dash-main{padding:calc(var(--nav-h) + 48px) var(--gutter) var(--space-11); min-inline-size:0;}
/* Signed-out / not-configured dashboard states. */
.dash-centered{max-inline-size:560px; margin-inline:auto; text-align:center;}
.dash-centered-narrow{max-inline-size:440px; text-align:start;}
.modal-inline{position:static; max-inline-size:none; padding:var(--space-8); box-shadow:none; animation:none;}
.modal-wide{max-inline-size:640px;}
.dash-auth-note{text-align:center; color:var(--text-3); font-size:var(--step--1); margin:calc(var(--space-4) * -1) 0 var(--space-6);}
.dash-greeting{font-size:var(--step-3); margin-block-end:var(--space-2);}
.dash-greeting-sub{margin-block-end:var(--space-8);}
.dash-page-title{font-size:var(--step-3); margin-block-end:var(--space-7);}
.dash-section-title{font-size:var(--step-2); margin-block-end:var(--space-5);}
.dash-stat-row{margin-block-end:var(--space-10);}
.dash-progress-note{margin-block-start:var(--space-2);}
.dash-modal-actions{display:flex; gap:var(--space-3); margin-block-start:var(--space-5); flex-wrap:wrap;}
/* =========================================================================
   SETTINGS / PROFILE
   -------------------------------------------------------------------------
   Was two identical grey boxes of fields with no sense of whose account it
   was and no reason to fill the optional half in. Now: an identity card with
   a completeness meter, then label-left / fields-right rows where each
   group's subtitle answers "why are you asking me this?", and a save bar
   that only appears once something has actually changed.
   ========================================================================= */
.dash-settings-form{max-inline-size:920px; margin-block-end:var(--space-11);}

/* ---- Identity card ---- */
.profile-card{
  display:flex; align-items:center; gap:var(--space-5); flex-wrap:wrap;
  max-inline-size:920px; margin-block-end:var(--space-8);
  padding:var(--space-6); border-radius:var(--radius-m);
  border:1px solid var(--line-strong); background:var(--surface-2);
}
.profile-avatar{
  flex:0 0 auto; inline-size:60px; block-size:60px; border-radius:var(--radius-pill);
  display:grid; place-items:center; text-transform:uppercase;
  font-family:var(--font-display); font-size:var(--step-2); font-weight:700; line-height:1;
  color:var(--text-on-accent);
  background:linear-gradient(140deg, var(--accent-hover), var(--accent-fill));
  box-shadow:var(--shadow-accent);
}
.profile-id{flex:1 1 200px; min-inline-size:0;}
.profile-id h2{margin:0; font-size:var(--step-2); font-family:var(--font-display);}
.profile-id p{margin:var(--space-1) 0 0; font-size:var(--step--1); color:var(--text-2); overflow-wrap:anywhere;}
.profile-joined{color:var(--text-3) !important; font-size:var(--step--2) !important;}

.profile-meter{flex:0 0 auto; inline-size:200px;}
.profile-meter-head{display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); margin-block-end:var(--space-2);}
.profile-meter-head span{font-size:var(--step--2); color:var(--text-3);}
.profile-meter-head b{font-family:var(--font-num); font-size:var(--step--1); color:var(--text-1);}
.profile-meter p{margin:var(--space-2) 0 0; font-size:var(--step--2); color:var(--text-3);}

/* ---- Label-left, fields-right rows ---- */
.settings-row{
  display:grid; grid-template-columns:230px minmax(0,1fr); gap:clamp(20px,4vw,56px);
  padding-block:var(--space-7); border-block-start:1px solid var(--line);
}
.settings-row:first-of-type{border-block-start:none; padding-block-start:0;}
.settings-row-label h2{margin:0; font-size:var(--step-0); font-family:var(--font-body); font-weight:600;}
.settings-row-label p{margin:var(--space-2) 0 0; font-size:var(--step--2); color:var(--text-3); line-height:1.6;}
.settings-row-fields{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-5);}
.settings-row-fields .field{margin-block-end:0; min-inline-size:0;}
.settings-row-fields .field-wide{grid-column:1/-1;}
.settings-row-fields textarea{min-block-size:92px;}

/* A read-only field must not look identical to an editable one. */
.field-locked{position:relative;}
.field-locked input{background:var(--surface-1); color:var(--text-2); cursor:default; padding-inline-end:38px;}
.field-locked input:hover{border-color:var(--line);}
.field-lock{
  position:absolute; inset-inline-end:12px; inset-block-start:50%; transform:translateY(-50%);
  color:var(--text-3); pointer-events:none; display:grid; place-items:center;
}

.settings-privacy{
  display:flex; gap:var(--space-3); align-items:flex-start;
  margin:var(--space-7) 0 0; padding:var(--space-4) var(--space-5);
  border-radius:var(--radius-s); background:var(--surface-1);
  font-size:var(--step--2); line-height:1.6; color:var(--text-3);
}
.settings-privacy svg{flex:0 0 auto; margin-block-start:2px;}
.settings-privacy a{color:var(--text-2); text-decoration:underline; text-underline-offset:2px;}
.settings-privacy a:hover{color:var(--text-1);}

/* ---- Save bar: sticks to the bottom while there are unsaved changes ---- */
.settings-bar{
  position:sticky; inset-block-end:var(--space-5); z-index:var(--z-sticky);
  margin-block-start:var(--space-6);
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4); flex-wrap:wrap;
  padding:var(--space-4) var(--space-5); border-radius:var(--radius-m);
  border:1px solid var(--line-accent); background:var(--surface-3);
  box-shadow:var(--shadow-3);
}
.settings-bar[hidden]{display:none;}
.settings-bar .form-status{margin:0; flex:1 1 auto;}
.settings-bar .form-status:empty::before{content:"সংরক্ষণ করা হয়নি এমন পরিবর্তন আছে।"; color:var(--text-2);}
.settings-bar-actions{display:flex; gap:var(--space-3); flex:0 0 auto;}

@media (prefers-reduced-motion: no-preference){
  .settings-bar{animation:settings-bar-in var(--dur-3) var(--ease-out);}
  @keyframes settings-bar-in{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}
}

@media (max-width:900px){
  .settings-row{grid-template-columns:minmax(0,1fr); gap:var(--space-5);}
}
@media (max-width:640px){
  .settings-row-fields{grid-template-columns:1fr;}
  .profile-meter{inline-size:100%;}
  .settings-bar{flex-direction:column; align-items:stretch;}
  .settings-bar-actions .btn{flex:1;}
}
.side-link-signout{
  inline-size:100%; text-align:start; margin-block-start:auto;
  border-block-start:1px solid var(--line); border-radius:0;
  padding-block-start:var(--space-4);
}

.dash-course-row{
  display:flex; gap:var(--space-5); align-items:center;
  padding:var(--space-5); border:1px solid var(--line); border-radius:var(--radius-m);
  background:var(--surface-1); margin-block-end:var(--space-4);
  transition:border-color var(--dur-2) var(--ease-out), transform var(--dur-3) var(--ease-out);
}
.dash-course-row:hover{border-color:var(--line-strong); transform:translateX(3px);}
.dash-course-row .dthumb{inline-size:120px; aspect-ratio:16/9; border-radius:var(--radius-s); flex:0 0 auto; overflow:hidden; position:relative;}
.dash-course-row .dinfo{flex:1; min-inline-size:0;}
.dash-course-row .dinfo h3{font-size:var(--step-0); margin-block-end:var(--space-2);}
.res-row{
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-4) var(--space-5); border:1px solid var(--line);
  border-radius:var(--radius-m); margin-block-end:var(--space-3); background:var(--surface-1);
  transition:border-color var(--dur-2), background var(--dur-2);
}
.res-row:hover{border-color:var(--line-strong); background:var(--surface-2);}
.res-row .rleft{display:flex; align-items:center; gap:var(--space-4); min-inline-size:0;}
.res-row svg{inline-size:20px; block-size:20px; color:var(--accent-ink); flex:0 0 auto;}

.admin-table{font-size:var(--step--1);}
.admin-table th{
  text-align:start; padding:10px 12px; color:var(--text-3); font-weight:600;
  font-size:var(--step--2); letter-spacing:var(--tracking-wide); text-transform:uppercase;
  border-block-end:1px solid var(--line); white-space:nowrap;
}
.admin-table td{padding:12px; border-block-end:1px solid var(--line); vertical-align:middle;}
.admin-table tr:last-child td{border-block-end:none;}

/* =========================================================================
   COMPLETION CERTIFICATE
   -------------------------------------------------------------------------
   Deliberately rendered as PAPER, light, inside the dark UI. A certificate is
   a document, not a panel: previewing it on its own stock is how every
   document tool shows one, and it means what you see is exactly what prints.
   The old version was dark-themed with the name in --accent-ink (#f4677d),
   while the print rule forced a white background, so the recipient's name
   came out of the printer nearly invisible.

   Everything inside is sized in `em` off one root font-size on .certificate,
   so the whole document scales as a single object at any width and in print,
   the way real artwork does. Change that one clamp to rescale all of it.

   Palette: warm paper, the brand crimson, and the site's own near-black as
   ink. Deliberately NOT the gold-foil treatment every certificate template
   reaches for; the crimson is what ties it to the brand.
   ========================================================================= */
.certificate{
  --paper:      #f7f3ec;
  --paper-edge: #ece4d7;
  --ink:        #0b0908;
  --ink-soft:   #6a5f57;
  --seal:       #c1122f;

  font-size:clamp(8.5px, 1.02vw, 13.5px);
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  aspect-ratio:1.414/1;              /* A4 landscape */
  padding:1.6em;
  border-radius:var(--radius-s);
  box-shadow:0 18px 50px rgba(8,4,2,.5);
  /* Engine-turned guilloche, the texture on real security paper. Two cheap
     repeating gradients rather than an image, so it stays crisp at print DPI. */
  background-image:
    repeating-radial-gradient(circle at 50% 42%, transparent 0 7px, rgba(193,18,47,.028) 7px 8px),
    repeating-linear-gradient(58deg, transparent 0 11px, rgba(11,9,8,.02) 11px 12px);
  print-color-adjust:exact; -webkit-print-color-adjust:exact;
}

/* Double rule: the outer element carries the hairline, this carries the
   heavier inner line. Classic engraved frame, two elements, no images. */
.cert-frame{
  position:relative; block-size:100%;
  border:0.22em solid var(--seal);
  outline:1px solid var(--paper-edge); outline-offset:0.34em;
  padding:2.4em 3em 1.9em;
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.cert-corner{
  position:absolute; inline-size:0.62em; block-size:0.62em;
  background:var(--seal); transform:rotate(45deg);
}
.cert-corner.tl{inset-block-start:-0.31em; inset-inline-start:-0.31em;}
.cert-corner.tr{inset-block-start:-0.31em; inset-inline-end:-0.31em;}
.cert-corner.bl{inset-block-end:-0.31em; inset-inline-start:-0.31em;}
.cert-corner.br{inset-block-end:-0.31em; inset-inline-end:-0.31em;}

.cert-head{display:flex; align-items:center; gap:0.7em; margin-block-end:1.5em;}
.cert-monogram{
  inline-size:2.3em; block-size:2.3em; border-radius:50%;
  display:grid; place-items:center;
  background:var(--seal); color:var(--paper);
  font-family:var(--font-display); font-size:1em; font-weight:700; line-height:1;
}
.cert-wordmark{
  font-family:var(--font-num); font-size:1.15em; font-weight:600;
  letter-spacing:0.34em; color:var(--ink);
}

.cert-label{
  font-family:var(--font-num); font-size:0.86em; font-weight:600;
  letter-spacing:0.3em; text-transform:uppercase; color:var(--seal);
  margin:0;
}
.cert-rule{
  inline-size:4.2em; block-size:1px; background:var(--seal);
  margin-block:0.9em 1.7em; opacity:.55;
}

.cert-line{font-size:0.98em; color:var(--ink-soft); margin:0; line-height:1.5;}
.cert-name{
  font-family:var(--font-display); font-weight:700;
  font-size:3.1em; line-height:1.18; color:var(--ink);
  margin:0.3em 0 0.28em; padding-block-end:0.06em;   /* descender clearance */
  max-inline-size:14ch;
}
.cert-course{
  font-family:var(--font-display); font-weight:600;
  font-size:1.5em; line-height:1.35; color:var(--seal);
  margin:0.45em 0 0; max-inline-size:26ch;
}

/* Signature row pinned to the bottom of the frame, seal centred between. */
.cert-foot{
  margin-block-start:auto; padding-block-start:1.6em;
  inline-size:100%; display:grid; grid-template-columns:1fr auto 1fr;
  align-items:end; gap:1.6em;
}
.cert-sign{display:flex; flex-direction:column; align-items:center; gap:0.28em;}
.cert-sign-line{inline-size:100%; max-inline-size:12em; block-size:1px; background:var(--ink); opacity:.34; margin-block-end:0.5em;}
.cert-sign b{font-size:0.98em; font-weight:600; color:var(--ink); line-height:1.3;}
.cert-sign small{font-family:var(--font-num); font-size:0.72em; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink-soft);}

.cert-seal{
  position:relative; inline-size:5.4em; block-size:5.4em; flex:0 0 auto;
  display:grid; place-items:center; color:var(--seal);
  transform:rotate(-8deg);
}
.cert-seal-ring{
  position:absolute; inset:0; border-radius:50%;
  border:0.16em solid var(--seal); opacity:.85;
  box-shadow:inset 0 0 0 0.11em var(--paper), inset 0 0 0 0.2em var(--seal);
}
.cert-seal-mark{
  font-family:var(--font-display); font-size:1.9em; font-weight:700; line-height:1;
  margin-block-end:0.06em;
}
.cert-seal-text{
  position:absolute; inset-block-end:0.75em;
  font-size:0.62em; letter-spacing:0.12em; color:var(--seal);
}

.cert-id{
  margin:1.5em 0 0; font-family:var(--font-num);
  font-size:0.7em; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-soft);
}
.cert-id span{color:var(--ink); font-weight:600;}

/* The modal is just a viewer: no card chrome competing with the document. */
.cert-modal{background:none; border:none; box-shadow:none; padding:0; max-inline-size:min(96vw, 1040px);}
.cert-modal .modal-close{color:var(--text-1);}
.cert-modal .dash-modal-actions{margin-block-start:var(--space-6);}

/* Below tablet the A4 ratio would squeeze the type to nothing, so the
   document is allowed to grow taller instead of holding its ratio. */
@media (max-width:720px){
  .certificate{aspect-ratio:auto; font-size:11px;}
  .cert-frame{padding:2em 1.4em 1.6em;}
  .cert-foot{grid-template-columns:1fr; gap:1.8em; justify-items:center;}
  .cert-seal{order:-1;}
}

/* =========================================================================
   18. MOTION
   Choreographed entrances. .reveal / .inview are LOAD-BEARING (main.js).
   Everything animates transform + opacity only.
   ========================================================================= */
.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.reveal.inview{opacity:1; transform:none;}
.reveal-delay-1{transition-delay:90ms;}
.reveal-delay-2{transition-delay:170ms;}
.reveal-delay-3{transition-delay:250ms;}

/* Stagger for direct children of a revealed grid — no JS, no per-item class. */
.reveal-stagger > *{
  opacity:0; transform:translateY(20px);
  transition:opacity var(--dur-4) var(--ease-out), transform var(--dur-4) var(--ease-out);
}
.reveal-stagger.inview > *{opacity:1; transform:none;}
.reveal-stagger.inview > *:nth-child(1){transition-delay:calc(var(--stagger) * 0);}
.reveal-stagger.inview > *:nth-child(2){transition-delay:calc(var(--stagger) * 1);}
.reveal-stagger.inview > *:nth-child(3){transition-delay:calc(var(--stagger) * 2);}
.reveal-stagger.inview > *:nth-child(4){transition-delay:calc(var(--stagger) * 3);}
.reveal-stagger.inview > *:nth-child(5){transition-delay:calc(var(--stagger) * 4);}
.reveal-stagger.inview > *:nth-child(6){transition-delay:calc(var(--stagger) * 5);}
.reveal-stagger.inview > *:nth-child(n+7){transition-delay:calc(var(--stagger) * 6);}

/* Homepage hero load choreography. Runs once, on load, without JS. */
.hero-seq > *{animation:heroIn var(--dur-5) var(--ease-out) backwards;}
.hero-seq > *:nth-child(1){animation-delay:80ms;}
.hero-seq > *:nth-child(2){animation-delay:180ms;}
.hero-seq > *:nth-child(3){animation-delay:280ms;}
.hero-seq > *:nth-child(4){animation-delay:380ms;}
.hero-seq > *:nth-child(5){animation-delay:480ms;}
@keyframes heroIn{from{opacity:0; transform:translateY(22px);}to{opacity:1; transform:none;}}
.hero-portrait{animation:portraitIn var(--dur-5) var(--ease-out) 240ms backwards;}
@keyframes portraitIn{from{opacity:0; transform:translateY(30px) scale(.97);}to{opacity:1; transform:none;}}

/* Scroll-driven parallax where supported; js/motion.js covers the rest. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .parallax-slow{
      animation:parallaxY linear both;
      animation-timeline:view();
      animation-range:entry 0% exit 100%;
    }
  }
}
@keyframes parallaxY{from{transform:translateY(3%);}to{transform:translateY(-3%);}}

/* =========================================================================
   19. RESPONSIVE
   Verified at 1440 / 1280 / 1080 / 760 / 480 / 380.
   ========================================================================= */
@media (max-width:1280px){
  .about-grid,.about-grid-text-first{gap:var(--space-9);}
  .kit-stat-grid{gap:var(--space-3);}
}

@media (max-width:1080px){
  .about-grid,.about-grid-text-first,
  .product-grid,.contact-grid,.course-hero-grid,.two-col,.course-body-grid{grid-template-columns:minmax(0,1fr);}
  .course-aside{position:static;}
  .about-grid,.about-grid-text-first{gap:var(--space-8);}
  .course-buy-card{margin-block-start:var(--space-7);}
  /* Stacked, the copy no longer has a column of its own — it runs the full
     width, straight over the busiest part of the picture — so the horizontal
     pass is dropped and the vertical one has to carry the whole band on its
     own. Measured, not eyeballed: the smallest text here is the breadcrumb at
     --text-3, which needs the plate under it below ~rgb(40,40,40) to clear
     4.5:1, and a bright thumbnail only gets there around 0.9 alpha. That
     flattens the image more than the desktop veil does; legibility wins. */
  .course-hero-media::after{
    background:linear-gradient(180deg, rgba(11,9,8,.86) 0%, rgba(11,9,8,.92) 22%, rgba(11,9,8,.93) 72%, var(--surface-0) 100%);
  }
  .course-hero-media img{object-position:50% 34%;}
  .hero-portrait{max-block-size:440px;}
  .footer-inner{grid-template-columns:minmax(0,1fr);}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kit-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .case-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dash-shell{grid-template-columns:minmax(0,1fr);}
  .dash-side{
    position:relative; block-size:auto; inset-block-start:auto;
    padding:calc(var(--nav-h) + 20px) var(--gutter) var(--space-4);
    flex-direction:row; overflow-x:auto; border-inline-end:none; border-block-end:1px solid var(--line);
  }
  .dash-side .side-link{white-space:nowrap; font-size:var(--step--2); padding:9px 12px;}
  .dash-main{padding-block-start:var(--space-8);}
}

@media (max-width:760px){
  .site-nav{
    background:rgba(11,9,8,.82);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-block-end-color:var(--line);
  }
  .nav-center{display:none;}
  .nav-burger{display:inline-flex;}
  .nav-right .nav-cta{display:none;}
  .nav-right a.icon-btn{display:none;}
  .hero{padding-block:calc(var(--nav-h) + 40px) var(--space-9);}
  .hero-title{max-inline-size:none;}
  .hero-ctas{gap:var(--space-2); margin-block-end:var(--space-7);}
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4);}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trust-item{padding:var(--space-6) var(--space-3);}
  .section-head{margin-block-end:var(--space-7);}
  .t-card{min-inline-size:270px; padding:var(--space-5);}
  .growth-item{padding-inline-start:56px; margin-block-end:var(--space-7);}
  .growth-dot{inline-size:36px; block-size:36px;}
  .growth-track::before{inset-inline-start:17px;}
  .bar-chart{block-size:140px;}
  .footer-inner{gap:var(--space-7);}
  .pdf-embed{block-size:420px;}
  /* A sticky filter bar plus the fixed nav would eat a third of a phone
     screen — let it scroll away below 760. */
  .filter-bar.is-sticky{position:static; background:var(--surface-1); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;}
}

@media (max-width:480px){
  .btn{padding:12px 20px;}
  .btn-lg{padding:14px 26px; font-size:var(--step--1);}
  .grid-4,.grid-3,.grid-2,.case-grid{grid-template-columns:minmax(0,1fr);}
  .kit-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .press-strip{grid-template-columns:minmax(0,1fr);}
  .hero-ctas{flex-direction:column; align-items:stretch;}
  .hero-ctas .btn{inline-size:100%;}
  .filter-bar{padding:var(--space-4);}
  .cta-band{padding:var(--space-8) var(--space-5);}
  .footer-cols{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-5);}
  .footer-bottom{flex-direction:column; text-align:center;}
  .card-body{padding:var(--space-4) var(--space-4) var(--space-5);}
  .course-buy-card{padding:var(--space-5);}
  .cb-acc .accordion-head{padding-inline:var(--space-4);}
  .cb-head-main{gap:var(--space-3);}
  .cb-body{padding:var(--space-4);}
  .curriculum-locked-note{padding:var(--space-4);}
  .curriculum-locked-note .btn{inline-size:100%;}
  .modal{padding:var(--space-6);}
  .gallery-thumbs .g-thumb{inline-size:60px;}
  .qty-stepper button{inline-size:36px; block-size:36px;}
}

@media (max-width:380px){
  :root{--gutter:18px;}
  .trust-grid{grid-template-columns:minmax(0,1fr);}
  .hero-stats{gap:var(--space-3);}
  .hero-stat b{font-size:1.3rem;}
  .kit-stat-grid{grid-template-columns:minmax(0,1fr);}
  .t-card{min-inline-size:240px;}
  .cal-grid{gap:3px;}
}

/* =========================================================================
   19b. RESPONSIVE POLISH
   -------------------------------------------------------------------------
   Findings from a pass at 375 / 768 / 1440. Kept in one block rather than
   scattered so the reasoning stays together and nothing above is disturbed.
   Purely additive: no existing rule is rewritten, so the desktop design is
   byte-for-byte what it was.
   ========================================================================= */

/* ---- 1. The 768px gap ----
   Several grids went from 4 columns straight to 2 at 760px, so iPad portrait
   (exactly 768) landed on the desktop rule and rendered four columns in
   ~720px. Both of these carry large numerals that were being squeezed. */
@media (max-width:900px){
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .trust-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ---- 2. Grids that overflow below their own track width ----
   auto-fill/auto-fit with a fixed minimum cannot go narrower than that
   minimum, so on a 320px phone a 280px track plus gutters pushed the page
   sideways. min() lets the track collapse to the container instead. */
.community-grid{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr));}
.press-strip{grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));}

/* ---- 3. Data tables ----
   A table cannot shrink below its content, and none of these had a scroll
   container: on mobile the columns were simply cut off by the body's
   overflow-x:hidden, silently hiding order totals and dates. The container
   scrolls instead, so every column stays reachable. */
#orderList,
#studentTableWrap,
#courseTableWrap,
#productTableWrap,
#tableWrap,
[data-scope-table]{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-x:contain;   /* don't chain the swipe to page navigation */
}
/* Catches any table added later without needing this list updated. */
.panel:has(> .admin-table),
.dash-main div:has(> .admin-table){overflow-x:auto; -webkit-overflow-scrolling:touch;}
.admin-table{inline-size:100%;}

/* Below tablet the table stops being a table: each row becomes a card and
   each cell shows its own column name, so nothing scrolls sideways and
   nothing is hidden. Cells carry data-label from js/dashboard.js. */
@media (max-width:760px){
  #orderList{overflow-x:visible;}
  .admin-table{display:block; min-inline-size:0;}
  .admin-table thead{display:none;}
  .admin-table tbody,.admin-table tr,.admin-table td{display:block;}
  .admin-table tr{
    background:var(--surface-2); border:1px solid var(--line);
    border-radius:var(--radius-m); padding:var(--space-4) var(--space-5);
    margin-block-end:var(--space-3);
  }
  .admin-table tr:last-child{margin-block-end:0;}
  .admin-table td{
    padding-block:9px; border-block-end:1px solid var(--line);
    display:grid; grid-template-columns:minmax(84px,34%) 1fr;
    gap:var(--space-4); align-items:start;
  }
  .admin-table td:first-child{padding-block-start:0;}
  .admin-table td:last-child{padding-block-end:0; border-block-end:none;}
  .admin-table td::before{
    content:attr(data-label);
    font-size:var(--step--2); font-weight:600; letter-spacing:.05em;
    text-transform:uppercase; color:var(--text-3);
  }
  /* Also covers any cell rendered without a data-label, which would otherwise
     reserve an empty label gutter. */
  .admin-table td[data-label=""],
  .admin-table td:not([data-label]){grid-template-columns:1fr; padding-block-start:var(--space-3);}
  .admin-table td[data-label=""]::before,
  .admin-table td:not([data-label])::before{display:none;}
  .admin-table td:empty{display:none;}
}

/* ---- 4. Touch targets ----
   Gated on a coarse pointer so the desktop keeps its tighter, more refined
   sizing. Only the hit area grows; the visual box is unchanged where the
   element is a circle with a centred glyph. */
@media (pointer:coarse){
  .icon-btn,
  .modal-close,
  .qty-stepper button{min-inline-size:44px; min-block-size:44px;}
  .chip{padding-block:11px;}
  .cal-day{min-block-size:44px;}
  .footer-col a{padding-block:10px;}
  .footer-legal a{display:inline-block; padding-block:8px;}
  .side-link{min-block-size:44px;}
  .cb-progress{padding-block:8px;}
}

/* ---- 5. Long unbroken strings ----
   Emails, URLs and slugs have no break opportunity and were the single
   biggest source of sideways push in the dashboard and order tables. */
.osr-title,.osr-sub,
.res-row .rleft span,
.community-label,.community-desc,
.admin-table td,
.dash-course-row .dinfo h3{overflow-wrap:anywhere;}

/* ---- 5b. Signed-out dashboard ----
   The login card is ~350px tall. Below it, .dash-main's 80px bottom padding
   and .site-footer's 80px top margin stacked into ~160px of empty black
   before the footer, which on a phone reads as a broken render rather than
   deliberate space. Filling the viewport and centring the card removes the
   void without touching the card itself.

   min-block-size, not block-size: if the form grows (the OTP step adds a
   field and two buttons) the container grows with it instead of clipping.
   svh rather than vh, because vh on mobile is the URL-bar-collapsed height,
   which reintroduces a gap that only closes once you scroll. */
.dash-main.dash-centered{
  display:flex; flex-direction:column; justify-content:center;
  min-block-size:calc(100vh - var(--nav-h));
  min-block-size:calc(100svh - var(--nav-h));
  padding-block:calc(var(--nav-h) + var(--space-6)) var(--space-8);
}

/* ---- 6. Mobile-only spacing and sizing corrections ---- */
@media (max-width:760px){
  /* 120px of thumbnail left ~190px for the title on a 375 screen. */
  .dash-course-row .dthumb{inline-size:88px;}
  .dash-course-row{gap:var(--space-3);}
  /* The pane was taller than most phone viewports. */
  .pdf-embed{block-size:min(420px,60vh);}
  /* Sat flush against the viewport edge once the rail unsticks. */
  .checkout-rail,.summary-card{min-inline-size:0;}
}

@media (max-width:480px){
  /* Was 36px, below the touch minimum, and the coarse-pointer rule above
     needs the base to not fight it. */
  .qty-stepper button{inline-size:44px; block-size:44px;}
  .cal-grid{gap:4px;}
  /* Full-bleed modals read better than a 20px frame at this width.
     .modal-inline named explicitly: it sets its own padding at equal
     specificity, so relying on source order alone would be fragile. */
  .modal-backdrop{padding:var(--space-6) var(--space-4);}
  .modal,.modal-inline{padding:var(--space-5);}
  .profile-card{padding:var(--space-5);}
  .settings-row{padding-block:var(--space-6);}
  .co-group{padding:var(--space-5) var(--space-4);}
  .legal-body h2{margin-block-start:var(--space-7);}
}

/* ---- 7. 375px specifically ----
   The narrowest target. Two-up grids that still worked at 480 stop working
   here once padding is accounted for. */
@media (max-width:390px){
  .hero-stats{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-3);}
  .footer-cols{grid-template-columns:minmax(0,1fr); gap:var(--space-6);}
  .coupon-row{flex-wrap:wrap;}
  .coupon-row .btn{inline-size:100%;}
  .dash-course-row{flex-wrap:wrap;}
  .dash-course-row .btn{inline-size:100%;}
}

/* =========================================================================
   20. ACCESSIBILITY + PRINT
   ========================================================================= */
:focus-visible{
  outline:2px solid var(--accent-ink);
  outline-offset:3px;
  border-radius:var(--radius-xs);
}
.btn:focus-visible,.chip:focus-visible,.tab-btn:focus-visible,.nav-cta:focus-visible{outline-offset:3px;}
.skip-link{
  position:absolute; inset-block-start:-100px; inset-inline-start:var(--gutter); z-index:calc(var(--z-nav) + 5);
  background:var(--text-1); color:var(--surface-0); padding:11px 20px;
  border-radius:0 0 var(--radius-s) var(--radius-s); font-weight:600; font-size:var(--step--1);
  transition:top var(--dur-2) var(--ease-out);
}
.skip-link:focus{inset-block-start:0;}
.visually-hidden{
  position:absolute !important; inline-size:1px; block-size:1px;
  padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  html{scroll-behavior:auto;}
  .reveal,.reveal-stagger > *,.hero-seq > *{opacity:1 !important; transform:none !important;}
  .bar-chart .bar{transform:scaleY(1) !important;}
  .audience-row .afill{transform:scaleX(1) !important;}
  .timeline-h-item::before{transform:scaleX(1) !important;}
  body::before{display:none;}
}

@media (prefers-contrast: more){
  :root{--line:rgba(246,242,236,0.22); --line-strong:rgba(246,242,236,0.4); --text-3:#b0a79b;}
}

/* Print: the certificate is the only thing on the page.
   The previous rule forced `background:#fff; color:#111` onto .certificate and
   stripped its border, which flattened the whole design AND left .cert-name
   rendering in --accent-ink (a light pink) on white, so the recipient's name
   printed almost invisibly. The document now carries its own print-safe
   colours, so printing needs to hide the UI around it and nothing else. */
@media print{
  @page{size:A4 landscape; margin:10mm;}

  html,body{background:#fff !important;}
  body::before,body::after,.site-nav,.mobile-menu,.site-footer,.support-widget-btn,.toast{display:none !important;}
  /* Everything except the open certificate modal. */
  body > *:not(.cert-backdrop){display:none !important;}

  .cert-backdrop{
    position:static !important; display:block !important;
    inset:auto !important; background:none !important;
    padding:0 !important; overflow:visible !important;
  }
  .cert-modal{max-inline-size:none !important; margin:0 !important;}
  .cert-modal .modal-close,.cert-modal .dash-modal-actions{display:none !important;}

  .certificate{
    font-size:11.6pt; inline-size:100%; box-shadow:none;
    border-radius:0; aspect-ratio:1.414/1; break-inside:avoid;
  }
}