/* ==========================================================================
   Interview Geeks — stylesheet
   --------------------------------------------------------------------------
   EVERY brand colour lives in the :root block below. Change it there once and
   the whole site updates. Nothing else in this file hardcodes a brand colour.
   ========================================================================== */

:root {
  /* ---- Brand (swap these for your exact hexes) ---- */
  --brand:       #4f46e5;
  --brand-dark:  #3b32c9;
  --brand-soft:  #eef0ff;
  --accent:      #f0b429;
  --green:       #123524;
  --green-dark:  #0a2419;
  --orange:      #ee6a2e;
  --ink:         #0d1226;
  --ink-2:       #151b35;

  /* ---- Code-editor syntax palette (the hero's signature element reuses
     the site's own brand colours as syntax-highlight colours, so the
     "editor theme" and the brand palette are literally the same thing) --- */
  --code-bg:      #0a0e1f;
  --code-chrome:  #131834;
  --code-text:    #cbd2f0;
  --code-keyword: #818cf8;   /* def, return, if — tinted from --brand */
  --code-string:  #f0b429;   /* "strings" — literally --accent */
  --code-number:  #f472b6;
  --code-comment: #5b6289;
  --code-pass:    #34d399;

  /* ---- Neutrals ---- */
  --body:  #4a5268;
  --muted: #7b8399;
  --line:  #e6e8f0;
  --bg:    #ffffff;
  --alt:   #f6f7fb;
  --white: #ffffff;
  --ok:    #16a34a;
  --err:   #dc2626;

  /* ---- Type ---- */
  --display: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;
  --text:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --mono:    "JetBrains Mono", "SF Mono", Consolas, monospace;

  /* ---- Scale ---- */
  --wrap: 1180px;
  --gutter: 20px;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --sh-sm: 0 2px 10px rgba(13,18,38,.06);
  --sh: 0 12px 34px rgba(13,18,38,.09);
  --sh-lg: 0 24px 60px rgba(13,18,38,.15);
  --head-h: 76px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ============================== reset ============================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.65;
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

h1,h2,h3,h4 {
  font-family: var(--display);
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 800;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: var(--brand); text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
svg { flex: none; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--white); padding: 12px 18px;
}
.skip-link:focus { left: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ============================== layout ============================== */

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding: 84px 0; }
.section--alt { background: var(--alt); }

.head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.head h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: .35em; }
.head p { font-size: 1.05rem; color: var(--muted); }
.hl { color: var(--brand); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--brand); background: var(--brand-soft);
  border-radius: 999px; padding: 8px 16px; margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }

/* ============================== buttons ============================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--display); font-weight: 700; font-size: .95rem;
  padding: 14px 26px; border-radius: 999px; border: 2px solid transparent;
  text-align: center;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease),
              background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: none; }
.btn--primary { background: var(--brand); color: var(--white); box-shadow: 0 8px 22px rgba(79,70,229,.28); }
.btn--primary:hover { background: var(--brand-dark); }
.btn--outline { border-color: var(--line); color: var(--ink); background: var(--white); }
.btn--outline:hover { border-color: var(--brand); color: var(--brand); }
.btn--light { border-color: rgba(255,255,255,.35); color: var(--white); background: transparent; }
.btn--light:hover { background: rgba(255,255,255,.12); border-color: var(--white); }
.btn--sm { padding: 11px 20px; font-size: .875rem; }
.btn--block { width: 100%; }

/* ============================== header ============================== */

.header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
  transition: box-shadow .25s var(--ease);
}
.header.is-stuck { box-shadow: var(--sh-sm); }
.header__in { height: var(--head-h); display: flex; align-items: center; gap: 18px; }

.brand {
  display: flex; align-items: center; gap: 11px; margin-right: auto;
  color: var(--ink); font-family: var(--display); font-weight: 800;
  font-size: 1.08rem; letter-spacing: -.02em;
}
.brand__mark {
  width: 40px; height: 40px; border-radius: 11px;
  background: linear-gradient(135deg, var(--brand), var(--ink));
  color: var(--white); display: grid; place-items: center;
  font-size: .95rem; font-weight: 800;
}

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 10px;
  color: var(--ink); font-weight: 600; font-size: .95rem;
  transition: background-color .18s var(--ease), color .18s var(--ease);
}
.nav__link:hover, .nav__link.is-current { color: var(--brand); background: var(--brand-soft); }
.nav__item { position: relative; }
.nav__caret { transition: transform .2s var(--ease); }
.nav__item.is-open .nav__caret { transform: rotate(180deg); }

.drop {
  position: absolute; top: calc(100% + 10px); left: 0;
  min-width: 150px; width: max-content;          /* was: min-width: 274px */
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r); box-shadow: var(--sh); padding: 6px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all .22s var(--ease);
}
.nav__item.is-open .drop, .nav__item:hover .drop { opacity: 1; visibility: visible; transform: none; }
.drop a { display: block; padding: 9px 12px; border-radius: 9px; color: var(--ink); font-weight: 600; font-size: .93rem; }
.drop a small { display: block; font-weight: 400; font-size: .78rem; color: var(--muted); margin-top: 2px; }
.drop a:hover { background: var(--brand-soft); color: var(--brand); }

.burger {
  display: none; width: 44px; height: 44px; padding: 0; position: relative;
  border: 1px solid var(--line); border-radius: 11px; background: var(--white);
}
.burger span {
  position: absolute; left: 50%; width: 19px; height: 2px;
  background: var(--ink); border-radius: 2px; transform: translateX(-50%);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }
