/* ===========================================================
   SkillRise — shared styles
   Type system mirrors useportal.net:
     display  : Newsreader, weight 400–600, leading ~1.0–1.18, tracking -.02em
     body/UI  : Work Sans, tracking -.02em, leading 1.35 (UI) / 1.58 (prose)
     utility  : Work Sans 700, uppercase, tracking .11em
   Colour is locked to the SkillRise brand guidelines.
   =========================================================== */

:root{
  /* brand */
  --green:#075024;
  --green-700:#0a6a30;
  --green-deep:#04361a;
  --pistachio:#9cba5a;
  --brown:#6b3c15;
  --orange:#f89a39;
  --beige:#fffff0;
  --page:#ffffff;
  --green-5:#e8dccb;
  --rule:#d8cbb8;

  /* text */
  --ink:#12130f;
  --body:#4a4a43;
  --muted:#7b7a70;

  /* spacing scale */
  --s-1:8px;  --s-2:16px; --s-3:24px; --s-4:32px; --s-5:48px;
  --s-6:64px; --s-7:96px; --s-8:128px; --s-9:160px;

  /* measure */
  --col:912px;
  --col-wide:1200px;
  --pad:clamp(20px,5vw,72px);
  --nav-h:72px;

  /* depth: base -> elevated -> floating */
  --shadow-1:0 1px 2px rgba(7,80,36,.05), 0 4px 12px -4px rgba(7,80,36,.08);
  --shadow-2:0 2px 4px rgba(7,80,36,.05), 0 12px 28px -8px rgba(7,80,36,.12), 0 32px 64px -24px rgba(7,80,36,.14);
  --shadow-3:0 4px 8px rgba(7,80,36,.06), 0 24px 48px -12px rgba(7,80,36,.16), 0 60px 120px -40px rgba(7,80,36,.22);

  /* type */
  --font-display:"Newsreader",Georgia,"Times New Roman",serif;
  --font-sans:"Work Sans",system-ui,-apple-system,sans-serif;
  --font-label:"Work Sans",system-ui,-apple-system,sans-serif;
  /* third face, used only for handwritten margin notes (.note, .note-philos) */
  --font-hand:"Caveat",ui-rounded,cursive;

  --ease:cubic-bezier(.34,1.56,.64,1);
  --ease-out:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 16px)}
body{
  background:var(--page);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.58;
  letter-spacing:-.02em;
}
img{max-width:100%;display:block}
a{color:inherit}
ul{list-style:none;margin:0;padding:0}
table{border-collapse:collapse}

/* ---------------- type ---------------- */
h1,h2,h3,h4{margin:0;font-weight:400}

.display{
  font-family:var(--font-display);
  font-weight:400;letter-spacing:-.025em;
  text-wrap:balance;
}
.h1{font-size:clamp(38px,5vw,64px);line-height:1.08}
.h2{font-size:clamp(30px,3.6vw,44px);line-height:1.12}
.h3{font-size:clamp(24px,2.4vw,30px);line-height:1.16}

.h4{font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.h5{font-size:16px;font-weight:600;line-height:1.3;letter-spacing:-.02em}

.eyebrow{
  font-family:var(--font-label);
  /* the "TESOL" label spec: Work Sans 700 / 14px, uppercase */
  font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--orange);display:block;margin-bottom:var(--s-3);
}
.eyebrow-light{color:var(--orange)}

p{margin:0 0 var(--s-3)}
p:last-child{margin-bottom:0}
.lede{color:var(--body);font-size:18px;line-height:1.58}
.lede-lg{font-size:20px;line-height:1.5;color:var(--body)}
.small{font-size:14px;line-height:1.5;color:var(--muted)}
.mono{font-family:var(--font-label);font-weight:700;letter-spacing:0}

/* Emphasised figures — band scores, IELTS numbers. Newsreader 600 / 20px in the
   earth orange, so a score never reads as body copy. */
.stat{
  font-family:var(--font-display);font-weight:600;font-size:20px;
  line-height:1.15;letter-spacing:-.02em;color:var(--brown);
}
.nowrap{white-space:nowrap}

/* ---------------- layout ---------------- */
.col{max-width:var(--col);margin-inline:auto;padding-inline:var(--pad)}
.col-wide{max-width:var(--col-wide);margin-inline:auto;padding-inline:var(--pad)}
.block{padding-block:var(--s-8)}
.block-tight{padding-block:var(--s-7)}
.rule{max-width:var(--col-wide);margin-inline:auto;padding-inline:var(--pad)}
.rule i{display:block;border-top:1px dotted var(--rule)}
.stack-3>*+*{margin-top:var(--s-3)}

/* ---------------- buttons ---------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  /* Work Sans 600 / 14px — everything clickable. Padding came down with the type
     so the pill keeps its proportions. */
  padding:14px 26px;border-radius:999px;border:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;white-space:nowrap;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out);
}
.btn svg{width:16px;height:16px;flex:0 0 auto}
.btn-green{background:var(--green);color:var(--beige);box-shadow:0 2px 4px rgba(7,80,36,.2), 0 14px 30px -10px rgba(7,80,36,.42)}
.btn-green:hover{background:var(--green-700);transform:translateY(-2px);box-shadow:0 4px 10px rgba(7,80,36,.22), 0 22px 44px -12px rgba(7,80,36,.48)}
.btn-green:active{transform:translateY(0)}

.btn-light{background:var(--beige);color:var(--green);box-shadow:0 2px 4px rgba(4,40,18,.18), 0 14px 30px -10px rgba(4,40,18,.38)}
.btn-light:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(4,40,18,.2), 0 20px 40px -12px rgba(4,40,18,.45)}
.btn-light:active{transform:translateY(0)}

.btn-ghost{background:transparent;color:var(--beige);box-shadow:inset 0 0 0 1px rgba(255,255,240,.42)}
.btn-ghost:hover{background:rgba(255,255,240,.12);box-shadow:inset 0 0 0 1px rgba(255,255,240,.65);transform:translateY(-2px)}
.btn-ghost:active{transform:translateY(0)}

.btn-outline{background:transparent;color:var(--green);box-shadow:inset 0 0 0 1px var(--rule)}
.btn-outline:hover{background:var(--beige);box-shadow:inset 0 0 0 1px var(--pistachio);transform:translateY(-2px)}
.btn-outline:active{transform:translateY(0)}

.btn-orange{
  background:var(--orange);color:#3d1f05;
  box-shadow:0 2px 4px rgba(107,60,21,.22), 0 14px 30px -10px rgba(107,60,21,.5);
}
.btn-orange:hover{background:#ffab4d;transform:translateY(-2px)}
.btn-orange:active{transform:translateY(0)}

.btn-sm{padding:11px 20px;font-size:14px}

a:focus-visible,button:focus-visible,.btn:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:999px}

.link{
  color:var(--green);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--pistachio);
  transition:text-decoration-color .25s var(--ease-out), color .25s var(--ease-out);
}
.link:hover{text-decoration-color:var(--green)}

/* ---------------- nav ---------------- */
.nav{
  position:sticky;top:0;z-index:60;
  transition:background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), backdrop-filter .3s var(--ease-out);
}
.nav-in{
  max-width:var(--col-wide);margin-inline:auto;padding:0 var(--pad);
  height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
}
.brand{display:flex;align-items:center;gap:9px;text-decoration:none}
/* Two marks: the white lockup rides the transparent nav over dark art, the full-colour
   one takes over once the nav goes solid or the mobile drawer opens. If the white PNG
   is missing, an onerror flag on <html> falls everything back to colour-on-a-chip. */
.brand img{width:34px;height:34px;object-fit:contain;border-radius:9px}
.logo-on-light{display:none}
.nav.is-solid .logo-on-dark,
.nav.is-open .logo-on-dark{display:none}
.nav.is-solid .logo-on-light,
.nav.is-open .logo-on-light{display:block}
.no-white-logo .logo-on-dark{display:none}
.no-white-logo .logo-on-light{display:block}
.no-white-logo .nav:not(.is-solid):not(.is-open) .logo-on-light{
  background:rgba(255,255,240,.94);padding:2px;
}
/* Notion type rules: logo is Newsreader 600 / 21px / -0.21px. */
.brand span{
  font-family:var(--font-display);font-weight:600;font-size:21px;letter-spacing:-.01em;
  color:var(--beige);transition:color .3s var(--ease-out);
}
.nav-links{display:flex;align-items:center;gap:4px}
/* :not(.btn) keeps these link styles from overriding the CTA pill */
.nav-links a:not(.btn){
  display:inline-block;padding:9px 16px;border-radius:999px;text-decoration:none;
  font-size:15px;font-weight:500;letter-spacing:-.02em;color:rgba(255,255,240,.84);
  transition:background-color .25s var(--ease-out), color .25s var(--ease-out), transform .25s var(--ease);
}
.nav-links a:not(.btn):hover{background:rgba(255,255,240,.14);color:var(--beige)}
.nav-links a:not(.btn):active{transform:translateY(1px)}
.nav-links a:not(.btn).is-current{color:var(--beige);background:rgba(255,255,240,.16)}
.nav-cta{margin-left:8px}
.nav-toggle{
  display:none;width:40px;height:40px;border-radius:12px;border:0;cursor:pointer;
  background:rgba(255,255,240,.14);color:var(--beige);align-items:center;justify-content:center;
  transition:background-color .25s var(--ease-out);
}
.nav-toggle svg{width:20px;height:20px}

/* solid state — over content or on a light page */
.nav.is-solid{
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(1.4) blur(14px);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);
  box-shadow:0 1px 0 rgba(216,203,184,.9), 0 10px 30px -18px rgba(7,80,36,.35);
}
.nav.is-solid .brand span{color:var(--green)}
.nav.is-solid .nav-links a:not(.btn){color:var(--body)}
.nav.is-solid .nav-links a:not(.btn):hover{background:rgba(7,80,36,.07);color:var(--green)}
.nav.is-solid .nav-links a:not(.btn).is-current{background:rgba(7,80,36,.09);color:var(--green)}
.nav.is-solid .btn-light{background:var(--green);color:var(--beige);box-shadow:0 2px 4px rgba(7,80,36,.18), 0 12px 26px -12px rgba(7,80,36,.4)}
.nav.is-solid .btn-light:hover{background:var(--green-700)}
.nav.is-solid .nav-toggle{background:rgba(7,80,36,.08);color:var(--green)}

/* The home page hero is white, so its nav has to start dark-on-light. Every
   other page still opens on a green page-head and keeps the light-on-dark
   treatment above. Scoped to the un-scrolled, un-opened state only — .is-solid
   and .is-open already paint themselves. */
.hero-light .nav:not(.is-solid):not(.is-open) .brand span{color:var(--green)}
.hero-light .nav:not(.is-solid):not(.is-open) .logo-on-dark{display:none}
.hero-light .nav:not(.is-solid):not(.is-open) .logo-on-light{display:block}
.hero-light .nav:not(.is-solid):not(.is-open) .nav-links a:not(.btn){color:var(--body)}
.hero-light .nav:not(.is-solid):not(.is-open) .nav-links a:not(.btn):hover{background:rgba(7,80,36,.07);color:var(--green)}
.hero-light .nav:not(.is-solid):not(.is-open) .nav-links a:not(.btn).is-current{background:rgba(7,80,36,.09);color:var(--green)}
.hero-light .nav:not(.is-solid):not(.is-open) .btn-light{background:var(--green);color:var(--beige);box-shadow:0 2px 4px rgba(7,80,36,.18), 0 12px 26px -12px rgba(7,80,36,.4)}
.hero-light .nav:not(.is-solid):not(.is-open) .btn-light:hover{background:var(--green-700)}
.hero-light .nav:not(.is-solid):not(.is-open) .nav-toggle{background:rgba(7,80,36,.08);color:var(--green)}

/* mobile drawer */
.nav-panel{
  display:none;position:absolute;left:0;right:0;top:var(--nav-h);
  background:var(--beige);border-top:1px solid var(--rule);
  box-shadow:var(--shadow-2);padding:var(--s-3) var(--pad) var(--s-4);
}
.nav-panel a{
  display:block;padding:14px 0;text-decoration:none;font-size:17px;font-weight:500;
  border-bottom:1px dotted var(--rule);color:var(--ink);
}
.nav-panel .btn{margin-top:var(--s-3);width:100%}
.nav.is-open .nav-panel{display:block}

/* ---------------- hero ----------------
   White ground. The grain and star field the dark gradient used to carry are
   gone with it: at .2 overlay on white the grain reads as grey dirt, and the
   cream stars disappear entirely. Contrast now comes from the type and from
   the framed mock, not from the background. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  margin-top:calc(var(--nav-h) * -1);padding:0 0 var(--s-9);
  background:var(--page);
}
.hero-copy{
  position:relative;z-index:4;max-width:1120px;margin-inline:auto;text-align:center;
  padding:calc(var(--nav-h) + clamp(56px,8vw,116px)) var(--pad) 0;
}
.hero-copy h1{color:var(--ink);max-width:24ch;margin-inline:auto;text-wrap:balance}

/* Product name, promoted out of the utility eyebrow: this is what the class is
   called, so it gets the display face rather than a 11px label. */
.hero-kicker{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(23px,2.9vw,36px);line-height:1.15;letter-spacing:-.02em;
  color:var(--orange);margin:0 0 var(--s-2);
}
/* Notion type rules: hero H1 is Newsreader 500 / 56px / -0.56px. */
.hero-h1{font-weight:500;font-size:clamp(33px,4.4vw,56px);line-height:1.1;letter-spacing:-.01em;max-width:20ch}
.hero-sub{
  margin:var(--s-3) auto 0;max-width:640px;color:var(--body);
  font-size:clamp(16px,1.3vw,18.5px);line-height:1.55;
}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:var(--s-5)}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:center;margin-top:var(--s-4);
  font-family:var(--font-label);font-weight:700;font-size:11.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);
}
.hero-meta span{display:inline-flex;align-items:center;gap:8px}
.hero-meta i{width:4px;height:4px;border-radius:50%;background:var(--orange);display:inline-block}

/* hero mockup */
.mock{position:relative;z-index:4;margin:clamp(52px,7vw,92px) auto 0;max-width:1060px;padding-inline:var(--pad)}
.mock-frame{
  border-radius:30px;padding:12px;
  /* Opaque now that there is no dark ground to tint the translucent original. */
  background:var(--beige);border:1px solid var(--rule);
  box-shadow:var(--shadow-3);
}
.mock-body{
  position:relative;border-radius:20px;overflow:hidden;min-height:440px;
  display:grid;grid-template-columns:1.05fr .95fr;
  background:
    radial-gradient(90% 70% at 82% 8%, #f8d3a4 0%, rgba(248,211,164,0) 58%),
    linear-gradient(180deg,#7fb6d8 0%, #cfe0c6 46%, #9cba5a 100%);
}
.mock-ui{padding:20px;display:flex;flex-direction:column;gap:11px}
.mock-top{display:flex;align-items:center;gap:10px;color:#0e3d20;font-size:12.5px;font-weight:600}
.mock-dot{width:24px;height:24px;border-radius:50%;background:var(--orange);box-shadow:0 2px 6px rgba(107,60,21,.3)}
.mock-badge{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:var(--font-label);font-weight:700;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:#0e3d20;background:rgba(255,255,240,.85);border-radius:999px;padding:6px 12px;
}
.mock-live{width:6px;height:6px;border-radius:50%;background:var(--pistachio);box-shadow:0 0 0 3px rgba(156,186,90,.32)}
.mock-card{background:rgba(255,255,240,.96);border-radius:14px;padding:15px 17px;box-shadow:var(--shadow-1)}
.mock-card h4{font-family:var(--font-display);font-size:20px;line-height:1.14;letter-spacing:-.025em;margin-bottom:10px}
.mock-row{display:flex;justify-content:space-between;gap:12px;font-size:11.5px;color:var(--body);padding:7px 0;border-top:1px dotted var(--rule)}
.mock-row:first-of-type{border-top:0}
.mock-row b{color:var(--ink);font-weight:600}
.mock-pill{align-self:flex-start;background:var(--green);color:var(--beige);border-radius:999px;padding:9px 16px;font-size:12.5px;font-weight:600}
.mock-scene{position:relative}
.mock-scene img{
  position:absolute;inset:0;width:100%;height:100%;
  /* The source is cropped close to the cell's own proportions, so this anchor
     only bites on the short mobile cell — it keeps her face in the band that
     survives instead of the treetops above it. */
  object-fit:cover;object-position:50% 62%;
}

/* ---------------- section heads ---------------- */
.sec-head{max-width:760px}
.sec-head h2{margin-bottom:var(--s-3)}
.sec-head .lede:last-child{margin-bottom:0}

/* Centred variant: a claim with one quiet line under it, for sections that are
   a statement rather than a lead-in to a grid. */
.sec-head-center{max-width:720px;margin-inline:auto;text-align:center}
/* A section holding nothing but that statement does not need the full block
   rhythm around it, or it reads as an empty gap rather than a line. */
.block.block-tight{padding-block:var(--s-5)}
.sec-sub{margin:0;font-size:17px;line-height:1.6;color:var(--muted)}

/* ---------------- teacher ---------------- */
.teacher{display:grid;grid-template-columns:400px 1fr;gap:var(--s-6);margin-top:var(--s-7);align-items:start}
.teacher-aside{position:sticky;top:calc(var(--nav-h) + 24px)}
.portrait{position:relative;border-radius:22px;overflow:hidden;box-shadow:var(--shadow-2);aspect-ratio:4/5;background:var(--green-5)}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
/* No colour wash over the photograph — only the footer scrim the caption needs. */
.portrait::after{content:"";position:absolute;inset:0;z-index:3;background:linear-gradient(to top, rgba(4,40,18,.72) 0%, rgba(4,40,18,0) 52%)}
.portrait-cap{position:absolute;z-index:4;left:20px;right:20px;bottom:18px;color:var(--beige)}
.portrait-cap b{display:block;font-family:var(--font-display);font-weight:400;font-size:26px;letter-spacing:-.025em;line-height:1.1}
.portrait-cap span{
  display:block;margin-top:6px;font-family:var(--font-label);font-weight:700;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,240,.8);
}
/* clears the credential card hanging off the bottom of the portrait */
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:46px}
.chip{
  /* these literally are the "TESOL" labels — Work Sans 700 */
  display:inline-block;line-height:1.45;
  font-family:var(--font-label);font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
  background:var(--beige);color:var(--brown);border:1px solid var(--rule);border-radius:16px;padding:7px 13px;
}
/* Two tiers inside one chip: the claim, then the issuing body a step quieter. */
.chip b{font-weight:700;font-size:13.5px;letter-spacing:.05em}
.chip i{font-style:normal;font-weight:600;font-size:11px;letter-spacing:.05em;color:var(--muted)}
.chip-sep{color:var(--rule);font-weight:600}
.chip-green{background:rgba(7,80,36,.08);color:var(--green);border-color:rgba(7,80,36,.16)}
.chip-green b{color:var(--green)}

/* ---------------- teaching-method head ----------------
   Cut-out portrait parked beside the section head; the pistachio sits behind
   the figure as a bloom, never as a wash over it. */
.method-head{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s-5);
  align-items:end;margin-top:96px;
}
.method-figure{
  justify-self:end;align-self:end;height:clamp(230px,25vw,340px);width:auto;
  background:radial-gradient(56% 44% at 50% 60%, rgba(156,186,90,.34) 0%, rgba(156,186,90,0) 72%);
  filter:drop-shadow(0 16px 26px rgba(7,80,36,.22));
}