.drawer {
  position: fixed;
  inset: var(--head-h) 0 0;
  z-index: 99;
  display: none;
  background: var(--white);
  padding: 22px var(--gutter) 40px;
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .3s var(--ease);
}

.drawer.is-open {
  transform: none;
}

/* Used by both <a> and <button>, so it carries its own button reset.
   Do NOT add `font: inherit` here or in any later .drawer__toggle rule —
   it out-cascades the display font below and the item renders lighter and
   smaller than its siblings. */
.drawer__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 16px 4px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: none;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.05rem;
  transition: color .18s var(--ease);
}

.drawer__link:hover {
  color: var(--brand);
}

.drawer__link.is-current {
  color: var(--brand);
}

/* the caret on the expandable item */
.drawer__link .nav__caret {
  flex: none;
  color: var(--muted);
  transition: transform .25s var(--ease);
}

.drawer__link[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
  color: var(--brand);
}

/* Collapsible sub-menu. max-height must comfortably EXCEED the real content
   height or the last item is clipped — four links at ~51px each is ~204px,
   which the old 200px cut off. It only affects the animation, so an
   over-estimate is safe. */
.drawer__sub {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s var(--ease);
}

.drawer__sub.is-open {
  max-height: 30rem;
}

.drawer__sub a {
  display: block;
  padding: 13px 4px 13px 18px;
  border-bottom: 1px solid var(--line);
  color: var(--body);
  font-weight: 600;
  font-size: .95rem;
  transition: color .18s var(--ease);
}

.drawer__sub a:hover {
  color: var(--brand);
}

.drawer .btn {
  margin-top: 26px;
}
.nav__toggle {
  border: 0;
  background: none;
  cursor: pointer;
  /* Deliberately no `font` declaration here — the `button { font: inherit }`
     reset already handles it, and re-declaring it out-cascades the display
     font so the Courses toggle renders lighter than its sibling nav links. */
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
/* ============================== hero ============================== */

.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--ink); color: rgba(255,255,255,.78);
  padding: 88px 0 76px;
}
.hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(90px); z-index: -1; }
.hero::before { width: 520px; height: 520px; background: rgba(79,70,229,.45); top: -180px; right: -120px; }
.hero::after { width: 420px; height: 420px; background: rgba(245,185,51,.16); bottom: -220px; left: -140px; }
.hero__grid {
  position: absolute; inset: 0; z-index: -1;
  background-image:
    linear-gradient(rgba(255,255,255,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, #000 20%, transparent 75%);
}

.hero__split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }
.hero__in { max-width: 620px; }
.hero .eyebrow { color: var(--white); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.18); }
.hero .eyebrow::before { background: var(--accent); }
.hero h1 { color: var(--white); font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.1; margin-bottom: .35em; text-align: left; }
.hero h1 .l2 { display: block; color: var(--accent); }
.hero__lede { font-size: clamp(1rem, 1.6vw, 1.1rem); max-width: 560px; margin: 0 0 30px; color: rgba(255,255,255,.74); text-align: left; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 0; }
.hero .btn-row { justify-content: flex-start; margin-bottom: 30px; }

.hero__proof {
  display: flex; flex-wrap: wrap; gap: 20px 28px; align-items: center;
  padding-top: 22px; border-top: 1px solid rgba(255,255,255,.14);
}
.hero__proof span {
  display: flex; align-items: baseline; gap: 6px; font-size: .88rem; color: rgba(255,255,255,.6);
}
.hero__proof b { font-family: var(--mono); font-weight: 700; color: var(--white); font-size: 1.05rem; }

/* ---- signature element: the interview code card ---- */
.code-card {
  background: var(--code-chrome); border-radius: var(--r-lg); overflow: hidden;
  box-shadow: 0 30px 70px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.06);
  font-family: var(--mono); font-size: .84rem; line-height: 1.7;
}
.code-card__bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: rgba(255,255,255,.04); }
.code-card__dot { width: 11px; height: 11px; border-radius: 50%; }
.code-card__dot:nth-child(1) { background: #ff5f57; }
.code-card__dot:nth-child(2) { background: #febc2e; }
.code-card__dot:nth-child(3) { background: #28c840; }
.code-card__file {
  margin-left: 10px; font-size: .78rem; color: rgba(255,255,255,.4); font-family: var(--mono);
}
.code-card__body { background: var(--code-bg); padding: 20px 22px; color: var(--code-text); overflow-x: auto; }
.code-card__body .ln { display: inline-block; width: 1.4em; color: var(--code-comment); user-select: none; }
.code-card .kw { color: var(--code-keyword); }
.code-card .str { color: var(--code-string); }
.code-card .num { color: var(--code-number); }
.code-card .cm { color: var(--code-comment); font-style: italic; }
.code-card__footer {
  display: flex; align-items: center; gap: 8px; padding: 12px 22px; background: rgba(52,211,153,.08);
  border-top: 1px solid rgba(52,211,153,.18); color: var(--code-pass); font-size: .8rem; font-weight: 600;
}
.code-card__footer::before { content: "✓"; font-weight: 800; }

@media (max-width: 980px) {
  .hero__split { grid-template-columns: 1fr; }
  .hero__in { max-width: 560px; margin: 0 auto; }
  .hero h1, .hero__lede { text-align: center; }
  .hero .btn-row { justify-content: center; }
  .hero__proof { justify-content: center; }
  .code-card { transform: none; max-width: 480px; margin: 0 auto; }
}
@media (max-width: 560px) {
  .hero__proof { gap: 14px 20px; }
}

/* ============================== module tags (code-styled) ============================== */

.mod-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.mod-tag {
  font-family: var(--mono); font-size: .78rem; font-weight: 600; color: var(--brand);
  background: var(--brand-soft); border-radius: 6px; padding: 4px 10px;
}

/* ============================== bento feature grid ============================== */

/* Five tiles across a 3x2 grid: the feature tile takes two cells on row one,
   the remaining four fill the rest. Every tile is one row tall, so the section
   is roughly half the height of the old 2x2 hero-tile layout. */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(196px, auto); gap: 18px; }
.bento-tile {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.bento-tile:hover { transform: translateY(-4px); box-shadow: var(--sh); border-color: transparent; }
.bento-tile h3 { font-size: 1rem; margin-bottom: .35em; }
.bento-tile p { font-size: .87rem; color: var(--muted); }

/* The base .icon-box rule sets `margin: 0 auto 16px`, which centres the icon
   while the heading below it is left-aligned. Pin it left so each tile reads
   as a single column. */
.bento-tile .icon-box { margin: 0 0 14px; }

.bento-tile--lg {
  grid-column: span 2; grid-row: span 1;
  background:
    radial-gradient(130% 130% at 100% 0%, rgba(79, 70, 229, .45) 0%, transparent 60%),
    var(--ink);
  color: rgba(255,255,255,.8); border: none;
  padding: 30px 32px;
  /* Icon beside the text rather than above it, which keeps this tile to a
     single row and leaves no vertical gap to fill. */
  flex-direction: row; align-items: center; gap: 24px; justify-content: flex-start;
}
.bento-tile--lg .icon-box { margin: 0; flex: none; background: rgba(255,255,255,.1); color: var(--accent); }
.bento-tile--lg h3 { color: var(--white); font-size: 1.35rem; line-height: 1.25; margin-bottom: .35em; }
.bento-tile--lg p { color: rgba(255,255,255,.66); font-size: .92rem; }

@media (max-width: 980px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .bento-tile--lg { grid-column: span 2; }
}
@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .bento-tile--lg { grid-column: span 1; flex-direction: column; align-items: flex-start; gap: 0; padding: 26px; }
  .bento-tile--lg .icon-box { margin-bottom: 14px; }
}

/* ============================== static testimonial video grid ============================== */

.vgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.vgrid .vcard { flex: none; width: 100%; aspect-ratio: 16/9; }

@media (max-width: 640px) { .vgrid { grid-template-columns: 1fr; } }

/* ============================== proof strip (pricing) ============================== */

.proof-strip {
  display: flex; align-items: center; gap: 18px; background: var(--brand-soft);
  border-radius: var(--r); padding: 20px 26px; margin-top: 28px;
}
.proof-strip__stars { color: var(--accent); flex: none; display: flex; gap: 2px; }
.proof-strip p { margin: 0; font-size: .92rem; color: var(--ink); }
.proof-strip strong { font-family: var(--mono); }
@media (max-width: 640px) { .proof-strip { flex-direction: column; align-items: flex-start; } }

/* ============================== programs ============================== */

.programs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }

.pcard {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 34px 30px; display: flex; flex-direction: column;
  transition: transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.pcard:hover { transform: translateY(-6px); box-shadow: var(--sh); border-color: transparent; }
.pcard h3 { font-size: 1.5rem; margin-bottom: .3em; }
.pcard__tags { font-size: .82rem; font-weight: 700; color: var(--brand); margin-bottom: 16px; }
.pcard__desc { margin-bottom: 22px; }
.pcard .btn { margin-top: auto; }

.meta {
  display: grid; gap: 10px; margin-bottom: 22px; padding: 18px 0;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.meta li { display: flex; align-items: center; gap: 11px; font-size: .92rem; font-weight: 600; color: var(--ink); }
.meta svg { color: var(--brand); }

.ticks { display: grid; gap: 11px; margin-bottom: 28px; }
.ticks li { display: flex; align-items: flex-start; gap: 11px; font-size: .93rem; }
.ticks li::before {
  content: ""; flex: none; width: 19px; height: 19px; margin-top: 3px; border-radius: 50%;
  background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.nudge { margin-top: 44px; text-align: center; padding: 30px; background: var(--brand-soft); border-radius: var(--r); }
.nudge p { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: 1.1rem; margin-bottom: 16px; }

/* ============================== video carousel ============================== */

.carousel { position: relative; }
.carousel__track {
  display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; padding-bottom: 14px; scrollbar-width: none;
}

/* The looping carousel advances scrollLeft a fraction of a pixel per frame.
   Snap points drag it straight back to the nearest card, so the track never
   moves — turn snapping and native smoothing off for the auto-scrolling
   variant only. The prev/next buttons pass behavior:"smooth" to scrollBy
   themselves, so those keep animating. */
.carousel--loop .carousel__track {
  scroll-snap-type: none;
  scroll-behavior: auto;
}

.vcard {
  position: relative; flex: 0 0 min(340px, 78vw); scroll-snap-align: start;
  aspect-ratio: 16 / 9; border: 0; padding: 0; overflow: hidden;
  border-radius: var(--r); background: var(--ink); box-shadow: var(--sh-sm);
}
.vcard img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease), opacity .3s var(--ease); }
.vcard:hover img { transform: scale(1.05); opacity: .8; }
.vcard iframe { width: 100%; height: 100%; border: 0; }
.vcard__play { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.vcard__play i {
  width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.94);
  display: grid; place-items: center; box-shadow: 0 6px 22px rgba(0,0,0,.3);
  color: var(--brand); transition: transform .25s var(--ease);
}
.vcard:hover .vcard__play i { transform: scale(1.1); }

.carousel__nav { display: flex; gap: 10px; justify-content: center; margin-top: 22px; }
.carousel__btn {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--white); color: var(--ink); display: grid; place-items: center;
  transition: all .2s var(--ease);
}
.carousel__btn:hover { background: var(--brand); color: var(--white); border-color: var(--brand); }

/* ---- continuous loop variant ---- */
.carousel--loop {
  overflow: hidden;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/* ---- video lightbox ---- */
.vbox {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: 20px;
  background: rgba(13,18,38,.84);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.vbox.is-open { opacity: 1; visibility: visible; }
.vbox__inner {
  position: relative;
  width: min(920px, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--sh-lg);
  transform: scale(.96);
  transition: transform .25s var(--ease);
}
.vbox.is-open .vbox__inner { transform: none; }
.vbox__inner iframe { width: 100%; height: 100%; border: 0; display: block; }
.vbox__close {
  position: absolute; top: -54px; right: 0;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.12); color: #fff;
  display: grid; place-items: center;
  transition: background-color .2s var(--ease);
}
.vbox__close:hover { background: rgba(255,255,255,.26); }
@media (max-width: 760px) {
  .vbox__close { top: auto; bottom: -56px; right: 50%; transform: translateX(50%); }
}

/* ============================== testimonials ============================== */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 56px; }
.quote {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px; margin: 0;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.quote:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.quote__who { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }
.avatar {
  width: 52px; height: 52px; flex: none; border-radius: 50%;
  background: var(--brand-soft); color: var(--brand);
  display: grid; place-items: center;
  font-family: var(--display); font-weight: 800; font-size: 1.05rem;
}
.quote__name { font-family: var(--display); font-weight: 800; color: var(--ink); font-size: 1.02rem; }
.quote__role { font-size: .84rem; color: var(--muted); }
.quote__text { margin: 0; font-size: .95rem; }
.stars { display: flex; gap: 3px; color: var(--accent); margin-bottom: 12px; }

/* ============================== feature tiles ============================== */

.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.feature {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 24px; text-align: center;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.feature:hover { transform: translateY(-5px); box-shadow: var(--sh); border-color: transparent; }
.icon-box {
  width: 56px; height: 56px; margin: 0 auto 16px; border-radius: 15px;
  background: var(--brand-soft); color: var(--brand); display: grid; place-items: center;
}
.feature h3 { font-size: 1.02rem; margin-bottom: .4em; }
.feature p { font-size: .88rem; color: var(--muted); }

.plus-line {
  margin-top: 44px; text-align: center; padding: 20px 24px; border-radius: var(--r);
  background: var(--ink); color: rgba(255,255,255,.85); font-size: .95rem; font-weight: 600;
}
.plus-line b { color: var(--accent); }

/* ============================== CTA band ============================== */

.cta {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  background: var(--ink); color: rgba(255,255,255,.78); padding: 84px 0;
}
.cta::before {
  content: ""; position: absolute; width: 620px; height: 620px; border-radius: 50%;
  background: rgba(79,70,229,.38); filter: blur(100px);
  top: -280px; left: 50%; transform: translateX(-50%); z-index: -1;
}
.cta h2 { color: var(--white); font-size: clamp(1.8rem, 4.4vw, 2.7rem); }
.cta p { max-width: 560px; margin: 0 auto 30px; color: rgba(255,255,255,.72); }
/* Scoped to .cta so it outranks the `.cta p` rule above — that rule matches
   this element too, and its margin shorthand was zeroing the top gap. */
.cta .batch-note {
  margin: 28px auto 0;
  max-width: none;
  display: inline-flex; align-items: center; gap: 9px;
  font-size: .88rem; padding: 10px 20px; border-radius: 999px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.88);
}
.batch-note b { color: var(--accent); }
.dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 0 rgba(22,163,74,.7); animation: pulse 2s infinite;
}
@keyframes pulse {
  70%  { box-shadow: 0 0 0 10px rgba(22,163,74,0); }
  100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); }
}