.teacher-body>p{color:var(--body);font-size:18px;line-height:1.62}
.pull{
  font-family:var(--font-display);font-size:26px;line-height:1.25;letter-spacing:-.025em;
  color:var(--ink);border-left:2px solid var(--orange);padding-left:22px;margin:var(--s-5) 0;
}
.creds-wrap{margin-top:var(--s-7)}
.creds{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cred{display:grid;grid-template-columns:160px 1fr;gap:24px;padding:17px 20px;border-top:1px dotted var(--rule)}
.cred:first-child{border-top:0}
.cred>span{
  font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);padding-top:3px;
}
.cred b{display:block;font-size:16px;font-weight:600;line-height:1.35}
.cred em{display:block;font-style:normal;font-size:14.5px;color:var(--muted);line-height:1.45;margin-top:2px}

/* ---------------- philosophy ---------------- */
.philos{display:grid;grid-template-columns:1fr 1fr;margin-top:var(--s-6)}
.philos-item{padding:0 40px 40px 0}
.philos-item:nth-child(2n){padding:0 0 40px 40px;border-left:1px dotted var(--rule)}
.philos-item:nth-child(n+3){padding-top:40px;border-top:1px dotted var(--rule)}
.philos-item h3{margin-bottom:10px}
.philos-item p{font-size:16.5px;color:var(--body);line-height:1.58;margin:0}
/* The one card the section is really about — the other three icons stay orange. */
.philos-item.is-key h3{color:var(--pistachio)}
.philos-item.is-key .ic{
  width:52px;height:52px;
  box-shadow:
    0 0 0 5px rgba(156,186,90,.2),
    0 4px 10px rgba(107,60,21,.14),
    0 14px 28px -10px rgba(156,186,90,.7);
}
.philos-item.is-key .ic svg{width:26px;height:26px}
.ic{
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:var(--beige);
  margin-bottom:var(--s-3);box-shadow:0 2px 4px rgba(7,80,36,.12), 0 8px 18px -8px rgba(7,80,36,.35);
}
.ic svg{width:19px;height:19px}
.ic-green{background:var(--green)}
.ic-pist{background:var(--pistachio)}
.ic-orange{background:var(--orange)}
.ic-brown{background:var(--brown)}

/* ---------------- class overview table ---------------- */
.ctable{margin-top:var(--s-6);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.ctable-head,.ctable-row{
  display:grid;
  grid-template-columns:minmax(240px,2.1fr) 1.25fr .95fr 1.15fr .95fr 44px;
  gap:var(--s-3);align-items:center;
}
.ctable-head{
  padding:12px 20px;
  font-family:var(--font-label);font-weight:700;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.ctable-row{
  position:relative;padding:24px 20px;text-decoration:none;color:inherit;
  border-top:1px dotted var(--rule);border-radius:16px;
  transition:background-color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease);
}
.ctable-row:hover{
  background:linear-gradient(90deg, rgba(255,255,240,.95) 0%, rgba(232,220,203,.55) 100%);
  box-shadow:var(--shadow-1);transform:translateY(-1px);
}
.ctable-row:active{transform:translateY(0)}
.ctable-row:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:16px}

.ct-name{display:flex;align-items:center;gap:14px;min-width:0}
.ridge{flex:0 0 auto;width:34px;height:26px}
.ct-title{min-width:0}
.ct-title b{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:22px;line-height:1.16;letter-spacing:-.025em;
  transition:color .25s var(--ease-out);
}
.ctable-row:hover .ct-title b{color:var(--green)}
.ct-title span{
  display:block;margin-top:3px;font-family:var(--font-label);font-weight:700;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.ct-cell{font-size:15.5px;line-height:1.4;color:var(--body)}
.ct-cell b{display:block;color:var(--ink);font-weight:600}
.ct-cell em{display:block;font-style:normal;font-size:13.5px;color:var(--muted);margin-top:2px}
.ct-price b{color:var(--green);font-size:17px;letter-spacing:-.02em}
.ct-go{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;justify-self:end;
  background:var(--green-5);color:var(--green);
  transition:background-color .3s var(--ease-out), color .3s var(--ease-out), transform .3s var(--ease);
}
.ct-go svg{width:15px;height:15px}
.ctable-row:hover .ct-go{background:var(--green);color:var(--beige);transform:translateX(4px)}
.ct-label{display:none}

.ctable-note{
  display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:var(--s-3);
  font-family:var(--font-label);font-weight:700;font-size:11.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}
.ctable-note span{display:inline-flex;align-items:center;gap:8px}
.ctable-note i{width:5px;height:5px;border-radius:50%;background:var(--pistachio);display:inline-block}

/* ---------------- trial CTA ---------------- */
.trial{
  position:relative;overflow:hidden;border-radius:28px;margin-top:0;
  padding:clamp(36px,5vw,64px);color:var(--beige);isolation:isolate;
  background:
    radial-gradient(110% 90% at 88% 10%, rgba(248,154,57,.34) 0%, rgba(248,154,57,0) 58%),
    radial-gradient(80% 70% at 6% 92%, rgba(156,186,90,.34) 0%, rgba(156,186,90,0) 60%),
    linear-gradient(140deg,#04361a 0%, #075024 52%, #0a6a30 100%);
  box-shadow:var(--shadow-3);
}
.trial::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.trial-in{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:var(--s-6);align-items:start}
.trial-in>*:last-child{position:sticky;top:calc(var(--nav-h) + 32px)}
.trial h2{color:var(--beige);max-width:16ch}
.trial p{color:rgba(255,255,240,.86);font-size:17.5px;line-height:1.55;margin-top:var(--s-3)}
.trial-list{margin-top:var(--s-4);display:flex;flex-direction:column;gap:12px}
.trial-list li{display:flex;align-items:flex-start;gap:12px;font-size:16px;color:rgba(255,255,240,.92);line-height:1.4}
.trial-list svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:var(--pistachio)}
.trial-actions{display:flex;flex-direction:column;gap:12px;align-items:stretch}
.trial-actions .btn{width:100%}
/* scoped past `.trial p` so the utility size wins. Sentence case rather than the
   old uppercase label: this now carries an email address and a name. */
.trial p.trial-note{
  margin-top:var(--s-1);font-size:13.5px;line-height:1.6;letter-spacing:-.01em;
  color:rgba(255,255,240,.72);text-align:center;
}
.trial p.trial-note a{color:var(--beige);text-decoration:underline;text-underline-offset:3px}
.trial p.trial-note a:hover{color:var(--pistachio)}

/* ---------------- footer ---------------- */
.footer{border-top:1px dotted var(--rule);margin-top:var(--s-8)}
.footer-in{
  max-width:var(--col-wide);margin-inline:auto;padding:var(--s-7) var(--pad) var(--s-6);
  display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--s-5);
}
.footer h4{margin-bottom:var(--s-2)}
.footer p{font-size:16px;color:var(--body)}
.foot-brand{display:flex;align-items:center;gap:10px;margin-bottom:var(--s-3);text-decoration:none}
.foot-brand img{width:36px;height:36px;object-fit:contain}
.foot-brand span{font-family:var(--font-display);font-weight:600;font-size:22px;letter-spacing:-.01em;color:var(--green)}
.foot-col{display:flex;flex-direction:column;gap:11px;font-size:16px}
.foot-col a{text-decoration:none;color:var(--body);transition:color .25s var(--ease-out)}
.foot-col a:hover{color:var(--green)}
.foot-col .eyebrow{margin-bottom:2px}
.footer-base{
  max-width:var(--col-wide);margin-inline:auto;padding:var(--s-4) var(--pad) var(--s-6);
  border-top:1px dotted var(--rule);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;
  font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted);
}