/* ============================== footer ============================== */

.footer { background: var(--ink-2); color: rgba(255,255,255,.62); padding: 64px 0 0; font-size: .92rem; }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.4fr; gap: 40px; padding-bottom: 48px; }
.footer h3 { color: var(--white); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 20px; }
.footer .brand { color: var(--white); margin: 0 0 16px; }
.footer ul { display: grid; gap: 12px; }
.footer a { color: rgba(255,255,255,.62); }
.footer a:hover { color: var(--white); }
.socials { display: flex; gap: 10px; margin-top: 20px; }
.socials a {
  width: 40px; height: 40px; border-radius: 11px; background: rgba(255,255,255,.08);
  display: grid; place-items: center; color: rgba(255,255,255,.8); transition: all .2s var(--ease);
}
.socials a:hover { background: var(--brand); color: var(--white); }
.footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 22px 0; text-align: center; font-size: .85rem; }

/* ============================== inner page hero ============================== */

.phero {
  position: relative; isolation: isolate; overflow: hidden; text-align: center;
  background: var(--ink); color: rgba(255,255,255,.76); padding: 76px 0 84px;
}
.phero::before {
  content: ""; position: absolute; width: 700px; height: 500px; border-radius: 50%;
  background: rgba(79,70,229,.4); filter: blur(110px);
  top: -240px; left: 50%; transform: translateX(-50%); z-index: -1;
}
.phero h1 { color: var(--white); font-size: clamp(2.1rem, 5.4vw, 3.3rem); }
.phero__lede { max-width: 620px; margin: 0 auto 40px; color: rgba(255,255,255,.72); font-size: 1.05rem; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 880px; margin: 0 auto 40px; }
.stat {
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13);
  border-radius: var(--r); padding: 20px 14px;
}
.stat b { display: block; font-family: var(--mono); font-weight: 700; font-size: 1.45rem; color: var(--white); line-height: 1.2; }
.stat span { font-size: .82rem; color: rgba(255,255,255,.62); }