/* ---------------- inner page header ---------------- */
.page-head{
  position:relative;overflow:hidden;isolation:isolate;color:var(--beige);
  margin-top:calc(var(--nav-h) * -1);padding:calc(var(--nav-h) + 88px) 0 var(--s-8);
  background:
    radial-gradient(100% 80% at 84% 6%, rgba(248,154,57,.24) 0%, rgba(248,154,57,0) 56%),
    linear-gradient(160deg,#04361a 0%, #075024 58%, #16713a 100%);
}
.page-head::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.18;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.page-head-in{position:relative;z-index:2}
.page-head h1{color:var(--beige);max-width:17ch}
.page-head .lede{color:rgba(255,255,240,.86);max-width:60ch;margin-top:var(--s-3)}
.backlink{
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;margin-bottom:var(--s-4);
  font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,240,.72);transition:color .25s var(--ease-out), transform .25s var(--ease);
}
.backlink:hover{color:var(--beige);transform:translateX(-3px)}
.backlink svg{width:14px;height:14px}

.factgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:var(--s-6);border-top:1px dotted var(--rule)}
.fact{padding:20px 24px 20px 0;border-bottom:1px dotted var(--rule)}
.fact span{
  display:block;font-family:var(--font-label);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;
}
.fact b{font-size:17px;font-weight:600;line-height:1.35}
.placeholder{
  margin-top:var(--s-6);border:1px dashed var(--rule);border-radius:18px;
  padding:clamp(28px,4vw,44px);background:var(--beige);
}
.placeholder p{color:var(--muted);font-size:16px}

/* ---------------- scroll reveal ----------------
   Composed with --rot so a card's resting rotation survives the transition. */
.js-reveal .reveal{
  opacity:0;transform:translateY(22px) rotate(var(--rot,0deg));
  transition:opacity .75s var(--ease-out), transform .75s var(--ease-out);
  transition-delay:var(--d,0s);
}
.js-reveal .reveal.is-in{opacity:1;transform:translateY(0) rotate(var(--rot,0deg))}

/* ---------------- icon feature list ---------------- */
.iconlist{display:grid;grid-template-columns:1fr 1fr;gap:22px 44px;margin-top:var(--s-6)}
.iconlist li{display:flex;align-items:center;gap:14px;font-size:16.5px;font-weight:500;line-height:1.35}
.iconlist .ic{margin-bottom:0}
.note{position:relative;margin-top:var(--s-4);padding-left:53%}
.note span{
  font-family:var(--font-hand);font-size:26px;line-height:1.15;letter-spacing:0;
  color:var(--brown);display:inline-block;transform:rotate(-3deg);
}
.note svg{position:absolute;left:45%;top:2px;width:74px;height:38px}

/* Handwritten aside under the four method cards — the thing SkillRise is
   actually selling, called out in the client's reference as a margin note. */
.note-philos{
  position:relative;margin:var(--s-4) 0 0;padding:0 12px 0 0;
  display:flex;align-items:center;justify-content:flex-end;gap:14px;
  color:var(--pistachio);
}
.note-philos svg{position:static;width:88px;height:42px;flex:0 0 auto;opacity:.9}
.note-philos span{
  font-family:var(--font-hand);font-size:clamp(26px,2.6vw,34px);line-height:1.1;
  color:var(--pistachio);transform:rotate(-3deg);
}

/* ---------------- alternating feature rows ---------------- */
.frows{display:flex;flex-direction:column;gap:var(--s-9);margin-top:var(--s-8)}
.frow{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--s-7);align-items:center}
.frow.flip .frow-visual{order:-1}
.frow-text h3{margin-bottom:var(--s-2)}
.frow-text p{font-size:17px;color:var(--body);line-height:1.6}

/* layered card compositions */
/* aspect-ratio reserves the box; cards are inset far enough that their
   rotated corners stay inside it */
.compo{position:relative;aspect-ratio:1/.84}
.compo .card{
  position:absolute;background:var(--beige);border:1px solid rgba(216,203,184,.8);
  border-radius:16px;box-shadow:var(--shadow-2);
  transform:rotate(var(--rot,0deg));
}
.compo .card-float{box-shadow:var(--shadow-3)}

.card-h{display:flex;align-items:center;gap:11px;padding:13px 15px}
.card-h+.card-rows{padding-top:0}
.card-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;color:var(--beige);flex:0 0 auto}
.card-ic svg{width:15px;height:15px}
.card-h b{font-size:13.5px;font-weight:600;line-height:1.25;letter-spacing:-.02em}
.card-h em{display:block;font-style:normal;font-size:11.5px;color:var(--muted);margin-top:1px}
.card-h time{
  margin-left:auto;font-family:var(--font-label);font-weight:700;
  font-size:10px;letter-spacing:.06em;color:var(--muted);
}
.card-rows{padding:4px 15px 13px}
.card-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:14px;
  padding:9px 0;border-top:1px dotted var(--rule);font-size:12.5px;color:var(--muted);
}
.card-row:first-child{border-top:0}
.card-row b{color:var(--ink);font-weight:600;text-align:right}
.card-row .up{color:var(--green);font-weight:600}
.card-cta{
  margin:0 15px 15px;display:block;text-align:center;background:var(--green);color:var(--beige);
  border-radius:10px;padding:10px;font-size:12.5px;font-weight:600;
}
.card-wave{padding:14px 15px 0}
.card-wave svg{width:100%;height:38px;display:block;color:var(--pistachio)}
.card-file{padding:12px 15px 13px}
.card-file b{display:block;font-size:13px;font-weight:600;letter-spacing:-.02em}
.card-file span{
  display:block;margin-top:3px;font-family:var(--font-label);font-weight:700;
  font-size:10.5px;letter-spacing:.06em;color:var(--muted);
}
.card-pill{
  display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;
  background:var(--beige);border:1px solid rgba(216,203,184,.8);box-shadow:var(--shadow-3);
  font-size:12px;font-weight:600;color:var(--green);white-space:nowrap;
}
.card-pill svg{width:14px;height:14px;color:var(--pistachio)}

/* floating credential card over the portrait.
   It hangs off .portrait-wrap, not .teacher-aside — anchoring it to the aside
   made it drift into the chips as soon as those grew a line. Do not add
   position:relative to .teacher-aside: that would clobber its sticky behaviour. */
.portrait-wrap{position:relative}
.portrait-float{
  position:absolute;z-index:5;right:-14px;bottom:-32px;width:212px;
  display:flex;align-items:center;gap:11px;padding:13px 15px;border-radius:14px;
  background:var(--beige);border:1px solid rgba(216,203,184,.8);box-shadow:var(--shadow-3);
}
.portrait-float b{
  display:block;font-family:var(--font-display);font-weight:600;
  font-size:20px;line-height:1.15;letter-spacing:-.02em;color:var(--brown);
  /* the wrapping span is an uppercase label; the figure inside it is not */
  text-transform:none;
}
.portrait-float span{
  display:block;margin-top:2px;font-family:var(--font-label);font-weight:700;
  font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}

/* ---------------- outcomes ---------------- */
.outcomes{display:flex;flex-direction:column;margin-top:var(--s-5);border-top:1px dotted var(--rule)}
.outcomes li{
  display:grid;grid-template-columns:20px 1fr;gap:16px;align-items:start;
  padding:18px 0;border-bottom:1px dotted var(--rule);
  font-size:16.5px;line-height:1.58;color:var(--body);
}
.outcomes svg{width:20px;height:20px;margin-top:3px;color:var(--pistachio)}
.outcomes b{color:var(--ink);font-weight:600}

/* ---------------- differentiator panel ---------------- */
.diff{
  margin-top:var(--s-6);padding:clamp(26px,3.4vw,40px);
  background:var(--beige);border-radius:22px;box-shadow:var(--shadow-2);
  border:1px solid var(--rule);
}
.diff .eyebrow{margin-bottom:var(--s-2)}
.diff h3{margin-bottom:var(--s-2);max-width:22ch}
.diff p{font-size:16.5px;line-height:1.62;color:var(--body);margin:0}
.diff p + p{margin-top:var(--s-2)}