/* ============================== hero3 (new centered hero) ============================== */
.hero3 { position: relative; isolation: isolate; overflow: hidden; text-align: center; background: var(--ink); padding: 88px 0 56px; }
.hero3__grid {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 40%, transparent 100%);
}
.hero3::before { content: ""; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: rgba(79,70,229,.45); filter: blur(90px); top: -180px; right: -120px; z-index: -1; }
.hero3::after { content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(245,185,51,.16); filter: blur(90px); bottom: -220px; left: -140px; z-index: -1; }
.hero3 h1 { font-family: var(--display); font-weight: 800; line-height: 1.08; font-size: clamp(2.2rem, 5vw, 3.6rem); color: var(--white); margin-bottom: .3em; }
.hero3 h1 .hl { display: block; color: var(--accent); }
.hero3__lede { max-width: 640px; margin: 0 auto 34px; color: rgba(255,255,255,.74); font-size: 1.05rem; line-height: 1.6; }
.hero3 .btn-row { justify-content: center; margin-bottom: 56px; }

.btn--green { background: var(--green); color: var(--white); box-shadow: 0 8px 22px rgba(18,53,36,.22); }
.btn--green:hover { background: var(--green-dark); }
.btn--ghost { background: var(--white); color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--ink); }

.hero3__stats { display: flex; justify-content: center; max-width: 900px; margin: 0 auto; padding-top: 32px; border-top: 1px solid rgba(255,255,255,.15); }
.hero3__stats .stat3 { flex: 1; padding: 0 20px; border-left: 1px solid rgba(255,255,255,.15); }
.hero3__stats .stat3:first-child { border-left: none; }
.stat3 b { display: block; font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 1.9rem); color: var(--white); }
.stat3 span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.62); }

@media (max-width: 640px) {
  .hero3__stats { flex-wrap: wrap; row-gap: 20px; }
  .hero3__stats .stat3 { flex: 0 0 50%; border-left: none; }
}

/* ============================== marquee ============================== */

.marquee {
  overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; gap: 18px; width: max-content; animation: marquee 34s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.logo-chip {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 168px; height: 74px; padding: 0 22px;
  background: var(--white); border: 1px solid var(--line); border-radius: 14px;
  font-family: var(--display); font-weight: 700; font-size: .95rem; color: var(--ink);
}
.logo-chip img { height: 26px; width: auto; max-width: 92px; object-fit: contain; }

/* ============================== curriculum phases ============================== */

.phases { display: grid; gap: 24px; }
.phase {
  position: relative; background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px 30px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.phase:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.phase::after {
  content: ""; position: absolute; left: 30px; right: 30px; top: 0; height: 4px;
  border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--brand), var(--accent));
}
.phase__label {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--brand); background: var(--brand-soft);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 16px;
}
.phase h3 { font-size: 1.24rem; margin-bottom: 18px; }
.phase .ticks { margin-bottom: 22px; }
.phase__out { border-top: 1px dashed var(--line); padding-top: 18px; font-size: .92rem; }
.phase__out strong {
  display: block; color: var(--brand); font-family: var(--display);
  font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; margin-bottom: 5px;
}
.phase__out span { color: var(--ink); font-weight: 600; }