/* ---------------- roadmap ---------------- */
.roadmap{margin-top:var(--s-5);border-top:1px solid var(--rule)}
.phase{border-bottom:1px solid var(--rule)}
.phase-sum{
  display:grid;grid-template-columns:auto 1fr auto;gap:20px;align-items:center;
  padding:24px 4px;cursor:pointer;list-style:none;
  transition:background .25s var(--ease-out);
}
.phase-sum::-webkit-details-marker{display:none}
.phase-sum:hover{background:rgba(7,80,36,.035)}
.phase-sum:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:6px}
.phase-sum:active{transform:translateY(1px)}
.phase-no{
  font-family:var(--font-label);font-weight:700;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--beige);background:var(--green);
  border-radius:999px;padding:7px 13px;white-space:nowrap;
}
.phase-t b{display:block;font-size:18px;font-weight:600;line-height:1.3;letter-spacing:-.02em}
.phase-t em{display:block;font-style:normal;font-size:14.5px;color:var(--muted);margin-top:3px}
.phase-mark{
  width:30px;height:30px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(7,80,36,.07);color:var(--green);
  transition:transform .3s var(--ease), background .25s var(--ease-out);
}
.phase-mark svg{width:15px;height:15px}
.phase[open] .phase-mark{transform:rotate(180deg);background:var(--green);color:var(--beige)}
.phase-body{padding:0 4px 30px}
.phase-goal{
  font-size:16px;line-height:1.6;color:var(--body);margin:0 0 var(--s-3);
  padding-left:18px;border-left:2px solid var(--pistachio);max-width:70ch;
}
.sessions{display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.session{padding:15px 0;border-top:1px dotted var(--rule)}
.session b{
  display:block;font-size:15.5px;font-weight:600;line-height:1.35;letter-spacing:-.02em;
}
.session b i{
  font-style:normal;font-family:var(--font-label);font-weight:700;
  font-size:11px;letter-spacing:.1em;color:var(--orange);margin-right:9px;
}
.session p{font-size:14.5px;line-height:1.5;color:var(--muted);margin:5px 0 0}

/* ---------------- callout ---------------- */
.callout{
  margin-top:var(--s-5);padding:clamp(22px,2.6vw,30px);border-radius:18px;
  background:linear-gradient(180deg,rgba(156,186,90,.16),rgba(156,186,90,.08));
  border:1px solid rgba(7,80,36,.14);
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
}
.callout .ic{margin-bottom:0}
.callout p{margin:0;font-size:16.5px;line-height:1.6;color:var(--body)}
.callout b{color:var(--green)}

/* ---------------- payment options ---------------- */
.pay{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:var(--s-4)}
/* Three booking cards, one per class. auto-fit rather than a fixed three-up so
   they reflow on their own and need no breakpoint of their own. */
.pay.pay-3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.pay-opt{
  padding:26px;border-radius:18px;background:var(--beige);
  border:1px solid var(--rule);box-shadow:var(--shadow-1);position:relative;
}
.pay-opt.is-best{border-color:rgba(7,80,36,.34);box-shadow:var(--shadow-2)}
.pay-tag{
  position:absolute;top:-11px;left:26px;background:var(--orange);color:#3d1f05;
  font-family:var(--font-label);font-weight:700;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border-radius:999px;white-space:nowrap;
  box-shadow:0 2px 4px rgba(107,60,21,.18), 0 8px 18px -8px rgba(107,60,21,.4);
}
.pay-opt h4{font-size:15px;font-weight:600;letter-spacing:-.02em;margin-bottom:10px}
.pay-num{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,3.4vw,38px);letter-spacing:-.03em;line-height:1.05;color:var(--green);
}
.pay-num span{font-family:var(--font-sans);font-size:15px;letter-spacing:-.02em;color:var(--muted)}
.pay-opt em{display:block;font-style:normal;font-size:14.5px;color:var(--muted);margin-top:10px;line-height:1.5}

/* ---------------- trial steps ---------------- */
.steps{counter-reset:step;margin-top:var(--s-5);display:flex;flex-direction:column}
.step{
  display:grid;grid-template-columns:auto 1fr;gap:22px;
  padding:24px 0;border-top:1px solid rgba(255,255,240,.18);
}
.step:first-child{border-top:0;padding-top:0}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-label);font-weight:700;font-size:12px;letter-spacing:.1em;
  color:var(--orange);padding-top:4px;
}
.step h4{color:var(--beige);font-size:17px;font-weight:600;letter-spacing:-.02em;margin-bottom:7px}
.step p{margin:0;font-size:15.5px;line-height:1.55;color:rgba(255,255,240,.8)}
.step p + p{margin-top:8px}
.step .link-light{
  color:var(--beige);text-decoration:underline;text-decoration-color:rgba(255,255,240,.4);
  text-underline-offset:3px;transition:text-decoration-color .25s var(--ease-out)
}
.step .link-light:hover{text-decoration-color:var(--orange)}
.step .link-light:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:3px}
.trial-badge{
  display:inline-flex;align-items:center;gap:10px;margin-top:var(--s-3);
  padding:10px 17px;border-radius:999px;
  background:var(--orange);color:#3d1f05;
  font-size:14.5px;font-weight:600;
  box-shadow:0 2px 4px rgba(107,60,21,.2), 0 12px 26px -10px rgba(107,60,21,.5);
}
.trial-badge svg{width:17px;height:17px;flex:0 0 auto}
.paid-note{
  margin-top:var(--s-4);padding:18px 20px;border-radius:14px;
  background:rgba(255,255,240,.07);border:1px solid rgba(255,255,240,.18);
}
.paid-note h4{color:var(--beige);font-size:15px;font-weight:600;letter-spacing:-.02em;margin-bottom:7px}
.paid-note p{margin:0;font-size:14.5px;line-height:1.55;color:rgba(255,255,240,.72)}
.paid-note .bank{margin-top:11px;background:rgba(255,255,240,.05)}

.bank{
  margin-top:12px;padding:15px 17px;border-radius:13px;
  background:rgba(255,255,240,.08);border:1px solid rgba(255,255,240,.16);
}
.bank div{
  display:flex;justify-content:space-between;gap:16px;padding:6px 0;
  font-size:14.5px;color:rgba(255,255,240,.72);
}
.bank div + div{border-top:1px dotted rgba(255,255,240,.18)}
.bank b{
  color:var(--beige);font-weight:700;text-align:right;
  font-family:var(--font-label);letter-spacing:.02em;
}

/* ---------------- scarcity bar ---------------- */
.slots{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:var(--s-4);padding:15px 20px;border-radius:14px;
  /* brand orange, kept light */
  background:rgba(248,154,57,.18);border:1px solid rgba(248,154,57,.55);
  font-size:15px;font-weight:600;color:var(--brown);
}
.slots b{color:var(--brown);font-weight:600}
.slots svg{width:18px;height:18px;flex:0 0 auto;color:var(--brown)}

/* ---------------- hero entry cards ----------------
   The only clickable thing in the hero. Four glass cards, each answering
   "when do you freeze?" for one audience, sitting slightly off-axis so the
   row reads as a hand-dealt stack; hover squares the card up and lifts it. */
.entry-q{
  color:var(--ink);font-size:19px;font-weight:600;line-height:1.45;
  letter-spacing:-.01em;margin:var(--s-5) 0 var(--s-3);
}
.entry-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
  margin-top:var(--s-3);text-align:left;
}
.ecard{
  display:flex;flex-direction:column;align-items:flex-start;gap:12px;
  padding:24px 22px 20px;border-radius:22px;text-decoration:none;color:var(--ink);
  background:var(--beige);border:1px solid var(--rule);
  /* The pistachio bloom this card used to sit in only worked as backlight
     against the dark hero; on white it smears green. A hairline plus the
     standard elevation lifts it off the page instead. */
  box-shadow:var(--shadow-2);
  transition:transform .35s var(--ease), box-shadow .3s var(--ease-out);
}
.ecard-ic{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:13px;
  background:var(--orange);color:#3d1f05;
  box-shadow:0 2px 5px rgba(61,31,5,.3);
}
.ecard-ic svg{width:20px;height:20px}
.ecard b{
  font-family:var(--font-display);font-weight:600;
  font-size:19px;line-height:1.2;letter-spacing:-.02em;
}
.ecard-when{
  font-size:14px;line-height:1.45;color:var(--body);
  letter-spacing:-.01em;flex:1 1 auto;
}
.ecard-go{
  display:inline-flex;align-items:center;gap:7px;margin-top:4px;
  font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--green);
}
.ecard-go svg{width:15px;height:15px;transition:transform .25s var(--ease-out)}

.ecard:hover,.ecard:focus-visible{
  transform:translateY(-6px);
  border-color:var(--pistachio);
  box-shadow:var(--shadow-3);
}
.ecard:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.ecard:hover .ecard-go svg,.ecard:focus-visible .ecard-go svg{transform:translateX(4px)}
.ecard:active{transform:translateY(-2px)}

@media (prefers-reduced-motion:reduce){
  .ecard{transition:box-shadow .2s linear}
  .ecard:hover,.ecard:focus-visible,.ecard:active{transform:none}
}

/* ---------------- teacher photo strip ----------------
   Loose, hand-placed feel: each frame keeps a resting tilt in --rot and a
   staggered top offset, so the row reads as three pinned-up snapshots rather
   than a grid. Captions sit under the frame, not over the picture. */
.tphotos{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);
  align-items:start;margin-top:var(--s-5);padding-inline:clamp(0px,2vw,28px);
}
.tphoto{margin:0;transform:rotate(var(--rot,0deg));transition:transform .35s var(--ease-out)}
.tphoto:nth-child(1){--rot:-2.4deg}
.tphoto:nth-child(2){--rot:1.6deg;margin-top:clamp(14px,2.6vw,38px)}
.tphoto:nth-child(3){--rot:-1.2deg;margin-top:clamp(4px,1vw,14px)}
.tphoto:hover,.tphoto:focus-within{transform:rotate(0deg)}
/* One frame shape for all three so the row stays even, whatever the source
   orientation is. The certificate is the exception: it gets mounted whole
   rather than cropped, because cropping it destroys the thing it shows. */
.tphoto img,.tphoto video{
  display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;
  background:var(--green-5);box-shadow:var(--shadow-2);
}
.tphoto-mount img{object-fit:contain}
/* The third frame carries two shots from the same hackathon. The stack owns the
   3/4 silhouette so the row still reads as three even frames; both sources are
   ~3:2, so each lands in its half with almost nothing to spare. */
.tphoto-stack{
  display:grid;grid-template-rows:1fr 1fr;gap:clamp(6px,.8vw,10px);
  aspect-ratio:3/4;padding:clamp(6px,.8vw,10px);
  border-radius:14px;background:var(--green-5);box-shadow:var(--shadow-2);
}
.tphoto-stack img{
  width:100%;height:100%;aspect-ratio:auto;min-height:0;
  border-radius:8px;box-shadow:none;background:transparent;
}
/* Certificate stays whole — cropping it destroys the thing it shows. The team
   shot is a scene, so it fills its half instead. */
.tphoto-stack img:first-child{object-fit:contain}
.tphoto-stack img:last-child{object-fit:cover}
.tphoto figcaption{
  margin-top:12px;font-size:13px;line-height:1.45;
  color:var(--muted);letter-spacing:-.005em;
}

/* ---------------- clickable credentials ----------------
   Whole row is the control, so the old "Xem minh chứng" link is gone; the
   corner glyph carries the affordance instead. */
.creds{display:grid;grid-template-columns:1fr 1fr;gap:12px;border:0}
.cred-btn{
  position:relative;display:flex;flex-direction:column;gap:3px;align-items:flex-start;
  width:100%;text-align:left;padding:16px 46px 16px 18px;
  border:1px solid var(--rule);border-radius:16px;background:#fff;
  font:inherit;color:inherit;cursor:pointer;
  transition:border-color .25s var(--ease-out), box-shadow .25s var(--ease-out), transform .25s var(--ease-out);
}
.cred-btn:hover{border-color:rgba(7,80,36,.34);box-shadow:0 10px 24px -14px rgba(7,80,36,.4);transform:translateY(-2px)}
.cred-btn:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.cred-btn:active{transform:translateY(0)}
.cred-btn>span:first-child{
  font-family:var(--font-label);font-weight:700;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);
}
.cred-btn b{display:block;font-size:15.5px;font-weight:600;line-height:1.3;letter-spacing:-.015em}
.cred-btn em{display:block;font-style:normal;font-size:13.5px;color:var(--muted);line-height:1.45;margin-top:2px}
/* The affordance: a quiet magnifier in the corner, lit up on hover. */
.cred-btn .cred-mark{
  position:absolute;top:14px;right:14px;width:26px;height:26px;border-radius:9px;
  display:grid;place-items:center;color:var(--green);background:rgba(7,80,36,.07);
  transition:background .25s var(--ease-out), color .25s var(--ease-out);
}
.cred-btn .cred-mark svg{width:14px;height:14px}
.cred-btn:hover .cred-mark{background:var(--green);color:var(--beige)}
/* A row with nothing to prove: same shape, no click target. */
.cred-static{cursor:default;background:transparent;border-style:dashed}
.cred-static:hover{transform:none;box-shadow:none;border-color:var(--rule)}

.proof{
  border:0;padding:0;border-radius:20px;max-width:min(680px,92vw);
  /* certificates are tall; scroll inside the dialog rather than off-screen */
  max-height:92vh;overflow:auto;
  background:var(--beige);box-shadow:var(--shadow-3);color:var(--ink);
}
.proof-wide{max-width:min(900px,94vw)}
.proof::backdrop{background:rgba(4,40,18,.62);backdrop-filter:blur(3px)}
.proof-in{padding:24px}
.proof h3{font-size:19px;font-weight:600;letter-spacing:-.02em;margin-bottom:4px}
.proof p{font-size:14.5px;color:var(--muted);margin:0 0 16px}
.proof img{
  width:100%;max-height:62vh;object-fit:contain;
  border-radius:12px;border:1px solid var(--rule);background:#fff;
}
/* Certificates that only exist as PDF keep their own page rendering. The
   fallback inside <object> shows wherever a browser has no PDF viewer. */
.proof object{display:block;width:100%;height:min(66vh,600px);border:1px solid var(--rule);border-radius:12px;background:#fff}
.proof-file{display:inline-block;margin-top:12px;font-size:14px;font-weight:600;color:var(--green)}
.proof-file:hover{color:var(--green-700)}
.proof-fallback{display:grid;place-items:center;height:100%;padding:24px;text-align:center;font-size:14.5px;color:var(--muted)}
.proof-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.proof-two img{max-height:52vh}
.proof-two figure{margin:0}
.proof-two figcaption{margin-top:8px;font-size:12.5px;color:var(--muted);line-height:1.4}
.proof-pending{
  display:grid;place-items:center;text-align:center;padding:38px 20px;
  border:1px dashed var(--rule);border-radius:12px;background:rgba(7,80,36,.03);
  font-size:14.5px;color:var(--muted);
}
.proof-close{
  margin-top:18px;width:100%;padding:12px;border:0;border-radius:999px;cursor:pointer;
  background:var(--green);color:var(--beige);font:inherit;font-weight:600;
  transition:background .25s var(--ease-out);
}
.proof-close:hover{background:var(--green-700)}

/* ---------------- pain points ---------------- */
.pains{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:var(--s-6)}
.pain{padding:26px 40px 26px 0;border-top:1px dotted var(--rule)}
.pain b{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:21px;letter-spacing:-.025em;line-height:1.2;margin-bottom:9px;
}
.pain p{margin:0;font-size:16px;line-height:1.58;color:var(--body)}
.pain-tag{
  display:inline-block;font-family:var(--font-label);font-weight:700;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--brown);margin-bottom:11px;
}