/* module color variants — same DSA/LLD/HLD/Behavioural coding used in the hero and bento grid */
.phase--dsa::after { background: #2563eb; }
.phase--dsa .phase__label { color: #2563eb; background: #dbeafe; }
.phase--lld::after { background: #059669; }
.phase--lld .phase__label { color: #059669; background: #d1fae5; }
.phase--hld::after { background: #7c3aed; }
.phase--hld .phase__label { color: #7c3aed; background: #ede9fe; }
.phase--behavioural::after { background: #ea580c; }
.phase--behavioural .phase__label { color: #ea580c; background: #ffedd5; }

.phase__sub { font-size: .8rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 18px 0 8px; }
.phase__sub:first-of-type { margin-top: 0; }
.phase__price { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px dashed var(--line); font-family: var(--mono); font-size: .85rem; }
.phase__price b { font-size: 1rem; }

/* ============================== components ============================== */

.components { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.component {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 26px; display: flex; gap: 16px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.component:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.component .icon-box { width: 46px; height: 46px; margin: 0; border-radius: 13px; }
.component h3 { font-size: 1rem; margin-bottom: .3em; }
.component p { font-size: .88rem; color: var(--muted); }

/* ============================== instructor ============================== */

.instructor { display: grid; grid-template-columns: 340px 1fr; gap: 52px; align-items: center; }
.photo-wrap { position: relative; }
.photo {
  width: 100%; aspect-ratio: 4 / 5; border-radius: var(--r-lg);
  background: linear-gradient(150deg, var(--brand), var(--ink));
  display: grid; place-items: center; padding: 20px; text-align: center;
  color: rgba(255,255,255,.6); font-family: var(--display); font-weight: 700; font-size: .85rem;
  object-fit: cover; box-shadow: var(--sh);
}
.photo-badge {
  position: absolute; bottom: -16px; right: -12px;
  background: var(--accent); color: var(--ink);
  font-family: var(--display); font-weight: 800; font-size: .9rem;
  padding: 11px 20px; border-radius: 999px; box-shadow: var(--sh-sm);
}
.instructor h2 { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-bottom: .2em; }
.role { color: var(--brand); font-weight: 700; margin-bottom: 18px; }
.pills { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 26px; }
.pill {
  font-size: .82rem; font-weight: 700; color: var(--ink);
  background: var(--alt); border: 1px solid var(--line);
  padding: 7px 15px; border-radius: 999px;
}
.counters {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  padding: 24px 0; margin-bottom: 26px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.counters b {
  display: block; font-family: var(--mono); font-weight: 700;
  font-size: clamp(1.7rem, 4vw, 2.3rem); color: var(--brand); line-height: 1.1;
}
.counters span { font-size: .85rem; color: var(--muted); }

/* ============================== about ============================== */

.split { display: grid; grid-template-columns: 380px 1fr; gap: 56px; align-items: start; }
.split h2 { font-size: clamp(1.6rem, 3.6vw, 2.2rem); }
.callout {
  background: var(--brand-soft); border-left: 4px solid var(--brand);
  border-radius: 0 var(--r-sm) var(--r-sm) 0; padding: 18px 22px;
  color: var(--ink); font-weight: 600;
}
.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 28px;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--sh); }
.card .icon-box { width: 52px; height: 52px; margin: 0 0 18px; border-radius: 14px; }
.card h3 { font-size: 1.05rem; margin-bottom: .4em; }
.card p { font-size: .89rem; color: var(--muted); }

/* ============================== blog ============================== */

.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.post {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.post:hover { transform: translateY(-6px); box-shadow: var(--sh); }
.post__thumb {
  aspect-ratio: 16 / 9; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--ink));
  color: rgba(255,255,255,.65); font-family: var(--display); font-weight: 700;
}
.post__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.tag {
  align-self: flex-start; font-size: .74rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--brand); background: var(--brand-soft);
  padding: 6px 13px; border-radius: 999px; margin-bottom: 14px;
}
.post h2 { font-size: 1.2rem; margin-bottom: .45em; }
.post p { font-size: .92rem; color: var(--muted); margin-bottom: 20px; }
.post__meta {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--muted);
}
.post__meta a { font-weight: 700; }

/* ============================== modal + form ============================== */

.modal {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px;
  background: rgba(13,18,38,.62); backdrop-filter: blur(4px);
  opacity: 0; visibility: hidden; transition: opacity .25s var(--ease), visibility .25s var(--ease);
}
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box {
  position: relative; background: var(--white); border-radius: var(--r-lg);
  width: min(520px, 100%); max-height: 90vh; overflow-y: auto; padding: 34px;
  box-shadow: var(--sh-lg); transform: translateY(16px) scale(.98);
  transition: transform .25s var(--ease);
}
.modal.is-open .modal__box { transform: none; }
.modal__close {
  position: absolute; top: 16px; right: 16px; width: 38px; height: 38px;
  border-radius: 50%; border: 1px solid var(--line); background: var(--white);
  color: var(--body); display: grid; place-items: center;
}
.modal__close:hover { background: var(--alt); color: var(--ink); }
.modal h2 { font-size: 1.4rem; margin-bottom: .2em; }
.modal__sub { font-size: .92rem; color: var(--muted); margin-bottom: 24px; }

.field { margin-bottom: 9px; }
.field label { display: block; font-size: .85rem; font-weight: 700; color: var(--ink); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; padding: 13px 15px; border: 1px solid var(--line); border-radius: var(--r-sm);
  font: inherit; font-size: .95rem; color: var(--ink); background: var(--white);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.field input:focus, .field select:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft);
}
.field .err {
  display: block;                 /* always occupies space, so nothing shifts */
  visibility: hidden;
  min-height: 1.1em;
  font-size: .8rem; color: var(--err); margin-top: 6px;
}
.field.is-bad input, .field.is-bad select { border-color: var(--err); }
.field.is-bad .err { visibility: visible; }
.form-note { font-size: .8rem; color: var(--muted); text-align: center; margin-top: 14px; }
.form-note--error { color: #dc2626; font-weight: 600; }
.link-btn {
  background: none; border: 0; padding: 0; color: var(--brand); font-weight: 700;
  font-size: inherit; cursor: pointer; text-decoration: underline;
}
.link-btn:disabled { color: var(--muted); text-decoration: none; cursor: default; }
#resend-cooldown { color: var(--muted); }
.form-done { display: block; text-align: center; padding: 20px 0; }
.form-done[hidden] { display: none; }
.form-done .tick {
  width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 50%;
  background: var(--ok); color: var(--white); display: grid; place-items: center;
}

/* ============================== whatsapp fab ============================== */

/* .fab {
  position: fixed; right: 20px; bottom: 20px; z-index: 90;
  width: 56px; height: 56px; border-radius: 50%;
  background: #25d366; color: var(--white); display: grid; place-items: center;
  box-shadow: 0 8px 24px rgba(37,211,102,.4); transition: transform .25s var(--ease);
}
.fab:hover { transform: scale(1.08); } */

/* ============================== reveal ============================== */

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.reveal.is-on { opacity: 1; transform: none; }

/* ============================== legal pages ============================== */

.legal { max-width: 740px; margin: 0 auto; }
.legal__updated {
  display: inline-block; font-size: .85rem; color: var(--muted);
  background: var(--alt); border: 1px solid var(--line);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 36px;
}
.legal h2 { font-size: 1.35rem; margin-top: 2.4em; scroll-margin-top: calc(var(--head-h) + 20px); }
.legal h2:first-of-type { margin-top: 0; }
.legal p, .legal li { font-size: .97rem; }
.legal ul { margin: 0 0 1.2em; padding-left: 1.3em; list-style: disc; }
.legal li { margin-bottom: .55em; }
.legal a { text-decoration: underline; text-underline-offset: 2px; }

.legal__toc {
  background: var(--alt); border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 26px; margin-bottom: 44px;
}
.legal__toc p {
  font-family: var(--display); font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 14px;
}
.legal__toc ol { columns: 2; column-gap: 28px; margin: 0; padding-left: 1.2em; }
.legal__toc li { margin-bottom: 9px; break-inside: avoid; font-size: .92rem; }
.legal__toc a { color: var(--ink); font-weight: 600; text-decoration: none; }
.legal__toc a:hover { color: var(--brand); text-decoration: underline; }

@media (max-width: 680px) {
  .legal__toc ol { columns: 1; }
}

/* ============================== how it works (homepage) ============================== */

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.step {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r);
  padding: 28px 22px; text-align: center; position: relative;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.step__num {
  width: 40px; height: 40px; border-radius: 50%; background: var(--brand); color: var(--white);
  display: flex; align-items: center; justify-content: center; font-family: var(--display);
  font-weight: 800; font-size: 1.05rem; margin: 0 auto 16px;
}
.step h3 { font-size: 1rem; margin-bottom: .4em; }
.step p { font-size: .88rem; color: var(--muted); }

@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ============================== program spotlight (homepage) ============================== */

.program-spotlight { display: grid; grid-template-columns: 1.6fr 1fr; gap: 28px; align-items: stretch; }

.spotlight-main {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 38px; display: flex; flex-direction: column;
}
.spotlight-main h3 { font-size: 1.5rem; margin-bottom: .3em; }
.spotlight-main .pcard__tags { margin-bottom: 16px; }
.spotlight-main .ticks { margin-bottom: 26px; }
.spotlight-main .btn-row { margin-top: auto; }

.spotlight-snapshot {
  background: var(--ink); color: rgba(255,255,255,.85); border-radius: var(--r-lg);
  padding: 32px 30px; display: flex; flex-direction: column; justify-content: center;
}
.spotlight-snapshot h4 {
  color: var(--white); font-family: var(--display); font-weight: 800; font-size: 1rem;
  margin-bottom: 6px;
}
.spotlight-snapshot > p:first-of-type { color: rgba(255,255,255,.55); font-size: .85rem; margin-bottom: 20px; }

.snapshot-tier {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.14);
}
.snapshot-tier:last-of-type { border-bottom: none; }
.snapshot-tier__name { font-weight: 800; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.snapshot-tier--pro .snapshot-tier__name { color: #a5b4fc; }
.snapshot-tier--elite .snapshot-tier__name { color: var(--accent); }
.snapshot-tier__price { font-family: var(--mono); font-weight: 700; font-size: 1.3rem; color: var(--white); }

.spotlight-snapshot .price-note { color: rgba(255,255,255,.5); font-size: .8rem; margin: 16px 0 22px; }
.spotlight-snapshot .btn { width: 100%; }

@media (max-width: 900px) {
  .program-spotlight { grid-template-columns: 1fr; }
}

/* ============================== pricing ============================== */

.price-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.price-table {
  width: 100%; border-collapse: collapse; min-width: 560px;
  background: var(--white); border-radius: var(--r); overflow: hidden; box-shadow: var(--sh-sm);
}
.price-table th, .price-table td { padding: 16px 20px; text-align: center; font-size: .95rem; border-bottom: 1px solid var(--line); }
.price-table th:first-child, .price-table td:first-child { text-align: left; font-weight: 700; color: var(--ink); }
.price-table thead th {
  font-family: var(--display); font-weight: 800; font-size: .85rem; letter-spacing: .03em;
  color: var(--white); background: var(--ink); border-bottom: none;
}
.price-table thead th.tier-pro { background: var(--brand); }
.price-table thead th.tier-elite { background: var(--accent); color: var(--ink); }
.price-table td.tier-pro { background: var(--brand-soft); color: var(--brand-dark); font-weight: 700; font-family: var(--mono); }
.price-table td.tier-elite { background: #fff6e0; color: #8a5a00; font-weight: 700; font-family: var(--mono); }
.price-table tr.price-bundle td { background: #f1effe; }
.price-table tr.price-bundle td:first-child { color: var(--brand); font-weight: 800; }
.price-table tr:last-child td { border-bottom: none; }

.tier-badge {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; margin-bottom: 8px;
}
.tier-badge--pro { background: var(--brand-soft); color: var(--brand); }
.tier-badge--elite { background: #fff6e0; color: #8a5a00; }

.price-note { font-size: .88rem; color: var(--muted); margin-top: 14px; }

.plan-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .plan-cards { grid-template-columns: repeat(2, 1fr); } }

.plan-card {
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-lg); padding: 30px;
  text-align: center; transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--sh); }
.plan-card--elite { border-color: var(--accent); }
.plan-card h3 { font-size: 1.15rem; margin-bottom: 2px; }
.plan-card__price { font-family: var(--mono); font-weight: 700; font-size: 1.9rem; color: var(--ink); margin: 8px 0 2px; }
.plan-card__price span { font-size: .92rem; font-weight: 600; color: var(--muted); }
.plan-card p.plan-card__desc { font-size: .89rem; color: var(--muted); margin-bottom: 20px; }

/* FAQ accordion — native <details>/<summary>, no JS required */
.faq-list { max-width: 780px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 12px; overflow: hidden; background: var(--white); }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 22px; font-family: var(--display); font-weight: 700;
  color: var(--ink); font-size: .98rem; display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.3rem; color: var(--brand); flex: none; transition: transform .2s var(--ease); }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item__body { padding: 0 22px 20px; color: var(--body); font-size: .93rem; line-height: 1.65; }

/* homepage pricing teaser strip */
.price-teaser {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: linear-gradient(120deg, var(--brand-soft), #fff6e0);
  border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px 32px; margin-top: 44px;
}
.price-teaser__text strong { display: block; font-family: var(--display); font-size: 1.15rem; color: var(--ink); margin-bottom: 4px; }
.price-teaser__text span { color: var(--muted); font-size: .92rem; }

@media (max-width: 680px) {
  .plan-cards { grid-template-columns: 1fr; }
  .price-teaser { flex-direction: column; align-items: flex-start; text-align: left; }
}

/* ============================== responsive ============================== */

@media (min-width: 861px) {
  .phases { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1040px) {
  .features { grid-template-columns: repeat(3, 1fr); }
  .instructor { grid-template-columns: 280px 1fr; gap: 36px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 34px; }
}

@media (max-width: 900px) {
  .nav, .header .btn { display: none; }
  .burger, .drawer { display: block; }
  .quotes, .components, .cards-3, .posts { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 34px; }
}

@media (max-width: 860px) {
  .section { padding: 62px 0; }
  .programs { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .instructor { grid-template-columns: 1fr; gap: 44px; }
  .photo-wrap { max-width: 300px; margin: 0 auto; }
  .photo-badge { right: 8px; }
  .hero { padding: 72px 0 80px; }
}

@media (max-width: 680px) {
  :root { --gutter: 18px; --head-h: 68px; }
  .features, .quotes, .components, .cards-3, .posts { grid-template-columns: 1fr; }
  .head { margin-bottom: 34px; }
  .btn-row { flex-direction: column; }
  .btn-row .btn { width: 100%; }
  .pcard, .phase { padding: 26px 22px; }
  .modal__box { padding: 26px 22px; }
  .footer__grid { grid-template-columns: 1fr; gap: 30px; }
  .counters { gap: 10px; }
  .plus-line { font-size: .86rem; line-height: 1.9; }
}

@media (max-width: 400px) {
  .stats { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}
/* ==========================================================================
   FIX 1 — button alignment
   .btn-row is display:flex, so `text-align:center` on the parent does nothing
   to it. Every centred band was therefore rendering its buttons hard left.
   ========================================================================== */
.cta .btn-row,
.phero .btn-row,
.nudge .btn-row,
.head .btn-row      { justify-content: center; }
.cta .btn-row       { margin-top: 4px; }

/* ==========================================================================
   FIX 2 — pricing option tabs inside the snapshot card
   Pro / Elite / 1:1 Sessions
   ========================================================================== */
.tiertabs {
  display: flex; gap: 6px; margin: 18px 0 20px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px; padding: 5px;
}
.tiertab {
  flex: 1; padding: 9px 6px; border: 0; border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.62);
  font-family: var(--display); font-weight: 700; font-size: .82rem;
  cursor: pointer; white-space: nowrap;
  transition: background-color .22s var(--ease), color .22s var(--ease);
}
.tiertab:hover { color: var(--white); }
.tiertab.is-active { background: var(--white); color: var(--ink); }
.tiertab:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* All three panels share one grid cell, so the card is always as tall as the
   tallest panel and switching tabs never resizes it. visibility (not display)
   keeps that reserved height while hiding the inactive ones from screen
   readers and the tab order. */
.tierstack { display: grid; }
.tierstack > .tierpanel { grid-area: 1 / 1; display: flex; flex-direction: column; }
.tierstack > .tierpanel > .btn { margin-top: auto; }
.tierpanel[hidden] { visibility: hidden; pointer-events: none; }
.tierpanel { animation: tier-in .28s var(--ease); }
@keyframes tier-in { from { opacity: 0; } to { opacity: 1; } }

.tier-list { display: grid; gap: 9px; margin: 16px 0 18px; }
.tier-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .87rem; color: rgba(255,255,255,.72);
}
.tier-list li::before {
  content: ""; flex: none; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%;
  background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230d1226' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 10px no-repeat;
}

/* ---- 1:1 session rows (real Topmate offerings) ---- */
.sess {
  display: grid; grid-template-columns: 1fr auto; gap: 4px 12px;
  align-items: center; padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.13);
  color: var(--white);
}
.sess:last-of-type { border-bottom: 0; }
.sess__meta {
  grid-column: 1 / -1; font-family: var(--mono); font-size: .68rem;
  letter-spacing: .06em; color: rgba(255,255,255,.45);
}
.sess__name { font-family: var(--display); font-weight: 800; font-size: .98rem; }
.sess__price { font-family: var(--mono); font-weight: 700; font-size: 1.05rem; text-align: right; }
.sess__was { font-size: .8rem; color: rgba(255,255,255,.42); text-decoration: line-through; margin-left: 6px; }
.sess__desc { grid-column: 1 / -1; font-size: .82rem; color: rgba(255,255,255,.6); }
.sess__tag {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  font-family: var(--text); font-size: .66rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--accent); color: var(--ink);
}
.sess:hover .sess__name { color: var(--accent); }

/* the same rows on a light page (pricing.html) */
.sessions--light .sess { border-bottom-color: var(--line); color: var(--ink); }
.sessions--light .sess__meta { color: var(--muted); }
.sessions--light .sess__desc { color: var(--body); }
.sessions--light .sess__was { color: var(--muted); }
.sessions--light .sess:hover .sess__name { color: var(--brand); }