/* ---------------- audience cards ---------------- */
.audience{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:var(--s-6)}
.acard{
  display:flex;flex-direction:column;gap:12px;padding:26px 24px 22px;
  /* White card face. The pistachio only blooms behind it — box-shadow rather
     than a blurred pseudo-element so the glow survives the transform on :hover,
     and nothing tints the card itself. */
  background:#fff;
  border:1px solid rgba(156,186,90,.28);border-radius:20px;
  box-shadow:
    0 0 14px 1px rgba(197,222,138,.5),
    0 0 34px 6px rgba(156,186,90,.3),
    0 12px 30px -10px rgba(7,80,36,.18);
  text-decoration:none;color:inherit;position:relative;
  transition:transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.acard:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 18px 2px rgba(197,222,138,.72),
    0 0 46px 10px rgba(156,186,90,.46),
    0 20px 44px -12px rgba(7,80,36,.24);
}
.acard:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.acard:active{transform:translateY(-1px)}
.acard-top{display:flex;align-items:center;gap:12px}
.acard-top .ic{margin-bottom:0;width:34px;height:34px;border-radius:11px}
.acard-top .ic svg{width:17px;height:17px}
.acard-kind{
  font-family:var(--font-label);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.acard h3{font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.25;margin:0}
.acard p{margin:0;font-size:15.5px;line-height:1.55;color:var(--body);flex:1}
.acard-meta{
  display:flex;flex-wrap:wrap;gap:6px 14px;padding-top:14px;
  border-top:1px dotted var(--rule);font-size:13.5px;color:var(--muted);
}
.acard-meta b{color:var(--green);font-weight:600}

/* Summary rows: label left, value right, one row per line. */
.acard-spec{margin:2px 0 0;padding-top:6px;display:block}
.acard-spec>div{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:9px 0;border-top:1px dotted var(--rule);
}
.acard-spec dt{font-size:13.5px;color:var(--muted);white-space:nowrap}
.acard-spec dd{margin:0;font-size:13.5px;font-weight:600;color:var(--ink);text-align:right}
.acard-fee{color:var(--orange) !important;font-size:15px !important}

.acard-go{
  display:inline-flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;
  color:var(--orange);
}
.acard-go svg{width:15px;height:15px;transition:transform .3s var(--ease-out)}
.acard:hover .acard-go svg{transform:translateX(4px)}

/* Bottom row of a course card. The link keeps its place on the left and the
   differentiator sits opposite it; if the pair outgrows the card the tag drops
   to its own line rather than squeezing the link. Only the two working-adult
   classes carry a tag — the IELTS card already states its promise in the title. */
.acard-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
/* Sized to clear the narrowest card the 3-up grid produces (290px inner at
   1440px). Overshooting it only costs a wrapped line, never an overflow. */
.acard-tag{
  font-size:11px;font-weight:600;line-height:1.4;color:var(--green);
  background:var(--green-5);border-radius:999px;padding:4px 9px;white-space:nowrap;
}

/* ---------------- format comparison (1-1 vs 1-4) ---------------- */
.formats{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:var(--s-5)}
.fmt{
  padding:30px 28px;border-radius:20px;background:var(--beige);
  border:1px solid var(--rule);box-shadow:var(--shadow-1);position:relative;
  display:flex;flex-direction:column;gap:14px;
}
.fmt.is-premium{border-color:rgba(7,80,36,.34);box-shadow:var(--shadow-2)}
.fmt-kind{
  font-family:var(--font-label);font-weight:700;font-size:10.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
}
.fmt h3{font-size:21px;font-weight:600;letter-spacing:-.025em;line-height:1.25;margin:0}
.fmt>p{margin:0;font-size:15.5px;line-height:1.58;color:var(--body)}
.fmt-rows{display:flex;flex-direction:column;border-top:1px dotted var(--rule)}
.fmt-row{
  display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:11px 0;border-bottom:1px dotted var(--rule);font-size:14.5px;
}
.fmt-row span{color:var(--muted)}
.fmt-row b{text-align:right;font-weight:600;color:var(--ink);line-height:1.4}
.fmt-price{
  display:block;font-family:var(--font-display);font-weight:400;
  font-size:30px;letter-spacing:-.03em;line-height:1.05;color:var(--green);
}
.fmt-price em{font-family:var(--font-sans);font-style:normal;font-size:14.5px;color:var(--muted)}
/* the monthly-instalment price: same figure, deliberately quieter than the
   discounted one so the pay-in-full option stays the headline */
.fmt-price.is-plain{font-size:26px;color:var(--body)}

/* Intake window, sitting under the section lede. Kept green and low-contrast so
   it does not compete with the orange scarcity bar further down the section. */
.sched-note{
  display:inline-flex;align-items:center;gap:10px;margin:0;
  padding:10px 18px;border-radius:999px;
  background:rgba(7,80,36,.06);border:1px solid rgba(7,80,36,.16);
  font-size:14.5px;line-height:1.45;color:var(--green);
}
.sched-note svg{width:17px;height:17px;flex:0 0 auto;opacity:.75}
.sched-note b{font-weight:600}

/* ---------------- payment switch inside a format card ----------------
   Two radios drive both the sliding thumb and which price panel shows, so the
   card needs no JS. The inputs stay focusable (clipped, not display:none). */
.fmt-pay{margin-top:auto;padding-top:4px}
.pay-r{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pay-tabs{
  position:relative;display:grid;grid-template-columns:1fr 1fr;padding:3px;
  border-radius:999px;background:rgba(7,80,36,.07);border:1px solid rgba(7,80,36,.1);
}
.pay-thumb{
  position:absolute;top:3px;left:3px;width:calc(50% - 3px);height:calc(100% - 6px);
  border-radius:999px;background:var(--page);box-shadow:var(--shadow-1);
  transition:transform .32s var(--ease-out);
}
.pay-tabs label{
  position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 8px;cursor:pointer;text-align:center;
  font-size:13px;font-weight:600;letter-spacing:-.01em;color:var(--muted);
}
.pay-tabs label i{font-style:normal;font-size:11.5px;font-weight:700;color:var(--orange)}
.pay-r:nth-of-type(2):checked ~ .pay-tabs .pay-thumb{transform:translateX(100%)}
.pay-r:nth-of-type(1):checked ~ .pay-tabs label:nth-of-type(1),
.pay-r:nth-of-type(2):checked ~ .pay-tabs label:nth-of-type(2){color:var(--green)}
.pay-r:nth-of-type(1):focus-visible ~ .pay-tabs label:nth-of-type(1),
.pay-r:nth-of-type(2):focus-visible ~ .pay-tabs label:nth-of-type(2){
  outline:2px solid var(--green);outline-offset:2px;border-radius:999px;
}
.pay-panel{display:none;margin-top:18px}
.pay-r:nth-of-type(1):checked ~ .pay-khoa,
.pay-r:nth-of-type(2):checked ~ .pay-thang{display:block}
.pay-note{margin:6px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.pay-note b{color:var(--body);font-weight:600}

/* ---------------- FAQ ---------------- */
.faq{margin-top:var(--s-5);border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{
  display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;
  padding:22px 4px;cursor:pointer;list-style:none;
  font-size:15px;font-weight:500;letter-spacing:-.02em;line-height:1.35;
  transition:background .25s var(--ease-out);
}
.faq-q::-webkit-details-marker{display:none}
.faq-q:hover{background:rgba(7,80,36,.035)}
.faq-q:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:6px}
.faq-mark{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  background:rgba(7,80,36,.07);color:var(--green);
  transition:transform .3s var(--ease), background .25s var(--ease-out);
}
.faq-mark svg{width:13px;height:13px}
.faq-item[open] .faq-mark{transform:rotate(180deg);background:var(--green);color:var(--beige)}
.faq-a{padding:0 4px 24px;max-width:74ch}
.faq-a p{margin:0;font-size:16px;line-height:1.62;color:var(--body)}
.faq-a p + p{margin-top:12px}

/* ---------------- video slots ---------------- */
.videos{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:var(--s-6)}
.vslot{
  position:relative;aspect-ratio:16/10;border-radius:20px;overflow:hidden;
  background:linear-gradient(150deg,var(--green-deep),var(--green-700));
  box-shadow:var(--shadow-2);display:grid;place-items:center;
}
.vslot::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 20%,rgba(248,154,57,.22),transparent 55%);
}
.vslot-in{position:relative;z-index:2;text-align:center;padding:24px;color:var(--beige)}
.vslot-play{
  width:56px;height:56px;border-radius:50%;margin:0 auto 16px;
  background:rgba(255,255,240,.16);border:1px solid rgba(255,255,240,.34);
  display:grid;place-items:center;backdrop-filter:blur(3px);
}
.vslot-play svg{width:20px;height:20px;margin-left:3px}
.vslot b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em}
.vslot span{display:block;font-size:14px;color:rgba(255,255,240,.68);margin-top:5px}

/* ---------------- light steps (home preview) ----------------
   A vertical rail: numbered marker on the left, copy on the right, dotted
   connector running from one marker down to the next. Reads in order at every
   width, so the layout needs no separate mobile stacking rule. */
.steps-light{counter-reset:lstep;margin-top:var(--s-6);max-width:660px}
.lstep{position:relative;padding:0 0 var(--s-5) 54px}
.lstep:last-child{padding-bottom:0}
.lstep::before{
  counter-increment:lstep;content:counter(lstep);
  position:absolute;left:0;top:0;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--green);color:var(--beige);
  font-family:var(--font-label);font-weight:700;font-size:14px;
  box-shadow:0 2px 4px rgba(7,80,36,.16), 0 8px 18px -8px rgba(7,80,36,.4);
}
/* Connector clears the marker at both ends instead of running under it. */
.lstep::after{
  content:"";position:absolute;left:17px;top:42px;bottom:6px;
  border-left:1px dotted var(--rule);
}
.lstep:last-child::after{display:none}
.lstep b{display:block;font-size:17px;font-weight:600;letter-spacing:-.02em;line-height:1.3;padding-top:6px;margin-bottom:7px}
.lstep p{margin:0;font-size:15.5px;line-height:1.55;color:var(--body)}
/* One booking calendar per class, listed under step 1. Classes whose calendar
   is not open yet stay on the list as plain text so the set reads complete. */
.lstep-links{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.lstep-links li{font-size:15px;line-height:1.45;color:var(--muted)}
.lstep-soon{
  margin-left:6px;font-family:var(--font-label);font-weight:700;font-size:10.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:var(--green-5);border-radius:999px;padding:3px 8px;white-space:nowrap;
}

/* ---------------- section head paired with a photograph ----------------
   Copy keeps its own measure on the left; the photograph sits in the empty
   right column the wide layout already leaves behind. Used on the IELTS page
   for the hero, the outcomes block and the roadmap. */
.head-media{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.62fr);
  gap:clamp(32px,5vw,80px);align-items:center;
}
.head-media>.sec-head{max-width:none}

.head-photo{
  margin:0;border-radius:20px;overflow:hidden;aspect-ratio:4/5;
  background:var(--green-5);box-shadow:var(--shadow-2);
}
.head-photo img{display:block;width:100%;height:100%;object-fit:cover}

/* Crop anchors, shared by the single frame and the overlapped pair. A portrait
   photograph dropped into the landscape frame keeps its full width and loses
   only a band of height, so these pick which band survives. */
.head-photo img.pos-high,.head-duo img.pos-high{object-position:50% 20%}   /* close portrait: keep headroom */
.head-photo img.pos-upper,.head-duo img.pos-upper{object-position:50% 40%}
.head-photo img.pos-low,.head-duo img.pos-low{object-position:50% 62%}
.head-photo img.pos-bottom,.head-duo img.pos-bottom{object-position:50% 100%}
/* group shots where she stands at one end: pull the crop toward her */
.head-photo img.pos-right,.head-duo img.pos-right{object-position:68% 50%}
/* Landscape sources lose half the group in the 4/5 crop, so the frame squares
   up instead of the picture being cut to fit it. */
.head-photo.is-square{aspect-ratio:1/1}

/* Two shots from the same room, overlapped rather than tiled — the pair reads
   as one artefact, and the tilt matches the .tphoto frames on the home page. */
.head-duo{position:relative;aspect-ratio:1/1}
.head-duo figure{
  position:absolute;margin:0;overflow:hidden;
  border-radius:16px;background:var(--green-5);box-shadow:var(--shadow-3);
  transform:rotate(var(--rot,0deg));transition:transform .35s var(--ease-out);
}
/* Each frame keeps its source orientation: cropping the group shot to a
   portrait silhouette cuts half the table out of the picture. */
.head-duo figure:nth-child(1){left:0;top:0;width:52%;aspect-ratio:4/5;--rot:-2.6deg}
.head-duo figure:nth-child(2){right:0;bottom:0;width:64%;aspect-ratio:3/2;--rot:2deg;z-index:2}
.head-duo:hover figure,.head-duo:focus-within figure{--rot:0deg}
.head-duo img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------------- responsive ---------------- */
@media (max-width:1080px){
  /* the gap has to clear the pistachio bloom, or neighbouring glows merge */
  .entry-cards{grid-template-columns:1fr 1fr;gap:22px}
  .audience{grid-template-columns:1fr 1fr}
  .teacher{grid-template-columns:340px 1fr;gap:var(--s-5)}
  .ctable-head,.ctable-row{grid-template-columns:minmax(200px,2fr) 1.2fr 1fr 1fr 40px}
  .ct-sched{display:none}
}
@media (max-width:880px){
  body{font-size:16.5px}
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  .nav:not(.is-solid){background:rgba(4,40,18,.24);backdrop-filter:blur(6px)}
  /* that scrim exists to hold white nav text over dark art — nothing to hold here */
  .hero-light .nav:not(.is-solid):not(.is-open){background:transparent;backdrop-filter:none}
  .nav.is-open{background:rgba(255,255,255,.96);backdrop-filter:saturate(1.4) blur(14px);box-shadow:var(--shadow-1)}
  .nav.is-open .brand span{color:var(--green)}
  .nav.is-open .nav-toggle{background:rgba(7,80,36,.08);color:var(--green)}

  .block{padding-block:var(--s-7)}
  .hero-actions .btn{flex:1 1 auto}
  .mock-body{grid-template-columns:1fr;min-height:0}
  .mock-scene{min-height:260px}

  /* One column, photo under the copy. Both frames keep their portrait
     silhouette — flattening them to 3/2 here cropped her head off. */
  .head-media{grid-template-columns:1fr;gap:var(--s-5)}
  .head-photo{max-width:340px}
  .head-duo{max-width:420px}

  .teacher{grid-template-columns:1fr;gap:var(--s-5)}
  /* Must stay positioned, not static: .portrait-float is absolute and relies on
     this element for its containing block. Dropping to static let it escape to
     the initial containing block and land on top of the hero. */
  .teacher-aside{position:relative;top:auto}
  .portrait{aspect-ratio:3/2}
  .philos{grid-template-columns:1fr}
  .philos-item,.philos-item:nth-child(2n){padding:32px 0;border-left:0;border-top:1px dotted var(--rule)}
  .philos-item:first-child{padding-top:0;border-top:0}
  .cred{grid-template-columns:1fr;gap:4px}

  /* table -> stacked cards */
  .ctable{border-top:0}
  .ctable-head{display:none}
  .ctable-row{
    grid-template-columns:1fr;gap:0;padding:22px;border:1px solid var(--rule);
    border-radius:18px;background:var(--beige);box-shadow:var(--shadow-1);margin-bottom:14px;
  }
  .ctable-row:hover{transform:none}
  .ct-name{margin-bottom:14px;padding-right:48px}
  /* label on the left, value + note stacked and right-aligned */
  .ct-cell{
    display:grid;grid-template-columns:auto 1fr;column-gap:16px;
    align-items:baseline;padding:11px 0;border-top:1px dotted var(--rule);
  }
  .ct-cell b,.ct-cell em{grid-column:2;text-align:right}
  .ct-sched{display:grid}
  .ct-label{
    display:block;grid-column:1;font-family:var(--font-label);font-weight:700;
    font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  }
  .ct-go{position:absolute;top:20px;right:20px}
  .ctable-row:hover .ct-go{transform:none}

  .iconlist{grid-template-columns:1fr;gap:18px}
  .note{padding-left:0;margin-top:var(--s-3);text-align:center}
  .note svg{display:none}
  /* .note-philos also carries .note, so the rule above was swallowing its arrow.
     The client wants the arrow kept on mobile, same as the laptop layout. */
  .note-philos{justify-content:center;padding-right:0}
  .note-philos svg{display:block;width:66px;height:32px}
  .frows{gap:var(--s-7);margin-top:var(--s-6)}
  .frow{grid-template-columns:1fr;gap:var(--s-4)}
  .frow.flip .frow-visual{order:0}
  /* Overlapping cards can't shrink their own text, so they collide at phone
     widths. Unstack the absolute positioning and let them flow as an offset
     column — !important is needed to beat the per-card inline geometry. */
  .compo{
    aspect-ratio:auto;display:flex;flex-direction:column;gap:15px;
    padding-inline:2px;
  }
  .compo>*{position:static !important;inset:auto !important;width:auto !important}
  .compo>*:nth-child(odd){margin-right:9%}
  .compo>*:nth-child(even){margin-left:9%}
  .compo .card-pill{align-self:flex-start;margin:0}
  .portrait-float{right:12px;bottom:-22px;width:196px}

  .trial-in{grid-template-columns:1fr;gap:var(--s-4)}
  .trial-in>*:last-child{position:static}
  .footer-in{grid-template-columns:1fr;gap:var(--s-4)}
  .factgrid{grid-template-columns:1fr}
  .fact{padding-right:0}

  .sessions{grid-template-columns:1fr;gap:0}
  .pay{grid-template-columns:1fr}
  .phase-sum{gap:14px;padding:20px 2px}
  .phase-t b{font-size:16.5px}
  .callout{grid-template-columns:1fr;gap:14px}
  .step{grid-template-columns:1fr;gap:8px}
  .step::before{padding-top:0}
  .bank div{flex-direction:column;gap:2px}
  .bank b{text-align:left}

  .pains{grid-template-columns:1fr}
  .pain{padding-right:0}
  .entry-cards{grid-template-columns:1fr;gap:22px}
  .ecard{padding:18px 18px 16px;gap:10px}
  /* The tilts stop reading as intentional once the frames stack, so drop them. */
  .tphotos{grid-template-columns:1fr;gap:26px;padding-inline:0}
  .tphoto,.tphoto:nth-child(n){--rot:0deg;margin-top:0}
  .method-head{grid-template-columns:1fr;gap:var(--s-4);margin-top:64px}
  .method-figure{justify-self:center;height:clamp(280px,66vw,360px)}
  .creds{grid-template-columns:1fr}
  .proof-two{grid-template-columns:1fr}
  .audience{grid-template-columns:1fr}
  .formats{grid-template-columns:1fr}
  /* Long labels ("Lịch cho học viên ở châu Âu") squeeze the value into three
     lines while the row stays two-column, so stack them the way .bank does. */
  .fmt-row{grid-template-columns:1fr;gap:2px;padding:10px 0}
  .fmt-row b{text-align:left}
  /* "Đóng trọn khóa −10%" wraps inside the half-width tab at this size. */
  .pay-tabs label{font-size:12px;padding:9px 4px;gap:4px}
  .videos{grid-template-columns:1fr}
  .steps-light{max-width:none}
  .lstep{padding-left:46px}
  .lstep::before{width:30px;height:30px;font-size:13px}
  .lstep::after{left:15px;top:38px}
  .lstep b{padding-top:4px}
  .faq-q{font-size:16.5px;gap:14px}
}
@media print{
  .js-reveal .reveal{opacity:1;transform:rotate(var(--rot,0deg))}
}
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
  html{scroll-behavior:auto}
  /* show everything outright rather than snapping it in */
  .js-reveal .reveal{opacity:1;transform:rotate(var(--rot,0deg))}
}